@akira-io/ui 1.0.0 → 1.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 (70) hide show
  1. package/README.md +15 -10
  2. package/dist/blocks.d.ts +159 -6
  3. package/dist/blocks.js +1388 -29
  4. package/dist/blocks.js.map +1 -1
  5. package/dist/button-B6wQRe7p.d.ts +16 -0
  6. package/dist/chunk-5AJFQ6C4.js +35 -0
  7. package/dist/chunk-5AJFQ6C4.js.map +1 -0
  8. package/dist/chunk-6QM5BA7B.js +148 -0
  9. package/dist/chunk-6QM5BA7B.js.map +1 -0
  10. package/dist/chunk-6X4TKSF6.js +21 -0
  11. package/dist/chunk-6X4TKSF6.js.map +1 -0
  12. package/dist/chunk-DSD7MVLL.js +287 -0
  13. package/dist/chunk-DSD7MVLL.js.map +1 -0
  14. package/dist/chunk-IQMRJXEO.js +59 -0
  15. package/dist/chunk-IQMRJXEO.js.map +1 -0
  16. package/dist/chunk-JAHTUAQL.js +82 -0
  17. package/dist/chunk-JAHTUAQL.js.map +1 -0
  18. package/dist/{chunk-A2SIZOEA.js → chunk-KYWA5UYN.js} +125 -45
  19. package/dist/chunk-KYWA5UYN.js.map +1 -0
  20. package/dist/chunk-L2H5GIF7.js +22 -0
  21. package/dist/chunk-L2H5GIF7.js.map +1 -0
  22. package/dist/chunk-LKSM3WLK.js +44 -0
  23. package/dist/chunk-LKSM3WLK.js.map +1 -0
  24. package/dist/{chunk-5MQWJVM2.js → chunk-MNGNBEYN.js} +168 -200
  25. package/dist/chunk-MNGNBEYN.js.map +1 -0
  26. package/dist/chunk-SA5LM2GD.js +102 -0
  27. package/dist/chunk-SA5LM2GD.js.map +1 -0
  28. package/dist/chunk-UUEWFCKT.js +28 -0
  29. package/dist/chunk-UUEWFCKT.js.map +1 -0
  30. package/dist/{chunk-42BJBH56.js → chunk-UUTXPPRN.js} +521 -107
  31. package/dist/chunk-UUTXPPRN.js.map +1 -0
  32. package/dist/{chunk-UXL33CZ4.js → chunk-YOVY3KT6.js} +13 -11
  33. package/dist/chunk-YOVY3KT6.js.map +1 -0
  34. package/dist/code.d.ts +6 -0
  35. package/dist/code.js +651 -0
  36. package/dist/code.js.map +1 -0
  37. package/dist/context-VgHq4U98.d.ts +384 -0
  38. package/dist/editor.d.ts +126 -0
  39. package/dist/editor.js +436 -0
  40. package/dist/editor.js.map +1 -0
  41. package/dist/index.d.ts +93 -17
  42. package/dist/index.js +996 -472
  43. package/dist/index.js.map +1 -1
  44. package/dist/inertia.d.ts +47 -2
  45. package/dist/inertia.js +138 -7
  46. package/dist/inertia.js.map +1 -1
  47. package/dist/input-4uxAHW6y.d.ts +5 -0
  48. package/dist/json-viewer-BTHBACj9.d.ts +50 -0
  49. package/dist/{language-Bft6rBBt.d.ts → language-Dgjr9bm3.d.ts} +1 -1
  50. package/dist/locales/pt.d.ts +26 -4
  51. package/dist/locales/pt.js +127 -1
  52. package/dist/locales/pt.js.map +1 -1
  53. package/dist/password-input-r39y2pCT.d.ts +50 -0
  54. package/dist/shells.d.ts +45 -7
  55. package/dist/shells.js +95 -60
  56. package/dist/shells.js.map +1 -1
  57. package/dist/{sidebar-BDhG9SUU.d.ts → sidebar-BhOIlSjt.d.ts} +4 -12
  58. package/dist/{types-Cno1_Ijx.d.ts → types-B4QS3h5p.d.ts} +9 -1
  59. package/dist/types-CT0rBsFc.d.ts +110 -0
  60. package/package.json +170 -130
  61. package/theme.css +20 -0
  62. package/themes/nosferry.css +4 -0
  63. package/dist/chunk-42BJBH56.js.map +0 -1
  64. package/dist/chunk-5MQWJVM2.js.map +0 -1
  65. package/dist/chunk-A2SIZOEA.js.map +0 -1
  66. package/dist/chunk-POE7OYET.js +0 -96
  67. package/dist/chunk-POE7OYET.js.map +0 -1
  68. package/dist/chunk-UXL33CZ4.js.map +0 -1
  69. package/dist/date-range-filter-QEa8fhUM.d.ts +0 -149
  70. package/dist/types-cOieac8G.d.ts +0 -77
package/README.md CHANGED
@@ -64,9 +64,12 @@ Import a brand preset after `theme.css` and set `data-brand` on `<html>`:
64
64
  <html data-brand="nosferry"></html>
65
65
  ```
66
66
 
67
- `themes/nosferry.css` ships today as the worked example: four custom properties (`--primary` and
68
- `--primary-foreground`, light and dark) scoped to `[data-brand='nosferry']`. Write your own preset the same
69
- way and ship it alongside your app; omitting `data-brand` renders Akira purple.
67
+ `themes/nosferry.css` ships today as the worked example: it declares the required `--primary` /
68
+ `--primary-foreground` pair and the optional `--destructive` / `--destructive-foreground` pair for both
69
+ light and dark mode, eight declarations in total, scoped to `[data-brand='nosferry']`. Every preset must
70
+ declare the primary pair in both schemes; it may add the destructive pair only as a complete pair in both
71
+ schemes. Write your own preset the same way and ship it alongside your app; omitting `data-brand` renders
72
+ Akira purple.
70
73
 
71
74
  ## Use components
72
75
 
@@ -90,7 +93,7 @@ importing one.
90
93
 
91
94
  | Import | Contents |
92
95
  | --------------------------- | ----------------------------------------------------------------------------------------------------------- |
93
- | `@akira-io/ui` | 55 shadcn/ui components + `cn` (zero framework coupling) |
96
+ | `@akira-io/ui` | 56 React components + `cn` (zero framework coupling) |
94
97
  | `@akira-io/ui/blocks` | 8 higher-level blocks: command palette, stat cards, settings cards, tour, and more |
95
98
  | `@akira-io/ui/shells` | 12 application shell pieces: sidebar, header, nav, settings layout; take a polymorphic `linkComponent` prop |
96
99
  | `@akira-io/ui/inertia` | The same shells with the Inertia `Link` and `usePage().url` pre-bound |
@@ -98,14 +101,16 @@ importing one.
98
101
  | `@akira-io/ui/themes/*.css` | Brand presets (`nosferry.css` ships as the example) |
99
102
  | `@akira-io/ui/locales/pt` | Portuguese labels for the components that take them, as a typed object to spread |
100
103
 
101
- Component text defaults to English. To render it in Portuguese, spread the locale object rather than
102
- restating each prop:
104
+ Component text defaults to English. To render an app in Portuguese, hand the bundle to the locale provider
105
+ once, at the root; every localized component reads it, and a prop still wins on the screen that needs it:
103
106
 
104
107
  ```tsx
105
- import { DataTable } from '@akira-io/ui';
106
- import { dataTableLabelsPt } from '@akira-io/ui/locales/pt';
108
+ import { UiLocaleProvider } from '@akira-io/ui';
109
+ import { ptLabels } from '@akira-io/ui/locales/pt';
107
110
 
108
- <DataTable {...dataTableLabelsPt} columns={columns} data={rows} />;
111
+ <UiLocaleProvider labels={ptLabels}>
112
+ <App />
113
+ </UiLocaleProvider>;
109
114
  ```
110
115
 
111
116
  ## Documentation
@@ -119,7 +124,7 @@ Full documentation starts at [`docs/00-index.md`](docs/00-index.md):
119
124
  - [Adoption Guide](docs/05-adoption-guide.md)
120
125
  - [Development & Release](docs/06-development.md)
121
126
 
122
- A hosted documentation site is planned but does not exist yet.
127
+ The hosted documentation and live component preview are available at [ui.akira-io.com](https://ui.akira-io.com).
123
128
 
124
129
  ## Testing
125
130
 
package/dist/blocks.d.ts CHANGED
@@ -1,11 +1,19 @@
1
- import { D as DateFilterValue, a as DateFilterLabels, b as DateFilterOption, c as DateFilterUnit } from './types-cOieac8G.js';
2
- export { C as CommandPalette, d as CommandPaletteGroup, e as CommandPaletteItem, f as CommandPaletteProps, g as DATE_FILTER_LABELS, h as DATE_FILTER_OPERATORS, i as DATE_FILTER_PRESETS, j as DATE_FILTER_UNITS, k as DateFilterMode, l as DateFilterOperator, u as useCommandPalette } from './types-cOieac8G.js';
1
+ import { D as DateFilterValue, a as DateFilterLabels, b as DateFilterOption, c as DateFilterUnit, C as CopyButtonLabels } from './context-VgHq4U98.js';
2
+ export { d as CommandPalette, e as CommandPaletteGroup, f as CommandPaletteItem, g as CommandPaletteProps, h as DATE_FILTER_LABELS, i as DATE_FILTER_OPERATORS, j as DATE_FILTER_PRESETS, k as DATE_FILTER_UNITS, l as DateFilterMode, m as DateFilterOperator, S as SettingsEntry, n as SettingsEntryProps, o as SettingsGroup, p as SettingsGroupProps, q as SettingsLabels, r as SettingsPage, s as SettingsPageProps, t as SettingsSection, u as SettingsSectionProps, U as UiLabelSections, v as UiLabels, w as UiLocaleProvider, x as settingsLabels, y as useCommandPalette, z as useUiLabels, A as useUiLocale } from './context-VgHq4U98.js';
3
+ import { F as FormOverlayIntent, a as FormOverlayLabels, T as TwoFactorLabelProps, b as TwoFactorCodeMode, c as TwoFactorQrProps } from './types-CT0rBsFc.js';
4
+ export { D as DangerZone, d as DangerZoneAction, e as DangerZoneLabels, f as DangerZoneProps, g as FormOverlayActions, h as FormOverlayActionsProps, i as TwoFactorLabels, j as TwoFactorSetupStep, k as dangerZoneLabels, l as formOverlayDefaultLabels, t as twoFactorLabels } from './types-CT0rBsFc.js';
3
5
  import * as React from 'react';
4
- import { ReactNode, PropsWithChildren, ReactElement } from 'react';
6
+ import { ReactNode, PropsWithChildren, ReactElement, ComponentProps } from 'react';
5
7
  import { LucideIcon } from 'lucide-react';
6
- import { S as SurfaceProps } from './language-Bft6rBBt.js';
8
+ import { S as SurfaceProps } from './language-Dgjr9bm3.js';
7
9
  import { T as TourStep, a as TourDefinition, b as TourBreakpoint, c as TourProgress, d as TourLabels } from './types-u1qfmJQi.js';
8
10
  export { D as DEFAULT_TOUR_LABELS, e as TourOutcome } from './types-u1qfmJQi.js';
11
+ import { B as Button } from './button-B6wQRe7p.js';
12
+ import './types-B4QS3h5p.js';
13
+ import '@tanstack/react-table';
14
+ import './json-viewer-BTHBACj9.js';
15
+ import 'class-variance-authority';
16
+ import 'class-variance-authority/types';
9
17
 
10
18
  type DateFilterPanel = 'root' | 'fixed' | 'relative';
11
19
  interface DateFilterContextValue {
@@ -60,6 +68,8 @@ declare function DateFilterRelative({ children }: {
60
68
  children?: ReactNode;
61
69
  }): React.JSX.Element;
62
70
 
71
+ declare function decodeDateFilter(encoded: string | null | undefined): DateFilterValue;
72
+
63
73
  declare function encodeDateFilter(filter: DateFilterValue): string | null;
64
74
 
65
75
  declare function resolveRelativeRange(unit: DateFilterUnit, amount: number, includeCurrent: boolean, now?: Date, offsetAmount?: number, offsetUnit?: DateFilterUnit): {
@@ -73,14 +83,48 @@ declare function formatRangePreview(range: {
73
83
 
74
84
  declare function summariseDateFilter(value: DateFilterValue, presets: DateFilterOption[], operators: DateFilterOption[], units: DateFilterOption[], labels: DateFilterLabels): string;
75
85
 
86
+ interface DetailEditSheetProps {
87
+ open: boolean;
88
+ onOpenChange: (open: boolean) => void;
89
+ title: React.ReactNode;
90
+ description?: React.ReactNode;
91
+ processing?: boolean;
92
+ intent?: FormOverlayIntent;
93
+ labels?: FormOverlayLabels;
94
+ className?: string;
95
+ children: React.ReactNode;
96
+ onSave: () => void;
97
+ onCancel?: () => void;
98
+ }
99
+ declare function DetailEditSheet({ open, onOpenChange, title, description, processing, intent, labels, className, children, onSave, onCancel, }: DetailEditSheetProps): React.JSX.Element;
100
+
101
+ interface FormDialogProps {
102
+ open: boolean;
103
+ onOpenChange: (open: boolean) => void;
104
+ title: React.ReactNode;
105
+ description?: React.ReactNode;
106
+ processing?: boolean;
107
+ intent?: FormOverlayIntent;
108
+ labels?: FormOverlayLabels;
109
+ className?: string;
110
+ children: React.ReactNode;
111
+ onSave: () => void;
112
+ onCancel?: () => void;
113
+ }
114
+ declare function FormDialog({ open, onOpenChange, title, description, processing, intent, labels, className, children, onSave, onCancel, }: FormDialogProps): React.JSX.Element;
115
+
76
116
  interface InfoFieldProps {
77
117
  icon: LucideIcon;
78
118
  label: string;
79
119
  value: ReactNode;
120
+ copyable?: boolean;
121
+ copyValue?: string;
122
+ copyLabel?: CopyButtonLabels['copyLabel'];
123
+ copiedLabel?: CopyButtonLabels['copiedLabel'];
80
124
  iconClassName?: string;
81
125
  className?: string;
82
126
  }
83
- declare function InfoField({ icon: Icon, label, value, iconClassName, className, }: InfoFieldProps): React.JSX.Element;
127
+ declare function InfoField({ icon: Icon, label, value, copyable, copyValue, copyLabel, copiedLabel, iconClassName, className, }: InfoFieldProps): React.JSX.Element;
84
128
  interface InfoFieldGroupProps {
85
129
  children: ReactNode;
86
130
  className?: string;
@@ -141,6 +185,53 @@ interface ToggleRowProps {
141
185
  }
142
186
  declare function ToggleRow({ id, label, description, checked, onChange, disabled, }: ToggleRowProps): React.JSX.Element;
143
187
 
188
+ interface SettingsFieldProps {
189
+ id?: string;
190
+ label: string;
191
+ description?: string;
192
+ error?: string;
193
+ required?: boolean;
194
+ className?: string;
195
+ children: (fieldId: string) => ReactNode;
196
+ }
197
+ declare function SettingsField({ id, label, description, error, required, className, children, }: SettingsFieldProps): React.JSX.Element;
198
+ interface ControlProps<T> {
199
+ id?: string;
200
+ label: string;
201
+ description?: string;
202
+ error?: string;
203
+ required?: boolean;
204
+ disabled?: boolean;
205
+ placeholder?: string;
206
+ value: T;
207
+ onChange: (value: T) => void;
208
+ className?: string;
209
+ }
210
+ type TextFieldProps = ControlProps<string> & {
211
+ type?: 'text' | 'email' | 'url' | 'tel' | 'password';
212
+ };
213
+ declare function TextField({ type, value, onChange, disabled, placeholder, ...field }: TextFieldProps): React.JSX.Element;
214
+ type NumberFieldProps = ControlProps<number | ''> & {
215
+ min?: number;
216
+ max?: number;
217
+ step?: number;
218
+ };
219
+ declare function NumberField({ value, onChange, disabled, placeholder, min, max, step, ...field }: NumberFieldProps): React.JSX.Element;
220
+ type DateFieldProps = ControlProps<string> & {
221
+ min?: string;
222
+ max?: string;
223
+ };
224
+ declare function DateField({ value, onChange, disabled, min, max, ...field }: DateFieldProps): React.JSX.Element;
225
+ interface SelectFieldOption {
226
+ value: string;
227
+ label: string;
228
+ disabled?: boolean;
229
+ }
230
+ type SelectFieldProps = ControlProps<string> & {
231
+ options: SelectFieldOption[];
232
+ };
233
+ declare function SelectField({ value, onChange, options, disabled, placeholder, ...field }: SelectFieldProps): React.JSX.Element;
234
+
144
235
  interface StatCardProps extends SurfaceProps {
145
236
  title: string;
146
237
  value: ReactNode;
@@ -183,4 +274,66 @@ declare function useTour(definition: TourDefinition, options?: {
183
274
  restart: () => void;
184
275
  };
185
276
 
186
- export { DateFilter, DateFilterAll, DateFilterContent, type DateFilterContextValue, DateFilterFixed, DateFilterItem, DateFilterLabels, DateFilterOption, type DateFilterPanel, DateFilterPresets, type DateFilterProps, DateFilterRelative, DateFilterSeparator, DateFilterTrigger, DateFilterUnit, DateFilterValue, InfoField, InfoFieldGroup, type InfoFieldGroupProps, type InfoFieldProps, type LocalizedField, LocalizedFields, type LocalizedFieldsProps, SectionHeader, type SectionHeaderProps, SettingsCard, type SettingsCardProps, SettingsPanel, type SettingsPanelProps, StatCard, type StatCardProps, StatsGrid, type StatsGridProps, ToggleRow, type ToggleRowProps, TourBreakpoint, TourDefinition, TourLabels, TourProgress, TourProvider, TourStep, encodeDateFilter, formatRangePreview, resolveRelativeRange, resolveSteps, shouldStartTour, stepsForBreakpoint, summariseDateFilter, useDateFilter, useTour, useTourController };
277
+ interface TwoFactorChallengeProps extends TwoFactorLabelProps {
278
+ onSubmit: (code: string, mode: TwoFactorCodeMode) => void | Promise<void>;
279
+ errors?: string | string[] | null;
280
+ allowRecoveryCode?: boolean;
281
+ title?: string;
282
+ description?: string;
283
+ footer?: ReactNode;
284
+ className?: string;
285
+ }
286
+ declare function TwoFactorChallenge({ onSubmit, errors, allowRecoveryCode, title, description, footer, labels, className, }: TwoFactorChallengeProps): React.JSX.Element;
287
+
288
+ interface TwoFactorDisableButtonProps extends TwoFactorLabelProps {
289
+ onDisable: () => void | Promise<void>;
290
+ disabled?: boolean;
291
+ variant?: ComponentProps<typeof Button>['variant'];
292
+ size?: ComponentProps<typeof Button>['size'];
293
+ className?: string;
294
+ }
295
+ declare function TwoFactorDisableButton({ onDisable, disabled, variant, size, labels, className, }: TwoFactorDisableButtonProps): React.JSX.Element;
296
+
297
+ interface TwoFactorRecoveryCodesProps extends TwoFactorLabelProps {
298
+ codes: string[];
299
+ defaultRevealed?: boolean;
300
+ onRegenerate?: () => void | Promise<void>;
301
+ showHeading?: boolean;
302
+ className?: string;
303
+ }
304
+ declare function TwoFactorRecoveryCodes({ codes, defaultRevealed, onRegenerate, showHeading, labels, className, }: TwoFactorRecoveryCodesProps): React.JSX.Element;
305
+
306
+ interface TwoFactorScanStepProps extends TwoFactorLabelProps, TwoFactorQrProps {
307
+ manualSetupKey?: string | null;
308
+ className?: string;
309
+ }
310
+ declare function TwoFactorScanStep({ qrCode, qrCodeSvg, manualSetupKey, labels, className, }: TwoFactorScanStepProps): React.JSX.Element;
311
+
312
+ interface TwoFactorSetupDialogProps extends TwoFactorLabelProps, TwoFactorQrProps {
313
+ open: boolean;
314
+ onOpenChange: (open: boolean) => void;
315
+ enabled?: boolean;
316
+ manualSetupKey?: string | null;
317
+ recoveryCodes?: string[];
318
+ errors?: string | string[] | null;
319
+ onConfirm: (code: string) => void | Promise<void>;
320
+ onRequestSetupData?: () => void | Promise<void>;
321
+ onRegenerateRecoveryCodes?: () => void | Promise<void>;
322
+ onCompleted?: () => void;
323
+ className?: string;
324
+ }
325
+ declare function TwoFactorSetupDialog({ open, onOpenChange, enabled, qrCode, qrCodeSvg, manualSetupKey, recoveryCodes, errors, onConfirm, onRequestSetupData, onRegenerateRecoveryCodes, onCompleted, labels, className, }: TwoFactorSetupDialogProps): React.JSX.Element;
326
+
327
+ interface TwoFactorVerifyFormProps extends TwoFactorLabelProps {
328
+ onSubmit: (code: string, mode: TwoFactorCodeMode) => void | Promise<void>;
329
+ errors?: string | string[] | null;
330
+ allowRecoveryCode?: boolean;
331
+ length?: number;
332
+ autoFocus?: boolean;
333
+ submitLabel?: string;
334
+ footer?: ReactNode;
335
+ className?: string;
336
+ }
337
+ declare function TwoFactorVerifyForm({ onSubmit, errors, allowRecoveryCode, length, autoFocus, submitLabel, footer, labels, className, }: TwoFactorVerifyFormProps): React.JSX.Element;
338
+
339
+ export { DateField, type DateFieldProps, DateFilter, DateFilterAll, DateFilterContent, type DateFilterContextValue, DateFilterFixed, DateFilterItem, DateFilterLabels, DateFilterOption, type DateFilterPanel, DateFilterPresets, type DateFilterProps, DateFilterRelative, DateFilterSeparator, DateFilterTrigger, DateFilterUnit, DateFilterValue, DetailEditSheet, type DetailEditSheetProps, FormDialog, type FormDialogProps, FormOverlayIntent, FormOverlayLabels, InfoField, InfoFieldGroup, type InfoFieldGroupProps, type InfoFieldProps, type LocalizedField, LocalizedFields, type LocalizedFieldsProps, NumberField, type NumberFieldProps, SectionHeader, type SectionHeaderProps, SelectField, type SelectFieldOption, type SelectFieldProps, SettingsCard, type SettingsCardProps, SettingsField, type SettingsFieldProps, SettingsPanel, type SettingsPanelProps, StatCard, type StatCardProps, StatsGrid, type StatsGridProps, TextField, type TextFieldProps, ToggleRow, type ToggleRowProps, TourBreakpoint, TourDefinition, TourLabels, TourProgress, TourProvider, TourStep, TwoFactorChallenge, type TwoFactorChallengeProps, TwoFactorCodeMode, TwoFactorDisableButton, type TwoFactorDisableButtonProps, TwoFactorLabelProps, TwoFactorQrProps, TwoFactorRecoveryCodes, type TwoFactorRecoveryCodesProps, TwoFactorScanStep, type TwoFactorScanStepProps, TwoFactorSetupDialog, type TwoFactorSetupDialogProps, TwoFactorVerifyForm, type TwoFactorVerifyFormProps, decodeDateFilter, encodeDateFilter, formatRangePreview, resolveRelativeRange, resolveSteps, shouldStartTour, stepsForBreakpoint, summariseDateFilter, useDateFilter, useTour, useTourController };