@loykin/designkit 0.0.1-dev.6 → 0.0.1-dev.7

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",
@@ -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
  ] }) }),
@@ -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
  }
@@ -3575,14 +3672,10 @@ var useThemeStore = zustand.create((set) => ({
3575
3672
  darkMode: false
3576
3673
  },
3577
3674
  overrides: {},
3578
- activeShell: "sidebar",
3579
- activeTemplate: "databody",
3580
3675
  setGlobal: (patch) => set((s) => ({ global: { ...s.global, ...patch } })),
3581
3676
  setOverride: (id, patch) => set((s) => ({
3582
3677
  overrides: { ...s.overrides, [id]: { ...s.overrides[id], ...patch } }
3583
- })),
3584
- setShell: () => void 0,
3585
- setTemplate: () => void 0
3678
+ }))
3586
3679
  }));
3587
3680
  var tonalTokenDefs = [
3588
3681
  {
@@ -3745,7 +3838,7 @@ function ColorsBodyTemplate({ theme, breadcrumb }) {
3745
3838
  " \xB7 ",
3746
3839
  "factor = 2\u20136% of primary chroma"
3747
3840
  ] }),
3748
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[var(--radius)] border border-border divide-y text-xs font-mono", children: [
3841
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-[var(--radius)] border border-border divide-y divide-border text-xs font-mono", children: [
3749
3842
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[7rem_1fr_1fr] bg-muted/50 px-3 py-1.5 text-muted-foreground", children: [
3750
3843
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "token" }),
3751
3844
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "light" }),
@@ -4145,6 +4238,17 @@ function buildTemplateTheme(g, ov = {}) {
4145
4238
  return tokens;
4146
4239
  }
4147
4240
 
4241
+ exports.AlertDialog = AlertDialog;
4242
+ exports.AlertDialogAction = AlertDialogAction;
4243
+ exports.AlertDialogCancel = AlertDialogCancel;
4244
+ exports.AlertDialogContent = AlertDialogContent;
4245
+ exports.AlertDialogDescription = AlertDialogDescription;
4246
+ exports.AlertDialogFooter = AlertDialogFooter;
4247
+ exports.AlertDialogHeader = AlertDialogHeader;
4248
+ exports.AlertDialogOverlay = AlertDialogOverlay;
4249
+ exports.AlertDialogPortal = AlertDialogPortal;
4250
+ exports.AlertDialogTitle = AlertDialogTitle;
4251
+ exports.AlertDialogTrigger = AlertDialogTrigger;
4148
4252
  exports.Avatar = Avatar;
4149
4253
  exports.AvatarBadge = AvatarBadge;
4150
4254
  exports.AvatarFallback = AvatarFallback;