xyne-components 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.cjs +576 -0
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.d.cts +176 -0
  4. package/dist/index.d.ts +176 -0
  5. package/dist/index.js +530 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/styles/index.css +801 -0
  8. package/package.json +53 -0
package/dist/index.d.cts ADDED
@@ -0,0 +1,176 @@
1
+ import React, { CSSProperties } from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+
4
+ interface ListItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
5
+ /** Primary label text */
6
+ label: string;
7
+ /** Optional secondary line below the label */
8
+ subtext?: string;
9
+ /** Item is visually selected */
10
+ selected?: boolean;
11
+ /** Item is active (keyboard-highlighted / current) */
12
+ active?: boolean;
13
+ /** Show the left vertical bar indicator @default true */
14
+ showBar?: boolean;
15
+ /** 16×16 slot before the label */
16
+ leading?: React.ReactNode;
17
+ /** 16×16 slot after the label */
18
+ trailing?: React.ReactNode;
19
+ }
20
+ declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLButtonElement>>;
21
+
22
+ type BadgeVariant = 'badge' | 'dot';
23
+ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
24
+ /** Visual variant: "badge" (pill with count/text) or "dot" (tiny status indicator) @default 'badge' */
25
+ variant?: BadgeVariant;
26
+ /** 12×12 icon slot, shown before the text (only for type="badge") */
27
+ icon?: React.ReactNode;
28
+ }
29
+ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
30
+
31
+ type LabelVariant = 'opened' | 'closed';
32
+ interface LabelProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type'> {
33
+ children: React.ReactNode;
34
+ /** Visual variant: "opened" (primary text) or "closed" (secondary text) @default 'closed' */
35
+ variant?: LabelVariant;
36
+ /** 16×16 slot before the label text */
37
+ leading?: React.ReactNode;
38
+ /** 16×16 slot after the label text */
39
+ trailing?: React.ReactNode;
40
+ }
41
+ declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLButtonElement>>;
42
+
43
+ type DirectoryVariant = 'opened' | 'closed';
44
+ interface DirectoryProps extends React.HTMLAttributes<HTMLDivElement> {
45
+ /** Label text shown in the header row */
46
+ label: string;
47
+ /** Visual variant: "opened" (children visible) or "closed" (collapsed) @default 'closed' */
48
+ variant?: DirectoryVariant;
49
+ /** 16×16 slot before the label (folder icon) */
50
+ leading?: React.ReactNode;
51
+ /** 16×16 slot after the label (chevron icon) */
52
+ trailing?: React.ReactNode;
53
+ /** Called when the header row is clicked */
54
+ onHeaderClick?: React.MouseEventHandler<HTMLButtonElement>;
55
+ /** Children rendered below the header when opened (typically ListItem components) */
56
+ children?: React.ReactNode;
57
+ }
58
+ declare const Directory: React.ForwardRefExoticComponent<DirectoryProps & React.RefAttributes<HTMLDivElement>>;
59
+
60
+ /** Per-component theme configuration */
61
+ interface XyneComponentTheme {
62
+ defaultProps?: Record<string, unknown>;
63
+ classNames?: Record<string, string>;
64
+ styles?: Record<string, CSSProperties>;
65
+ }
66
+ /** Full resolved theme object */
67
+ interface XyneTheme {
68
+ /** Color scales — e.g. { orange: { '500': '#fe6d36' }, gray: { '900': '#101828' } } */
69
+ colors: Record<string, Record<string, string>>;
70
+ /** Semantic text colors — maps to --xc-color-text-{key} */
71
+ text: Record<string, string>;
72
+ /** Background colors — maps to --xc-color-bg-{key} */
73
+ bg: Record<string, string>;
74
+ /** Border colors — maps to --xc-color-border-{key} */
75
+ border: Record<string, string>;
76
+ /** Box shadows — maps to --xc-shadow-{key} */
77
+ shadow: Record<string, string>;
78
+ /** Border radius scale — maps to --xc-radius-{key} */
79
+ radius: Record<string, string>;
80
+ /** Spacing scale — maps to --xc-space-{key} */
81
+ spacing: Record<string, string>;
82
+ /** Default font family — maps to --xc-font-family */
83
+ fontFamily: string;
84
+ /** Font weight scale — maps to --xc-font-weight-{key} */
85
+ fontWeight: Record<string, string>;
86
+ /** Font size scale — maps to --xc-font-size-{key} */
87
+ fontSize: Record<string, string>;
88
+ /** Line height scale — maps to --xc-line-height-{key} */
89
+ lineHeight: Record<string, string>;
90
+ /** Arbitrary user-defined values, accessible via useTheme() */
91
+ other: Record<string, unknown>;
92
+ /** Per-component default props, classNames, and styles */
93
+ components: Record<string, XyneComponentTheme>;
94
+ }
95
+ /** Partial theme override — passed to createTheme() and ThemeProvider */
96
+ type XyneThemeOverride = Partial<XyneTheme>;
97
+
98
+ /**
99
+ * Default theme — values match tokens.css (light mode).
100
+ * Used as the base for createTheme() deep-merge.
101
+ */
102
+ declare const DEFAULT_THEME: XyneTheme;
103
+
104
+ /** Deep-merge a partial override with DEFAULT_THEME to produce a full theme. */
105
+ declare function createTheme(override: XyneThemeOverride): XyneTheme;
106
+
107
+ type ColorScheme = 'light' | 'dark' | 'auto';
108
+ type ResolvedColorScheme = 'light' | 'dark';
109
+ interface ColorSchemeContextValue {
110
+ /** Current color scheme preference ('light' | 'dark' | 'auto') */
111
+ colorScheme: ColorScheme;
112
+ /** Resolved value — always 'light' or 'dark' (resolves 'auto' via OS preference) */
113
+ resolvedColorScheme: ResolvedColorScheme;
114
+ /** Set the color scheme preference */
115
+ setColorScheme: (scheme: ColorScheme) => void;
116
+ /** Toggle between light and dark (based on resolved value) */
117
+ toggleColorScheme: () => void;
118
+ }
119
+
120
+ interface ThemeProviderProps {
121
+ /** Theme override — deep-merged with DEFAULT_THEME */
122
+ theme?: XyneThemeOverride;
123
+ /** CSS selector for variable injection. @default ':root' */
124
+ cssVariablesSelector?: string;
125
+ /** Initial color scheme if nothing is stored. @default 'light' */
126
+ defaultColorScheme?: ColorScheme;
127
+ /** Force a specific color scheme — ignores storage and user toggle. */
128
+ forceColorScheme?: ResolvedColorScheme;
129
+ /** localStorage key for color scheme persistence. @default 'xc-color-scheme' */
130
+ colorSchemeStorageKey?: string;
131
+ /** Return the element to set `data-theme` on. @default () => document.documentElement */
132
+ getRootElement?: () => HTMLElement | undefined;
133
+ children: React.ReactNode;
134
+ }
135
+ /**
136
+ * Provides theme context and injects CSS variable overrides via a <style> tag.
137
+ * Wrap your app (or a subtree) to customise design tokens.
138
+ *
139
+ * @example
140
+ * ```tsx
141
+ * const theme = createTheme({ text: { brand: '#0066ff' } })
142
+ * <ThemeProvider theme={theme}>{children}</ThemeProvider>
143
+ * ```
144
+ */
145
+ declare function ThemeProvider({ theme: themeOverride, cssVariablesSelector, defaultColorScheme, forceColorScheme, colorSchemeStorageKey, getRootElement, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
146
+
147
+ /** Access the resolved theme object from the nearest ThemeProvider. */
148
+ declare function useTheme(): XyneTheme;
149
+
150
+ interface ColorSchemeProviderProps {
151
+ /** Initial color scheme if nothing is stored. @default 'light' */
152
+ defaultColorScheme?: ColorScheme;
153
+ /** Force a specific color scheme — ignores storage and user toggle. */
154
+ forceColorScheme?: ResolvedColorScheme;
155
+ /** localStorage key. @default 'xc-color-scheme' */
156
+ storageKey?: string;
157
+ /** Return the element to set `data-theme` on. @default () => document.documentElement */
158
+ getRootElement?: () => HTMLElement | undefined;
159
+ children: React.ReactNode;
160
+ }
161
+ declare function ColorSchemeProvider({ defaultColorScheme, forceColorScheme, storageKey, getRootElement, children, }: ColorSchemeProviderProps): react_jsx_runtime.JSX.Element;
162
+
163
+ /**
164
+ * Access and control the current color scheme.
165
+ *
166
+ * @example
167
+ * ```tsx
168
+ * const { resolvedColorScheme, toggleColorScheme } = useColorScheme()
169
+ * <button onClick={toggleColorScheme}>
170
+ * Current: {resolvedColorScheme}
171
+ * </button>
172
+ * ```
173
+ */
174
+ declare function useColorScheme(): ColorSchemeContextValue;
175
+
176
+ export { Badge, type BadgeProps, type BadgeVariant, type ColorScheme, type ColorSchemeContextValue, ColorSchemeProvider, type ColorSchemeProviderProps, DEFAULT_THEME, Directory, type DirectoryProps, type DirectoryVariant, Label, type LabelProps, type LabelVariant, ListItem, type ListItemProps, type ResolvedColorScheme, ThemeProvider, type ThemeProviderProps, type XyneComponentTheme, type XyneTheme, type XyneThemeOverride, createTheme, useColorScheme, useTheme };
package/dist/index.d.ts ADDED
@@ -0,0 +1,176 @@
1
+ import React, { CSSProperties } from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+
4
+ interface ListItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
5
+ /** Primary label text */
6
+ label: string;
7
+ /** Optional secondary line below the label */
8
+ subtext?: string;
9
+ /** Item is visually selected */
10
+ selected?: boolean;
11
+ /** Item is active (keyboard-highlighted / current) */
12
+ active?: boolean;
13
+ /** Show the left vertical bar indicator @default true */
14
+ showBar?: boolean;
15
+ /** 16×16 slot before the label */
16
+ leading?: React.ReactNode;
17
+ /** 16×16 slot after the label */
18
+ trailing?: React.ReactNode;
19
+ }
20
+ declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLButtonElement>>;
21
+
22
+ type BadgeVariant = 'badge' | 'dot';
23
+ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
24
+ /** Visual variant: "badge" (pill with count/text) or "dot" (tiny status indicator) @default 'badge' */
25
+ variant?: BadgeVariant;
26
+ /** 12×12 icon slot, shown before the text (only for type="badge") */
27
+ icon?: React.ReactNode;
28
+ }
29
+ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
30
+
31
+ type LabelVariant = 'opened' | 'closed';
32
+ interface LabelProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type'> {
33
+ children: React.ReactNode;
34
+ /** Visual variant: "opened" (primary text) or "closed" (secondary text) @default 'closed' */
35
+ variant?: LabelVariant;
36
+ /** 16×16 slot before the label text */
37
+ leading?: React.ReactNode;
38
+ /** 16×16 slot after the label text */
39
+ trailing?: React.ReactNode;
40
+ }
41
+ declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLButtonElement>>;
42
+
43
+ type DirectoryVariant = 'opened' | 'closed';
44
+ interface DirectoryProps extends React.HTMLAttributes<HTMLDivElement> {
45
+ /** Label text shown in the header row */
46
+ label: string;
47
+ /** Visual variant: "opened" (children visible) or "closed" (collapsed) @default 'closed' */
48
+ variant?: DirectoryVariant;
49
+ /** 16×16 slot before the label (folder icon) */
50
+ leading?: React.ReactNode;
51
+ /** 16×16 slot after the label (chevron icon) */
52
+ trailing?: React.ReactNode;
53
+ /** Called when the header row is clicked */
54
+ onHeaderClick?: React.MouseEventHandler<HTMLButtonElement>;
55
+ /** Children rendered below the header when opened (typically ListItem components) */
56
+ children?: React.ReactNode;
57
+ }
58
+ declare const Directory: React.ForwardRefExoticComponent<DirectoryProps & React.RefAttributes<HTMLDivElement>>;
59
+
60
+ /** Per-component theme configuration */
61
+ interface XyneComponentTheme {
62
+ defaultProps?: Record<string, unknown>;
63
+ classNames?: Record<string, string>;
64
+ styles?: Record<string, CSSProperties>;
65
+ }
66
+ /** Full resolved theme object */
67
+ interface XyneTheme {
68
+ /** Color scales — e.g. { orange: { '500': '#fe6d36' }, gray: { '900': '#101828' } } */
69
+ colors: Record<string, Record<string, string>>;
70
+ /** Semantic text colors — maps to --xc-color-text-{key} */
71
+ text: Record<string, string>;
72
+ /** Background colors — maps to --xc-color-bg-{key} */
73
+ bg: Record<string, string>;
74
+ /** Border colors — maps to --xc-color-border-{key} */
75
+ border: Record<string, string>;
76
+ /** Box shadows — maps to --xc-shadow-{key} */
77
+ shadow: Record<string, string>;
78
+ /** Border radius scale — maps to --xc-radius-{key} */
79
+ radius: Record<string, string>;
80
+ /** Spacing scale — maps to --xc-space-{key} */
81
+ spacing: Record<string, string>;
82
+ /** Default font family — maps to --xc-font-family */
83
+ fontFamily: string;
84
+ /** Font weight scale — maps to --xc-font-weight-{key} */
85
+ fontWeight: Record<string, string>;
86
+ /** Font size scale — maps to --xc-font-size-{key} */
87
+ fontSize: Record<string, string>;
88
+ /** Line height scale — maps to --xc-line-height-{key} */
89
+ lineHeight: Record<string, string>;
90
+ /** Arbitrary user-defined values, accessible via useTheme() */
91
+ other: Record<string, unknown>;
92
+ /** Per-component default props, classNames, and styles */
93
+ components: Record<string, XyneComponentTheme>;
94
+ }
95
+ /** Partial theme override — passed to createTheme() and ThemeProvider */
96
+ type XyneThemeOverride = Partial<XyneTheme>;
97
+
98
+ /**
99
+ * Default theme — values match tokens.css (light mode).
100
+ * Used as the base for createTheme() deep-merge.
101
+ */
102
+ declare const DEFAULT_THEME: XyneTheme;
103
+
104
+ /** Deep-merge a partial override with DEFAULT_THEME to produce a full theme. */
105
+ declare function createTheme(override: XyneThemeOverride): XyneTheme;
106
+
107
+ type ColorScheme = 'light' | 'dark' | 'auto';
108
+ type ResolvedColorScheme = 'light' | 'dark';
109
+ interface ColorSchemeContextValue {
110
+ /** Current color scheme preference ('light' | 'dark' | 'auto') */
111
+ colorScheme: ColorScheme;
112
+ /** Resolved value — always 'light' or 'dark' (resolves 'auto' via OS preference) */
113
+ resolvedColorScheme: ResolvedColorScheme;
114
+ /** Set the color scheme preference */
115
+ setColorScheme: (scheme: ColorScheme) => void;
116
+ /** Toggle between light and dark (based on resolved value) */
117
+ toggleColorScheme: () => void;
118
+ }
119
+
120
+ interface ThemeProviderProps {
121
+ /** Theme override — deep-merged with DEFAULT_THEME */
122
+ theme?: XyneThemeOverride;
123
+ /** CSS selector for variable injection. @default ':root' */
124
+ cssVariablesSelector?: string;
125
+ /** Initial color scheme if nothing is stored. @default 'light' */
126
+ defaultColorScheme?: ColorScheme;
127
+ /** Force a specific color scheme — ignores storage and user toggle. */
128
+ forceColorScheme?: ResolvedColorScheme;
129
+ /** localStorage key for color scheme persistence. @default 'xc-color-scheme' */
130
+ colorSchemeStorageKey?: string;
131
+ /** Return the element to set `data-theme` on. @default () => document.documentElement */
132
+ getRootElement?: () => HTMLElement | undefined;
133
+ children: React.ReactNode;
134
+ }
135
+ /**
136
+ * Provides theme context and injects CSS variable overrides via a <style> tag.
137
+ * Wrap your app (or a subtree) to customise design tokens.
138
+ *
139
+ * @example
140
+ * ```tsx
141
+ * const theme = createTheme({ text: { brand: '#0066ff' } })
142
+ * <ThemeProvider theme={theme}>{children}</ThemeProvider>
143
+ * ```
144
+ */
145
+ declare function ThemeProvider({ theme: themeOverride, cssVariablesSelector, defaultColorScheme, forceColorScheme, colorSchemeStorageKey, getRootElement, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
146
+
147
+ /** Access the resolved theme object from the nearest ThemeProvider. */
148
+ declare function useTheme(): XyneTheme;
149
+
150
+ interface ColorSchemeProviderProps {
151
+ /** Initial color scheme if nothing is stored. @default 'light' */
152
+ defaultColorScheme?: ColorScheme;
153
+ /** Force a specific color scheme — ignores storage and user toggle. */
154
+ forceColorScheme?: ResolvedColorScheme;
155
+ /** localStorage key. @default 'xc-color-scheme' */
156
+ storageKey?: string;
157
+ /** Return the element to set `data-theme` on. @default () => document.documentElement */
158
+ getRootElement?: () => HTMLElement | undefined;
159
+ children: React.ReactNode;
160
+ }
161
+ declare function ColorSchemeProvider({ defaultColorScheme, forceColorScheme, storageKey, getRootElement, children, }: ColorSchemeProviderProps): react_jsx_runtime.JSX.Element;
162
+
163
+ /**
164
+ * Access and control the current color scheme.
165
+ *
166
+ * @example
167
+ * ```tsx
168
+ * const { resolvedColorScheme, toggleColorScheme } = useColorScheme()
169
+ * <button onClick={toggleColorScheme}>
170
+ * Current: {resolvedColorScheme}
171
+ * </button>
172
+ * ```
173
+ */
174
+ declare function useColorScheme(): ColorSchemeContextValue;
175
+
176
+ export { Badge, type BadgeProps, type BadgeVariant, type ColorScheme, type ColorSchemeContextValue, ColorSchemeProvider, type ColorSchemeProviderProps, DEFAULT_THEME, Directory, type DirectoryProps, type DirectoryVariant, Label, type LabelProps, type LabelVariant, ListItem, type ListItemProps, type ResolvedColorScheme, ThemeProvider, type ThemeProviderProps, type XyneComponentTheme, type XyneTheme, type XyneThemeOverride, createTheme, useColorScheme, useTheme };