@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Switch/index.mjs

@@ -1,9 +1,153 @@
-export { Switch, switchOuterVariants, switchThumbVariants, switchTrackVariants } from '../../chunk-CGFDS4XS.mjs';
-import '../../chunk-HK46BT5U.mjs';
-import '../../chunk-E2KQFV3O.mjs';
-import { BaseComponentPropsSchema } from '../../chunk-5SVLJN2C.mjs';
+"use client";
+import { memo, forwardRef } from 'react';
+import { Switch as Switch$1 } 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';
 
+// src/elements/Switch/Switch.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/styles/interaction-states.ts
+var FOCUS_STYLES = "data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--themis-ring)] data-[focus-visible]:ring-offset-2";
+var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
+var HOVER_STYLES = "data-[hovered]:shadow-md";
+var HIGH_CONTRAST_FOCUS = "hc:data-[focus-visible]:outline hc:data-[focus-visible]:outline-4 hc:data-[focus-visible]:outline-offset-2 hc:data-[focus-visible]:outline-foreground";
+var HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
+var HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
+var DEFAULT_INTERACTIONS = `${FOCUS_STYLES} ${PRESSED_STYLES} ${HOVER_STYLES} ${HIGH_CONTRAST_FOCUS} ${HIGH_CONTRAST_HOVER} ${HIGH_CONTRAST_PRESSED}`;
+var switchOuterVariants = cva(
+  // Base styles - WCAG 2.2 AAA: 44x44px minimum touch target
+  "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: {}
+  }
+);
+var switchTrackVariants = cva(
+  // Base styles - visual track with transitions and focus states
+  "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 variant: Uses primary color when selected
+        default: "bg-[var(--input)] data-[selected]:bg-[var(--primary)]",
+        // Destructive variant: Uses destructive/error color when selected
+        destructive: "bg-[var(--input)] data-[selected]:bg-[var(--destructive)]"
+      },
+      size: {
+        // Small: h-5 w-9 (visual track size)
+        sm: "h-5 w-9",
+        // Default: h-6 w-11
+        default: "h-6 w-11",
+        // Large: h-7 w-14
+        lg: "h-7 w-14"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var switchThumbVariants = cva(
+  // Base styles: rounded circle with shadow, translates when selected
+  "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: {
+        // Thumb is slightly smaller than track height for proper padding
+        sm: "h-4 w-4",
+        default: "h-5 w-5",
+        lg: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var Switch = memo(forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    label,
+    description,
+    isDisabled,
+    isReadOnly,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Switch$1,
+      {
+        ref,
+        isDisabled,
+        isReadOnly,
+        className: (_classNameProps) => cn(
+          "group inline-flex items-center gap-2",
+          isDisabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        ...props,
+        children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(switchOuterVariants()),
+              "data-selected": renderProps.isSelected || void 0,
+              "data-readonly": isReadOnly || void 0,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    switchTrackVariants({ variant, size }),
+                    DEFAULT_INTERACTIONS
+                  ),
+                  "data-selected": renderProps.isSelected || void 0,
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(switchThumbVariants({ size })),
+                      "data-selected": renderProps.isSelected || void 0
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--content-foreground)]", children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--menu-muted)]", children: description })
+          ] })
+        ] })
+      }
+    );
+  }
+));
+Switch.displayName = "Switch";
+var BaseComponentPropsSchema = z.object({
+  // Styling
+  className: z.string().optional(),
+  // React
+  children: z.any().optional(),
+  // ReactNode not directly supported by Zod
+  id: z.string().optional(),
+  // Accessibility (WCAG 2.2 AA requirements)
+  "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(),
+  // Testing & Development
+  "data-testid": z.string().optional()
+});
+
+// src/elements/Switch/Switch.types.ts
 var SwitchPropsSchema = BaseComponentPropsSchema.extend({
   // State management (controlled/uncontrolled)
   isSelected: z.boolean().optional(),
@@ -26,6 +170,6 @@ var SwitchPropsSchema = BaseComponentPropsSchema.extend({
   autoFocus: z.boolean().optional()
 });
 
-export { SwitchPropsSchema };
+export { Switch, SwitchPropsSchema, switchOuterVariants, switchThumbVariants, switchTrackVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/elements/Switch/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Switch/Switch.types.ts"],"names":[],"mappings":";;;;;;AAYO,IAAM,iBAAA,GAAoB,yBAAyB,MAAA,CAAO;AAAA;AAAA,EAE/D,UAAA,EAAY,CAAA,CAAE,OAAA,EAAQ,CAAE,QAAA,EAAS;AAAA,EACjC,iBAAiB,CAAA,CAAE,OAAA,GAAU,QAAA,EAAS,CAAE,QAAQ,KAAK,CAAA;AAAA,EACrD,QAAA,EAAU,CAAA,CAAE,QAAA,EAAS,CAAE,QAAA,EAAS;AAAA;AAAA,EAGhC,OAAA,EAAS,CAAA,CACN,IAAA,CAAK,CAAC,SAAA,EAAW,aAAa,CAAC,CAAA,CAC/B,QAAA,EAAS,CACT,OAAA,CAAQ,SAAS,CAAA;AAAA;AAAA,EAGpB,IAAA,EAAM,CAAA,CAAE,IAAA,CAAK,CAAC,IAAA,EAAM,SAAA,EAAW,IAAI,CAAC,CAAA,CAAE,QAAA,EAAS,CAAE,OAAA,CAAQ,SAAS,CAAA;AAAA;AAAA,EAGlE,YAAY,CAAA,CAAE,OAAA,GAAU,QAAA,EAAS,CAAE,QAAQ,KAAK,CAAA;AAAA,EAChD,YAAY,CAAA,CAAE,OAAA,GAAU,QAAA,EAAS,CAAE,QAAQ,KAAK,CAAA;AAAA;AAAA,EAGhD,KAAA,EAAO,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS;AAAA,EAC3B,WAAA,EAAa,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS;AAAA;AAAA,EAGjC,OAAA,EAAS,CAAA,CAAE,QAAA,EAAS,CAAE,QAAA,EAAS;AAAA,EAC/B,MAAA,EAAQ,CAAA,CAAE,QAAA,EAAS,CAAE,QAAA,EAAS;AAAA,EAC9B,aAAA,EAAe,CAAA,CAAE,QAAA,EAAS,CAAE,QAAA,EAAS;AAAA,EACrC,SAAA,EAAW,CAAA,CAAE,OAAA,EAAQ,CAAE,QAAA;AACzB,CAAC","file":"index.mjs","sourcesContent":["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"]}
+{"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":["AriaSwitch","z"],"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"]}