@devalok/shilp-sutra 0.19.0 → 0.19.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.
Files changed (9) hide show
  1. package/dist/ui/alert-dialog.js +28 -28
  2. package/dist/ui/chip.d.ts.map +1 -1
  3. package/dist/ui/chip.js +13 -12
  4. package/dist/ui/dialog.js +4 -4
  5. package/docs/components/ui/alert-dialog.md +3 -0
  6. package/docs/components/ui/chip.md +3 -0
  7. package/docs/components/ui/dialog.md +3 -0
  8. package/llms-full.txt +10 -1
  9. package/package.json +1 -1
package/dist/ui/alert-dialog.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsx as s, jsxs as h } from "react/jsx-runtime";
2
+ import { jsx as a, jsxs as h } from "react/jsx-runtime";
3
3
  import * as o from "react";
4
4
  import { O as p, w as R, x as u, y as g, D as x, A as y, z as b, B as C, E as j } from "../_chunks/primitives.js";
5
5
  import { cn as i } from "./lib/utils.js";
@@ -7,20 +7,20 @@ import { tweens as f, springs as M } from "./lib/motion.js";
7
7
  import { A as T, m } from "../_chunks/framer.js";
8
8
  const v = o.createContext({ open: !1 }), z = () => o.useContext(v), P = ({
9
9
  open: t,
10
- defaultOpen: a,
10
+ defaultOpen: s,
11
11
  onOpenChange: e,
12
12
  ...r
13
13
  }) => {
14
- const [l, A] = o.useState(a ?? !1), n = t !== void 0, d = n ? t : l, D = o.useCallback(
14
+ const [l, A] = o.useState(s ?? !1), n = t !== void 0, d = n ? t : l, D = o.useCallback(
15
15
  (c) => {
16
16
  n || A(c), e == null || e(c);
17
17
  },
18
18
  [n, e]
19
19
  ), w = o.useMemo(() => ({ open: d }), [d]);
20
- return /* @__PURE__ */ s(v.Provider, { value: w, children: /* @__PURE__ */ s(C, { open: d, onOpenChange: D, ...r }) });
20
+ return /* @__PURE__ */ a(v.Provider, { value: w, children: /* @__PURE__ */ a(C, { open: d, onOpenChange: D, ...r }) });
21
21
  };
22
22
  P.displayName = "AlertDialog";
23
- const L = j, F = R, N = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
23
+ const L = j, F = R, N = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
24
24
  p,
25
25
  {
26
26
  ref: e,
@@ -29,14 +29,14 @@ const L = j, F = R, N = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__
29
29
  "fixed inset-0 z-modal bg-overlay",
30
30
  t
31
31
  ),
32
- ...a
32
+ ...s
33
33
  }
34
34
  ));
35
35
  N.displayName = p.displayName;
36
- const H = o.forwardRef(({ className: t, children: a, ...e }, r) => {
36
+ const H = o.forwardRef(({ className: t, children: s, ...e }, r) => {
37
37
  const { open: l } = z();
38
- return /* @__PURE__ */ s(T, { children: l && /* @__PURE__ */ h(F, { forceMount: !0, children: [
39
- /* @__PURE__ */ s(N, { asChild: !0, children: /* @__PURE__ */ s(
38
+ return /* @__PURE__ */ a(T, { children: l && /* @__PURE__ */ h(F, { forceMount: !0, children: [
39
+ /* @__PURE__ */ a(N, { asChild: !0, children: /* @__PURE__ */ a(
40
40
  m.div,
41
41
  {
42
42
  initial: { opacity: 0 },
@@ -45,25 +45,25 @@ const H = o.forwardRef(({ className: t, children: a, ...e }, r) => {
45
45
  transition: f.fade
46
46
  }
47
47
  ) }),
48
- /* @__PURE__ */ s(
48
+ /* @__PURE__ */ a(
49
49
  u,
50
50
  {
51
51
  ref: r,
52
52
  forceMount: !0,
53
53
  asChild: !0,
54
54
  ...e,
55
- children: /* @__PURE__ */ s(
55
+ children: /* @__PURE__ */ a(
56
56
  m.div,
57
57
  {
58
- initial: { opacity: 0, scale: 0.95 },
59
- animate: { opacity: 1, scale: 1 },
60
- exit: { opacity: 0, scale: 0.95 },
58
+ initial: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
59
+ animate: { opacity: 1, scale: 1, x: "-50%", y: "-50%" },
60
+ exit: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
61
61
  transition: { ...M.smooth, opacity: f.fade },
62
62
  className: i(
63
- "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-ds-05 border border-surface-border-strong bg-surface-1 p-ds-06 shadow-04 rounded-ds-xl",
63
+ "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg gap-ds-05 border border-surface-border-strong bg-surface-1 p-ds-06 shadow-04 rounded-ds-xl",
64
64
  t
65
65
  ),
66
- children: a
66
+ children: s
67
67
  }
68
68
  )
69
69
  }
@@ -72,7 +72,7 @@ const H = o.forwardRef(({ className: t, children: a, ...e }, r) => {
72
72
  });
73
73
  H.displayName = u.displayName;
74
74
  const O = o.forwardRef(
75
- ({ className: t, ...a }, e) => /* @__PURE__ */ s(
75
+ ({ className: t, ...s }, e) => /* @__PURE__ */ a(
76
76
  "div",
77
77
  {
78
78
  ref: e,
@@ -80,13 +80,13 @@ const O = o.forwardRef(
80
80
  "flex flex-col space-y-ds-02b text-center sm:text-left",
81
81
  t
82
82
  ),
83
- ...a
83
+ ...s
84
84
  }
85
85
  )
86
86
  );
87
87
  O.displayName = "AlertDialogHeader";
88
88
  const k = o.forwardRef(
89
- ({ className: t, ...a }, e) => /* @__PURE__ */ s(
89
+ ({ className: t, ...s }, e) => /* @__PURE__ */ a(
90
90
  "div",
91
91
  {
92
92
  ref: e,
@@ -94,12 +94,12 @@ const k = o.forwardRef(
94
94
  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03",
95
95
  t
96
96
  ),
97
- ...a
97
+ ...s
98
98
  }
99
99
  )
100
100
  );
101
101
  k.displayName = "AlertDialogFooter";
102
- const B = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
102
+ const B = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
103
103
  g,
104
104
  {
105
105
  ref: e,
@@ -107,20 +107,20 @@ const B = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
107
107
  "text-ds-lg font-semibold",
108
108
  t
109
109
  ),
110
- ...a
110
+ ...s
111
111
  }
112
112
  ));
113
113
  B.displayName = g.displayName;
114
- const E = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
114
+ const E = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
115
115
  x,
116
116
  {
117
117
  ref: e,
118
118
  className: i("text-ds-md text-surface-fg-muted", t),
119
- ...a
119
+ ...s
120
120
  }
121
121
  ));
122
122
  E.displayName = x.displayName;
123
- const I = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
123
+ const I = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
124
124
  y,
125
125
  {
126
126
  ref: e,
@@ -128,11 +128,11 @@ const I = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
128
128
  "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled",
129
129
  t
130
130
  ),
131
- ...a
131
+ ...s
132
132
  }
133
133
  ));
134
134
  I.displayName = y.displayName;
135
- const S = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
135
+ const S = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
136
136
  b,
137
137
  {
138
138
  ref: e,
@@ -140,7 +140,7 @@ const S = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
140
140
  "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-2 hover:text-surface-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled",
141
141
  t
142
142
  ),
143
- ...a
143
+ ...s
144
144
  }
145
145
  ));
146
146
  S.displayName = b.displayName;
package/dist/ui/chip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/ui/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAQjE,QAAA,MAAM,YAAY;;;;8EA6DjB,CAAA;AAED,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEzJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,KAAK,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,IAAI;;;;;WATD,MAAM;YACL,SAAS;WACV,KAAK,CAAC,SAAS;cACZ,KAAK,CAAC,iBAAiB;gBACrB,MAAM,IAAI;eACX,OAAO;gBACN,MAAM;qCA6CnB,CAAA;AAGD,OAAO,EAAE,eAAe,IAAI,SAAS,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,CAAA"}
1
+ {"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/ui/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAQjE,QAAA,MAAM,YAAY;;;;8EA6DjB,CAAA;AAED,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEzJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,KAAK,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,EAAE,OAAO,CAAC,GAAG;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,IAAI;;;;;WATD,MAAM;YACL,SAAS;WACV,KAAK,CAAC,SAAS;cACZ,KAAK,CAAC,iBAAiB;gBACrB,MAAM,IAAI;eACX,OAAO;gBACN,MAAM;qCA8CnB,CAAA;AAGD,OAAO,EAAE,eAAe,IAAI,SAAS,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,CAAA"}
package/dist/ui/chip.js CHANGED
@@ -1,12 +1,12 @@
1
1
  "use client";
2
- import { jsxs as f, jsx as r } from "react/jsx-runtime";
2
+ import { jsxs as f, jsx as a } from "react/jsx-runtime";
3
3
  import * as v from "react";
4
4
  import { IconX as N } from "@tabler/icons-react";
5
5
  import { ag as h } from "../_chunks/vendor-utils.js";
6
6
  import { springs as w, motionProps as C } from "./lib/motion.js";
7
7
  import { cn as k } from "./lib/utils.js";
8
8
  import { m as n } from "../_chunks/framer.js";
9
- import { A as $ } from "../_chunks/framer.js";
9
+ import { A as X } from "../_chunks/framer.js";
10
10
  const j = h(
11
11
  "inline-flex items-center gap-ds-02 font-sans leading-ds-relaxed rounded-ds-full transition-colors duration-fast-01",
12
12
  {
@@ -69,8 +69,8 @@ const j = h(
69
69
  }
70
70
  }
71
71
  ), R = v.forwardRef(
72
- ({ label: t, variant: i, size: l, color: g, icon: o, onClick: s, onDismiss: c, disabled: a, className: d, ...m }, b) => {
73
- const e = !!s, u = e ? n.button : n.span, y = e && !a ? "cursor-pointer hover:bg-surface-4 active:scale-95" : "", x = a ? "opacity-action-disabled cursor-not-allowed" : "";
72
+ ({ label: t, variant: i, size: l, color: g, icon: o, onClick: s, onDismiss: c, disabled: e, className: d, ...m }, b) => {
73
+ const r = !!s, u = r ? n.button : n.span, y = r && !e ? "cursor-pointer hover:bg-surface-4" : "", x = e ? "opacity-action-disabled cursor-not-allowed" : "";
74
74
  return /* @__PURE__ */ f(
75
75
  u,
76
76
  {
@@ -78,16 +78,17 @@ const j = h(
78
78
  layout: !0,
79
79
  initial: { opacity: 1, scale: 1 },
80
80
  exit: { opacity: 0, scale: 0.8 },
81
+ whileTap: r && !e ? { scale: 0.95 } : void 0,
81
82
  transition: w.snappy,
82
83
  className: k(j({ variant: i, size: l, color: g }), y, x, d),
83
- onClick: e ? s : void 0,
84
- disabled: e ? a : void 0,
85
- type: e ? "button" : void 0,
84
+ onClick: r ? s : void 0,
85
+ disabled: r ? e : void 0,
86
+ type: r ? "button" : void 0,
86
87
  ...C(m),
87
88
  children: [
88
- o && /* @__PURE__ */ r("span", { className: "flex-shrink-0 [&>svg]:w-ico-sm [&>svg]:h-ico-sm", children: o }),
89
- /* @__PURE__ */ r("span", { children: t }),
90
- c && /* @__PURE__ */ r(
89
+ o && /* @__PURE__ */ a("span", { className: "flex-shrink-0 [&>svg]:w-ico-sm [&>svg]:h-ico-sm", children: o }),
90
+ /* @__PURE__ */ a("span", { children: t }),
91
+ c && /* @__PURE__ */ a(
91
92
  "button",
92
93
  {
93
94
  type: "button",
@@ -96,7 +97,7 @@ const j = h(
96
97
  onClick: (p) => {
97
98
  p.stopPropagation(), c();
98
99
  },
99
- children: /* @__PURE__ */ r(N, { className: "h-ico-sm w-ico-sm" })
100
+ children: /* @__PURE__ */ a(N, { className: "h-ico-sm w-ico-sm" })
100
101
  }
101
102
  )
102
103
  ]
@@ -107,6 +108,6 @@ const j = h(
107
108
  R.displayName = "Chip";
108
109
  export {
109
110
  R as Chip,
110
- $ as ChipGroup,
111
+ X as ChipGroup,
111
112
  j as chipVariants
112
113
  };
package/dist/ui/dialog.js CHANGED
@@ -56,12 +56,12 @@ const H = t.forwardRef(({ className: a, children: s, ...e }, r) => {
56
56
  children: /* @__PURE__ */ d(
57
57
  g.div,
58
58
  {
59
- initial: { opacity: 0, scale: 0.95 },
60
- animate: { opacity: 1, scale: 1 },
61
- exit: { opacity: 0, scale: 0.95 },
59
+ initial: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
60
+ animate: { opacity: 1, scale: 1, x: "-50%", y: "-50%" },
61
+ exit: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
62
62
  transition: { ...T.smooth, opacity: p.fade },
63
63
  className: i(
64
- "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-ds-05 border border-surface-border-strong bg-surface-1 p-ds-06 shadow-04 rounded-ds-xl",
64
+ "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg gap-ds-05 border border-surface-border-strong bg-surface-1 p-ds-06 shadow-04 rounded-ds-xl",
65
65
  a
66
66
  ),
67
67
  children: [
package/docs/components/ui/alert-dialog.md CHANGED
@@ -46,6 +46,9 @@
46
46
  - AlertDialogAction does NOT have color="error" styling — add it yourself via className or wrap a Button
47
47
 
48
48
  ## Changes
49
+ ### v0.19.1
50
+ - **Fixed** AlertDialog not centered after Framer Motion animation completes — same `transform: none` fix as Dialog.
51
+
49
52
  ### v0.18.0
50
53
  - **Changed** Overlay animations migrated to Framer Motion (physics-based springs)
51
54
  - **Added** `AlertDialogContentProps`, `AlertDialogActionProps`, `AlertDialogCancelProps` type exports
package/docs/components/ui/chip.md CHANGED
@@ -33,6 +33,9 @@
33
33
  - `color="primary"` will be renamed to `color="brand"` in v1.0 — use `color="primary"` for now
34
34
 
35
35
  ## Changes
36
+ ### v0.19.1
37
+ - **Fixed** `active:scale-95` tap feedback broken by Framer Motion transform override — replaced with `whileTap={{ scale: 0.95 }}`
38
+
36
39
  ### v0.4.2
37
40
  - **Changed** (BREAKING) `variant="filled"` renamed to `"subtle"`, `variant="outlined"` renamed to `"outline"`, `onDelete` renamed to `onDismiss`
38
41
 
package/docs/components/ui/dialog.md CHANGED
@@ -39,6 +39,9 @@
39
39
  - DialogTitle is required for accessibility — screen readers announce it when the dialog opens
40
40
 
41
41
  ## Changes
42
+ ### v0.19.1
43
+ - **Fixed** Dialog not centered after Framer Motion animation completes — `transform: none` inline style overrode Tailwind `translate-x/y` classes. Centering now handled via Framer Motion `x`/`y` properties.
44
+
42
45
  ### v0.18.0
43
46
  - **Changed** Overlay animations migrated to Framer Motion (physics-based springs)
44
47
  - **Added** `DialogContentProps`, `DialogTitleProps` type exports
package/llms-full.txt CHANGED
@@ -5,7 +5,7 @@
5
5
  > All variant values and props verified from source CVA definitions.
6
6
  >
7
7
  > Package: @devalok/shilp-sutra
8
- > Version: 0.19.0
8
+ > Version: 0.19.1
9
9
 
10
10
  ---
11
11
 
@@ -231,6 +231,9 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
231
231
  - AlertDialogAction does NOT have color="error" styling — add it yourself via className or wrap a Button
232
232
 
233
233
  ## Changes
234
+ ### v0.19.1
235
+ - **Fixed** AlertDialog not centered after Framer Motion animation completes — same `transform: none` fix as Dialog.
236
+
234
237
  ### v0.18.0
235
238
  - **Changed** Overlay animations migrated to Framer Motion (physics-based springs)
236
239
  - **Added** `AlertDialogContentProps`, `AlertDialogActionProps`, `AlertDialogCancelProps` type exports
@@ -713,6 +716,9 @@ import { BarChart } from '@devalok/shilp-sutra/ui/charts'
713
716
  - `color="primary"` will be renamed to `color="brand"` in v1.0 — use `color="primary"` for now
714
717
 
715
718
  ## Changes
719
+ ### v0.19.1
720
+ - **Fixed** `active:scale-95` tap feedback broken by Framer Motion transform override — replaced with `whileTap={{ scale: 0.95 }}`
721
+
716
722
  ### v0.4.2
717
723
  - **Changed** (BREAKING) `variant="filled"` renamed to `"subtle"`, `variant="outlined"` renamed to `"outline"`, `onDelete` renamed to `onDismiss`
718
724
 
@@ -1126,6 +1132,9 @@ import { DataTableToolbar } from '@devalok/shilp-sutra/ui/data-table-toolbar'
1126
1132
  - DialogTitle is required for accessibility — screen readers announce it when the dialog opens
1127
1133
 
1128
1134
  ## Changes
1135
+ ### v0.19.1
1136
+ - **Fixed** Dialog not centered after Framer Motion animation completes — `transform: none` inline style overrode Tailwind `translate-x/y` classes. Centering now handled via Framer Motion `x`/`y` properties.
1137
+
1129
1138
  ### v0.18.0
1130
1139
  - **Changed** Overlay animations migrated to Framer Motion (physics-based springs)
1131
1140
  - **Added** `DialogContentProps`, `DialogTitleProps` type exports
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devalok/shilp-sutra",
3
- "version": "0.19.0",
3
+ "version": "0.19.1",
4
4
  "description": "Devalok Design System — tokens, components, and patterns for Next.js",
5
5
  "license": "MIT",
6
6
  "type": "module",