@kinetixui/ui 0.17.0 → 0.19.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 (62) hide show
  1. package/dist/index.d.ts +16 -1
  2. package/dist/index.js +455 -238
  3. package/package.json +2 -2
  4. package/src/components/audio-player.tsx +2 -2
  5. package/src/components/badge.tsx +1 -1
  6. package/src/components/banner.tsx +1 -1
  7. package/src/components/button.tsx +8 -8
  8. package/src/components/calendar.tsx +1 -1
  9. package/src/components/chart.tsx +2 -2
  10. package/src/components/checkbox.tsx +2 -2
  11. package/src/components/circular-progress.tsx +1 -1
  12. package/src/components/code-block.tsx +1 -1
  13. package/src/components/color-picker.tsx +4 -0
  14. package/src/components/data-grid.tsx +276 -24
  15. package/src/components/diff-viewer.tsx +9 -8
  16. package/src/components/fab.tsx +1 -1
  17. package/src/components/file-upload.tsx +13 -15
  18. package/src/components/input-group.tsx +1 -1
  19. package/src/components/input-otp.tsx +2 -1
  20. package/src/components/input.tsx +2 -2
  21. package/src/components/json-viewer.tsx +12 -10
  22. package/src/components/list.tsx +41 -27
  23. package/src/components/markdown-editor.tsx +3 -2
  24. package/src/components/message-bubble.tsx +3 -3
  25. package/src/components/multi-select.tsx +14 -3
  26. package/src/components/native-select.tsx +2 -2
  27. package/src/components/notification-center.tsx +2 -2
  28. package/src/components/progress.tsx +1 -1
  29. package/src/components/radio-group.tsx +3 -3
  30. package/src/components/scroll-area.tsx +1 -1
  31. package/src/components/select.tsx +2 -2
  32. package/src/components/skeleton.tsx +1 -1
  33. package/src/components/slider.tsx +2 -2
  34. package/src/components/sonner.tsx +1 -1
  35. package/src/components/spinner.tsx +3 -3
  36. package/src/components/stepper.tsx +3 -3
  37. package/src/components/switch.tsx +1 -1
  38. package/src/components/tab-bar.tsx +1 -1
  39. package/src/components/table-of-contents.tsx +1 -1
  40. package/src/components/textarea.tsx +2 -2
  41. package/src/components/timeline.tsx +1 -1
  42. package/src/components/tooltip.tsx +1 -1
  43. package/src/components/virtual-list.tsx +2 -1
  44. package/src/components-a11y.test.tsx +4 -25
  45. package/src/components-behavior.test.tsx +1 -1
  46. package/src/components-keyboard.test.tsx +388 -34
  47. package/src/stories/AppBar.stories.tsx +1 -1
  48. package/src/stories/Checkbox.stories.tsx +1 -1
  49. package/src/stories/CircularProgress.stories.tsx +4 -4
  50. package/src/stories/DataGrid.stories.tsx +2 -1
  51. package/src/stories/InputOTP.stories.tsx +2 -2
  52. package/src/stories/List.stories.tsx +2 -2
  53. package/src/stories/MarkdownEditor.stories.tsx +1 -1
  54. package/src/stories/MultiSelect.stories.tsx +1 -0
  55. package/src/stories/NativeSelect.stories.tsx +1 -1
  56. package/src/stories/NumberInput.stories.tsx +3 -3
  57. package/src/stories/Progress.stories.tsx +3 -3
  58. package/src/stories/Select.stories.tsx +2 -2
  59. package/src/stories/Slider.stories.tsx +3 -3
  60. package/src/stories/Switch.stories.tsx +1 -1
  61. package/src/stories/ToggleGroup.stories.tsx +6 -6
  62. package/tailwind.config.ts +14 -0
package/src/stories/Progress.stories.tsx CHANGED
@@ -10,7 +10,7 @@ const Demo = () => {
10
10
  const t = setTimeout(() => setV(66), 600);
11
11
  return () => clearTimeout(t);
12
12
  }, []);
13
- return <Progress value={v} className="w-[60%]" />;
13
+ return <Progress value={v} aria-label="Upload progress" className="w-[60%]" />;
14
14
  };
15
15
 
16
16
  const meta = {
@@ -20,12 +20,12 @@ const meta = {
20
20
  argTypes: { value: { control: { type: "range", min: 0, max: 100 } } },
21
21
  parameters: {
22
22
  layout: "centered",
23
- docs: { source: { code: "const [value, setValue] = React.useState(13)\\n// ...\\n<Progress value={value} />", language: "tsx" } },
23
+ docs: { source: { code: "const [value, setValue] = React.useState(13)\\n// ...\\n<Progress value={value} aria-label=\\\"Upload progress\\\" />", language: "tsx" } },
24
24
  },
25
25
  } satisfies Meta;
26
26
 
27
27
  export default meta;
28
28
 
29
- export const Playground: StoryObj<typeof meta> = { render: (args) => <Progress {...args} className="w-60" /> };
29
+ export const Playground: StoryObj<typeof meta> = { render: (args) => <Progress aria-label="Upload progress" {...args} className="w-60" /> };
30
30
 
31
31
  export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
package/src/stories/Select.stories.tsx CHANGED
@@ -6,7 +6,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
6
6
 
7
7
  const Demo = () => (
8
8
  <Select>
9
- <SelectTrigger className="w-[220px]">
9
+ <SelectTrigger className="w-[220px]" aria-label="Fruit">
10
10
  <SelectValue placeholder="Select a fruit" />
11
11
  </SelectTrigger>
12
12
  <SelectContent>
@@ -32,7 +32,7 @@ export default meta;
32
32
 
33
33
  export const Playground: StoryObj<typeof meta> = { render: (args) => (
34
34
  <Select {...args}>
35
- <SelectTrigger className="w-[220px]">
35
+ <SelectTrigger className="w-[220px]" aria-label="Fruit">
36
36
  <SelectValue placeholder="Select a fruit" />
37
37
  </SelectTrigger>
38
38
  <SelectContent>
package/src/stories/Slider.stories.tsx CHANGED
@@ -4,7 +4,7 @@ import * as React from "react";
4
4
  import type { Meta, StoryObj } from "@storybook/react-vite";
5
5
  import { Slider } from "@kinetixui/ui";
6
6
 
7
- const Demo = () => <Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />;
7
+ const Demo = () => <Slider aria-label="Volume" defaultValue={[50]} max={100} step={1} className="w-[60%]" />;
8
8
 
9
9
  const meta = {
10
10
  title: "Form Inputs/Slider",
@@ -13,12 +13,12 @@ const meta = {
13
13
  argTypes: { disabled: { control: "boolean" } },
14
14
  parameters: {
15
15
  layout: "centered",
16
- docs: { source: { code: "<Slider defaultValue={[50]} max={100} step={1} />", language: "tsx" } },
16
+ docs: { source: { code: "<Slider aria-label=\"Volume\" defaultValue={[50]} max={100} step={1} />", language: "tsx" } },
17
17
  },
18
18
  } satisfies Meta;
19
19
 
20
20
  export default meta;
21
21
 
22
- export const Playground: StoryObj<typeof meta> = { render: (args) => <Slider {...args} defaultValue={[50]} max={100} step={1} className="w-60" /> };
22
+ export const Playground: StoryObj<typeof meta> = { render: (args) => <Slider aria-label="Volume" {...args} defaultValue={[50]} max={100} step={1} className="w-60" /> };
23
23
 
24
24
  export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
package/src/stories/Switch.stories.tsx CHANGED
@@ -24,6 +24,6 @@ const meta = {
24
24
 
25
25
  export default meta;
26
26
 
27
- export const Playground: StoryObj<typeof meta> = { render: (args) => <Switch {...args} /> };
27
+ export const Playground: StoryObj<typeof meta> = { render: (args) => <Switch aria-label="Airplane mode" {...args} /> };
28
28
 
29
29
  export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };
package/src/stories/ToggleGroup.stories.tsx CHANGED
@@ -7,9 +7,9 @@ import { Bold, Italic, Underline } from "lucide-react";
7
7
 
8
8
  const Demo = () => (
9
9
  <ToggleGroup type="multiple">
10
- <ToggleGroupItem value="bold"><Bold className="size-4" /></ToggleGroupItem>
11
- <ToggleGroupItem value="italic"><Italic className="size-4" /></ToggleGroupItem>
12
- <ToggleGroupItem value="underline"><Underline className="size-4" /></ToggleGroupItem>
10
+ <ToggleGroupItem value="bold" aria-label="Bold"><Bold className="size-4" /></ToggleGroupItem>
11
+ <ToggleGroupItem value="italic" aria-label="Italic"><Italic className="size-4" /></ToggleGroupItem>
12
+ <ToggleGroupItem value="underline" aria-label="Underline"><Underline className="size-4" /></ToggleGroupItem>
13
13
  </ToggleGroup>
14
14
  );
15
15
 
@@ -28,9 +28,9 @@ export default meta;
28
28
 
29
29
  export const Playground: StoryObj<typeof meta> = { render: (args) => (
30
30
  <ToggleGroup {...args}>
31
- <ToggleGroupItem value="bold"><Bold className="size-4" /></ToggleGroupItem>
32
- <ToggleGroupItem value="italic"><Italic className="size-4" /></ToggleGroupItem>
33
- <ToggleGroupItem value="underline"><Underline className="size-4" /></ToggleGroupItem>
31
+ <ToggleGroupItem value="bold" aria-label="Bold"><Bold className="size-4" /></ToggleGroupItem>
32
+ <ToggleGroupItem value="italic" aria-label="Italic"><Italic className="size-4" /></ToggleGroupItem>
33
+ <ToggleGroupItem value="underline" aria-label="Underline"><Underline className="size-4" /></ToggleGroupItem>
34
34
  </ToggleGroup>
35
35
  ) };
36
36
 
package/tailwind.config.ts CHANGED
@@ -66,6 +66,20 @@ export default {
66
66
  "on-container": c("--semantic-on-info-container"),
67
67
  },
68
68
  tertiary: { DEFAULT: c("--tertiary"), foreground: c("--tertiary-foreground") },
69
+ // Role tokens layered over `primary` (which stays the shadcn-compatible source). `action`, `link`
70
+ // and `focus` default to it, so a theme that only sets `--primary` still works; override them
71
+ // individually to split the interactive colour, link colour and focus colour. `brand` is identity
72
+ // (logos, headers), not a control colour.
73
+ brand: { DEFAULT: c("--brand"), foreground: c("--brand-foreground") },
74
+ action: {
75
+ DEFAULT: c("--action"),
76
+ foreground: c("--action-foreground"),
77
+ // explicit states for native ports; on the web, hover/pressed derive from `action` (bg-action/90, /85)
78
+ hover: c("--action-hover"),
79
+ pressed: c("--action-pressed"),
80
+ },
81
+ link: c("--link"),
82
+ focus: c("--focus"),
69
83
  border: c("--border"),
70
84
  input: c("--input"),
71
85
  ring: c("--ring"),