@tribepad/themis 1.6.3 → 1.6.5

package/dist/styles/animations.css

@@ -127,6 +127,15 @@
   --tw-exit-translate-y: 1rem;
 }
 
+/* Full-distance (drawer) — bottom sheet */
+@utility slide-in-from-bottom {
+  --tw-enter-translate-y: 100%;
+}
+
+@utility slide-out-to-bottom {
+  --tw-exit-translate-y: 100%;
+}
+
 /* =============================================================================
  * Slide Modifiers — Top
  * ============================================================================= */
@@ -139,6 +148,15 @@
   --tw-exit-translate-y: -0.5rem;
 }
 
+/* Full-distance (drawer) — top sheet */
+@utility slide-in-from-top {
+  --tw-enter-translate-y: -100%;
+}
+
+@utility slide-out-to-top {
+  --tw-exit-translate-y: -100%;
+}
+
 /* =============================================================================
  * Slide Modifiers — Left
  * ============================================================================= */
@@ -147,6 +165,11 @@
   --tw-enter-translate-x: -100%;
 }
 
+/* Full-distance (drawer) — left exit */
+@utility slide-out-to-left {
+  --tw-exit-translate-x: -100%;
+}
+
 @utility slide-in-from-left-2 {
   --tw-enter-translate-x: -0.5rem;
 }
@@ -159,6 +182,15 @@
  * Slide Modifiers — Right
  * ============================================================================= */
 
+/* Full-distance (drawer) — right */
+@utility slide-in-from-right {
+  --tw-enter-translate-x: 100%;
+}
+
+@utility slide-out-to-right {
+  --tw-exit-translate-x: 100%;
+}
+
 @utility slide-in-from-right-2 {
   --tw-enter-translate-x: 0.5rem;
 }

package/dist/styles/index.js

@@ -1,2 +1,2 @@
-'use strict';var n="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2",i="data-[pressed]:scale-[0.97]",c="data-[pressed]:transition-transform data-[pressed]:duration-100",E="",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",a="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",_=`${t} ${a} ${s}`,d="disabled:pointer-events-none disabled:opacity-50",T=`${n} ${i}  ${t} ${a} ${s}`,I=`${n} ${t}`,A="cursor-default select-none";var x=["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)]"],N=["focus:outline-none","focus:bg-[var(--accent)]","focus:text-[var(--accent-foreground)]"],R=["disabled:pointer-events-none","disabled:opacity-50"],g=["data-[disabled]:pointer-events-none","data-[disabled]:opacity-50","data-[disabled]:cursor-not-allowed"],p={sm:"text-xs",default:"text-sm",lg:"text-base"},f={sm:"text-sm",default:"text-base",lg:"text-lg"},l=["min-h-[44px]","min-w-[44px]"],L={sm:"h-9 w-9",default:"h-11 w-11",lg:"h-14 w-14"},e={sm:"h-9",default:"h-10",lg:"h-11"},C={sm:`${e.sm} px-2 text-xs`,default:`${e.default} px-3 text-sm`,lg:`${e.lg} px-4 text-base`},D="min-h-[44px] flex items-center",m=["flex","items-center","gap-1.5","text-[var(--destructive-background)]"],H=["flex","items-center","gap-1.5","text-[var(--success-background)]"],v=["text-[var(--menu-muted)]"],U=["font-medium","text-[var(--content-foreground)]"],h="after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]",b=["data-[entering]:animate-in","data-[entering]:fade-in-0","data-[entering]:zoom-in-95"],G=["data-[exiting]:animate-out","data-[exiting]:fade-out-0","data-[exiting]:zoom-out-95"];var M=["motion-reduce:transition-none","motion-reduce:animate-none"],B=["transition-colors","duration-200"],F=["transition-colors","duration-150"],V=["hover:bg-[var(--accent)]","hover:text-[var(--accent-foreground)]"];function P(...r){return r.flatMap(o=>Array.isArray(o)?[...o]:[o])}exports.DEFAULT_INTERACTIONS=T;exports.DESCRIPTION_BASE=v;exports.DISABLED_DATA_ATTR=g;exports.DISABLED_STANDARD=R;exports.DISABLED_STYLES=d;exports.ERROR_MESSAGE_BASE=m;exports.FIELD_HEIGHTS=e;exports.FIELD_INPUT_SIZES=C;exports.FIELD_TOUCH_TARGET=D;exports.FOCUS_HIGHLIGHT=N;exports.FOCUS_RING=O;exports.FOCUS_STYLES=n;exports.FOCUS_VISIBLE_RING=u;exports.FOCUS_WITHIN_RING=x;exports.HIGH_CONTRAST_FOCUS=t;exports.HIGH_CONTRAST_HOVER=a;exports.HIGH_CONTRAST_INTERACTIONS=_;exports.HIGH_CONTRAST_PRESSED=s;exports.HOVER_ACCENT=V;exports.HOVER_STYLES=E;exports.HOVER_STYLES_BASE=S;exports.INTERACTIVE_SIZES=L;exports.LABEL_BASE=U;exports.NON_INTERACTIVE=A;exports.POPOVER_ANIMATION_IN=b;exports.POPOVER_ANIMATION_OUT=G;exports.PRESSED_STYLES=i;exports.PRESSED_STYLES_BASE=c;exports.REDUCED_MOTION=M;exports.REQUIRED_INDICATOR=h;exports.SUBTLE_INTERACTIONS=I;exports.SUCCESS_MESSAGE_BASE=H;exports.TEXT_SIZE_MEDIUM_SCALE=f;exports.TEXT_SIZE_SMALL_SCALE=p;exports.TOUCH_TARGET_MIN=l;exports.TRANSITION_COLORS=B;exports.TRANSITION_FAST=F;exports.combineStyles=P;//# sourceMappingURL=index.js.map
+'use strict';var a="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2",s="data-[pressed]:scale-[0.97]",d="data-[pressed]:transition-transform data-[pressed]:duration-100",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",o="hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground",i="hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground",E=`${t} ${o} ${i}`,S="disabled:pointer-events-none disabled:opacity-50",T=`${a} ${s}  ${t} ${o} ${i}`,I=`${a} ${t}`,x="cursor-default select-none";var u=["focus-within:outline-none","focus-within:ring-2","focus-within:ring-[var(--ring)]","focus-within:ring-offset-2"],g=["focus-visible:outline-none","focus-visible:ring-2","focus-visible:ring-[var(--ring)]","focus-visible:ring-offset-2"],A=["focus:outline-none","focus:ring-2","focus:ring-[var(--ring)]"],O=["focus:outline-none","focus:bg-[var(--accent)]","focus:text-[var(--accent-foreground)]"],N=["disabled:pointer-events-none","disabled:opacity-50"],p=["data-[disabled]:pointer-events-none","data-[disabled]:opacity-50","data-[disabled]:cursor-not-allowed"],R={sm:"text-xs",default:"text-sm",lg:"text-base"},L={sm:"text-sm",default:"text-base",lg:"text-lg"},l=["min-h-[44px]","min-w-[44px]"],f={sm:"h-9 w-9",default:"h-11 w-11",lg:"h-14 w-14"},e={sm:"h-9",default:"h-10",lg:"h-11"},D={sm:`${e.sm} px-2 text-xs`,default:`${e.default} px-3 text-sm`,lg:`${e.lg} px-4 text-base`},m="min-h-[44px] flex items-center",C=["flex","items-center","gap-1.5","text-[var(--destructive-background)]"],H=["flex","items-center","gap-1.5","text-[var(--success-background)]"],U=["text-[var(--menu-muted)]"],M=["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"],b=["data-[exiting]:animate-out","data-[exiting]:fade-out-0","data-[exiting]:zoom-out-95"];var G=["motion-reduce:transition-none","motion-reduce:animate-none"],B=["transition-colors","duration-200"],F=["transition-colors","duration-150"],V=["hover:bg-[var(--accent)]","hover:text-[var(--accent-foreground)]"];function P(...r){return r.flatMap(n=>Array.isArray(n)?[...n]:[n])}exports.DEFAULT_INTERACTIONS=T;exports.DESCRIPTION_BASE=U;exports.DISABLED_DATA_ATTR=p;exports.DISABLED_STANDARD=N;exports.DISABLED_STYLES=S;exports.ERROR_MESSAGE_BASE=C;exports.FIELD_HEIGHTS=e;exports.FIELD_INPUT_SIZES=D;exports.FIELD_TOUCH_TARGET=m;exports.FOCUS_HIGHLIGHT=O;exports.FOCUS_RING=A;exports.FOCUS_STYLES=a;exports.FOCUS_VISIBLE_RING=g;exports.FOCUS_WITHIN_RING=u;exports.HIGH_CONTRAST_FOCUS=t;exports.HIGH_CONTRAST_HOVER=o;exports.HIGH_CONTRAST_INTERACTIONS=E;exports.HIGH_CONTRAST_PRESSED=i;exports.HOVER_ACCENT=V;exports.HOVER_STYLES=c;exports.HOVER_STYLES_BASE=_;exports.INTERACTIVE_SIZES=f;exports.LABEL_BASE=M;exports.NON_INTERACTIVE=x;exports.POPOVER_ANIMATION_IN=h;exports.POPOVER_ANIMATION_OUT=b;exports.PRESSED_STYLES=s;exports.PRESSED_STYLES_BASE=d;exports.REDUCED_MOTION=G;exports.REQUIRED_INDICATOR=v;exports.SUBTLE_INTERACTIONS=I;exports.SUCCESS_MESSAGE_BASE=H;exports.TEXT_SIZE_MEDIUM_SCALE=L;exports.TEXT_SIZE_SMALL_SCALE=R;exports.TOUCH_TARGET_MIN=l;exports.TRANSITION_COLORS=B;exports.TRANSITION_FAST=F;exports.combineStyles=P;//# 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","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","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":"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","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 = \"\";\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-10', // 40px\n  lg: 'h-11',     // 44px\n} as const;\n\n/**\n * Layer 2: Visual sizing for form field inputs (height + padding + font).\n * Use on the <input>, <select>, or trigger element itself.\n *\n * Components may append additional classes (e.g. gap-* for segmented fields, py-* for text inputs).\n */\nexport const FIELD_INPUT_SIZES = {\n  sm: `${FIELD_HEIGHTS.sm} px-2 text-xs`,\n  default: `${FIELD_HEIGHTS.default} px-3 text-sm`,\n  lg: `${FIELD_HEIGHTS.lg} px-4 text-base`,\n} as const;\n\n/**\n * Layer 1: Invisible touch target wrapper for form fields.\n * Apply to a <label> (or wrapper div) around the input element.\n * The <label> natively routes clicks/taps to the contained input\n * without JavaScript — achieving a 44px touch target while the\n * input stays at its visual height (h-9/h-10/h-11).\n */\nexport const FIELD_TOUCH_TARGET = 'min-h-[44px] flex items-center' 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"]}
+{"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","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","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":"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","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 = \"\";\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-10', // 40px\n  lg: 'h-11',     // 44px\n} as const;\n\n/**\n * Layer 2: Visual sizing for form field inputs (height + padding + font).\n * Use on the <input>, <select>, or trigger element itself.\n *\n * Components may append additional classes (e.g. gap-* for segmented fields, py-* for text inputs).\n */\nexport const FIELD_INPUT_SIZES = {\n  sm: `${FIELD_HEIGHTS.sm} px-2 text-xs`,\n  default: `${FIELD_HEIGHTS.default} px-3 text-sm`,\n  lg: `${FIELD_HEIGHTS.lg} px-4 text-base`,\n} as const;\n\n/**\n * Layer 1: Invisible touch target wrapper for form fields.\n * Apply to a <label> (or wrapper div) around the input element.\n * The <label> natively routes clicks/taps to the contained input\n * without JavaScript — achieving a 44px touch target while the\n * input stays at its visual height (h-9/h-10/h-11).\n */\nexport const FIELD_TOUCH_TARGET = 'min-h-[44px] flex items-center' 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 * Directional slide animations for edge-anchored drawers (Modal `position` variant).\n *\n * Unitless `slide-in-from-*` / `slide-out-to-*` translate the full extent of the\n * element (100%), so the drawer slides all the way in from / out to its anchored\n * edge — distinct from `MODAL_SLIDE_*` above, which is the small 1rem nudge used by\n * the centred `slide` animation. No `fade` is paired here: a drawer slides, it\n * does not fade. Honour `prefers-reduced-motion` via REDUCED_MOTION on the element.\n */\nexport const MODAL_SLIDE_IN_LEFT = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-left',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_LEFT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-left',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_RIGHT = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-right',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_RIGHT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-right',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_TOP = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-top',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_TOP = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-top',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_BOTTOM = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-bottom',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_BOTTOM = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-bottom',\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 n="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2",i="data-[pressed]:scale-[0.97]",c="data-[pressed]:transition-transform data-[pressed]:duration-100",E="",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",a="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",_=`${t} ${a} ${s}`,d="disabled:pointer-events-none disabled:opacity-50",T=`${n} ${i}  ${t} ${a} ${s}`,I=`${n} ${t}`,A="cursor-default select-none";var x=["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)]"],N=["focus:outline-none","focus:bg-[var(--accent)]","focus:text-[var(--accent-foreground)]"],R=["disabled:pointer-events-none","disabled:opacity-50"],g=["data-[disabled]:pointer-events-none","data-[disabled]:opacity-50","data-[disabled]:cursor-not-allowed"],p={sm:"text-xs",default:"text-sm",lg:"text-base"},f={sm:"text-sm",default:"text-base",lg:"text-lg"},l=["min-h-[44px]","min-w-[44px]"],L={sm:"h-9 w-9",default:"h-11 w-11",lg:"h-14 w-14"},e={sm:"h-9",default:"h-10",lg:"h-11"},C={sm:`${e.sm} px-2 text-xs`,default:`${e.default} px-3 text-sm`,lg:`${e.lg} px-4 text-base`},D="min-h-[44px] flex items-center",m=["flex","items-center","gap-1.5","text-[var(--destructive-background)]"],H=["flex","items-center","gap-1.5","text-[var(--success-background)]"],v=["text-[var(--menu-muted)]"],U=["font-medium","text-[var(--content-foreground)]"],h="after:content-['*'] after:ml-0.5 after:text-[var(--destructive-background)]",b=["data-[entering]:animate-in","data-[entering]:fade-in-0","data-[entering]:zoom-in-95"],G=["data-[exiting]:animate-out","data-[exiting]:fade-out-0","data-[exiting]:zoom-out-95"];var M=["motion-reduce:transition-none","motion-reduce:animate-none"],B=["transition-colors","duration-200"],F=["transition-colors","duration-150"],V=["hover:bg-[var(--accent)]","hover:text-[var(--accent-foreground)]"];function P(...r){return r.flatMap(o=>Array.isArray(o)?[...o]:[o])}export{T as DEFAULT_INTERACTIONS,v as DESCRIPTION_BASE,g as DISABLED_DATA_ATTR,R as DISABLED_STANDARD,d as DISABLED_STYLES,m as ERROR_MESSAGE_BASE,e as FIELD_HEIGHTS,C as FIELD_INPUT_SIZES,D as FIELD_TOUCH_TARGET,N as FOCUS_HIGHLIGHT,O as FOCUS_RING,n as FOCUS_STYLES,u as FOCUS_VISIBLE_RING,x as FOCUS_WITHIN_RING,t as HIGH_CONTRAST_FOCUS,a as HIGH_CONTRAST_HOVER,_ as HIGH_CONTRAST_INTERACTIONS,s as HIGH_CONTRAST_PRESSED,V as HOVER_ACCENT,E as HOVER_STYLES,S as HOVER_STYLES_BASE,L as INTERACTIVE_SIZES,U as LABEL_BASE,A as NON_INTERACTIVE,b as POPOVER_ANIMATION_IN,G as POPOVER_ANIMATION_OUT,i as PRESSED_STYLES,c as PRESSED_STYLES_BASE,M as REDUCED_MOTION,h as REQUIRED_INDICATOR,I as SUBTLE_INTERACTIONS,H as SUCCESS_MESSAGE_BASE,f as TEXT_SIZE_MEDIUM_SCALE,p as TEXT_SIZE_SMALL_SCALE,l as TOUCH_TARGET_MIN,B as TRANSITION_COLORS,F as TRANSITION_FAST,P as combineStyles};//# sourceMappingURL=index.mjs.map
+var a="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2",s="data-[pressed]:scale-[0.97]",d="data-[pressed]:transition-transform data-[pressed]:duration-100",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",o="hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground",i="hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground",E=`${t} ${o} ${i}`,S="disabled:pointer-events-none disabled:opacity-50",T=`${a} ${s}  ${t} ${o} ${i}`,I=`${a} ${t}`,x="cursor-default select-none";var u=["focus-within:outline-none","focus-within:ring-2","focus-within:ring-[var(--ring)]","focus-within:ring-offset-2"],g=["focus-visible:outline-none","focus-visible:ring-2","focus-visible:ring-[var(--ring)]","focus-visible:ring-offset-2"],A=["focus:outline-none","focus:ring-2","focus:ring-[var(--ring)]"],O=["focus:outline-none","focus:bg-[var(--accent)]","focus:text-[var(--accent-foreground)]"],N=["disabled:pointer-events-none","disabled:opacity-50"],p=["data-[disabled]:pointer-events-none","data-[disabled]:opacity-50","data-[disabled]:cursor-not-allowed"],R={sm:"text-xs",default:"text-sm",lg:"text-base"},L={sm:"text-sm",default:"text-base",lg:"text-lg"},l=["min-h-[44px]","min-w-[44px]"],f={sm:"h-9 w-9",default:"h-11 w-11",lg:"h-14 w-14"},e={sm:"h-9",default:"h-10",lg:"h-11"},D={sm:`${e.sm} px-2 text-xs`,default:`${e.default} px-3 text-sm`,lg:`${e.lg} px-4 text-base`},m="min-h-[44px] flex items-center",C=["flex","items-center","gap-1.5","text-[var(--destructive-background)]"],H=["flex","items-center","gap-1.5","text-[var(--success-background)]"],U=["text-[var(--menu-muted)]"],M=["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"],b=["data-[exiting]:animate-out","data-[exiting]:fade-out-0","data-[exiting]:zoom-out-95"];var G=["motion-reduce:transition-none","motion-reduce:animate-none"],B=["transition-colors","duration-200"],F=["transition-colors","duration-150"],V=["hover:bg-[var(--accent)]","hover:text-[var(--accent-foreground)]"];function P(...r){return r.flatMap(n=>Array.isArray(n)?[...n]:[n])}export{T as DEFAULT_INTERACTIONS,U as DESCRIPTION_BASE,p as DISABLED_DATA_ATTR,N as DISABLED_STANDARD,S as DISABLED_STYLES,C as ERROR_MESSAGE_BASE,e as FIELD_HEIGHTS,D as FIELD_INPUT_SIZES,m as FIELD_TOUCH_TARGET,O as FOCUS_HIGHLIGHT,A as FOCUS_RING,a as FOCUS_STYLES,g as FOCUS_VISIBLE_RING,u as FOCUS_WITHIN_RING,t as HIGH_CONTRAST_FOCUS,o as HIGH_CONTRAST_HOVER,E as HIGH_CONTRAST_INTERACTIONS,i as HIGH_CONTRAST_PRESSED,V as HOVER_ACCENT,c as HOVER_STYLES,_ as HOVER_STYLES_BASE,f as INTERACTIVE_SIZES,M as LABEL_BASE,x as NON_INTERACTIVE,h as POPOVER_ANIMATION_IN,b as POPOVER_ANIMATION_OUT,s as PRESSED_STYLES,d as PRESSED_STYLES_BASE,G as REDUCED_MOTION,v as REQUIRED_INDICATOR,I as SUBTLE_INTERACTIONS,H as SUCCESS_MESSAGE_BASE,L as TEXT_SIZE_MEDIUM_SCALE,R as TEXT_SIZE_SMALL_SCALE,l as TOUCH_TARGET_MIN,B as TRANSITION_COLORS,F as TRANSITION_FAST,P 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","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","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":"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","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 = \"\";\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-10', // 40px\n  lg: 'h-11',     // 44px\n} as const;\n\n/**\n * Layer 2: Visual sizing for form field inputs (height + padding + font).\n * Use on the <input>, <select>, or trigger element itself.\n *\n * Components may append additional classes (e.g. gap-* for segmented fields, py-* for text inputs).\n */\nexport const FIELD_INPUT_SIZES = {\n  sm: `${FIELD_HEIGHTS.sm} px-2 text-xs`,\n  default: `${FIELD_HEIGHTS.default} px-3 text-sm`,\n  lg: `${FIELD_HEIGHTS.lg} px-4 text-base`,\n} as const;\n\n/**\n * Layer 1: Invisible touch target wrapper for form fields.\n * Apply to a <label> (or wrapper div) around the input element.\n * The <label> natively routes clicks/taps to the contained input\n * without JavaScript — achieving a 44px touch target while the\n * input stays at its visual height (h-9/h-10/h-11).\n */\nexport const FIELD_TOUCH_TARGET = 'min-h-[44px] flex items-center' 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"]}
+{"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","FIELD_INPUT_SIZES","FIELD_TOUCH_TARGET","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":"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","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 = \"\";\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-10', // 40px\n  lg: 'h-11',     // 44px\n} as const;\n\n/**\n * Layer 2: Visual sizing for form field inputs (height + padding + font).\n * Use on the <input>, <select>, or trigger element itself.\n *\n * Components may append additional classes (e.g. gap-* for segmented fields, py-* for text inputs).\n */\nexport const FIELD_INPUT_SIZES = {\n  sm: `${FIELD_HEIGHTS.sm} px-2 text-xs`,\n  default: `${FIELD_HEIGHTS.default} px-3 text-sm`,\n  lg: `${FIELD_HEIGHTS.lg} px-4 text-base`,\n} as const;\n\n/**\n * Layer 1: Invisible touch target wrapper for form fields.\n * Apply to a <label> (or wrapper div) around the input element.\n * The <label> natively routes clicks/taps to the contained input\n * without JavaScript — achieving a 44px touch target while the\n * input stays at its visual height (h-9/h-10/h-11).\n */\nexport const FIELD_TOUCH_TARGET = 'min-h-[44px] flex items-center' 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 * Directional slide animations for edge-anchored drawers (Modal `position` variant).\n *\n * Unitless `slide-in-from-*` / `slide-out-to-*` translate the full extent of the\n * element (100%), so the drawer slides all the way in from / out to its anchored\n * edge — distinct from `MODAL_SLIDE_*` above, which is the small 1rem nudge used by\n * the centred `slide` animation. No `fade` is paired here: a drawer slides, it\n * does not fade. Honour `prefers-reduced-motion` via REDUCED_MOTION on the element.\n */\nexport const MODAL_SLIDE_IN_LEFT = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-left',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_LEFT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-left',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_RIGHT = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-right',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_RIGHT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-right',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_TOP = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-top',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_TOP = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-top',\n  'data-[exiting]:duration-150',\n  'data-[exiting]:ease-in',\n] as const;\n\nexport const MODAL_SLIDE_IN_BOTTOM = [\n  'data-[entering]:animate-in',\n  'data-[entering]:slide-in-from-bottom',\n  'data-[entering]:duration-200',\n  'data-[entering]:ease-out',\n] as const;\n\nexport const MODAL_SLIDE_OUT_BOTTOM = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:slide-out-to-bottom',\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

@@ -134,6 +134,23 @@ export declare const MODAL_SLIDE_IN: readonly ["data-[entering]:animate-in", "da
  * 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"];
+/**
+ * Directional slide animations for edge-anchored drawers (Modal `position` variant).
+ *
+ * Unitless `slide-in-from-*` / `slide-out-to-*` translate the full extent of the
+ * element (100%), so the drawer slides all the way in from / out to its anchored
+ * edge — distinct from `MODAL_SLIDE_*` above, which is the small 1rem nudge used by
+ * the centred `slide` animation. No `fade` is paired here: a drawer slides, it
+ * does not fade. Honour `prefers-reduced-motion` via REDUCED_MOTION on the element.
+ */
+export declare const MODAL_SLIDE_IN_LEFT: readonly ["data-[entering]:animate-in", "data-[entering]:slide-in-from-left", "data-[entering]:duration-200", "data-[entering]:ease-out"];
+export declare const MODAL_SLIDE_OUT_LEFT: readonly ["data-[exiting]:animate-out", "data-[exiting]:slide-out-to-left", "data-[exiting]:duration-150", "data-[exiting]:ease-in"];
+export declare const MODAL_SLIDE_IN_RIGHT: readonly ["data-[entering]:animate-in", "data-[entering]:slide-in-from-right", "data-[entering]:duration-200", "data-[entering]:ease-out"];
+export declare const MODAL_SLIDE_OUT_RIGHT: readonly ["data-[exiting]:animate-out", "data-[exiting]:slide-out-to-right", "data-[exiting]:duration-150", "data-[exiting]:ease-in"];
+export declare const MODAL_SLIDE_IN_TOP: readonly ["data-[entering]:animate-in", "data-[entering]:slide-in-from-top", "data-[entering]:duration-200", "data-[entering]:ease-out"];
+export declare const MODAL_SLIDE_OUT_TOP: readonly ["data-[exiting]:animate-out", "data-[exiting]:slide-out-to-top", "data-[exiting]:duration-150", "data-[exiting]:ease-in"];
+export declare const MODAL_SLIDE_IN_BOTTOM: readonly ["data-[entering]:animate-in", "data-[entering]:slide-in-from-bottom", "data-[entering]:duration-200", "data-[entering]:ease-out"];
+export declare const MODAL_SLIDE_OUT_BOTTOM: readonly ["data-[exiting]:animate-out", "data-[exiting]:slide-out-to-bottom", "data-[exiting]:duration-150", "data-[exiting]:ease-in"];
 /**
  * Modal overlay enter/exit animation (fade only)
  */

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;AAEX;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAG,gCAAyC,CAAC;AAM5E;;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"}
+{"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;AAEX;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAG,gCAAyC,CAAC;AAM5E;;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;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,2IAKtB,CAAC;AAEX,eAAO,MAAM,oBAAoB,sIAKvB,CAAC;AAEX,eAAO,MAAM,oBAAoB,4IAKvB,CAAC;AAEX,eAAO,MAAM,qBAAqB,uIAKxB,CAAC;AAEX,eAAO,MAAM,kBAAkB,0IAKrB,CAAC;AAEX,eAAO,MAAM,mBAAmB,qIAKtB,CAAC;AAEX,eAAO,MAAM,qBAAqB,6IAKxB,CAAC;AAEX,eAAO,MAAM,sBAAsB,wIAKzB,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",

package/src/elements/Modal/Modal.stories.tsx

@@ -635,3 +635,109 @@ export const AnimationVariants: Story = {
     </div>
   ),
 };
+
+/**
+ * Side Drawer
+ *
+ * `position` turns the modal into an edge-anchored drawer that slides in from the
+ * chosen side: `left` / `right` are full-height (width from `size`), `top` /
+ * `bottom` are full-width (height from `size`). Below `mobileBreakpoint` (default
+ * 768px) every drawer collapses to a bottom sheet. Resize the preview to see it.
+ */
+export const SideDrawer: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => (
+    <div className="flex flex-wrap gap-3 p-6">
+      {(['left', 'right', 'top', 'bottom'] as const).map((position) => (
+        <Modal key={position}>
+          <Modal.Trigger>
+            <Button variant="outline">Open {position}</Button>
+          </Modal.Trigger>
+          <Modal.Content position={position} size="md">
+            <Modal.Header>
+              <Modal.Title>{position} drawer</Modal.Title>
+              <Modal.Description>
+                Slides in from the {position}. On a narrow viewport it becomes a
+                bottom sheet.
+              </Modal.Description>
+            </Modal.Header>
+            <Modal.Footer>
+              <Modal.Close>
+                <Button variant="outline">Close</Button>
+              </Modal.Close>
+            </Modal.Footer>
+          </Modal.Content>
+        </Modal>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Side Drawer — Sizes
+ *
+ * `size` sets the drawer's cross-axis dimension: width for `left`/`right`
+ * (`sm` 300 · `md` 400 · `lg` 500 · `xl` 600 · `full` full-screen) and height for
+ * `top`/`bottom` (`sm` 200 · `md` 320 · `lg` 440 · `xl` 560 · `full` full-screen).
+ */
+export const SideDrawerSizes: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => {
+    const sizes = ['sm', 'md', 'lg', 'xl', 'full'] as const;
+    return (
+      <div className="flex flex-col gap-6 p-6">
+        <div className="flex flex-col gap-2">
+          <p className="text-sm font-semibold text-[var(--content-foreground)]">
+            Right drawer — width from size
+          </p>
+          <div className="flex flex-wrap gap-3">
+            {sizes.map((size) => (
+              <Modal key={size}>
+                <Modal.Trigger>
+                  <Button variant="outline">right · {size}</Button>
+                </Modal.Trigger>
+                <Modal.Content position="right" size={size}>
+                  <Modal.Header>
+                    <Modal.Title>Right drawer ({size})</Modal.Title>
+                    <Modal.Description>Width tracks the size variant.</Modal.Description>
+                  </Modal.Header>
+                  <Modal.Footer>
+                    <Modal.Close>
+                      <Button variant="outline">Close</Button>
+                    </Modal.Close>
+                  </Modal.Footer>
+                </Modal.Content>
+              </Modal>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <p className="text-sm font-semibold text-[var(--content-foreground)]">
+            Bottom sheet — height from size
+          </p>
+          <div className="flex flex-wrap gap-3">
+            {sizes.map((size) => (
+              <Modal key={size}>
+                <Modal.Trigger>
+                  <Button variant="outline">bottom · {size}</Button>
+                </Modal.Trigger>
+                <Modal.Content position="bottom" size={size}>
+                  <Modal.Header>
+                    <Modal.Title>Bottom sheet ({size})</Modal.Title>
+                    <Modal.Description>Height tracks the size variant.</Modal.Description>
+                  </Modal.Header>
+                  <Modal.Footer>
+                    <Modal.Close>
+                      <Button variant="outline">Close</Button>
+                    </Modal.Close>
+                  </Modal.Footer>
+                </Modal.Content>
+              </Modal>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  },
+};