@loykin/designkit 0.0.1-dev.6 → 0.0.1

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.
package/dist/index.cjs CHANGED
@@ -1,14 +1,15 @@
1
1
  'use strict';
2
2
 
3
- var avatar = require('@base-ui/react/avatar');
3
+ var alertDialog = require('@base-ui/react/alert-dialog');
4
4
  var clsx = require('clsx');
5
5
  var tailwindMerge = require('tailwind-merge');
6
+ var button = require('@base-ui/react/button');
7
+ var classVarianceAuthority = require('class-variance-authority');
6
8
  var jsxRuntime = require('react/jsx-runtime');
9
+ var avatar = require('@base-ui/react/avatar');
7
10
  var mergeProps = require('@base-ui/react/merge-props');
8
11
  var useRender = require('@base-ui/react/use-render');
9
- var classVarianceAuthority = require('class-variance-authority');
10
12
  var lucideReact = require('lucide-react');
11
- var button = require('@base-ui/react/button');
12
13
  var checkbox = require('@base-ui/react/checkbox');
13
14
  var menu = require('@base-ui/react/menu');
14
15
  var input = require('@base-ui/react/input');
@@ -45,10 +46,143 @@ function _interopNamespace(e) {
45
46
 
46
47
  var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
47
48
 
48
- // src/components/ui/avatar.tsx
49
+ // src/components/ui/alert-dialog.tsx
49
50
  function cn(...inputs) {
50
51
  return tailwindMerge.twMerge(clsx.clsx(inputs));
51
52
  }
53
+ var buttonVariants = classVarianceAuthority.cva(
54
+ "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
55
+ {
56
+ variants: {
57
+ variant: {
58
+ default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
59
+ outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
60
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
61
+ ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
62
+ destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
63
+ link: "text-primary underline-offset-4 hover:underline"
64
+ },
65
+ size: {
66
+ default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
67
+ xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
68
+ sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
69
+ lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
70
+ icon: "size-8",
71
+ "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
72
+ "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
73
+ "icon-lg": "size-9"
74
+ }
75
+ },
76
+ defaultVariants: {
77
+ variant: "default",
78
+ size: "default"
79
+ }
80
+ }
81
+ );
82
+ function Button({
83
+ className,
84
+ variant = "default",
85
+ size = "default",
86
+ ...props
87
+ }) {
88
+ return /* @__PURE__ */ jsxRuntime.jsx(
89
+ button.Button,
90
+ {
91
+ "data-slot": "button",
92
+ className: cn(buttonVariants({ variant, size, className })),
93
+ ...props
94
+ }
95
+ );
96
+ }
97
+ function AlertDialog({ ...props }) {
98
+ return /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
99
+ }
100
+ function AlertDialogTrigger({ ...props }) {
101
+ return /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
102
+ }
103
+ function AlertDialogPortal({ ...props }) {
104
+ return /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
105
+ }
106
+ function AlertDialogOverlay({ className, ...props }) {
107
+ return /* @__PURE__ */ jsxRuntime.jsx(
108
+ alertDialog.AlertDialog.Backdrop,
109
+ {
110
+ "data-slot": "alert-dialog-overlay",
111
+ className: cn(
112
+ "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
113
+ className
114
+ ),
115
+ ...props
116
+ }
117
+ );
118
+ }
119
+ function AlertDialogContent({ className, children, ...props }) {
120
+ return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
121
+ /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
122
+ /* @__PURE__ */ jsxRuntime.jsx(
123
+ alertDialog.AlertDialog.Popup,
124
+ {
125
+ "data-slot": "alert-dialog-content",
126
+ className: cn(
127
+ "fixed top-1/2 left-1/2 z-50 flex w-full max-w-sm -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg border border-border bg-popover bg-clip-padding p-4 text-sm text-popover-foreground shadow-lg transition duration-150 ease-in-out data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
128
+ className
129
+ ),
130
+ ...props,
131
+ children
132
+ }
133
+ )
134
+ ] });
135
+ }
136
+ function AlertDialogHeader({ className, ...props }) {
137
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "alert-dialog-header", className: cn("flex flex-col gap-0.5", className), ...props });
138
+ }
139
+ function AlertDialogFooter({ className, ...props }) {
140
+ return /* @__PURE__ */ jsxRuntime.jsx(
141
+ "div",
142
+ {
143
+ "data-slot": "alert-dialog-footer",
144
+ className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
145
+ ...props
146
+ }
147
+ );
148
+ }
149
+ function AlertDialogTitle({ className, ...props }) {
150
+ return /* @__PURE__ */ jsxRuntime.jsx(
151
+ alertDialog.AlertDialog.Title,
152
+ {
153
+ "data-slot": "alert-dialog-title",
154
+ className: cn("font-heading text-base font-medium text-foreground", className),
155
+ ...props
156
+ }
157
+ );
158
+ }
159
+ function AlertDialogDescription({ className, ...props }) {
160
+ return /* @__PURE__ */ jsxRuntime.jsx(
161
+ alertDialog.AlertDialog.Description,
162
+ {
163
+ "data-slot": "alert-dialog-description",
164
+ className: cn("text-sm text-muted-foreground", className),
165
+ ...props
166
+ }
167
+ );
168
+ }
169
+ function AlertDialogAction({
170
+ className,
171
+ variant = "default",
172
+ ...props
173
+ }) {
174
+ return /* @__PURE__ */ jsxRuntime.jsx(Button, { "data-slot": "alert-dialog-action", variant, className, ...props });
175
+ }
176
+ function AlertDialogCancel({ className, ...props }) {
177
+ return /* @__PURE__ */ jsxRuntime.jsx(
178
+ alertDialog.AlertDialog.Close,
179
+ {
180
+ "data-slot": "alert-dialog-cancel",
181
+ render: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", className }),
182
+ ...props
183
+ }
184
+ );
185
+ }
52
186
  function Avatar({
53
187
  className,
54
188
  size = "default",
@@ -258,50 +392,6 @@ function BreadcrumbEllipsis({ className, ...props }) {
258
392
  }
259
393
  );
260
394
  }
261
- var buttonVariants = classVarianceAuthority.cva(
262
- "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
263
- {
264
- variants: {
265
- variant: {
266
- default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
267
- outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
268
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
269
- ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
270
- destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
271
- link: "text-primary underline-offset-4 hover:underline"
272
- },
273
- size: {
274
- default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
275
- xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
276
- sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
277
- lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
278
- icon: "size-8",
279
- "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
280
- "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
281
- "icon-lg": "size-9"
282
- }
283
- },
284
- defaultVariants: {
285
- variant: "default",
286
- size: "default"
287
- }
288
- }
289
- );
290
- function Button({
291
- className,
292
- variant = "default",
293
- size = "default",
294
- ...props
295
- }) {
296
- return /* @__PURE__ */ jsxRuntime.jsx(
297
- button.Button,
298
- {
299
- "data-slot": "button",
300
- className: cn(buttonVariants({ variant, size, className })),
301
- ...props
302
- }
303
- );
304
- }
305
395
  function Card({
306
396
  className,
307
397
  size = "default",
@@ -1389,7 +1479,7 @@ function Sidebar({
1389
1479
  /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: "Sidebar" }),
1390
1480
  /* @__PURE__ */ jsxRuntime.jsx(SheetDescription, { children: "Displays the mobile sidebar." })
1391
1481
  ] }),
1392
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col", children })
1482
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-0 w-full flex-col", children })
1393
1483
  ]
1394
1484
  }
1395
1485
  ) });
@@ -2076,8 +2166,17 @@ function TabsContent({ className, ...props }) {
2076
2166
  }
2077
2167
  );
2078
2168
  }
2169
+ var DataPageNestingContext = React2.createContext(false);
2079
2170
  function Root({ children, className, style }) {
2080
- return /* @__PURE__ */ jsxRuntime.jsx(
2171
+ const isNested = React2.useContext(DataPageNestingContext);
2172
+ React2.useEffect(() => {
2173
+ if (isNested) {
2174
+ console.error(
2175
+ "[DesignKit] Nested <DataPage> detected. Page-level templates (DataBodyTemplate, WorkbenchBodyTemplate, DashboardBodyTemplate, BrowseBodyTemplate, DetailBodyTemplate, \u2026) already render a DataPage \u2014 don't nest one page-level template inside another template's slot (leftPane, rightPane, bottomPane, mainPane, children, \u2026). Pick the one template that fits and compose inside it instead."
2176
+ );
2177
+ }
2178
+ }, [isNested]);
2179
+ return /* @__PURE__ */ jsxRuntime.jsx(DataPageNestingContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
2081
2180
  "div",
2082
2181
  {
2083
2182
  "data-slot": "data-page",
@@ -2088,7 +2187,7 @@ function Root({ children, className, style }) {
2088
2187
  style,
2089
2188
  children
2090
2189
  }
2091
- );
2190
+ ) });
2092
2191
  }
2093
2192
  function Header({ children, className }) {
2094
2193
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2405,7 +2504,6 @@ function WorkbenchBodyTemplate({
2405
2504
  status,
2406
2505
  topBar,
2407
2506
  headerRight,
2408
- toolbar,
2409
2507
  actions,
2410
2508
  leftPane,
2411
2509
  mainPane,
@@ -2532,8 +2630,7 @@ function WorkbenchBodyTemplate({
2532
2630
  },
2533
2631
  [resizable]
2534
2632
  );
2535
- const headerRightContent = headerRight ?? toolbar;
2536
- const showHeader = title || description || status || headerRightContent || actions;
2633
+ const showHeader = title || description || status || headerRight || actions;
2537
2634
  const showLeftPane = leftPane && !leftPaneCollapsed;
2538
2635
  const showRightPane = rightPane && !rightPaneCollapsed;
2539
2636
  const showBottomPane = bottomPane && !bottomPaneCollapsed;
@@ -2547,8 +2644,8 @@ function WorkbenchBodyTemplate({
2547
2644
  ] }),
2548
2645
  description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: description })
2549
2646
  ] }),
2550
- (headerRightContent || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
2551
- headerRightContent,
2647
+ (headerRight || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
2648
+ headerRight,
2552
2649
  actions
2553
2650
  ] })
2554
2651
  ] }) }),
@@ -2608,7 +2705,7 @@ function WorkbenchBodyTemplate({
2608
2705
  )
2609
2706
  ] }),
2610
2707
  /* @__PURE__ */ jsxRuntime.jsxs("main", { className: cn("flex min-w-0 flex-1 flex-col overflow-hidden", mainPaneClassName), children: [
2611
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: mainPane ?? children }),
2708
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: mainPane ?? children }),
2612
2709
  showBottomPane && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2613
2710
  resizable && /* @__PURE__ */ jsxRuntime.jsx(
2614
2711
  ResizeHandle,
@@ -2739,7 +2836,7 @@ function GroupWrapper({
2739
2836
  }
2740
2837
  if (variant === "bordered") {
2741
2838
  if (layout === "inline") {
2742
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-(--radius) border border-border divide-y", children });
2839
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-(--radius) border border-border divide-y divide-border", children });
2743
2840
  }
2744
2841
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-(--radius) border border-border p-(--designkit-panel-gap)", children });
2745
2842
  }
@@ -3046,7 +3143,7 @@ function BrowseBodyTemplate({
3046
3143
  "div",
3047
3144
  {
3048
3145
  className: cn(
3049
- "min-w-0 flex-1 overflow-hidden px-(--designkit-page-padding-x) py-(--designkit-page-padding-y)",
3146
+ "min-w-0 flex-1 overflow-auto px-(--designkit-page-padding-x) py-(--designkit-page-padding-y)",
3050
3147
  "[&_.gridkit-shell]:h-full [&_.gridkit-table-stack]:flex-1 [&_.gridkit-table-stack]:min-h-0",
3051
3148
  "[&_.gridkit-frame]:flex-1 [&_.gridkit-frame]:min-h-0 [&_.gridkit-frame]:overflow-auto",
3052
3149
  contentClassName
@@ -3135,6 +3232,7 @@ function DetailBodyTemplateRoot({
3135
3232
  aside,
3136
3233
  summary,
3137
3234
  stickyAside = true,
3235
+ layoutClassName,
3138
3236
  contentClassName,
3139
3237
  mediaClassName,
3140
3238
  asideClassName,
@@ -3248,7 +3346,8 @@ function DetailBodyTemplateRoot({
3248
3346
  {
3249
3347
  className: cn(
3250
3348
  "grid h-full min-h-0 grid-cols-1 overflow-hidden",
3251
- outsideAsideSlot && "lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]"
3349
+ outsideAsideSlot && "lg:grid-cols-[minmax(0,1fr)_minmax(18rem,24rem)]",
3350
+ layoutClassName
3252
3351
  ),
3253
3352
  children: [
3254
3353
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3575,14 +3674,10 @@ var useThemeStore = zustand.create((set) => ({
3575
3674
  darkMode: false
3576
3675
  },
3577
3676
  overrides: {},
3578
- activeShell: "sidebar",
3579
- activeTemplate: "databody",
3580
3677
  setGlobal: (patch) => set((s) => ({ global: { ...s.global, ...patch } })),
3581
3678
  setOverride: (id, patch) => set((s) => ({
3582
3679
  overrides: { ...s.overrides, [id]: { ...s.overrides[id], ...patch } }
3583
- })),
3584
- setShell: () => void 0,
3585
- setTemplate: () => void 0
3680
+ }))
3586
3681
  }));
3587
3682
  var tonalTokenDefs = [
3588
3683
  {
@@ -3745,7 +3840,7 @@ function ColorsBodyTemplate({ theme, breadcrumb }) {
3745
3840
  " \xB7 ",
3746
3841
  "factor = 2\u20136% of primary chroma"
3747
3842
  ] }),
3748
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[var(--radius)] border border-border divide-y text-xs font-mono", children: [
3843
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[var(--radius)] border border-border divide-y divide-border text-xs font-mono", children: [
3749
3844
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[7rem_1fr_1fr] bg-muted/50 px-3 py-1.5 text-muted-foreground", children: [
3750
3845
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "token" }),
3751
3846
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "light" }),
@@ -4145,6 +4240,17 @@ function buildTemplateTheme(g, ov = {}) {
4145
4240
  return tokens;
4146
4241
  }
4147
4242
 
4243
+ exports.AlertDialog = AlertDialog;
4244
+ exports.AlertDialogAction = AlertDialogAction;
4245
+ exports.AlertDialogCancel = AlertDialogCancel;
4246
+ exports.AlertDialogContent = AlertDialogContent;
4247
+ exports.AlertDialogDescription = AlertDialogDescription;
4248
+ exports.AlertDialogFooter = AlertDialogFooter;
4249
+ exports.AlertDialogHeader = AlertDialogHeader;
4250
+ exports.AlertDialogOverlay = AlertDialogOverlay;
4251
+ exports.AlertDialogPortal = AlertDialogPortal;
4252
+ exports.AlertDialogTitle = AlertDialogTitle;
4253
+ exports.AlertDialogTrigger = AlertDialogTrigger;
4148
4254
  exports.Avatar = Avatar;
4149
4255
  exports.AvatarBadge = AvatarBadge;
4150
4256
  exports.AvatarFallback = AvatarFallback;