@tribepad/themis 1.0.7 → 1.0.9

package/dist/styles/animations.css

@@ -0,0 +1,172 @@
+/**
+ * Themis Animation Utilities
+ *
+ * CSS animation utilities for enter/exit transitions, compatible with Tailwind v4.
+ * Used by Modal, Select, Combobox, Dropdown, Toast, Tooltip, Carousel, Button ripple,
+ * and ResizablePopover components.
+ *
+ * These provide the same utilities as tailwindcss-animate but using Tailwind v4
+ * @utility directives so they work with all Tailwind variant prefixes
+ * (e.g., data-[entering]:animate-in, motion-safe:zoom-in-95).
+ *
+ * Usage:
+ *   @import '@tribepad/themis/styles/animations.css';
+ */
+
+/* =============================================================================
+ * Keyframes
+ * ============================================================================= */
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(
+        var(--tw-enter-translate-x, 0),
+        var(--tw-enter-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1)
+      )
+      rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(
+        var(--tw-exit-translate-x, 0),
+        var(--tw-exit-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1)
+      )
+      rotate(var(--tw-exit-rotate, 0));
+  }
+}
+
+/* =============================================================================
+ * Base Animation Utilities
+ * ============================================================================= */
+
+@utility animate-in {
+  animation-name: enter;
+  animation-duration: 200ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+  --tw-enter-opacity: initial;
+  --tw-enter-scale: initial;
+  --tw-enter-rotate: initial;
+  --tw-enter-translate-x: initial;
+  --tw-enter-translate-y: initial;
+}
+
+@utility animate-out {
+  animation-name: exit;
+  animation-duration: 150ms;
+  animation-timing-function: ease-in;
+  animation-fill-mode: forwards;
+  --tw-exit-opacity: initial;
+  --tw-exit-scale: initial;
+  --tw-exit-rotate: initial;
+  --tw-exit-translate-x: initial;
+  --tw-exit-translate-y: initial;
+}
+
+/* =============================================================================
+ * Fade Modifiers
+ * ============================================================================= */
+
+@utility fade-in-0 {
+  --tw-enter-opacity: 0;
+}
+
+@utility fade-out-0 {
+  --tw-exit-opacity: 0;
+}
+
+@utility fade-out-80 {
+  --tw-exit-opacity: 0.8;
+}
+
+/* =============================================================================
+ * Zoom/Scale Modifiers
+ * ============================================================================= */
+
+@utility zoom-in-95 {
+  --tw-enter-scale: 0.95;
+}
+
+@utility zoom-out-95 {
+  --tw-exit-scale: 0.95;
+}
+
+/* =============================================================================
+ * Slide Modifiers — Bottom
+ * ============================================================================= */
+
+@utility slide-in-from-bottom-2 {
+  --tw-enter-translate-y: 0.5rem;
+}
+
+@utility slide-out-to-bottom-2 {
+  --tw-exit-translate-y: 0.5rem;
+}
+
+@utility slide-in-from-bottom-4 {
+  --tw-enter-translate-y: 1rem;
+}
+
+@utility slide-out-to-bottom-4 {
+  --tw-exit-translate-y: 1rem;
+}
+
+/* =============================================================================
+ * Slide Modifiers — Top
+ * ============================================================================= */
+
+@utility slide-in-from-top-2 {
+  --tw-enter-translate-y: -0.5rem;
+}
+
+@utility slide-out-to-top-2 {
+  --tw-exit-translate-y: -0.5rem;
+}
+
+/* =============================================================================
+ * Slide Modifiers — Left
+ * ============================================================================= */
+
+@utility slide-in-from-left {
+  --tw-enter-translate-x: -100%;
+}
+
+@utility slide-in-from-left-2 {
+  --tw-enter-translate-x: -0.5rem;
+}
+
+@utility slide-out-to-left-2 {
+  --tw-exit-translate-x: -0.5rem;
+}
+
+/* =============================================================================
+ * Slide Modifiers — Right
+ * ============================================================================= */
+
+@utility slide-in-from-right-2 {
+  --tw-enter-translate-x: 0.5rem;
+}
+
+@utility slide-out-to-right-2 {
+  --tw-exit-translate-x: 0.5rem;
+}
+
+@utility slide-out-to-right-full {
+  --tw-exit-translate-x: 100%;
+}

package/dist/styles/index.js

@@ -1,2 +1,2 @@
-'use strict';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])}exports.DEFAULT_INTERACTIONS=T;exports.DESCRIPTION_BASE=H;exports.DISABLED_DATA_ATTR=x;exports.DISABLED_STANDARD=N;exports.DISABLED_STYLES=_;exports.ERROR_MESSAGE_BASE=L;exports.FIELD_HEIGHTS=g;exports.FOCUS_HIGHLIGHT=u;exports.FOCUS_RING=R;exports.FOCUS_STYLES=e;exports.FOCUS_VISIBLE_RING=O;exports.FOCUS_WITHIN_RING=A;exports.HIGH_CONTRAST_FOCUS=t;exports.HIGH_CONTRAST_HOVER=n;exports.HIGH_CONTRAST_INTERACTIONS=i;exports.HIGH_CONTRAST_PRESSED=s;exports.HOVER_ACCENT=M;exports.HOVER_STYLES=r;exports.HOVER_STYLES_BASE=c;exports.INTERACTIVE_SIZES=C;exports.LABEL_BASE=v;exports.NON_INTERACTIVE=d;exports.POPOVER_ANIMATION_IN=m;exports.POPOVER_ANIMATION_OUT=U;exports.PRESSED_STYLES=a;exports.PRESSED_STYLES_BASE=E;exports.REDUCED_MOTION=b;exports.REQUIRED_INDICATOR=h;exports.SUBTLE_INTERACTIONS=I;exports.SUCCESS_MESSAGE_BASE=D;exports.TEXT_SIZE_MEDIUM_SCALE=p;exports.TEXT_SIZE_SMALL_SCALE=l;exports.TOUCH_TARGET_MIN=f;exports.TRANSITION_COLORS=G;exports.TRANSITION_FAST=B;exports.combineStyles=F;//# sourceMappingURL=index.js.map
+'use strict';var o="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2",s="data-[pressed]:scale-[0.97]",c="data-[pressed]:transition-transform data-[pressed]:duration-100",i="data-[hovered]:shadow-md",S="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",a="hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground",d=`${t} ${n} ${a}`,E="disabled:pointer-events-none disabled:opacity-50",_=`${o} ${s} ${i} ${t} ${n} ${a}`,T=`${o} ${t}`,I="cursor-default select-none";var A=["focus-within:outline-none","focus-within:ring-2","focus-within:ring-[var(--ring)]","focus-within:ring-offset-2"],u=["focus-visible:outline-none","focus-visible:ring-2","focus-visible:ring-[var(--ring)]","focus-visible:ring-offset-2"],O=["focus:outline-none","focus:ring-2","focus:ring-[var(--ring)]"],x=["focus:outline-none","focus:bg-[var(--accent)]","focus:text-[var(--accent-foreground)]"],N=["disabled:pointer-events-none","disabled:opacity-50"],R=["data-[disabled]:pointer-events-none","data-[disabled]:opacity-50","data-[disabled]:cursor-not-allowed"],g={sm:"text-xs",default:"text-sm",lg:"text-base"},f={sm:"text-sm",default:"text-base",lg:"text-lg"},p=["min-h-[44px]","min-w-[44px]"],l={sm:"h-9 w-9",default:"h-11 w-11",lg:"h-14 w-14"},C={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)]"],m=["text-[var(--menu-muted)]"],H=["font-medium","text-[var(--content-foreground)]"],v="after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]",h=["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"];var b=["motion-reduce:transition-none","motion-reduce:animate-none"],M=["transition-colors","duration-200"],G=["transition-colors","duration-150"],B=["hover:bg-[var(--accent)]","hover:text-[var(--accent-foreground)]"];function V(...r){return r.flatMap(e=>Array.isArray(e)?[...e]:[e])}exports.DEFAULT_INTERACTIONS=_;exports.DESCRIPTION_BASE=m;exports.DISABLED_DATA_ATTR=R;exports.DISABLED_STANDARD=N;exports.DISABLED_STYLES=E;exports.ERROR_MESSAGE_BASE=L;exports.FIELD_HEIGHTS=C;exports.FOCUS_HIGHLIGHT=x;exports.FOCUS_RING=O;exports.FOCUS_STYLES=o;exports.FOCUS_VISIBLE_RING=u;exports.FOCUS_WITHIN_RING=A;exports.HIGH_CONTRAST_FOCUS=t;exports.HIGH_CONTRAST_HOVER=n;exports.HIGH_CONTRAST_INTERACTIONS=d;exports.HIGH_CONTRAST_PRESSED=a;exports.HOVER_ACCENT=B;exports.HOVER_STYLES=i;exports.HOVER_STYLES_BASE=S;exports.INTERACTIVE_SIZES=l;exports.LABEL_BASE=H;exports.NON_INTERACTIVE=I;exports.POPOVER_ANIMATION_IN=h;exports.POPOVER_ANIMATION_OUT=U;exports.PRESSED_STYLES=s;exports.PRESSED_STYLES_BASE=c;exports.REDUCED_MOTION=b;exports.REQUIRED_INDICATOR=v;exports.SUBTLE_INTERACTIONS=T;exports.SUCCESS_MESSAGE_BASE=D;exports.TEXT_SIZE_MEDIUM_SCALE=f;exports.TEXT_SIZE_SMALL_SCALE=g;exports.TOUCH_TARGET_MIN=p;exports.TRANSITION_COLORS=M;exports.TRANSITION_FAST=G;exports.combineStyles=V;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/styles/index.js.map

@@ -1 +1 @@
-{"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.js","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"]}
+{"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,0BAAA,CAKfC,CAAAA,CAAoB,8DAAA,CAQpBC,CAAAA,CAAsB,wJAMtBC,CAAAA,CAAsB,4FAAA,CAMtBC,EAAwB,+HAAA,CAMxBC,CAAAA,CAA6B,GAAGH,CAAmB,CAAA,CAAA,EAAIC,CAAmB,CAAA,CAAA,EAAIC,CAAqB,CAAA,CAAA,CAMnGE,EAAkB,kDAAA,CAWlBC,CAAAA,CAAuB,GAAGV,CAAY,CAAA,CAAA,EAAIC,CAAc,CAAA,CAAA,EAAIE,CAAY,CAAA,CAAA,EAAIE,CAAmB,CAAA,CAAA,EAAIC,CAAmB,IAAIC,CAAqB,CAAA,CAAA,CAQ/II,EAAsB,CAAA,EAAGX,CAAY,IAAIK,CAAmB,CAAA,CAAA,CAM5DO,CAAAA,CAAkB,6BC1FxB,IAAMC,CAAAA,CAAoB,CAC/B,2BAAA,CACA,qBAAA,CACA,kCACA,4BACF,CAAA,CAMaC,EAAqB,CAChC,4BAAA,CACA,sBAAA,CACA,kCAAA,CACA,6BACF,CAAA,CAMaC,EAAa,CACxB,oBAAA,CACA,eACA,0BACF,CAAA,CAKaC,EAAkB,CAC7B,oBAAA,CACA,0BAAA,CACA,uCACF,CAAA,CASaC,CAAAA,CAAoB,CAC/B,8BAAA,CACA,qBACF,EAKaC,CAAAA,CAAqB,CAChC,sCACA,4BAAA,CACA,oCACF,CAAA,CASaC,CAAAA,CAAwB,CACnC,EAAA,CAAI,UACJ,OAAA,CAAS,SAAA,CACT,GAAI,WACN,CAAA,CAKaC,EAAyB,CACpC,EAAA,CAAI,SAAA,CACJ,OAAA,CAAS,WAAA,CACT,EAAA,CAAI,SACN,CAAA,CASaC,CAAAA,CAAmB,CAC9B,cAAA,CACA,cACF,EAKaC,CAAAA,CAAoB,CAC/B,EAAA,CAAI,SAAA,CACJ,OAAA,CAAS,WAAA,CACT,GAAI,WACN,CAAA,CAKaC,EAAgB,CAC3B,EAAA,CAAI,MACJ,OAAA,CAAS,MAAA,CACT,EAAA,CAAI,MACN,CAAA,CASaC,CAAAA,CAAqB,CAChC,MAAA,CACA,cAAA,CACA,UACA,sCACF,CAAA,CAKaC,EAAuB,CAClC,MAAA,CACA,cAAA,CACA,SAAA,CACA,kCACF,CAAA,CAKaC,EAAmB,CAC9B,0BACF,EAKaC,CAAAA,CAAa,CACxB,cACA,kCACF,CAAA,CAKaC,CAAAA,CAAqB,6EAAA,CASrBC,CAAAA,CAAuB,CAClC,6BACA,2BAAA,CACA,4BACF,EAKaC,CAAAA,CAAwB,CACnC,6BACA,2BAAA,CACA,4BACF,EAkEO,IAAMC,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.js","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 * Modal content enter animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal content exit animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal slide enter animation (fade + slide up)\n */\nexport const MODAL_SLIDE_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:slide-in-from-bottom-4',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal slide exit animation (fade + slide down)\n */\nexport const MODAL_SLIDE_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:slide-out-to-bottom-4',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal overlay enter/exit animation (fade only)\n */\nexport const MODAL_OVERLAY_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:duration-200',\n] as const;\n\nexport const MODAL_OVERLAY_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:duration-150',\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/index.mjs

@@ -1,2 +1,2 @@
-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
+var o="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2",s="data-[pressed]:scale-[0.97]",c="data-[pressed]:transition-transform data-[pressed]:duration-100",i="data-[hovered]:shadow-md",S="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",a="hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground",d=`${t} ${n} ${a}`,E="disabled:pointer-events-none disabled:opacity-50",_=`${o} ${s} ${i} ${t} ${n} ${a}`,T=`${o} ${t}`,I="cursor-default select-none";var A=["focus-within:outline-none","focus-within:ring-2","focus-within:ring-[var(--ring)]","focus-within:ring-offset-2"],u=["focus-visible:outline-none","focus-visible:ring-2","focus-visible:ring-[var(--ring)]","focus-visible:ring-offset-2"],O=["focus:outline-none","focus:ring-2","focus:ring-[var(--ring)]"],x=["focus:outline-none","focus:bg-[var(--accent)]","focus:text-[var(--accent-foreground)]"],N=["disabled:pointer-events-none","disabled:opacity-50"],R=["data-[disabled]:pointer-events-none","data-[disabled]:opacity-50","data-[disabled]:cursor-not-allowed"],g={sm:"text-xs",default:"text-sm",lg:"text-base"},f={sm:"text-sm",default:"text-base",lg:"text-lg"},p=["min-h-[44px]","min-w-[44px]"],l={sm:"h-9 w-9",default:"h-11 w-11",lg:"h-14 w-14"},C={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)]"],m=["text-[var(--menu-muted)]"],H=["font-medium","text-[var(--content-foreground)]"],v="after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]",h=["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"];var b=["motion-reduce:transition-none","motion-reduce:animate-none"],M=["transition-colors","duration-200"],G=["transition-colors","duration-150"],B=["hover:bg-[var(--accent)]","hover:text-[var(--accent-foreground)]"];function V(...r){return r.flatMap(e=>Array.isArray(e)?[...e]:[e])}export{_ as DEFAULT_INTERACTIONS,m as DESCRIPTION_BASE,R as DISABLED_DATA_ATTR,N as DISABLED_STANDARD,E as DISABLED_STYLES,L as ERROR_MESSAGE_BASE,C as FIELD_HEIGHTS,x as FOCUS_HIGHLIGHT,O as FOCUS_RING,o as FOCUS_STYLES,u as FOCUS_VISIBLE_RING,A as FOCUS_WITHIN_RING,t as HIGH_CONTRAST_FOCUS,n as HIGH_CONTRAST_HOVER,d as HIGH_CONTRAST_INTERACTIONS,a as HIGH_CONTRAST_PRESSED,B as HOVER_ACCENT,i as HOVER_STYLES,S as HOVER_STYLES_BASE,l as INTERACTIVE_SIZES,H as LABEL_BASE,I as NON_INTERACTIVE,h as POPOVER_ANIMATION_IN,U as POPOVER_ANIMATION_OUT,s as PRESSED_STYLES,c as PRESSED_STYLES_BASE,b as REDUCED_MOTION,v as REQUIRED_INDICATOR,T as SUBTLE_INTERACTIONS,D as SUCCESS_MESSAGE_BASE,f as TEXT_SIZE_MEDIUM_SCALE,g as TEXT_SIZE_SMALL_SCALE,p as TOUCH_TARGET_MIN,M as TRANSITION_COLORS,G as TRANSITION_FAST,V 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":["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"]}
+{"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,0BAAA,CAKfC,CAAAA,CAAoB,8DAAA,CAQpBC,CAAAA,CAAsB,wJAMtBC,CAAAA,CAAsB,4FAAA,CAMtBC,EAAwB,+HAAA,CAMxBC,CAAAA,CAA6B,GAAGH,CAAmB,CAAA,CAAA,EAAIC,CAAmB,CAAA,CAAA,EAAIC,CAAqB,CAAA,CAAA,CAMnGE,EAAkB,kDAAA,CAWlBC,CAAAA,CAAuB,GAAGV,CAAY,CAAA,CAAA,EAAIC,CAAc,CAAA,CAAA,EAAIE,CAAY,CAAA,CAAA,EAAIE,CAAmB,CAAA,CAAA,EAAIC,CAAmB,IAAIC,CAAqB,CAAA,CAAA,CAQ/II,EAAsB,CAAA,EAAGX,CAAY,IAAIK,CAAmB,CAAA,CAAA,CAM5DO,CAAAA,CAAkB,6BC1FxB,IAAMC,CAAAA,CAAoB,CAC/B,2BAAA,CACA,qBAAA,CACA,kCACA,4BACF,CAAA,CAMaC,EAAqB,CAChC,4BAAA,CACA,sBAAA,CACA,kCAAA,CACA,6BACF,CAAA,CAMaC,EAAa,CACxB,oBAAA,CACA,eACA,0BACF,CAAA,CAKaC,EAAkB,CAC7B,oBAAA,CACA,0BAAA,CACA,uCACF,CAAA,CASaC,CAAAA,CAAoB,CAC/B,8BAAA,CACA,qBACF,EAKaC,CAAAA,CAAqB,CAChC,sCACA,4BAAA,CACA,oCACF,CAAA,CASaC,CAAAA,CAAwB,CACnC,EAAA,CAAI,UACJ,OAAA,CAAS,SAAA,CACT,GAAI,WACN,CAAA,CAKaC,EAAyB,CACpC,EAAA,CAAI,SAAA,CACJ,OAAA,CAAS,WAAA,CACT,EAAA,CAAI,SACN,CAAA,CASaC,CAAAA,CAAmB,CAC9B,cAAA,CACA,cACF,EAKaC,CAAAA,CAAoB,CAC/B,EAAA,CAAI,SAAA,CACJ,OAAA,CAAS,WAAA,CACT,GAAI,WACN,CAAA,CAKaC,EAAgB,CAC3B,EAAA,CAAI,MACJ,OAAA,CAAS,MAAA,CACT,EAAA,CAAI,MACN,CAAA,CASaC,CAAAA,CAAqB,CAChC,MAAA,CACA,cAAA,CACA,UACA,sCACF,CAAA,CAKaC,EAAuB,CAClC,MAAA,CACA,cAAA,CACA,SAAA,CACA,kCACF,CAAA,CAKaC,EAAmB,CAC9B,0BACF,EAKaC,CAAAA,CAAa,CACxB,cACA,kCACF,CAAA,CAKaC,CAAAA,CAAqB,6EAAA,CASrBC,CAAAA,CAAuB,CAClC,6BACA,2BAAA,CACA,4BACF,EAKaC,CAAAA,CAAwB,CACnC,6BACA,2BAAA,CACA,4BACF,EAkEO,IAAMC,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 * Modal content enter animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal content exit animation (fade + zoom)\n * Uses React Aria data-[entering]/data-[exiting] attributes\n */\nexport const MODAL_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal slide enter animation (fade + slide up)\n */\nexport const MODAL_SLIDE_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:slide-in-from-bottom-4',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\n/**\n * Modal slide exit animation (fade + slide down)\n */\nexport const MODAL_SLIDE_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:slide-out-to-bottom-4',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\n/**\n * Modal overlay enter/exit animation (fade only)\n */\nexport const MODAL_OVERLAY_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:duration-200',\n] as const;\n\nexport const MODAL_OVERLAY_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:duration-150',\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

@@ -97,6 +97,29 @@ export declare const POPOVER_ANIMATION_IN: readonly ["data-[entering]:animate-in
  * 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"];
+/**
+ * Modal content enter animation (fade + zoom)
+ * Uses React Aria data-[entering]/data-[exiting] attributes
+ */
+export declare const MODAL_ANIMATION_IN: readonly ["data-[entering]:animate-in", "data-[entering]:fade-in-0", "data-[entering]:zoom-in-95", "data-[entering]:duration-200", "data-[entering]:ease-out"];
+/**
+ * Modal content exit animation (fade + zoom)
+ * Uses React Aria data-[entering]/data-[exiting] attributes
+ */
+export declare const MODAL_ANIMATION_OUT: readonly ["data-[exiting]:animate-out", "data-[exiting]:fade-out-0", "data-[exiting]:zoom-out-95", "data-[exiting]:duration-150", "data-[exiting]:ease-in"];
+/**
+ * Modal slide enter animation (fade + slide up)
+ */
+export declare const MODAL_SLIDE_IN: readonly ["data-[entering]:animate-in", "data-[entering]:fade-in-0", "data-[entering]:slide-in-from-bottom-4", "data-[entering]:duration-200", "data-[entering]:ease-out"];
+/**
+ * Modal slide exit animation (fade + slide down)
+ */
+export declare const MODAL_SLIDE_OUT: readonly ["data-[exiting]:animate-out", "data-[exiting]:fade-out-0", "data-[exiting]:slide-out-to-bottom-4", "data-[exiting]:duration-150", "data-[exiting]:ease-in"];
+/**
+ * Modal overlay enter/exit animation (fade only)
+ */
+export declare const MODAL_OVERLAY_IN: readonly ["data-[entering]:animate-in", "data-[entering]:fade-in-0", "data-[entering]:duration-200"];
+export declare const MODAL_OVERLAY_OUT: readonly ["data-[exiting]:animate-out", "data-[exiting]:fade-out-0", "data-[exiting]:duration-150"];
 /**
  * Reduced motion support (WCAG 2.2)
  */

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,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"}
+{"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;;;GAGG;AACH,eAAO,MAAM,kBAAkB,gKAMrB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,mBAAmB,6JAMtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,cAAc,4KAMjB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe,uKAMlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,gBAAgB,sGAInB,CAAC;AAEX,eAAO,MAAM,iBAAiB,qGAIpB,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/tailwind-source.css

@@ -5,4 +5,5 @@
  * Usage in consuming app's CSS:
  *   @import "@tribepad/themis/tailwind-source.css";
  */
+@import "./styles/animations.css";
 @source "./elements/**/*.{js,mjs}";

package/dist/types/animation.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Props for components with optional animation support.
+ *
+ * All Themis components that use motion.dev animations extend this interface.
+ * The `animated` prop allows consumers to disable animation per-component,
+ * regardless of the user's OS reduced-motion preference.
+ */
+export interface AnimatedProps {
+    /**
+     * Enable/disable animation. Default: `true`.
+     *
+     * - `true` (default): Animation plays, respecting `prefers-reduced-motion`.
+     * - `false`: No animation, regardless of OS preference.
+     */
+    animated?: boolean;
+}
+/** Spring physics configuration for motion.dev animations. */
+export interface SpringConfig {
+    /** Spring stiffness (higher = snappier). */
+    stiffness: number;
+    /** Spring damping (higher = less oscillation). */
+    damping: number;
+}
+//# sourceMappingURL=animation.d.ts.map

package/dist/types/animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../src/types/animation.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,8DAA8D;AAC9D,MAAM,WAAW,YAAY;IAC3B,4CAA4C;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,OAAO,EAAE,MAAM,CAAC;CACjB"}

package/dist/types/index.d.ts

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

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

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

package/dist/types/index.js

@@ -0,0 +1,2 @@
+'use strict';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

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

package/dist/types/index.mjs

@@ -0,0 +1,2 @@
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/types/index.mjs.map

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

package/dist/utils/index.d.ts

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

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

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

package/dist/utils/index.js

@@ -1,2 +1,2 @@
-'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
+'use strict';var clsx=require('clsx'),tailwindMerge=require('tailwind-merge');function t(...e){return tailwindMerge.twMerge(clsx.clsx(e))}function l(e,r){return !(e===false||r)}exports.cn=t;exports.shouldAnimate=l;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/utils/shouldAnimate.ts"],"names":["cn","inputs","twMerge","clsx","shouldAnimate","animated","prefersReducedMotion"],"mappings":"8EAcO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAA8B,CAClD,OAAOC,qBAAAA,CAAQC,SAAAA,CAAKF,CAAM,CAAC,CAC7B,CCNO,SAASG,CAAAA,CACdC,CAAAA,CACAC,CAAAA,CACS,CAET,OADI,EAAAD,CAAAA,GAAa,KAAA,EACbC,CAAAA,CAEN","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","/**\n * Determines whether a component should animate.\n *\n * Returns `false` if:\n * - The `animated` prop is explicitly `false`\n * - The user prefers reduced motion\n *\n * @param animated - The component's `animated` prop value (default: `true`)\n * @param prefersReducedMotion - Whether the user prefers reduced motion\n */\nexport function shouldAnimate(\n  animated: boolean | undefined,\n  prefersReducedMotion: boolean,\n): boolean {\n  if (animated === false) return false;\n  if (prefersReducedMotion) return false;\n  return true;\n}\n"]}

package/dist/utils/index.mjs

@@ -1,2 +1,2 @@
-import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function o(...r){return twMerge(clsx(r))}export{o as cn};//# sourceMappingURL=index.mjs.map
+import {clsx}from'clsx';import {twMerge}from'tailwind-merge';function t(...e){return twMerge(clsx(e))}function l(e,r){return !(e===false||r)}export{t as cn,l as shouldAnimate};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/utils/index.mjs.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/utils/shouldAnimate.ts"],"names":["cn","inputs","twMerge","clsx","shouldAnimate","animated","prefersReducedMotion"],"mappings":"6DAcO,SAASA,CAAAA,CAAAA,GAAMC,CAAAA,CAA8B,CAClD,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCNO,SAASG,CAAAA,CACdC,CAAAA,CACAC,CAAAA,CACS,CAET,OADI,EAAAD,CAAAA,GAAa,KAAA,EACbC,CAAAA,CAEN","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","/**\n * Determines whether a component should animate.\n *\n * Returns `false` if:\n * - The `animated` prop is explicitly `false`\n * - The user prefers reduced motion\n *\n * @param animated - The component's `animated` prop value (default: `true`)\n * @param prefersReducedMotion - Whether the user prefers reduced motion\n */\nexport function shouldAnimate(\n  animated: boolean | undefined,\n  prefersReducedMotion: boolean,\n): boolean {\n  if (animated === false) return false;\n  if (prefersReducedMotion) return false;\n  return true;\n}\n"]}

package/dist/utils/shouldAnimate.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Determines whether a component should animate.
+ *
+ * Returns `false` if:
+ * - The `animated` prop is explicitly `false`
+ * - The user prefers reduced motion
+ *
+ * @param animated - The component's `animated` prop value (default: `true`)
+ * @param prefersReducedMotion - Whether the user prefers reduced motion
+ */
+export declare function shouldAnimate(animated: boolean | undefined, prefersReducedMotion: boolean): boolean;
+//# sourceMappingURL=shouldAnimate.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shouldAnimate.d.ts","sourceRoot":"","sources":["../../src/utils/shouldAnimate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,OAAO,GAAG,SAAS,EAC7B,oBAAoB,EAAE,OAAO,GAC5B,OAAO,CAIT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",
@@ -50,10 +50,31 @@
       }
     },
     "./styles/defaults.css": "./dist/styles/defaults.css",
+    "./styles/animations.css": "./dist/styles/animations.css",
     "./tailwind-source.css": {
       "style": "./dist/tailwind-source.css",
       "default": "./dist/tailwind-source.css"
     },
+    "./hooks": {
+      "import": {
+        "types": "./dist/hooks/index.d.ts",
+        "default": "./dist/hooks/index.mjs"
+      },
+      "require": {
+        "types": "./dist/hooks/index.d.ts",
+        "default": "./dist/hooks/index.js"
+      }
+    },
+    "./types": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/types/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/types/index.js"
+      }
+    },
     "./utils": {
       "import": {
         "types": "./dist/utils/index.d.ts",
@@ -110,7 +131,8 @@
     "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"
+    "zod": "^3.0.0 || ^4.0.0",
+    "motion": ">=11.0.0"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
@@ -121,6 +143,9 @@
     },
     "zod": {
       "optional": true
+    },
+    "motion": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -162,6 +187,7 @@
     "tsup": "^8.0.0",
     "tsx": "^4.0.0",
     "typescript": "^5.9.3",
+    "motion": "^12.35.0",
     "vitest": "^4.0.18",
     "zod": "^4.3.6"
   },
@@ -187,6 +213,12 @@
       "styles": [
         "dist/styles/index.d.ts"
       ],
+      "hooks": [
+        "dist/hooks/index.d.ts"
+      ],
+      "types": [
+        "dist/types/index.d.ts"
+      ],
       "utils": [
         "dist/utils/index.d.ts"
       ],