@devalok/shilp-sutra 0.44.1 → 0.45.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/AGENTS.md +13 -11
- package/BREAKING.json +209 -27
- package/MIGRATION.md +34 -0
- package/README.md +12 -0
- package/dist/_chunks/badge-group.js +1 -0
- package/dist/_chunks/badge-group.js.map +1 -1
- package/dist/_chunks/block-shell.js +25 -0
- package/dist/_chunks/block-shell.js.map +1 -0
- package/dist/_chunks/chat.js +153 -150
- package/dist/_chunks/chat.js.map +1 -1
- package/dist/_chunks/document-preview.js +1 -1
- package/dist/_chunks/image-preview.js +4 -4
- package/dist/_chunks/mention.js +5 -0
- package/dist/_chunks/mention.js.map +1 -0
- package/dist/_chunks/shared.js +65 -78
- package/dist/_chunks/shared.js.map +1 -1
- package/dist/_chunks/success.js +108 -106
- package/dist/_chunks/success.js.map +1 -1
- package/dist/ai/blocks/block-shell.d.ts +19 -0
- package/dist/ai/blocks/block-shell.d.ts.map +1 -0
- package/dist/ai/blocks/block-table.d.ts.map +1 -1
- package/dist/ai/blocks/confirm.d.ts.map +1 -1
- package/dist/ai/blocks/error.d.ts.map +1 -1
- package/dist/ai/blocks/error.js +5 -5
- package/dist/ai/blocks/error.js.map +1 -1
- package/dist/ai/blocks/success.d.ts.map +1 -1
- package/dist/ai/blocks/text.d.ts.map +1 -1
- package/dist/ai/blocks/text.js +4 -3
- package/dist/ai/blocks/text.js.map +1 -1
- package/dist/composed/activity-feed.d.ts.map +1 -1
- package/dist/composed/activity-feed.js +14 -12
- package/dist/composed/activity-feed.js.map +1 -1
- package/dist/composed/file-preview/audio-preview.d.ts.map +1 -1
- package/dist/composed/file-preview/shared.d.ts +10 -0
- package/dist/composed/file-preview/shared.d.ts.map +1 -1
- package/dist/composed/file-preview/video-preview.d.ts.map +1 -1
- package/dist/composed/file-preview.js +151 -188
- package/dist/composed/file-preview.js.map +1 -1
- package/dist/composed/master-detail.d.ts.map +1 -1
- package/dist/composed/master-detail.js +13 -4
- package/dist/composed/master-detail.js.map +1 -1
- package/dist/composed/rich-chat-input.d.ts.map +1 -1
- package/dist/composed/rich-chat-input.js +514 -503
- package/dist/composed/rich-chat-input.js.map +1 -1
- package/dist/composed/rich-text-editor.d.ts.map +1 -1
- package/dist/composed/rich-text-editor.js +144 -143
- package/dist/composed/rich-text-editor.js.map +1 -1
- package/dist/composed/schedule-view.d.ts.map +1 -1
- package/dist/composed/schedule-view.js +52 -39
- package/dist/composed/schedule-view.js.map +1 -1
- package/dist/shell/notification-preferences.d.ts.map +1 -1
- package/dist/shell/notification-preferences.js +115 -114
- package/dist/shell/notification-preferences.js.map +1 -1
- package/dist/ui/badge-group.d.ts.map +1 -1
- package/dist/ui/card.d.ts +66 -16
- package/dist/ui/card.d.ts.map +1 -1
- package/dist/ui/card.js +85 -60
- package/dist/ui/card.js.map +1 -1
- package/dist/ui/chat/message.d.ts.map +1 -1
- package/dist/ui/color-input.d.ts.map +1 -1
- package/dist/ui/color-input.js +18 -18
- package/dist/ui/color-input.js.map +1 -1
- package/dist/ui/data-table-body.d.ts.map +1 -1
- package/dist/ui/data-table-body.js +94 -64
- package/dist/ui/data-table-body.js.map +1 -1
- package/dist/ui/data-table-card.d.ts.map +1 -1
- package/dist/ui/data-table-card.js +50 -43
- package/dist/ui/data-table-card.js.map +1 -1
- package/dist/ui/data-table-context.d.ts +0 -4
- package/dist/ui/data-table-context.d.ts.map +1 -1
- package/dist/ui/data-table-context.js +8 -12
- package/dist/ui/data-table-context.js.map +1 -1
- package/dist/ui/data-table-header.d.ts.map +1 -1
- package/dist/ui/data-table-header.js +2 -2
- package/dist/ui/data-table-header.js.map +1 -1
- package/dist/ui/data-table.d.ts.map +1 -1
- package/dist/ui/data-table.js +185 -182
- package/dist/ui/data-table.js.map +1 -1
- package/dist/ui/index.d.ts +3 -2
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +59 -58
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/lib/mention.d.ts +11 -0
- package/dist/ui/lib/mention.d.ts.map +1 -0
- package/dist/ui/segmented-control.js +4 -4
- package/dist/ui/segmented-control.js.map +1 -1
- package/dist/ui/separator.d.ts +6 -5
- package/dist/ui/separator.d.ts.map +1 -1
- package/dist/ui/separator.js +7 -10
- package/dist/ui/separator.js.map +1 -1
- package/dist/ui/split-button.d.ts.map +1 -1
- package/dist/ui/split-button.js +62 -129
- package/dist/ui/split-button.js.map +1 -1
- package/dist/ui/stat-card.d.ts +7 -0
- package/dist/ui/stat-card.d.ts.map +1 -1
- package/dist/ui/stat-card.js +144 -126
- package/dist/ui/stat-card.js.map +1 -1
- package/dist/ui/table-row-link.d.ts +45 -0
- package/dist/ui/table-row-link.d.ts.map +1 -0
- package/dist/ui/table-row-link.js +16 -0
- package/dist/ui/table-row-link.js.map +1 -0
- package/dist/ui/table.d.ts +49 -5
- package/dist/ui/table.d.ts.map +1 -1
- package/dist/ui/table.js +39 -29
- package/dist/ui/table.js.map +1 -1
- package/dist/ui/toast-types.d.ts +10 -0
- package/dist/ui/toast-types.d.ts.map +1 -1
- package/dist/ui/toast.d.ts +6 -2
- package/dist/ui/toast.d.ts.map +1 -1
- package/dist/ui/toast.js +56 -54
- package/dist/ui/toast.js.map +1 -1
- package/docs/components/composed/content-card.md +2 -0
- package/docs/components/ui/button.md +3 -3
- package/docs/components/ui/card.md +27 -10
- package/docs/components/ui/chat.md +1 -1
- package/docs/components/ui/color-input.md +2 -2
- package/docs/components/ui/data-table.md +8 -1
- package/docs/components/ui/segmented-control.md +2 -2
- package/docs/components/ui/separator.md +3 -1
- package/docs/components/ui/split-button.md +3 -0
- package/docs/components/ui/stat-card.md +10 -2
- package/docs/components/ui/table-row-link.md +41 -0
- package/docs/components/ui/table.md +69 -0
- package/docs/components/ui/toast.md +10 -6
- package/docs/recipes/install-next-app-router.md +1 -1
- package/docs/recipes/troubleshoot.md +1 -1
- package/llms.txt +159 -781
- package/make-kit/components/card.md +54 -16
- package/make-kit/components/table.md +45 -7
- package/make-kit/foundations/spacing.md +3 -1
- package/make-kit/foundations/surfaces.md +1 -1
- package/mcp-manifest.json +12349 -0
- package/mcp-manifest.schema.json +232 -0
- package/package.json +8 -3
- package/skill/README.md +0 -1
- package/skill/SKILL.md +9 -8
- package/skill/references/components.md +159 -781
- package/skill/references/setup-next-app-router.md +1 -1
- package/skill/references/troubleshoot.md +1 -1
- package/llms-full.txt +0 -7198
- package/llms-quick.txt +0 -251
- package/skill/references/components-full.md +0 -7200
package/dist/ui/separator.d.ts
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
import * as SeparatorPrimitive from '../primitives/react-separator';
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
export interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
|
|
5
|
-
/**
|
|
6
|
-
*
|
|
7
|
-
* - `gradient`
|
|
8
|
-
*
|
|
9
|
-
*
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated Separator is always a solid hairline. The `gradient` /
|
|
7
|
+
* `gradient-left` / `gradient-right` variants were decorative (and never
|
|
8
|
+
* rendered in production — the interpolated class couldn't be emitted by the
|
|
9
|
+
* Tailwind 4 scanner). They now render solid; the `variant` prop is removed in
|
|
10
|
+
* 0.45.0.
|
|
10
11
|
*/
|
|
11
12
|
variant?: 'default' | 'gradient' | 'gradient-left' | 'gradient-right';
|
|
12
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/ui/separator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,6BAA6B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;IACtE
|
|
1
|
+
{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/ui/separator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,6BAA6B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;IACtE;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,eAAe,GAAG,gBAAgB,CAAA;CACtE;AAED,QAAA,MAAM,SAAS,uFAuBd,CAAA;AAGD,OAAO,EAAE,SAAS,EAAE,CAAA"}
|
package/dist/ui/separator.js
CHANGED
|
@@ -4,16 +4,13 @@ import { cn as t } from "./lib/utils.js";
|
|
|
4
4
|
import * as n from "react";
|
|
5
5
|
import { jsx as r } from "react/jsx-runtime";
|
|
6
6
|
//#region src/ui/separator.tsx
|
|
7
|
-
var i = n.forwardRef(({ className: n, orientation: i = "horizontal", decorative: a = !0, variant: o
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
...s
|
|
15
|
-
});
|
|
16
|
-
});
|
|
7
|
+
var i = n.forwardRef(({ className: n, orientation: i = "horizontal", decorative: a = !0, variant: o, ...s }, c) => /* @__PURE__ */ r(e, {
|
|
8
|
+
ref: c,
|
|
9
|
+
decorative: a,
|
|
10
|
+
orientation: i,
|
|
11
|
+
className: t("shrink-0 bg-surface-border", i === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", n),
|
|
12
|
+
...s
|
|
13
|
+
}));
|
|
17
14
|
i.displayName = e.displayName;
|
|
18
15
|
//#endregion
|
|
19
16
|
export { i as Separator };
|
package/dist/ui/separator.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"separator.js","names":[],"sources":["../../src/ui/separator.tsx"],"sourcesContent":["'use client'\n\nimport * as SeparatorPrimitive from '@primitives/react-separator'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nexport interface SeparatorProps\n extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n
|
|
1
|
+
{"version":3,"file":"separator.js","names":[],"sources":["../../src/ui/separator.tsx"],"sourcesContent":["'use client'\n\nimport * as SeparatorPrimitive from '@primitives/react-separator'\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nexport interface SeparatorProps\n extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {\n /**\n * @deprecated Separator is always a solid hairline. The `gradient` /\n * `gradient-left` / `gradient-right` variants were decorative (and never\n * rendered in production — the interpolated class couldn't be emitted by the\n * Tailwind 4 scanner). They now render solid; the `variant` prop is removed in\n * 0.45.0.\n */\n variant?: 'default' | 'gradient' | 'gradient-left' | 'gradient-right'\n}\n\nconst Separator = React.forwardRef<\n React.ElementRef<typeof SeparatorPrimitive.Root>,\n SeparatorProps\n>(\n (\n // `variant` accepted for back-compat but no longer rendered (see @deprecated above).\n { className, orientation = 'horizontal', decorative = true, variant: _variant, ...props },\n ref,\n ) => {\n return (\n <SeparatorPrimitive.Root\n ref={ref}\n decorative={decorative}\n orientation={orientation}\n className={cn(\n 'shrink-0 bg-surface-border',\n orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',\n className,\n )}\n {...props}\n />\n )\n },\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n"],"mappings":";;;;;;AAmBA,IAAM,IAAY,EAAM,YAMpB,EAAE,cAAW,iBAAc,cAAc,gBAAa,IAAM,SAAS,GAAU,GAAG,KAClF,MAGE,kBAAC,GAAD;CACO;CACO;CACC;CACb,WAAW,EACT,8BACA,MAAgB,eAAe,mBAAmB,kBAClD,EACD;CACD,GAAI;CACJ,CAAA,CAGP;AACD,EAAU,cAAA,EAAsC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../src/ui/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../src/ui/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAMzC,KAAK,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AACtD,KAAK,gBAAgB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AACjF,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yCAAyC;IACzC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACzD,2DAA2D;IAC3D,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,uBAAuB;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,wBAAwB;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,oBAAoB;IACpB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC9B,qEAAqE;IACrE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA2FD,QAAA,MAAM,WAAW,yFAuIhB,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAC,kBAAkB,EAAE,CAAA"}
|
package/dist/ui/split-button.js
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { cn as e
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
7
|
-
import { AnimatePresence as d, motion as f } from "framer-motion";
|
|
2
|
+
import { cn as e } from "./lib/utils.js";
|
|
3
|
+
import { i as t, r as n, t as r } from "../_chunks/popover.js";
|
|
4
|
+
import * as i from "react";
|
|
5
|
+
import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
8
6
|
//#region src/ui/split-button.tsx
|
|
9
|
-
var
|
|
7
|
+
var c = {
|
|
10
8
|
solid: {
|
|
11
9
|
accent: "bg-accent-11/20",
|
|
12
10
|
error: "bg-error-11/20",
|
|
@@ -28,35 +26,35 @@ var p = {
|
|
|
28
26
|
warning: "bg-warning-7",
|
|
29
27
|
neutral: "bg-surface-border-strong"
|
|
30
28
|
}
|
|
31
|
-
},
|
|
29
|
+
}, l = {
|
|
32
30
|
xs: "h-ds-xs-plus",
|
|
33
31
|
sm: "h-ds-sm",
|
|
34
32
|
md: "h-ds-md",
|
|
35
33
|
"icon-xs": "h-ds-xs-plus",
|
|
36
34
|
"icon-sm": "h-ds-sm",
|
|
37
35
|
"icon-md": "h-ds-md"
|
|
38
|
-
},
|
|
36
|
+
}, u = {
|
|
39
37
|
xs: "text-ds-sm",
|
|
40
38
|
sm: "text-ds-sm",
|
|
41
39
|
md: "text-ds-md",
|
|
42
40
|
"icon-xs": "text-ds-sm",
|
|
43
41
|
"icon-sm": "text-ds-sm",
|
|
44
42
|
"icon-md": "text-ds-md"
|
|
45
|
-
},
|
|
43
|
+
}, d = {
|
|
46
44
|
xs: "px-ds-03 gap-1",
|
|
47
45
|
sm: "px-ds-04 gap-1.5",
|
|
48
46
|
md: "px-ds-05 gap-2",
|
|
49
47
|
"icon-xs": "px-ds-02",
|
|
50
48
|
"icon-sm": "px-ds-03",
|
|
51
49
|
"icon-md": "px-ds-04"
|
|
52
|
-
},
|
|
50
|
+
}, f = {
|
|
53
51
|
xs: "px-ds-02",
|
|
54
52
|
sm: "px-ds-02",
|
|
55
53
|
md: "px-ds-03",
|
|
56
54
|
"icon-xs": "px-ds-01",
|
|
57
55
|
"icon-sm": "px-ds-02",
|
|
58
56
|
"icon-md": "px-ds-02"
|
|
59
|
-
},
|
|
57
|
+
}, p = {
|
|
60
58
|
xs: "rounded-control",
|
|
61
59
|
sm: "rounded-control",
|
|
62
60
|
md: "rounded-control",
|
|
@@ -64,7 +62,7 @@ var p = {
|
|
|
64
62
|
"icon-sm": "rounded-control",
|
|
65
63
|
"icon-md": "rounded-control"
|
|
66
64
|
};
|
|
67
|
-
function
|
|
65
|
+
function m(e, t) {
|
|
68
66
|
let n = {
|
|
69
67
|
solid: {
|
|
70
68
|
accent: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11",
|
|
@@ -90,7 +88,7 @@ function y(e, t) {
|
|
|
90
88
|
};
|
|
91
89
|
return n[e][t] ?? n[e].accent;
|
|
92
90
|
}
|
|
93
|
-
function
|
|
91
|
+
function h(e) {
|
|
94
92
|
let t = {
|
|
95
93
|
accent: "border-accent-7",
|
|
96
94
|
error: "border-error-7",
|
|
@@ -100,15 +98,15 @@ function b(e) {
|
|
|
100
98
|
};
|
|
101
99
|
return t[e] ?? t.accent;
|
|
102
100
|
}
|
|
103
|
-
function
|
|
104
|
-
return /* @__PURE__ */
|
|
101
|
+
function g({ className: e }) {
|
|
102
|
+
return /* @__PURE__ */ o("svg", {
|
|
105
103
|
width: "12",
|
|
106
104
|
height: "12",
|
|
107
105
|
viewBox: "0 0 12 12",
|
|
108
106
|
fill: "none",
|
|
109
107
|
className: e,
|
|
110
108
|
"aria-hidden": "true",
|
|
111
|
-
children: /* @__PURE__ */
|
|
109
|
+
children: /* @__PURE__ */ o("path", {
|
|
112
110
|
d: "M3 4.5L6 7.5L9 4.5",
|
|
113
111
|
stroke: "currentColor",
|
|
114
112
|
strokeWidth: "1.5",
|
|
@@ -117,118 +115,53 @@ function x({ className: e }) {
|
|
|
117
115
|
})
|
|
118
116
|
});
|
|
119
117
|
}
|
|
120
|
-
var
|
|
121
|
-
let [
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
"bottom-end",
|
|
134
|
-
"top-start",
|
|
135
|
-
"bottom-start"
|
|
136
|
-
] }),
|
|
137
|
-
n({ padding: 8 })
|
|
138
|
-
]
|
|
139
|
-
}).then(({ x: e, y: t }) => {
|
|
140
|
-
Object.assign(o.style, {
|
|
141
|
-
left: `${e}px`,
|
|
142
|
-
top: `${t}px`
|
|
143
|
-
});
|
|
144
|
-
});
|
|
145
|
-
});
|
|
146
|
-
}, [H, F]), s.useEffect(() => {
|
|
147
|
-
if (!H) return;
|
|
148
|
-
let e = (e) => {
|
|
149
|
-
let t = e.target;
|
|
150
|
-
U.current?.contains(t) || W.current?.contains(t) || K(!1);
|
|
151
|
-
};
|
|
152
|
-
return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
|
|
153
|
-
}, [H, K]), s.useEffect(() => {
|
|
154
|
-
if (!H) return;
|
|
155
|
-
let e = (e) => {
|
|
156
|
-
e.key === "Escape" && K(!1);
|
|
157
|
-
};
|
|
158
|
-
return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
|
|
159
|
-
}, [H, K]);
|
|
160
|
-
let q = y(D, O), J = p[D][O] ?? p[D].accent, Y = I == null ? void 0 : { width: typeof I == "number" ? `${I}px` : I };
|
|
161
|
-
return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
|
|
162
|
-
ref: R,
|
|
163
|
-
role: "group",
|
|
164
|
-
"aria-label": j ?? void 0,
|
|
165
|
-
className: o("relative inline-flex", L),
|
|
166
|
-
children: /* @__PURE__ */ u("div", {
|
|
167
|
-
ref: U,
|
|
168
|
-
className: o("inline-flex items-stretch overflow-hidden", v[k], D === "solid" && "shadow-raised", D === "outline" && `border ${b(O)}`),
|
|
169
|
-
children: [
|
|
170
|
-
P === "left" && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("button", {
|
|
171
|
-
type: "button",
|
|
172
|
-
onClick: () => K(!H),
|
|
173
|
-
disabled: A,
|
|
174
|
-
"aria-label": M,
|
|
175
|
-
"aria-haspopup": "menu",
|
|
176
|
-
"aria-expanded": H,
|
|
177
|
-
"aria-controls": H ? G : void 0,
|
|
178
|
-
className: o("inline-flex items-center justify-center select-none", "transition-colors duration-fast-01 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", q, m[k], _[k]),
|
|
179
|
-
style: Y,
|
|
180
|
-
children: N ?? /* @__PURE__ */ l(x, {})
|
|
181
|
-
}), /* @__PURE__ */ l("div", { className: o("w-px self-stretch", J) })] }),
|
|
182
|
-
/* @__PURE__ */ l("button", {
|
|
183
|
-
type: "button",
|
|
184
|
-
onClick: C,
|
|
185
|
-
disabled: A,
|
|
186
|
-
"aria-label": j,
|
|
187
|
-
className: o("inline-flex items-center justify-center font-semibold select-none whitespace-nowrap", "transition-[colors,transform] duration-fast-01 ease-productive-standard", "active:scale-[0.97]", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", q, m[k], h[k], g[k]),
|
|
188
|
-
children: S
|
|
189
|
-
}),
|
|
190
|
-
P === "right" && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", { className: o("w-px self-stretch", J) }), /* @__PURE__ */ l("button", {
|
|
191
|
-
type: "button",
|
|
192
|
-
onClick: () => K(!H),
|
|
193
|
-
disabled: A,
|
|
194
|
-
"aria-label": M,
|
|
195
|
-
"aria-haspopup": "menu",
|
|
196
|
-
"aria-expanded": H,
|
|
197
|
-
"aria-controls": H ? G : void 0,
|
|
198
|
-
className: o("inline-flex items-center justify-center select-none", "transition-colors duration-fast-01 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", q, m[k], _[k]),
|
|
199
|
-
style: Y,
|
|
200
|
-
children: N ?? /* @__PURE__ */ l(x, {})
|
|
201
|
-
})] })
|
|
202
|
-
]
|
|
203
|
-
})
|
|
204
|
-
}), /* @__PURE__ */ l(d, { children: H && w && /* @__PURE__ */ l("div", {
|
|
205
|
-
ref: W,
|
|
206
|
-
id: G,
|
|
207
|
-
role: "menu",
|
|
208
|
-
className: "fixed z-popover",
|
|
209
|
-
style: {
|
|
210
|
-
top: 0,
|
|
211
|
-
left: 0
|
|
212
|
-
},
|
|
213
|
-
children: /* @__PURE__ */ l(f.div, {
|
|
214
|
-
initial: {
|
|
215
|
-
opacity: 0,
|
|
216
|
-
scale: .95
|
|
217
|
-
},
|
|
218
|
-
animate: {
|
|
219
|
-
opacity: 1,
|
|
220
|
-
scale: 1
|
|
221
|
-
},
|
|
222
|
-
exit: {
|
|
223
|
-
opacity: 0,
|
|
224
|
-
scale: .95
|
|
225
|
-
},
|
|
226
|
-
transition: { duration: a.moderate01 },
|
|
227
|
-
className: "rounded-overlay bg-surface-overlay shadow-floating",
|
|
228
|
-
children: w
|
|
118
|
+
var _ = i.forwardRef(function({ children: _, onClick: v, dropdownContent: y, open: b, onOpenChange: x, variant: S = "solid", color: C = "accent", size: w = "md", disabled: T = !1, "aria-label": E, dropdownLabel: D = "More options", dropdownIcon: O, triggerSide: k = "right", placement: A = "top-end", triggerWidth: j, className: M }, N) {
|
|
119
|
+
let [P, F] = i.useMemo(() => {
|
|
120
|
+
let [e, t] = A.split("-");
|
|
121
|
+
return [e, t === "start" ? "start" : t === "end" ? "end" : "center"];
|
|
122
|
+
}, [A]), I = m(S, C), L = c[S][C] ?? c[S].accent, R = j == null ? void 0 : { width: typeof j == "number" ? `${j}px` : j }, z = /* @__PURE__ */ o(t, {
|
|
123
|
+
asChild: !0,
|
|
124
|
+
children: /* @__PURE__ */ o("button", {
|
|
125
|
+
type: "button",
|
|
126
|
+
disabled: T,
|
|
127
|
+
"aria-label": D,
|
|
128
|
+
className: e("inline-flex items-center justify-center select-none", "transition-colors duration-fast-01 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", I, l[w], f[w]),
|
|
129
|
+
style: R,
|
|
130
|
+
children: O ?? /* @__PURE__ */ o(g, {})
|
|
229
131
|
})
|
|
230
|
-
})
|
|
132
|
+
});
|
|
133
|
+
return /* @__PURE__ */ s(r, {
|
|
134
|
+
open: b,
|
|
135
|
+
onOpenChange: x,
|
|
136
|
+
children: [/* @__PURE__ */ o("div", {
|
|
137
|
+
ref: N,
|
|
138
|
+
role: "group",
|
|
139
|
+
"aria-label": E ?? void 0,
|
|
140
|
+
className: e("relative inline-flex", M),
|
|
141
|
+
children: /* @__PURE__ */ s("div", {
|
|
142
|
+
className: e("inline-flex items-stretch overflow-hidden", p[w], S === "solid" && "shadow-raised", S === "outline" && `border ${h(C)}`),
|
|
143
|
+
children: [
|
|
144
|
+
k === "left" && /* @__PURE__ */ s(a, { children: [z, /* @__PURE__ */ o("div", { className: e("w-px self-stretch", L) })] }),
|
|
145
|
+
/* @__PURE__ */ o("button", {
|
|
146
|
+
type: "button",
|
|
147
|
+
onClick: v,
|
|
148
|
+
disabled: T,
|
|
149
|
+
"aria-label": E,
|
|
150
|
+
className: e("inline-flex items-center justify-center font-semibold select-none whitespace-nowrap", "transition-[colors,transform] duration-fast-01 ease-productive-standard", "active:scale-[0.97]", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", I, l[w], u[w], d[w]),
|
|
151
|
+
children: _
|
|
152
|
+
}),
|
|
153
|
+
k === "right" && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", { className: e("w-px self-stretch", L) }), z] })
|
|
154
|
+
]
|
|
155
|
+
})
|
|
156
|
+
}), y && /* @__PURE__ */ o(n, {
|
|
157
|
+
side: P,
|
|
158
|
+
align: F,
|
|
159
|
+
sideOffset: 8,
|
|
160
|
+
className: "w-auto min-w-[10rem] p-ds-01",
|
|
161
|
+
children: y
|
|
162
|
+
})]
|
|
163
|
+
});
|
|
231
164
|
});
|
|
232
|
-
|
|
165
|
+
_.displayName = "SplitButton";
|
|
233
166
|
//#endregion
|
|
234
|
-
export {
|
|
167
|
+
export { _ as SplitButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate, computePosition, flip, offset, type Placement,shift } from '@floating-ui/dom'\nimport { type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { buttonVariants } from './button'\nimport { durations } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Types ───────────────────────────────────────────────────────\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n /** Primary action content (left side). */\n children: React.ReactNode\n /** Primary click handler (left side). */\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n /** Content rendered inside the floating dropdown panel. */\n dropdownContent?: React.ReactNode\n /** Controlled open state. */\n open?: boolean\n /** Called when open state changes. Uncontrolled if omitted. */\n onOpenChange?: (open: boolean) => void\n /** @default 'solid' */\n variant?: SplitButtonVariant\n /** @default 'accent' */\n color?: SplitButtonColor\n /** @default 'md' */\n size?: SplitButtonSize\n /** Disable both halves. */\n disabled?: boolean\n /** aria-label for the primary button. */\n 'aria-label'?: string\n /** aria-label for the dropdown trigger. @default 'More options' */\n dropdownLabel?: string\n /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n dropdownIcon?: React.ReactNode\n /** Which side the dropdown trigger sits on. @default 'right' */\n triggerSide?: 'left' | 'right'\n /** Preferred placement for the dropdown panel. @default 'top-end' */\n placement?: Placement\n /** Width of the trigger (chevron) half. @default 'auto' */\n triggerWidth?: number | string\n className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\nconst dividerColor: Record<SplitButtonVariant, Record<string, string>> = {\n solid: {\n accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n warning: 'bg-warning-11/20', neutral: 'bg-neutral-8/30',\n },\n soft: {\n accent: 'bg-accent-6', error: 'bg-error-6', success: 'bg-success-6',\n warning: 'bg-warning-6', neutral: 'bg-surface-border',\n },\n outline: {\n accent: 'bg-accent-7', error: 'bg-error-7', success: 'bg-success-7',\n warning: 'bg-warning-7', neutral: 'bg-surface-border-strong',\n },\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n 'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n xs: 'text-ds-sm', sm: 'text-ds-sm', md: 'text-ds-md',\n 'icon-xs': 'text-ds-sm', 'icon-sm': 'text-ds-sm', 'icon-md': 'text-ds-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n 'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n 'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n xs: 'rounded-control', sm: 'rounded-control', md: 'rounded-control',\n 'icon-xs': 'rounded-control', 'icon-sm': 'rounded-control', 'icon-md': 'rounded-control',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n const map: Record<SplitButtonVariant, Record<string, string>> = {\n solid: {\n accent: 'bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11',\n error: 'bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11',\n success: 'bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11',\n warning: 'bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11',\n neutral: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8',\n },\n soft: {\n accent: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5',\n error: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5',\n success: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5',\n warning: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5',\n neutral: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5',\n },\n outline: {\n accent: 'bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4',\n error: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4',\n success: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4',\n warning: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4',\n neutral: 'bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active',\n },\n }\n return map[variant][color] ?? map[variant].accent\n}\n\nfunction getOutlineBorderColor(color: string): string {\n const map: Record<string, string> = {\n accent: 'border-accent-7', error: 'border-error-7', success: 'border-success-7',\n warning: 'border-warning-7', neutral: 'border-surface-border-strong',\n }\n return map[color] ?? map.accent\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n return (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n function SplitButton(\n {\n children,\n onClick,\n dropdownContent,\n open: openProp,\n onOpenChange,\n variant = 'solid',\n color = 'accent',\n size = 'md',\n disabled = false,\n 'aria-label': ariaLabel,\n dropdownLabel = 'More options',\n dropdownIcon,\n triggerSide = 'right',\n placement: placementProp = 'top-end',\n triggerWidth,\n className,\n },\n ref,\n ) {\n const [internalOpen, setInternalOpen] = React.useState(false)\n const isControlled = openProp !== undefined\n const isOpen = isControlled ? openProp : internalOpen\n\n const anchorRef = React.useRef<HTMLDivElement>(null)\n const floatingRef = React.useRef<HTMLDivElement>(null)\n const menuId = React.useId()\n\n const setOpen = React.useCallback(\n (value: boolean) => {\n if (onOpenChange) onOpenChange(value)\n if (!isControlled) setInternalOpen(value)\n },\n [onOpenChange, isControlled],\n )\n\n // ── Floating UI positioning ──\n React.useEffect(() => {\n if (!isOpen || !anchorRef.current || !floatingRef.current) return\n\n const anchor = anchorRef.current\n const floating = floatingRef.current\n\n const update = () => {\n computePosition(anchor, floating, {\n placement: placementProp,\n middleware: [\n offset(8),\n flip({ fallbackPlacements: ['bottom-end', 'top-start', 'bottom-start'] }),\n shift({ padding: 8 }),\n ],\n }).then(({ x, y }) => {\n Object.assign(floating.style, { left: `${x}px`, top: `${y}px` })\n })\n }\n\n const cleanup = autoUpdate(anchor, floating, update)\n return cleanup\n }, [isOpen, placementProp])\n\n // ── Close on outside click ──\n React.useEffect(() => {\n if (!isOpen) return\n const handleClick = (e: MouseEvent) => {\n const target = e.target as Node\n if (\n anchorRef.current?.contains(target) ||\n floatingRef.current?.contains(target)\n ) return\n setOpen(false)\n }\n document.addEventListener('mousedown', handleClick)\n return () => document.removeEventListener('mousedown', handleClick)\n }, [isOpen, setOpen])\n\n // ── Close on Escape ──\n React.useEffect(() => {\n if (!isOpen) return\n const handleKey = (e: KeyboardEvent) => {\n if (e.key === 'Escape') setOpen(false)\n }\n document.addEventListener('keydown', handleKey)\n return () => document.removeEventListener('keydown', handleKey)\n }, [isOpen, setOpen])\n\n const halfClasses = getHalfClasses(variant, color)\n const divider = dividerColor[variant][color] ?? dividerColor[variant].accent\n\n const triggerStyle = triggerWidth != null\n ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n : undefined\n\n return (\n <>\n {/* Button group */}\n <div\n ref={ref}\n role=\"group\"\n aria-label={ariaLabel ?? undefined}\n className={cn('relative inline-flex', className)}\n >\n <div\n ref={anchorRef}\n className={cn(\n 'inline-flex items-stretch overflow-hidden',\n radiusClass[size],\n variant === 'solid' && 'shadow-raised',\n variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n )}\n >\n {triggerSide === 'left' && (\n <>\n {/* Dropdown trigger (left) */}\n <button\n type=\"button\"\n onClick={() => setOpen(!isOpen)}\n disabled={disabled}\n aria-label={dropdownLabel}\n aria-haspopup=\"menu\"\n aria-expanded={isOpen}\n aria-controls={isOpen ? menuId : undefined}\n className={cn(\n 'inline-flex items-center justify-center select-none',\n 'transition-colors duration-fast-01 ease-productive-standard',\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n 'disabled:pointer-events-none disabled:opacity-action-disabled',\n halfClasses,\n heightClass[size],\n triggerPadding[size],\n )}\n style={triggerStyle}\n >\n {dropdownIcon ?? <ChevronDown />}\n </button>\n <div className={cn('w-px self-stretch', divider)} />\n </>\n )}\n\n {/* Primary action */}\n <button\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n aria-label={ariaLabel}\n className={cn(\n 'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n 'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n 'active:scale-[0.97]',\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n 'disabled:pointer-events-none disabled:opacity-action-disabled',\n halfClasses,\n heightClass[size],\n textClass[size],\n primaryPadding[size],\n )}\n >\n {children}\n </button>\n\n {triggerSide === 'right' && (\n <>\n <div className={cn('w-px self-stretch', divider)} />\n {/* Dropdown trigger (right) */}\n <button\n type=\"button\"\n onClick={() => setOpen(!isOpen)}\n disabled={disabled}\n aria-label={dropdownLabel}\n aria-haspopup=\"menu\"\n aria-expanded={isOpen}\n aria-controls={isOpen ? menuId : undefined}\n className={cn(\n 'inline-flex items-center justify-center select-none',\n 'transition-colors duration-fast-01 ease-productive-standard',\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n 'disabled:pointer-events-none disabled:opacity-action-disabled',\n halfClasses,\n heightClass[size],\n triggerPadding[size],\n )}\n style={triggerStyle}\n >\n {dropdownIcon ?? <ChevronDown />}\n </button>\n </>\n )}\n </div>\n </div>\n\n {/* Floating dropdown panel */}\n <AnimatePresence>\n {isOpen && dropdownContent && (\n <div\n ref={floatingRef}\n id={menuId}\n role=\"menu\"\n className=\"fixed z-popover\"\n style={{ top: 0, left: 0 }}\n >\n <motion.div\n initial={{ opacity: 0, scale: 0.95 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0.95 }}\n transition={{ duration: durations.moderate01 }}\n className=\"rounded-overlay bg-surface-overlay shadow-floating\"\n >\n {dropdownContent}\n </motion.div>\n </div>\n )}\n </AnimatePresence>\n </>\n )\n },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonColor, SplitButtonSize,SplitButtonVariant }\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport { type Placement } from '@floating-ui/dom'\nimport { type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { buttonVariants } from './button'\nimport { cn } from './lib/utils'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\n\n// ── Types ───────────────────────────────────────────────────────\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n /** Primary action content (left side). */\n children: React.ReactNode\n /** Primary click handler (left side). */\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n /** Content rendered inside the floating dropdown panel. */\n dropdownContent?: React.ReactNode\n /** Controlled open state. */\n open?: boolean\n /** Called when open state changes. Uncontrolled if omitted. */\n onOpenChange?: (open: boolean) => void\n /** @default 'solid' */\n variant?: SplitButtonVariant\n /** @default 'accent' */\n color?: SplitButtonColor\n /** @default 'md' */\n size?: SplitButtonSize\n /** Disable both halves. */\n disabled?: boolean\n /** aria-label for the primary button. */\n 'aria-label'?: string\n /** aria-label for the dropdown trigger. @default 'More options' */\n dropdownLabel?: string\n /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n dropdownIcon?: React.ReactNode\n /** Which side the dropdown trigger sits on. @default 'right' */\n triggerSide?: 'left' | 'right'\n /** Preferred placement for the dropdown panel. @default 'top-end' */\n placement?: Placement\n /** Width of the trigger (chevron) half. @default 'auto' */\n triggerWidth?: number | string\n className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\nconst dividerColor: Record<SplitButtonVariant, Record<string, string>> = {\n solid: {\n accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n warning: 'bg-warning-11/20', neutral: 'bg-neutral-8/30',\n },\n soft: {\n accent: 'bg-accent-6', error: 'bg-error-6', success: 'bg-success-6',\n warning: 'bg-warning-6', neutral: 'bg-surface-border',\n },\n outline: {\n accent: 'bg-accent-7', error: 'bg-error-7', success: 'bg-success-7',\n warning: 'bg-warning-7', neutral: 'bg-surface-border-strong',\n },\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n 'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n xs: 'text-ds-sm', sm: 'text-ds-sm', md: 'text-ds-md',\n 'icon-xs': 'text-ds-sm', 'icon-sm': 'text-ds-sm', 'icon-md': 'text-ds-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n 'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n 'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n xs: 'rounded-control', sm: 'rounded-control', md: 'rounded-control',\n 'icon-xs': 'rounded-control', 'icon-sm': 'rounded-control', 'icon-md': 'rounded-control',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n const map: Record<SplitButtonVariant, Record<string, string>> = {\n solid: {\n accent: 'bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11',\n error: 'bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11',\n success: 'bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11',\n warning: 'bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11',\n neutral: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8',\n },\n soft: {\n accent: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5',\n error: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5',\n success: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5',\n warning: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5',\n neutral: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5',\n },\n outline: {\n accent: 'bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4',\n error: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4',\n success: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4',\n warning: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4',\n neutral: 'bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active',\n },\n }\n return map[variant][color] ?? map[variant].accent\n}\n\nfunction getOutlineBorderColor(color: string): string {\n const map: Record<string, string> = {\n accent: 'border-accent-7', error: 'border-error-7', success: 'border-success-7',\n warning: 'border-warning-7', neutral: 'border-surface-border-strong',\n }\n return map[color] ?? map.accent\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n return (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n function SplitButton(\n {\n children,\n onClick,\n dropdownContent,\n open: openProp,\n onOpenChange,\n variant = 'solid',\n color = 'accent',\n size = 'md',\n disabled = false,\n 'aria-label': ariaLabel,\n dropdownLabel = 'More options',\n dropdownIcon,\n triggerSide = 'right',\n placement: placementProp = 'top-end',\n triggerWidth,\n className,\n },\n ref,\n ) {\n // Map the floating-ui `placement` (e.g. 'top-end') to Radix side + align.\n // Positioning, focus-in/return, outside-click, and Escape all come from the\n // Popover primitive now — no hand-rolled floating-ui / listeners.\n const [side, align] = React.useMemo(() => {\n const [s, a] = placementProp.split('-')\n return [\n s as 'top' | 'right' | 'bottom' | 'left',\n (a === 'start' ? 'start' : a === 'end' ? 'end' : 'center') as\n | 'start'\n | 'center'\n | 'end',\n ]\n }, [placementProp])\n\n const halfClasses = getHalfClasses(variant, color)\n const divider = dividerColor[variant][color] ?? dividerColor[variant].accent\n\n const triggerStyle = triggerWidth != null\n ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n : undefined\n\n // Dropdown trigger (the chevron half). PopoverTrigger wires aria-haspopup /\n // aria-expanded / focus-return for us.\n const dropdownTrigger = (\n <PopoverTrigger asChild>\n <button\n type=\"button\"\n disabled={disabled}\n aria-label={dropdownLabel}\n className={cn(\n 'inline-flex items-center justify-center select-none',\n 'transition-colors duration-fast-01 ease-productive-standard',\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n 'disabled:pointer-events-none disabled:opacity-action-disabled',\n halfClasses,\n heightClass[size],\n triggerPadding[size],\n )}\n style={triggerStyle}\n >\n {dropdownIcon ?? <ChevronDown />}\n </button>\n </PopoverTrigger>\n )\n\n return (\n <Popover open={openProp} onOpenChange={onOpenChange}>\n {/* Button group */}\n <div\n ref={ref}\n role=\"group\"\n aria-label={ariaLabel ?? undefined}\n className={cn('relative inline-flex', className)}\n >\n <div\n className={cn(\n 'inline-flex items-stretch overflow-hidden',\n radiusClass[size],\n variant === 'solid' && 'shadow-raised',\n variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n )}\n >\n {triggerSide === 'left' && (\n <>\n {dropdownTrigger}\n <div className={cn('w-px self-stretch', divider)} />\n </>\n )}\n\n {/* Primary action */}\n <button\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n aria-label={ariaLabel}\n className={cn(\n 'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n 'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n 'active:scale-[0.97]',\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n 'disabled:pointer-events-none disabled:opacity-action-disabled',\n halfClasses,\n heightClass[size],\n textClass[size],\n primaryPadding[size],\n )}\n >\n {children}\n </button>\n\n {triggerSide === 'right' && (\n <>\n <div className={cn('w-px self-stretch', divider)} />\n {dropdownTrigger}\n </>\n )}\n </div>\n </div>\n\n {/* Dropdown panel — Popover handles focus, Escape, outside-click, return */}\n {dropdownContent && (\n <PopoverContent\n side={side}\n align={align}\n sideOffset={8}\n className=\"w-auto min-w-[10rem] p-ds-01\"\n >\n {dropdownContent}\n </PopoverContent>\n )}\n </Popover>\n )\n },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonColor, SplitButtonSize,SplitButtonVariant }\n"],"mappings":"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"}
|
package/dist/ui/stat-card.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { CardSize } from './card';
|
|
2
3
|
import { IconInput } from './lib/icon-input';
|
|
3
4
|
import { FlashPreset, FlashSpec, FlashSpeed } from './stat-flash';
|
|
4
5
|
import * as React from 'react';
|
|
@@ -76,6 +77,12 @@ export interface StatCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
76
77
|
progress?: number;
|
|
77
78
|
/** Surface variant, delegated to Card: `default` (ring-in-shadow) | `elevated` | `outline` (border, no shadow) | `flat`. @default 'default' */
|
|
78
79
|
variant?: 'default' | 'elevated' | 'outline' | 'flat';
|
|
80
|
+
/**
|
|
81
|
+
* Tile density, delegated to Card's size axis. `sm` tightens padding to 16px and steps
|
|
82
|
+
* the value down to `text-ds-2xl` — use it for dense KPI rows and narrow stat grids
|
|
83
|
+
* (e.g. stat-row's 140px tiles). @default 'md'
|
|
84
|
+
*/
|
|
85
|
+
size?: CardSize;
|
|
79
86
|
/** How the brand accent reads: `none` (neutral — default), `icon` (accent chip around `icon`), or `tint` (subtle accent surface wash + accent value). */
|
|
80
87
|
accentStyle?: 'none' | 'icon' | 'tint';
|
|
81
88
|
/** When `accentStyle="icon"`: `soft` (tinted chip) or `solid` (filled accent chip). @default 'soft' */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAiC,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAGrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAKjD,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAY,MAAM,cAAc,CAAA;AAE1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,kJAAkJ;IAClJ,cAAc,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+IAA+I;IAC/I,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAA;IACrD;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IACtC,uGAAuG;IACvG,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC/B,iFAAiF;IACjF,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AA+FD,QAAA,MAAM,QAAQ,sFA0Qb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|