@devalok/shilp-sutra 0.23.1 → 0.23.2

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.
@@ -15,7 +15,7 @@ export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement>,
15
15
  max?: number;
16
16
  showTooltip?: boolean;
17
17
  /** Border color for the group avatars. @default 'surface-raised' */
18
- borderColor?: 'surface-base' | 'surface-raised' | 'surface-1' | 'surface-2';
18
+ borderColor?: 'surface-base' | 'surface-raised';
19
19
  /** Callback when the "+N" overflow badge is clicked */
20
20
  onOverflowClick?: () => void;
21
21
  /** Custom render function for each avatar */
@@ -1 +1 @@
1
- {"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAgB9C,QAAA,MAAM,kBAAkB;;8EAgBvB,CAAA;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,cAAc,GAAG,gBAAgB,GAAG,WAAW,GAAG,WAAW,CAAA;IAC3E,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnE,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;CAC9C;AAED,QAAA,MAAM,WAAW,yFAqLhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
1
+ {"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAgB9C,QAAA,MAAM,kBAAkB;;8EAgBvB,CAAA;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oEAAoE;IACpE,WAAW,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAA;IAC/C,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnE,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;CAC9C;AAED,QAAA,MAAM,WAAW,yFAqLhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
@@ -1,16 +1,16 @@
1
1
  "use client";
2
2
  import { jsx as t, jsxs as s } from "react/jsx-runtime";
3
- import * as x from "react";
3
+ import * as v from "react";
4
4
  import { ag as $ } from "../_chunks/vendor-utils.js";
5
5
  import { cn as o } from "../ui/lib/utils.js";
6
6
  import { Avatar as E, AvatarImage as F, AvatarFallback as G } from "../ui/avatar.js";
7
- import { TooltipProvider as H, Tooltip as y, TooltipTrigger as N, TooltipContent as w } from "../ui/tooltip.js";
7
+ import { TooltipProvider as H, Tooltip as x, TooltipTrigger as y, TooltipContent as N } from "../ui/tooltip.js";
8
8
  import { getInitials as B } from "./lib/string-utils.js";
9
- const I = {
9
+ const w = {
10
10
  lead: "ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-raised",
11
11
  admin: "ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-raised",
12
12
  client: "ring-2 ring-info-7 ring-offset-1 ring-offset-surface-raised"
13
- }, M = $(
13
+ }, I = $(
14
14
  "shrink-0 overflow-hidden rounded-ds-full border-2",
15
15
  {
16
16
  variants: {
@@ -26,15 +26,15 @@ const I = {
26
26
  size: "md"
27
27
  }
28
28
  }
29
- ), L = x.forwardRef(
29
+ ), L = v.forwardRef(
30
30
  ({
31
31
  users: l,
32
32
  max: m = 4,
33
33
  size: n,
34
- showTooltip: T = !0,
35
- borderColor: p = "surface-raised",
36
- onOverflowClick: h,
37
- renderAvatar: u,
34
+ showTooltip: M = !0,
35
+ borderColor: T = "surface-raised",
36
+ onOverflowClick: p,
37
+ renderAvatar: h,
38
38
  expandDirection: z = "right",
39
39
  expandAmount: C = "default",
40
40
  className: S,
@@ -46,7 +46,7 @@ const I = {
46
46
  md: "-ml-ds-03",
47
47
  lg: "-ml-ds-04",
48
48
  xl: "-ml-ds-05"
49
- }[n ?? "md"], g = p === "surface-1" || p === "surface-base" ? "border-surface-base" : "border-surface-raised", [A, d] = x.useState(!1), P = {
49
+ }[n ?? "md"], g = T === "surface-base" ? "border-surface-base" : "border-surface-raised", [A, d] = v.useState(!1), P = {
50
50
  xs: 8,
51
51
  sm: 10,
52
52
  md: 12,
@@ -58,7 +58,7 @@ const I = {
58
58
  const r = P * R;
59
59
  return z === "left" ? `translateX(-${(V - 1 - e) * r}px)` : `translateX(${e * r}px)`;
60
60
  }
61
- const b = "transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85";
61
+ const u = "transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85";
62
62
  return /* @__PURE__ */ t(H, { children: /* @__PURE__ */ s(
63
63
  "div",
64
64
  {
@@ -77,30 +77,30 @@ const I = {
77
77
  children: [
78
78
  a.map((e, r) => {
79
79
  const X = B(e.name);
80
- if (u)
80
+ if (h)
81
81
  return /* @__PURE__ */ t(
82
82
  "div",
83
83
  {
84
84
  className: o(
85
85
  "shrink-0",
86
86
  r > 0 && c,
87
- b,
88
- e.ring && e.ring !== "none" && I[e.ring]
87
+ u,
88
+ e.ring && e.ring !== "none" && w[e.ring]
89
89
  ),
90
90
  style: { zIndex: a.length - r, transform: f(r) },
91
- children: u(e, r)
91
+ children: h(e, r)
92
92
  },
93
93
  e.name
94
94
  );
95
- const v = /* @__PURE__ */ s(
95
+ const b = /* @__PURE__ */ s(
96
96
  E,
97
97
  {
98
98
  size: n,
99
99
  className: o(
100
100
  g,
101
101
  r > 0 && c,
102
- b,
103
- e.ring && e.ring !== "none" && I[e.ring]
102
+ u,
103
+ e.ring && e.ring !== "none" && w[e.ring]
104
104
  ),
105
105
  style: { zIndex: a.length - r, transform: f(r) },
106
106
  children: [
@@ -117,26 +117,26 @@ const I = {
117
117
  },
118
118
  e.name
119
119
  );
120
- return T ? /* @__PURE__ */ s(y, { children: [
121
- /* @__PURE__ */ t(N, { asChild: !0, children: v }),
120
+ return M ? /* @__PURE__ */ s(x, { children: [
121
+ /* @__PURE__ */ t(y, { asChild: !0, children: b }),
122
122
  /* @__PURE__ */ t(
123
- w,
123
+ N,
124
124
  {
125
125
  className: "border-surface-border-strong bg-surface-base text-surface-fg",
126
126
  sideOffset: 6,
127
127
  children: /* @__PURE__ */ t("p", { className: "text-ds-sm", children: e.name })
128
128
  }
129
129
  )
130
- ] }, e.name) : v;
130
+ ] }, e.name) : b;
131
131
  }),
132
- i > 0 && /* @__PURE__ */ s(y, { children: [
133
- /* @__PURE__ */ t(N, { asChild: !0, children: h ? /* @__PURE__ */ s(
132
+ i > 0 && /* @__PURE__ */ s(x, { children: [
133
+ /* @__PURE__ */ t(y, { asChild: !0, children: p ? /* @__PURE__ */ s(
134
134
  "button",
135
135
  {
136
136
  type: "button",
137
- onClick: h,
137
+ onClick: p,
138
138
  className: o(
139
- M({ size: n }),
139
+ I({ size: n }),
140
140
  g,
141
141
  c,
142
142
  "flex cursor-pointer items-center justify-center bg-accent-2 font-body font-semibold text-accent-11",
@@ -152,7 +152,7 @@ const I = {
152
152
  "div",
153
153
  {
154
154
  className: o(
155
- M({ size: n }),
155
+ I({ size: n }),
156
156
  g,
157
157
  c,
158
158
  "flex cursor-default items-center justify-center bg-accent-2 font-body font-semibold text-accent-11",
@@ -166,7 +166,7 @@ const I = {
166
166
  }
167
167
  ) }),
168
168
  /* @__PURE__ */ t(
169
- w,
169
+ N,
170
170
  {
171
171
  className: "border-surface-border-strong bg-surface-base text-surface-fg",
172
172
  sideOffset: 6,
@@ -188,11 +188,6 @@ const o = {
188
188
  "surface-inverted-fg": "var(--color-surface-inverted-fg)",
189
189
  "surface-disabled": "var(--color-surface-disabled)",
190
190
  "surface-fg-disabled": "var(--color-surface-fg-disabled)",
191
- // Deprecated — remove in next major
192
- "surface-1": "var(--color-surface-base)",
193
- "surface-2": "var(--color-surface-raised)",
194
- "surface-3": "var(--color-surface-raised-hover)",
195
- "surface-4": "var(--color-surface-raised-active)",
196
191
  "surface-fg": "var(--color-surface-fg)",
197
192
  "surface-fg-muted": "var(--color-surface-fg-muted)",
198
193
  "surface-fg-subtle": "var(--color-surface-fg-subtle)",
@@ -331,13 +326,7 @@ const o = {
331
326
  glow: "var(--shadow-glow)",
332
327
  inset: "var(--shadow-inset)",
333
328
  "ring-sm": "var(--shadow-ring-sm)",
334
- ring: "var(--shadow-ring)",
335
- // Deprecated — remove in next major
336
- "01": "var(--shadow-raised)",
337
- "02": "var(--shadow-raised-hover)",
338
- "03": "var(--shadow-floating)",
339
- "04": "var(--shadow-overlay)",
340
- "05": "var(--shadow-overlay)"
329
+ ring: "var(--shadow-ring)"
341
330
  },
342
331
  transitionDuration: {
343
332
  instant: "var(--duration-instant)",
@@ -1 +1 @@
1
- {"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAuZ3B,CAAA;AAED,eAAe,MAAM,CAAA"}
1
+ {"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA4Y3B,CAAA;AAED,eAAe,MAAM,CAAA"}
@@ -188,11 +188,6 @@ const o = {
188
188
  "surface-inverted-fg": "var(--color-surface-inverted-fg)",
189
189
  "surface-disabled": "var(--color-surface-disabled)",
190
190
  "surface-fg-disabled": "var(--color-surface-fg-disabled)",
191
- // Deprecated — remove in next major
192
- "surface-1": "var(--color-surface-base)",
193
- "surface-2": "var(--color-surface-raised)",
194
- "surface-3": "var(--color-surface-raised-hover)",
195
- "surface-4": "var(--color-surface-raised-active)",
196
191
  "surface-fg": "var(--color-surface-fg)",
197
192
  "surface-fg-muted": "var(--color-surface-fg-muted)",
198
193
  "surface-fg-subtle": "var(--color-surface-fg-subtle)",
@@ -331,13 +326,7 @@ const o = {
331
326
  glow: "var(--shadow-glow)",
332
327
  inset: "var(--shadow-inset)",
333
328
  "ring-sm": "var(--shadow-ring-sm)",
334
- ring: "var(--shadow-ring)",
335
- // Deprecated — remove in next major
336
- "01": "var(--shadow-raised)",
337
- "02": "var(--shadow-raised-hover)",
338
- "03": "var(--shadow-floating)",
339
- "04": "var(--shadow-overlay)",
340
- "05": "var(--shadow-overlay)"
329
+ ring: "var(--shadow-ring)"
341
330
  },
342
331
  transitionDuration: {
343
332
  instant: "var(--duration-instant)",
@@ -109,12 +109,6 @@
109
109
  --color-surface-disabled: var(--neutral-2);
110
110
  --color-surface-fg-disabled: var(--neutral-8);
111
111
 
112
- /* Deprecated — remove in next major */
113
- --color-surface-1: var(--color-surface-base);
114
- --color-surface-2: var(--color-surface-raised);
115
- --color-surface-3: var(--color-surface-raised-hover);
116
- --color-surface-4: var(--color-surface-raised-active);
117
-
118
112
  --color-surface-fg: var(--neutral-12);
119
113
  --color-surface-fg-muted: var(--neutral-11);
120
114
  --color-surface-fg-subtle: var(--neutral-8);
@@ -307,7 +301,6 @@
307
301
  0 8px 16px -4px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength))),
308
302
  0 18px 34px -8px oklch(var(--shadow-color) / calc(0.03 * var(--shadow-strength))),
309
303
  0 40px 64px -16px oklch(var(--shadow-color) / calc(0.025 * var(--shadow-strength)));
310
- --shadow-05: 0 4px 8px oklch(0 0 0 / 0.10), 0 16px 32px oklch(0 0 0 / 0.16), 0 32px 64px oklch(0 0 0 / 0.14);
311
304
 
312
305
  /* Semantic elevation shadows (public API) */
313
306
  --shadow-raised: var(--shadow-xs);
@@ -322,12 +315,6 @@
322
315
  --shadow-ring-sm: 0 0 0 1px var(--color-surface-border);
323
316
  --shadow-ring: 0 0 0 2px oklch(0.55 0.19 360 / 0.30);
324
317
 
325
- /* Deprecated shadow aliases */
326
- --shadow-01: var(--shadow-raised);
327
- --shadow-02: var(--shadow-raised-hover);
328
- --shadow-03: var(--shadow-floating);
329
- --shadow-04: var(--shadow-overlay);
330
-
331
318
  /* ═══════════════════════════════════════════════════════════
332
319
  SIZES
333
320
  ═══════════════════════════════════════════════════════════ */
@@ -443,7 +430,6 @@
443
430
 
444
431
  /* Shadows (heavier in dark mode) */
445
432
  --shadow-strength: 2.5;
446
- --shadow-05: 0 4px 8px oklch(0 0 0 / 0.25), 0 16px 32px oklch(0 0 0 / 0.40), 0 32px 64px oklch(0 0 0 / 0.35);
447
433
  --shadow-brand: 0 2px 8px oklch(0.55 0.19 360 / 0.30), 0 6px 20px oklch(0.55 0.19 360 / 0.20);
448
434
  --shadow-glow: 0 0 0 1.5px oklch(0.55 0.19 360 / 0.35), 0 0 10px oklch(0.55 0.19 360 / 0.20);
449
435
  --shadow-ring: 0 0 0 2px oklch(0.55 0.19 360 / 0.45);
@@ -172,7 +172,7 @@ const U = D.forwardRef(
172
172
  ref: y,
173
173
  className: w(
174
174
  "inline-flex gap-0 p-0 rounded-ds-full",
175
- "bg-surface-raised",
175
+ "bg-surface-raised shadow-inset",
176
176
  "border border-solid border-surface-border-strong",
177
177
  t
178
178
  ),
@@ -98,7 +98,7 @@ const te = i(
98
98
  "div",
99
99
  {
100
100
  className: r(
101
- "flex h-full w-[--sidebar-width] flex-col bg-surface-raised text-surface-fg",
101
+ "flex h-full w-[--sidebar-width] flex-col bg-surface-sunken text-surface-fg",
102
102
  d
103
103
  ),
104
104
  ref: u,
@@ -152,7 +152,7 @@ const te = i(
152
152
  "div",
153
153
  {
154
154
  "data-sidebar": "sidebar",
155
- className: "flex h-full w-full flex-col bg-surface-raised group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow",
155
+ className: "flex h-full w-full flex-col bg-surface-sunken group-data-[variant=floating]:rounded-ds-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-surface-border group-data-[variant=floating]:shadow",
156
156
  children: o
157
157
  }
158
158
  )
@@ -234,7 +234,7 @@ const de = i(({ className: a, ...e }, t) => /* @__PURE__ */ s(
234
234
  ref: t,
235
235
  "data-sidebar": "input",
236
236
  className: r(
237
- "h-ds-sm w-full bg-surface-raised shadow-none focus-visible:ring-2 focus-visible:ring-accent-9",
237
+ "h-ds-sm w-full bg-surface-sunken shadow-none focus-visible:ring-2 focus-visible:ring-accent-9",
238
238
  a
239
239
  ),
240
240
  ...e
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.23.1
8
+ > Version: 0.23.2
9
9
 
10
10
  ---
11
11
 
package/llms.txt CHANGED
@@ -42,7 +42,7 @@ Same pattern for `border-surface-*`, `text-surface-*`, `ring-surface-*`.
42
42
 
43
43
  **Hard rule: never combine explicit border + shadow.** Shadows include a 1px ring layer. Adding a CSS border creates a 2px edge. Use shadow OR border, never both.
44
44
 
45
- **Backward compat:** Old CSS variable names (`--color-surface-1`, `--shadow-01`) preserved as aliases. Old Tailwind classes still resolve. Will be removed in a future major version.
45
+ **Breaking:** Old numeric aliases (`--color-surface-1..4`, `--shadow-01..05`, Tailwind `bg-surface-1..4`, `shadow-01..05`) have been removed. Use the semantic names listed above.
46
46
 
47
47
  **Component Decision Matrix:**
48
48
  | Building... | Surface | Shadow |
@@ -138,7 +138,7 @@ Same pattern for `border-surface-*`, `text-surface-*`, `ring-surface-*`.
138
138
  - Step purposes: 1=app-bg, 2=subtle-bg, 3=component-bg, 4=hover, 5=active, 6=border-subtle, 7=border, 8=border-strong, 9=solid/accent, 10=solid-hover, 11=lo-contrast-text, 12=hi-contrast-text
139
139
  - New semantic tokens: --color-accent-{1-12}, --color-secondary-{1-12}, --color-surface-{base,raised,raised-hover,raised-active,sunken,overlay,inverted,disabled}, --color-surface-fg/fg-muted/fg-subtle/border/border-subtle
140
140
  - Status tokens: --color-error-{3,7,9,11,fg}, --color-success-{3,7,9,11,fg}, --color-warning-{3,7,9,11,fg}, --color-info-{3,7,9,11,fg}
141
- - New Tailwind utilities: accent-1..12, secondary-1..12, surface-base/raised/sunken/overlay/inverted/disabled (+ legacy surface-1..4 aliases), status/category step utilities
141
+ - New Tailwind utilities: accent-1..12, secondary-1..12, surface-base/raised/sunken/overlay/inverted/disabled, status/category step utilities
142
142
  - Backward compat: ALL old semantic token names preserved as aliases. --color-interactive still works → maps to --color-accent-9
143
143
  - Consumer rebranding: override --color-accent-1..12 CSS vars OR use generateScale() utility with a seed color
144
144
  - Dark mode: algorithmically derived (OKLCH curves), NOT hex overrides. Surfaces lighten with elevation.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devalok/shilp-sutra",
3
- "version": "0.23.1",
3
+ "version": "0.23.2",
4
4
  "description": "Devalok Design System — tokens, components, and patterns for Next.js",
5
5
  "license": "MIT",
6
6
  "type": "module",