@hilum/ui 0.1.2 → 0.1.4

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 (93) hide show
  1. package/README.md +23 -4
  2. package/dist/chunk-J2QQDUF4.js +204 -0
  3. package/dist/chunk-J2QQDUF4.js.map +1 -0
  4. package/dist/create-theme.d.ts +27 -0
  5. package/dist/create-theme.js +172 -0
  6. package/dist/create-theme.js.map +1 -0
  7. package/dist/fonts/instrument-serif-latin-400-italic.woff2 +0 -0
  8. package/dist/fonts/instrument-serif-latin-400-normal.woff2 +0 -0
  9. package/dist/fonts/instrument-serif-latin-ext-400-italic.woff2 +0 -0
  10. package/dist/fonts/instrument-serif-latin-ext-400-normal.woff2 +0 -0
  11. package/dist/fonts/inter-latin-ext-wght-italic.woff2 +0 -0
  12. package/dist/fonts/inter-latin-ext-wght-normal.woff2 +0 -0
  13. package/dist/fonts/inter-latin-wght-italic.woff2 +0 -0
  14. package/dist/fonts/inter-latin-wght-normal.woff2 +0 -0
  15. package/dist/fonts.css +74 -0
  16. package/dist/index.d.ts +21 -8
  17. package/dist/index.js +393 -381
  18. package/dist/index.js.map +1 -1
  19. package/dist/tokens.css +59 -50
  20. package/dist/tokens.d.ts +46 -38
  21. package/dist/tokens.js +1 -191
  22. package/dist/tokens.js.map +1 -1
  23. package/llms.txt +1514 -0
  24. package/package.json +13 -4
  25. package/src/components/accordion.tsx +5 -5
  26. package/src/components/action-panel.tsx +6 -6
  27. package/src/components/activity-feed.tsx +4 -4
  28. package/src/components/alert-dialog.tsx +3 -3
  29. package/src/components/alert.tsx +4 -4
  30. package/src/components/avatar-stack.tsx +2 -2
  31. package/src/components/avatar.tsx +2 -2
  32. package/src/components/badge.tsx +6 -5
  33. package/src/components/breadcrumb.tsx +5 -5
  34. package/src/components/button-group.tsx +4 -4
  35. package/src/components/button.tsx +6 -5
  36. package/src/components/calendar.tsx +7 -7
  37. package/src/components/card-heading.tsx +3 -3
  38. package/src/components/card.tsx +3 -3
  39. package/src/components/chart.tsx +11 -11
  40. package/src/components/checkbox.tsx +1 -1
  41. package/src/components/color-input.tsx +7 -7
  42. package/src/components/color-picker.tsx +5 -5
  43. package/src/components/combobox.tsx +10 -10
  44. package/src/components/command-palette.tsx +11 -11
  45. package/src/components/command.tsx +13 -13
  46. package/src/components/context-menu.tsx +15 -16
  47. package/src/components/data-table.tsx +6 -6
  48. package/src/components/date-picker.tsx +9 -4
  49. package/src/components/description-list.tsx +8 -8
  50. package/src/components/dialog.tsx +3 -3
  51. package/src/components/drawer.tsx +5 -5
  52. package/src/components/dropdown-menu.tsx +15 -16
  53. package/src/components/empty-state.tsx +3 -3
  54. package/src/components/field.tsx +13 -6
  55. package/src/components/grid-list.tsx +12 -12
  56. package/src/components/hover-card.tsx +1 -1
  57. package/src/components/input-group.tsx +8 -8
  58. package/src/components/input-number.tsx +7 -7
  59. package/src/components/input-otp.tsx +3 -3
  60. package/src/components/input.tsx +5 -4
  61. package/src/components/kbd.tsx +1 -1
  62. package/src/components/label.tsx +1 -1
  63. package/src/components/menubar.tsx +21 -22
  64. package/src/components/native-select.tsx +4 -4
  65. package/src/components/navigation-menu.tsx +10 -10
  66. package/src/components/notification.tsx +10 -10
  67. package/src/components/page-heading.tsx +8 -8
  68. package/src/components/pagination.tsx +1 -1
  69. package/src/components/progress.tsx +1 -1
  70. package/src/components/property-row.tsx +1 -1
  71. package/src/components/radio-card.tsx +6 -6
  72. package/src/components/radio-group.tsx +3 -3
  73. package/src/components/resizable.tsx +3 -3
  74. package/src/components/scroll-area.tsx +1 -1
  75. package/src/components/section-heading.tsx +3 -3
  76. package/src/components/select.tsx +11 -11
  77. package/src/components/separator.tsx +1 -1
  78. package/src/components/sheet.tsx +3 -3
  79. package/src/components/sidebar.tsx +19 -19
  80. package/src/components/skeleton.tsx +1 -1
  81. package/src/components/slider.tsx +1 -1
  82. package/src/components/sonner.tsx +5 -5
  83. package/src/components/stacked-list.tsx +4 -4
  84. package/src/components/stat-card.tsx +6 -6
  85. package/src/components/steps.tsx +13 -12
  86. package/src/components/switch.tsx +1 -1
  87. package/src/components/table.tsx +9 -9
  88. package/src/components/tabs.tsx +2 -2
  89. package/src/components/textarea.tsx +4 -4
  90. package/src/components/toggle.tsx +8 -8
  91. package/src/components/tooltip.tsx +1 -1
  92. package/src/index.ts +3 -2
  93. package/src/tokens/tokens.ts +54 -40
package/src/components/table.tsx CHANGED
@@ -7,13 +7,13 @@ const Table = React.forwardRef<
7
7
  >(({ className, containerClassName, ...props }, ref) => (
8
8
  <div
9
9
  className={cn(
10
- "w-full overflow-hidden rounded-xl border border-taupe-100 bg-white",
10
+ "w-full overflow-hidden rounded-xl border border-ground-100 bg-white",
11
11
  containerClassName,
12
12
  )}
13
13
  >
14
14
  <table
15
15
  ref={ref}
16
- className={cn("min-w-full caption-bottom divide-y divide-taupe-200", className)}
16
+ className={cn("min-w-full caption-bottom divide-y divide-ground-200", className)}
17
17
  {...props}
18
18
  />
19
19
  </div>
@@ -24,7 +24,7 @@ const TableHeader = React.forwardRef<
24
24
  HTMLTableSectionElement,
25
25
  React.HTMLAttributes<HTMLTableSectionElement>
26
26
  >(({ className, ...props }, ref) => (
27
- <thead ref={ref} className={cn("bg-taupe-50", className)} {...props} />
27
+ <thead ref={ref} className={cn("bg-ground-50", className)} {...props} />
28
28
  ));
29
29
  TableHeader.displayName = "TableHeader";
30
30
 
@@ -32,7 +32,7 @@ const TableBody = React.forwardRef<
32
32
  HTMLTableSectionElement,
33
33
  React.HTMLAttributes<HTMLTableSectionElement>
34
34
  >(({ className, ...props }, ref) => (
35
- <tbody ref={ref} className={cn("divide-y divide-taupe-100 bg-white", className)} {...props} />
35
+ <tbody ref={ref} className={cn("divide-y divide-ground-100 bg-white", className)} {...props} />
36
36
  ));
37
37
  TableBody.displayName = "TableBody";
38
38
 
@@ -40,7 +40,7 @@ const TableFooter = React.forwardRef<
40
40
  HTMLTableSectionElement,
41
41
  React.HTMLAttributes<HTMLTableSectionElement>
42
42
  >(({ className, ...props }, ref) => (
43
- <tfoot ref={ref} className={cn("bg-taupe-50 font-medium", className)} {...props} />
43
+ <tfoot ref={ref} className={cn("bg-ground-50 font-medium", className)} {...props} />
44
44
  ));
45
45
  TableFooter.displayName = "TableFooter";
46
46
 
@@ -49,7 +49,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
49
49
  <tr
50
50
  ref={ref}
51
51
  className={cn(
52
- "transition-colors hover:bg-taupe-50/50 data-[state=selected]:bg-taupe-50",
52
+ "transition-colors hover:bg-ground-50/50 data-[state=selected]:bg-ground-50",
53
53
  className,
54
54
  )}
55
55
  {...props}
@@ -65,7 +65,7 @@ const TableHead = React.forwardRef<
65
65
  <th
66
66
  ref={ref}
67
67
  className={cn(
68
- "px-6 py-3 text-left align-middle label text-taupe-400",
68
+ "px-6 py-3 text-left align-middle label text-ground-400",
69
69
  "[&:has([role=checkbox])]:pr-0",
70
70
  className,
71
71
  )}
@@ -81,7 +81,7 @@ const TableCell = React.forwardRef<
81
81
  <td
82
82
  ref={ref}
83
83
  className={cn(
84
- "px-6 py-4 align-middle body text-taupe-500",
84
+ "px-6 py-4 align-middle body text-ground-500",
85
85
  "[&:has([role=checkbox])]:pr-0",
86
86
  className,
87
87
  )}
@@ -94,7 +94,7 @@ const TableCaption = React.forwardRef<
94
94
  HTMLTableCaptionElement,
95
95
  React.HTMLAttributes<HTMLTableCaptionElement>
96
96
  >(({ className, ...props }, ref) => (
97
- <caption ref={ref} className={cn("mt-4 caption text-taupe-400", className)} {...props} />
97
+ <caption ref={ref} className={cn("mt-4 caption text-ground-400", className)} {...props} />
98
98
  ));
99
99
  TableCaption.displayName = "TableCaption";
100
100
 
package/src/components/tabs.tsx CHANGED
@@ -18,7 +18,7 @@ const TabsList = React.forwardRef<
18
18
  >(({ className, ...props }, ref) => (
19
19
  <Tabs.List
20
20
  ref={ref}
21
- className={cn("inline-flex items-center gap-1 border-b border-taupe-100 w-full", className)}
21
+ className={cn("inline-flex items-center gap-1 border-b border-ground-100 w-full", className)}
22
22
  {...props}
23
23
  />
24
24
  ));
@@ -31,7 +31,7 @@ const TabsTrigger = React.forwardRef<
31
31
  <Tabs.Trigger
32
32
  ref={ref}
33
33
  className={cn(
34
- "px-0 pb-2.5 body font-medium text-taupe-400",
34
+ "px-0 pb-2.5 body font-medium text-ground-400",
35
35
  "border-b-2 border-transparent -mb-px",
36
36
  "transition-colors cursor-pointer",
37
37
  "data-[state=active]:text-brand-primary data-[state=active]:border-brand-primary",
package/src/components/textarea.tsx CHANGED
@@ -6,11 +6,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
6
6
  <textarea
7
7
  data-slot="textarea"
8
8
  className={cn(
9
- "flex min-h-[80px] w-full rounded-md border border-taupe-200 bg-white px-3 py-2",
10
- "body text-taupe-900 placeholder:text-taupe-400",
9
+ "flex min-h-[80px] w-full rounded-md border border-ground-200 bg-white px-3 py-2",
10
+ "body text-ground-900 placeholder:text-ground-400",
11
11
  "resize-none transition-colors duration-150",
12
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/15 focus-visible:border-taupe-400",
13
- "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-taupe-50",
12
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ground-900/15 focus-visible:border-ground-400",
13
+ "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ground-50",
14
14
  className,
15
15
  )}
16
16
  {...props}
package/src/components/toggle.tsx CHANGED
@@ -18,18 +18,18 @@ const toggleVariants = cva(
18
18
  variants: {
19
19
  variant: {
20
20
  default: [
21
- "bg-transparent text-taupe-600",
22
- "hover:bg-taupe-100 hover:text-taupe-900",
23
- "data-[state=on]:bg-taupe-100 data-[state=on]:text-taupe-900",
21
+ "bg-transparent text-ground-600",
22
+ "hover:bg-ground-100 hover:text-ground-900",
23
+ "data-[state=on]:bg-ground-100 data-[state=on]:text-ground-900",
24
24
  ],
25
25
  outline: [
26
- "border border-taupe-200 bg-white text-taupe-600 shadow-natural",
27
- "hover:bg-taupe-50 hover:text-taupe-900",
28
- "data-[state=on]:bg-taupe-100 data-[state=on]:text-taupe-900 data-[state=on]:border-taupe-300",
26
+ "border border-ground-200 bg-white text-ground-600 shadow-natural",
27
+ "hover:bg-ground-50 hover:text-ground-900",
28
+ "data-[state=on]:bg-ground-100 data-[state=on]:text-ground-900 data-[state=on]:border-ground-300",
29
29
  ],
30
30
  brand: [
31
- "bg-transparent text-taupe-600",
32
- "hover:bg-taupe-100 hover:text-taupe-900",
31
+ "bg-transparent text-ground-600",
32
+ "hover:bg-ground-100 hover:text-ground-900",
33
33
  "data-[state=on]:bg-brand-primary data-[state=on]:text-white",
34
34
  ],
35
35
  },
package/src/components/tooltip.tsx CHANGED
@@ -27,7 +27,7 @@ const TooltipContent = React.forwardRef<
27
27
  ref={ref}
28
28
  sideOffset={sideOffset}
29
29
  className={cn(
30
- "z-50 rounded-lg bg-taupe-900 px-2.5 py-1.5 caption text-white",
30
+ "z-50 rounded-lg bg-ground-900 px-2.5 py-1.5 caption text-white",
31
31
  "animate-in fade-in-0 zoom-in-95",
32
32
  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
33
33
  "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
package/src/index.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  // @hilum/ui — Hilum design system primitives.
2
2
  // All components, utilities, and re-exports.
3
3
  //
4
- // Hilum apps are plain React (Vite / Electron / React Native via future
5
- // @hilum/ui-native). No Next.js, no "use client" directives — D11.
4
+ // Hilum targets React apps across browser, prerendered docs, Electron, and a
5
+ // future React Native package. Keep exports framework-agnostic and avoid
6
+ // framework-specific entrypoint directives here.
6
7
 
7
8
  // Utilities
8
9
  export { cn } from "./lib/utils";
package/src/tokens/tokens.ts CHANGED
@@ -4,7 +4,8 @@
4
4
  // A build step (scripts/build-tokens.mjs) reads the compiled output of this
5
5
  // file and emits dist/tokens.css for consumers to `@import`.
6
6
  //
7
- // Brand model: D8 — fully fixed. No per-app overrides.
7
+ // Brand model: D8 — base palette is fixed here. Per-product overrides are
8
+ // applied at runtime via createTheme() in @hilum/ui/create-theme.
8
9
  // Color modes: D7 — light + dark, both auto (`prefers-color-scheme`) and
9
10
  // explicit via `[data-theme]`.
10
11
  //
@@ -12,25 +13,25 @@
12
13
  // brand.primary #C100F1 — vivid purple — purple-500 on the scale below
13
14
  // brand.secondary #FFF5BF — pale lemon — butter-200 on the scale below
14
15
  //
15
- // taupe — neutral spine for text, borders, and structure (unchanged)
16
+ // ground — neutral spine for text, borders, and structure (values: Tailwind neutral)
16
17
 
17
18
  export const tokens = {
18
19
  /* ============================================================== *
19
20
  * PALETTE — concrete colors *
20
21
  * ============================================================== */
21
22
 
22
- taupe: {
23
- 50: "#f9f7f5",
24
- 100: "#f2eeea",
25
- 200: "#e3dcd4",
26
- 300: "#c9beb3",
27
- 400: "#a8978a",
28
- 500: "#7d6960",
29
- 600: "#5d4e47",
30
- 700: "#4a3d38",
31
- 800: "#332924",
32
- 900: "#26181a",
33
- 950: "#160e0a",
23
+ ground: {
24
+ 50: "#fafafa",
25
+ 100: "#f5f5f5",
26
+ 200: "#e5e5e5",
27
+ 300: "#d4d4d4",
28
+ 400: "#a3a3a3",
29
+ 500: "#737373",
30
+ 600: "#525252",
31
+ 700: "#404040",
32
+ 800: "#262626",
33
+ 900: "#171717",
34
+ 950: "#0a0a0a",
34
35
  },
35
36
 
36
37
  // Pale lemon — anchor: butter-200 = #FFF5BF
@@ -78,50 +79,50 @@ export const tokens = {
78
79
  semantic: {
79
80
  light: {
80
81
  background: "#ffffff",
81
- foreground: "#26181a", // taupe-900
82
+ foreground: "#171717", // ground-900
82
83
  card: "#ffffff",
83
- cardForeground: "#26181a",
84
- surface: "#f9f7f5", // taupe-50
85
- surfaceForeground: "#332924", // taupe-800
86
- border: "#f2eeea", // taupe-100
87
- input: "#f2eeea",
88
- muted: "#f9f7f5",
89
- mutedForeground: "#7d6960", // taupe-500
84
+ cardForeground: "#171717",
85
+ surface: "#fafafa", // ground-50
86
+ surfaceForeground: "#262626", // ground-800
87
+ border: "#f5f5f5", // ground-100
88
+ input: "#f5f5f5",
89
+ muted: "#fafafa",
90
+ mutedForeground: "#737373", // ground-500
90
91
  accent: "#fdf0ff", // purple-50
91
92
  accentForeground: "#740092", // purple-700
92
93
  primary: "#c100f1", // purple-500 = brand.primary
93
94
  primaryForeground: "#ffffff",
94
- secondary: "#f9f7f5", // taupe-50
95
- secondaryForeground: "#4a3d38", // taupe-700
95
+ secondary: "#fafafa", // ground-50
96
+ secondaryForeground: "#404040", // ground-700
96
97
  destructive: "#dc2626",
97
98
  destructiveForeground: "#ffffff",
98
99
  success: "#CDEA19", // lime — functional semantic only
99
- successForeground: "#26181a",
100
+ successForeground: "#171717",
100
101
  warning: "#fff5bf", // butter-200 = brand.secondary
101
- warningForeground: "#26181a", // taupe-900
102
+ warningForeground: "#171717", // ground-900
102
103
  ring: "#c100f1", // purple-500 = brand.primary
103
104
  },
104
105
  dark: {
105
- background: "#160e0a", // taupe-950
106
- foreground: "#f9f7f5", // taupe-50
107
- card: "#26181a", // taupe-900
108
- cardForeground: "#f9f7f5",
109
- surface: "#26181a",
110
- surfaceForeground: "#f2eeea",
111
- border: "#332924", // taupe-800
112
- input: "#332924",
113
- muted: "#26181a",
114
- mutedForeground: "#a8978a", // taupe-400
106
+ background: "#0a0a0a", // ground-950
107
+ foreground: "#fafafa", // ground-50
108
+ card: "#171717", // ground-900
109
+ cardForeground: "#fafafa",
110
+ surface: "#171717",
111
+ surfaceForeground: "#f5f5f5",
112
+ border: "#262626", // ground-800
113
+ input: "#262626",
114
+ muted: "#171717",
115
+ mutedForeground: "#a3a3a3", // ground-400
115
116
  accent: "#330040", // purple-900
116
117
  accentForeground: "#f5d6ff", // purple-100
117
118
  primary: "#c100f1", // purple-500 — brand stays consistent (D8)
118
119
  primaryForeground: "#ffffff",
119
- secondary: "#26181a",
120
- secondaryForeground: "#f2eeea",
120
+ secondary: "#171717",
121
+ secondaryForeground: "#f5f5f5",
121
122
  destructive: "#ef4444", // red-500 (slightly lighter for dark)
122
123
  destructiveForeground: "#ffffff",
123
124
  success: "#CDEA19", // lime — functional semantic only
124
- successForeground: "#160e0a",
125
+ successForeground: "#0a0a0a",
125
126
  warning: "#221600", // butter-950 surface
126
127
  warningForeground: "#fffad0", // butter-100
127
128
  ring: "#c100f1", // purple-500 = brand.primary
@@ -167,11 +168,24 @@ export const tokens = {
167
168
  base: "0.5rem",
168
169
  sm: "calc(0.5rem - 4px)",
169
170
  md: "calc(0.5rem - 2px)",
170
- lg: "0.5rem",
171
+ lg: "calc(0.5rem + 2px)",
171
172
  xl: "calc(0.5rem + 4px)",
172
173
  full: "9999px",
173
174
  },
174
175
 
176
+ /* ============================================================== *
177
+ * Z-INDEX — semantic layering scale *
178
+ * ============================================================== */
179
+
180
+ zIndex: {
181
+ dropdown: 40,
182
+ sticky: 50,
183
+ fixed: 60,
184
+ modal: 100,
185
+ popover: 110,
186
+ tooltip: 120,
187
+ },
188
+
175
189
  shadow: {
176
190
  natural:
177
191
  "0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06)",