Types

1import type { ReactNode } from 'react';
2import type { ClassValue } from 'clsx';
3 
4// ==================== Theme Types ====================
5 
6/** Theme color variants */
7export type ThemeColor = 'accent' | 'carbon' | 'destructive' | 'info' | 'primary' | 'secondary' | 'success' | 'warning';
8 
9/** Theme size variants */
10export type ThemeSize = '2xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs';
11 
12/** Theme orientation */
13export type ThemeOrientation = 'horizontal' | 'vertical';
14 
15/** Theme alignment */
16export type ThemeAlign = 'center' | 'end' | 'start';
17 
18/** Theme side position */
19export type ThemeSide = 'bottom' | 'left' | 'right' | 'top';
20 
21// ==================== Component Props ====================
22 
23/** Props with className support */
24export interface WithClassName {
25  /** CSS class name */
26  className?: ClassValue;
27}
28 
29/** Props with value support */
30export type Value = string;
31 
32export type MaybeArray<T> = T | Array<T>;
33 
34/** HTML element tag types */
35export type HTMLTag
36  = | 'a'
37    | 'button'
38    | 'div'
39    | 'form'
40    | 'h2'
41    | 'h3'
42    | 'img'
43    | 'input'
44    | 'label'
45    | 'li'
46    | 'nav'
47    | 'ol'
48    | 'p'
49    | 'span'
50    | 'svg'
51    | 'ul'
52    | 'template'
53    | ({} & string);
54 
55/** Props for primitive components with polymorphic rendering */
56export interface PrimitiveProps {
57  /**
58   * The element or component this component should render as. Can be overwritten by `asChild`
59   *
60   * @defaultValue 'div'
61   */
62  as?: HTMLTag | ReactNode;
63  /**
64   * Change the default rendered element for the one passed as a child, merging their props and behavior.
65   *
66   * Read our [Composition](https://www.skyroc-ui.com/docs/guides/composition) guide for more details.
67   */
68  asChild?: boolean;
69}
70 
71/** Base props for styled components with className and size support */
72export type StyledComponentProps<T> = Omit<T, 'className'> & {
73  /** CSS class name */
74  className?: ClassValue;
75  /** Component size variant */
76  size?: ThemeSize;
77};
78 
79/** Props for components with leading and trailing slots */
80export interface SlotProps {
81  /** Leading slot content */
82  leading?: ReactNode;
83  /** Trailing slot content */
84  trailing?: ReactNode;
85}
86 
87/** Props for HTML intrinsic elements with styling support */
88export type HTMLComponentProps<T extends keyof React.JSX.IntrinsicElements> = StyledComponentProps<
89  React.ComponentPropsWithRef<T>
90>;
91 
92// ==================== Utility Types ====================
93 
94/** Acceptable value types for form inputs and data */
95// … truncated