@olympusoss/canvas 2.20.2 → 3.2.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 (214) hide show
  1. package/README.md +73 -35
  2. package/package.json +46 -177
  3. package/src/cn.ts +3 -0
  4. package/src/index.ts +12 -603
  5. package/src/theme.ts +62 -0
  6. package/src/tokens.ts +11 -0
  7. package/styles/atoms/avatar.css +22 -0
  8. package/styles/atoms/badge.css +83 -0
  9. package/styles/atoms/breadcrumb.css +35 -0
  10. package/styles/atoms/button-group.css +23 -0
  11. package/styles/atoms/button.css +107 -0
  12. package/styles/atoms/checkbox.css +55 -0
  13. package/styles/atoms/combobox.css +75 -0
  14. package/styles/atoms/dropdown.css +54 -0
  15. package/styles/atoms/icon.css +8 -0
  16. package/styles/atoms/input-group.css +45 -0
  17. package/styles/atoms/input.css +56 -0
  18. package/styles/atoms/kbd.css +15 -0
  19. package/styles/atoms/pagination.css +48 -0
  20. package/styles/atoms/popover.css +14 -0
  21. package/styles/atoms/radio.css +28 -0
  22. package/styles/atoms/select.css +57 -0
  23. package/styles/atoms/separator.css +32 -0
  24. package/styles/atoms/skeleton.css +32 -0
  25. package/styles/atoms/spinner.css +26 -0
  26. package/styles/atoms/switch.css +45 -0
  27. package/styles/atoms/textarea.css +31 -0
  28. package/styles/atoms/tooltip.css +53 -0
  29. package/styles/atoms/typography.css +105 -0
  30. package/styles/base.css +17 -0
  31. package/styles/canvas.css +77 -52
  32. package/styles/molecules/alert.css +66 -0
  33. package/styles/molecules/card.css +58 -0
  34. package/styles/molecules/code-block.css +18 -0
  35. package/styles/molecules/empty-state.css +17 -0
  36. package/styles/molecules/field.css +27 -0
  37. package/styles/molecules/form.css +27 -0
  38. package/styles/molecules/page-header.css +52 -0
  39. package/styles/molecules/section-card.css +49 -0
  40. package/styles/molecules/stat-card.css +71 -0
  41. package/styles/molecules/toast.css +95 -0
  42. package/styles/organisms/app-shell.css +46 -0
  43. package/styles/organisms/calendar.css +73 -0
  44. package/styles/organisms/command.css +94 -0
  45. package/styles/organisms/data-table.css +142 -0
  46. package/styles/organisms/dialog.css +72 -0
  47. package/styles/organisms/filter-panel.css +58 -0
  48. package/styles/organisms/row-menu.css +69 -0
  49. package/styles/organisms/sheet.css +70 -0
  50. package/styles/organisms/sidebar.css +146 -0
  51. package/styles/organisms/stepper.css +63 -0
  52. package/styles/organisms/tabs.css +40 -0
  53. package/styles/organisms/topbar.css +24 -0
  54. package/styles/patterns/backdrops.css +35 -0
  55. package/styles/patterns/density.css +66 -0
  56. package/styles/patterns/focus.css +22 -0
  57. package/styles/patterns/glass.css +85 -0
  58. package/styles/patterns/high-contrast.css +70 -0
  59. package/styles/patterns/reduced-motion.css +12 -0
  60. package/styles/patterns/scrollbar.css +10 -0
  61. package/styles/reset.css +89 -0
  62. package/styles/tokens/colors.css +106 -0
  63. package/styles/tokens/motion.css +33 -0
  64. package/styles/tokens/radius.css +10 -0
  65. package/styles/tokens/shadows.css +35 -0
  66. package/styles/tokens/spacing.css +19 -0
  67. package/styles/tokens/typography.css +6 -0
  68. package/styles/tokens/z-index.css +12 -0
  69. package/styles/utilities/display.css +66 -0
  70. package/styles/utilities/flexbox.css +240 -0
  71. package/styles/utilities/gap.css +288 -0
  72. package/styles/utilities/grid.css +138 -0
  73. package/styles/utilities/position.css +78 -0
  74. package/styles/utilities/sizing.css +138 -0
  75. package/tsconfig.json +20 -21
  76. package/src/components/atoms/README.md +0 -11
  77. package/src/components/atoms/aspect-ratio.tsx +0 -32
  78. package/src/components/atoms/avatar.tsx +0 -98
  79. package/src/components/atoms/badge.tsx +0 -44
  80. package/src/components/atoms/brand-mark.tsx +0 -74
  81. package/src/components/atoms/button.tsx +0 -105
  82. package/src/components/atoms/checkbox.tsx +0 -63
  83. package/src/components/atoms/flex-box.tsx +0 -105
  84. package/src/components/atoms/icon.tsx +0 -34
  85. package/src/components/atoms/input.tsx +0 -92
  86. package/src/components/atoms/label.tsx +0 -41
  87. package/src/components/atoms/logo.tsx +0 -89
  88. package/src/components/atoms/progress.tsx +0 -55
  89. package/src/components/atoms/radio-group.tsx +0 -122
  90. package/src/components/atoms/scroll-area.tsx +0 -106
  91. package/src/components/atoms/section.tsx +0 -48
  92. package/src/components/atoms/separator.tsx +0 -45
  93. package/src/components/atoms/skeleton.tsx +0 -17
  94. package/src/components/atoms/slider.tsx +0 -93
  95. package/src/components/atoms/spinner.tsx +0 -47
  96. package/src/components/atoms/switch.tsx +0 -60
  97. package/src/components/atoms/textarea.tsx +0 -78
  98. package/src/components/atoms/toggle.tsx +0 -80
  99. package/src/components/charts/activity-heatmap.tsx +0 -186
  100. package/src/components/charts/axes.tsx +0 -21
  101. package/src/components/charts/chart-container.tsx +0 -254
  102. package/src/components/charts/chart-legend.tsx +0 -67
  103. package/src/components/charts/chart-tooltip.tsx +0 -161
  104. package/src/components/charts/chart-types.tsx +0 -49
  105. package/src/components/charts/containers.tsx +0 -11
  106. package/src/components/charts/data.tsx +0 -16
  107. package/src/components/charts/details.tsx +0 -25
  108. package/src/components/charts/dot-pulse.tsx +0 -61
  109. package/src/components/charts/gauge.tsx +0 -106
  110. package/src/components/charts/grids.tsx +0 -8
  111. package/src/components/charts/index.ts +0 -62
  112. package/src/components/charts/labeled-bar-list.tsx +0 -85
  113. package/src/components/charts/metric-breakdown.tsx +0 -316
  114. package/src/components/charts/references.tsx +0 -8
  115. package/src/components/charts/service-health-list.tsx +0 -85
  116. package/src/components/charts/sparkline-area.tsx +0 -80
  117. package/src/components/charts/sparkline.tsx +0 -52
  118. package/src/components/charts/stacked-bar.tsx +0 -104
  119. package/src/components/charts/text.tsx +0 -10
  120. package/src/components/charts/world-heat-map-inner.tsx +0 -317
  121. package/src/components/charts/world-heat-map.tsx +0 -184
  122. package/src/components/molecules/README.md +0 -12
  123. package/src/components/molecules/action-bar.tsx +0 -73
  124. package/src/components/molecules/activity-item.tsx +0 -74
  125. package/src/components/molecules/alert.tsx +0 -86
  126. package/src/components/molecules/animated-background.tsx +0 -92
  127. package/src/components/molecules/auth-shell.tsx +0 -95
  128. package/src/components/molecules/brand-lockup.tsx +0 -48
  129. package/src/components/molecules/breadcrumb.tsx +0 -157
  130. package/src/components/molecules/button-group.tsx +0 -104
  131. package/src/components/molecules/calendar.tsx +0 -217
  132. package/src/components/molecules/card.tsx +0 -102
  133. package/src/components/molecules/client-brand.tsx +0 -95
  134. package/src/components/molecules/code-block.tsx +0 -86
  135. package/src/components/molecules/countdown-button.tsx +0 -92
  136. package/src/components/molecules/empty-state.tsx +0 -56
  137. package/src/components/molecules/error-state.tsx +0 -42
  138. package/src/components/molecules/field-display.tsx +0 -35
  139. package/src/components/molecules/input-otp.tsx +0 -74
  140. package/src/components/molecules/launcher-card.tsx +0 -152
  141. package/src/components/molecules/loading-state.tsx +0 -36
  142. package/src/components/molecules/notification-item.tsx +0 -67
  143. package/src/components/molecules/notification-list.tsx +0 -45
  144. package/src/components/molecules/number-badge.tsx +0 -53
  145. package/src/components/molecules/or-separator.tsx +0 -38
  146. package/src/components/molecules/page-header.tsx +0 -88
  147. package/src/components/molecules/page-tabs.tsx +0 -94
  148. package/src/components/molecules/pagination.tsx +0 -150
  149. package/src/components/molecules/password-input.tsx +0 -83
  150. package/src/components/molecules/password-strength-meter.tsx +0 -104
  151. package/src/components/molecules/phone-input.tsx +0 -200
  152. package/src/components/molecules/search-bar.tsx +0 -64
  153. package/src/components/molecules/secret-field.tsx +0 -158
  154. package/src/components/molecules/section-card.tsx +0 -91
  155. package/src/components/molecules/social-buttons.tsx +0 -165
  156. package/src/components/molecules/stat-card.tsx +0 -100
  157. package/src/components/molecules/status-badge.tsx +0 -42
  158. package/src/components/molecules/stepper.tsx +0 -96
  159. package/src/components/molecules/table.tsx +0 -157
  160. package/src/components/molecules/terminal.tsx +0 -74
  161. package/src/components/molecules/toggle-group.tsx +0 -145
  162. package/src/components/molecules/tooltip.tsx +0 -155
  163. package/src/components/molecules/user-avatar-chip.tsx +0 -71
  164. package/src/components/organisms/README.md +0 -14
  165. package/src/components/organisms/accordion.tsx +0 -154
  166. package/src/components/organisms/alert-dialog.tsx +0 -277
  167. package/src/components/organisms/carousel.tsx +0 -244
  168. package/src/components/organisms/collapsible.tsx +0 -69
  169. package/src/components/organisms/command.tsx +0 -144
  170. package/src/components/organisms/context-menu.tsx +0 -339
  171. package/src/components/organisms/dashboard-grid.tsx +0 -369
  172. package/src/components/organisms/data-table.tsx +0 -330
  173. package/src/components/organisms/dialog.tsx +0 -312
  174. package/src/components/organisms/drawer.tsx +0 -123
  175. package/src/components/organisms/dropdown-menu.tsx +0 -440
  176. package/src/components/organisms/editors/code-editor.tsx +0 -144
  177. package/src/components/organisms/editors/index.ts +0 -4
  178. package/src/components/organisms/editors/markdown-editor.tsx +0 -153
  179. package/src/components/organisms/editors/markdown-renderer.ts +0 -27
  180. package/src/components/organisms/editors/prose-canvas-classes.ts +0 -45
  181. package/src/components/organisms/editors/rich-text-editor.tsx +0 -126
  182. package/src/components/organisms/editors/toolbar/md-toolbar.tsx +0 -129
  183. package/src/components/organisms/editors/toolbar/rte-toolbar.tsx +0 -211
  184. package/src/components/organisms/editors/toolbar/toolbar-shell.tsx +0 -45
  185. package/src/components/organisms/editors/use-codemirror-theme.ts +0 -61
  186. package/src/components/organisms/error-boundary.tsx +0 -61
  187. package/src/components/organisms/form.tsx +0 -174
  188. package/src/components/organisms/hover-card.tsx +0 -115
  189. package/src/components/organisms/menubar.tsx +0 -498
  190. package/src/components/organisms/navbar.tsx +0 -104
  191. package/src/components/organisms/navigation-menu.tsx +0 -235
  192. package/src/components/organisms/popover.tsx +0 -149
  193. package/src/components/organisms/resizable.tsx +0 -58
  194. package/src/components/organisms/schema-form.tsx +0 -232
  195. package/src/components/organisms/select.tsx +0 -309
  196. package/src/components/organisms/sheet.tsx +0 -265
  197. package/src/components/organisms/sidebar.tsx +0 -1040
  198. package/src/components/organisms/sonner.tsx +0 -96
  199. package/src/components/organisms/tabs.tsx +0 -133
  200. package/src/components/organisms/theme-provider.tsx +0 -101
  201. package/src/hooks/use-mobile.tsx +0 -19
  202. package/src/lib/portal-container.tsx +0 -35
  203. package/src/lib/utils.ts +0 -6
  204. package/src/native.ts +0 -23
  205. package/src/tokens/colors.ts +0 -91
  206. package/src/tokens/index.ts +0 -3
  207. package/src/tokens/spacing.ts +0 -55
  208. package/src/tokens/typography.ts +0 -27
  209. package/styles/dashboard-grid.css +0 -47
  210. package/styles/fonts/Roboto-VariableFont_wdth_wght.ttf +0 -0
  211. package/styles/glass.css +0 -175
  212. package/styles/leaflet.css +0 -13
  213. package/styles/tokens.css +0 -317
  214. package/tailwind.config.ts +0 -70
@@ -1,155 +0,0 @@
1
- "use client";
2
-
3
- import * as TooltipPrimitive from "@radix-ui/react-tooltip";
4
- import * as React from "react";
5
-
6
- import { usePortalContainer } from "../../lib/portal-container";
7
- import { cn } from "../../lib/utils";
8
-
9
- export interface TooltipProviderProps
10
- extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> {
11
- /**
12
- * Delay in ms before any tooltip in the provider opens. Set to 0 for
13
- * instant tooltips (e.g. icon rails).
14
- * @default 700
15
- */
16
- delayDuration?: number;
17
- /**
18
- * Delay in ms before a tooltip closes after the cursor leaves. Useful
19
- * for letting users drag from the trigger to the content.
20
- * @default 300
21
- */
22
- skipDelayDuration?: number;
23
- /**
24
- * When true, the tooltip will not close while the user is interacting
25
- * with content inside it (e.g. hover, focus).
26
- * @default false
27
- */
28
- disableHoverableContent?: boolean;
29
- /** All `<Tooltip>`s in the subtree share this provider's delays. */
30
- children: React.ReactNode;
31
- }
32
-
33
- const TooltipProvider = TooltipPrimitive.Provider as React.FC<TooltipProviderProps>;
34
-
35
- export interface TooltipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> {
36
- /** Controlled open state. */
37
- open?: boolean;
38
- /** Initial open state for uncontrolled usage. */
39
- defaultOpen?: boolean;
40
- /** Fires whenever the tooltip opens or closes. */
41
- onOpenChange?: (open: boolean) => void;
42
- /**
43
- * Override the parent provider's `delayDuration` for this tooltip
44
- * specifically.
45
- */
46
- delayDuration?: number;
47
- /**
48
- * Override the parent provider's `disableHoverableContent` for this
49
- * tooltip.
50
- */
51
- disableHoverableContent?: boolean;
52
- /** Trigger + Content. */
53
- children?: React.ReactNode;
54
- }
55
-
56
- const Tooltip = TooltipPrimitive.Root as React.FC<TooltipProps>;
57
-
58
- export interface TooltipTriggerProps
59
- extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> {
60
- /**
61
- * Render as a Radix Slot — forwards props onto the immediate child.
62
- * Common pattern for wrapping a `<Button>` or icon.
63
- * @default false
64
- */
65
- asChild?: boolean;
66
- /** The element that opens the tooltip on hover/focus. */
67
- children?: React.ReactNode;
68
- }
69
-
70
- const TooltipTrigger = TooltipPrimitive.Trigger as React.ForwardRefExoticComponent<
71
- TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>
72
- >;
73
-
74
- export interface TooltipContentProps
75
- extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
76
- /**
77
- * Distance in pixels between the trigger and the tooltip content.
78
- * @default 4
79
- */
80
- sideOffset?: number;
81
- /**
82
- * Distance from the alignment edge.
83
- * @default 0
84
- */
85
- alignOffset?: number;
86
- /**
87
- * Preferred side of the trigger to render on.
88
- * @default "top"
89
- */
90
- side?: "top" | "right" | "bottom" | "left";
91
- /**
92
- * Alignment along the chosen side.
93
- * @default "center"
94
- */
95
- align?: "start" | "center" | "end";
96
- /**
97
- * Avoid colliding with the viewport edges by flipping/shifting.
98
- * @default true
99
- */
100
- avoidCollisions?: boolean;
101
- /**
102
- * Padding kept from collision boundaries.
103
- * @default 0
104
- */
105
- collisionPadding?: number | { top?: number; right?: number; bottom?: number; left?: number };
106
- /**
107
- * Stick to the trigger or partially follow on scroll.
108
- * @default "partial"
109
- */
110
- sticky?: "partial" | "always";
111
- /** Hide the content when the trigger is detached or covered. */
112
- hideWhenDetached?: boolean;
113
- /**
114
- * Force the content to mount even when closed. Pair with a CSS
115
- * animation that fades in/out based on `data-state`.
116
- * @default false
117
- */
118
- forceMount?: true;
119
- /**
120
- * Render as a Radix Slot — forwards props onto the immediate child.
121
- * @default false
122
- */
123
- asChild?: boolean;
124
- /** Tooltip body. Keep terse — one short line is the convention. */
125
- children?: React.ReactNode;
126
- /** Tailwind / CSS classes merged onto the content via `cn()`. */
127
- className?: string;
128
- }
129
-
130
- const TooltipContent = React.forwardRef<
131
- React.ElementRef<typeof TooltipPrimitive.Content>,
132
- TooltipContentProps
133
- >(({ className, sideOffset = 6, children, ...props }, ref) => {
134
- const container = usePortalContainer();
135
- return (
136
- <TooltipPrimitive.Portal container={container ?? undefined}>
137
- <TooltipPrimitive.Content
138
- ref={ref}
139
- data-slot="tooltip-content"
140
- sideOffset={sideOffset}
141
- className={cn(
142
- "z-50 max-w-xs overflow-hidden rounded-md border border-border/50 bg-popover px-2 py-1 text-[11px] font-medium text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 origin-[var(--radix-tooltip-content-transform-origin)]",
143
- className,
144
- )}
145
- {...props}
146
- >
147
- {children}
148
- <TooltipPrimitive.Arrow width={10} height={5} style={{ fill: "hsl(var(--popover))" }} />
149
- </TooltipPrimitive.Content>
150
- </TooltipPrimitive.Portal>
151
- );
152
- });
153
- TooltipContent.displayName = TooltipPrimitive.Content.displayName;
154
-
155
- export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
@@ -1,71 +0,0 @@
1
- "use client";
2
-
3
- import { ChevronDown } from "lucide-react";
4
- import * as React from "react";
5
-
6
- import { cn } from "../../lib/utils";
7
- import { Avatar, AvatarFallback, AvatarImage } from "../atoms/avatar";
8
-
9
- export interface UserAvatarChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
10
- /** Display name (rendered next to the avatar). */
11
- name: string;
12
- /** Optional secondary line. Hidden when `collapsed`. */
13
- email?: string;
14
- /** Initials shown by AvatarFallback when no image is provided. */
15
- fallback?: string;
16
- /** Avatar image src. */
17
- imageSrc?: string;
18
- /** When true, renders only the avatar without name + chevron. */
19
- collapsed?: boolean;
20
- /** Set to false to hide the trailing ChevronDown affordance. */
21
- chevron?: boolean;
22
- }
23
-
24
- export const UserAvatarChip = React.forwardRef<HTMLButtonElement, UserAvatarChipProps>(
25
- (
26
- { name, email, fallback, imageSrc, collapsed = false, chevron = true, className, ...props },
27
- ref,
28
- ) => {
29
- const initials =
30
- fallback ??
31
- name
32
- .split(" ")
33
- .map((part) => part[0])
34
- .filter(Boolean)
35
- .slice(0, 2)
36
- .join("")
37
- .toUpperCase();
38
- return (
39
- <button
40
- ref={ref}
41
- type="button"
42
- aria-label={collapsed ? name : undefined}
43
- className={cn(
44
- "inline-flex items-center gap-2 rounded-full border border-border bg-card text-[13px] font-medium text-foreground transition-colors hover:bg-accent",
45
- collapsed ? "p-1" : "py-1 pl-1 pr-3",
46
- className,
47
- )}
48
- {...props}
49
- >
50
- <Avatar className="h-7 w-7">
51
- {imageSrc && <AvatarImage src={imageSrc} alt={name} />}
52
- <AvatarFallback className="text-[11px] font-semibold">{initials}</AvatarFallback>
53
- </Avatar>
54
- {!collapsed && (
55
- <>
56
- <div className="flex flex-col items-start leading-tight">
57
- <span className="truncate">{name}</span>
58
- {email && (
59
- <span className="truncate text-[11px] font-normal text-muted-foreground">
60
- {email}
61
- </span>
62
- )}
63
- </div>
64
- {chevron && <ChevronDown className="h-3 w-3 text-muted-foreground" aria-hidden />}
65
- </>
66
- )}
67
- </button>
68
- );
69
- },
70
- );
71
- UserAvatarChip.displayName = "UserAvatarChip";
@@ -1,14 +0,0 @@
1
- # Organisms
2
-
3
- Stateful surfaces. Compositions of atoms + molecules that own interactive
4
- state (open/close, selection, form state) or complete complex UX.
5
-
6
- **Can import**: `tokens/`, `lib/utils`, `atoms/`, `molecules/`, React.
7
-
8
- **Cannot import**: anything from `templates/`.
9
-
10
- Organisms are reusable — they don't know about specific app routes or domain
11
- data. `DataTable` is an organism; `IdentitiesTable` (which knows how to render
12
- a `Kratos.Identity`) is app-specific and belongs in that app's `features/`.
13
-
14
- See [CONTRIBUTING.md](../../../CONTRIBUTING.md) for the full atomic-design rules.
@@ -1,154 +0,0 @@
1
- "use client";
2
-
3
- import * as AccordionPrimitive from "@radix-ui/react-accordion";
4
- import { ChevronDown } from "lucide-react";
5
- import * as React from "react";
6
-
7
- import { cn } from "../../lib/utils";
8
-
9
- export interface AccordionProps {
10
- /**
11
- * Selection mode. `"single"` allows one item open at a time;
12
- * `"multiple"` allows multiple items open simultaneously.
13
- */
14
- type: "single" | "multiple";
15
- /**
16
- * Controlled value. For `type="single"` it's a string (id of the open
17
- * item); for `type="multiple"` it's a string array.
18
- */
19
- value?: string | string[];
20
- /** Initial value for uncontrolled usage. */
21
- defaultValue?: string | string[];
22
- /** Fires when the user opens/closes an item. */
23
- onValueChange?: (value: string & string[]) => void;
24
- /**
25
- * For `type="single"` only — when true, an open item can be collapsed
26
- * by clicking it again.
27
- * @default false
28
- */
29
- collapsible?: boolean;
30
- /**
31
- * Disable the entire accordion.
32
- * @default false
33
- */
34
- disabled?: boolean;
35
- /**
36
- * Reading direction. Affects keyboard arrow navigation.
37
- * @default "ltr"
38
- */
39
- dir?: "ltr" | "rtl";
40
- /**
41
- * Layout direction.
42
- * @default "vertical"
43
- */
44
- orientation?: "vertical" | "horizontal";
45
- /**
46
- * Render as a Radix Slot.
47
- * @default false
48
- */
49
- asChild?: boolean;
50
- /** A list of `<AccordionItem>`s. */
51
- children?: React.ReactNode;
52
- className?: string;
53
- }
54
-
55
- const Accordion = AccordionPrimitive.Root as React.ForwardRefExoticComponent<
56
- AccordionProps & React.RefAttributes<HTMLDivElement>
57
- >;
58
-
59
- export interface AccordionItemProps
60
- extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
61
- /** Required — unique value identifying this item. */
62
- value: string;
63
- /**
64
- * Disable only this item.
65
- * @default false
66
- */
67
- disabled?: boolean;
68
- /**
69
- * Render as a Radix Slot.
70
- * @default false
71
- */
72
- asChild?: boolean;
73
- /** A `<AccordionTrigger>` + `<AccordionContent>`. */
74
- children?: React.ReactNode;
75
- className?: string;
76
- }
77
-
78
- const AccordionItem = React.forwardRef<
79
- React.ElementRef<typeof AccordionPrimitive.Item>,
80
- AccordionItemProps
81
- >(({ className, ...props }, ref) => (
82
- <AccordionPrimitive.Item
83
- ref={ref}
84
- data-slot="accordion-item"
85
- className={cn("border-b", className)}
86
- {...props}
87
- />
88
- ));
89
- AccordionItem.displayName = "AccordionItem";
90
-
91
- export interface AccordionTriggerProps
92
- extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
93
- /**
94
- * Render as a Radix Slot.
95
- * @default false
96
- */
97
- asChild?: boolean;
98
- /** Trigger label — typically a section heading. */
99
- children?: React.ReactNode;
100
- className?: string;
101
- }
102
-
103
- const AccordionTrigger = React.forwardRef<
104
- React.ElementRef<typeof AccordionPrimitive.Trigger>,
105
- AccordionTriggerProps
106
- >(({ className, children, ...props }, ref) => (
107
- <AccordionPrimitive.Header className="flex">
108
- <AccordionPrimitive.Trigger
109
- ref={ref}
110
- className={cn(
111
- "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-colors hover:text-brand text-left [&[data-state=open]>svg]:rotate-180",
112
- className,
113
- )}
114
- {...props}
115
- >
116
- {children}
117
- <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
118
- </AccordionPrimitive.Trigger>
119
- </AccordionPrimitive.Header>
120
- ));
121
- AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
122
-
123
- export interface AccordionContentProps
124
- extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
125
- /**
126
- * Force the content to mount even when collapsed.
127
- * @default false
128
- */
129
- forceMount?: true;
130
- /**
131
- * Render as a Radix Slot.
132
- * @default false
133
- */
134
- asChild?: boolean;
135
- /** Item body. */
136
- children?: React.ReactNode;
137
- className?: string;
138
- }
139
-
140
- const AccordionContent = React.forwardRef<
141
- React.ElementRef<typeof AccordionPrimitive.Content>,
142
- AccordionContentProps
143
- >(({ className, children, ...props }, ref) => (
144
- <AccordionPrimitive.Content
145
- ref={ref}
146
- className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
147
- {...props}
148
- >
149
- <div className={cn("pb-4 pt-0", className)}>{children}</div>
150
- </AccordionPrimitive.Content>
151
- ));
152
- AccordionContent.displayName = AccordionPrimitive.Content.displayName;
153
-
154
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
@@ -1,277 +0,0 @@
1
- "use client";
2
-
3
- import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
4
- import * as React from "react";
5
-
6
- import { usePortalContainer } from "../../lib/portal-container";
7
- import { cn } from "../../lib/utils";
8
- import { buttonVariants } from "../atoms/button";
9
-
10
- export interface AlertDialogProps extends React.ComponentProps<typeof AlertDialogPrimitive.Root> {
11
- /** Controlled open state. Pair with `onOpenChange`. */
12
- open?: boolean;
13
- /**
14
- * Initial open state for uncontrolled usage.
15
- * @default false
16
- */
17
- defaultOpen?: boolean;
18
- /** Fires whenever the dialog opens or closes. */
19
- onOpenChange?: (open: boolean) => void;
20
- /** Trigger + Content. */
21
- children?: React.ReactNode;
22
- }
23
-
24
- const AlertDialog = AlertDialogPrimitive.Root as React.FC<AlertDialogProps>;
25
-
26
- export interface AlertDialogTriggerProps
27
- extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger> {
28
- /**
29
- * Render as a Radix Slot — forwards props onto the immediate child.
30
- * @default false
31
- */
32
- asChild?: boolean;
33
- /** The button (or slot) that opens the alert. */
34
- children?: React.ReactNode;
35
- /** Tailwind / CSS classes merged via `cn()`. */
36
- className?: string;
37
- }
38
-
39
- const AlertDialogTrigger = AlertDialogPrimitive.Trigger as React.ForwardRefExoticComponent<
40
- AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>
41
- >;
42
-
43
- export interface AlertDialogPortalProps
44
- extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal> {
45
- /** DOM element to portal into. Defaults to `document.body`. */
46
- container?: HTMLElement | null;
47
- /**
48
- * Force the portal to mount its children even when closed.
49
- * @default false
50
- */
51
- forceMount?: true;
52
- children?: React.ReactNode;
53
- }
54
-
55
- const AlertDialogPortal = AlertDialogPrimitive.Portal as React.FC<AlertDialogPortalProps>;
56
-
57
- export interface AlertDialogOverlayProps
58
- extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> {
59
- /**
60
- * Render as a Radix Slot — forwards props onto the immediate child.
61
- * @default false
62
- */
63
- asChild?: boolean;
64
- /**
65
- * Force the overlay to mount even when closed.
66
- * @default false
67
- */
68
- forceMount?: true;
69
- /** Tailwind / CSS classes merged via `cn()`. */
70
- className?: string;
71
- }
72
-
73
- const AlertDialogOverlay = React.forwardRef<
74
- React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
75
- AlertDialogOverlayProps
76
- >(({ className, ...props }, ref) => (
77
- <AlertDialogPrimitive.Overlay
78
- className={cn(
79
- "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
80
- className,
81
- )}
82
- {...props}
83
- ref={ref}
84
- />
85
- ));
86
- AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
87
-
88
- export interface AlertDialogContentProps
89
- extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {
90
- /**
91
- * Render as a Radix Slot — forwards props onto the immediate child.
92
- * @default false
93
- */
94
- asChild?: boolean;
95
- /**
96
- * Force the content to mount even when closed. Useful for
97
- * exit animations.
98
- * @default false
99
- */
100
- forceMount?: true;
101
- /** Fires when focus enters the dialog after it opens. */
102
- onOpenAutoFocus?: (event: Event) => void;
103
- /** Fires when focus leaves the dialog after it closes. */
104
- onCloseAutoFocus?: (event: Event) => void;
105
- /** Fires when the Escape key is pressed. */
106
- onEscapeKeyDown?: (event: KeyboardEvent) => void;
107
- /**
108
- * Title + Description + Footer (with `<AlertDialogAction>` and
109
- * `<AlertDialogCancel>`).
110
- */
111
- children?: React.ReactNode;
112
- /** Tailwind / CSS classes merged via `cn()`. */
113
- className?: string;
114
- }
115
-
116
- const AlertDialogContent = React.forwardRef<
117
- React.ElementRef<typeof AlertDialogPrimitive.Content>,
118
- AlertDialogContentProps
119
- >(({ className, ...props }, ref) => {
120
- const container = usePortalContainer();
121
- return (
122
- <AlertDialogPortal container={container ?? undefined}>
123
- <AlertDialogOverlay />
124
- <AlertDialogPrimitive.Content
125
- ref={ref}
126
- data-slot="alert-dialog-content"
127
- className={cn(
128
- "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
129
- className,
130
- )}
131
- {...props}
132
- />
133
- </AlertDialogPortal>
134
- );
135
- });
136
- AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
137
-
138
- export interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
139
- /** Title + optional description. */
140
- children?: React.ReactNode;
141
- /** Tailwind / CSS classes merged via `cn()`. */
142
- className?: string;
143
- }
144
-
145
- const AlertDialogHeader = ({ className, ...props }: AlertDialogHeaderProps) => (
146
- <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
147
- );
148
- AlertDialogHeader.displayName = "AlertDialogHeader";
149
-
150
- export interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
151
- /** Action + Cancel buttons. */
152
- children?: React.ReactNode;
153
- /** Tailwind / CSS classes merged via `cn()`. */
154
- className?: string;
155
- }
156
-
157
- const AlertDialogFooter = ({ className, ...props }: AlertDialogFooterProps) => (
158
- <div
159
- className={cn(
160
- "flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end",
161
- className,
162
- )}
163
- {...props}
164
- />
165
- );
166
- AlertDialogFooter.displayName = "AlertDialogFooter";
167
-
168
- export interface AlertDialogTitleProps
169
- extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> {
170
- /**
171
- * Render as a Radix Slot — useful to swap the heading level.
172
- * @default false
173
- */
174
- asChild?: boolean;
175
- /** Title text. */
176
- children?: React.ReactNode;
177
- /** Tailwind / CSS classes merged via `cn()`. */
178
- className?: string;
179
- }
180
-
181
- const AlertDialogTitle = React.forwardRef<
182
- React.ElementRef<typeof AlertDialogPrimitive.Title>,
183
- AlertDialogTitleProps
184
- >(({ className, ...props }, ref) => (
185
- <AlertDialogPrimitive.Title
186
- ref={ref}
187
- className={cn("text-lg font-semibold", className)}
188
- {...props}
189
- />
190
- ));
191
- AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
192
-
193
- export interface AlertDialogDescriptionProps
194
- extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> {
195
- /**
196
- * Render as a Radix Slot.
197
- * @default false
198
- */
199
- asChild?: boolean;
200
- /** Description text shown below the title. */
201
- children?: React.ReactNode;
202
- /** Tailwind / CSS classes merged via `cn()`. */
203
- className?: string;
204
- }
205
-
206
- const AlertDialogDescription = React.forwardRef<
207
- React.ElementRef<typeof AlertDialogPrimitive.Description>,
208
- AlertDialogDescriptionProps
209
- >(({ className, ...props }, ref) => (
210
- <AlertDialogPrimitive.Description
211
- ref={ref}
212
- className={cn("text-sm text-muted-foreground", className)}
213
- {...props}
214
- />
215
- ));
216
- AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
217
-
218
- export interface AlertDialogActionProps
219
- extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> {
220
- /**
221
- * Render as a Radix Slot — wrap a custom button while still hooking the
222
- * dialog's commit behaviour.
223
- * @default false
224
- */
225
- asChild?: boolean;
226
- /** Action label (e.g. "Delete", "Confirm"). */
227
- children?: React.ReactNode;
228
- /** Tailwind / CSS classes merged via `cn()`. Defaults to canvas's primary button. */
229
- className?: string;
230
- }
231
-
232
- const AlertDialogAction = React.forwardRef<
233
- React.ElementRef<typeof AlertDialogPrimitive.Action>,
234
- AlertDialogActionProps
235
- >(({ className, ...props }, ref) => (
236
- <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
237
- ));
238
- AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
239
-
240
- export interface AlertDialogCancelProps
241
- extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> {
242
- /**
243
- * Render as a Radix Slot.
244
- * @default false
245
- */
246
- asChild?: boolean;
247
- /** Cancel label (e.g. "Cancel", "Keep editing"). */
248
- children?: React.ReactNode;
249
- /** Tailwind / CSS classes merged via `cn()`. Defaults to canvas's outline button. */
250
- className?: string;
251
- }
252
-
253
- const AlertDialogCancel = React.forwardRef<
254
- React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
255
- AlertDialogCancelProps
256
- >(({ className, ...props }, ref) => (
257
- <AlertDialogPrimitive.Cancel
258
- ref={ref}
259
- className={cn(buttonVariants({ variant: "outline" }), className)}
260
- {...props}
261
- />
262
- ));
263
- AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
264
-
265
- export {
266
- AlertDialog,
267
- AlertDialogAction,
268
- AlertDialogCancel,
269
- AlertDialogContent,
270
- AlertDialogDescription,
271
- AlertDialogFooter,
272
- AlertDialogHeader,
273
- AlertDialogOverlay,
274
- AlertDialogPortal,
275
- AlertDialogTitle,
276
- AlertDialogTrigger,
277
- };