@tribepad/themis 1.0.2 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/elements/Checkbox/index.js +1 -1
- package/dist/elements/Checkbox/index.js.map +1 -1
- package/dist/elements/Checkbox/index.mjs +1 -1
- package/dist/elements/Checkbox/index.mjs.map +1 -1
- package/dist/elements/CheckboxGroup/index.js +1 -1
- package/dist/elements/CheckboxGroup/index.js.map +1 -1
- package/dist/elements/CheckboxGroup/index.mjs +1 -1
- package/dist/elements/CheckboxGroup/index.mjs.map +1 -1
- package/dist/elements/DatePicker/index.js +1 -1
- package/dist/elements/DatePicker/index.js.map +1 -1
- package/dist/elements/DatePicker/index.mjs +1 -1
- package/dist/elements/DatePicker/index.mjs.map +1 -1
- package/dist/elements/FileField/index.js +1 -1
- package/dist/elements/FileField/index.js.map +1 -1
- package/dist/elements/FileField/index.mjs +1 -1
- package/dist/elements/FileField/index.mjs.map +1 -1
- package/dist/elements/NumberField/NumberField.variants.d.ts +1 -1
- package/dist/elements/NumberField/index.js +1 -1
- package/dist/elements/NumberField/index.js.map +1 -1
- package/dist/elements/NumberField/index.mjs +1 -1
- package/dist/elements/NumberField/index.mjs.map +1 -1
- package/dist/elements/OTPInput/index.js +1 -1
- package/dist/elements/OTPInput/index.js.map +1 -1
- package/dist/elements/OTPInput/index.mjs +1 -1
- package/dist/elements/OTPInput/index.mjs.map +1 -1
- package/dist/elements/Progress/index.js +1 -1
- package/dist/elements/Progress/index.js.map +1 -1
- package/dist/elements/Progress/index.mjs +1 -1
- package/dist/elements/Progress/index.mjs.map +1 -1
- package/dist/elements/RadioGroup/index.js +1 -1
- package/dist/elements/RadioGroup/index.js.map +1 -1
- package/dist/elements/RadioGroup/index.mjs +1 -1
- package/dist/elements/RadioGroup/index.mjs.map +1 -1
- package/dist/elements/Resizable/index.js +1 -1
- package/dist/elements/Resizable/index.js.map +1 -1
- package/dist/elements/Resizable/index.mjs +1 -1
- package/dist/elements/Resizable/index.mjs.map +1 -1
- package/dist/elements/Select/index.js +1 -1
- package/dist/elements/Select/index.js.map +1 -1
- package/dist/elements/Select/index.mjs +1 -1
- package/dist/elements/Select/index.mjs.map +1 -1
- package/dist/elements/Switch/index.js +1 -1
- package/dist/elements/Switch/index.js.map +1 -1
- package/dist/elements/Switch/index.mjs +1 -1
- package/dist/elements/Switch/index.mjs.map +1 -1
- package/dist/elements/Table/index.js +1 -1
- package/dist/elements/Table/index.js.map +1 -1
- package/dist/elements/Table/index.mjs +1 -1
- package/dist/elements/Table/index.mjs.map +1 -1
- package/dist/elements/Tabs/Tabs.d.ts +5 -3
- package/dist/elements/Tabs/Tabs.d.ts.map +1 -1
- package/dist/elements/Tabs/Tabs.types.d.ts +15 -0
- package/dist/elements/Tabs/Tabs.types.d.ts.map +1 -1
- package/dist/elements/Tabs/index.js +1 -1
- package/dist/elements/Tabs/index.js.map +1 -1
- package/dist/elements/Tabs/index.mjs +1 -1
- package/dist/elements/Tabs/index.mjs.map +1 -1
- package/dist/elements/TimeField/index.js +1 -1
- package/dist/elements/TimeField/index.js.map +1 -1
- package/dist/elements/TimeField/index.mjs +1 -1
- package/dist/elements/TimeField/index.mjs.map +1 -1
- package/dist/elements/index.js +1 -1
- package/dist/elements/index.js.map +1 -1
- package/dist/elements/index.mjs +1 -1
- package/dist/elements/index.mjs.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/dist/styles/index.js +1 -1
- package/dist/styles/index.js.map +1 -1
- package/dist/styles/index.mjs +1 -1
- package/dist/styles/index.mjs.map +1 -1
- package/dist/styles/shared-variants.d.ts +3 -3
- package/dist/styles/shared-variants.d.ts.map +1 -1
- package/dist/tailwind-source.css +8 -0
- package/package.json +7 -6
- package/src/elements/AlertDialog/AlertDialog.stories.tsx +1 -1
- package/src/elements/CheckboxGroup/CheckboxGroup.stories.tsx +3 -3
- package/src/elements/Combobox/Combobox.stories.tsx +1 -1
- package/src/elements/FileField/FileField.stories.tsx +1 -1
- package/src/elements/Progress/Progress.stories.tsx +6 -1
- package/src/elements/RadioGroup/RadioGroup.stories.tsx +2 -2
- package/src/elements/Tabs/Tabs.stories.tsx +45 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/interaction-states.ts","../../../src/elements/Switch/Switch.tsx","../../../src/schemas/BaseComponentProps.ts","../../../src/elements/Switch/Switch.types.ts"],"names":["cn","inputs","twMerge","clsx","FOCUS_STYLES","PRESSED_STYLES","HOVER_STYLES","HIGH_CONTRAST_FOCUS","HIGH_CONTRAST_HOVER","HIGH_CONTRAST_PRESSED","DEFAULT_INTERACTIONS","switchOuterVariants","cva","switchTrackVariants","switchThumbVariants","Switch","memo","forwardRef","className","variant","size","label","description","isDisabled","isReadOnly","props","ref","jsx","AriaSwitch","_classNameProps","renderProps","jsxs","Fragment","BaseComponentPropsSchema","z","SwitchPropsSchema"],"mappings":"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","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 * 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","\"use client\";\n\n/**\n * Switch Component\n * Accessible toggle switch with React Aria primitives and CVA styling\n *\n * @see React Aria Switch: https://react-spectrum.adobe.com/react-aria/Switch.html\n * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch\n * @see spec.md (WCAG 2.2 AAA - 7:1 contrast ratio, 44x44px touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo } from 'react';\nimport {\n Switch as AriaSwitch,\n type SwitchProps as AriaSwitchProps,\n} from 'react-aria-components';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { DEFAULT_INTERACTIONS } from '../../styles/interaction-states';\n\n/**\n * Layer 1: Transparent outer touch target (44x44px minimum)\n * This layer handles the WCAG 2.2 AAA touch target requirement\n * Always invisible, centers the visual switch inside\n */\nconst switchOuterVariants = cva(\n // Base styles - WCAG 2.2 AAA: 44x44px minimum touch target\n \"inline-flex shrink-0 cursor-pointer items-center justify-center min-h-[44px] min-w-[44px] disabled:cursor-not-allowed disabled:opacity-50 data-[readonly]:cursor-default\",\n {\n variants: {},\n defaultVariants: {},\n }\n);\n\n/**\n * Layer 2: Visual switch track/background (adjustable size)\n * This layer provides the visual appearance and size flexibility\n * Background color changes based on variant and selection state\n */\nconst switchTrackVariants = cva(\n // Base styles - visual track with transitions and focus states\n \"relative inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n {\n variants: {\n variant: {\n // Default variant: Uses primary color when selected\n default:\n \"bg-[var(--input)] data-[selected]:bg-[var(--primary)]\",\n // Destructive variant: Uses destructive/error color when selected\n destructive:\n \"bg-[var(--input)] data-[selected]:bg-[var(--destructive)]\",\n },\n size: {\n // Small: h-5 w-9 (visual track size)\n sm: \"h-5 w-9\",\n // Default: h-6 w-11\n default: \"h-6 w-11\",\n // Large: h-7 w-14\n lg: \"h-7 w-14\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n/**\n * Layer 3: Switch thumb (sliding circle)\n * Inner visual element that slides horizontally when switch is selected\n * Positioned absolutely within the track (Layer 2)\n */\nconst switchThumbVariants = cva(\n // Base styles: rounded circle with shadow, translates when selected\n \"pointer-events-none absolute left-0.5 rounded-full bg-[var(--content-background)] shadow-lg ring-0 transition-transform data-[selected]:translate-x-full\",\n {\n variants: {\n size: {\n // Thumb is slightly smaller than track height for proper padding\n sm: \"h-4 w-4\",\n default: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n);\n\nexport interface SwitchProps\n extends Omit<AriaSwitchProps, 'className' | 'children'>,\n VariantProps<typeof switchTrackVariants> {\n variant?: 'default' | 'destructive';\n size?: 'sm' | 'default' | 'lg';\n label?: string;\n description?: string;\n className?: string;\n}\n\n/**\n * Switch Component\n * Fully accessible toggle switch with React Aria and themed styling\n */\nconst Switch = memo(forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n className,\n variant,\n size,\n label,\n description,\n isDisabled,\n isReadOnly,\n ...props\n },\n ref\n ) => {\n return (\n <AriaSwitch\n ref={ref}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n className={(_classNameProps) =>\n cn(\n \"group inline-flex items-center gap-2\",\n isDisabled && \"cursor-not-allowed opacity-50\",\n className\n )\n }\n {...props}\n >\n {(renderProps) => (\n <>\n {/* Layer 1: Transparent outer touch target (44x44px WCAG compliant) */}\n <div\n className={cn(switchOuterVariants())}\n data-selected={renderProps.isSelected || undefined}\n data-readonly={isReadOnly || undefined}\n >\n {/* Layer 2: Visual switch track (adjustable size with variants) */}\n <div\n className={cn(\n switchTrackVariants({ variant, size }),\n DEFAULT_INTERACTIONS\n )}\n data-selected={renderProps.isSelected || undefined}\n >\n {/* Layer 3: Thumb (sliding circle, absolutely positioned) */}\n <div\n className={cn(switchThumbVariants({ size }))}\n data-selected={renderProps.isSelected || undefined}\n />\n </div>\n </div>\n\n {/* Optional label and description */}\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <span className=\"text-sm font-medium text-[var(--content-foreground)]\">\n {label}\n </span>\n )}\n {description && (\n <span className=\"text-xs text-[var(--menu-muted)]\">\n {description}\n </span>\n )}\n </div>\n )}\n </>\n )}\n </AriaSwitch>\n );\n }\n));\n\nSwitch.displayName = \"Switch\";\n\nexport { Switch, switchOuterVariants, switchTrackVariants, switchThumbVariants };\n","import { z } from 'zod';\n\n/**\n * Base props schema for all Themis components\n * Ensures consistent accessibility and styling APIs across the library\n *\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements)\n * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AA minimum)\n */\nexport const BaseComponentPropsSchema = z.object({\n // Styling\n className: z.string().optional(),\n\n // React\n children: z.any().optional(), // ReactNode not directly supported by Zod\n id: z.string().optional(),\n\n // Accessibility (WCAG 2.2 AA requirements)\n 'aria-label': z.string().optional(),\n 'aria-labelledby': z.string().optional(),\n 'aria-describedby': z.string().optional(),\n 'aria-live': z.enum(['off', 'polite', 'assertive']).optional(),\n 'aria-hidden': z.boolean().optional(),\n\n // Testing & Development\n 'data-testid': z.string().optional(),\n});\n\nexport type BaseComponentProps = z.infer<typeof BaseComponentPropsSchema>;\n","import { z } from 'zod';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\nimport type { SwitchProps as AriaSwitchProps } from 'react-aria-components';\n\n/**\n * Switch props schema extending BaseComponentProps\n *\n * @see React Aria Switch: https://react-spectrum.adobe.com/react-aria/Switch.html\n * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch\n * @see spec.md (WCAG 2.2 AAA - 7:1 contrast, 44x44px touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\nexport const SwitchPropsSchema = BaseComponentPropsSchema.extend({\n // State management (controlled/uncontrolled)\n isSelected: z.boolean().optional(),\n defaultSelected: z.boolean().optional().default(false),\n onChange: z.function().optional(),\n\n // Variants (matching Button pattern)\n variant: z\n .enum(['default', 'destructive'])\n .optional()\n .default('default'),\n\n // Sizes (3 sizes for consistency)\n size: z.enum(['sm', 'default', 'lg']).optional().default('default'),\n\n // States\n isDisabled: z.boolean().optional().default(false),\n isReadOnly: z.boolean().optional().default(false),\n\n // Labels (optional built-in labeling)\n label: z.string().optional(),\n description: z.string().optional(),\n\n // React Aria SwitchProps integration\n onFocus: z.function().optional(),\n onBlur: z.function().optional(),\n onFocusChange: z.function().optional(),\n autoFocus: z.boolean().optional(),\n});\n\nexport type SwitchProps = z.infer<typeof SwitchPropsSchema> &\n Omit<AriaSwitchProps, keyof z.infer<typeof SwitchPropsSchema>>;\n\n/**\n * CVA variant configuration types\n * Used for class-variance-authority integration\n */\nexport type SwitchVariant = z.infer<typeof SwitchPropsSchema>['variant'];\nexport type SwitchSize = z.infer<typeof SwitchPropsSchema>['size'];\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/interaction-states.ts","../../../src/elements/Switch/Switch.tsx","../../../src/schemas/BaseComponentProps.ts","../../../src/elements/Switch/Switch.types.ts"],"names":["cn","inputs","twMerge","clsx","FOCUS_STYLES","PRESSED_STYLES","HOVER_STYLES","HIGH_CONTRAST_FOCUS","HIGH_CONTRAST_HOVER","HIGH_CONTRAST_PRESSED","DEFAULT_INTERACTIONS","switchOuterVariants","cva","switchTrackVariants","switchThumbVariants","Switch","memo","forwardRef","className","variant","size","label","description","isDisabled","isReadOnly","props","ref","jsx","AriaSwitch","_classNameProps","renderProps","jsxs","Fragment","BaseComponentPropsSchema","z","SwitchPropsSchema"],"mappings":"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","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 * 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","\"use client\";\n\n/**\n * Switch Component\n * Accessible toggle switch with React Aria primitives and CVA styling\n *\n * @see React Aria Switch: https://react-spectrum.adobe.com/react-aria/Switch.html\n * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch\n * @see spec.md (WCAG 2.2 AAA - 7:1 contrast ratio, 44x44px touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo } from 'react';\nimport {\n Switch as AriaSwitch,\n type SwitchProps as AriaSwitchProps,\n} from 'react-aria-components';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { DEFAULT_INTERACTIONS } from '../../styles/interaction-states';\n\n/**\n * Layer 1: Transparent outer touch target (44x44px minimum)\n * This layer handles the WCAG 2.2 AAA touch target requirement\n * Always invisible, centers the visual switch inside\n */\nconst switchOuterVariants = cva(\n // Base styles - WCAG 2.2 AAA: 44x44px minimum touch target\n \"inline-flex shrink-0 cursor-pointer items-center justify-center min-h-[44px] min-w-[44px] disabled:cursor-not-allowed disabled:opacity-50 data-[readonly]:cursor-default\",\n {\n variants: {},\n defaultVariants: {},\n }\n);\n\n/**\n * Layer 2: Visual switch track/background (adjustable size)\n * This layer provides the visual appearance and size flexibility\n * Background color changes based on variant and selection state\n */\nconst switchTrackVariants = cva(\n // Base styles - visual track with transitions and focus states\n \"relative inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n {\n variants: {\n variant: {\n // Default variant: Uses primary color when selected\n default:\n \"bg-[var(--input-background)] data-[selected]:bg-[var(--primary)]\",\n // Destructive variant: Uses destructive/error color when selected\n destructive:\n \"bg-[var(--input-background)] data-[selected]:bg-[var(--destructive-background)]\",\n },\n size: {\n // Small: h-5 w-9 (visual track size)\n sm: \"h-5 w-9\",\n // Default: h-6 w-11\n default: \"h-6 w-11\",\n // Large: h-7 w-14\n lg: \"h-7 w-14\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n/**\n * Layer 3: Switch thumb (sliding circle)\n * Inner visual element that slides horizontally when switch is selected\n * Positioned absolutely within the track (Layer 2)\n */\nconst switchThumbVariants = cva(\n // Base styles: rounded circle with shadow, translates when selected\n \"pointer-events-none absolute left-0.5 rounded-full bg-[var(--content-background)] shadow-lg ring-0 transition-transform data-[selected]:translate-x-full\",\n {\n variants: {\n size: {\n // Thumb is slightly smaller than track height for proper padding\n sm: \"h-4 w-4\",\n default: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n);\n\nexport interface SwitchProps\n extends Omit<AriaSwitchProps, 'className' | 'children'>,\n VariantProps<typeof switchTrackVariants> {\n variant?: 'default' | 'destructive';\n size?: 'sm' | 'default' | 'lg';\n label?: string;\n description?: string;\n className?: string;\n}\n\n/**\n * Switch Component\n * Fully accessible toggle switch with React Aria and themed styling\n */\nconst Switch = memo(forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n className,\n variant,\n size,\n label,\n description,\n isDisabled,\n isReadOnly,\n ...props\n },\n ref\n ) => {\n return (\n <AriaSwitch\n ref={ref}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n className={(_classNameProps) =>\n cn(\n \"group inline-flex items-center gap-2\",\n isDisabled && \"cursor-not-allowed opacity-50\",\n className\n )\n }\n {...props}\n >\n {(renderProps) => (\n <>\n {/* Layer 1: Transparent outer touch target (44x44px WCAG compliant) */}\n <div\n className={cn(switchOuterVariants())}\n data-selected={renderProps.isSelected || undefined}\n data-readonly={isReadOnly || undefined}\n >\n {/* Layer 2: Visual switch track (adjustable size with variants) */}\n <div\n className={cn(\n switchTrackVariants({ variant, size }),\n DEFAULT_INTERACTIONS\n )}\n data-selected={renderProps.isSelected || undefined}\n >\n {/* Layer 3: Thumb (sliding circle, absolutely positioned) */}\n <div\n className={cn(switchThumbVariants({ size }))}\n data-selected={renderProps.isSelected || undefined}\n />\n </div>\n </div>\n\n {/* Optional label and description */}\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <span className=\"text-sm font-medium text-[var(--content-foreground)]\">\n {label}\n </span>\n )}\n {description && (\n <span className=\"text-xs text-[var(--menu-muted)]\">\n {description}\n </span>\n )}\n </div>\n )}\n </>\n )}\n </AriaSwitch>\n );\n }\n));\n\nSwitch.displayName = \"Switch\";\n\nexport { Switch, switchOuterVariants, switchTrackVariants, switchThumbVariants };\n","import { z } from 'zod';\n\n/**\n * Base props schema for all Themis components\n * Ensures consistent accessibility and styling APIs across the library\n *\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements)\n * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AA minimum)\n */\nexport const BaseComponentPropsSchema = z.object({\n // Styling\n className: z.string().optional(),\n\n // React\n children: z.any().optional(), // ReactNode not directly supported by Zod\n id: z.string().optional(),\n\n // Accessibility (WCAG 2.2 AA requirements)\n 'aria-label': z.string().optional(),\n 'aria-labelledby': z.string().optional(),\n 'aria-describedby': z.string().optional(),\n 'aria-live': z.enum(['off', 'polite', 'assertive']).optional(),\n 'aria-hidden': z.boolean().optional(),\n\n // Testing & Development\n 'data-testid': z.string().optional(),\n});\n\nexport type BaseComponentProps = z.infer<typeof BaseComponentPropsSchema>;\n","import { z } from 'zod';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\nimport type { SwitchProps as AriaSwitchProps } from 'react-aria-components';\n\n/**\n * Switch props schema extending BaseComponentProps\n *\n * @see React Aria Switch: https://react-spectrum.adobe.com/react-aria/Switch.html\n * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch\n * @see spec.md (WCAG 2.2 AAA - 7:1 contrast, 44x44px touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\nexport const SwitchPropsSchema = BaseComponentPropsSchema.extend({\n // State management (controlled/uncontrolled)\n isSelected: z.boolean().optional(),\n defaultSelected: z.boolean().optional().default(false),\n onChange: z.function().optional(),\n\n // Variants (matching Button pattern)\n variant: z\n .enum(['default', 'destructive'])\n .optional()\n .default('default'),\n\n // Sizes (3 sizes for consistency)\n size: z.enum(['sm', 'default', 'lg']).optional().default('default'),\n\n // States\n isDisabled: z.boolean().optional().default(false),\n isReadOnly: z.boolean().optional().default(false),\n\n // Labels (optional built-in labeling)\n label: z.string().optional(),\n description: z.string().optional(),\n\n // React Aria SwitchProps integration\n onFocus: z.function().optional(),\n onBlur: z.function().optional(),\n onFocusChange: z.function().optional(),\n autoFocus: z.boolean().optional(),\n});\n\nexport type SwitchProps = z.infer<typeof SwitchPropsSchema> &\n Omit<AriaSwitchProps, keyof z.infer<typeof SwitchPropsSchema>>;\n\n/**\n * CVA variant configuration types\n * Used for class-variance-authority integration\n */\nexport type SwitchVariant = z.infer<typeof SwitchPropsSchema>['variant'];\nexport type SwitchSize = z.infer<typeof SwitchPropsSchema>['size'];\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {memo,forwardRef}from'react';import {Switch}from'react-aria-components';import {cva}from'class-variance-authority';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {z}from'zod';function o(...
|
|
2
|
+
import {memo,forwardRef}from'react';import {Switch}from'react-aria-components';import {cva}from'class-variance-authority';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {z}from'zod';function o(...r){return twMerge(clsx(r))}var u="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2",A="data-[pressed]:scale-[0.97]";var V="data-[hovered]:shadow-md";var l="hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground",h="hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground",m="hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";var S=`${u} ${A} ${V} ${l} ${h} ${m}`;var w=cva("inline-flex shrink-0 cursor-pointer items-center justify-center min-h-[44px] min-w-[44px] disabled:cursor-not-allowed disabled:opacity-50 data-[readonly]:cursor-default",{variants:{},defaultVariants:{}}),g=cva("relative inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background",{variants:{variant:{default:"bg-[var(--input-background)] data-[selected]:bg-[var(--primary)]",destructive:"bg-[var(--input-background)] data-[selected]:bg-[var(--destructive-background)]"},size:{sm:"h-5 w-9",default:"h-6 w-11",lg:"h-7 w-14"}},defaultVariants:{variant:"default",size:"default"}}),b=cva("pointer-events-none absolute left-0.5 rounded-full bg-[var(--content-background)] shadow-lg ring-0 transition-transform data-[selected]:translate-x-full",{variants:{size:{sm:"h-4 w-4",default:"h-5 w-5",lg:"h-6 w-6"}},defaultVariants:{size:"default"}}),x=memo(forwardRef(({className:r,variant:y,size:d,label:s,description:n,isDisabled:p,isReadOnly:f,...E},N)=>jsx(Switch,{ref:N,isDisabled:p,isReadOnly:f,className:i=>o("group inline-flex items-center gap-2",p&&"cursor-not-allowed opacity-50",r),...E,children:i=>jsxs(Fragment,{children:[jsx("div",{className:o(w()),"data-selected":i.isSelected||void 0,"data-readonly":f||void 0,children:jsx("div",{className:o(g({variant:y,size:d}),S),"data-selected":i.isSelected||void 0,children:jsx("div",{className:o(b({size:d})),"data-selected":i.isSelected||void 0})})}),(s||n)&&jsxs("div",{className:"flex flex-col",children:[s&&jsx("span",{className:"text-sm font-medium text-[var(--content-foreground)]",children:s}),n&&jsx("span",{className:"text-xs text-[var(--menu-muted)]",children:n})]})]})})));x.displayName="Switch";var T=z.object({className:z.string().optional(),children:z.any().optional(),id:z.string().optional(),"aria-label":z.string().optional(),"aria-labelledby":z.string().optional(),"aria-describedby":z.string().optional(),"aria-live":z.enum(["off","polite","assertive"]).optional(),"aria-hidden":z.boolean().optional(),"data-testid":z.string().optional()});var I=T.extend({isSelected:z.boolean().optional(),defaultSelected:z.boolean().optional().default(false),onChange:z.function().optional(),variant:z.enum(["default","destructive"]).optional().default("default"),size:z.enum(["sm","default","lg"]).optional().default("default"),isDisabled:z.boolean().optional().default(false),isReadOnly:z.boolean().optional().default(false),label:z.string().optional(),description:z.string().optional(),onFocus:z.function().optional(),onBlur:z.function().optional(),onFocusChange:z.function().optional(),autoFocus:z.boolean().optional()});export{x as Switch,I as SwitchPropsSchema,w as switchOuterVariants,b as switchThumbVariants,g as switchTrackVariants};//# sourceMappingURL=index.mjs.map
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/interaction-states.ts","../../../src/elements/Switch/Switch.tsx","../../../src/schemas/BaseComponentProps.ts","../../../src/elements/Switch/Switch.types.ts"],"names":["cn","inputs","twMerge","clsx","FOCUS_STYLES","PRESSED_STYLES","HOVER_STYLES","HIGH_CONTRAST_FOCUS","HIGH_CONTRAST_HOVER","HIGH_CONTRAST_PRESSED","DEFAULT_INTERACTIONS","switchOuterVariants","cva","switchTrackVariants","switchThumbVariants","Switch","memo","forwardRef","className","variant","size","label","description","isDisabled","isReadOnly","props","ref","jsx","AriaSwitch","_classNameProps","renderProps","jsxs","Fragment","BaseComponentPropsSchema","z","SwitchPropsSchema"],"mappings":"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","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 * 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","\"use client\";\n\n/**\n * Switch Component\n * Accessible toggle switch with React Aria primitives and CVA styling\n *\n * @see React Aria Switch: https://react-spectrum.adobe.com/react-aria/Switch.html\n * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch\n * @see spec.md (WCAG 2.2 AAA - 7:1 contrast ratio, 44x44px touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo } from 'react';\nimport {\n Switch as AriaSwitch,\n type SwitchProps as AriaSwitchProps,\n} from 'react-aria-components';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { DEFAULT_INTERACTIONS } from '../../styles/interaction-states';\n\n/**\n * Layer 1: Transparent outer touch target (44x44px minimum)\n * This layer handles the WCAG 2.2 AAA touch target requirement\n * Always invisible, centers the visual switch inside\n */\nconst switchOuterVariants = cva(\n // Base styles - WCAG 2.2 AAA: 44x44px minimum touch target\n \"inline-flex shrink-0 cursor-pointer items-center justify-center min-h-[44px] min-w-[44px] disabled:cursor-not-allowed disabled:opacity-50 data-[readonly]:cursor-default\",\n {\n variants: {},\n defaultVariants: {},\n }\n);\n\n/**\n * Layer 2: Visual switch track/background (adjustable size)\n * This layer provides the visual appearance and size flexibility\n * Background color changes based on variant and selection state\n */\nconst switchTrackVariants = cva(\n // Base styles - visual track with transitions and focus states\n \"relative inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n {\n variants: {\n variant: {\n // Default variant: Uses primary color when selected\n default:\n \"bg-[var(--input)] data-[selected]:bg-[var(--primary)]\",\n // Destructive variant: Uses destructive/error color when selected\n destructive:\n \"bg-[var(--input)] data-[selected]:bg-[var(--destructive)]\",\n },\n size: {\n // Small: h-5 w-9 (visual track size)\n sm: \"h-5 w-9\",\n // Default: h-6 w-11\n default: \"h-6 w-11\",\n // Large: h-7 w-14\n lg: \"h-7 w-14\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n/**\n * Layer 3: Switch thumb (sliding circle)\n * Inner visual element that slides horizontally when switch is selected\n * Positioned absolutely within the track (Layer 2)\n */\nconst switchThumbVariants = cva(\n // Base styles: rounded circle with shadow, translates when selected\n \"pointer-events-none absolute left-0.5 rounded-full bg-[var(--content-background)] shadow-lg ring-0 transition-transform data-[selected]:translate-x-full\",\n {\n variants: {\n size: {\n // Thumb is slightly smaller than track height for proper padding\n sm: \"h-4 w-4\",\n default: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n);\n\nexport interface SwitchProps\n extends Omit<AriaSwitchProps, 'className' | 'children'>,\n VariantProps<typeof switchTrackVariants> {\n variant?: 'default' | 'destructive';\n size?: 'sm' | 'default' | 'lg';\n label?: string;\n description?: string;\n className?: string;\n}\n\n/**\n * Switch Component\n * Fully accessible toggle switch with React Aria and themed styling\n */\nconst Switch = memo(forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n className,\n variant,\n size,\n label,\n description,\n isDisabled,\n isReadOnly,\n ...props\n },\n ref\n ) => {\n return (\n <AriaSwitch\n ref={ref}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n className={(_classNameProps) =>\n cn(\n \"group inline-flex items-center gap-2\",\n isDisabled && \"cursor-not-allowed opacity-50\",\n className\n )\n }\n {...props}\n >\n {(renderProps) => (\n <>\n {/* Layer 1: Transparent outer touch target (44x44px WCAG compliant) */}\n <div\n className={cn(switchOuterVariants())}\n data-selected={renderProps.isSelected || undefined}\n data-readonly={isReadOnly || undefined}\n >\n {/* Layer 2: Visual switch track (adjustable size with variants) */}\n <div\n className={cn(\n switchTrackVariants({ variant, size }),\n DEFAULT_INTERACTIONS\n )}\n data-selected={renderProps.isSelected || undefined}\n >\n {/* Layer 3: Thumb (sliding circle, absolutely positioned) */}\n <div\n className={cn(switchThumbVariants({ size }))}\n data-selected={renderProps.isSelected || undefined}\n />\n </div>\n </div>\n\n {/* Optional label and description */}\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <span className=\"text-sm font-medium text-[var(--content-foreground)]\">\n {label}\n </span>\n )}\n {description && (\n <span className=\"text-xs text-[var(--menu-muted)]\">\n {description}\n </span>\n )}\n </div>\n )}\n </>\n )}\n </AriaSwitch>\n );\n }\n));\n\nSwitch.displayName = \"Switch\";\n\nexport { Switch, switchOuterVariants, switchTrackVariants, switchThumbVariants };\n","import { z } from 'zod';\n\n/**\n * Base props schema for all Themis components\n * Ensures consistent accessibility and styling APIs across the library\n *\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements)\n * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AA minimum)\n */\nexport const BaseComponentPropsSchema = z.object({\n // Styling\n className: z.string().optional(),\n\n // React\n children: z.any().optional(), // ReactNode not directly supported by Zod\n id: z.string().optional(),\n\n // Accessibility (WCAG 2.2 AA requirements)\n 'aria-label': z.string().optional(),\n 'aria-labelledby': z.string().optional(),\n 'aria-describedby': z.string().optional(),\n 'aria-live': z.enum(['off', 'polite', 'assertive']).optional(),\n 'aria-hidden': z.boolean().optional(),\n\n // Testing & Development\n 'data-testid': z.string().optional(),\n});\n\nexport type BaseComponentProps = z.infer<typeof BaseComponentPropsSchema>;\n","import { z } from 'zod';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\nimport type { SwitchProps as AriaSwitchProps } from 'react-aria-components';\n\n/**\n * Switch props schema extending BaseComponentProps\n *\n * @see React Aria Switch: https://react-spectrum.adobe.com/react-aria/Switch.html\n * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch\n * @see spec.md (WCAG 2.2 AAA - 7:1 contrast, 44x44px touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\nexport const SwitchPropsSchema = BaseComponentPropsSchema.extend({\n // State management (controlled/uncontrolled)\n isSelected: z.boolean().optional(),\n defaultSelected: z.boolean().optional().default(false),\n onChange: z.function().optional(),\n\n // Variants (matching Button pattern)\n variant: z\n .enum(['default', 'destructive'])\n .optional()\n .default('default'),\n\n // Sizes (3 sizes for consistency)\n size: z.enum(['sm', 'default', 'lg']).optional().default('default'),\n\n // States\n isDisabled: z.boolean().optional().default(false),\n isReadOnly: z.boolean().optional().default(false),\n\n // Labels (optional built-in labeling)\n label: z.string().optional(),\n description: z.string().optional(),\n\n // React Aria SwitchProps integration\n onFocus: z.function().optional(),\n onBlur: z.function().optional(),\n onFocusChange: z.function().optional(),\n autoFocus: z.boolean().optional(),\n});\n\nexport type SwitchProps = z.infer<typeof SwitchPropsSchema> &\n Omit<AriaSwitchProps, keyof z.infer<typeof SwitchPropsSchema>>;\n\n/**\n * CVA variant configuration types\n * Used for class-variance-authority integration\n */\nexport type SwitchVariant = z.infer<typeof SwitchPropsSchema>['variant'];\nexport type SwitchSize = z.infer<typeof SwitchPropsSchema>['size'];\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/interaction-states.ts","../../../src/elements/Switch/Switch.tsx","../../../src/schemas/BaseComponentProps.ts","../../../src/elements/Switch/Switch.types.ts"],"names":["cn","inputs","twMerge","clsx","FOCUS_STYLES","PRESSED_STYLES","HOVER_STYLES","HIGH_CONTRAST_FOCUS","HIGH_CONTRAST_HOVER","HIGH_CONTRAST_PRESSED","DEFAULT_INTERACTIONS","switchOuterVariants","cva","switchTrackVariants","switchThumbVariants","Switch","memo","forwardRef","className","variant","size","label","description","isDisabled","isReadOnly","props","ref","jsx","AriaSwitch","_classNameProps","renderProps","jsxs","Fragment","BaseComponentPropsSchema","z","SwitchPropsSchema"],"mappings":"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","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 * 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","\"use client\";\n\n/**\n * Switch Component\n * Accessible toggle switch with React Aria primitives and CVA styling\n *\n * @see React Aria Switch: https://react-spectrum.adobe.com/react-aria/Switch.html\n * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch\n * @see spec.md (WCAG 2.2 AAA - 7:1 contrast ratio, 44x44px touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo } from 'react';\nimport {\n Switch as AriaSwitch,\n type SwitchProps as AriaSwitchProps,\n} from 'react-aria-components';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { DEFAULT_INTERACTIONS } from '../../styles/interaction-states';\n\n/**\n * Layer 1: Transparent outer touch target (44x44px minimum)\n * This layer handles the WCAG 2.2 AAA touch target requirement\n * Always invisible, centers the visual switch inside\n */\nconst switchOuterVariants = cva(\n // Base styles - WCAG 2.2 AAA: 44x44px minimum touch target\n \"inline-flex shrink-0 cursor-pointer items-center justify-center min-h-[44px] min-w-[44px] disabled:cursor-not-allowed disabled:opacity-50 data-[readonly]:cursor-default\",\n {\n variants: {},\n defaultVariants: {},\n }\n);\n\n/**\n * Layer 2: Visual switch track/background (adjustable size)\n * This layer provides the visual appearance and size flexibility\n * Background color changes based on variant and selection state\n */\nconst switchTrackVariants = cva(\n // Base styles - visual track with transitions and focus states\n \"relative inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n {\n variants: {\n variant: {\n // Default variant: Uses primary color when selected\n default:\n \"bg-[var(--input-background)] data-[selected]:bg-[var(--primary)]\",\n // Destructive variant: Uses destructive/error color when selected\n destructive:\n \"bg-[var(--input-background)] data-[selected]:bg-[var(--destructive-background)]\",\n },\n size: {\n // Small: h-5 w-9 (visual track size)\n sm: \"h-5 w-9\",\n // Default: h-6 w-11\n default: \"h-6 w-11\",\n // Large: h-7 w-14\n lg: \"h-7 w-14\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n/**\n * Layer 3: Switch thumb (sliding circle)\n * Inner visual element that slides horizontally when switch is selected\n * Positioned absolutely within the track (Layer 2)\n */\nconst switchThumbVariants = cva(\n // Base styles: rounded circle with shadow, translates when selected\n \"pointer-events-none absolute left-0.5 rounded-full bg-[var(--content-background)] shadow-lg ring-0 transition-transform data-[selected]:translate-x-full\",\n {\n variants: {\n size: {\n // Thumb is slightly smaller than track height for proper padding\n sm: \"h-4 w-4\",\n default: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n },\n defaultVariants: {\n size: \"default\",\n },\n }\n);\n\nexport interface SwitchProps\n extends Omit<AriaSwitchProps, 'className' | 'children'>,\n VariantProps<typeof switchTrackVariants> {\n variant?: 'default' | 'destructive';\n size?: 'sm' | 'default' | 'lg';\n label?: string;\n description?: string;\n className?: string;\n}\n\n/**\n * Switch Component\n * Fully accessible toggle switch with React Aria and themed styling\n */\nconst Switch = memo(forwardRef<HTMLLabelElement, SwitchProps>(\n (\n {\n className,\n variant,\n size,\n label,\n description,\n isDisabled,\n isReadOnly,\n ...props\n },\n ref\n ) => {\n return (\n <AriaSwitch\n ref={ref}\n isDisabled={isDisabled}\n isReadOnly={isReadOnly}\n className={(_classNameProps) =>\n cn(\n \"group inline-flex items-center gap-2\",\n isDisabled && \"cursor-not-allowed opacity-50\",\n className\n )\n }\n {...props}\n >\n {(renderProps) => (\n <>\n {/* Layer 1: Transparent outer touch target (44x44px WCAG compliant) */}\n <div\n className={cn(switchOuterVariants())}\n data-selected={renderProps.isSelected || undefined}\n data-readonly={isReadOnly || undefined}\n >\n {/* Layer 2: Visual switch track (adjustable size with variants) */}\n <div\n className={cn(\n switchTrackVariants({ variant, size }),\n DEFAULT_INTERACTIONS\n )}\n data-selected={renderProps.isSelected || undefined}\n >\n {/* Layer 3: Thumb (sliding circle, absolutely positioned) */}\n <div\n className={cn(switchThumbVariants({ size }))}\n data-selected={renderProps.isSelected || undefined}\n />\n </div>\n </div>\n\n {/* Optional label and description */}\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <span className=\"text-sm font-medium text-[var(--content-foreground)]\">\n {label}\n </span>\n )}\n {description && (\n <span className=\"text-xs text-[var(--menu-muted)]\">\n {description}\n </span>\n )}\n </div>\n )}\n </>\n )}\n </AriaSwitch>\n );\n }\n));\n\nSwitch.displayName = \"Switch\";\n\nexport { Switch, switchOuterVariants, switchTrackVariants, switchThumbVariants };\n","import { z } from 'zod';\n\n/**\n * Base props schema for all Themis components\n * Ensures consistent accessibility and styling APIs across the library\n *\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements)\n * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AA minimum)\n */\nexport const BaseComponentPropsSchema = z.object({\n // Styling\n className: z.string().optional(),\n\n // React\n children: z.any().optional(), // ReactNode not directly supported by Zod\n id: z.string().optional(),\n\n // Accessibility (WCAG 2.2 AA requirements)\n 'aria-label': z.string().optional(),\n 'aria-labelledby': z.string().optional(),\n 'aria-describedby': z.string().optional(),\n 'aria-live': z.enum(['off', 'polite', 'assertive']).optional(),\n 'aria-hidden': z.boolean().optional(),\n\n // Testing & Development\n 'data-testid': z.string().optional(),\n});\n\nexport type BaseComponentProps = z.infer<typeof BaseComponentPropsSchema>;\n","import { z } from 'zod';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\nimport type { SwitchProps as AriaSwitchProps } from 'react-aria-components';\n\n/**\n * Switch props schema extending BaseComponentProps\n *\n * @see React Aria Switch: https://react-spectrum.adobe.com/react-aria/Switch.html\n * @see ShadCN Switch: https://ui.shadcn.com/docs/components/switch\n * @see spec.md (WCAG 2.2 AAA - 7:1 contrast, 44x44px touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\nexport const SwitchPropsSchema = BaseComponentPropsSchema.extend({\n // State management (controlled/uncontrolled)\n isSelected: z.boolean().optional(),\n defaultSelected: z.boolean().optional().default(false),\n onChange: z.function().optional(),\n\n // Variants (matching Button pattern)\n variant: z\n .enum(['default', 'destructive'])\n .optional()\n .default('default'),\n\n // Sizes (3 sizes for consistency)\n size: z.enum(['sm', 'default', 'lg']).optional().default('default'),\n\n // States\n isDisabled: z.boolean().optional().default(false),\n isReadOnly: z.boolean().optional().default(false),\n\n // Labels (optional built-in labeling)\n label: z.string().optional(),\n description: z.string().optional(),\n\n // React Aria SwitchProps integration\n onFocus: z.function().optional(),\n onBlur: z.function().optional(),\n onFocusChange: z.function().optional(),\n autoFocus: z.boolean().optional(),\n});\n\nexport type SwitchProps = z.infer<typeof SwitchPropsSchema> &\n Omit<AriaSwitchProps, keyof z.infer<typeof SwitchPropsSchema>>;\n\n/**\n * CVA variant configuration types\n * Used for class-variance-authority integration\n */\nexport type SwitchVariant = z.infer<typeof SwitchPropsSchema>['variant'];\nexport type SwitchSize = z.infer<typeof SwitchPropsSchema>['size'];\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
'use strict';var react=require('react'),reactAriaComponents=require('react-aria-components'),classVarianceAuthority=require('class-variance-authority'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime'),lucideReact=require('lucide-react');function n(...a){return tailwindMerge.twMerge(clsx.clsx(a))}var V="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2";var S="hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground";var J=classVarianceAuthority.cva(["group inline-flex items-center gap-2 cursor-pointer","transition-colors duration-200","rtl:flex-row-reverse",V,S].join(" "),{variants:{size:{sm:"min-h-[44px] text-sm",default:"min-h-[44px] text-sm",lg:"min-h-[48px] text-base"},isDisabled:{true:"opacity-50 cursor-not-allowed",false:""}},defaultVariants:{size:"default",isDisabled:false}}),Q=classVarianceAuthority.cva("flex-shrink-0 rounded-sm border-2 flex items-center justify-center transition-colors duration-200",{variants:{variant:{default:["border-[var(--border)]","data-[selected]:border-[var(--primary)]","data-[selected]:bg-[var(--primary)]","data-[indeterminate]:border-[var(--primary)]","data-[indeterminate]:bg-[var(--primary)]"].join(" "),destructive:["border-[var(--border)]","data-[selected]:border-[var(--destructive)]","data-[selected]:bg-[var(--destructive)]","data-[indeterminate]:border-[var(--destructive)]","data-[indeterminate]:bg-[var(--destructive)]"].join(" ")},size:{sm:"h-4 w-4",default:"h-5 w-5",lg:"h-6 w-6"},isInvalid:{true:"border-[var(--destructive)]",false:""}},defaultVariants:{variant:"default",size:"default",isInvalid:false}}),X=classVarianceAuthority.cva(["transition-transform duration-200","[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]","motion-reduce:transition-none","scale-0 data-[selected]:scale-100 data-[indeterminate]:scale-100"].join(" "),{variants:{variant:{default:"text-[var(--primary-foreground)]",destructive:"text-[var(--destructive-foreground)]"},size:{sm:"h-3 w-3",default:"h-3.5 w-3.5",lg:"h-4 w-4"}},defaultVariants:{variant:"default",size:"default"}});function Z({className:a,...e}){return jsxRuntime.jsx("svg",{className:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...e,children:jsxRuntime.jsx("polyline",{points:"20 6 9 17 4 12"})})}function ee({className:a,...e}){return jsxRuntime.jsx("svg",{className:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...e,children:jsxRuntime.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})})}var w=react.forwardRef(({isSelected:a,defaultSelected:e,isDisabled:t,isReadOnly:o,isIndeterminate:s,isInvalid:i=false,isRequired:l=false,onChange:u,onFocusChange:c,value:x,name:C,size:b="default",variant:p="default",label:h,description:g,selectedIcon:f,className:y,id:I,"aria-label":L,"aria-labelledby":be,"aria-describedby":pe,"data-testid":me,slot:ue},fe)=>{let Te=t||void 0,ve=o||void 0,xe=s||void 0,Ce=(m,U)=>{let R=n(X({variant:p,size:b})),E=m||void 0,Y=U||void 0;if(U)return jsxRuntime.jsx(ee,{className:R,"data-selected":E,"data-indeterminate":Y});if(f&&m){if(react.isValidElement(f)){let G=f;return react.cloneElement(G,{className:n(R,G.props.className),"data-selected":E})}return jsxRuntime.jsx("span",{className:R,"data-selected":E,children:f})}return jsxRuntime.jsx(Z,{className:R,"data-selected":E,"data-indeterminate":Y})};return jsxRuntime.jsx(reactAriaComponents.Checkbox,{ref:fe,id:I,isSelected:a,defaultSelected:e,isDisabled:Te,isReadOnly:ve,isIndeterminate:xe,isInvalid:i,isRequired:l,onChange:u,onFocusChange:c,value:x,name:C,slot:ue,"aria-label":L,"aria-labelledby":be,"aria-describedby":pe,"data-testid":me,className:m=>n(J({size:b,isDisabled:m.isDisabled}),y),children:m=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:Q({variant:p,size:b,isInvalid:m.isInvalid}),"data-selected":m.isSelected||void 0,"data-indeterminate":m.isIndeterminate||void 0,children:Ce(m.isSelected,m.isIndeterminate)}),(h||g)&&jsxRuntime.jsxs("div",{className:"flex flex-col",children:[h&&jsxRuntime.jsx("span",{className:"font-medium text-[var(--content-foreground)]",children:h}),g&&jsxRuntime.jsx("span",{className:"text-sm text-[var(--menu-muted)]",children:g})]})]})})});w.displayName="Checkbox";var z=classVarianceAuthority.cva(["relative w-full overflow-auto"]),B=classVarianceAuthority.cva(["w-full caption-bottom text-sm","border-collapse"],{variants:{variant:{default:"",bordered:"border border-[var(--border)] rounded-md",striped:""}},defaultVariants:{variant:"default"}}),D=classVarianceAuthority.cva(["[&_tr]:border-b"],{variants:{sticky:{true:"sticky top-0 z-10 bg-[var(--content-background)]",false:""}},defaultVariants:{sticky:false}}),F=classVarianceAuthority.cva(["border-t border-[var(--border)]","bg-[var(--accent-background)]/50","font-medium","[&>tr]:last:border-b-0"]),O=classVarianceAuthority.cva(["mt-4 text-sm text-[var(--menu-muted)]"]),k=classVarianceAuthority.cva(["h-12 px-4 text-left align-middle font-medium","text-[var(--menu-muted)]","[&:has([role=checkbox])]:pr-0","select-none","focus-visible:outline-none focus-visible:ring-2","focus-visible:ring-[var(--ring)] focus-visible:ring-inset"],{variants:{allowsSorting:{true:"cursor-pointer hover:bg-[var(--accent)]/50",false:""},align:{start:"text-start",center:"text-center",end:"text-end"},size:{sm:"h-10 px-3 text-xs",default:"h-12 px-4 text-sm",lg:"h-14 px-5 text-base"}},defaultVariants:{allowsSorting:false,align:"start",size:"default"}}),H=classVarianceAuthority.cva(["border-b border-[var(--border)]","transition-colors","focus-visible:outline-none focus-visible:ring-2","focus-visible:ring-[var(--ring)] focus-visible:ring-inset","hover:bg-[var(--accent-background)]/50","data-[disabled]:pointer-events-none data-[disabled]:opacity-50"],{variants:{isSelected:{true:"bg-[var(--accent)] data-[selected]:bg-[var(--accent)]",false:""},variant:{default:"",striped:"even:bg-[var(--accent-background)]/30"}},defaultVariants:{isSelected:false,variant:"default"}}),A=classVarianceAuthority.cva(["p-4 align-middle","[&:has([role=checkbox])]:pr-0"],{variants:{align:{start:"text-start",center:"text-center",end:"text-end"},size:{sm:"p-3 text-xs",default:"p-4 text-sm",lg:"p-5 text-base"},isRowHeader:{true:"font-medium",false:""}},defaultVariants:{align:"start",size:"default",isRowHeader:false}});var N=react.createContext({variant:"default",size:"default",selectionMode:"none",stickyHeader:false}),re=react.forwardRef(({className:a,variant:e="default",size:t="default",stickyHeader:o=false,selectionMode:s="none",selectionBehavior:i="toggle",disallowEmptySelection:l=false,disabledBehavior:u="selection",selectedKeys:c,defaultSelectedKeys:x,onSelectionChange:C,disabledKeys:b,sortDescriptor:p,onSortChange:h,onRowAction:g,children:f,...y},I)=>{process.env.NODE_ENV!=="production"&&t==="sm"&&s!=="none"&&console.warn('[Table] size="sm" with selectionMode produces rows shorter than the 44px WCAG 2.2 AAA minimum touch target. Use size="default" or size="lg" for accessible interactive tables.');let L=react.useMemo(()=>({variant:e,size:t,selectionMode:s,stickyHeader:o}),[e,t,s,o]);return jsxRuntime.jsx(N.Provider,{value:L,children:jsxRuntime.jsx("div",{className:n(z(),a),"data-testid":"table-container",children:jsxRuntime.jsx(reactAriaComponents.Table,{ref:I,className:n(B({variant:e})),selectionMode:s,selectionBehavior:i,disallowEmptySelection:l,disabledBehavior:u,selectedKeys:c,defaultSelectedKeys:x,onSelectionChange:C,disabledKeys:b,sortDescriptor:p,onSortChange:h,onRowAction:g,"data-testid":"table","data-variant":e,"data-size":t,...y,children:f})})})});re.displayName="Table";function De({className:a,children:e,columns:t,...o},s){let{size:i,selectionMode:l,stickyHeader:u}=react.useContext(N),{allowsDragging:c}=reactAriaComponents.useTableOptions();return jsxRuntime.jsxs(reactAriaComponents.TableHeader,{ref:s,className:n(D({sticky:u}),a),"data-testid":"table-header",...o,children:[l==="multiple"&&jsxRuntime.jsx(reactAriaComponents.Column,{className:n(k({size:i}),"w-12"),children:jsxRuntime.jsx(w,{slot:"selection","aria-label":"Select all",size:i})}),c&&jsxRuntime.jsx(reactAriaComponents.Column,{}),t?jsxRuntime.jsx(reactAriaComponents.Collection,{items:t,children:e}):e]})}var oe=react.forwardRef(De);oe.displayName="TableHeader";function Fe({className:a,children:e,items:t,renderEmptyState:o,...s},i){return jsxRuntime.jsx(reactAriaComponents.TableBody,{ref:i,className:n(a),items:t,renderEmptyState:o?()=>jsxRuntime.jsx("tr",{children:jsxRuntime.jsx("td",{colSpan:99,className:"text-center p-8",children:o()})}):void 0,"data-testid":"table-body",...s,children:e})}var se=react.forwardRef(Fe);se.displayName="TableBody";var ne=react.forwardRef(({className:a,children:e,...t},o)=>jsxRuntime.jsx("tfoot",{ref:o,className:n(F(),a),"data-testid":"table-footer",...t,children:e}));ne.displayName="TableFooter";var ie=react.forwardRef(({className:a,children:e,...t},o)=>jsxRuntime.jsx("caption",{ref:o,className:n(O(),a),"data-testid":"table-caption",...t,children:e}));ie.displayName="TableCaption";var le=react.forwardRef(({className:a,children:e,isRowHeader:t=false,allowsSorting:o=false,align:s="start",width:i,minWidth:l,maxWidth:u,...c},x)=>{let{size:C}=react.useContext(N);return jsxRuntime.jsx(reactAriaComponents.Column,{ref:x,isRowHeader:t,allowsSorting:o,width:i,minWidth:l,maxWidth:u,className:n(k({allowsSorting:o,align:s,size:C}),a),...c,children:({allowsSorting:b,sortDirection:p})=>jsxRuntime.jsxs("div",{className:"flex items-center gap-1",children:[jsxRuntime.jsx("span",{children:e}),b&&p&&jsxRuntime.jsx("span",{"aria-hidden":"true","data-sort-direction":p,children:p==="ascending"?jsxRuntime.jsx(lucideReact.ChevronUp,{className:"h-4 w-4"}):jsxRuntime.jsx(lucideReact.ChevronDown,{className:"h-4 w-4"})})]})})});le.displayName="Column";function Oe({className:a,children:e,columns:t,href:o,isDisabled:s,...i},l){let{variant:u,size:c,selectionMode:x}=react.useContext(N),{allowsDragging:C}=reactAriaComponents.useTableOptions(),b=u==="striped"?"striped":"default",p=H({isSelected:true,variant:b}),h=H({isSelected:false,variant:b}),g=n(A({size:c}),"w-12");return jsxRuntime.jsxs(reactAriaComponents.Row,{ref:l,href:o,isDisabled:s,className:({isSelected:f,isDisabled:y})=>n(f?p:h,y&&"opacity-50",a),"data-testid":"table-row",...i,children:[x==="multiple"&&jsxRuntime.jsx(reactAriaComponents.Cell,{className:g,children:jsxRuntime.jsx(w,{slot:"selection","aria-label":"Select row",size:c})}),C&&jsxRuntime.jsx(reactAriaComponents.Cell,{}),t?jsxRuntime.jsx(reactAriaComponents.Collection,{items:t,children:e}):e]})}var de=react.forwardRef(Oe);de.displayName="Row";var ce=react.memo(react.forwardRef(({className:a,children:e,align:t="start",colSpan:o,...s},i)=>{let{size:l}=react.useContext(N);return jsxRuntime.jsx(reactAriaComponents.Cell,{ref:i,className:n(A({align:t,size:l}),a),...s,children:e})}));ce.displayName="Cell";exports.Cell=ce;exports.Column=le;exports.Row=de;exports.Table=re;exports.TableBody=se;exports.TableCaption=ie;exports.TableFooter=ne;exports.TableHeader=oe;exports.cellVariants=A;exports.columnVariants=k;exports.rowVariants=H;exports.tableCaptionVariants=O;exports.tableContainerVariants=z;exports.tableFooterVariants=F;exports.tableHeaderVariants=D;exports.tableVariants=B;//# sourceMappingURL=index.js.map
|
|
2
|
+
'use strict';var react=require('react'),reactAriaComponents=require('react-aria-components'),classVarianceAuthority=require('class-variance-authority'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime'),lucideReact=require('lucide-react');function n(...a){return tailwindMerge.twMerge(clsx.clsx(a))}var V="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2";var S="hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground";var J=classVarianceAuthority.cva(["group inline-flex items-center gap-2 cursor-pointer","transition-colors duration-200","rtl:flex-row-reverse",V,S].join(" "),{variants:{size:{sm:"min-h-[44px] text-sm",default:"min-h-[44px] text-sm",lg:"min-h-[48px] text-base"},isDisabled:{true:"opacity-50 cursor-not-allowed",false:""}},defaultVariants:{size:"default",isDisabled:false}}),Q=classVarianceAuthority.cva("flex-shrink-0 rounded-sm border-2 flex items-center justify-center transition-colors duration-200",{variants:{variant:{default:["border-[var(--border)]","data-[selected]:border-[var(--primary)]","data-[selected]:bg-[var(--primary)]","data-[indeterminate]:border-[var(--primary)]","data-[indeterminate]:bg-[var(--primary)]"].join(" "),destructive:["border-[var(--border)]","data-[selected]:border-[var(--destructive-background)]","data-[selected]:bg-[var(--destructive-background)]","data-[indeterminate]:border-[var(--destructive-background)]","data-[indeterminate]:bg-[var(--destructive-background)]"].join(" ")},size:{sm:"h-4 w-4",default:"h-5 w-5",lg:"h-6 w-6"},isInvalid:{true:"border-[var(--destructive-background)]",false:""}},defaultVariants:{variant:"default",size:"default",isInvalid:false}}),X=classVarianceAuthority.cva(["transition-transform duration-200","[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]","motion-reduce:transition-none","scale-0 data-[selected]:scale-100 data-[indeterminate]:scale-100"].join(" "),{variants:{variant:{default:"text-[var(--primary-foreground)]",destructive:"text-[var(--destructive-foreground)]"},size:{sm:"h-3 w-3",default:"h-3.5 w-3.5",lg:"h-4 w-4"}},defaultVariants:{variant:"default",size:"default"}});function Z({className:a,...e}){return jsxRuntime.jsx("svg",{className:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...e,children:jsxRuntime.jsx("polyline",{points:"20 6 9 17 4 12"})})}function ee({className:a,...e}){return jsxRuntime.jsx("svg",{className:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...e,children:jsxRuntime.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})})}var w=react.forwardRef(({isSelected:a,defaultSelected:e,isDisabled:t,isReadOnly:o,isIndeterminate:s,isInvalid:i=false,isRequired:l=false,onChange:u,onFocusChange:c,value:x,name:C,size:b="default",variant:p="default",label:h,description:g,selectedIcon:f,className:y,id:I,"aria-label":L,"aria-labelledby":be,"aria-describedby":pe,"data-testid":me,slot:ue},fe)=>{let Te=t||void 0,ve=o||void 0,xe=s||void 0,Ce=(m,U)=>{let R=n(X({variant:p,size:b})),E=m||void 0,Y=U||void 0;if(U)return jsxRuntime.jsx(ee,{className:R,"data-selected":E,"data-indeterminate":Y});if(f&&m){if(react.isValidElement(f)){let G=f;return react.cloneElement(G,{className:n(R,G.props.className),"data-selected":E})}return jsxRuntime.jsx("span",{className:R,"data-selected":E,children:f})}return jsxRuntime.jsx(Z,{className:R,"data-selected":E,"data-indeterminate":Y})};return jsxRuntime.jsx(reactAriaComponents.Checkbox,{ref:fe,id:I,isSelected:a,defaultSelected:e,isDisabled:Te,isReadOnly:ve,isIndeterminate:xe,isInvalid:i,isRequired:l,onChange:u,onFocusChange:c,value:x,name:C,slot:ue,"aria-label":L,"aria-labelledby":be,"aria-describedby":pe,"data-testid":me,className:m=>n(J({size:b,isDisabled:m.isDisabled}),y),children:m=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:Q({variant:p,size:b,isInvalid:m.isInvalid}),"data-selected":m.isSelected||void 0,"data-indeterminate":m.isIndeterminate||void 0,children:Ce(m.isSelected,m.isIndeterminate)}),(h||g)&&jsxRuntime.jsxs("div",{className:"flex flex-col",children:[h&&jsxRuntime.jsx("span",{className:"font-medium text-[var(--content-foreground)]",children:h}),g&&jsxRuntime.jsx("span",{className:"text-sm text-[var(--menu-muted)]",children:g})]})]})})});w.displayName="Checkbox";var z=classVarianceAuthority.cva(["relative w-full overflow-auto"]),B=classVarianceAuthority.cva(["w-full caption-bottom text-sm","border-collapse"],{variants:{variant:{default:"",bordered:"border border-[var(--border)] rounded-md",striped:""}},defaultVariants:{variant:"default"}}),D=classVarianceAuthority.cva(["[&_tr]:border-b"],{variants:{sticky:{true:"sticky top-0 z-10 bg-[var(--content-background)]",false:""}},defaultVariants:{sticky:false}}),F=classVarianceAuthority.cva(["border-t border-[var(--border)]","bg-[var(--accent-background)]/50","font-medium","[&>tr]:last:border-b-0"]),O=classVarianceAuthority.cva(["mt-4 text-sm text-[var(--menu-muted)]"]),k=classVarianceAuthority.cva(["h-12 px-4 text-left align-middle font-medium","text-[var(--menu-muted)]","[&:has([role=checkbox])]:pr-0","select-none","focus-visible:outline-none focus-visible:ring-2","focus-visible:ring-[var(--ring)] focus-visible:ring-inset"],{variants:{allowsSorting:{true:"cursor-pointer hover:bg-[var(--accent)]/50",false:""},align:{start:"text-start",center:"text-center",end:"text-end"},size:{sm:"h-10 px-3 text-xs",default:"h-12 px-4 text-sm",lg:"h-14 px-5 text-base"}},defaultVariants:{allowsSorting:false,align:"start",size:"default"}}),H=classVarianceAuthority.cva(["border-b border-[var(--border)]","transition-colors","focus-visible:outline-none focus-visible:ring-2","focus-visible:ring-[var(--ring)] focus-visible:ring-inset","hover:bg-[var(--accent-background)]/50","data-[disabled]:pointer-events-none data-[disabled]:opacity-50"],{variants:{isSelected:{true:"bg-[var(--accent)] data-[selected]:bg-[var(--accent)]",false:""},variant:{default:"",striped:"even:bg-[var(--accent-background)]/30"}},defaultVariants:{isSelected:false,variant:"default"}}),A=classVarianceAuthority.cva(["p-4 align-middle","[&:has([role=checkbox])]:pr-0"],{variants:{align:{start:"text-start",center:"text-center",end:"text-end"},size:{sm:"p-3 text-xs",default:"p-4 text-sm",lg:"p-5 text-base"},isRowHeader:{true:"font-medium",false:""}},defaultVariants:{align:"start",size:"default",isRowHeader:false}});var N=react.createContext({variant:"default",size:"default",selectionMode:"none",stickyHeader:false}),re=react.forwardRef(({className:a,variant:e="default",size:t="default",stickyHeader:o=false,selectionMode:s="none",selectionBehavior:i="toggle",disallowEmptySelection:l=false,disabledBehavior:u="selection",selectedKeys:c,defaultSelectedKeys:x,onSelectionChange:C,disabledKeys:b,sortDescriptor:p,onSortChange:h,onRowAction:g,children:f,...y},I)=>{process.env.NODE_ENV!=="production"&&t==="sm"&&s!=="none"&&console.warn('[Table] size="sm" with selectionMode produces rows shorter than the 44px WCAG 2.2 AAA minimum touch target. Use size="default" or size="lg" for accessible interactive tables.');let L=react.useMemo(()=>({variant:e,size:t,selectionMode:s,stickyHeader:o}),[e,t,s,o]);return jsxRuntime.jsx(N.Provider,{value:L,children:jsxRuntime.jsx("div",{className:n(z(),a),"data-testid":"table-container",children:jsxRuntime.jsx(reactAriaComponents.Table,{ref:I,className:n(B({variant:e})),selectionMode:s,selectionBehavior:i,disallowEmptySelection:l,disabledBehavior:u,selectedKeys:c,defaultSelectedKeys:x,onSelectionChange:C,disabledKeys:b,sortDescriptor:p,onSortChange:h,onRowAction:g,"data-testid":"table","data-variant":e,"data-size":t,...y,children:f})})})});re.displayName="Table";function De({className:a,children:e,columns:t,...o},s){let{size:i,selectionMode:l,stickyHeader:u}=react.useContext(N),{allowsDragging:c}=reactAriaComponents.useTableOptions();return jsxRuntime.jsxs(reactAriaComponents.TableHeader,{ref:s,className:n(D({sticky:u}),a),"data-testid":"table-header",...o,children:[l==="multiple"&&jsxRuntime.jsx(reactAriaComponents.Column,{className:n(k({size:i}),"w-12"),children:jsxRuntime.jsx(w,{slot:"selection","aria-label":"Select all",size:i})}),c&&jsxRuntime.jsx(reactAriaComponents.Column,{}),t?jsxRuntime.jsx(reactAriaComponents.Collection,{items:t,children:e}):e]})}var oe=react.forwardRef(De);oe.displayName="TableHeader";function Fe({className:a,children:e,items:t,renderEmptyState:o,...s},i){return jsxRuntime.jsx(reactAriaComponents.TableBody,{ref:i,className:n(a),items:t,renderEmptyState:o?()=>jsxRuntime.jsx("tr",{children:jsxRuntime.jsx("td",{colSpan:99,className:"text-center p-8",children:o()})}):void 0,"data-testid":"table-body",...s,children:e})}var se=react.forwardRef(Fe);se.displayName="TableBody";var ne=react.forwardRef(({className:a,children:e,...t},o)=>jsxRuntime.jsx("tfoot",{ref:o,className:n(F(),a),"data-testid":"table-footer",...t,children:e}));ne.displayName="TableFooter";var ie=react.forwardRef(({className:a,children:e,...t},o)=>jsxRuntime.jsx("caption",{ref:o,className:n(O(),a),"data-testid":"table-caption",...t,children:e}));ie.displayName="TableCaption";var le=react.forwardRef(({className:a,children:e,isRowHeader:t=false,allowsSorting:o=false,align:s="start",width:i,minWidth:l,maxWidth:u,...c},x)=>{let{size:C}=react.useContext(N);return jsxRuntime.jsx(reactAriaComponents.Column,{ref:x,isRowHeader:t,allowsSorting:o,width:i,minWidth:l,maxWidth:u,className:n(k({allowsSorting:o,align:s,size:C}),a),...c,children:({allowsSorting:b,sortDirection:p})=>jsxRuntime.jsxs("div",{className:"flex items-center gap-1",children:[jsxRuntime.jsx("span",{children:e}),b&&p&&jsxRuntime.jsx("span",{"aria-hidden":"true","data-sort-direction":p,children:p==="ascending"?jsxRuntime.jsx(lucideReact.ChevronUp,{className:"h-4 w-4"}):jsxRuntime.jsx(lucideReact.ChevronDown,{className:"h-4 w-4"})})]})})});le.displayName="Column";function Oe({className:a,children:e,columns:t,href:o,isDisabled:s,...i},l){let{variant:u,size:c,selectionMode:x}=react.useContext(N),{allowsDragging:C}=reactAriaComponents.useTableOptions(),b=u==="striped"?"striped":"default",p=H({isSelected:true,variant:b}),h=H({isSelected:false,variant:b}),g=n(A({size:c}),"w-12");return jsxRuntime.jsxs(reactAriaComponents.Row,{ref:l,href:o,isDisabled:s,className:({isSelected:f,isDisabled:y})=>n(f?p:h,y&&"opacity-50",a),"data-testid":"table-row",...i,children:[x==="multiple"&&jsxRuntime.jsx(reactAriaComponents.Cell,{className:g,children:jsxRuntime.jsx(w,{slot:"selection","aria-label":"Select row",size:c})}),C&&jsxRuntime.jsx(reactAriaComponents.Cell,{}),t?jsxRuntime.jsx(reactAriaComponents.Collection,{items:t,children:e}):e]})}var de=react.forwardRef(Oe);de.displayName="Row";var ce=react.memo(react.forwardRef(({className:a,children:e,align:t="start",colSpan:o,...s},i)=>{let{size:l}=react.useContext(N);return jsxRuntime.jsx(reactAriaComponents.Cell,{ref:i,className:n(A({align:t,size:l}),a),...s,children:e})}));ce.displayName="Cell";exports.Cell=ce;exports.Column=le;exports.Row=de;exports.Table=re;exports.TableBody=se;exports.TableCaption=ie;exports.TableFooter=ne;exports.TableHeader=oe;exports.cellVariants=A;exports.columnVariants=k;exports.rowVariants=H;exports.tableCaptionVariants=O;exports.tableContainerVariants=z;exports.tableFooterVariants=F;exports.tableHeaderVariants=D;exports.tableVariants=B;//# sourceMappingURL=index.js.map
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/interaction-states.ts","../../../src/elements/Checkbox/Checkbox.tsx","../../../src/elements/Table/Table.styles.ts","../../../src/elements/Table/Table.tsx"],"names":["cn","inputs","twMerge","clsx","FOCUS_STYLES","HIGH_CONTRAST_FOCUS","checkboxContainerVariants","cva","checkboxIndicatorVariants","checkmarkVariants","CheckmarkIcon","className","props","jsx","MinusIcon","Checkbox","forwardRef","isSelected","defaultSelected","isDisabled","isReadOnly","isIndeterminate","isInvalid","isRequired","onChange","onFocusChange","value","name","size","variant","label","description","selectedIcon","id","ariaLabel","ariaLabelledby","ariaDescribedby","dataTestId","slot","ref","computedIsDisabled","computedIsReadOnly","computedIsIndeterminate","renderIcon","isChecked","isIndet","iconClassName","dataSelected","dataIndeterminate","isValidElement","iconElement","cloneElement","AriaCheckbox","renderProps","jsxs","Fragment","tableContainerVariants","tableVariants","tableHeaderVariants","tableFooterVariants","tableCaptionVariants","columnVariants","rowVariants","cellVariants","TableContext","createContext","Table","stickyHeader","selectionMode","selectionBehavior","disallowEmptySelection","disabledBehavior","selectedKeys","defaultSelectedKeys","onSelectionChange","disabledKeys","sortDescriptor","onSortChange","onRowAction","children","contextValue","useMemo","AriaTable","TableHeaderInner","columns","useContext","allowsDragging","useTableOptions","AriaTableHeader","AriaColumn","Collection","TableHeader","TableBodyInner","items","renderEmptyState","AriaTableBody","TableBody","TableFooter","TableCaption","Column","isRowHeader","allowsSorting","align","width","minWidth","maxWidth","canSort","sortDirection","ChevronUp","ChevronDown","RowInner","href","rowVariant","selectedClasses","unselectedClasses","selectionCellClasses","AriaRow","disabled","AriaCell","Row","Cell","memo","_colSpan"],"mappings":"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","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 * 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","\"use client\";\n\n/**\n * Checkbox Component\n * Standalone accessible checkbox with React Aria primitives and CVA styling\n *\n * Key Features:\n * - Standalone checkbox (not requiring CheckboxGroup)\n * - 44px+ touch targets (WCAG 2.2 AAA)\n * - 2 variants: default, destructive\n * - 3 sizes: sm, default, lg\n * - Indeterminate state support\n * - Spring animation for checkmark\n * - RTL support\n * - Works with React Aria slot system (for Table integration)\n *\n * @see React Aria Checkbox: https://react-spectrum.adobe.com/react-aria/Checkbox.html\n * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AAA)\n */\n\nimport {\n forwardRef,\n cloneElement,\n isValidElement,\n type ReactNode,\n type ReactElement,\n} from 'react';\nimport { Checkbox as AriaCheckbox } from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { FOCUS_STYLES, HIGH_CONTRAST_FOCUS } from '../../styles/interaction-states';\nimport type { CheckboxProps } from './Checkbox.types';\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * Checkbox container variants\n * Controls the overall checkbox layout with touch target\n */\nconst checkboxContainerVariants = cva(\n [\n \"group inline-flex items-center gap-2 cursor-pointer\",\n \"transition-colors duration-200\",\n \"rtl:flex-row-reverse\",\n FOCUS_STYLES,\n HIGH_CONTRAST_FOCUS,\n ].join(\" \"),\n {\n variants: {\n size: {\n sm: \"min-h-[44px] text-sm\",\n default: \"min-h-[44px] text-sm\",\n lg: \"min-h-[48px] text-base\",\n },\n isDisabled: {\n true: \"opacity-50 cursor-not-allowed\",\n false: \"\",\n },\n },\n defaultVariants: {\n size: \"default\",\n isDisabled: false,\n },\n }\n);\n\n/**\n * Checkbox indicator (the box) variants\n */\nconst checkboxIndicatorVariants = cva(\n \"flex-shrink-0 rounded-sm border-2 flex items-center justify-center transition-colors duration-200\",\n {\n variants: {\n variant: {\n default: [\n \"border-[var(--border)]\",\n \"data-[selected]:border-[var(--primary)]\",\n \"data-[selected]:bg-[var(--primary)]\",\n \"data-[indeterminate]:border-[var(--primary)]\",\n \"data-[indeterminate]:bg-[var(--primary)]\",\n ].join(\" \"),\n destructive: [\n \"border-[var(--border)]\",\n \"data-[selected]:border-[var(--destructive)]\",\n \"data-[selected]:bg-[var(--destructive)]\",\n \"data-[indeterminate]:border-[var(--destructive)]\",\n \"data-[indeterminate]:bg-[var(--destructive)]\",\n ].join(\" \"),\n },\n size: {\n sm: \"h-4 w-4\",\n default: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n isInvalid: {\n true: \"border-[var(--destructive)]\",\n false: \"\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n isInvalid: false,\n },\n }\n);\n\n/**\n * Checkmark icon variants with spring animation\n */\nconst checkmarkVariants = cva(\n [\n \"transition-transform duration-200\",\n \"[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]\",\n \"motion-reduce:transition-none\",\n \"scale-0 data-[selected]:scale-100 data-[indeterminate]:scale-100\",\n ].join(\" \"),\n {\n variants: {\n variant: {\n default: \"text-[var(--primary-foreground)]\",\n destructive: \"text-[var(--destructive-foreground)]\",\n },\n size: {\n sm: \"h-3 w-3\",\n default: \"h-3.5 w-3.5\",\n lg: \"h-4 w-4\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n// ============================================================================\n// Icon Components\n// ============================================================================\n\n/**\n * Checkmark SVG icon\n */\nfunction CheckmarkIcon({ className, ...props }: { className?: string; 'data-selected'?: boolean; 'data-indeterminate'?: boolean }): ReactNode {\n return (\n <svg\n className={className}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={3}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n {...props}\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n );\n}\n\n/**\n * Minus (indeterminate) SVG icon\n */\nfunction MinusIcon({ className, ...props }: { className?: string; 'data-selected'?: boolean; 'data-indeterminate'?: boolean }): ReactNode {\n return (\n <svg\n className={className}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={3}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n {...props}\n >\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n </svg>\n );\n}\n\n// ============================================================================\n// Checkbox Component\n// ============================================================================\n\n/**\n * Standalone Checkbox component\n * Accessible checkbox that can be used independently or within Table\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n isSelected,\n defaultSelected,\n isDisabled,\n isReadOnly,\n isIndeterminate,\n isInvalid = false,\n isRequired = false,\n onChange,\n onFocusChange,\n value,\n name,\n size = 'default',\n variant = 'default',\n label,\n description,\n selectedIcon,\n className,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'data-testid': dataTestId,\n slot,\n },\n ref\n ) => {\n // Only set these props when explicitly true to allow slot system to control them\n // (e.g., Table's selection slot injects isIndeterminate for partial selection)\n const computedIsDisabled = isDisabled || undefined;\n const computedIsReadOnly = isReadOnly || undefined;\n const computedIsIndeterminate = isIndeterminate || undefined;\n // Render the icon based on state\n const renderIcon = (isChecked: boolean, isIndet: boolean) => {\n const iconClassName = cn(checkmarkVariants({ variant, size }));\n const dataSelected = isChecked || undefined;\n const dataIndeterminate = isIndet || undefined;\n\n // For indeterminate state, always show minus\n if (isIndet) {\n return (\n <MinusIcon\n className={iconClassName}\n data-selected={dataSelected}\n data-indeterminate={dataIndeterminate}\n />\n );\n }\n\n // Custom icon support\n if (selectedIcon && isChecked) {\n if (isValidElement(selectedIcon)) {\n const iconElement = selectedIcon as ReactElement<{ className?: string; 'data-selected'?: boolean }>;\n return cloneElement(iconElement, {\n className: cn(iconClassName, iconElement.props.className),\n 'data-selected': dataSelected,\n });\n }\n return <span className={iconClassName} data-selected={dataSelected}>{selectedIcon}</span>;\n }\n\n // Default checkmark\n return (\n <CheckmarkIcon\n className={iconClassName}\n data-selected={dataSelected}\n data-indeterminate={dataIndeterminate}\n />\n );\n };\n\n return (\n <AriaCheckbox\n ref={ref}\n id={id}\n isSelected={isSelected}\n defaultSelected={defaultSelected}\n isDisabled={computedIsDisabled}\n isReadOnly={computedIsReadOnly}\n isIndeterminate={computedIsIndeterminate}\n isInvalid={isInvalid}\n isRequired={isRequired}\n onChange={onChange}\n onFocusChange={onFocusChange}\n value={value}\n name={name}\n slot={slot}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n data-testid={dataTestId}\n className={(renderProps) =>\n cn(\n checkboxContainerVariants({\n size,\n isDisabled: renderProps.isDisabled,\n }),\n className\n )\n }\n >\n {(renderProps) => (\n <>\n {/* Checkbox indicator (the box) */}\n <div\n className={checkboxIndicatorVariants({\n variant,\n size,\n isInvalid: renderProps.isInvalid,\n })}\n data-selected={renderProps.isSelected || undefined}\n data-indeterminate={renderProps.isIndeterminate || undefined}\n >\n {renderIcon(renderProps.isSelected, renderProps.isIndeterminate)}\n </div>\n\n {/* Label and description */}\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <span className=\"font-medium text-[var(--content-foreground)]\">\n {label}\n </span>\n )}\n {description && (\n <span className=\"text-sm text-[var(--menu-muted)]\">\n {description}\n </span>\n )}\n </div>\n )}\n </>\n )}\n </AriaCheckbox>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n Checkbox,\n checkboxContainerVariants,\n checkboxIndicatorVariants,\n checkmarkVariants,\n CheckmarkIcon,\n MinusIcon,\n};\n","import { cva } from 'class-variance-authority';\n\n// Table container variants (wrapper div)\nexport const tableContainerVariants = cva(['relative w-full overflow-auto']);\n\n// Table variants\nexport const tableVariants = cva(\n ['w-full caption-bottom text-sm', 'border-collapse'],\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border border-[var(--border)] rounded-md',\n striped: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\n// Table header variants\nexport const tableHeaderVariants = cva(['[&_tr]:border-b'], {\n variants: {\n sticky: {\n true: 'sticky top-0 z-10 bg-[var(--content-background)]',\n false: '',\n },\n },\n defaultVariants: {\n sticky: false,\n },\n});\n\n// Table footer variants\nexport const tableFooterVariants = cva([\n 'border-t border-[var(--border)]',\n 'bg-[var(--accent-background)]/50',\n 'font-medium',\n '[&>tr]:last:border-b-0',\n]);\n\n// Table caption variants\nexport const tableCaptionVariants = cva([\n 'mt-4 text-sm text-[var(--menu-muted)]',\n]);\n\n// Column variants\nexport const columnVariants = cva(\n [\n 'h-12 px-4 text-left align-middle font-medium',\n 'text-[var(--menu-muted)]',\n '[&:has([role=checkbox])]:pr-0',\n 'select-none',\n 'focus-visible:outline-none focus-visible:ring-2',\n 'focus-visible:ring-[var(--ring)] focus-visible:ring-inset',\n ],\n {\n variants: {\n allowsSorting: {\n true: 'cursor-pointer hover:bg-[var(--accent)]/50',\n false: '',\n },\n align: {\n start: 'text-start',\n center: 'text-center',\n end: 'text-end',\n },\n size: {\n sm: 'h-10 px-3 text-xs',\n default: 'h-12 px-4 text-sm',\n lg: 'h-14 px-5 text-base',\n },\n },\n defaultVariants: {\n allowsSorting: false,\n align: 'start',\n size: 'default',\n },\n }\n);\n\n// Row variants\nexport const rowVariants = cva(\n [\n 'border-b border-[var(--border)]',\n 'transition-colors',\n 'focus-visible:outline-none focus-visible:ring-2',\n 'focus-visible:ring-[var(--ring)] focus-visible:ring-inset',\n 'hover:bg-[var(--accent-background)]/50',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n ],\n {\n variants: {\n isSelected: {\n true: 'bg-[var(--accent)] data-[selected]:bg-[var(--accent)]',\n false: '',\n },\n variant: {\n default: '',\n striped: 'even:bg-[var(--accent-background)]/30',\n },\n },\n defaultVariants: {\n isSelected: false,\n variant: 'default',\n },\n }\n);\n\n// Cell variants\nexport const cellVariants = cva(\n ['p-4 align-middle', '[&:has([role=checkbox])]:pr-0'],\n {\n variants: {\n align: {\n start: 'text-start',\n center: 'text-center',\n end: 'text-end',\n },\n size: {\n sm: 'p-3 text-xs',\n default: 'p-4 text-sm',\n lg: 'p-5 text-base',\n },\n isRowHeader: {\n true: 'font-medium',\n false: '',\n },\n },\n defaultVariants: {\n align: 'start',\n size: 'default',\n isRowHeader: false,\n },\n }\n);\n","'use client';\n\n/**\n * Table Component - Accessible Data Table (v1)\n * ARIA grid pattern with React Aria primitives\n *\n * @see plan.md for architecture details\n * @see table-prd.md for requirements\n * @see WCAG 2.2 AAA compliance\n */\n\nimport {\n forwardRef,\n memo,\n createContext,\n useContext,\n useMemo,\n type ReactNode,\n type ReactElement,\n type ForwardedRef,\n} from 'react';\nimport {\n Table as AriaTable,\n TableHeader as AriaTableHeader,\n TableBody as AriaTableBody,\n Column as AriaColumn,\n Row as AriaRow,\n Cell as AriaCell,\n Collection,\n useTableOptions,\n type TableHeaderProps as AriaTableHeaderProps,\n type TableBodyProps as AriaTableBodyProps,\n type RowProps as AriaRowProps,\n type CellProps as AriaCellProps,\n type Selection,\n type SortDescriptor,\n} from 'react-aria-components';\nimport { Checkbox } from '../Checkbox';\nimport { ChevronUp, ChevronDown } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport {\n tableContainerVariants,\n tableVariants,\n tableHeaderVariants,\n tableFooterVariants,\n tableCaptionVariants,\n columnVariants,\n rowVariants,\n cellVariants,\n} from './Table.styles';\nimport type {\n TableProps,\n TableHeaderProps,\n TableBodyProps,\n TableFooterProps,\n TableCaptionProps,\n ColumnProps,\n RowProps,\n CellProps,\n TableVariant,\n TableSize,\n} from './Table.types';\n\n// ============================================================================\n// Context for passing table-level props to children\n// ============================================================================\n\ninterface TableContextValue {\n variant: TableVariant;\n size: TableSize;\n selectionMode: 'none' | 'single' | 'multiple';\n stickyHeader: boolean;\n}\n\nconst TableContext = createContext<TableContextValue>({\n variant: 'default',\n size: 'default',\n selectionMode: 'none',\n stickyHeader: false,\n});\n\n// ============================================================================\n// Table Component\n// ============================================================================\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n (\n {\n className,\n variant = 'default',\n size = 'default',\n stickyHeader = false,\n selectionMode = 'none',\n selectionBehavior = 'toggle',\n disallowEmptySelection = false,\n disabledBehavior = 'selection',\n selectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n disabledKeys,\n sortDescriptor,\n onSortChange,\n onRowAction,\n children,\n ...props\n },\n ref\n ) => {\n // Warn when sm size is used with selection (touch targets < 44px)\n if (process.env.NODE_ENV !== 'production' && size === 'sm' && selectionMode !== 'none') {\n console.warn(\n '[Table] size=\"sm\" with selectionMode produces rows shorter than the 44px WCAG 2.2 AAA minimum touch target. ' +\n 'Use size=\"default\" or size=\"lg\" for accessible interactive tables.'\n );\n }\n\n const contextValue = useMemo(\n () => ({ variant, size, selectionMode, stickyHeader }),\n [variant, size, selectionMode, stickyHeader]\n );\n\n return (\n <TableContext.Provider value={contextValue}>\n <div\n className={cn(tableContainerVariants(), className)}\n data-testid=\"table-container\"\n >\n <AriaTable\n ref={ref}\n className={cn(tableVariants({ variant }))}\n selectionMode={selectionMode}\n selectionBehavior={selectionBehavior}\n disallowEmptySelection={disallowEmptySelection}\n disabledBehavior={disabledBehavior}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={defaultSelectedKeys}\n onSelectionChange={onSelectionChange}\n disabledKeys={disabledKeys}\n sortDescriptor={sortDescriptor}\n onSortChange={onSortChange}\n onRowAction={onRowAction}\n data-testid=\"table\"\n data-variant={variant}\n data-size={size}\n {...props}\n >\n {children}\n </AriaTable>\n </div>\n </TableContext.Provider>\n );\n }\n);\n\nTable.displayName = 'Table';\n\n// ============================================================================\n// TableHeader Component\n// ============================================================================\n\nfunction TableHeaderInner<T extends object>(\n { className, children, columns, ...props }: TableHeaderProps<T>,\n ref: ForwardedRef<HTMLTableSectionElement>\n): ReactElement {\n const { size, selectionMode, stickyHeader } = useContext(TableContext);\n const { allowsDragging } = useTableOptions();\n\n return (\n <AriaTableHeader\n ref={ref}\n className={cn(tableHeaderVariants({ sticky: stickyHeader }), className)}\n data-testid=\"table-header\"\n {...(props as AriaTableHeaderProps<T>)}\n >\n {/* Selection checkbox column */}\n {selectionMode === 'multiple' && (\n <AriaColumn className={cn(columnVariants({ size }), 'w-12')}>\n <Checkbox slot=\"selection\" aria-label=\"Select all\" size={size} />\n </AriaColumn>\n )}\n {/* Drag handle column if dragging is allowed */}\n {allowsDragging && <AriaColumn />}\n {/* Render columns */}\n {columns ? (\n <Collection items={columns}>{children as (item: T) => ReactElement}</Collection>\n ) : (\n children\n )}\n </AriaTableHeader>\n );\n}\n\nconst TableHeader = forwardRef(TableHeaderInner) as <T extends object>(\n props: TableHeaderProps<T> & { ref?: ForwardedRef<HTMLTableSectionElement> }\n) => ReactElement;\n\n(TableHeader as { displayName?: string }).displayName = 'TableHeader';\n\n// ============================================================================\n// TableBody Component\n// ============================================================================\n\nfunction TableBodyInner<T extends object>(\n { className, children, items, renderEmptyState, ...props }: TableBodyProps<T>,\n ref: ForwardedRef<HTMLTableSectionElement>\n): ReactElement {\n return (\n <AriaTableBody\n ref={ref}\n className={cn(className)}\n items={items}\n renderEmptyState={\n renderEmptyState\n ? () => (\n <tr>\n <td colSpan={99} className=\"text-center p-8\">\n {renderEmptyState()}\n </td>\n </tr>\n )\n : undefined\n }\n data-testid=\"table-body\"\n {...(props as AriaTableBodyProps<T>)}\n >\n {children as AriaTableBodyProps<T>['children']}\n </AriaTableBody>\n );\n}\n\nconst TableBody = forwardRef(TableBodyInner) as <T extends object>(\n props: TableBodyProps<T> & { ref?: ForwardedRef<HTMLTableSectionElement> }\n) => ReactElement;\n\n(TableBody as { displayName?: string }).displayName = 'TableBody';\n\n// ============================================================================\n// TableFooter Component (Custom - not from React Aria)\n// ============================================================================\n\nconst TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <tfoot\n ref={ref}\n className={cn(tableFooterVariants(), className)}\n data-testid=\"table-footer\"\n {...props}\n >\n {children}\n </tfoot>\n );\n }\n);\n\nTableFooter.displayName = 'TableFooter';\n\n// ============================================================================\n// TableCaption Component (Custom - not from React Aria)\n// ============================================================================\n\nconst TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <caption\n ref={ref}\n className={cn(tableCaptionVariants(), className)}\n data-testid=\"table-caption\"\n {...props}\n >\n {children}\n </caption>\n );\n }\n);\n\nTableCaption.displayName = 'TableCaption';\n\n// ============================================================================\n// Column Component\n// ============================================================================\n\nconst Column = forwardRef<HTMLTableCellElement, ColumnProps>(\n (\n {\n className,\n children,\n isRowHeader = false,\n allowsSorting = false,\n align = 'start',\n width,\n minWidth,\n maxWidth,\n ...props\n },\n ref\n ) => {\n const { size } = useContext(TableContext);\n\n return (\n <AriaColumn\n ref={ref}\n isRowHeader={isRowHeader}\n allowsSorting={allowsSorting}\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n className={cn(columnVariants({ allowsSorting, align, size }), className)}\n {...props}\n >\n {({ allowsSorting: canSort, sortDirection }) => (\n <div className=\"flex items-center gap-1\">\n <span>{children as ReactNode}</span>\n {canSort && sortDirection && (\n <span aria-hidden=\"true\" data-sort-direction={sortDirection}>\n {sortDirection === 'ascending' ? (\n <ChevronUp className=\"h-4 w-4\" />\n ) : (\n <ChevronDown className=\"h-4 w-4\" />\n )}\n </span>\n )}\n </div>\n )}\n </AriaColumn>\n );\n }\n);\n\n(Column as { displayName?: string }).displayName = 'Column';\n\n// ============================================================================\n// Row Component\n// ============================================================================\n\nfunction RowInner<T extends object>(\n { className, children, columns, href, isDisabled, ...props }: RowProps<T>,\n ref: ForwardedRef<HTMLTableRowElement>\n): ReactElement {\n const { variant, size, selectionMode } = useContext(TableContext);\n const { allowsDragging } = useTableOptions();\n\n // Pre-compute variant class strings to avoid CVA calls in render callback\n const rowVariant = variant === 'striped' ? 'striped' as const : 'default' as const;\n const selectedClasses = rowVariants({ isSelected: true, variant: rowVariant });\n const unselectedClasses = rowVariants({ isSelected: false, variant: rowVariant });\n const selectionCellClasses = cn(cellVariants({ size }), 'w-12');\n\n return (\n <AriaRow\n ref={ref}\n href={href}\n isDisabled={isDisabled}\n className={({ isSelected, isDisabled: disabled }) =>\n cn(\n isSelected ? selectedClasses : unselectedClasses,\n disabled && 'opacity-50',\n className\n )\n }\n data-testid=\"table-row\"\n {...(props as AriaRowProps<T>)}\n >\n {/* Selection checkbox cell */}\n {selectionMode === 'multiple' && (\n <AriaCell className={selectionCellClasses}>\n <Checkbox slot=\"selection\" aria-label=\"Select row\" size={size} />\n </AriaCell>\n )}\n {/* Drag handle cell if dragging is allowed */}\n {allowsDragging && (\n <AriaCell>\n {/* Placeholder for drag handle - v2 feature */}\n </AriaCell>\n )}\n {/* Render cells */}\n {columns ? (\n <Collection items={columns}>{children as (item: T) => ReactElement}</Collection>\n ) : (\n children\n )}\n </AriaRow>\n );\n}\n\nconst Row = forwardRef(RowInner) as <T extends object>(\n props: RowProps<T> & { ref?: ForwardedRef<HTMLTableRowElement> }\n) => ReactElement;\n\n(Row as { displayName?: string }).displayName = 'Row';\n\n// ============================================================================\n// Cell Component\n// ============================================================================\n\nconst Cell = memo(forwardRef<HTMLTableCellElement, CellProps>(\n ({ className, children, align = 'start', colSpan: _colSpan, ...props }, ref) => {\n const { size } = useContext(TableContext);\n\n return (\n <AriaCell\n ref={ref}\n className={cn(cellVariants({ align, size }), className)}\n {...(props as AriaCellProps)}\n >\n {children}\n </AriaCell>\n );\n }\n));\n\nCell.displayName = 'Cell';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableCaption,\n Column,\n Row,\n Cell,\n};\n\n// Re-export CVA variants (defined in Table.styles.ts)\nexport {\n tableContainerVariants,\n tableVariants,\n tableHeaderVariants,\n tableFooterVariants,\n tableCaptionVariants,\n columnVariants,\n rowVariants,\n cellVariants,\n};\n\n// Re-export types\nexport type { Selection, SortDescriptor };\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/interaction-states.ts","../../../src/elements/Checkbox/Checkbox.tsx","../../../src/elements/Table/Table.styles.ts","../../../src/elements/Table/Table.tsx"],"names":["cn","inputs","twMerge","clsx","FOCUS_STYLES","HIGH_CONTRAST_FOCUS","checkboxContainerVariants","cva","checkboxIndicatorVariants","checkmarkVariants","CheckmarkIcon","className","props","jsx","MinusIcon","Checkbox","forwardRef","isSelected","defaultSelected","isDisabled","isReadOnly","isIndeterminate","isInvalid","isRequired","onChange","onFocusChange","value","name","size","variant","label","description","selectedIcon","id","ariaLabel","ariaLabelledby","ariaDescribedby","dataTestId","slot","ref","computedIsDisabled","computedIsReadOnly","computedIsIndeterminate","renderIcon","isChecked","isIndet","iconClassName","dataSelected","dataIndeterminate","isValidElement","iconElement","cloneElement","AriaCheckbox","renderProps","jsxs","Fragment","tableContainerVariants","tableVariants","tableHeaderVariants","tableFooterVariants","tableCaptionVariants","columnVariants","rowVariants","cellVariants","TableContext","createContext","Table","stickyHeader","selectionMode","selectionBehavior","disallowEmptySelection","disabledBehavior","selectedKeys","defaultSelectedKeys","onSelectionChange","disabledKeys","sortDescriptor","onSortChange","onRowAction","children","contextValue","useMemo","AriaTable","TableHeaderInner","columns","useContext","allowsDragging","useTableOptions","AriaTableHeader","AriaColumn","Collection","TableHeader","TableBodyInner","items","renderEmptyState","AriaTableBody","TableBody","TableFooter","TableCaption","Column","isRowHeader","allowsSorting","align","width","minWidth","maxWidth","canSort","sortDirection","ChevronUp","ChevronDown","RowInner","href","rowVariant","selectedClasses","unselectedClasses","selectionCellClasses","AriaRow","disabled","AriaCell","Row","Cell","memo","_colSpan"],"mappings":"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","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 * 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","\"use client\";\n\n/**\n * Checkbox Component\n * Standalone accessible checkbox with React Aria primitives and CVA styling\n *\n * Key Features:\n * - Standalone checkbox (not requiring CheckboxGroup)\n * - 44px+ touch targets (WCAG 2.2 AAA)\n * - 2 variants: default, destructive\n * - 3 sizes: sm, default, lg\n * - Indeterminate state support\n * - Spring animation for checkmark\n * - RTL support\n * - Works with React Aria slot system (for Table integration)\n *\n * @see React Aria Checkbox: https://react-spectrum.adobe.com/react-aria/Checkbox.html\n * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AAA)\n */\n\nimport {\n forwardRef,\n cloneElement,\n isValidElement,\n type ReactNode,\n type ReactElement,\n} from 'react';\nimport { Checkbox as AriaCheckbox } from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { FOCUS_STYLES, HIGH_CONTRAST_FOCUS } from '../../styles/interaction-states';\nimport type { CheckboxProps } from './Checkbox.types';\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * Checkbox container variants\n * Controls the overall checkbox layout with touch target\n */\nconst checkboxContainerVariants = cva(\n [\n \"group inline-flex items-center gap-2 cursor-pointer\",\n \"transition-colors duration-200\",\n \"rtl:flex-row-reverse\",\n FOCUS_STYLES,\n HIGH_CONTRAST_FOCUS,\n ].join(\" \"),\n {\n variants: {\n size: {\n sm: \"min-h-[44px] text-sm\",\n default: \"min-h-[44px] text-sm\",\n lg: \"min-h-[48px] text-base\",\n },\n isDisabled: {\n true: \"opacity-50 cursor-not-allowed\",\n false: \"\",\n },\n },\n defaultVariants: {\n size: \"default\",\n isDisabled: false,\n },\n }\n);\n\n/**\n * Checkbox indicator (the box) variants\n */\nconst checkboxIndicatorVariants = cva(\n \"flex-shrink-0 rounded-sm border-2 flex items-center justify-center transition-colors duration-200\",\n {\n variants: {\n variant: {\n default: [\n \"border-[var(--border)]\",\n \"data-[selected]:border-[var(--primary)]\",\n \"data-[selected]:bg-[var(--primary)]\",\n \"data-[indeterminate]:border-[var(--primary)]\",\n \"data-[indeterminate]:bg-[var(--primary)]\",\n ].join(\" \"),\n destructive: [\n \"border-[var(--border)]\",\n \"data-[selected]:border-[var(--destructive-background)]\",\n \"data-[selected]:bg-[var(--destructive-background)]\",\n \"data-[indeterminate]:border-[var(--destructive-background)]\",\n \"data-[indeterminate]:bg-[var(--destructive-background)]\",\n ].join(\" \"),\n },\n size: {\n sm: \"h-4 w-4\",\n default: \"h-5 w-5\",\n lg: \"h-6 w-6\",\n },\n isInvalid: {\n true: \"border-[var(--destructive-background)]\",\n false: \"\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n isInvalid: false,\n },\n }\n);\n\n/**\n * Checkmark icon variants with spring animation\n */\nconst checkmarkVariants = cva(\n [\n \"transition-transform duration-200\",\n \"[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]\",\n \"motion-reduce:transition-none\",\n \"scale-0 data-[selected]:scale-100 data-[indeterminate]:scale-100\",\n ].join(\" \"),\n {\n variants: {\n variant: {\n default: \"text-[var(--primary-foreground)]\",\n destructive: \"text-[var(--destructive-foreground)]\",\n },\n size: {\n sm: \"h-3 w-3\",\n default: \"h-3.5 w-3.5\",\n lg: \"h-4 w-4\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n// ============================================================================\n// Icon Components\n// ============================================================================\n\n/**\n * Checkmark SVG icon\n */\nfunction CheckmarkIcon({ className, ...props }: { className?: string; 'data-selected'?: boolean; 'data-indeterminate'?: boolean }): ReactNode {\n return (\n <svg\n className={className}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={3}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n {...props}\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n );\n}\n\n/**\n * Minus (indeterminate) SVG icon\n */\nfunction MinusIcon({ className, ...props }: { className?: string; 'data-selected'?: boolean; 'data-indeterminate'?: boolean }): ReactNode {\n return (\n <svg\n className={className}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={3}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n {...props}\n >\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n </svg>\n );\n}\n\n// ============================================================================\n// Checkbox Component\n// ============================================================================\n\n/**\n * Standalone Checkbox component\n * Accessible checkbox that can be used independently or within Table\n */\nconst Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (\n {\n isSelected,\n defaultSelected,\n isDisabled,\n isReadOnly,\n isIndeterminate,\n isInvalid = false,\n isRequired = false,\n onChange,\n onFocusChange,\n value,\n name,\n size = 'default',\n variant = 'default',\n label,\n description,\n selectedIcon,\n className,\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'data-testid': dataTestId,\n slot,\n },\n ref\n ) => {\n // Only set these props when explicitly true to allow slot system to control them\n // (e.g., Table's selection slot injects isIndeterminate for partial selection)\n const computedIsDisabled = isDisabled || undefined;\n const computedIsReadOnly = isReadOnly || undefined;\n const computedIsIndeterminate = isIndeterminate || undefined;\n // Render the icon based on state\n const renderIcon = (isChecked: boolean, isIndet: boolean) => {\n const iconClassName = cn(checkmarkVariants({ variant, size }));\n const dataSelected = isChecked || undefined;\n const dataIndeterminate = isIndet || undefined;\n\n // For indeterminate state, always show minus\n if (isIndet) {\n return (\n <MinusIcon\n className={iconClassName}\n data-selected={dataSelected}\n data-indeterminate={dataIndeterminate}\n />\n );\n }\n\n // Custom icon support\n if (selectedIcon && isChecked) {\n if (isValidElement(selectedIcon)) {\n const iconElement = selectedIcon as ReactElement<{ className?: string; 'data-selected'?: boolean }>;\n return cloneElement(iconElement, {\n className: cn(iconClassName, iconElement.props.className),\n 'data-selected': dataSelected,\n });\n }\n return <span className={iconClassName} data-selected={dataSelected}>{selectedIcon}</span>;\n }\n\n // Default checkmark\n return (\n <CheckmarkIcon\n className={iconClassName}\n data-selected={dataSelected}\n data-indeterminate={dataIndeterminate}\n />\n );\n };\n\n return (\n <AriaCheckbox\n ref={ref}\n id={id}\n isSelected={isSelected}\n defaultSelected={defaultSelected}\n isDisabled={computedIsDisabled}\n isReadOnly={computedIsReadOnly}\n isIndeterminate={computedIsIndeterminate}\n isInvalid={isInvalid}\n isRequired={isRequired}\n onChange={onChange}\n onFocusChange={onFocusChange}\n value={value}\n name={name}\n slot={slot}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n data-testid={dataTestId}\n className={(renderProps) =>\n cn(\n checkboxContainerVariants({\n size,\n isDisabled: renderProps.isDisabled,\n }),\n className\n )\n }\n >\n {(renderProps) => (\n <>\n {/* Checkbox indicator (the box) */}\n <div\n className={checkboxIndicatorVariants({\n variant,\n size,\n isInvalid: renderProps.isInvalid,\n })}\n data-selected={renderProps.isSelected || undefined}\n data-indeterminate={renderProps.isIndeterminate || undefined}\n >\n {renderIcon(renderProps.isSelected, renderProps.isIndeterminate)}\n </div>\n\n {/* Label and description */}\n {(label || description) && (\n <div className=\"flex flex-col\">\n {label && (\n <span className=\"font-medium text-[var(--content-foreground)]\">\n {label}\n </span>\n )}\n {description && (\n <span className=\"text-sm text-[var(--menu-muted)]\">\n {description}\n </span>\n )}\n </div>\n )}\n </>\n )}\n </AriaCheckbox>\n );\n }\n);\n\nCheckbox.displayName = \"Checkbox\";\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n Checkbox,\n checkboxContainerVariants,\n checkboxIndicatorVariants,\n checkmarkVariants,\n CheckmarkIcon,\n MinusIcon,\n};\n","import { cva } from 'class-variance-authority';\n\n// Table container variants (wrapper div)\nexport const tableContainerVariants = cva(['relative w-full overflow-auto']);\n\n// Table variants\nexport const tableVariants = cva(\n ['w-full caption-bottom text-sm', 'border-collapse'],\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border border-[var(--border)] rounded-md',\n striped: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\n// Table header variants\nexport const tableHeaderVariants = cva(['[&_tr]:border-b'], {\n variants: {\n sticky: {\n true: 'sticky top-0 z-10 bg-[var(--content-background)]',\n false: '',\n },\n },\n defaultVariants: {\n sticky: false,\n },\n});\n\n// Table footer variants\nexport const tableFooterVariants = cva([\n 'border-t border-[var(--border)]',\n 'bg-[var(--accent-background)]/50',\n 'font-medium',\n '[&>tr]:last:border-b-0',\n]);\n\n// Table caption variants\nexport const tableCaptionVariants = cva([\n 'mt-4 text-sm text-[var(--menu-muted)]',\n]);\n\n// Column variants\nexport const columnVariants = cva(\n [\n 'h-12 px-4 text-left align-middle font-medium',\n 'text-[var(--menu-muted)]',\n '[&:has([role=checkbox])]:pr-0',\n 'select-none',\n 'focus-visible:outline-none focus-visible:ring-2',\n 'focus-visible:ring-[var(--ring)] focus-visible:ring-inset',\n ],\n {\n variants: {\n allowsSorting: {\n true: 'cursor-pointer hover:bg-[var(--accent)]/50',\n false: '',\n },\n align: {\n start: 'text-start',\n center: 'text-center',\n end: 'text-end',\n },\n size: {\n sm: 'h-10 px-3 text-xs',\n default: 'h-12 px-4 text-sm',\n lg: 'h-14 px-5 text-base',\n },\n },\n defaultVariants: {\n allowsSorting: false,\n align: 'start',\n size: 'default',\n },\n }\n);\n\n// Row variants\nexport const rowVariants = cva(\n [\n 'border-b border-[var(--border)]',\n 'transition-colors',\n 'focus-visible:outline-none focus-visible:ring-2',\n 'focus-visible:ring-[var(--ring)] focus-visible:ring-inset',\n 'hover:bg-[var(--accent-background)]/50',\n 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n ],\n {\n variants: {\n isSelected: {\n true: 'bg-[var(--accent)] data-[selected]:bg-[var(--accent)]',\n false: '',\n },\n variant: {\n default: '',\n striped: 'even:bg-[var(--accent-background)]/30',\n },\n },\n defaultVariants: {\n isSelected: false,\n variant: 'default',\n },\n }\n);\n\n// Cell variants\nexport const cellVariants = cva(\n ['p-4 align-middle', '[&:has([role=checkbox])]:pr-0'],\n {\n variants: {\n align: {\n start: 'text-start',\n center: 'text-center',\n end: 'text-end',\n },\n size: {\n sm: 'p-3 text-xs',\n default: 'p-4 text-sm',\n lg: 'p-5 text-base',\n },\n isRowHeader: {\n true: 'font-medium',\n false: '',\n },\n },\n defaultVariants: {\n align: 'start',\n size: 'default',\n isRowHeader: false,\n },\n }\n);\n","'use client';\n\n/**\n * Table Component - Accessible Data Table (v1)\n * ARIA grid pattern with React Aria primitives\n *\n * @see plan.md for architecture details\n * @see table-prd.md for requirements\n * @see WCAG 2.2 AAA compliance\n */\n\nimport {\n forwardRef,\n memo,\n createContext,\n useContext,\n useMemo,\n type ReactNode,\n type ReactElement,\n type ForwardedRef,\n} from 'react';\nimport {\n Table as AriaTable,\n TableHeader as AriaTableHeader,\n TableBody as AriaTableBody,\n Column as AriaColumn,\n Row as AriaRow,\n Cell as AriaCell,\n Collection,\n useTableOptions,\n type TableHeaderProps as AriaTableHeaderProps,\n type TableBodyProps as AriaTableBodyProps,\n type RowProps as AriaRowProps,\n type CellProps as AriaCellProps,\n type Selection,\n type SortDescriptor,\n} from 'react-aria-components';\nimport { Checkbox } from '../Checkbox';\nimport { ChevronUp, ChevronDown } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport {\n tableContainerVariants,\n tableVariants,\n tableHeaderVariants,\n tableFooterVariants,\n tableCaptionVariants,\n columnVariants,\n rowVariants,\n cellVariants,\n} from './Table.styles';\nimport type {\n TableProps,\n TableHeaderProps,\n TableBodyProps,\n TableFooterProps,\n TableCaptionProps,\n ColumnProps,\n RowProps,\n CellProps,\n TableVariant,\n TableSize,\n} from './Table.types';\n\n// ============================================================================\n// Context for passing table-level props to children\n// ============================================================================\n\ninterface TableContextValue {\n variant: TableVariant;\n size: TableSize;\n selectionMode: 'none' | 'single' | 'multiple';\n stickyHeader: boolean;\n}\n\nconst TableContext = createContext<TableContextValue>({\n variant: 'default',\n size: 'default',\n selectionMode: 'none',\n stickyHeader: false,\n});\n\n// ============================================================================\n// Table Component\n// ============================================================================\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n (\n {\n className,\n variant = 'default',\n size = 'default',\n stickyHeader = false,\n selectionMode = 'none',\n selectionBehavior = 'toggle',\n disallowEmptySelection = false,\n disabledBehavior = 'selection',\n selectedKeys,\n defaultSelectedKeys,\n onSelectionChange,\n disabledKeys,\n sortDescriptor,\n onSortChange,\n onRowAction,\n children,\n ...props\n },\n ref\n ) => {\n // Warn when sm size is used with selection (touch targets < 44px)\n if (process.env.NODE_ENV !== 'production' && size === 'sm' && selectionMode !== 'none') {\n console.warn(\n '[Table] size=\"sm\" with selectionMode produces rows shorter than the 44px WCAG 2.2 AAA minimum touch target. ' +\n 'Use size=\"default\" or size=\"lg\" for accessible interactive tables.'\n );\n }\n\n const contextValue = useMemo(\n () => ({ variant, size, selectionMode, stickyHeader }),\n [variant, size, selectionMode, stickyHeader]\n );\n\n return (\n <TableContext.Provider value={contextValue}>\n <div\n className={cn(tableContainerVariants(), className)}\n data-testid=\"table-container\"\n >\n <AriaTable\n ref={ref}\n className={cn(tableVariants({ variant }))}\n selectionMode={selectionMode}\n selectionBehavior={selectionBehavior}\n disallowEmptySelection={disallowEmptySelection}\n disabledBehavior={disabledBehavior}\n selectedKeys={selectedKeys}\n defaultSelectedKeys={defaultSelectedKeys}\n onSelectionChange={onSelectionChange}\n disabledKeys={disabledKeys}\n sortDescriptor={sortDescriptor}\n onSortChange={onSortChange}\n onRowAction={onRowAction}\n data-testid=\"table\"\n data-variant={variant}\n data-size={size}\n {...props}\n >\n {children}\n </AriaTable>\n </div>\n </TableContext.Provider>\n );\n }\n);\n\nTable.displayName = 'Table';\n\n// ============================================================================\n// TableHeader Component\n// ============================================================================\n\nfunction TableHeaderInner<T extends object>(\n { className, children, columns, ...props }: TableHeaderProps<T>,\n ref: ForwardedRef<HTMLTableSectionElement>\n): ReactElement {\n const { size, selectionMode, stickyHeader } = useContext(TableContext);\n const { allowsDragging } = useTableOptions();\n\n return (\n <AriaTableHeader\n ref={ref}\n className={cn(tableHeaderVariants({ sticky: stickyHeader }), className)}\n data-testid=\"table-header\"\n {...(props as AriaTableHeaderProps<T>)}\n >\n {/* Selection checkbox column */}\n {selectionMode === 'multiple' && (\n <AriaColumn className={cn(columnVariants({ size }), 'w-12')}>\n <Checkbox slot=\"selection\" aria-label=\"Select all\" size={size} />\n </AriaColumn>\n )}\n {/* Drag handle column if dragging is allowed */}\n {allowsDragging && <AriaColumn />}\n {/* Render columns */}\n {columns ? (\n <Collection items={columns}>{children as (item: T) => ReactElement}</Collection>\n ) : (\n children\n )}\n </AriaTableHeader>\n );\n}\n\nconst TableHeader = forwardRef(TableHeaderInner) as <T extends object>(\n props: TableHeaderProps<T> & { ref?: ForwardedRef<HTMLTableSectionElement> }\n) => ReactElement;\n\n(TableHeader as { displayName?: string }).displayName = 'TableHeader';\n\n// ============================================================================\n// TableBody Component\n// ============================================================================\n\nfunction TableBodyInner<T extends object>(\n { className, children, items, renderEmptyState, ...props }: TableBodyProps<T>,\n ref: ForwardedRef<HTMLTableSectionElement>\n): ReactElement {\n return (\n <AriaTableBody\n ref={ref}\n className={cn(className)}\n items={items}\n renderEmptyState={\n renderEmptyState\n ? () => (\n <tr>\n <td colSpan={99} className=\"text-center p-8\">\n {renderEmptyState()}\n </td>\n </tr>\n )\n : undefined\n }\n data-testid=\"table-body\"\n {...(props as AriaTableBodyProps<T>)}\n >\n {children as AriaTableBodyProps<T>['children']}\n </AriaTableBody>\n );\n}\n\nconst TableBody = forwardRef(TableBodyInner) as <T extends object>(\n props: TableBodyProps<T> & { ref?: ForwardedRef<HTMLTableSectionElement> }\n) => ReactElement;\n\n(TableBody as { displayName?: string }).displayName = 'TableBody';\n\n// ============================================================================\n// TableFooter Component (Custom - not from React Aria)\n// ============================================================================\n\nconst TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <tfoot\n ref={ref}\n className={cn(tableFooterVariants(), className)}\n data-testid=\"table-footer\"\n {...props}\n >\n {children}\n </tfoot>\n );\n }\n);\n\nTableFooter.displayName = 'TableFooter';\n\n// ============================================================================\n// TableCaption Component (Custom - not from React Aria)\n// ============================================================================\n\nconst TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(\n ({ className, children, ...props }, ref) => {\n return (\n <caption\n ref={ref}\n className={cn(tableCaptionVariants(), className)}\n data-testid=\"table-caption\"\n {...props}\n >\n {children}\n </caption>\n );\n }\n);\n\nTableCaption.displayName = 'TableCaption';\n\n// ============================================================================\n// Column Component\n// ============================================================================\n\nconst Column = forwardRef<HTMLTableCellElement, ColumnProps>(\n (\n {\n className,\n children,\n isRowHeader = false,\n allowsSorting = false,\n align = 'start',\n width,\n minWidth,\n maxWidth,\n ...props\n },\n ref\n ) => {\n const { size } = useContext(TableContext);\n\n return (\n <AriaColumn\n ref={ref}\n isRowHeader={isRowHeader}\n allowsSorting={allowsSorting}\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n className={cn(columnVariants({ allowsSorting, align, size }), className)}\n {...props}\n >\n {({ allowsSorting: canSort, sortDirection }) => (\n <div className=\"flex items-center gap-1\">\n <span>{children as ReactNode}</span>\n {canSort && sortDirection && (\n <span aria-hidden=\"true\" data-sort-direction={sortDirection}>\n {sortDirection === 'ascending' ? (\n <ChevronUp className=\"h-4 w-4\" />\n ) : (\n <ChevronDown className=\"h-4 w-4\" />\n )}\n </span>\n )}\n </div>\n )}\n </AriaColumn>\n );\n }\n);\n\n(Column as { displayName?: string }).displayName = 'Column';\n\n// ============================================================================\n// Row Component\n// ============================================================================\n\nfunction RowInner<T extends object>(\n { className, children, columns, href, isDisabled, ...props }: RowProps<T>,\n ref: ForwardedRef<HTMLTableRowElement>\n): ReactElement {\n const { variant, size, selectionMode } = useContext(TableContext);\n const { allowsDragging } = useTableOptions();\n\n // Pre-compute variant class strings to avoid CVA calls in render callback\n const rowVariant = variant === 'striped' ? 'striped' as const : 'default' as const;\n const selectedClasses = rowVariants({ isSelected: true, variant: rowVariant });\n const unselectedClasses = rowVariants({ isSelected: false, variant: rowVariant });\n const selectionCellClasses = cn(cellVariants({ size }), 'w-12');\n\n return (\n <AriaRow\n ref={ref}\n href={href}\n isDisabled={isDisabled}\n className={({ isSelected, isDisabled: disabled }) =>\n cn(\n isSelected ? selectedClasses : unselectedClasses,\n disabled && 'opacity-50',\n className\n )\n }\n data-testid=\"table-row\"\n {...(props as AriaRowProps<T>)}\n >\n {/* Selection checkbox cell */}\n {selectionMode === 'multiple' && (\n <AriaCell className={selectionCellClasses}>\n <Checkbox slot=\"selection\" aria-label=\"Select row\" size={size} />\n </AriaCell>\n )}\n {/* Drag handle cell if dragging is allowed */}\n {allowsDragging && (\n <AriaCell>\n {/* Placeholder for drag handle - v2 feature */}\n </AriaCell>\n )}\n {/* Render cells */}\n {columns ? (\n <Collection items={columns}>{children as (item: T) => ReactElement}</Collection>\n ) : (\n children\n )}\n </AriaRow>\n );\n}\n\nconst Row = forwardRef(RowInner) as <T extends object>(\n props: RowProps<T> & { ref?: ForwardedRef<HTMLTableRowElement> }\n) => ReactElement;\n\n(Row as { displayName?: string }).displayName = 'Row';\n\n// ============================================================================\n// Cell Component\n// ============================================================================\n\nconst Cell = memo(forwardRef<HTMLTableCellElement, CellProps>(\n ({ className, children, align = 'start', colSpan: _colSpan, ...props }, ref) => {\n const { size } = useContext(TableContext);\n\n return (\n <AriaCell\n ref={ref}\n className={cn(cellVariants({ align, size }), className)}\n {...(props as AriaCellProps)}\n >\n {children}\n </AriaCell>\n );\n }\n));\n\nCell.displayName = 'Cell';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableCaption,\n Column,\n Row,\n Cell,\n};\n\n// Re-export CVA variants (defined in Table.styles.ts)\nexport {\n tableContainerVariants,\n tableVariants,\n tableHeaderVariants,\n tableFooterVariants,\n tableCaptionVariants,\n columnVariants,\n rowVariants,\n cellVariants,\n};\n\n// Re-export types\nexport type { Selection, SortDescriptor };\n"]}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {forwardRef,createContext,useMemo,useContext,memo,isValidElement,cloneElement}from'react';import {Checkbox,Table,Column,Cell,useTableOptions,TableHeader,Collection,TableBody,Row}from'react-aria-components';import {cva}from'class-variance-authority';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {ChevronUp,ChevronDown}from'lucide-react';function n(...a){return twMerge(clsx(a))}var V="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2";var S="hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground";var J=cva(["group inline-flex items-center gap-2 cursor-pointer","transition-colors duration-200","rtl:flex-row-reverse",V,S].join(" "),{variants:{size:{sm:"min-h-[44px] text-sm",default:"min-h-[44px] text-sm",lg:"min-h-[48px] text-base"},isDisabled:{true:"opacity-50 cursor-not-allowed",false:""}},defaultVariants:{size:"default",isDisabled:false}}),Q=cva("flex-shrink-0 rounded-sm border-2 flex items-center justify-center transition-colors duration-200",{variants:{variant:{default:["border-[var(--border)]","data-[selected]:border-[var(--primary)]","data-[selected]:bg-[var(--primary)]","data-[indeterminate]:border-[var(--primary)]","data-[indeterminate]:bg-[var(--primary)]"].join(" "),destructive:["border-[var(--border)]","data-[selected]:border-[var(--destructive)]","data-[selected]:bg-[var(--destructive)]","data-[indeterminate]:border-[var(--destructive)]","data-[indeterminate]:bg-[var(--destructive)]"].join(" ")},size:{sm:"h-4 w-4",default:"h-5 w-5",lg:"h-6 w-6"},isInvalid:{true:"border-[var(--destructive)]",false:""}},defaultVariants:{variant:"default",size:"default",isInvalid:false}}),X=cva(["transition-transform duration-200","[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]","motion-reduce:transition-none","scale-0 data-[selected]:scale-100 data-[indeterminate]:scale-100"].join(" "),{variants:{variant:{default:"text-[var(--primary-foreground)]",destructive:"text-[var(--destructive-foreground)]"},size:{sm:"h-3 w-3",default:"h-3.5 w-3.5",lg:"h-4 w-4"}},defaultVariants:{variant:"default",size:"default"}});function Z({className:a,...e}){return jsx("svg",{className:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...e,children:jsx("polyline",{points:"20 6 9 17 4 12"})})}function ee({className:a,...e}){return jsx("svg",{className:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...e,children:jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})})}var w=forwardRef(({isSelected:a,defaultSelected:e,isDisabled:t,isReadOnly:o,isIndeterminate:s,isInvalid:i=false,isRequired:l=false,onChange:u,onFocusChange:c,value:x,name:C,size:b="default",variant:p="default",label:h,description:g,selectedIcon:f,className:y,id:I,"aria-label":L,"aria-labelledby":be,"aria-describedby":pe,"data-testid":me,slot:ue},fe)=>{let Te=t||void 0,ve=o||void 0,xe=s||void 0,Ce=(m,U)=>{let R=n(X({variant:p,size:b})),E=m||void 0,Y=U||void 0;if(U)return jsx(ee,{className:R,"data-selected":E,"data-indeterminate":Y});if(f&&m){if(isValidElement(f)){let G=f;return cloneElement(G,{className:n(R,G.props.className),"data-selected":E})}return jsx("span",{className:R,"data-selected":E,children:f})}return jsx(Z,{className:R,"data-selected":E,"data-indeterminate":Y})};return jsx(Checkbox,{ref:fe,id:I,isSelected:a,defaultSelected:e,isDisabled:Te,isReadOnly:ve,isIndeterminate:xe,isInvalid:i,isRequired:l,onChange:u,onFocusChange:c,value:x,name:C,slot:ue,"aria-label":L,"aria-labelledby":be,"aria-describedby":pe,"data-testid":me,className:m=>n(J({size:b,isDisabled:m.isDisabled}),y),children:m=>jsxs(Fragment,{children:[jsx("div",{className:Q({variant:p,size:b,isInvalid:m.isInvalid}),"data-selected":m.isSelected||void 0,"data-indeterminate":m.isIndeterminate||void 0,children:Ce(m.isSelected,m.isIndeterminate)}),(h||g)&&jsxs("div",{className:"flex flex-col",children:[h&&jsx("span",{className:"font-medium text-[var(--content-foreground)]",children:h}),g&&jsx("span",{className:"text-sm text-[var(--menu-muted)]",children:g})]})]})})});w.displayName="Checkbox";var z=cva(["relative w-full overflow-auto"]),B=cva(["w-full caption-bottom text-sm","border-collapse"],{variants:{variant:{default:"",bordered:"border border-[var(--border)] rounded-md",striped:""}},defaultVariants:{variant:"default"}}),D=cva(["[&_tr]:border-b"],{variants:{sticky:{true:"sticky top-0 z-10 bg-[var(--content-background)]",false:""}},defaultVariants:{sticky:false}}),F=cva(["border-t border-[var(--border)]","bg-[var(--accent-background)]/50","font-medium","[&>tr]:last:border-b-0"]),O=cva(["mt-4 text-sm text-[var(--menu-muted)]"]),k=cva(["h-12 px-4 text-left align-middle font-medium","text-[var(--menu-muted)]","[&:has([role=checkbox])]:pr-0","select-none","focus-visible:outline-none focus-visible:ring-2","focus-visible:ring-[var(--ring)] focus-visible:ring-inset"],{variants:{allowsSorting:{true:"cursor-pointer hover:bg-[var(--accent)]/50",false:""},align:{start:"text-start",center:"text-center",end:"text-end"},size:{sm:"h-10 px-3 text-xs",default:"h-12 px-4 text-sm",lg:"h-14 px-5 text-base"}},defaultVariants:{allowsSorting:false,align:"start",size:"default"}}),H=cva(["border-b border-[var(--border)]","transition-colors","focus-visible:outline-none focus-visible:ring-2","focus-visible:ring-[var(--ring)] focus-visible:ring-inset","hover:bg-[var(--accent-background)]/50","data-[disabled]:pointer-events-none data-[disabled]:opacity-50"],{variants:{isSelected:{true:"bg-[var(--accent)] data-[selected]:bg-[var(--accent)]",false:""},variant:{default:"",striped:"even:bg-[var(--accent-background)]/30"}},defaultVariants:{isSelected:false,variant:"default"}}),A=cva(["p-4 align-middle","[&:has([role=checkbox])]:pr-0"],{variants:{align:{start:"text-start",center:"text-center",end:"text-end"},size:{sm:"p-3 text-xs",default:"p-4 text-sm",lg:"p-5 text-base"},isRowHeader:{true:"font-medium",false:""}},defaultVariants:{align:"start",size:"default",isRowHeader:false}});var N=createContext({variant:"default",size:"default",selectionMode:"none",stickyHeader:false}),re=forwardRef(({className:a,variant:e="default",size:t="default",stickyHeader:o=false,selectionMode:s="none",selectionBehavior:i="toggle",disallowEmptySelection:l=false,disabledBehavior:u="selection",selectedKeys:c,defaultSelectedKeys:x,onSelectionChange:C,disabledKeys:b,sortDescriptor:p,onSortChange:h,onRowAction:g,children:f,...y},I)=>{process.env.NODE_ENV!=="production"&&t==="sm"&&s!=="none"&&console.warn('[Table] size="sm" with selectionMode produces rows shorter than the 44px WCAG 2.2 AAA minimum touch target. Use size="default" or size="lg" for accessible interactive tables.');let L=useMemo(()=>({variant:e,size:t,selectionMode:s,stickyHeader:o}),[e,t,s,o]);return jsx(N.Provider,{value:L,children:jsx("div",{className:n(z(),a),"data-testid":"table-container",children:jsx(Table,{ref:I,className:n(B({variant:e})),selectionMode:s,selectionBehavior:i,disallowEmptySelection:l,disabledBehavior:u,selectedKeys:c,defaultSelectedKeys:x,onSelectionChange:C,disabledKeys:b,sortDescriptor:p,onSortChange:h,onRowAction:g,"data-testid":"table","data-variant":e,"data-size":t,...y,children:f})})})});re.displayName="Table";function De({className:a,children:e,columns:t,...o},s){let{size:i,selectionMode:l,stickyHeader:u}=useContext(N),{allowsDragging:c}=useTableOptions();return jsxs(TableHeader,{ref:s,className:n(D({sticky:u}),a),"data-testid":"table-header",...o,children:[l==="multiple"&&jsx(Column,{className:n(k({size:i}),"w-12"),children:jsx(w,{slot:"selection","aria-label":"Select all",size:i})}),c&&jsx(Column,{}),t?jsx(Collection,{items:t,children:e}):e]})}var oe=forwardRef(De);oe.displayName="TableHeader";function Fe({className:a,children:e,items:t,renderEmptyState:o,...s},i){return jsx(TableBody,{ref:i,className:n(a),items:t,renderEmptyState:o?()=>jsx("tr",{children:jsx("td",{colSpan:99,className:"text-center p-8",children:o()})}):void 0,"data-testid":"table-body",...s,children:e})}var se=forwardRef(Fe);se.displayName="TableBody";var ne=forwardRef(({className:a,children:e,...t},o)=>jsx("tfoot",{ref:o,className:n(F(),a),"data-testid":"table-footer",...t,children:e}));ne.displayName="TableFooter";var ie=forwardRef(({className:a,children:e,...t},o)=>jsx("caption",{ref:o,className:n(O(),a),"data-testid":"table-caption",...t,children:e}));ie.displayName="TableCaption";var le=forwardRef(({className:a,children:e,isRowHeader:t=false,allowsSorting:o=false,align:s="start",width:i,minWidth:l,maxWidth:u,...c},x)=>{let{size:C}=useContext(N);return jsx(Column,{ref:x,isRowHeader:t,allowsSorting:o,width:i,minWidth:l,maxWidth:u,className:n(k({allowsSorting:o,align:s,size:C}),a),...c,children:({allowsSorting:b,sortDirection:p})=>jsxs("div",{className:"flex items-center gap-1",children:[jsx("span",{children:e}),b&&p&&jsx("span",{"aria-hidden":"true","data-sort-direction":p,children:p==="ascending"?jsx(ChevronUp,{className:"h-4 w-4"}):jsx(ChevronDown,{className:"h-4 w-4"})})]})})});le.displayName="Column";function Oe({className:a,children:e,columns:t,href:o,isDisabled:s,...i},l){let{variant:u,size:c,selectionMode:x}=useContext(N),{allowsDragging:C}=useTableOptions(),b=u==="striped"?"striped":"default",p=H({isSelected:true,variant:b}),h=H({isSelected:false,variant:b}),g=n(A({size:c}),"w-12");return jsxs(Row,{ref:l,href:o,isDisabled:s,className:({isSelected:f,isDisabled:y})=>n(f?p:h,y&&"opacity-50",a),"data-testid":"table-row",...i,children:[x==="multiple"&&jsx(Cell,{className:g,children:jsx(w,{slot:"selection","aria-label":"Select row",size:c})}),C&&jsx(Cell,{}),t?jsx(Collection,{items:t,children:e}):e]})}var de=forwardRef(Oe);de.displayName="Row";var ce=memo(forwardRef(({className:a,children:e,align:t="start",colSpan:o,...s},i)=>{let{size:l}=useContext(N);return jsx(Cell,{ref:i,className:n(A({align:t,size:l}),a),...s,children:e})}));ce.displayName="Cell";export{ce as Cell,le as Column,de as Row,re as Table,se as TableBody,ie as TableCaption,ne as TableFooter,oe as TableHeader,A as cellVariants,k as columnVariants,H as rowVariants,O as tableCaptionVariants,z as tableContainerVariants,F as tableFooterVariants,D as tableHeaderVariants,B as tableVariants};//# sourceMappingURL=index.mjs.map
|
|
2
|
+
import {forwardRef,createContext,useMemo,useContext,memo,isValidElement,cloneElement}from'react';import {Checkbox,Table,Column,Cell,useTableOptions,TableHeader,Collection,TableBody,Row}from'react-aria-components';import {cva}from'class-variance-authority';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {ChevronUp,ChevronDown}from'lucide-react';function n(...a){return twMerge(clsx(a))}var V="data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2";var S="hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground";var J=cva(["group inline-flex items-center gap-2 cursor-pointer","transition-colors duration-200","rtl:flex-row-reverse",V,S].join(" "),{variants:{size:{sm:"min-h-[44px] text-sm",default:"min-h-[44px] text-sm",lg:"min-h-[48px] text-base"},isDisabled:{true:"opacity-50 cursor-not-allowed",false:""}},defaultVariants:{size:"default",isDisabled:false}}),Q=cva("flex-shrink-0 rounded-sm border-2 flex items-center justify-center transition-colors duration-200",{variants:{variant:{default:["border-[var(--border)]","data-[selected]:border-[var(--primary)]","data-[selected]:bg-[var(--primary)]","data-[indeterminate]:border-[var(--primary)]","data-[indeterminate]:bg-[var(--primary)]"].join(" "),destructive:["border-[var(--border)]","data-[selected]:border-[var(--destructive-background)]","data-[selected]:bg-[var(--destructive-background)]","data-[indeterminate]:border-[var(--destructive-background)]","data-[indeterminate]:bg-[var(--destructive-background)]"].join(" ")},size:{sm:"h-4 w-4",default:"h-5 w-5",lg:"h-6 w-6"},isInvalid:{true:"border-[var(--destructive-background)]",false:""}},defaultVariants:{variant:"default",size:"default",isInvalid:false}}),X=cva(["transition-transform duration-200","[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]","motion-reduce:transition-none","scale-0 data-[selected]:scale-100 data-[indeterminate]:scale-100"].join(" "),{variants:{variant:{default:"text-[var(--primary-foreground)]",destructive:"text-[var(--destructive-foreground)]"},size:{sm:"h-3 w-3",default:"h-3.5 w-3.5",lg:"h-4 w-4"}},defaultVariants:{variant:"default",size:"default"}});function Z({className:a,...e}){return jsx("svg",{className:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...e,children:jsx("polyline",{points:"20 6 9 17 4 12"})})}function ee({className:a,...e}){return jsx("svg",{className:a,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...e,children:jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})})}var w=forwardRef(({isSelected:a,defaultSelected:e,isDisabled:t,isReadOnly:o,isIndeterminate:s,isInvalid:i=false,isRequired:l=false,onChange:u,onFocusChange:c,value:x,name:C,size:b="default",variant:p="default",label:h,description:g,selectedIcon:f,className:y,id:I,"aria-label":L,"aria-labelledby":be,"aria-describedby":pe,"data-testid":me,slot:ue},fe)=>{let Te=t||void 0,ve=o||void 0,xe=s||void 0,Ce=(m,U)=>{let R=n(X({variant:p,size:b})),E=m||void 0,Y=U||void 0;if(U)return jsx(ee,{className:R,"data-selected":E,"data-indeterminate":Y});if(f&&m){if(isValidElement(f)){let G=f;return cloneElement(G,{className:n(R,G.props.className),"data-selected":E})}return jsx("span",{className:R,"data-selected":E,children:f})}return jsx(Z,{className:R,"data-selected":E,"data-indeterminate":Y})};return jsx(Checkbox,{ref:fe,id:I,isSelected:a,defaultSelected:e,isDisabled:Te,isReadOnly:ve,isIndeterminate:xe,isInvalid:i,isRequired:l,onChange:u,onFocusChange:c,value:x,name:C,slot:ue,"aria-label":L,"aria-labelledby":be,"aria-describedby":pe,"data-testid":me,className:m=>n(J({size:b,isDisabled:m.isDisabled}),y),children:m=>jsxs(Fragment,{children:[jsx("div",{className:Q({variant:p,size:b,isInvalid:m.isInvalid}),"data-selected":m.isSelected||void 0,"data-indeterminate":m.isIndeterminate||void 0,children:Ce(m.isSelected,m.isIndeterminate)}),(h||g)&&jsxs("div",{className:"flex flex-col",children:[h&&jsx("span",{className:"font-medium text-[var(--content-foreground)]",children:h}),g&&jsx("span",{className:"text-sm text-[var(--menu-muted)]",children:g})]})]})})});w.displayName="Checkbox";var z=cva(["relative w-full overflow-auto"]),B=cva(["w-full caption-bottom text-sm","border-collapse"],{variants:{variant:{default:"",bordered:"border border-[var(--border)] rounded-md",striped:""}},defaultVariants:{variant:"default"}}),D=cva(["[&_tr]:border-b"],{variants:{sticky:{true:"sticky top-0 z-10 bg-[var(--content-background)]",false:""}},defaultVariants:{sticky:false}}),F=cva(["border-t border-[var(--border)]","bg-[var(--accent-background)]/50","font-medium","[&>tr]:last:border-b-0"]),O=cva(["mt-4 text-sm text-[var(--menu-muted)]"]),k=cva(["h-12 px-4 text-left align-middle font-medium","text-[var(--menu-muted)]","[&:has([role=checkbox])]:pr-0","select-none","focus-visible:outline-none focus-visible:ring-2","focus-visible:ring-[var(--ring)] focus-visible:ring-inset"],{variants:{allowsSorting:{true:"cursor-pointer hover:bg-[var(--accent)]/50",false:""},align:{start:"text-start",center:"text-center",end:"text-end"},size:{sm:"h-10 px-3 text-xs",default:"h-12 px-4 text-sm",lg:"h-14 px-5 text-base"}},defaultVariants:{allowsSorting:false,align:"start",size:"default"}}),H=cva(["border-b border-[var(--border)]","transition-colors","focus-visible:outline-none focus-visible:ring-2","focus-visible:ring-[var(--ring)] focus-visible:ring-inset","hover:bg-[var(--accent-background)]/50","data-[disabled]:pointer-events-none data-[disabled]:opacity-50"],{variants:{isSelected:{true:"bg-[var(--accent)] data-[selected]:bg-[var(--accent)]",false:""},variant:{default:"",striped:"even:bg-[var(--accent-background)]/30"}},defaultVariants:{isSelected:false,variant:"default"}}),A=cva(["p-4 align-middle","[&:has([role=checkbox])]:pr-0"],{variants:{align:{start:"text-start",center:"text-center",end:"text-end"},size:{sm:"p-3 text-xs",default:"p-4 text-sm",lg:"p-5 text-base"},isRowHeader:{true:"font-medium",false:""}},defaultVariants:{align:"start",size:"default",isRowHeader:false}});var N=createContext({variant:"default",size:"default",selectionMode:"none",stickyHeader:false}),re=forwardRef(({className:a,variant:e="default",size:t="default",stickyHeader:o=false,selectionMode:s="none",selectionBehavior:i="toggle",disallowEmptySelection:l=false,disabledBehavior:u="selection",selectedKeys:c,defaultSelectedKeys:x,onSelectionChange:C,disabledKeys:b,sortDescriptor:p,onSortChange:h,onRowAction:g,children:f,...y},I)=>{process.env.NODE_ENV!=="production"&&t==="sm"&&s!=="none"&&console.warn('[Table] size="sm" with selectionMode produces rows shorter than the 44px WCAG 2.2 AAA minimum touch target. Use size="default" or size="lg" for accessible interactive tables.');let L=useMemo(()=>({variant:e,size:t,selectionMode:s,stickyHeader:o}),[e,t,s,o]);return jsx(N.Provider,{value:L,children:jsx("div",{className:n(z(),a),"data-testid":"table-container",children:jsx(Table,{ref:I,className:n(B({variant:e})),selectionMode:s,selectionBehavior:i,disallowEmptySelection:l,disabledBehavior:u,selectedKeys:c,defaultSelectedKeys:x,onSelectionChange:C,disabledKeys:b,sortDescriptor:p,onSortChange:h,onRowAction:g,"data-testid":"table","data-variant":e,"data-size":t,...y,children:f})})})});re.displayName="Table";function De({className:a,children:e,columns:t,...o},s){let{size:i,selectionMode:l,stickyHeader:u}=useContext(N),{allowsDragging:c}=useTableOptions();return jsxs(TableHeader,{ref:s,className:n(D({sticky:u}),a),"data-testid":"table-header",...o,children:[l==="multiple"&&jsx(Column,{className:n(k({size:i}),"w-12"),children:jsx(w,{slot:"selection","aria-label":"Select all",size:i})}),c&&jsx(Column,{}),t?jsx(Collection,{items:t,children:e}):e]})}var oe=forwardRef(De);oe.displayName="TableHeader";function Fe({className:a,children:e,items:t,renderEmptyState:o,...s},i){return jsx(TableBody,{ref:i,className:n(a),items:t,renderEmptyState:o?()=>jsx("tr",{children:jsx("td",{colSpan:99,className:"text-center p-8",children:o()})}):void 0,"data-testid":"table-body",...s,children:e})}var se=forwardRef(Fe);se.displayName="TableBody";var ne=forwardRef(({className:a,children:e,...t},o)=>jsx("tfoot",{ref:o,className:n(F(),a),"data-testid":"table-footer",...t,children:e}));ne.displayName="TableFooter";var ie=forwardRef(({className:a,children:e,...t},o)=>jsx("caption",{ref:o,className:n(O(),a),"data-testid":"table-caption",...t,children:e}));ie.displayName="TableCaption";var le=forwardRef(({className:a,children:e,isRowHeader:t=false,allowsSorting:o=false,align:s="start",width:i,minWidth:l,maxWidth:u,...c},x)=>{let{size:C}=useContext(N);return jsx(Column,{ref:x,isRowHeader:t,allowsSorting:o,width:i,minWidth:l,maxWidth:u,className:n(k({allowsSorting:o,align:s,size:C}),a),...c,children:({allowsSorting:b,sortDirection:p})=>jsxs("div",{className:"flex items-center gap-1",children:[jsx("span",{children:e}),b&&p&&jsx("span",{"aria-hidden":"true","data-sort-direction":p,children:p==="ascending"?jsx(ChevronUp,{className:"h-4 w-4"}):jsx(ChevronDown,{className:"h-4 w-4"})})]})})});le.displayName="Column";function Oe({className:a,children:e,columns:t,href:o,isDisabled:s,...i},l){let{variant:u,size:c,selectionMode:x}=useContext(N),{allowsDragging:C}=useTableOptions(),b=u==="striped"?"striped":"default",p=H({isSelected:true,variant:b}),h=H({isSelected:false,variant:b}),g=n(A({size:c}),"w-12");return jsxs(Row,{ref:l,href:o,isDisabled:s,className:({isSelected:f,isDisabled:y})=>n(f?p:h,y&&"opacity-50",a),"data-testid":"table-row",...i,children:[x==="multiple"&&jsx(Cell,{className:g,children:jsx(w,{slot:"selection","aria-label":"Select row",size:c})}),C&&jsx(Cell,{}),t?jsx(Collection,{items:t,children:e}):e]})}var de=forwardRef(Oe);de.displayName="Row";var ce=memo(forwardRef(({className:a,children:e,align:t="start",colSpan:o,...s},i)=>{let{size:l}=useContext(N);return jsx(Cell,{ref:i,className:n(A({align:t,size:l}),a),...s,children:e})}));ce.displayName="Cell";export{ce as Cell,le as Column,de as Row,re as Table,se as TableBody,ie as TableCaption,ne as TableFooter,oe as TableHeader,A as cellVariants,k as columnVariants,H as rowVariants,O as tableCaptionVariants,z as tableContainerVariants,F as tableFooterVariants,D as tableHeaderVariants,B as tableVariants};//# sourceMappingURL=index.mjs.map
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|