@tribepad/themis 1.0.0

package/dist/styles/shared-variants.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Shared CVA Variant Utilities
+ *
+ * Common patterns extracted from component variants for consistency and reduced bundle size.
+ * Use these constants in CVA definitions to ensure consistent styling across Themis.
+ *
+ * @see interaction-states.ts for interaction-specific styles (focus, hover, pressed)
+ */
+/**
+ * Focus-within ring (for container elements with focusable children)
+ * Use when the container should show focus when any child is focused
+ */
+export declare const FOCUS_WITHIN_RING: readonly ["focus-within:outline-none", "focus-within:ring-2", "focus-within:ring-[var(--ring)]", "focus-within:ring-offset-2"];
+/**
+ * Focus-visible ring (for directly focusable elements)
+ * Use for buttons, inputs, and other interactive elements
+ */
+export declare const FOCUS_VISIBLE_RING: readonly ["focus-visible:outline-none", "focus-visible:ring-2", "focus-visible:ring-[var(--ring)]", "focus-visible:ring-offset-2"];
+/**
+ * Standard focus ring (for elements using :focus pseudo-class)
+ * Prefer focus-visible when possible for better UX
+ */
+export declare const FOCUS_RING: readonly ["focus:outline-none", "focus:ring-2", "focus:ring-[var(--ring)]"];
+/**
+ * Focus with background change (for segments, cells, menu items)
+ */
+export declare const FOCUS_HIGHLIGHT: readonly ["focus:outline-none", "focus:bg-[var(--accent)]", "focus:text-[var(--accent-foreground)]"];
+/**
+ * Standard disabled state using disabled attribute
+ */
+export declare const DISABLED_STANDARD: readonly ["disabled:pointer-events-none", "disabled:opacity-50"];
+/**
+ * Disabled state using data attribute (React Aria pattern)
+ */
+export declare const DISABLED_DATA_ATTR: readonly ["data-[disabled]:pointer-events-none", "data-[disabled]:opacity-50", "data-[disabled]:cursor-not-allowed"];
+/**
+ * Small text size scale (xs -> sm -> base)
+ */
+export declare const TEXT_SIZE_SMALL_SCALE: {
+    readonly sm: "text-xs";
+    readonly default: "text-sm";
+    readonly lg: "text-base";
+};
+/**
+ * Medium text size scale (sm -> base -> lg)
+ */
+export declare const TEXT_SIZE_MEDIUM_SCALE: {
+    readonly sm: "text-sm";
+    readonly default: "text-base";
+    readonly lg: "text-lg";
+};
+/**
+ * WCAG 2.2 AAA minimum touch target (44x44px)
+ */
+export declare const TOUCH_TARGET_MIN: readonly ["min-h-[44px]", "min-w-[44px]"];
+/**
+ * Common button/cell sizes with touch target compliance
+ */
+export declare const INTERACTIVE_SIZES: {
+    readonly sm: "h-9 w-9";
+    readonly default: "h-11 w-11";
+    readonly lg: "h-14 w-14";
+};
+/**
+ * Height-only sizes for fields and inputs
+ */
+export declare const FIELD_HEIGHTS: {
+    readonly sm: "h-9";
+    readonly default: "h-11";
+    readonly lg: "h-14";
+};
+/**
+ * Error message styling
+ */
+export declare const ERROR_MESSAGE_BASE: readonly ["flex", "items-center", "gap-1.5", "text-[var(--destructive)]"];
+/**
+ * Success message styling
+ */
+export declare const SUCCESS_MESSAGE_BASE: readonly ["flex", "items-center", "gap-1.5", "text-[var(--success)]"];
+/**
+ * Description/helper text styling
+ */
+export declare const DESCRIPTION_BASE: readonly ["text-[var(--menu-muted)]"];
+/**
+ * Label base styling
+ */
+export declare const LABEL_BASE: readonly ["font-medium", "text-[var(--content-foreground)]"];
+/**
+ * Required indicator pattern
+ */
+export declare const REQUIRED_INDICATOR = "after:content-['*'] after:ml-0.5 after:text-[var(--destructive)]";
+/**
+ * Popover/dropdown entry animation
+ */
+export declare const POPOVER_ANIMATION_IN: readonly ["data-[entering]:animate-in", "data-[entering]:fade-in-0", "data-[entering]:zoom-in-95"];
+/**
+ * Popover/dropdown exit animation
+ */
+export declare const POPOVER_ANIMATION_OUT: readonly ["data-[exiting]:animate-out", "data-[exiting]:fade-out-0", "data-[exiting]:zoom-out-95"];
+/**
+ * Reduced motion support (WCAG 2.2)
+ */
+export declare const REDUCED_MOTION: readonly ["motion-reduce:transition-none", "motion-reduce:animate-none"];
+/**
+ * Standard transition for colors
+ */
+export declare const TRANSITION_COLORS: readonly ["transition-colors", "duration-200"];
+/**
+ * Fast transition for interactions
+ */
+export declare const TRANSITION_FAST: readonly ["transition-colors", "duration-150"];
+/**
+ * Accent background on hover (for interactive items)
+ */
+export declare const HOVER_ACCENT: readonly ["hover:bg-[var(--accent)]", "hover:text-[var(--accent-foreground)]"];
+/**
+ * Combines multiple style arrays into a flat array for CVA base styles
+ */
+export declare function combineStyles(...styles: (readonly string[] | string)[]): string[];
+//# sourceMappingURL=shared-variants.d.ts.map

package/dist/styles/shared-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-variants.d.ts","sourceRoot":"","sources":["../../src/styles/shared-variants.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,gIAKpB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,kBAAkB,oIAKrB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,UAAU,6EAIb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe,sGAIlB,CAAC;AAMX;;GAEG;AACH,eAAO,MAAM,iBAAiB,kEAGpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,sHAIrB,CAAC;AAMX;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;CAIxB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;;CAIzB,CAAC;AAMX;;GAEG;AACH,eAAO,MAAM,gBAAgB,2CAGnB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,aAAa;;;;CAIhB,CAAC;AAMX;;GAEG;AACH,eAAO,MAAM,kBAAkB,2EAKrB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,oBAAoB,uEAKvB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,gBAAgB,uCAEnB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,UAAU,8DAGb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,qEAAqE,CAAC;AAMrG;;GAEG;AACH,eAAO,MAAM,oBAAoB,oGAIvB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,qBAAqB,oGAIxB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,cAAc,0EAGjB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB,gDAGpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe,gDAGlB,CAAC;AAMX;;GAEG;AACH,eAAO,MAAM,YAAY,gFAGf,CAAC;AAMX;;GAEG;AACH,wBAAgB,aAAa,CAAC,GAAG,MAAM,EAAE,CAAC,SAAS,MAAM,EAAE,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,EAAE,CAEjF"}

package/dist/styles/tokens.css

@@ -0,0 +1,89 @@
+/**
+ * Themis Design Tokens
+ *
+ * @see spec.md FR-040 to FR-042 (Theme Integration Requirements)
+ * @see Feature 004 (ThemeProvider specification)
+ * @see THEME_MIGRATION_TASKS.md (ShadCN OKLCH Migration)
+ *
+ * Token Strategy:
+ * - Themis components use ShadCN variables directly (no --themis- prefix)
+ * - Variables defined in globals.css using OKLCH color format
+ * - Themes controlled via CSS classes: .dark, .colorblind, .high-contrast
+ * - Compatible with TweakCN theme generator
+ *
+ * Available Variables:
+ * Page and content backgrounds
+    'page-background': '#000000',
+    'content-background': '#0A0A0A',
+    'content-foreground': '#FFFFFF',
+
+    // Primary colors
+    'primary': '#D8B4FE',
+    'primary-foreground': '#000000',
+    'primary-action': '#D8B4FE',
+    'primary-action-hover': '#F3E8FF',
+    'primary-action-foreground': '#000000',
+
+    // Text links
+    'text-link': '#FFFFFF',
+    'text-link-hover': '#D8B4FE',
+
+    // Ring (focus indicator)
+    'ring': '#A855F7',
+
+    // Accent colors
+    'accent-background': '#1A1A1A',
+    'accent-foreground': '#FFFFFF',
+
+    // Borders
+    'border': '#525252',
+
+    // Icons
+    'icon': '#FFFFFF',
+
+    // Input fields
+    'input-background': '#0A0A0A',
+    'input-border': '#525252',
+
+    // Data visualization
+    'data': '#D8B4FE',
+    'data-alt': '#D8B4FE',
+
+    // Menu/Sidebar
+    'menu-background': '#000000',
+    'menu-foreground': '#FFFFFF',
+    'menu-icon': '#D8B4FE',
+    'menu-accent': '#4C1D95',
+    'menu-accent-foreground': '#FFFFFF',
+    'menu-primary': '#D8B4FE',
+    'menu-primary-foreground': '#000000',
+    'menu-border': '#A78BFA',
+    'menu-ring': '#60A5FA',
+    'menu-muted': '#D4D4D4',
+
+    // Footer
+    'footer-background': '#0A0A0A',
+    'footer-foreground': '#FFFFFF',
+    'footer-muted': '#D4D4D4',
+    'footer-border': '#525252',
+    'footer-ring': '#D8B4FE',
+    'footer-text-link': '#D8B4FE',
+    'footer-text-link-hover': '#F3E8FF',
+
+    // Destructive actions
+    'destructive-background': '#F87171',
+    'destructive-foreground': '#000000',
+ *
+ * Usage in Components:
+ * background-color: var(--primary);
+ * color: var(--primary-foreground);
+ * border-color: var(--border);
+ *
+ * Or with Tailwind utilities:
+ * bg-[var(--primary)]
+ * text-[var(--primary-foreground)]
+ * border-[var(--border)]
+ */
+
+/* This file exists for documentation purposes.
+   All tokens are defined in globals.css and applied via ThemeProvider CSS classes. */

package/dist/utils/cn.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Class Name Utility
+ * Merges Tailwind CSS classes with conflict resolution
+ *
+ * Combines clsx for conditional classes and tailwind-merge for deduplication
+ *
+ * @example
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)
+ * cn('text-red-500', condition && 'text-blue-500') // => conditional application
+ */
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { cn } from './cn';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+require('../chunk-VY7M7346.js');
+var chunkVIREG536_js = require('../chunk-VIREG536.js');
+
+
+
+Object.defineProperty(exports, "cn", {
+  enumerable: true,
+  get: function () { return chunkVIREG536_js.cn; }
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

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

package/dist/utils/index.mjs

@@ -0,0 +1,4 @@
+import '../chunk-JPTSS2OA.mjs';
+export { cn } from '../chunk-E2KQFV3O.mjs';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/utils/index.mjs.map

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

package/package.json

@@ -0,0 +1,228 @@
+{
+  "name": "@tribepad/themis",
+  "version": "1.0.0",
+  "description": "Accessible React component library built on React Aria primitives",
+  "author": "Tribepad <mbasford@tribepad.com>",
+  "license": "MIT",
+  "packageManager": "pnpm@10.24.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./elements": {
+      "import": {
+        "types": "./dist/elements/index.d.ts",
+        "default": "./dist/elements/index.mjs"
+      },
+      "require": {
+        "types": "./dist/elements/index.d.ts",
+        "default": "./dist/elements/index.js"
+      }
+    },
+    "./elements/*": {
+      "import": {
+        "types": "./dist/elements/*/index.d.ts",
+        "default": "./dist/elements/*/index.mjs"
+      },
+      "require": {
+        "types": "./dist/elements/*/index.d.ts",
+        "default": "./dist/elements/*/index.js"
+      }
+    },
+    "./styles": {
+      "import": {
+        "types": "./dist/styles/index.d.ts",
+        "default": "./dist/styles/index.mjs"
+      },
+      "require": {
+        "types": "./dist/styles/index.d.ts",
+        "default": "./dist/styles/index.js"
+      }
+    },
+    "./styles/tokens.css": "./dist/styles/tokens.css",
+    "./styles/defaults.css": "./dist/styles/defaults.css",
+    "./utils": {
+      "import": {
+        "types": "./dist/utils/index.d.ts",
+        "default": "./dist/utils/index.mjs"
+      },
+      "require": {
+        "types": "./dist/utils/index.d.ts",
+        "default": "./dist/utils/index.js"
+      }
+    },
+    "./schemas": {
+      "import": {
+        "types": "./dist/schemas/index.d.ts",
+        "default": "./dist/schemas/index.mjs"
+      },
+      "require": {
+        "types": "./dist/schemas/index.d.ts",
+        "default": "./dist/schemas/index.js"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "src/**/*.stories.tsx",
+    "tailwind.config.js",
+    "tailwind.config.v3.js",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "dist/chunk-*.mjs",
+    "dist/chunk-*.js"
+  ],
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig.build.json && pnpm build:css",
+    "build:css": "mkdir -p dist/styles && cp src/styles/*.css dist/styles/",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
+    "typecheck": "tsc --noEmit",
+    "validate": "tsx scripts/validate-components.ts",
+    "size": "size-limit",
+    "security-check": "bash scripts/pre-publish-security-check.sh",
+    "prepublishOnly": "pnpm build && pnpm test && pnpm validate && pnpm size",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^3.4.0 || ^4.0.0",
+    "zod": "^3.0.0 || ^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.5.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "react-aria": "^3.35.0",
+    "react-aria-components": "^1.5.0",
+    "react-stately": "^3.33.0",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@size-limit/preset-small-lib": "^11.0.0",
+    "@storybook/react": "^8.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/node": "^25.2.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-react": "^5.1.3",
+    "@vitest/coverage-v8": "^4.0.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "globals": "^17.3.0",
+    "happy-dom": "^20.5.3",
+    "jest-axe": "^10.0.0",
+    "jsdom": "^28.0.0",
+    "lucide-react": ">=0.400.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "size-limit": "^11.0.0",
+    "tsup": "^8.0.0",
+    "tsx": "^4.0.0",
+    "typescript": "^5.6.0",
+    "vitest": "^4.0.18",
+    "zod": "^4.3.6"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "typesVersions": {
+    "*": {
+      "elements": [
+        "dist/elements/index.d.ts"
+      ],
+      "elements/*": [
+        "dist/elements/*/index.d.ts"
+      ],
+      "styles": [
+        "dist/styles/index.d.ts"
+      ],
+      "utils": [
+        "dist/utils/index.d.ts"
+      ],
+      "schemas": [
+        "dist/schemas/index.d.ts"
+      ]
+    }
+  },
+  "size-limit": [
+    {
+      "name": "Full bundle",
+      "path": "dist/index.mjs",
+      "limit": "200 KB"
+    },
+    {
+      "name": "Button only",
+      "path": "dist/elements/Button/index.mjs",
+      "limit": "25 KB"
+    },
+    {
+      "name": "TextField only",
+      "path": "dist/elements/TextField/index.mjs",
+      "limit": "30 KB"
+    }
+  ],
+  "keywords": [
+    "react",
+    "components",
+    "accessibility",
+    "react-aria",
+    "wcag",
+    "a11y",
+    "design-system",
+    "tailwindcss",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tribepad/themis.git"
+  },
+  "homepage": "https://github.com/Tribepad/themis#readme",
+  "bugs": {
+    "url": "https://github.com/Tribepad/themis/issues"
+  }
+}