@akira-io/ui 1.0.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.
@@ -0,0 +1,77 @@
1
+ import * as React from 'react';
2
+ import { ReactNode } from 'react';
3
+ import { LucideIcon } from 'lucide-react';
4
+
5
+ interface CommandPaletteItem {
6
+ id: string;
7
+ label: string;
8
+ icon?: LucideIcon;
9
+ value?: string;
10
+ hint?: string;
11
+ }
12
+ interface CommandPaletteGroup {
13
+ heading: string;
14
+ items: CommandPaletteItem[];
15
+ }
16
+ interface CommandPaletteLabels {
17
+ placeholder: string;
18
+ noResultsLabel: string;
19
+ }
20
+ interface CommandPaletteProps {
21
+ open: boolean;
22
+ onOpenChange: (open: boolean) => void;
23
+ groups: CommandPaletteGroup[];
24
+ onSelect: (item: CommandPaletteItem) => void;
25
+ query?: string;
26
+ onQueryChange?: (query: string) => void;
27
+ placeholder?: CommandPaletteLabels['placeholder'];
28
+ noResultsLabel?: CommandPaletteLabels['noResultsLabel'];
29
+ emptyState?: ReactNode;
30
+ className?: string;
31
+ }
32
+ declare function CommandPalette({ open, onOpenChange, groups, onSelect, query, onQueryChange, placeholder, noResultsLabel, emptyState, className, }: CommandPaletteProps): React.JSX.Element;
33
+ declare function useCommandPalette(initialOpen?: boolean): {
34
+ open: boolean;
35
+ setOpen: React.Dispatch<React.SetStateAction<boolean>>;
36
+ toggle: () => void;
37
+ };
38
+
39
+ type DateFilterMode = 'all' | 'preset' | 'fixed' | 'relative';
40
+ type DateFilterOperator = 'between' | 'before' | 'on' | 'after';
41
+ type DateFilterUnit = 'day' | 'week' | 'month' | 'quarter' | 'year';
42
+ interface DateFilterValue {
43
+ mode: DateFilterMode;
44
+ preset?: string;
45
+ operator?: DateFilterOperator;
46
+ start?: string;
47
+ end?: string;
48
+ unit?: DateFilterUnit;
49
+ amount?: number;
50
+ include_current?: boolean;
51
+ offset_amount?: number;
52
+ offset_unit?: DateFilterUnit;
53
+ }
54
+ interface DateFilterOption {
55
+ value: string;
56
+ label: string;
57
+ }
58
+ interface DateFilterLabels {
59
+ all: string;
60
+ fixed: string;
61
+ relative: string;
62
+ relativeTitle: string;
63
+ apply: string;
64
+ back: string;
65
+ latest: string;
66
+ ago: string;
67
+ includeCurrent: string;
68
+ startingAgo: string;
69
+ removeOffset: string;
70
+ fallback: string;
71
+ }
72
+ declare const DEFAULT_PRESETS: DateFilterOption[];
73
+ declare const DEFAULT_OPERATORS: DateFilterOption[];
74
+ declare const DEFAULT_UNITS: DateFilterOption[];
75
+ declare const DEFAULT_LABELS: DateFilterLabels;
76
+
77
+ export { CommandPalette as C, type DateFilterValue as D, type DateFilterLabels as a, type DateFilterOption as b, type DateFilterUnit as c, type CommandPaletteGroup as d, type CommandPaletteItem as e, type CommandPaletteProps as f, DEFAULT_LABELS as g, DEFAULT_OPERATORS as h, DEFAULT_PRESETS as i, DEFAULT_UNITS as j, type DateFilterMode as k, type DateFilterOperator as l, type CommandPaletteLabels as m, useCommandPalette as u };
@@ -0,0 +1,28 @@
1
+ type TourBreakpoint = 'mobile' | 'desktop';
2
+ type TourOutcome = 'completed' | 'skipped' | 'dismissed';
3
+ interface TourStep {
4
+ target: string;
5
+ title: string;
6
+ description: string;
7
+ breakpoints?: TourBreakpoint[];
8
+ }
9
+ interface TourDefinition {
10
+ id: string;
11
+ version: number;
12
+ steps: TourStep[];
13
+ }
14
+ interface TourProgress {
15
+ tour: string;
16
+ version: number;
17
+ lastStep: number;
18
+ outcome: TourOutcome;
19
+ }
20
+ interface TourLabels {
21
+ next: string;
22
+ previous: string;
23
+ done: string;
24
+ progress: string;
25
+ }
26
+ declare const DEFAULT_TOUR_LABELS: TourLabels;
27
+
28
+ export { DEFAULT_TOUR_LABELS as D, type TourStep as T, type TourDefinition as a, type TourBreakpoint as b, type TourProgress as c, type TourLabels as d, type TourOutcome as e };
package/package.json ADDED
@@ -0,0 +1,142 @@
1
+ {
2
+ "name": "@akira-io/ui",
3
+ "version": "1.0.0",
4
+ "description": "Open-source React component library: the full shadcn/ui set on an OKLCH design-token system with swappable brand palettes.",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/akira-io/ui.git"
9
+ },
10
+ "homepage": "https://ui.akira-io.com",
11
+ "bugs": {
12
+ "url": "https://github.com/akira-io/ui/issues"
13
+ },
14
+ "keywords": [
15
+ "react",
16
+ "component-library",
17
+ "design-system",
18
+ "design-tokens",
19
+ "shadcn-ui",
20
+ "radix-ui",
21
+ "tailwindcss",
22
+ "oklch",
23
+ "accessible",
24
+ "typescript"
25
+ ],
26
+ "engines": {
27
+ "node": ">=20"
28
+ },
29
+ "type": "module",
30
+ "sideEffects": [
31
+ "**/*.css"
32
+ ],
33
+ "files": [
34
+ "dist",
35
+ "theme.css",
36
+ "themes"
37
+ ],
38
+ "exports": {
39
+ ".": {
40
+ "types": "./dist/index.d.ts",
41
+ "import": "./dist/index.js"
42
+ },
43
+ "./blocks": {
44
+ "types": "./dist/blocks.d.ts",
45
+ "import": "./dist/blocks.js"
46
+ },
47
+ "./shells": {
48
+ "types": "./dist/shells.d.ts",
49
+ "import": "./dist/shells.js"
50
+ },
51
+ "./inertia": {
52
+ "types": "./dist/inertia.d.ts",
53
+ "import": "./dist/inertia.js"
54
+ },
55
+ "./locales/pt": {
56
+ "types": "./dist/locales/pt.d.ts",
57
+ "import": "./dist/locales/pt.js"
58
+ },
59
+ "./theme.css": "./theme.css",
60
+ "./themes/*.css": "./themes/*.css"
61
+ },
62
+ "publishConfig": {
63
+ "access": "public"
64
+ },
65
+ "scripts": {
66
+ "build": "tsup",
67
+ "dev": "tsup --watch",
68
+ "test": "vitest run",
69
+ "typecheck": "tsc --noEmit",
70
+ "format": "prettier --write \"src/**/*.{ts,tsx}\" \"tests/**/*.ts\" theme.css",
71
+ "format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"tests/**/*.ts\" theme.css",
72
+ "prepublishOnly": "bun run build"
73
+ },
74
+ "dependencies": {
75
+ "@radix-ui/react-accordion": "^1.2.12",
76
+ "@radix-ui/react-avatar": "^1.1.11",
77
+ "@radix-ui/react-checkbox": "^1.3.3",
78
+ "@radix-ui/react-collapsible": "^1.1.12",
79
+ "@radix-ui/react-dialog": "^1.1.15",
80
+ "@radix-ui/react-dropdown-menu": "^2.1.16",
81
+ "@radix-ui/react-label": "^2.1.8",
82
+ "@radix-ui/react-navigation-menu": "^1.2.14",
83
+ "@radix-ui/react-popover": "^1.1.15",
84
+ "@radix-ui/react-scroll-area": "^1.2.10",
85
+ "@radix-ui/react-select": "^2.2.6",
86
+ "@radix-ui/react-separator": "^1.1.8",
87
+ "@radix-ui/react-slot": "^1.2.4",
88
+ "@radix-ui/react-switch": "^1.2.6",
89
+ "@radix-ui/react-tabs": "^1.1.13",
90
+ "@radix-ui/react-toggle": "^1.1.10",
91
+ "@radix-ui/react-toggle-group": "^1.1.11",
92
+ "@radix-ui/react-tooltip": "^1.2.8",
93
+ "@tanstack/react-table": "^8.21.3",
94
+ "class-variance-authority": "^0.7.1",
95
+ "clsx": "^2.1.1",
96
+ "cmdk": "^1.1.1",
97
+ "date-fns": "^4.4.0",
98
+ "driver.js": "^1.8.0",
99
+ "embla-carousel-react": "^8.6.0",
100
+ "input-otp": "^1.4.2",
101
+ "lucide-react": "^0.563.0",
102
+ "radix-ui": "^1.6.0",
103
+ "react-day-picker": "^10.0.1",
104
+ "react-resizable-panels": "^4",
105
+ "sonner": "^2.0.7",
106
+ "tailwind-merge": "^3.4.0",
107
+ "vaul": "^1.1.2"
108
+ },
109
+ "peerDependencies": {
110
+ "@inertiajs/react": "^1.0.0 || ^2.0.0 || ^3.0.0",
111
+ "react": "^18.0.0 || ^19.0.0",
112
+ "react-dom": "^18.0.0 || ^19.0.0",
113
+ "react-hook-form": "^7.0.0",
114
+ "recharts": "^3.8.0",
115
+ "tailwindcss-animate": "^1.0.0"
116
+ },
117
+ "peerDependenciesMeta": {
118
+ "@inertiajs/react": {
119
+ "optional": true
120
+ },
121
+ "react-hook-form": {
122
+ "optional": true
123
+ },
124
+ "recharts": {
125
+ "optional": true
126
+ }
127
+ },
128
+ "devDependencies": {
129
+ "@types/react": "^19.2.10",
130
+ "@types/react-dom": "^19.2.3",
131
+ "prettier": "^3.8.1",
132
+ "prettier-plugin-organize-imports": "^4.3.0",
133
+ "prettier-plugin-tailwindcss": "^0.7.2",
134
+ "react": "^19.2.4",
135
+ "react-dom": "^19.2.4",
136
+ "react-hook-form": "^7.71.0",
137
+ "recharts": "3.8.0",
138
+ "tsup": "^8.5.0",
139
+ "typescript": "^5.9.2",
140
+ "vitest": "^4.1.10"
141
+ }
142
+ }
package/theme.css ADDED
@@ -0,0 +1,224 @@
1
+ @custom-variant dark (&:is(.dark *));
2
+ @custom-variant nested-surface (
3
+ &:is(
4
+ [data-slot='card']:not([data-inset]) *,
5
+ [data-slot='popover-content'] *,
6
+ [data-slot='dialog-content'] *,
7
+ [data-slot='sheet-content'] *,
8
+ [data-slot='drawer-content'] *,
9
+ [data-slot='dropdown-menu-content'] *,
10
+ [data-slot='sidebar'] *,
11
+ [data-slot='data-table'] *
12
+ )
13
+ );
14
+
15
+ @theme {
16
+ --font-sans:
17
+ 'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
18
+ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
19
+ 'Noto Color Emoji';
20
+
21
+ --radius-lg: var(--radius);
22
+ --radius-md: calc(var(--radius) - 2px);
23
+ --radius-sm: calc(var(--radius) - 4px);
24
+
25
+ --color-akira-50: oklch(0.951 0.014 288);
26
+ --color-akira-100: oklch(0.925 0.025 288);
27
+ --color-akira-200: oklch(0.876 0.048 288);
28
+ --color-akira-300: oklch(0.793 0.094 288);
29
+ --color-akira-400: oklch(0.684 0.155 288);
30
+ --color-akira-500: oklch(0.588 0.212 288);
31
+ --color-akira-600: oklch(0.523 0.238 288);
32
+ --color-akira-700: oklch(0.473 0.229 288);
33
+ --color-akira-800: oklch(0.414 0.197 288);
34
+ --color-akira-900: oklch(0.362 0.16 288);
35
+ --color-akira-950: oklch(0.265 0.12 288);
36
+
37
+ --color-background: var(--background);
38
+ --color-foreground: var(--foreground);
39
+ --color-card: var(--card);
40
+ --color-card-foreground: var(--card-foreground);
41
+ --color-popover: var(--popover);
42
+ --color-popover-foreground: var(--popover-foreground);
43
+ --color-primary: var(--primary);
44
+ --color-primary-foreground: var(--primary-foreground);
45
+ --color-secondary: var(--secondary);
46
+ --color-secondary-foreground: var(--secondary-foreground);
47
+ --color-muted: var(--muted);
48
+ --color-muted-foreground: var(--muted-foreground);
49
+ --color-accent: var(--accent);
50
+ --color-accent-foreground: var(--accent-foreground);
51
+ --color-destructive: var(--destructive);
52
+ --color-destructive-foreground: var(--destructive-foreground);
53
+ --color-success: var(--success);
54
+ --color-success-foreground: var(--success-foreground);
55
+ --color-border: var(--border);
56
+ --color-surface-recessed: var(--surface-recessed);
57
+ --color-surface-control: var(--surface-control);
58
+ --color-surface-ring: var(--surface-ring);
59
+ --color-surface-highlight: var(--surface-highlight);
60
+ --color-surface-shade: var(--surface-shade);
61
+ --color-input: var(--input);
62
+ --color-ring: var(--ring);
63
+ --color-sidebar: var(--sidebar);
64
+ --color-sidebar-foreground: var(--sidebar-foreground);
65
+ --color-sidebar-primary: var(--sidebar-primary);
66
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
67
+ --color-sidebar-accent: var(--sidebar-accent);
68
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
69
+ --color-sidebar-border: var(--sidebar-border);
70
+ --color-sidebar-ring: var(--sidebar-ring);
71
+ }
72
+
73
+ :root {
74
+ --background: oklch(1 0 0);
75
+ --foreground: oklch(0.145 0 0);
76
+ --card: oklch(1 0 0);
77
+ --card-foreground: oklch(0.145 0 0);
78
+ --popover: oklch(1 0 0);
79
+ --popover-foreground: oklch(0.145 0 0);
80
+ --primary: var(--color-akira-600);
81
+ --primary-foreground: oklch(0.985 0 0);
82
+ --secondary: oklch(0.97 0 0);
83
+ --secondary-foreground: oklch(0.205 0 0);
84
+ --muted: oklch(0.97 0 0);
85
+ --muted-foreground: oklch(0.556 0 0);
86
+ --accent: oklch(0.97 0 0);
87
+ --accent-foreground: oklch(0.205 0 0);
88
+ --destructive: oklch(0.577 0.245 27.325);
89
+ --destructive-foreground: oklch(0.985 0 0);
90
+ --success: oklch(0.508 0.118 165.612);
91
+ --success-foreground: oklch(0.985 0 0);
92
+ --border: oklch(0.885 0 0);
93
+ --surface-recessed: oklch(0.97 0 0);
94
+ --surface-control: oklch(0.955 0 0 / 0.9);
95
+ --surface-ring: oklch(0 0 0 / 0.035);
96
+ --surface-highlight: oklch(1 0 0 / 0.5);
97
+ --surface-shade: oklch(0 0 0 / 0.025);
98
+ --glass-shadow:
99
+ inset 0 1px 0 0 var(--surface-highlight),
100
+ inset 0 -1px 0 0 var(--surface-shade), 0 1px 2px 0 oklch(0 0 0 / 0.04);
101
+ --glass-elevation:
102
+ inset 0 1px 0 0 var(--surface-highlight),
103
+ inset 0 -1px 0 0 var(--surface-shade),
104
+ 0 8px 24px -8px oklch(0 0 0 / 0.1),
105
+ 0 24px 48px -16px oklch(0 0 0 / 0.12);
106
+ --input: oklch(0.922 0 0);
107
+ --ring: var(--primary);
108
+ --radius: 0.625rem;
109
+ --sidebar: oklch(0.985 0 0);
110
+ --sidebar-foreground: oklch(0.145 0 0);
111
+ --sidebar-primary: var(--primary);
112
+ --sidebar-primary-foreground: var(--primary-foreground);
113
+ --sidebar-accent: oklch(0.97 0 0);
114
+ --sidebar-accent-foreground: oklch(0.205 0 0);
115
+ --sidebar-border: oklch(0.922 0 0);
116
+ --sidebar-ring: oklch(0.87 0 0);
117
+ }
118
+
119
+ .dark {
120
+ --background: oklch(0.145 0 0);
121
+ --foreground: oklch(0.985 0 0);
122
+ --card: oklch(0.205 0 0);
123
+ --card-foreground: oklch(0.985 0 0);
124
+ --popover: oklch(0.205 0 0);
125
+ --popover-foreground: oklch(0.985 0 0);
126
+ --primary: var(--color-akira-400);
127
+ --primary-foreground: oklch(0.161 0.027 294);
128
+ --secondary: oklch(0.269 0 0);
129
+ --secondary-foreground: oklch(0.985 0 0);
130
+ --muted: oklch(0.269 0 0);
131
+ --muted-foreground: oklch(0.708 0 0);
132
+ --accent: oklch(0.269 0 0);
133
+ --accent-foreground: oklch(0.985 0 0);
134
+ --destructive: oklch(0.704 0.191 22.216);
135
+ --destructive-foreground: oklch(0.161 0.027 294);
136
+ --success: oklch(0.765 0.177 163.223);
137
+ --success-foreground: oklch(0.161 0.027 294);
138
+ --border: oklch(0.28 0 0);
139
+ --surface-recessed: oklch(0.17 0 0);
140
+ --surface-control: oklch(0.269 0 0 / 0.9);
141
+ --surface-ring: oklch(1 0 0 / 0.045);
142
+ --surface-highlight: oklch(1 0 0 / 0.035);
143
+ --surface-shade: oklch(0 0 0 / 0.12);
144
+ --glass-shadow:
145
+ inset 0 1px 0 0 var(--surface-highlight),
146
+ inset 0 -1px 0 0 var(--surface-shade), 0 1px 2px 0 oklch(0 0 0 / 0.3);
147
+ --glass-elevation:
148
+ inset 0 1px 0 0 var(--surface-highlight),
149
+ inset 0 -1px 0 0 var(--surface-shade),
150
+ 0 8px 24px -8px oklch(0 0 0 / 0.4), 0 24px 48px -16px oklch(0 0 0 / 0.5);
151
+ --input: oklch(0.269 0 0);
152
+ --ring: var(--primary);
153
+ --sidebar: oklch(0.205 0 0);
154
+ --sidebar-foreground: oklch(0.985 0 0);
155
+ --sidebar-primary: var(--primary);
156
+ --sidebar-primary-foreground: var(--primary-foreground);
157
+ --sidebar-accent: oklch(0.269 0 0);
158
+ --sidebar-accent-foreground: oklch(0.985 0 0);
159
+ --sidebar-border: oklch(0.269 0 0);
160
+ --sidebar-ring: oklch(0.439 0 0);
161
+ }
162
+
163
+ @layer base {
164
+ * {
165
+ @apply border-border;
166
+ }
167
+
168
+ body {
169
+ @apply bg-background text-foreground;
170
+ }
171
+ }
172
+
173
+ .driver-popover.akira-tour {
174
+ background-color: var(--popover);
175
+ color: var(--popover-foreground);
176
+ border: 1px solid var(--border);
177
+ border-radius: var(--radius-lg);
178
+ box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.35);
179
+ max-width: 22rem;
180
+ }
181
+
182
+ .driver-popover.akira-tour .driver-popover-title,
183
+ .driver-popover.akira-tour .driver-popover-close-btn {
184
+ color: var(--popover-foreground);
185
+ }
186
+
187
+ .driver-popover.akira-tour .driver-popover-title {
188
+ font-weight: 600;
189
+ }
190
+
191
+ .driver-popover.akira-tour .driver-popover-description,
192
+ .driver-popover.akira-tour .driver-popover-progress-text {
193
+ color: var(--muted-foreground);
194
+ }
195
+
196
+ .driver-popover.akira-tour .driver-popover-navigation-btns button {
197
+ background-color: var(--primary);
198
+ color: var(--primary-foreground);
199
+ border: 0;
200
+ border-radius: var(--radius-md);
201
+ padding: 0.375rem 0.75rem;
202
+ text-shadow: none;
203
+ }
204
+
205
+ .driver-popover.akira-tour .driver-popover-prev-btn {
206
+ background-color: var(--secondary);
207
+ color: var(--secondary-foreground);
208
+ }
209
+
210
+ .driver-popover.akira-tour .driver-popover-arrow-side-top {
211
+ border-top-color: var(--popover);
212
+ }
213
+
214
+ .driver-popover.akira-tour .driver-popover-arrow-side-bottom {
215
+ border-bottom-color: var(--popover);
216
+ }
217
+
218
+ .driver-popover.akira-tour .driver-popover-arrow-side-left {
219
+ border-left-color: var(--popover);
220
+ }
221
+
222
+ .driver-popover.akira-tour .driver-popover-arrow-side-right {
223
+ border-right-color: var(--popover);
224
+ }
@@ -0,0 +1,9 @@
1
+ [data-brand='nosferry'] {
2
+ --primary: oklch(0.577 0.245 27.325); /* red-600 */
3
+ --primary-foreground: oklch(0.985 0 0);
4
+ }
5
+
6
+ [data-brand='nosferry'].dark {
7
+ --primary: oklch(0.704 0.191 22.216); /* red-400 */
8
+ --primary-foreground: oklch(0.161 0.027 294);
9
+ }