gridsmith-ui 0.8.0 → 0.9.0

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 (22) hide show
  1. package/dist/charts.js +2 -3
  2. package/dist/charts.js.map +1 -1
  3. package/dist/chat.js +2 -2
  4. package/dist/chunk-PDZL4A6K.js +38 -0
  5. package/dist/chunk-PDZL4A6K.js.map +1 -0
  6. package/dist/{chunk-QVNGQ64Q.js → chunk-PHQWHAT3.js} +12 -4
  7. package/dist/chunk-PHQWHAT3.js.map +1 -0
  8. package/dist/{chunk-VXKSQ56H.js → chunk-X27PSHOH.js} +3 -3
  9. package/dist/{chunk-VXKSQ56H.js.map → chunk-X27PSHOH.js.map} +1 -1
  10. package/dist/data-grid.d.ts +3 -1
  11. package/dist/data-grid.js +32 -6
  12. package/dist/data-grid.js.map +1 -1
  13. package/dist/index.d.ts +50 -19
  14. package/dist/index.js +2169 -1908
  15. package/dist/index.js.map +1 -1
  16. package/dist/kanban.js +1 -1
  17. package/dist/roots.css +8 -4
  18. package/dist/{use-breakpoint-BfKzmkxx.d.ts → table-utils-GounRE6s.d.ts} +4 -1
  19. package/dist/tokens.css +6 -4
  20. package/dist-static/tokens.css +6 -4
  21. package/package.json +1 -1
  22. package/dist/chunk-QVNGQ64Q.js.map +0 -1
package/dist/kanban.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Badge } from './chunk-QVNGQ64Q.js';
1
+ import { Badge } from './chunk-PHQWHAT3.js';
2
2
  import { useTextOverflow, Tooltip } from './chunk-RLNIRPOH.js';
3
3
  import './chunk-WH2FUFAC.js';
4
4
  import { Icon } from './chunk-X4CNZFWC.js';
package/dist/roots.css CHANGED
@@ -88,9 +88,9 @@
88
88
  --ds-chart-height-md: 16rem;
89
89
  --ds-chart-height-lg: 20rem;
90
90
 
91
- --ds-control-height-sm: 32px;
92
- --ds-control-height-md: 40px;
93
- --ds-control-height-lg: 48px;
91
+ --ds-control-height-sm: max(28px, calc(32px * var(--ds-density)));
92
+ --ds-control-height-md: max(36px, calc(32px * var(--ds-density) + 8px));
93
+ --ds-control-height-lg: max(44px, calc(32px * var(--ds-density) + 16px));
94
94
  --ds-dropdown-max-height: 256px;
95
95
  --ds-tab-rail-width: 180px;
96
96
  --ds-icon-size-sm: 14px;
@@ -213,6 +213,10 @@
213
213
  --ds-space-10: calc(var(--ds-space-effective) * 10);
214
214
  --ds-space-12: calc(var(--ds-space-effective) * 12);
215
215
 
216
+ /* Section heading bottom gap — gives every SectionHeading consistent
217
+ spacing below it so call sites don't hand-add margins. */
218
+ --ds-heading-gap: var(--ds-space-4);
219
+
216
220
  /* ── L1: Density & Breakpoints ─────────────────────────────────── */
217
221
 
218
222
  --ds-density: 1;
@@ -432,7 +436,7 @@
432
436
  --ds-nav-v-active-text: var(--ds-accent-primary);
433
437
  --ds-nav-v-active-rail: var(--ds-border-width-thick);
434
438
  --ds-nav-v-item-radius: var(--ds-radius-sm);
435
- --ds-nav-v-track-border: var(--ds-border-width);
439
+ --ds-nav-v-track-border: 0px;
436
440
  --ds-nav-v-track-padding: var(--ds-space-1);
437
441
  --ds-nav-v-badge-bg: var(--ds-accent-primary);
438
442
  --ds-nav-v-active-muted: var(--ds-text-secondary);
package/dist/{use-breakpoint-BfKzmkxx.d.ts → table-utils-GounRE6s.d.ts} RENAMED
@@ -30,4 +30,7 @@ declare function BreakpointWidthProvider({ width, children }: {
30
30
  */
31
31
  declare function useBreakpoint(key: BreakpointKey): boolean;
32
32
 
33
- export { type BreakpointKey as B, BreakpointWidthProvider as a, useBreakpoint as u };
33
+ /** Shared column-kind inference for Table and DataGrid. */
34
+ type ColumnKind = "date" | "number" | "email" | "label" | "text";
35
+
36
+ export { type BreakpointKey as B, type ColumnKind as C, BreakpointWidthProvider as a, useBreakpoint as u };
package/dist/tokens.css CHANGED
@@ -23,8 +23,8 @@
23
23
  --ds-font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
24
24
  --ds-text-base: 16px;
25
25
  --ds-weight-base: 500;
26
- --ds-shadow-offset: 0px;
27
- --ds-shadow-blur: 6px;
26
+ --ds-shadow-offset: 2px;
27
+ --ds-shadow-blur: 4px;
28
28
  --ds-shadow-alpha: 0.1;
29
29
  --ds-transition-speed: 200ms;
30
30
  --ds-transition-ease: ease-in-out;
@@ -42,6 +42,8 @@
42
42
  --ds-input-focus-ring: var(--ds-ring-active);
43
43
  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-700);
44
44
  --ds-tint-strength: 0.15;
45
+ --ds-gradient-start: var(--ds-accent-primary);
46
+ --ds-gradient-end: var(--ds-accent-primary);
45
47
  --ds-accent-wash: linear-gradient(var(--ds-accent-primary), var(--ds-accent-primary));
46
48
  --ds-text-on-primary: oklch(1 0 0);
47
49
  --ds-text-muted-on-tint: var(--ds-neutral-600);
@@ -58,7 +60,7 @@
58
60
  --ds-nav-v-active-text: var(--ds-accent-primary);
59
61
  --ds-nav-v-active-rail: var(--ds-border-width-thick);
60
62
  --ds-nav-v-item-radius: var(--ds-radius-sm);
61
- --ds-nav-v-track-border: var(--ds-border-width);
63
+ --ds-nav-v-track-border: 0px;
62
64
  --ds-nav-v-track-padding: var(--ds-space-1);
63
65
  --ds-nav-v-active-muted: var(--ds-text-secondary);
64
66
  --ds-nav-v-badge-bg: var(--ds-accent-primary);
@@ -88,7 +90,7 @@
88
90
  --ds-nav-v-active-text: var(--ds-accent-primary);
89
91
  --ds-nav-v-active-rail: var(--ds-border-width-thick);
90
92
  --ds-nav-v-item-radius: var(--ds-radius-sm);
91
- --ds-nav-v-track-border: var(--ds-border-width);
93
+ --ds-nav-v-track-border: 0px;
92
94
  --ds-nav-v-track-padding: var(--ds-space-1);
93
95
  --ds-nav-v-active-muted: var(--ds-text-secondary);
94
96
  --ds-nav-v-badge-bg: var(--ds-accent-primary);
package/dist-static/tokens.css CHANGED
@@ -23,8 +23,8 @@
23
23
  --ds-font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
24
24
  --ds-text-base: 16px;
25
25
  --ds-weight-base: 500;
26
- --ds-shadow-offset: 0px;
27
- --ds-shadow-blur: 6px;
26
+ --ds-shadow-offset: 2px;
27
+ --ds-shadow-blur: 4px;
28
28
  --ds-shadow-alpha: 0.1;
29
29
  --ds-transition-speed: 200ms;
30
30
  --ds-transition-ease: ease-in-out;
@@ -42,6 +42,8 @@
42
42
  --ds-input-focus-ring: var(--ds-ring-active);
43
43
  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-700);
44
44
  --ds-tint-strength: 0.15;
45
+ --ds-gradient-start: var(--ds-accent-primary);
46
+ --ds-gradient-end: var(--ds-accent-primary);
45
47
  --ds-accent-wash: linear-gradient(var(--ds-accent-primary), var(--ds-accent-primary));
46
48
  --ds-text-on-primary: oklch(1 0 0);
47
49
  --ds-text-muted-on-tint: var(--ds-neutral-600);
@@ -58,7 +60,7 @@
58
60
  --ds-nav-v-active-text: var(--ds-accent-primary);
59
61
  --ds-nav-v-active-rail: var(--ds-border-width-thick);
60
62
  --ds-nav-v-item-radius: var(--ds-radius-sm);
61
- --ds-nav-v-track-border: var(--ds-border-width);
63
+ --ds-nav-v-track-border: 0px;
62
64
  --ds-nav-v-track-padding: var(--ds-space-1);
63
65
  --ds-nav-v-active-muted: var(--ds-text-secondary);
64
66
  --ds-nav-v-badge-bg: var(--ds-accent-primary);
@@ -88,7 +90,7 @@
88
90
  --ds-nav-v-active-text: var(--ds-accent-primary);
89
91
  --ds-nav-v-active-rail: var(--ds-border-width-thick);
90
92
  --ds-nav-v-item-radius: var(--ds-radius-sm);
91
- --ds-nav-v-track-border: var(--ds-border-width);
93
+ --ds-nav-v-track-border: 0px;
92
94
  --ds-nav-v-track-padding: var(--ds-space-1);
93
95
  --ds-nav-v-active-muted: var(--ds-text-secondary);
94
96
  --ds-nav-v-badge-bg: var(--ds-accent-primary);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gridsmith-ui",
3
- "version": "0.8.0",
3
+ "version": "0.9.0",
4
4
  "description": "Gridsmith component library — 98 React components with design tokens and a CSS custom property theming engine",
5
5
  "type": "module",
6
6
  "sideEffects": [
package/dist/chunk-QVNGQ64Q.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../showcase/src/components/Badge.tsx"],"names":[],"mappings":"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","file":"chunk-QVNGQ64Q.js","sourcesContent":["import { cn } from \"../lib/utils\";\nimport { Icon, type IconName } from \"../lib/icons\";\nimport { Tooltip } from \"./Tooltip\";\nimport { useTextOverflow } from \"../lib/use-text-overflow\";\nimport type { ReactNode } from \"react\";\n\nexport type BadgeVariant =\n | \"default\"\n | \"neutral\"\n | \"subtle\"\n | \"success\"\n | \"success-soft\"\n | \"warning\"\n | \"warning-soft\"\n | \"error\"\n | \"error-soft\"\n | \"outline\";\n\nexport type BadgeSize = \"xs\" | \"sm\" | \"md\";\nexport type BadgePaletteColor = 1 | 2 | 3 | 4 | 5;\n\nconst variantStyles: Record<BadgeVariant, string> = {\n default: \"bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]\",\n neutral: \"bg-[var(--ds-text-muted)]/[0.12] text-[var(--ds-text-secondary)]\",\n subtle: \"bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]\",\n success: \"bg-[var(--ds-status-success)] text-[var(--ds-text-on-success)]\",\n \"success-soft\": \"bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success)] border-[length:var(--ds-border-width)] border-[var(--ds-status-success)]/[0.2]\",\n warning: \"bg-[var(--ds-status-warning)] text-[var(--ds-text-on-warning)]\",\n \"warning-soft\": \"bg-[var(--ds-status-warning-bg)] text-[var(--ds-status-warning-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-warning)]/[0.2]\",\n error: \"bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]\",\n \"error-soft\": \"bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]/[0.2]\",\n outline: \"bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n};\n\nconst sizeStyles: Record<BadgeSize, string> = {\n xs: \"px-ds-1.5 py-[1px] text-[length:10px] gap-[3px]\",\n sm: \"px-ds-2 py-ds-0.5 text-[length:var(--ds-font-size-xs)] gap-ds-1\",\n md: \"px-ds-2.5 py-ds-0.5 text-[length:var(--ds-font-size-xs)] gap-ds-1\",\n};\n\nconst iconSizes: Record<BadgeSize, number> = {\n xs: 10,\n sm: 12,\n md: 12,\n};\n\ntype PaletteStyleFn = (n: BadgePaletteColor) => string;\n\nconst paletteByVariant: Record<string, PaletteStyleFn> = {\n default: (n) => paletteDefault[n],\n neutral: (n) => paletteSubtle[n],\n subtle: (n) => paletteSubtle[n],\n outline: (n) => paletteOutline[n],\n};\n\nconst paletteDefault: Record<BadgePaletteColor, string> = {\n 1: \"bg-[var(--ds-palette-1-bold)] text-[var(--ds-palette-1-on-bold)]\",\n 2: \"bg-[var(--ds-palette-2-bold)] text-[var(--ds-palette-2-on-bold)]\",\n 3: \"bg-[var(--ds-palette-3-bold)] text-[var(--ds-palette-3-on-bold)]\",\n 4: \"bg-[var(--ds-palette-4-bold)] text-[var(--ds-palette-4-on-bold)]\",\n 5: \"bg-[var(--ds-palette-5-bold)] text-[var(--ds-palette-5-on-bold)]\",\n};\n\nconst paletteSubtle: Record<BadgePaletteColor, string> = {\n 1: \"bg-[var(--ds-palette-1-bg)] text-[var(--ds-palette-1-text)]\",\n 2: \"bg-[var(--ds-palette-2-bg)] text-[var(--ds-palette-2-text)]\",\n 3: \"bg-[var(--ds-palette-3-bg)] text-[var(--ds-palette-3-text)]\",\n 4: \"bg-[var(--ds-palette-4-bg)] text-[var(--ds-palette-4-text)]\",\n 5: \"bg-[var(--ds-palette-5-bg)] text-[var(--ds-palette-5-text)]\",\n};\n\nconst paletteOutline: Record<BadgePaletteColor, string> = {\n 1: \"bg-transparent text-[var(--ds-palette-1-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-1-bold)]\",\n 2: \"bg-transparent text-[var(--ds-palette-2-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-2-bold)]\",\n 3: \"bg-transparent text-[var(--ds-palette-3-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-3-bold)]\",\n 4: \"bg-transparent text-[var(--ds-palette-4-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-4-bold)]\",\n 5: \"bg-transparent text-[var(--ds-palette-5-bold)] border-[length:var(--ds-border-width)] border-[var(--ds-palette-5-bold)]\",\n};\n\nfunction getPaletteClasses(color: BadgePaletteColor, variant: BadgeVariant): string {\n const styleFn = paletteByVariant[variant] ?? paletteByVariant.default;\n return styleFn(color);\n}\n\ninterface BadgeProps {\n variant?: BadgeVariant;\n size?: BadgeSize;\n /** Palette colour (1-5). Overrides variant colour with decorative palette tokens. */\n color?: BadgePaletteColor;\n /** Icon to show before the label */\n iconLeft?: IconName;\n /** Icon to show after the label */\n iconRight?: IconName;\n /** Max width before truncation (e.g. \"120px\", \"16ch\"). Shows tooltip when truncated. */\n maxWidth?: string;\n className?: string;\n children?: ReactNode;\n}\n\nexport function Badge({ variant = \"default\", size = \"md\", color, iconLeft, iconRight, maxWidth, className, children }: BadgeProps) {\n const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1, disabled: !maxWidth });\n const iconSize = iconSizes[size];\n const isIconOnly = (iconLeft || iconRight) && !children;\n\n const colorClasses = color\n ? getPaletteClasses(color, variant)\n : variantStyles[variant];\n\n const badge = (\n <span\n className={cn(\n \"inline-flex items-center font-medium max-w-full whitespace-nowrap\",\n \"rounded-[var(--ds-radius-full)]\",\n sizeStyles[size],\n isIconOnly && size === \"xs\" && \"px-[3px]\",\n isIconOnly && size === \"sm\" && \"px-ds-1\",\n isIconOnly && size === \"md\" && \"px-ds-1.5\",\n colorClasses,\n className\n )}\n style={maxWidth ? { maxWidth } : undefined}\n >\n {iconLeft && <Icon name={iconLeft} size={iconSize} className=\"shrink-0\" />}\n {maxWidth ? (\n <span ref={truncRef} className=\"truncate\">{children}</span>\n ) : (\n children\n )}\n {iconRight && <Icon name={iconRight} size={iconSize} className=\"shrink-0\" />}\n </span>\n );\n\n if (isTruncated) {\n return <Tooltip content={children}>{badge}</Tooltip>;\n }\n return badge;\n}\n"]}