gridsmith-ui 0.6.4 → 0.6.6

package/README.md

@@ -122,6 +122,12 @@ Wrap your app in `<IconProvider>` to select a pack:
 </IconProvider>
 ```
 
+## Troubleshooting
+
+- **Import errors after installing a package while `vite` is running** — restart with `npm run dev -- --force` (or delete `node_modules/.vite`); Vite's dependency cache otherwise serves the pre-install module graph.
+- **Components render unstyled** — add `@source "../node_modules/gridsmith-ui/dist/*.js"` to your CSS entry point *after* every `@import`. Tailwind v4 needs it to scan the compiled components, and rejects an `@import` that follows it.
+- **`IconProvider` is not exported** — upgrade to a current `gridsmith-ui`; the provider ships from the `gridsmith-ui/icons` entry point.
+
 ## Peer Dependencies
 
 | Package | Required |

package/dist/{chunk-KXNJJKIV.js → chunk-6UZZYWTY.js}

@@ -7,11 +7,11 @@ var variantStyles = {
   default: "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]",
   neutral: "bg-[var(--ds-text-muted)]/[0.12] text-[var(--ds-text-secondary)]",
   subtle: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]",
-  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-primary)]",
+  success: "bg-[var(--ds-status-success)] text-[var(--ds-text-on-success)]",
   "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]",
-  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-primary)]",
+  warning: "bg-[var(--ds-status-warning)] text-[var(--ds-text-on-warning)]",
   "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]",
-  error: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-primary)]",
+  error: "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]",
   "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]",
   outline: "bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
 };
@@ -32,11 +32,11 @@ var paletteByVariant = {
   outline: (n) => paletteOutline[n]
 };
 var paletteDefault = {
-  1: "bg-[var(--ds-palette-1-bold)] text-[var(--ds-text-on-primary)]",
-  2: "bg-[var(--ds-palette-2-bold)] text-[var(--ds-text-on-primary)]",
-  3: "bg-[var(--ds-palette-3-bold)] text-[var(--ds-text-on-primary)]",
-  4: "bg-[var(--ds-palette-4-bold)] text-[var(--ds-text-on-primary)]",
-  5: "bg-[var(--ds-palette-5-bold)] text-[var(--ds-text-on-primary)]"
+  1: "bg-[var(--ds-palette-1-bold)] text-[var(--ds-palette-1-on-bold)]",
+  2: "bg-[var(--ds-palette-2-bold)] text-[var(--ds-palette-2-on-bold)]",
+  3: "bg-[var(--ds-palette-3-bold)] text-[var(--ds-palette-3-on-bold)]",
+  4: "bg-[var(--ds-palette-4-bold)] text-[var(--ds-palette-4-on-bold)]",
+  5: "bg-[var(--ds-palette-5-bold)] text-[var(--ds-palette-5-on-bold)]"
 };
 var paletteSubtle = {
   1: "bg-[var(--ds-palette-1-bg)] text-[var(--ds-palette-1-text)]",
@@ -89,5 +89,5 @@ function Badge({ variant = "default", size = "md", color, iconLeft, iconRight, m
 }
 
 export { Badge };
-//# sourceMappingURL=chunk-KXNJJKIV.js.map
-//# sourceMappingURL=chunk-KXNJJKIV.js.map
+//# sourceMappingURL=chunk-6UZZYWTY.js.map
+//# sourceMappingURL=chunk-6UZZYWTY.js.map

package/dist/chunk-6UZZYWTY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../showcase/src/components/Badge.tsx"],"names":[],"mappings":"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","file":"chunk-6UZZYWTY.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"]}

package/dist/index.d.ts

@@ -873,7 +873,6 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  */
 declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
-type TabsVariant = "underline" | "pill";
 type TabsOverflow = "scroll" | "hidden" | "truncate";
 interface Tab {
     id: string;
@@ -894,7 +893,6 @@ interface TabsArrayProps {
     orientation?: "horizontal" | "vertical" | "responsive";
     /** Below md, tabs either side-scroll (default) or collapse to a Dropdown. "responsive" implies "dropdown". */
     mobile?: "scroll" | "dropdown";
-    variant?: TabsVariant;
     fullWidth?: boolean;
     overflow?: TabsOverflow;
     className?: string;
@@ -904,7 +902,6 @@ interface TabsCompoundProps {
     activeTab: string;
     onTabChange: (id: string) => void;
     orientation?: "horizontal" | "vertical";
-    variant?: TabsVariant;
     fullWidth?: boolean;
     overflow?: TabsOverflow;
     className?: string;
@@ -1163,7 +1160,8 @@ interface DockProps {
 }
 declare function Dock({ items, magnification, baseSize, className, }: DockProps): react_jsx_runtime.JSX.Element;
 
-type NavbarType = "default" | "underline" | "minimal";
+/** `tint` (soft accent fill), `underline`, `minimal`, `pill` (solid accent fill). `default` is the deprecated pre-20.8 name for `tint`. */
+type NavbarType = "tint" | "underline" | "minimal" | "pill" | "default";
 type NavbarAlign = "left" | "center" | "right";
 type NavbarVariant = "default" | "transparent" | "compact" | "elevated" | "blurred";
 type NavbarSize = "sm" | "md" | "lg";
@@ -1175,7 +1173,7 @@ interface NavbarProps {
     actions?: ReactNode;
     userMenu?: ReactNode;
     variant?: NavbarVariant;
-    /** Visual style type: default (ghost-button nav items), underline (tab-style with bottom indicator), minimal (transparent, borderless, text-only) */
+    /** Visual style type: tint (ghost-button nav items with a soft accent fill), underline (tab-style with bottom indicator), minimal (transparent, borderless, text-only), pill (solid accent fill with on-primary text). This is a theme decision (navigation.headerType) — NavItem reads it from context. */
     type?: NavbarType;
     /** Horizontal alignment of nav links: left (default), center (viewport-centered), right (before actions) */
     align?: NavbarAlign;
@@ -1191,7 +1189,13 @@ interface NavbarProps {
 }
 declare const Navbar: react.ForwardRefExoticComponent<NavbarProps & react.RefAttributes<HTMLElement>>;
 
-type NavItemType = "default" | "underline" | "minimal";
+/**
+ * Navbar active style. `tint` is the soft accent fill (the pre-20.8 `default`),
+ * `underline` the bottom indicator, `minimal` a text-only change, `pill` a solid
+ * accent fill with on-primary text. `default` is accepted as a deprecated alias
+ * for `tint` for one release.
+ */
+type NavItemType = "tint" | "underline" | "minimal" | "pill" | "default";
 interface NavItemProps {
     label: string;
     icon?: IconName;
@@ -1219,14 +1223,15 @@ interface NavMenuProps {
     items: NavMenuItem[];
     /** Whether any child route is currently active (highlights the trigger) */
     active?: boolean;
-    /** Matches the parent Navbar type for consistent styling */
+    /** Matches the parent Navbar type for consistent styling (`default` is the deprecated name for `tint`) */
     type?: NavbarType;
     onItemClick?: (item: NavMenuItem) => void;
     className?: string;
 }
 declare function NavMenu({ label, items, active, type, onItemClick, className, }: NavMenuProps): react_jsx_runtime.JSX.Element;
 
-type MobileHeaderMenuType = "default" | "underline" | "minimal";
+/** Mirrors NavbarType. `default` is the deprecated pre-20.8 name for `tint`. */
+type MobileHeaderMenuType = "tint" | "underline" | "minimal" | "pill" | "default";
 interface MobileHeaderMenuItemData {
     label: string;
     icon?: IconName;