@tribepad/themis 1.0.1 → 1.0.3

package/dist/styles/index.mjs

@@ -1,130 +1,2 @@
-// src/styles/interaction-states.ts
-var FOCUS_STYLES = "data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2";
-var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
-var PRESSED_STYLES_BASE = "data-[pressed]:transition-transform data-[pressed]:duration-100";
-var HOVER_STYLES = "data-[hovered]:shadow-md";
-var HOVER_STYLES_BASE = "data-[hovered]:transition-shadow data-[hovered]:duration-200";
-var HIGH_CONTRAST_FOCUS = "hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground";
-var HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
-var HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
-var HIGH_CONTRAST_INTERACTIONS = `${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;
-var DISABLED_STYLES = "disabled:pointer-events-none disabled:opacity-50";
-var DEFAULT_INTERACTIONS = `${FOCUS_STYLES} ${PRESSED_STYLES} ${HOVER_STYLES} ${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;
-var SUBTLE_INTERACTIONS = `${FOCUS_STYLES} ${HIGH_CONTRAST_FOCUS}`;
-var NON_INTERACTIVE = "cursor-default select-none";
-
-// src/styles/shared-variants.ts
-var FOCUS_WITHIN_RING = [
-  "focus-within:outline-none",
-  "focus-within:ring-2",
-  "focus-within:ring-[var(--ring)]",
-  "focus-within:ring-offset-2"
-];
-var FOCUS_VISIBLE_RING = [
-  "focus-visible:outline-none",
-  "focus-visible:ring-2",
-  "focus-visible:ring-[var(--ring)]",
-  "focus-visible:ring-offset-2"
-];
-var FOCUS_RING = [
-  "focus:outline-none",
-  "focus:ring-2",
-  "focus:ring-[var(--ring)]"
-];
-var FOCUS_HIGHLIGHT = [
-  "focus:outline-none",
-  "focus:bg-[var(--accent)]",
-  "focus:text-[var(--accent-foreground)]"
-];
-var DISABLED_STANDARD = [
-  "disabled:pointer-events-none",
-  "disabled:opacity-50"
-];
-var DISABLED_DATA_ATTR = [
-  "data-[disabled]:pointer-events-none",
-  "data-[disabled]:opacity-50",
-  "data-[disabled]:cursor-not-allowed"
-];
-var TEXT_SIZE_SMALL_SCALE = {
-  sm: "text-xs",
-  default: "text-sm",
-  lg: "text-base"
-};
-var TEXT_SIZE_MEDIUM_SCALE = {
-  sm: "text-sm",
-  default: "text-base",
-  lg: "text-lg"
-};
-var TOUCH_TARGET_MIN = [
-  "min-h-[44px]",
-  "min-w-[44px]"
-];
-var INTERACTIVE_SIZES = {
-  sm: "h-9 w-9",
-  // 36px - desktop only, NOT AAA compliant
-  default: "h-11 w-11",
-  // 44px - AAA compliant
-  lg: "h-14 w-14"
-  // 56px - AAA compliant, enhanced
-};
-var FIELD_HEIGHTS = {
-  sm: "h-9",
-  // 36px
-  default: "h-11",
-  // 44px
-  lg: "h-14"
-  // 56px
-};
-var ERROR_MESSAGE_BASE = [
-  "flex",
-  "items-center",
-  "gap-1.5",
-  "text-[var(--destructive)]"
-];
-var SUCCESS_MESSAGE_BASE = [
-  "flex",
-  "items-center",
-  "gap-1.5",
-  "text-[var(--success)]"
-];
-var DESCRIPTION_BASE = [
-  "text-[var(--menu-muted)]"
-];
-var LABEL_BASE = [
-  "font-medium",
-  "text-[var(--content-foreground)]"
-];
-var REQUIRED_INDICATOR = "after:content-['*'] after:ml-0.5 after:text-[var(--destructive)]";
-var POPOVER_ANIMATION_IN = [
-  "data-[entering]:animate-in",
-  "data-[entering]:fade-in-0",
-  "data-[entering]:zoom-in-95"
-];
-var POPOVER_ANIMATION_OUT = [
-  "data-[exiting]:animate-out",
-  "data-[exiting]:fade-out-0",
-  "data-[exiting]:zoom-out-95"
-];
-var REDUCED_MOTION = [
-  "motion-reduce:transition-none",
-  "motion-reduce:animate-none"
-];
-var TRANSITION_COLORS = [
-  "transition-colors",
-  "duration-200"
-];
-var TRANSITION_FAST = [
-  "transition-colors",
-  "duration-150"
-];
-var HOVER_ACCENT = [
-  "hover:bg-[var(--accent)]",
-  "hover:text-[var(--accent-foreground)]"
-];
-function combineStyles(...styles) {
-  return styles.flatMap((s) => Array.isArray(s) ? [...s] : [s]);
-}
-
-export { DEFAULT_INTERACTIONS, DESCRIPTION_BASE, DISABLED_DATA_ATTR, DISABLED_STANDARD, DISABLED_STYLES, ERROR_MESSAGE_BASE, FIELD_HEIGHTS, FOCUS_HIGHLIGHT, FOCUS_RING, FOCUS_STYLES, FOCUS_VISIBLE_RING, FOCUS_WITHIN_RING, HIGH_CONTRAST_FOCUS, HIGH_CONTRAST_HOVER, HIGH_CONTRAST_INTERACTIONS, HIGH_CONTRAST_PRESSED, HOVER_ACCENT, HOVER_STYLES, HOVER_STYLES_BASE, INTERACTIVE_SIZES, LABEL_BASE, NON_INTERACTIVE, POPOVER_ANIMATION_IN, POPOVER_ANIMATION_OUT, PRESSED_STYLES, PRESSED_STYLES_BASE, REDUCED_MOTION, REQUIRED_INDICATOR, SUBTLE_INTERACTIONS, SUCCESS_MESSAGE_BASE, TEXT_SIZE_MEDIUM_SCALE, TEXT_SIZE_SMALL_SCALE, TOUCH_TARGET_MIN, TRANSITION_COLORS, TRANSITION_FAST, combineStyles };
-//# sourceMappingURL=index.mjs.map
+var e="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2",a="data-[pressed]:scale-[0.97]",E="data-[pressed]:transition-transform data-[pressed]:duration-100",r="data-[hovered]:shadow-md",c="data-[hovered]:transition-shadow data-[hovered]:duration-200",t="hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground",n="hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground",s="hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground",i=`${t} ${n} ${s}`,_="disabled:pointer-events-none disabled:opacity-50",T=`${e} ${a} ${r} ${t} ${n} ${s}`,I=`${e} ${t}`,d="cursor-default select-none";var A=["focus-within:outline-none","focus-within:ring-2","focus-within:ring-[var(--ring)]","focus-within:ring-offset-2"],O=["focus-visible:outline-none","focus-visible:ring-2","focus-visible:ring-[var(--ring)]","focus-visible:ring-offset-2"],R=["focus:outline-none","focus:ring-2","focus:ring-[var(--ring)]"],u=["focus:outline-none","focus:bg-[var(--accent)]","focus:text-[var(--accent-foreground)]"],N=["disabled:pointer-events-none","disabled:opacity-50"],x=["data-[disabled]:pointer-events-none","data-[disabled]:opacity-50","data-[disabled]:cursor-not-allowed"],l={sm:"text-xs",default:"text-sm",lg:"text-base"},p={sm:"text-sm",default:"text-base",lg:"text-lg"},f=["min-h-[44px]","min-w-[44px]"],C={sm:"h-9 w-9",default:"h-11 w-11",lg:"h-14 w-14"},g={sm:"h-9",default:"h-11",lg:"h-14"},L=["flex","items-center","gap-1.5","text-[var(--destructive-background)]"],D=["flex","items-center","gap-1.5","text-[var(--success-background)]"],H=["text-[var(--menu-muted)]"],v=["font-medium","text-[var(--content-foreground)]"],h="after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]",m=["data-[entering]:animate-in","data-[entering]:fade-in-0","data-[entering]:zoom-in-95"],U=["data-[exiting]:animate-out","data-[exiting]:fade-out-0","data-[exiting]:zoom-out-95"],b=["motion-reduce:transition-none","motion-reduce:animate-none"],G=["transition-colors","duration-200"],B=["transition-colors","duration-150"],M=["hover:bg-[var(--accent)]","hover:text-[var(--accent-foreground)]"];function F(...S){return S.flatMap(o=>Array.isArray(o)?[...o]:[o])}export{T as DEFAULT_INTERACTIONS,H as DESCRIPTION_BASE,x as DISABLED_DATA_ATTR,N as DISABLED_STANDARD,_ as DISABLED_STYLES,L as ERROR_MESSAGE_BASE,g as FIELD_HEIGHTS,u as FOCUS_HIGHLIGHT,R as FOCUS_RING,e as FOCUS_STYLES,O as FOCUS_VISIBLE_RING,A as FOCUS_WITHIN_RING,t as HIGH_CONTRAST_FOCUS,n as HIGH_CONTRAST_HOVER,i as HIGH_CONTRAST_INTERACTIONS,s as HIGH_CONTRAST_PRESSED,M as HOVER_ACCENT,r as HOVER_STYLES,c as HOVER_STYLES_BASE,C as INTERACTIVE_SIZES,v as LABEL_BASE,d as NON_INTERACTIVE,m as POPOVER_ANIMATION_IN,U as POPOVER_ANIMATION_OUT,a as PRESSED_STYLES,E as PRESSED_STYLES_BASE,b as REDUCED_MOTION,h as REQUIRED_INDICATOR,I as SUBTLE_INTERACTIONS,D as SUCCESS_MESSAGE_BASE,p as TEXT_SIZE_MEDIUM_SCALE,l as TEXT_SIZE_SMALL_SCALE,f as TOUCH_TARGET_MIN,G as TRANSITION_COLORS,B as TRANSITION_FAST,F as combineStyles};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/styles/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/interaction-states.ts","../../src/styles/shared-variants.ts"],"names":[],"mappings":";AAoBO,IAAM,YAAA,GAAe;AAUrB,IAAM,cAAA,GAAiB;AAKvB,IAAM,mBAAA,GAAsB;AAU5B,IAAM,YAAA,GAAe;AAKrB,IAAM,iBAAA,GAAoB;AAQ1B,IAAM,mBAAA,GAAsB;AAM5B,IAAM,mBAAA,GAAsB;AAM5B,IAAM,qBAAA,GAAwB;AAM9B,IAAM,6BAA6B,CAAA,EAAG,mBAAmB,CAAA,CAAA,EAAI,mBAAmB,IAAI,qBAAqB,CAAA;AAMzG,IAAM,eAAA,GAAkB;AAWxB,IAAM,oBAAA,GAAuB,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,cAAc,CAAA,CAAA,EAAI,YAAY,CAAA,CAAA,EAAI,mBAAmB,CAAA,CAAA,EAAI,mBAAmB,CAAA,CAAA,EAAI,qBAAqB,CAAA;AAQrJ,IAAM,mBAAA,GAAsB,CAAA,EAAG,YAAY,CAAA,CAAA,EAAI,mBAAmB,CAAA;AAMlE,IAAM,eAAA,GAAkB;;;AC1FxB,IAAM,iBAAA,GAAoB;AAAA,EAC/B,2BAAA;AAAA,EACA,qBAAA;AAAA,EACA,iCAAA;AAAA,EACA;AACF;AAMO,IAAM,kBAAA,GAAqB;AAAA,EAChC,4BAAA;AAAA,EACA,sBAAA;AAAA,EACA,kCAAA;AAAA,EACA;AACF;AAMO,IAAM,UAAA,GAAa;AAAA,EACxB,oBAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF;AAKO,IAAM,eAAA,GAAkB;AAAA,EAC7B,oBAAA;AAAA,EACA,0BAAA;AAAA,EACA;AACF;AASO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,8BAAA;AAAA,EACA;AACF;AAKO,IAAM,kBAAA,GAAqB;AAAA,EAChC,qCAAA;AAAA,EACA,4BAAA;AAAA,EACA;AACF;AASO,IAAM,qBAAA,GAAwB;AAAA,EACnC,EAAA,EAAI,SAAA;AAAA,EACJ,OAAA,EAAS,SAAA;AAAA,EACT,EAAA,EAAI;AACN;AAKO,IAAM,sBAAA,GAAyB;AAAA,EACpC,EAAA,EAAI,SAAA;AAAA,EACJ,OAAA,EAAS,WAAA;AAAA,EACT,EAAA,EAAI;AACN;AASO,IAAM,gBAAA,GAAmB;AAAA,EAC9B,cAAA;AAAA,EACA;AACF;AAKO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,EAAA,EAAI,SAAA;AAAA;AAAA,EACJ,OAAA,EAAS,WAAA;AAAA;AAAA,EACT,EAAA,EAAI;AAAA;AACN;AAKO,IAAM,aAAA,GAAgB;AAAA,EAC3B,EAAA,EAAI,KAAA;AAAA;AAAA,EACJ,OAAA,EAAS,MAAA;AAAA;AAAA,EACT,EAAA,EAAI;AAAA;AACN;AASO,IAAM,kBAAA,GAAqB;AAAA,EAChC,MAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAKO,IAAM,oBAAA,GAAuB;AAAA,EAClC,MAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAKO,IAAM,gBAAA,GAAmB;AAAA,EAC9B;AACF;AAKO,IAAM,UAAA,GAAa;AAAA,EACxB,aAAA;AAAA,EACA;AACF;AAKO,IAAM,kBAAA,GAAqB;AAS3B,IAAM,oBAAA,GAAuB;AAAA,EAClC,4BAAA;AAAA,EACA,2BAAA;AAAA,EACA;AACF;AAKO,IAAM,qBAAA,GAAwB;AAAA,EACnC,4BAAA;AAAA,EACA,2BAAA;AAAA,EACA;AACF;AAKO,IAAM,cAAA,GAAiB;AAAA,EAC5B,+BAAA;AAAA,EACA;AACF;AAKO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,mBAAA;AAAA,EACA;AACF;AAKO,IAAM,eAAA,GAAkB;AAAA,EAC7B,mBAAA;AAAA,EACA;AACF;AASO,IAAM,YAAA,GAAe;AAAA,EAC1B,0BAAA;AAAA,EACA;AACF;AASO,SAAS,iBAAiB,MAAA,EAAkD;AACjF,EAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,CAAA,CAAA,KAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA,GAAI,CAAC,GAAG,CAAC,CAAA,GAAI,CAAC,CAAC,CAAC,CAAA;AAC5D","file":"index.mjs","sourcesContent":["/**\n * Global Interaction State Styles\n *\n * Consistent interaction patterns across all Themis components.\n * These styles ensure WCAG 2.2 AAA compliance and predictable UX.\n *\n * @see spec.md FR-010 (Visible focus ring for keyboard navigation)\n * @see spec.md FR-031 (Pressed state feedback)\n * @see spec.md FR-012 (High contrast mode support)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\n/**\n * Focus state styles (FR-010)\n * Visible focus ring for keyboard navigation - WCAG 2.2 Level AAA\n *\n * Components can override by extending these styles:\n * @example\n * cn(FOCUS_STYLES, \"ring-4\") // Increases ring width to 4px\n */\nexport const FOCUS_STYLES = \"data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2\";\n\n/**\n * Pressed/Active state styles (FR-031)\n * Visual feedback for press interactions\n *\n * Components can override the scale amount:\n * @example\n * cn(PRESSED_STYLES_BASE, \"data-[pressed]:scale-[0.95]\") // More pronounced scale\n */\nexport const PRESSED_STYLES = \"data-[pressed]:scale-[0.97]\";\n\n/**\n * Base pressed styles without scale (for components that need different feedback)\n */\nexport const PRESSED_STYLES_BASE = \"data-[pressed]:transition-transform data-[pressed]:duration-100\";\n\n/**\n * Hover state styles\n * Elevation change on hover for better affordance\n *\n * Components can override shadow depth:\n * @example\n * cn(HOVER_STYLES_BASE, \"data-[hovered]:shadow-lg\") // Larger shadow\n */\nexport const HOVER_STYLES = \"data-[hovered]:shadow-md\";\n\n/**\n * Base hover styles without shadow (for components that use different hover effects)\n */\nexport const HOVER_STYLES_BASE = \"data-[hovered]:transition-shadow data-[hovered]:duration-200\";\n\n/**\n * High contrast mode focus (FR-012)\n * Enhanced outlines for users requiring high contrast\n *\n * Uses 'hc:' prefix for prefers-contrast: more media query\n */\nexport const HIGH_CONTRAST_FOCUS = \"hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground\";\n\n/**\n * High contrast mode hover (FR-012)\n * Enhanced outlines for hover in high contrast mode\n */\nexport const HIGH_CONTRAST_HOVER = \"hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground\";\n\n/**\n * High contrast mode pressed state\n * Enhanced outlines for pressed state in high contrast mode\n */\nexport const HIGH_CONTRAST_PRESSED = \"hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground\";\n\n/**\n * Combined high contrast styles\n * Use this for components that need all high contrast interaction states\n */\nexport const HIGH_CONTRAST_INTERACTIONS = `${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;\n\n/**\n * Disabled state styles\n * Consistent disabled appearance across all components\n */\nexport const DISABLED_STYLES = \"disabled:pointer-events-none disabled:opacity-50\";\n\n/**\n * Default interaction bundle\n * Most common combination for interactive components\n *\n * Includes: focus ring, pressed scale, hover shadow, high contrast enhancements\n *\n * @example\n * <button className={cn(DEFAULT_INTERACTIONS, \"bg-primary\")}>Click</button>\n */\nexport const DEFAULT_INTERACTIONS = `${FOCUS_STYLES} ${PRESSED_STYLES} ${HOVER_STYLES} ${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;\n\n/**\n * Subtle interaction bundle\n * For components that need less pronounced feedback\n *\n * Includes: focus ring and high contrast, but no hover shadow or pressed scale\n */\nexport const SUBTLE_INTERACTIONS = `${FOCUS_STYLES} ${HIGH_CONTRAST_FOCUS}`;\n\n/**\n * Non-interactive element styles\n * For elements that should indicate they are not interactive\n */\nexport const NON_INTERACTIVE = \"cursor-default select-none\";\n","/**\n * Shared CVA Variant Utilities\n *\n * Common patterns extracted from component variants for consistency and reduced bundle size.\n * Use these constants in CVA definitions to ensure consistent styling across Themis.\n *\n * @see interaction-states.ts for interaction-specific styles (focus, hover, pressed)\n */\n\n// =============================================================================\n// Focus Ring Patterns\n// =============================================================================\n\n/**\n * Focus-within ring (for container elements with focusable children)\n * Use when the container should show focus when any child is focused\n */\nexport const FOCUS_WITHIN_RING = [\n  'focus-within:outline-none',\n  'focus-within:ring-2',\n  'focus-within:ring-[var(--ring)]',\n  'focus-within:ring-offset-2',\n] as const;\n\n/**\n * Focus-visible ring (for directly focusable elements)\n * Use for buttons, inputs, and other interactive elements\n */\nexport const FOCUS_VISIBLE_RING = [\n  'focus-visible:outline-none',\n  'focus-visible:ring-2',\n  'focus-visible:ring-[var(--ring)]',\n  'focus-visible:ring-offset-2',\n] as const;\n\n/**\n * Standard focus ring (for elements using :focus pseudo-class)\n * Prefer focus-visible when possible for better UX\n */\nexport const FOCUS_RING = [\n  'focus:outline-none',\n  'focus:ring-2',\n  'focus:ring-[var(--ring)]',\n] as const;\n\n/**\n * Focus with background change (for segments, cells, menu items)\n */\nexport const FOCUS_HIGHLIGHT = [\n  'focus:outline-none',\n  'focus:bg-[var(--accent)]',\n  'focus:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Disabled State Patterns\n// =============================================================================\n\n/**\n * Standard disabled state using disabled attribute\n */\nexport const DISABLED_STANDARD = [\n  'disabled:pointer-events-none',\n  'disabled:opacity-50',\n] as const;\n\n/**\n * Disabled state using data attribute (React Aria pattern)\n */\nexport const DISABLED_DATA_ATTR = [\n  'data-[disabled]:pointer-events-none',\n  'data-[disabled]:opacity-50',\n  'data-[disabled]:cursor-not-allowed',\n] as const;\n\n// =============================================================================\n// Size-Based Text Variants\n// =============================================================================\n\n/**\n * Small text size scale (xs -> sm -> base)\n */\nexport const TEXT_SIZE_SMALL_SCALE = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-base',\n} as const;\n\n/**\n * Medium text size scale (sm -> base -> lg)\n */\nexport const TEXT_SIZE_MEDIUM_SCALE = {\n  sm: 'text-sm',\n  default: 'text-base',\n  lg: 'text-lg',\n} as const;\n\n// =============================================================================\n// Touch Target Utilities\n// =============================================================================\n\n/**\n * WCAG 2.2 AAA minimum touch target (44x44px)\n */\nexport const TOUCH_TARGET_MIN = [\n  'min-h-[44px]',\n  'min-w-[44px]',\n] as const;\n\n/**\n * Common button/cell sizes with touch target compliance\n */\nexport const INTERACTIVE_SIZES = {\n  sm: 'h-9 w-9',      // 36px - desktop only, NOT AAA compliant\n  default: 'h-11 w-11', // 44px - AAA compliant\n  lg: 'h-14 w-14',    // 56px - AAA compliant, enhanced\n} as const;\n\n/**\n * Height-only sizes for fields and inputs\n */\nexport const FIELD_HEIGHTS = {\n  sm: 'h-9',      // 36px\n  default: 'h-11', // 44px\n  lg: 'h-14',     // 56px\n} as const;\n\n// =============================================================================\n// Message/Feedback Patterns\n// =============================================================================\n\n/**\n * Error message styling\n */\nexport const ERROR_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--destructive)]',\n] as const;\n\n/**\n * Success message styling\n */\nexport const SUCCESS_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--success)]',\n] as const;\n\n/**\n * Description/helper text styling\n */\nexport const DESCRIPTION_BASE = [\n  'text-[var(--menu-muted)]',\n] as const;\n\n/**\n * Label base styling\n */\nexport const LABEL_BASE = [\n  'font-medium',\n  'text-[var(--content-foreground)]',\n] as const;\n\n/**\n * Required indicator pattern\n */\nexport const REQUIRED_INDICATOR = \"after:content-['*'] after:ml-0.5 after:text-[var(--destructive)]\";\n\n// =============================================================================\n// Animation Patterns\n// =============================================================================\n\n/**\n * Popover/dropdown entry animation\n */\nexport const POPOVER_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n] as const;\n\n/**\n * Popover/dropdown exit animation\n */\nexport const POPOVER_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n] as const;\n\n/**\n * Reduced motion support (WCAG 2.2)\n */\nexport const REDUCED_MOTION = [\n  'motion-reduce:transition-none',\n  'motion-reduce:animate-none',\n] as const;\n\n/**\n * Standard transition for colors\n */\nexport const TRANSITION_COLORS = [\n  'transition-colors',\n  'duration-200',\n] as const;\n\n/**\n * Fast transition for interactions\n */\nexport const TRANSITION_FAST = [\n  'transition-colors',\n  'duration-150',\n] as const;\n\n// =============================================================================\n// Hover State Patterns\n// =============================================================================\n\n/**\n * Accent background on hover (for interactive items)\n */\nexport const HOVER_ACCENT = [\n  'hover:bg-[var(--accent)]',\n  'hover:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Combines multiple style arrays into a flat array for CVA base styles\n */\nexport function combineStyles(...styles: (readonly string[] | string)[]): string[] {\n  return styles.flatMap(s => Array.isArray(s) ? [...s] : [s]);\n}\n"]}
+{"version":3,"sources":["../../src/styles/interaction-states.ts","../../src/styles/shared-variants.ts"],"names":["FOCUS_STYLES","PRESSED_STYLES","PRESSED_STYLES_BASE","HOVER_STYLES","HOVER_STYLES_BASE","HIGH_CONTRAST_FOCUS","HIGH_CONTRAST_HOVER","HIGH_CONTRAST_PRESSED","HIGH_CONTRAST_INTERACTIONS","DISABLED_STYLES","DEFAULT_INTERACTIONS","SUBTLE_INTERACTIONS","NON_INTERACTIVE","FOCUS_WITHIN_RING","FOCUS_VISIBLE_RING","FOCUS_RING","FOCUS_HIGHLIGHT","DISABLED_STANDARD","DISABLED_DATA_ATTR","TEXT_SIZE_SMALL_SCALE","TEXT_SIZE_MEDIUM_SCALE","TOUCH_TARGET_MIN","INTERACTIVE_SIZES","FIELD_HEIGHTS","ERROR_MESSAGE_BASE","SUCCESS_MESSAGE_BASE","DESCRIPTION_BASE","LABEL_BASE","REQUIRED_INDICATOR","POPOVER_ANIMATION_IN","POPOVER_ANIMATION_OUT","REDUCED_MOTION","TRANSITION_COLORS","TRANSITION_FAST","HOVER_ACCENT","combineStyles","styles","s"],"mappings":"AAoBO,IAAMA,CAAAA,CAAe,gHAUfC,CAAAA,CAAiB,6BAAA,CAKjBC,EAAsB,iEAAA,CAUtBC,CAAAA,CAAe,2BAKfC,CAAAA,CAAoB,8DAAA,CAQpBC,EAAsB,uJAAA,CAMtBC,CAAAA,CAAsB,6FAMtBC,CAAAA,CAAwB,+HAAA,CAMxBC,EAA6B,CAAA,EAAGH,CAAmB,CAAA,CAAA,EAAIC,CAAmB,CAAA,CAAA,EAAIC,CAAqB,GAMnGE,CAAAA,CAAkB,kDAAA,CAWlBC,EAAuB,CAAA,EAAGV,CAAY,IAAIC,CAAc,CAAA,CAAA,EAAIE,CAAY,CAAA,CAAA,EAAIE,CAAmB,CAAA,CAAA,EAAIC,CAAmB,CAAA,CAAA,EAAIC,CAAqB,GAQ/II,CAAAA,CAAsB,CAAA,EAAGX,CAAY,CAAA,CAAA,EAAIK,CAAmB,CAAA,CAAA,CAM5DO,CAAAA,CAAkB,6BC1FxB,IAAMC,EAAoB,CAC/B,2BAAA,CACA,sBACA,iCAAA,CACA,4BACF,EAMaC,CAAAA,CAAqB,CAChC,4BAAA,CACA,sBAAA,CACA,kCAAA,CACA,6BACF,EAMaC,CAAAA,CAAa,CACxB,qBACA,cAAA,CACA,0BACF,EAKaC,CAAAA,CAAkB,CAC7B,oBAAA,CACA,0BAAA,CACA,uCACF,CAAA,CASaC,EAAoB,CAC/B,8BAAA,CACA,qBACF,CAAA,CAKaC,CAAAA,CAAqB,CAChC,qCAAA,CACA,4BAAA,CACA,oCACF,CAAA,CASaC,CAAAA,CAAwB,CACnC,GAAI,SAAA,CACJ,OAAA,CAAS,UACT,EAAA,CAAI,WACN,EAKaC,CAAAA,CAAyB,CACpC,EAAA,CAAI,SAAA,CACJ,OAAA,CAAS,WAAA,CACT,GAAI,SACN,CAAA,CASaC,EAAmB,CAC9B,cAAA,CACA,cACF,CAAA,CAKaC,CAAAA,CAAoB,CAC/B,EAAA,CAAI,SAAA,CACJ,OAAA,CAAS,YACT,EAAA,CAAI,WACN,EAKaC,CAAAA,CAAgB,CAC3B,GAAI,KAAA,CACJ,OAAA,CAAS,MAAA,CACT,EAAA,CAAI,MACN,CAAA,CASaC,EAAqB,CAChC,MAAA,CACA,eACA,SAAA,CACA,sCACF,EAKaC,CAAAA,CAAuB,CAClC,MAAA,CACA,cAAA,CACA,SAAA,CACA,kCACF,EAKaC,CAAAA,CAAmB,CAC9B,0BACF,CAAA,CAKaC,CAAAA,CAAa,CACxB,aAAA,CACA,kCACF,CAAA,CAKaC,CAAAA,CAAqB,6EAAA,CASrBC,CAAAA,CAAuB,CAClC,4BAAA,CACA,2BAAA,CACA,4BACF,CAAA,CAKaC,CAAAA,CAAwB,CACnC,4BAAA,CACA,2BAAA,CACA,4BACF,CAAA,CAKaC,CAAAA,CAAiB,CAC5B,gCACA,4BACF,CAAA,CAKaC,EAAoB,CAC/B,mBAAA,CACA,cACF,CAAA,CAKaC,CAAAA,CAAkB,CAC7B,mBAAA,CACA,cACF,CAAA,CASaC,EAAe,CAC1B,0BAAA,CACA,uCACF,EASO,SAASC,KAAiBC,CAAAA,CAAkD,CACjF,OAAOA,CAAAA,CAAO,OAAA,CAAQC,CAAAA,EAAK,MAAM,OAAA,CAAQA,CAAC,EAAI,CAAC,GAAGA,CAAC,CAAA,CAAI,CAACA,CAAC,CAAC,CAC5D","file":"index.mjs","sourcesContent":["/**\n * Global Interaction State Styles\n *\n * Consistent interaction patterns across all Themis components.\n * These styles ensure WCAG 2.2 AAA compliance and predictable UX.\n *\n * @see spec.md FR-010 (Visible focus ring for keyboard navigation)\n * @see spec.md FR-031 (Pressed state feedback)\n * @see spec.md FR-012 (High contrast mode support)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\n/**\n * Focus state styles (FR-010)\n * Visible focus ring for keyboard navigation - WCAG 2.2 Level AAA\n *\n * Components can override by extending these styles:\n * @example\n * cn(FOCUS_STYLES, \"ring-4\") // Increases ring width to 4px\n */\nexport const FOCUS_STYLES = \"data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2\";\n\n/**\n * Pressed/Active state styles (FR-031)\n * Visual feedback for press interactions\n *\n * Components can override the scale amount:\n * @example\n * cn(PRESSED_STYLES_BASE, \"data-[pressed]:scale-[0.95]\") // More pronounced scale\n */\nexport const PRESSED_STYLES = \"data-[pressed]:scale-[0.97]\";\n\n/**\n * Base pressed styles without scale (for components that need different feedback)\n */\nexport const PRESSED_STYLES_BASE = \"data-[pressed]:transition-transform data-[pressed]:duration-100\";\n\n/**\n * Hover state styles\n * Elevation change on hover for better affordance\n *\n * Components can override shadow depth:\n * @example\n * cn(HOVER_STYLES_BASE, \"data-[hovered]:shadow-lg\") // Larger shadow\n */\nexport const HOVER_STYLES = \"data-[hovered]:shadow-md\";\n\n/**\n * Base hover styles without shadow (for components that use different hover effects)\n */\nexport const HOVER_STYLES_BASE = \"data-[hovered]:transition-shadow data-[hovered]:duration-200\";\n\n/**\n * High contrast mode focus (FR-012)\n * Enhanced outlines for users requiring high contrast\n *\n * Uses 'hc:' prefix for prefers-contrast: more media query\n */\nexport const HIGH_CONTRAST_FOCUS = \"hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground\";\n\n/**\n * High contrast mode hover (FR-012)\n * Enhanced outlines for hover in high contrast mode\n */\nexport const HIGH_CONTRAST_HOVER = \"hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground\";\n\n/**\n * High contrast mode pressed state\n * Enhanced outlines for pressed state in high contrast mode\n */\nexport const HIGH_CONTRAST_PRESSED = \"hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground\";\n\n/**\n * Combined high contrast styles\n * Use this for components that need all high contrast interaction states\n */\nexport const HIGH_CONTRAST_INTERACTIONS = `${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;\n\n/**\n * Disabled state styles\n * Consistent disabled appearance across all components\n */\nexport const DISABLED_STYLES = \"disabled:pointer-events-none disabled:opacity-50\";\n\n/**\n * Default interaction bundle\n * Most common combination for interactive components\n *\n * Includes: focus ring, pressed scale, hover shadow, high contrast enhancements\n *\n * @example\n * <button className={cn(DEFAULT_INTERACTIONS, \"bg-primary\")}>Click</button>\n */\nexport const DEFAULT_INTERACTIONS = `${FOCUS_STYLES} ${PRESSED_STYLES} ${HOVER_STYLES} ${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;\n\n/**\n * Subtle interaction bundle\n * For components that need less pronounced feedback\n *\n * Includes: focus ring and high contrast, but no hover shadow or pressed scale\n */\nexport const SUBTLE_INTERACTIONS = `${FOCUS_STYLES} ${HIGH_CONTRAST_FOCUS}`;\n\n/**\n * Non-interactive element styles\n * For elements that should indicate they are not interactive\n */\nexport const NON_INTERACTIVE = \"cursor-default select-none\";\n","/**\n * Shared CVA Variant Utilities\n *\n * Common patterns extracted from component variants for consistency and reduced bundle size.\n * Use these constants in CVA definitions to ensure consistent styling across Themis.\n *\n * @see interaction-states.ts for interaction-specific styles (focus, hover, pressed)\n */\n\n// =============================================================================\n// Focus Ring Patterns\n// =============================================================================\n\n/**\n * Focus-within ring (for container elements with focusable children)\n * Use when the container should show focus when any child is focused\n */\nexport const FOCUS_WITHIN_RING = [\n  'focus-within:outline-none',\n  'focus-within:ring-2',\n  'focus-within:ring-[var(--ring)]',\n  'focus-within:ring-offset-2',\n] as const;\n\n/**\n * Focus-visible ring (for directly focusable elements)\n * Use for buttons, inputs, and other interactive elements\n */\nexport const FOCUS_VISIBLE_RING = [\n  'focus-visible:outline-none',\n  'focus-visible:ring-2',\n  'focus-visible:ring-[var(--ring)]',\n  'focus-visible:ring-offset-2',\n] as const;\n\n/**\n * Standard focus ring (for elements using :focus pseudo-class)\n * Prefer focus-visible when possible for better UX\n */\nexport const FOCUS_RING = [\n  'focus:outline-none',\n  'focus:ring-2',\n  'focus:ring-[var(--ring)]',\n] as const;\n\n/**\n * Focus with background change (for segments, cells, menu items)\n */\nexport const FOCUS_HIGHLIGHT = [\n  'focus:outline-none',\n  'focus:bg-[var(--accent)]',\n  'focus:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Disabled State Patterns\n// =============================================================================\n\n/**\n * Standard disabled state using disabled attribute\n */\nexport const DISABLED_STANDARD = [\n  'disabled:pointer-events-none',\n  'disabled:opacity-50',\n] as const;\n\n/**\n * Disabled state using data attribute (React Aria pattern)\n */\nexport const DISABLED_DATA_ATTR = [\n  'data-[disabled]:pointer-events-none',\n  'data-[disabled]:opacity-50',\n  'data-[disabled]:cursor-not-allowed',\n] as const;\n\n// =============================================================================\n// Size-Based Text Variants\n// =============================================================================\n\n/**\n * Small text size scale (xs -> sm -> base)\n */\nexport const TEXT_SIZE_SMALL_SCALE = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-base',\n} as const;\n\n/**\n * Medium text size scale (sm -> base -> lg)\n */\nexport const TEXT_SIZE_MEDIUM_SCALE = {\n  sm: 'text-sm',\n  default: 'text-base',\n  lg: 'text-lg',\n} as const;\n\n// =============================================================================\n// Touch Target Utilities\n// =============================================================================\n\n/**\n * WCAG 2.2 AAA minimum touch target (44x44px)\n */\nexport const TOUCH_TARGET_MIN = [\n  'min-h-[44px]',\n  'min-w-[44px]',\n] as const;\n\n/**\n * Common button/cell sizes with touch target compliance\n */\nexport const INTERACTIVE_SIZES = {\n  sm: 'h-9 w-9',      // 36px - desktop only, NOT AAA compliant\n  default: 'h-11 w-11', // 44px - AAA compliant\n  lg: 'h-14 w-14',    // 56px - AAA compliant, enhanced\n} as const;\n\n/**\n * Height-only sizes for fields and inputs\n */\nexport const FIELD_HEIGHTS = {\n  sm: 'h-9',      // 36px\n  default: 'h-11', // 44px\n  lg: 'h-14',     // 56px\n} as const;\n\n// =============================================================================\n// Message/Feedback Patterns\n// =============================================================================\n\n/**\n * Error message styling\n */\nexport const ERROR_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--destructive-background)]',\n] as const;\n\n/**\n * Success message styling\n */\nexport const SUCCESS_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--success-background)]',\n] as const;\n\n/**\n * Description/helper text styling\n */\nexport const DESCRIPTION_BASE = [\n  'text-[var(--menu-muted)]',\n] as const;\n\n/**\n * Label base styling\n */\nexport const LABEL_BASE = [\n  'font-medium',\n  'text-[var(--content-foreground)]',\n] as const;\n\n/**\n * Required indicator pattern\n */\nexport const REQUIRED_INDICATOR = \"after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]\";\n\n// =============================================================================\n// Animation Patterns\n// =============================================================================\n\n/**\n * Popover/dropdown entry animation\n */\nexport const POPOVER_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n] as const;\n\n/**\n * Popover/dropdown exit animation\n */\nexport const POPOVER_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n] as const;\n\n/**\n * Reduced motion support (WCAG 2.2)\n */\nexport const REDUCED_MOTION = [\n  'motion-reduce:transition-none',\n  'motion-reduce:animate-none',\n] as const;\n\n/**\n * Standard transition for colors\n */\nexport const TRANSITION_COLORS = [\n  'transition-colors',\n  'duration-200',\n] as const;\n\n/**\n * Fast transition for interactions\n */\nexport const TRANSITION_FAST = [\n  'transition-colors',\n  'duration-150',\n] as const;\n\n// =============================================================================\n// Hover State Patterns\n// =============================================================================\n\n/**\n * Accent background on hover (for interactive items)\n */\nexport const HOVER_ACCENT = [\n  'hover:bg-[var(--accent)]',\n  'hover:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Combines multiple style arrays into a flat array for CVA base styles\n */\nexport function combineStyles(...styles: (readonly string[] | string)[]): string[] {\n  return styles.flatMap(s => Array.isArray(s) ? [...s] : [s]);\n}\n"]}

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

@@ -72,11 +72,11 @@ export declare const FIELD_HEIGHTS: {
 /**
  * Error message styling
  */
-export declare const ERROR_MESSAGE_BASE: readonly ["flex", "items-center", "gap-1.5", "text-[var(--destructive)]"];
+export declare const ERROR_MESSAGE_BASE: readonly ["flex", "items-center", "gap-1.5", "text-[var(--destructive-background)]"];
 /**
  * Success message styling
  */
-export declare const SUCCESS_MESSAGE_BASE: readonly ["flex", "items-center", "gap-1.5", "text-[var(--success)]"];
+export declare const SUCCESS_MESSAGE_BASE: readonly ["flex", "items-center", "gap-1.5", "text-[var(--success-background)]"];
 /**
  * Description/helper text styling
  */
@@ -88,7 +88,7 @@ export declare const LABEL_BASE: readonly ["font-medium", "text-[var(--content-f
 /**
  * Required indicator pattern
  */
-export declare const REQUIRED_INDICATOR = "after:content-['*'] after:ml-0.5 after:text-[var(--destructive)]";
+export declare const REQUIRED_INDICATOR = "after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]";
 /**
  * Popover/dropdown entry animation
  */

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

@@ -1 +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"}
+{"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,sFAKrB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,oBAAoB,kFAKvB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,gBAAgB,uCAEnB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,UAAU,8DAGb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,gFAAgF,CAAC;AAMhH;;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/utils/index.js

@@ -1,13 +1,2 @@
-'use strict';
-
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-
-// src/utils/cn.ts
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-
-exports.cn = cn;
-//# sourceMappingURL=index.js.map
+'use strict';var clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function o(...r){return tailwindMerge.twMerge(clsx.clsx(r))}exports.cn=o;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/cn.ts"],"names":["twMerge","clsx"],"mappings":";;;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"index.js","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"]}
+{"version":3,"sources":["../../src/utils/cn.ts"],"names":["cn","inputs","twMerge","clsx"],"mappings":"8EAcO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAA8B,CAClD,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B","file":"index.js","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"]}

package/dist/utils/index.mjs

@@ -1,11 +1,2 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-// src/utils/cn.ts
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-export { cn };
-//# sourceMappingURL=index.mjs.map
+import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function o(...r){return twMerge(clsx(r))}export{o as cn};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/utils/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/cn.ts"],"names":[],"mappings":";;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"]}
+{"version":3,"sources":["../../src/utils/cn.ts"],"names":["cn","inputs","twMerge","clsx"],"mappings":"6DAcO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAA8B,CAClD,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",
@@ -49,7 +49,6 @@
         "default": "./dist/styles/index.js"
       }
     },
-    "./styles/tokens.css": "./dist/styles/tokens.css",
     "./styles/defaults.css": "./dist/styles/defaults.css",
     "./utils": {
       "import": {
@@ -82,9 +81,7 @@
     "CHANGELOG.md"
   ],
   "sideEffects": [
-    "**/*.css",
-    "dist/chunk-*.mjs",
-    "dist/chunk-*.js"
+    "**/*.css"
   ],
   "scripts": {
     "build": "tsup && tsc -p tsconfig.build.json && pnpm build:css",
@@ -100,7 +97,9 @@
     "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"
+    "clean": "rm -rf dist",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "storybook:build": "storybook build"
   },
   "peerDependencies": {
     "lucide-react": ">=0.400.0",
@@ -132,7 +131,9 @@
   "devDependencies": {
     "@eslint/js": "^9.0.0",
     "@size-limit/preset-small-lib": "^11.0.0",
-    "@storybook/react": "^8.0.0",
+    "@storybook/addon-a11y": "^10.2.8",
+    "@storybook/react-vite": "^10.2.8",
+    "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
@@ -153,6 +154,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "size-limit": "^11.0.0",
+    "storybook": "^10.2.8",
     "tsup": "^8.0.0",
     "tsx": "^4.0.0",
     "typescript": "^5.6.0",

package/src/elements/Accordion/Accordion.stories.tsx

@@ -5,7 +5,7 @@
  * @see plan.md (Implementation Plan)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState, type Key } from 'react';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
 import { Plus, Minus, ChevronRight, Settings, User, Bell, Lock } from 'lucide-react';

package/src/elements/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,124 @@
+/**
+ * AlertDialog Component - Storybook Stories
+ *
+ * Interactive examples and documentation for the AlertDialog component.
+ * Demonstrates confirmation dialogs for destructive or important actions.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+import { AlertDialog } from './AlertDialog';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Elements/AlertDialog',
+  component: AlertDialog,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A strict confirmation dialog for destructive or important actions. Does not dismiss on backdrop click or Escape key. Fixed footer with cancel + action buttons. Built on Modal with role="alertdialog" for WCAG 2.2 AAA compliance.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'destructive'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+    },
+    actionVariant: {
+      control: { type: 'select' },
+      options: ['default', 'destructive'],
+    },
+  },
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    trigger: <Button variant="destructive">Delete Account</Button>,
+    title: 'Delete Account?',
+    description: 'This will permanently delete your account and all associated data. This action cannot be undone.',
+    actionLabel: 'Delete Account',
+    onAction: fn(),
+  },
+};
+
+export const DestructiveVariant: Story = {
+  args: {
+    trigger: <Button variant="destructive">Remove All</Button>,
+    title: 'Remove All Items?',
+    description: 'All items in your cart will be removed.',
+    variant: 'destructive',
+    actionLabel: 'Remove All',
+    onAction: fn(),
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    trigger: <Button>Discard Changes</Button>,
+    title: 'Discard Changes?',
+    description: 'You have unsaved changes that will be lost.',
+    size: 'sm',
+    actionLabel: 'Discard',
+    onAction: fn(),
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    trigger: <Button variant="destructive">Delete Project</Button>,
+    title: 'Delete Project?',
+    description: 'This will permanently delete the project "My Project" and all associated resources including files, deployments, and team access. This action cannot be undone.',
+    size: 'lg',
+    actionLabel: 'Delete Project',
+    onAction: fn(),
+  },
+};
+
+export const NonDestructiveAction: Story = {
+  args: {
+    trigger: <Button>Publish</Button>,
+    title: 'Publish to Production?',
+    description: 'This will deploy the current build to production. All users will immediately see the changes.',
+    actionLabel: 'Publish Now',
+    actionVariant: 'default',
+    onAction: fn(),
+  },
+};
+
+export const CustomLabels: Story = {
+  args: {
+    trigger: <Button variant="destructive">Leave Page</Button>,
+    title: 'Leave this page?',
+    description: 'Changes you made may not be saved.',
+    cancelLabel: 'Stay',
+    actionLabel: 'Leave',
+    onAction: fn(),
+  },
+};
+
+export const WithExtraContent: Story = {
+  render: () => (
+    <AlertDialog
+      trigger={<Button variant="destructive">Delete Team</Button>}
+      title="Delete Team?"
+      description="This will permanently delete the team and revoke access for all members."
+      actionLabel="Delete Team"
+      onAction={fn()}
+    >
+      <div className="my-4 rounded-md bg-[var(--muted)] p-3 text-sm">
+        <strong>Affected members:</strong> 12 users will lose access
+      </div>
+    </AlertDialog>
+  ),
+};

package/src/elements/Avatar/Avatar.stories.tsx

@@ -6,7 +6,7 @@
  * @see plan.md (Implementation Plan)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Avatar, AvatarGroup } from './index';
 
 const meta = {

package/src/elements/Badge/Badge.stories.tsx

@@ -6,7 +6,7 @@
  * @see plan.md for architecture details
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Badge } from './Badge';
 import { CheckCircle, X, AlertCircle, Star, Bell, Tag, User } from 'lucide-react';
 

package/src/elements/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -6,7 +6,7 @@
  */
 
 import type { ReactNode } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Home, FolderOpen, FileText, Settings, Users, Package } from 'lucide-react';
 import { Breadcrumbs } from './Breadcrumbs';
 import type { BreadcrumbItemData } from './Breadcrumbs.types';

package/src/elements/Button/Button.stories.tsx

@@ -6,7 +6,7 @@
  * @see spec.md FR-045 (Storybook stories requirement)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from './Button';
 import { Trash2, Save, Download, Settings } from 'lucide-react';
 

package/src/elements/ButtonGroup/ButtonGroup.stories.tsx

@@ -6,7 +6,7 @@
  * @see spec.md FR-045 (Storybook stories requirement)
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
   Bold,
   Italic,

package/src/elements/Card/Card.stories.tsx

@@ -9,7 +9,7 @@
  */
 
 import { useState, type ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { HelpCircle, Info, X, ArrowLeft } from 'lucide-react';
 import {
   Card,

package/src/elements/Carousel/Carousel.stories.tsx

@@ -3,7 +3,7 @@
  * Storybook stories for Carousel component demonstrating all features
  */
 
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Carousel } from './Carousel';
 import { useState } from 'react';
 

package/src/elements/Chart/Chart.stories.tsx

@@ -9,7 +9,7 @@
  */
 
 import { type ReactElement } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Chart } from './Chart';
 import type { DataSeries } from './Chart.types';
 

package/src/elements/Checkbox/Checkbox.stories.tsx

@@ -6,7 +6,7 @@
  */
 
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Checkbox } from './Checkbox';
 
 const meta = {

package/src/elements/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -8,7 +8,7 @@
  */
 
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/nextjs';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { CheckboxGroup, Checkbox, CheckmarkIcon, TimesIcon } from './CheckboxGroup';
 
 const meta = {
@@ -738,7 +738,7 @@ export const PermissionsSettings: Story = {
         </Checkbox>
         <Checkbox value="delete" className="p-4">
           <div className="flex w-full items-start gap-4">
-            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--destructive)]/10 text-xl">
+            <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-[var(--destructive-background)]/10 text-xl">
               🗑️
             </div>
             <div className="flex-1">
@@ -763,8 +763,8 @@ export const PermissionsSettings: Story = {
 
 export const DangerZone: Story = {
   render: () => (
-    <div className="w-96 rounded-lg border border-[var(--destructive)] bg-[var(--background)] p-6">
-      <h3 className="mb-4 text-lg font-semibold text-[var(--destructive)]">Danger Zone</h3>
+    <div className="w-96 rounded-lg border border-[var(--destructive-background)] bg-[var(--background)] p-6">
+      <h3 className="mb-4 text-lg font-semibold text-[var(--destructive-background)]">Danger Zone</h3>
       <CheckboxGroup
         variant="destructive"
         label="Delete account data"