gridsmith-ui 0.1.0

package/dist/tokens.css

@@ -0,0 +1,50 @@
+/* ═══════════════════════════════════════════════════════════════════════
+   Gridsmith Tokens — Precision Minimal
+   Generated from preset: precision-minimal
+   Default mode: light
+   Shadow mode: directional
+
+   Load this file AFTER gridsmith-ui/roots.css to apply your theme.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+:root {
+  --ds-hue-primary: 264;
+  --ds-hue-neutral: 260;
+  --ds-hue-destructive: 27;
+  --ds-hue-success: 153;
+  --ds-hue-warning: 60;
+  --ds-sat-primary: 0.7;
+  --ds-sat-neutral: 0.5;
+  --ds-radius-base: 10px;
+  --ds-border-base: 1px;
+  --ds-space-unit: 4px;
+  --ds-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --ds-font-display: "Inter", sans-serif;
+  --ds-text-base: 16px;
+  --ds-weight-base: 500;
+  --ds-shadow-offset: 0px;
+  --ds-shadow-blur: 6px;
+  --ds-shadow-alpha: 0.1;
+  --ds-transition-speed: 200ms;
+  --ds-transition-ease: ease-in-out;
+  --ds-sidebar-width: 224px;
+  --ds-gradient: none;
+  --ds-glass-blur: 0px;
+  --ds-glass-tint: 1;
+  --ds-glass-saturate: 100%;
+  --ds-glass-border-alpha: 0;
+  --ds-accent-primary: var(--ds-primary-900);
+  --ds-accent-primary-hover: var(--ds-primary-950);
+  --ds-accent-primary-active: var(--ds-primary-950);
+  --ds-border-focus: var(--ds-primary-900);
+  --ds-input-focus-ring: var(--ds-primary-900);
+  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-900);
+}
+
+/* Preset overrides — light mode */
+:root {
+  --ds-sidebar-bg: var(--ds-neutral-50);
+  --ds-sidebar-item-hover: var(--ds-neutral-100);
+  --ds-sidebar-item-active: var(--ds-neutral-200);
+}

package/dist/utils.d.ts

@@ -0,0 +1,9 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+declare const GLASS_BACKDROP = "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]";
+declare const GLASS_SURFACE = "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)] shadow-[var(--ds-shadow-card),var(--ds-glass-inset)]";
+declare const GLASS_OVERLAY = "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)] shadow-[var(--ds-shadow-modal),var(--ds-glass-inset)]";
+declare const GLASS_DROPDOWN = "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)] shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]";
+
+export { GLASS_BACKDROP, GLASS_DROPDOWN, GLASS_OVERLAY, GLASS_SURFACE, cn };

package/dist/utils.js

@@ -0,0 +1,4 @@
+export { GLASS_BACKDROP, GLASS_DROPDOWN, GLASS_OVERLAY, GLASS_SURFACE, cn } from './chunk-5XIPPVH7.js';
+import './chunk-5WRI5ZAA.js';
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"utils.js"}

package/dist-static/tailwind.css

@@ -0,0 +1,46 @@
+/* Gridsmith — Tailwind v4 theme bindings
+   Maps --ds-* design tokens to Tailwind utilities.
+   Import AFTER roots.css and your tokens file. */
+
+@theme {
+  --font-sans: var(--ds-font-sans);
+  --font-mono: var(--ds-font-mono);
+  --font-display: var(--ds-font-display);
+  --default-transition-duration: var(--ds-transition-speed);
+  --default-transition-timing-function: var(--ds-transition-ease);
+
+  --spacing-ds-0_5: var(--ds-space-0\.5);
+  --spacing-ds-1: var(--ds-space-1);
+  --spacing-ds-1_5: var(--ds-space-1\.5);
+  --spacing-ds-2: var(--ds-space-2);
+  --spacing-ds-2_5: var(--ds-space-2\.5);
+  --spacing-ds-3: var(--ds-space-3);
+  --spacing-ds-4: var(--ds-space-4);
+  --spacing-ds-5: var(--ds-space-5);
+  --spacing-ds-6: var(--ds-space-6);
+  --spacing-ds-8: var(--ds-space-8);
+  --spacing-ds-10: var(--ds-space-10);
+  --spacing-ds-12: var(--ds-space-12);
+
+  --font-size-xs: var(--ds-font-size-xs);
+  --font-size-sm: var(--ds-font-size-sm);
+  --font-size-base: var(--ds-font-size-body);
+  --font-size-lg: var(--ds-font-size-lg);
+  --font-size-xl: var(--ds-font-size-xl);
+  --font-size-2xl: var(--ds-font-size-2xl);
+  --font-size-3xl: var(--ds-font-size-3xl);
+
+  --font-weight-normal: var(--ds-weight-base);
+  --font-weight-medium: var(--ds-weight-emphasis);
+  --font-weight-semibold: var(--ds-weight-strong);
+  --font-weight-bold: var(--ds-weight-heavy);
+
+  --opacity-disabled: var(--ds-opacity-disabled);
+
+  --color-accent-subtle: var(--ds-accent-subtle);
+  --color-sidebar-accent-subtle: var(--ds-sidebar-accent-subtle);
+}
+
+@utility text-2xs {
+  font-size: var(--ds-font-size-2xs);
+}

package/dist-static/tokens.css

@@ -0,0 +1,50 @@
+/* ═══════════════════════════════════════════════════════════════════════
+   Gridsmith Tokens — Precision Minimal
+   Generated from preset: precision-minimal
+   Default mode: light
+   Shadow mode: directional
+
+   Load this file AFTER gridsmith-ui/roots.css to apply your theme.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+:root {
+  --ds-hue-primary: 264;
+  --ds-hue-neutral: 260;
+  --ds-hue-destructive: 27;
+  --ds-hue-success: 153;
+  --ds-hue-warning: 60;
+  --ds-sat-primary: 0.7;
+  --ds-sat-neutral: 0.5;
+  --ds-radius-base: 10px;
+  --ds-border-base: 1px;
+  --ds-space-unit: 4px;
+  --ds-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --ds-font-display: "Inter", sans-serif;
+  --ds-text-base: 16px;
+  --ds-weight-base: 500;
+  --ds-shadow-offset: 0px;
+  --ds-shadow-blur: 6px;
+  --ds-shadow-alpha: 0.1;
+  --ds-transition-speed: 200ms;
+  --ds-transition-ease: ease-in-out;
+  --ds-sidebar-width: 224px;
+  --ds-gradient: none;
+  --ds-glass-blur: 0px;
+  --ds-glass-tint: 1;
+  --ds-glass-saturate: 100%;
+  --ds-glass-border-alpha: 0;
+  --ds-accent-primary: var(--ds-primary-900);
+  --ds-accent-primary-hover: var(--ds-primary-950);
+  --ds-accent-primary-active: var(--ds-primary-950);
+  --ds-border-focus: var(--ds-primary-900);
+  --ds-input-focus-ring: var(--ds-primary-900);
+  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-900);
+}
+
+/* Preset overrides — light mode */
+:root {
+  --ds-sidebar-bg: var(--ds-neutral-50);
+  --ds-sidebar-item-hover: var(--ds-neutral-100);
+  --ds-sidebar-item-active: var(--ds-neutral-200);
+}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "gridsmith-ui",
+  "version": "0.1.0",
+  "description": "Gridsmith component library — 78 React components with design tokens and a CSS custom property theming engine",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js"
+    },
+    "./roots.css": "./dist/roots.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./tailwind.css": "./dist/tailwind.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "dist-static",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup && cp ../../showcase/src/styles/roots.css dist/roots.css && cp dist-static/tailwind.css dist/tailwind.css && cp dist-static/tokens.css dist/tokens.css",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "lucide-react": "^1.0.0",
+    "@phosphor-icons/react": "^2.0.0",
+    "@heroicons/react": "^2.0.0",
+    "@tabler/icons-react": "^3.0.0",
+    "react-icons": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "lucide-react": { "optional": true },
+    "@phosphor-icons/react": { "optional": true },
+    "@heroicons/react": { "optional": true },
+    "@tabler/icons-react": { "optional": true },
+    "react-icons": { "optional": true }
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "tsup": "^8.0.0",
+    "typescript": "~6.0.2"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "ui",
+    "tailwind",
+    "tokens",
+    "css-variables",
+    "theming"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gridsmith/ui"
+  }
+}