impact-nova 2.1.0-alpha.8 → 2.2.0

package/dist/theme/tailwind-colors.js

@@ -0,0 +1,201 @@
+/** Generated from src/theme/semantic-map.json — do not edit by hand. */
+export const cssVar = (name) => `var(${name})`;
+
+export const generatedColors = {
+  canvas: {
+    DEFAULT: cssVar("--color-background"),
+    elevated: {
+      DEFAULT: cssVar("--color-surface-elevated"),
+      foreground: cssVar("--color-surface-elevated-foreground"),
+    },
+    overlay: {
+      DEFAULT: cssVar("--color-surface-floating"),
+      foreground: cssVar("--color-surface-floating-foreground"),
+    },
+    muted: cssVar("--color-surface-muted"),
+    wash: cssVar("--color-surface-canvas"),
+    disabled: cssVar("--color-surface-input-disabled"),
+    readonly: cssVar("--color-surface-readonly"),
+    accent: cssVar("--color-surface-selection-tint"),
+    subtle: cssVar("--color-surface-subtle"),
+    tint: cssVar("--color-surface-tint-blue"),
+    accordion: cssVar("--color-surface-accordion"),
+  },
+  content: {
+    DEFAULT: cssVar("--color-foreground"),
+    secondary: cssVar("--color-foreground-secondary"),
+    tertiary: cssVar("--color-foreground-tertiary"),
+    placeholder: cssVar("--color-foreground-placeholder"),
+    empty: cssVar("--color-foreground-empty"),
+    muted: cssVar("--color-muted-foreground"),
+    icon: cssVar("--color-foreground-icon"),
+    "header-notification": cssVar("--color-header-notification-icon"),
+    charcoal: cssVar("--color-neutral-charcoal"),
+    title: cssVar("--color-foreground-title"),
+    badge: cssVar("--color-neutral-badge"),
+    heading: cssVar("--color-header-notification-icon"),
+    subheading: cssVar("--color-secondary"),
+  },
+  brand: {
+    DEFAULT: cssVar("--color-primary"),
+    foreground: cssVar("--color-primary-foreground"),
+    strong: cssVar("--color-primary-strong"),
+    hover: cssVar("--color-primary-hover"),
+    subtle: cssVar("--color-primary-surface-subtle"),
+    "on-subtle": cssVar("--color-primary-on-surface-subtle"),
+    highlight: cssVar("--color-primary-selection"),
+    tint: cssVar("--color-primary-soft"),
+    "tint-hover": cssVar("--color-primary-soft-hover"),
+    variant: cssVar("--color-primary-variant"),
+    "variant-hover": cssVar("--color-primary-variant-hover"),
+  },
+  secondary: {
+    DEFAULT: cssVar("--color-secondary"),
+    foreground: cssVar("--color-secondary-foreground"),
+    "hover-foreground": cssVar("--color-secondary-hover-foreground"),
+  },
+  accent: {
+    DEFAULT: cssVar("--color-accent"),
+    foreground: cssVar("--color-accent-foreground"),
+  },
+  muted: cssVar("--color-muted"),
+  stroke: {
+    DEFAULT: cssVar("--color-border"),
+    subtle: cssVar("--color-border-subtle"),
+    hairline: cssVar("--color-border-hairline"),
+    strong: cssVar("--color-border-strong"),
+    accent: cssVar("--color-border-accent-muted"),
+    track: cssVar("--color-track-muted"),
+    field: cssVar("--color-border-tertiary"),
+  },
+  field: {
+    border: cssVar("--color-input"),
+  },
+  focus: {
+    ring: cssVar("--color-ring"),
+  },
+  disabled: {
+    border: cssVar("--color-disabled-border"),
+    surface: cssVar("--color-disabled-surface"),
+    foreground: cssVar("--color-disabled-foreground"),
+  },
+  validation: cssVar("--color-danger-validation"),
+  destructive: {
+    DEFAULT: cssVar("--color-destructive"),
+    foreground: cssVar("--color-destructive-foreground"),
+    hover: cssVar("--color-destructive-hover"),
+  },
+  success: {
+    DEFAULT: cssVar("--color-success"),
+    foreground: cssVar("--color-success-foreground"),
+  },
+  warning: cssVar("--color-warning"),
+  danger: cssVar("--color-danger-bright"),
+  button: {
+    "primary-disabled": cssVar("--color-button-primary-disabled"),
+  },
+  badge: {
+    neutral: {
+      muted: cssVar("--color-badge-neutral-muted"),
+    },
+    info: {
+      filled: cssVar("--color-badge-info-filled"),
+      muted: cssVar("--color-badge-info-muted"),
+    },
+    warning: {
+      filled: cssVar("--color-badge-warning-filled"),
+      muted: cssVar("--color-badge-warning-muted"),
+      ink: cssVar("--color-badge-warning-text"),
+    },
+    error: {
+      filled: cssVar("--color-badge-error-filled"),
+      muted: cssVar("--color-badge-error-muted"),
+      ink: cssVar("--color-badge-error-text"),
+    },
+    success: {
+      filled: cssVar("--color-badge-success-filled"),
+      muted: cssVar("--color-badge-success-muted"),
+      ink: cssVar("--color-badge-success-text"),
+    },
+  },
+  feedback: {
+    info: {
+      surface: cssVar("--color-info-surface"),
+      border: cssVar("--color-info-border"),
+    },
+    warning: {
+      surface: cssVar("--color-warning-surface"),
+      border: cssVar("--color-warning-border"),
+    },
+    error: {
+      surface: cssVar("--color-error-surface"),
+      border: cssVar("--color-error-border"),
+    },
+    success: {
+      surface: cssVar("--color-success-surface"),
+      border: cssVar("--color-success-border"),
+    },
+  },
+  chart: {
+    "1": cssVar("--color-chart-1"),
+    "2": cssVar("--color-chart-2"),
+    "3": cssVar("--color-chart-3"),
+    "4": cssVar("--color-chart-4"),
+    "5": cssVar("--color-chart-5"),
+  },
+  domain: {
+    cohort: cssVar("--color-data-cohort"),
+  },
+  indicator: {
+    sort: cssVar("--color-indicator-sort"),
+    filter: cssVar("--color-indicator-filter"),
+  },
+  pinSwitch: {
+    "label-active": cssVar("--color-pin-switch-label-active"),
+    "label-inactive": cssVar("--color-pin-switch-label-inactive"),
+    "track-bg": cssVar("--color-pin-switch-track-bg"),
+    "track-border": cssVar("--color-pin-switch-track-border"),
+    "track-hover": cssVar("--color-pin-switch-track-hover"),
+  },
+  scrim: cssVar("--color-scrim"),
+  "scrim-deep": cssVar("--color-scrim-deep"),
+  "scrim-light": cssVar("--color-scrim-light"),
+  "scrim-skeleton": cssVar("--color-scrim-skeleton"),
+  "scrim-hover": cssVar("--color-scrim-hover"),
+  navigation: {
+    DEFAULT: cssVar("--color-sidebar-background"),
+    foreground: cssVar("--color-sidebar-foreground"),
+    surface: cssVar("--color-sidebar-surface"),
+    "on-surface": cssVar("--color-sidebar-on-surface"),
+    hover: cssVar("--color-sidebar-hover"),
+    "on-hover": cssVar("--color-sidebar-on-hover"),
+    border: cssVar("--color-sidebar-border"),
+    ring: cssVar("--color-sidebar-ring"),
+    indicator: cssVar("--color-sidebar-indicator"),
+    "item-hover": cssVar("--color-sidebar-item-hover"),
+    "item-active": cssVar("--color-sidebar-item-active"),
+    muted: cssVar("--color-sidebar-foreground-muted"),
+    canvas: cssVar("--color-sidebar-canvas"),
+  },
+  background: {
+    DEFAULT: cssVar("--color-background"),
+    foreground: cssVar("--color-foreground"),
+  },
+};
+
+export const generatedBoxShadow = {
+  "alert-elevated": "var(--shadow-alert-elevated)",
+  "elevation-card": "var(--shadow-elevation-card)",
+  "elevation-dialog-footer": "var(--shadow-elevation-dialog-footer)",
+  "elevation-floating": "var(--shadow-elevation-floating)",
+  "elevation-header": "var(--shadow-elevation-header)",
+  "elevation-kbd-dark": "var(--shadow-elevation-kbd-dark)",
+  "elevation-menu-ag-grid": "var(--shadow-elevation-menu-ag-grid)",
+  "elevation-pin-switch": "var(--shadow-elevation-pin-switch)",
+  "elevation-select": "var(--shadow-elevation-select)",
+  "elevation-settings": "var(--shadow-elevation-settings)",
+  "elevation-toast": "var(--shadow-elevation-toast)",
+  "elevation-wizard-footer": "var(--shadow-elevation-wizard-footer)",
+  "file-upload-drag": "var(--shadow-file-upload-drag)",
+  "file-upload-error": "var(--shadow-file-upload-error)"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-nova",
-  "version": "2.1.0-alpha.8",
+  "version": "2.2.0",
   "description": "Enterprise-grade React design system built with React 19, Vite, Tailwind CSS, and Radix UI. Built-in internationalization (i18n) and comprehensive UI component library for scalable, accessible, and performant applications.",
   "type": "module",
   "main": "./dist/index.js",
@@ -77,12 +77,12 @@
   ],
   "files": [
     "dist",
-    "tailwind.config.js",
     "tailwind.config.d.ts",
     "LICENSE",
     "README.md"
   ],
   "exports": {
+    "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -288,6 +288,10 @@
       "types": "./dist/components/feedback/sheet/index.d.ts",
       "import": "./dist/components/feedback/sheet/index.js"
     },
+    "./show": {
+      "types": "./dist/components/ui/show.d.ts",
+      "import": "./dist/components/ui/show.js"
+    },
     "./sidebar": {
       "types": "./dist/components/layout/sidebar/sidebar.d.ts",
       "import": "./dist/components/layout/sidebar/sidebar.js"
@@ -438,13 +442,17 @@
     },
     "./tailwind.config": {
       "types": "./tailwind.config.d.ts",
-      "import": "./tailwind.config.js",
-      "default": "./tailwind.config.js"
+      "import": "./dist/tailwind.config.js",
+      "default": "./dist/tailwind.config.js"
     },
     "./tailwind.config.js": {
       "types": "./tailwind.config.d.ts",
-      "import": "./tailwind.config.js",
-      "default": "./tailwind.config.js"
+      "import": "./dist/tailwind.config.js",
+      "default": "./dist/tailwind.config.js"
+    },
+    "./theme/tailwind-colors": {
+      "import": "./dist/theme/tailwind-colors.js",
+      "default": "./dist/theme/tailwind-colors.js"
     },
     "./dist/*": "./dist/*",
     "./kbd": {
@@ -454,7 +462,9 @@
   },
   "scripts": {
     "dev": "vite",
+    "prepublishOnly": "npm run ci",
     "publish:alpha": "npm publish --tag alpha --access public",
+    "publish:stable": "npm publish --access public",
     "validate-imports": "node scripts/validate-imports.mjs",
     "build:registry": "node scripts/build-registry.mjs && node scripts/sync-registry-to-mcp.mjs",
     "validate:registry": "node scripts/validate-registry.mjs",
@@ -467,7 +477,8 @@
     "changeset": "changeset",
     "version:release": "changeset version && npm run sync:storybook-releases",
     "sync:storybook-releases": "node scripts/sync-storybook-releases.mjs",
-    "validate:story-docs": "node scripts/validate-story-docs.mjs && node scripts/sync-storybook-releases.mjs --check",
+    "sync:storybook-test-status": "node scripts/sync-storybook-test-status.mjs",
+    "validate:story-docs": "node scripts/validate-story-docs.mjs && node scripts/sync-storybook-releases.mjs --check && node scripts/sync-storybook-test-status.mjs --check",
     "validate:layering": "node scripts/validate-layering.mjs",
     "validate:mcp-sync": "node scripts/validate-mcp-sync.mjs",
     "validate:charter": "node scripts/validate-charter.mjs",
@@ -485,7 +496,9 @@
     "validate:theme-editor-metadata": "node scripts/validate-theme-editor-metadata.mjs",
     "generate:theme-presets": "node scripts/complete-dark-theme.mjs && node scripts/generate-theme-presets.mjs",
     "validate:theme-presets": "node scripts/validate-theme-presets.mjs",
-    "build": "node scripts/validate-imports.mjs && npm run build:tokens && npm run validate:token-usage && npm run build:registry && npm run validate:registry && tsc -b && vite build && node scripts/build-css-splits.mjs && node scripts/build-llms.mjs && node scripts/validate-declaration-exports.mjs",
+    "build:tailwind-preset": "node scripts/build-tailwind-preset.mjs",
+    "validate:published-package": "node scripts/validate-published-package.mjs",
+    "build": "node scripts/validate-imports.mjs && npm run build:tokens && npm run validate:token-usage && npm run build:registry && npm run validate:registry && tsc -b && vite build && node scripts/build-css-splits.mjs && node scripts/build-llms.mjs && node src/theme/scripts/generate-tailwind-colors.mjs && npm run build:tailwind-preset && node scripts/validate-declaration-exports.mjs && npm run validate:published-package",
     "analyze": "ANALYZE=true npm run build",
     "lint": "eslint packages/mcp/src scripts --max-warnings 0",
     "lint:src": "eslint src --max-warnings 0",
@@ -510,7 +523,7 @@
     "bundle-budget": "node scripts/bundle-budget.mjs",
     "bundle-budget:update": "node scripts/bundle-budget.mjs --update",
     "ci:validate": "npm run validate-imports && npm run validate:docs && npm run validate:export-ssot && npm run build:registry && npm run validate:registry && npm run validate:mcp-sync && npm run validate:charter && npm run validate:factory-rollout && npm run validate:component-tests && npm run validate:component-types && npm run validate:layering && npm run validate:figma-tokens && npm run validate:token-usage && npm run validate:theme-presets && npm run sync:storybook-releases && npm run validate:story-docs && npm run lint && npm run lint:src && npm run typecheck",
-    "ci:build": "npm run build && npm run test:tree-shaking && npm run bundle-budget",
+    "ci:build": "npm run build && npm run validate:published-package && npm run test:tree-shaking && npm run bundle-budget",
     "ci:storybook": "npm run test:storybook && npm run build-storybook",
     "ci": "npm run ci:validate && npm run test:coverage:ratchet && npm run ci:build && npm run ci:storybook"
   },

package/tailwind.config.d.ts

@@ -3,6 +3,9 @@ import type { Config } from "tailwindcss";
 declare const config: Config;
 export default config;
 
+/** Content glob for scanning published impact-nova `dist/` components. */
+export function getImpactNovaContentGlob(): string;
+
 export function createTailwindConfig(contentPaths: string[]): Config;
 
 export function createAppTailwindConfig(

package/dist/components/data/ag-grid-react/headers/custom-header-group.d.ts

@@ -1,10 +0,0 @@
-import { IHeaderGroupParams } from 'ag-grid-community';
-import { ExtendedHeaderComponentParams } from '../ag-grid.types';
-/**
- * CustomHeaderGroup — optimized for large column trees.
- *
- * Not wrapped in React.memo: AG Grid mutates `columnGroup` in place on expand/collapse;
- * memo would serve stale `isExpanded` and break collapse. `toggleExpand` reads
- * `columnGroup.isExpanded()` at click time.
- */
-export declare function CustomHeaderGroup(props: IHeaderGroupParams & ExtendedHeaderComponentParams): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/data/ag-grid-react/headers/custom-header-group.js

@@ -1,58 +0,0 @@
-import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { useRef as h } from "react";
-import { ChevronRight as E } from "impact-nova-icons";
-import { cn as N } from "../../../../lib/utils.js";
-import { HeaderInfo as b } from "./components/header-info.js";
-import { useGridHeader as C } from "./context/grid-header-context.js";
-import { useAgGridTruncationTooltip as G } from "../use-ag-grid-truncation-tooltip.js";
-function w(r) {
-  const {
-    displayName: d,
-    setTooltip: p,
-    showInfoIcon: c = !1,
-    columnGroup: e,
-    setExpanded: a
-  } = r, s = h(null), t = d || "";
-  G(p, t, s, "ellipsis");
-  const i = C(), m = e ? e.isExpanded() : !1, l = e ? e.isExpandable() : !1, f = (n) => {
-    n && n.stopPropagation(), a && e && a(!e.isExpanded());
-  }, u = (n) => {
-    if (n.preventDefault(), n.stopPropagation(), i && e) {
-      const x = e.getGroupId() || "group";
-      i.openMenu(x, n.currentTarget, "group");
-    }
-  };
-  return !t && c === !1 ? null : /* @__PURE__ */ g(
-    "div",
-    {
-      className: "ag-header-group-cell-label ag-sticky-label flex items-center h-full min-w-0 cursor-pointer select-none",
-      onClick: l ? f : void 0,
-      onContextMenu: u,
-      role: "presentation",
-      children: [
-        /* @__PURE__ */ o(
-          "span",
-          {
-            ref: s,
-            className: "ag-header-group-text min-w-0 flex-1 truncate font-bold text-content",
-            children: t
-          }
-        ),
-        /* @__PURE__ */ o(b, { ...r, className: "ml-1 shrink-0" }),
-        l && /* @__PURE__ */ o(
-          "span",
-          {
-            className: N(
-              "ag-header-icon ag-header-expand-icon ml-[6px] shrink-0 flex items-center justify-center",
-              m ? "ag-header-expand-icon-expanded rotate-180" : "ag-header-expand-icon-collapsed"
-            ),
-            children: /* @__PURE__ */ o(E, { size: 16, className: "text-content-tertiary" })
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  w as CustomHeaderGroup
-};

package/tailwind.config.js

@@ -1,116 +0,0 @@
-import tailwindcssAnimate from "tailwindcss-animate";
-import tailwindPlugin from "tailwindcss/plugin";
-import { generatedBoxShadow, generatedColors } from "./src/theme/generated/tailwind-colors.js";
-
-const scrollbarUtilities = tailwindPlugin(({ addUtilities }) => {
-  addUtilities({
-    ".scrollbar-hide": {
-      "-ms-overflow-style": "none",
-      "scrollbar-width": "none",
-    },
-    ".scrollbar-hide::-webkit-scrollbar": {
-      display: "none",
-    },
-  });
-});
-
-/**
- * Semantic color roles — generated from src/theme/semantic-map.json.
- * Edit semantic-map.json and run `npm run build:tokens`.
- */
-const baseConfig = {
-  darkMode: ["class"],
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./src/components/ui/**/*.{js,ts,jsx,tsx}",
-    "./src/components/ui/stories/**/*.{js,ts,jsx,tsx}",
-    "./.storybook/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    colors: {
-      transparent: "transparent",
-      current: "currentColor",
-      inherit: "inherit",
-      ...generatedColors,
-    },
-    extend: {
-      fontFamily: {
-        sans: ["Manrope", "sans-serif"],
-      },
-      borderRadius: {
-        lg: "calc(var(--radius) + 4px)",
-        md: "var(--radius)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      boxShadow: generatedBoxShadow,
-
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-        "collapsible-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-collapsible-content-height)" },
-        },
-        "collapsible-up": {
-          from: { height: "var(--radix-collapsible-content-height)" },
-          to: { height: "0" },
-        },
-        "header-bot-gradient": {
-          "0%": { backgroundPosition: "0% 50%" },
-          "50%": { backgroundPosition: "100% 50%" },
-          "100%": { backgroundPosition: "0% 50%" },
-        },
-        "notification-waves": {
-          "0%": { width: "8px", height: "8px" },
-          "100%": { width: "16px", height: "16px" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "collapsible-down": "collapsible-down 0.2s ease-out",
-        "collapsible-up": "collapsible-up 0.2s ease-out",
-        "header-bot-gradient": "header-bot-gradient 5s ease infinite",
-        "header-bot-gradient-fast": "header-bot-gradient 2s ease infinite",
-        "notification-waves": "notification-waves 1.5s ease-out infinite",
-      },
-    },
-  },
-  plugins: [tailwindcssAnimate, scrollbarUtilities],
-};
-
-/** @type {import('tailwindcss').Config} */
-export default baseConfig;
-
-/**
- * Creates a Tailwind config with custom content paths.
- *
- * @param {string[]} contentPaths - Array of content paths for your project
- * @returns {import('tailwindcss').Config}
- *
- * @example
- * import { createTailwindConfig } from "impact-nova/tailwind.config";
- * export default createTailwindConfig(["./index.html", "./src"]);
- */
-export function createTailwindConfig(contentPaths) {
-  return {
-    ...baseConfig,
-    content: contentPaths,
-  };
-}
-
-/**
- * Tailwind config for apps consuming impact-nova via file: / npm link.
- * Single utility pipeline: scan app + impact-nova source (no duplicate impact-nova.css utilities).
- */
-export function createAppTailwindConfig(appRootDir, appContentPaths) {
-  const impactNovaSourceGlob = `${appRootDir.replace(/\\/g, "/")}/../impact-nova/src/**/*.{js,ts,jsx,tsx}`;
-  return createTailwindConfig([...appContentPaths, impactNovaSourceGlob]);
-}