@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Badge/index.js

@@ -1,43 +1,245 @@
+"use client";
 'use strict';
 
-var chunkNGJVCFTM_js = require('../../chunk-NGJVCFTM.js');
-require('../../chunk-B5Q4UPL6.js');
-require('../../chunk-VIREG536.js');
-require('../../chunk-T4COXKQ3.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var zod = require('zod');
 
-
-
-Object.defineProperty(exports, "Badge", {
-  enumerable: true,
-  get: function () { return chunkNGJVCFTM_js.Badge; }
-});
-Object.defineProperty(exports, "BadgeIconPositionSchema", {
-  enumerable: true,
-  get: function () { return chunkNGJVCFTM_js.BadgeIconPositionSchema; }
-});
-Object.defineProperty(exports, "BadgePropsSchema", {
-  enumerable: true,
-  get: function () { return chunkNGJVCFTM_js.BadgePropsSchema; }
-});
-Object.defineProperty(exports, "BadgeSizeSchema", {
-  enumerable: true,
-  get: function () { return chunkNGJVCFTM_js.BadgeSizeSchema; }
+// src/elements/Badge/Badge.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
+var HOVER_STYLES = "data-[hovered]:shadow-md";
+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 badgeOuterVariants = classVarianceAuthority.cva(
+  [
+    "relative inline-flex items-center justify-center",
+    "min-h-[44px] min-w-[44px]",
+    "focus-visible:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-[var(--ring)]",
+    "focus-visible:ring-offset-2",
+    "focus-visible:ring-offset-[var(--page-background)]",
+    "disabled:pointer-events-none",
+    "disabled:opacity-50"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var badgeVisualVariants = classVarianceAuthority.cva(
+  [
+    "inline-flex items-center justify-center",
+    "gap-1",
+    "rounded-full",
+    "font-medium",
+    "whitespace-nowrap",
+    "transition-colors"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-[var(--primary-action)]",
+          "text-[var(--primary-action-foreground)]",
+          "hover:bg-[var(--primary-action)]/90",
+          "data-[pressed]:bg-[var(--primary-action)]/80"
+        ],
+        accent: [
+          "bg-[var(--accent-background)]",
+          "text-[var(--accent-foreground)]",
+          "hover:bg-[var(--accent-background)]/90",
+          "data-[pressed]:bg-[var(--accent-background)]/80"
+        ],
+        destructive: [
+          "bg-[var(--destructive-background)]",
+          "text-[var(--destructive-foreground)]",
+          "hover:bg-[var(--destructive-background)]/90",
+          "data-[pressed]:bg-[var(--destructive-background)]/80"
+        ],
+        content: [
+          "bg-[var(--accent-background)]",
+          "text-[var(--accent-foreground)]",
+          "hover:bg-[var(--accent-background)]/90",
+          "data-[pressed]:bg-[var(--accent-background)]/80"
+        ]
+      },
+      size: {
+        sm: "h-5 px-2 text-xs",
+        default: "h-6 px-2.5 text-xs",
+        lg: "h-7 px-3 text-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default"
+    }
+  }
+);
+var badgeVariants = badgeVisualVariants;
+var iconSizeClasses = {
+  sm: "[&_svg]:h-2.5 [&_svg]:w-2.5",
+  // 10px icons for 20px badge
+  default: "[&_svg]:h-3 [&_svg]:w-3",
+  // 12px icons for 24px badge
+  lg: "[&_svg]:h-3.5 [&_svg]:w-3.5"
+  // 14px icons for 28px badge
+};
+var Badge = react.memo(
+  react.forwardRef(
+    ({
+      className,
+      variant = "primary",
+      size = "default",
+      children,
+      icon,
+      iconPosition = "start",
+      count,
+      onPress,
+      isDisabled,
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "data-testid": dataTestId,
+      ...props
+    }, ref) => {
+      const visualClasses = cn(
+        badgeVisualVariants({ variant, size }),
+        iconSizeClasses[size],
+        className
+      );
+      const hasIcon = !!icon;
+      const hasCount = count !== void 0;
+      const hasChildren = !!children;
+      const multipleElements = [hasIcon, hasCount, hasChildren].filter(Boolean).length > 1;
+      const renderContent = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && iconPosition === "start" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", "aria-hidden": "true", children: icon }),
+        children && (multipleElements ? /* @__PURE__ */ jsxRuntime.jsx("span", { children }) : children),
+        count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono tabular-nums", children: count }),
+        icon && iconPosition === "end" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", "aria-hidden": "true", children: icon })
+      ] });
+      if (onPress) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactAriaComponents.Button,
+          {
+            ref,
+            isDisabled,
+            onPress,
+            className: badgeOuterVariants(),
+            id,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            "data-testid": dataTestId,
+            ...props,
+            children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  visualClasses,
+                  // Interaction styles for visual feedback
+                  PRESSED_STYLES,
+                  HOVER_STYLES,
+                  HIGH_CONTRAST_HOVER,
+                  HIGH_CONTRAST_PRESSED
+                ),
+                "data-pressed": renderProps.isPressed || void 0,
+                children: renderContent()
+              }
+            )
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref,
+          className: visualClasses,
+          id,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          "aria-describedby": ariaDescribedby,
+          "data-testid": dataTestId,
+          ...props,
+          children: renderContent()
+        }
+      );
+    }
+  )
+);
+Badge.displayName = "Badge";
+var BaseComponentPropsSchema = zod.z.object({
+  // Styling
+  className: zod.z.string().optional(),
+  // React
+  children: zod.z.any().optional(),
+  // ReactNode not directly supported by Zod
+  id: zod.z.string().optional(),
+  // Accessibility (WCAG 2.2 AA requirements)
+  "aria-label": zod.z.string().optional(),
+  "aria-labelledby": zod.z.string().optional(),
+  "aria-describedby": zod.z.string().optional(),
+  "aria-live": zod.z.enum(["off", "polite", "assertive"]).optional(),
+  "aria-hidden": zod.z.boolean().optional(),
+  // Testing & Development
+  "data-testid": zod.z.string().optional()
 });
-Object.defineProperty(exports, "BadgeVariantSchema", {
-  enumerable: true,
-  get: function () { return chunkNGJVCFTM_js.BadgeVariantSchema; }
-});
-Object.defineProperty(exports, "badgeOuterVariants", {
-  enumerable: true,
-  get: function () { return chunkNGJVCFTM_js.badgeOuterVariants; }
-});
-Object.defineProperty(exports, "badgeVariants", {
-  enumerable: true,
-  get: function () { return chunkNGJVCFTM_js.badgeVariants; }
-});
-Object.defineProperty(exports, "badgeVisualVariants", {
-  enumerable: true,
-  get: function () { return chunkNGJVCFTM_js.badgeVisualVariants; }
+
+// src/elements/Badge/Badge.types.ts
+var BadgeVariantSchema = zod.z.enum([
+  "primary",
+  // Default brand color for general labels
+  "accent",
+  // Highlighted/featured content
+  "destructive",
+  // Errors, warnings, critical states
+  "content"
+  // Neutral/informational content
+]);
+var BadgeSizeSchema = zod.z.enum([
+  "sm",
+  // 20px height
+  "default",
+  // 24px height
+  "lg"
+  // 28px height
+]);
+var BadgeIconPositionSchema = zod.z.enum([
+  "start",
+  // Icon before text (default)
+  "end"
+  // Icon after text (useful for dismiss/close)
+]);
+var BadgePropsSchema = BaseComponentPropsSchema.extend({
+  // Content - override children to be string only for badges
+  children: zod.z.string().optional(),
+  icon: zod.z.custom().optional(),
+  iconPosition: BadgeIconPositionSchema.optional().default("start"),
+  count: zod.z.union([zod.z.number(), zod.z.string()]).optional(),
+  // Variants
+  variant: BadgeVariantSchema.optional().default("primary"),
+  size: BadgeSizeSchema.optional().default("default"),
+  // Interaction - makes badge actionable when provided
+  onPress: zod.z.function().optional(),
+  // React Aria PressEvent handler
+  isDisabled: zod.z.boolean().optional()
 });
+
+exports.Badge = Badge;
+exports.BadgeIconPositionSchema = BadgeIconPositionSchema;
+exports.BadgePropsSchema = BadgePropsSchema;
+exports.BadgeSizeSchema = BadgeSizeSchema;
+exports.BadgeVariantSchema = BadgeVariantSchema;
+exports.badgeOuterVariants = badgeOuterVariants;
+exports.badgeVariants = badgeVariants;
+exports.badgeVisualVariants = badgeVisualVariants;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/elements/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/interaction-states.ts","../../../src/elements/Badge/Badge.tsx","../../../src/schemas/BaseComponentProps.ts","../../../src/elements/Badge/Badge.types.ts"],"names":["twMerge","clsx","cva","memo","forwardRef","jsxs","Fragment","jsx","AriaButton","z"],"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 * Badge Component - 2-Layer Architecture for Actionable Badges\n * Accessible badge with React Aria primitives and CVA styling\n *\n * Architecture:\n * - Static badges: Single span element\n * - Actionable badges (with onPress):\n *   - Layer 1: Touch Target (44x44px WCAG AAA compliant, transparent)\n *   - Layer 2: Visual Badge (compact size, colors)\n *\n * @see plan.md for architecture details\n * @see badge-prd.md for requirements\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo, type ReactElement } from 'react';\nimport {\n  Button as AriaButton,\n  type ButtonProps as AriaButtonProps,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport {\n  PRESSED_STYLES,\n  HOVER_STYLES,\n  HIGH_CONTRAST_HOVER,\n  HIGH_CONTRAST_PRESSED,\n} from '../../styles/interaction-states';\nimport type { BadgeProps } from './Badge.types';\n\n/**\n * Layer 1: Transparent outer touch target (44x44px minimum)\n * Only used for actionable badges (with onPress)\n * Handles WCAG 2.2 AAA touch target requirement\n * IMPORTANT: Focus ring stays on Layer 1 for AAA compliance (2.4.13)\n */\nexport const badgeOuterVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'min-h-[44px] min-w-[44px]',\n    'focus-visible:outline-none',\n    'focus-visible:ring-2',\n    'focus-visible:ring-[var(--ring)]',\n    'focus-visible:ring-offset-2',\n    'focus-visible:ring-offset-[var(--page-background)]',\n    'disabled:pointer-events-none',\n    'disabled:opacity-50',\n  ],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n);\n\n/**\n * Layer 2: Visual Badge appearance\n * Used for all badges (both static and actionable)\n * Provides the visual appearance with configurable size and variant\n * NOTE: NO focus-visible styles here - focus ring is on Layer 1\n */\nexport const badgeVisualVariants = cva(\n  [\n    'inline-flex items-center justify-center',\n    'gap-1',\n    'rounded-full',\n    'font-medium',\n    'whitespace-nowrap',\n    'transition-colors',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-[var(--primary-action)]',\n          'text-[var(--primary-action-foreground)]',\n          'hover:bg-[var(--primary-action)]/90',\n          'data-[pressed]:bg-[var(--primary-action)]/80',\n        ],\n        accent: [\n          'bg-[var(--accent-background)]',\n          'text-[var(--accent-foreground)]',\n          'hover:bg-[var(--accent-background)]/90',\n          'data-[pressed]:bg-[var(--accent-background)]/80',\n        ],\n        destructive: [\n          'bg-[var(--destructive-background)]',\n          'text-[var(--destructive-foreground)]',\n          'hover:bg-[var(--destructive-background)]/90',\n          'data-[pressed]:bg-[var(--destructive-background)]/80',\n        ],\n        content: [\n          'bg-[var(--accent-background)]',\n          'text-[var(--accent-foreground)]',\n          'hover:bg-[var(--accent-background)]/90',\n          'data-[pressed]:bg-[var(--accent-background)]/80',\n        ],\n      },\n      size: {\n        sm: 'h-5 px-2 text-xs',\n        default: 'h-6 px-2.5 text-xs',\n        lg: 'h-7 px-3 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'default',\n    },\n  }\n);\n\n/**\n * @deprecated Use badgeVisualVariants instead. This alias is kept for backward compatibility.\n */\nexport const badgeVariants = badgeVisualVariants;\n\n// Icon size classes mapped to badge sizes\n// Sizes are proportional to badge height: sm=20px, default=24px, lg=28px\nconst iconSizeClasses: Record<NonNullable<BadgeProps['size']>, string> = {\n  sm: '[&_svg]:h-2.5 [&_svg]:w-2.5',      // 10px icons for 20px badge\n  default: '[&_svg]:h-3 [&_svg]:w-3',      // 12px icons for 24px badge\n  lg: '[&_svg]:h-3.5 [&_svg]:w-3.5',       // 14px icons for 28px badge\n};\n\n/**\n * Badge Component - Accessible badge for labels, tags, and status indicators\n *\n * Features:\n * - WCAG 2.2 AAA compliant (7:1 contrast, 44x44px touch targets for actionable)\n * - 4 semantic variants (primary, accent, destructive, content)\n * - 3 sizes (sm, default, lg)\n * - Icon support with configurable position\n * - Count display (number or string)\n * - Static badges (span) vs actionable badges (button)\n */\nconst Badge = memo(\n  forwardRef<HTMLButtonElement | HTMLSpanElement, BadgeProps>(\n    (\n      {\n        className,\n        variant = 'primary',\n        size = 'default',\n        children,\n        icon,\n        iconPosition = 'start',\n        count,\n        onPress,\n        isDisabled,\n        id,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledby,\n        'aria-describedby': ariaDescribedby,\n        'data-testid': dataTestId,\n        ...props\n      },\n      ref\n    ): ReactElement => {\n      // Visual classes for the badge appearance\n      const visualClasses = cn(\n        badgeVisualVariants({ variant, size }),\n        iconSizeClasses[size],\n        className\n      );\n\n      // Check if we have multiple content elements (need gap styling)\n      const hasIcon = !!icon;\n      const hasCount = count !== undefined;\n      const hasChildren = !!children;\n      const multipleElements =\n        [hasIcon, hasCount, hasChildren].filter(Boolean).length > 1;\n\n      // Content rendering: icon + children + count (all can display together)\n      // Only wrap children in span when there are multiple elements (for gap)\n      const renderContent = (): ReactElement => (\n        <>\n          {icon && iconPosition === 'start' && (\n            <span className=\"shrink-0\" aria-hidden=\"true\">\n              {icon}\n            </span>\n          )}\n          {children && (multipleElements ? <span>{children}</span> : children)}\n          {count !== undefined && (\n            <span className=\"font-mono tabular-nums\">{count}</span>\n          )}\n          {icon && iconPosition === 'end' && (\n            <span className=\"shrink-0\" aria-hidden=\"true\">\n              {icon}\n            </span>\n          )}\n        </>\n      );\n\n      // Actionable badge (with onPress) - uses 2-layer architecture\n      if (onPress) {\n        return (\n          <AriaButton\n            ref={ref as React.Ref<HTMLButtonElement>}\n            isDisabled={isDisabled}\n            onPress={onPress}\n            className={badgeOuterVariants()}\n            id={id}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-describedby={ariaDescribedby}\n            data-testid={dataTestId}\n            {...(props as Omit<AriaButtonProps, 'className'>)}\n          >\n            {(renderProps) => (\n              <span\n                className={cn(\n                  visualClasses,\n                  // Interaction styles for visual feedback\n                  PRESSED_STYLES,\n                  HOVER_STYLES,\n                  HIGH_CONTRAST_HOVER,\n                  HIGH_CONTRAST_PRESSED\n                )}\n                data-pressed={renderProps.isPressed || undefined}\n              >\n                {renderContent()}\n              </span>\n            )}\n          </AriaButton>\n        );\n      }\n\n      // Static badge - simple span element\n      return (\n        <span\n          ref={ref as React.Ref<HTMLSpanElement>}\n          className={visualClasses}\n          id={id}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-describedby={ariaDescribedby}\n          data-testid={dataTestId}\n          {...props}\n        >\n          {renderContent()}\n        </span>\n      );\n    }\n  )\n);\n\nBadge.displayName = 'Badge';\n\nexport { Badge };\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 { type ReactNode } from 'react';\nimport { type PressEvent } from 'react-aria-components';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\n\n/**\n * Badge Component Types\n *\n * Defines the props schema and TypeScript types for the Badge component.\n * Extends BaseComponentPropsSchema for consistent accessibility and styling APIs.\n *\n * @see badge-prd.md for full requirements\n * @see WCAG 2.2 AAA compliance requirements\n */\n\n// Variant schema - semantic color variants\nexport const BadgeVariantSchema = z.enum([\n  'primary', // Default brand color for general labels\n  'accent', // Highlighted/featured content\n  'destructive', // Errors, warnings, critical states\n  'content', // Neutral/informational content\n]);\n\n// Size schema - visual size variants\nexport const BadgeSizeSchema = z.enum([\n  'sm', // 20px height\n  'default', // 24px height\n  'lg', // 28px height\n]);\n\n// Icon position schema\nexport const BadgeIconPositionSchema = z.enum([\n  'start', // Icon before text (default)\n  'end', // Icon after text (useful for dismiss/close)\n]);\n\n// Main props schema extending base component props\nexport const BadgePropsSchema = BaseComponentPropsSchema.extend({\n  // Content - override children to be string only for badges\n  children: z.string().optional(),\n  icon: z.custom<ReactNode>().optional(),\n  iconPosition: BadgeIconPositionSchema.optional().default('start'),\n  count: z.union([z.number(), z.string()]).optional(),\n\n  // Variants\n  variant: BadgeVariantSchema.optional().default('primary'),\n  size: BadgeSizeSchema.optional().default('default'),\n\n  // Interaction - makes badge actionable when provided\n  onPress: z.function().optional(), // React Aria PressEvent handler\n  isDisabled: z.boolean().optional(),\n});\n\n// TypeScript types inferred from schemas\nexport type BadgeVariant = z.infer<typeof BadgeVariantSchema>;\nexport type BadgeSize = z.infer<typeof BadgeSizeSchema>;\nexport type BadgeIconPosition = z.infer<typeof BadgeIconPositionSchema>;\n\n// Base props from Zod schema (excluding onPress which needs proper typing)\ntype BadgePropsBase = Omit<z.infer<typeof BadgePropsSchema>, 'onPress'>;\n\n/**\n * Badge component props interface\n * Uses Zod schema inference for most props, but properly types onPress\n * to match React Aria's PressEvent handler signature\n */\nexport interface BadgeProps extends BadgePropsBase {\n  /** Press handler - makes badge actionable when provided */\n  onPress?: (e: PressEvent) => void;\n}\n"]}

package/dist/elements/Badge/index.mjs

@@ -1,6 +1,236 @@
-export { Badge, BadgeIconPositionSchema, BadgePropsSchema, BadgeSizeSchema, BadgeVariantSchema, badgeOuterVariants, badgeVariants, badgeVisualVariants } from '../../chunk-QH7N7D4I.mjs';
-import '../../chunk-HK46BT5U.mjs';
-import '../../chunk-E2KQFV3O.mjs';
-import '../../chunk-5SVLJN2C.mjs';
+"use client";
+import { memo, forwardRef } from 'react';
+import { Button } 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/Badge/Badge.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
+var HOVER_STYLES = "data-[hovered]:shadow-md";
+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 badgeOuterVariants = cva(
+  [
+    "relative inline-flex items-center justify-center",
+    "min-h-[44px] min-w-[44px]",
+    "focus-visible:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-[var(--ring)]",
+    "focus-visible:ring-offset-2",
+    "focus-visible:ring-offset-[var(--page-background)]",
+    "disabled:pointer-events-none",
+    "disabled:opacity-50"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var badgeVisualVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    "gap-1",
+    "rounded-full",
+    "font-medium",
+    "whitespace-nowrap",
+    "transition-colors"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-[var(--primary-action)]",
+          "text-[var(--primary-action-foreground)]",
+          "hover:bg-[var(--primary-action)]/90",
+          "data-[pressed]:bg-[var(--primary-action)]/80"
+        ],
+        accent: [
+          "bg-[var(--accent-background)]",
+          "text-[var(--accent-foreground)]",
+          "hover:bg-[var(--accent-background)]/90",
+          "data-[pressed]:bg-[var(--accent-background)]/80"
+        ],
+        destructive: [
+          "bg-[var(--destructive-background)]",
+          "text-[var(--destructive-foreground)]",
+          "hover:bg-[var(--destructive-background)]/90",
+          "data-[pressed]:bg-[var(--destructive-background)]/80"
+        ],
+        content: [
+          "bg-[var(--accent-background)]",
+          "text-[var(--accent-foreground)]",
+          "hover:bg-[var(--accent-background)]/90",
+          "data-[pressed]:bg-[var(--accent-background)]/80"
+        ]
+      },
+      size: {
+        sm: "h-5 px-2 text-xs",
+        default: "h-6 px-2.5 text-xs",
+        lg: "h-7 px-3 text-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default"
+    }
+  }
+);
+var badgeVariants = badgeVisualVariants;
+var iconSizeClasses = {
+  sm: "[&_svg]:h-2.5 [&_svg]:w-2.5",
+  // 10px icons for 20px badge
+  default: "[&_svg]:h-3 [&_svg]:w-3",
+  // 12px icons for 24px badge
+  lg: "[&_svg]:h-3.5 [&_svg]:w-3.5"
+  // 14px icons for 28px badge
+};
+var Badge = memo(
+  forwardRef(
+    ({
+      className,
+      variant = "primary",
+      size = "default",
+      children,
+      icon,
+      iconPosition = "start",
+      count,
+      onPress,
+      isDisabled,
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "data-testid": dataTestId,
+      ...props
+    }, ref) => {
+      const visualClasses = cn(
+        badgeVisualVariants({ variant, size }),
+        iconSizeClasses[size],
+        className
+      );
+      const hasIcon = !!icon;
+      const hasCount = count !== void 0;
+      const hasChildren = !!children;
+      const multipleElements = [hasIcon, hasCount, hasChildren].filter(Boolean).length > 1;
+      const renderContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && iconPosition === "start" && /* @__PURE__ */ jsx("span", { className: "shrink-0", "aria-hidden": "true", children: icon }),
+        children && (multipleElements ? /* @__PURE__ */ jsx("span", { children }) : children),
+        count !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums", children: count }),
+        icon && iconPosition === "end" && /* @__PURE__ */ jsx("span", { className: "shrink-0", "aria-hidden": "true", children: icon })
+      ] });
+      if (onPress) {
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            isDisabled,
+            onPress,
+            className: badgeOuterVariants(),
+            id,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            "data-testid": dataTestId,
+            ...props,
+            children: (renderProps) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  visualClasses,
+                  // Interaction styles for visual feedback
+                  PRESSED_STYLES,
+                  HOVER_STYLES,
+                  HIGH_CONTRAST_HOVER,
+                  HIGH_CONTRAST_PRESSED
+                ),
+                "data-pressed": renderProps.isPressed || void 0,
+                children: renderContent()
+              }
+            )
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          className: visualClasses,
+          id,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          "aria-describedby": ariaDescribedby,
+          "data-testid": dataTestId,
+          ...props,
+          children: renderContent()
+        }
+      );
+    }
+  )
+);
+Badge.displayName = "Badge";
+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/Badge/Badge.types.ts
+var BadgeVariantSchema = z.enum([
+  "primary",
+  // Default brand color for general labels
+  "accent",
+  // Highlighted/featured content
+  "destructive",
+  // Errors, warnings, critical states
+  "content"
+  // Neutral/informational content
+]);
+var BadgeSizeSchema = z.enum([
+  "sm",
+  // 20px height
+  "default",
+  // 24px height
+  "lg"
+  // 28px height
+]);
+var BadgeIconPositionSchema = z.enum([
+  "start",
+  // Icon before text (default)
+  "end"
+  // Icon after text (useful for dismiss/close)
+]);
+var BadgePropsSchema = BaseComponentPropsSchema.extend({
+  // Content - override children to be string only for badges
+  children: z.string().optional(),
+  icon: z.custom().optional(),
+  iconPosition: BadgeIconPositionSchema.optional().default("start"),
+  count: z.union([z.number(), z.string()]).optional(),
+  // Variants
+  variant: BadgeVariantSchema.optional().default("primary"),
+  size: BadgeSizeSchema.optional().default("default"),
+  // Interaction - makes badge actionable when provided
+  onPress: z.function().optional(),
+  // React Aria PressEvent handler
+  isDisabled: z.boolean().optional()
+});
+
+export { Badge, BadgeIconPositionSchema, BadgePropsSchema, BadgeSizeSchema, BadgeVariantSchema, badgeOuterVariants, badgeVariants, badgeVisualVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/styles/interaction-states.ts","../../../src/elements/Badge/Badge.tsx","../../../src/schemas/BaseComponentProps.ts","../../../src/elements/Badge/Badge.types.ts"],"names":["AriaButton","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 * Badge Component - 2-Layer Architecture for Actionable Badges\n * Accessible badge with React Aria primitives and CVA styling\n *\n * Architecture:\n * - Static badges: Single span element\n * - Actionable badges (with onPress):\n *   - Layer 1: Touch Target (44x44px WCAG AAA compliant, transparent)\n *   - Layer 2: Visual Badge (compact size, colors)\n *\n * @see plan.md for architecture details\n * @see badge-prd.md for requirements\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo, type ReactElement } from 'react';\nimport {\n  Button as AriaButton,\n  type ButtonProps as AriaButtonProps,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport {\n  PRESSED_STYLES,\n  HOVER_STYLES,\n  HIGH_CONTRAST_HOVER,\n  HIGH_CONTRAST_PRESSED,\n} from '../../styles/interaction-states';\nimport type { BadgeProps } from './Badge.types';\n\n/**\n * Layer 1: Transparent outer touch target (44x44px minimum)\n * Only used for actionable badges (with onPress)\n * Handles WCAG 2.2 AAA touch target requirement\n * IMPORTANT: Focus ring stays on Layer 1 for AAA compliance (2.4.13)\n */\nexport const badgeOuterVariants = cva(\n  [\n    'relative inline-flex items-center justify-center',\n    'min-h-[44px] min-w-[44px]',\n    'focus-visible:outline-none',\n    'focus-visible:ring-2',\n    'focus-visible:ring-[var(--ring)]',\n    'focus-visible:ring-offset-2',\n    'focus-visible:ring-offset-[var(--page-background)]',\n    'disabled:pointer-events-none',\n    'disabled:opacity-50',\n  ],\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n);\n\n/**\n * Layer 2: Visual Badge appearance\n * Used for all badges (both static and actionable)\n * Provides the visual appearance with configurable size and variant\n * NOTE: NO focus-visible styles here - focus ring is on Layer 1\n */\nexport const badgeVisualVariants = cva(\n  [\n    'inline-flex items-center justify-center',\n    'gap-1',\n    'rounded-full',\n    'font-medium',\n    'whitespace-nowrap',\n    'transition-colors',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          'bg-[var(--primary-action)]',\n          'text-[var(--primary-action-foreground)]',\n          'hover:bg-[var(--primary-action)]/90',\n          'data-[pressed]:bg-[var(--primary-action)]/80',\n        ],\n        accent: [\n          'bg-[var(--accent-background)]',\n          'text-[var(--accent-foreground)]',\n          'hover:bg-[var(--accent-background)]/90',\n          'data-[pressed]:bg-[var(--accent-background)]/80',\n        ],\n        destructive: [\n          'bg-[var(--destructive-background)]',\n          'text-[var(--destructive-foreground)]',\n          'hover:bg-[var(--destructive-background)]/90',\n          'data-[pressed]:bg-[var(--destructive-background)]/80',\n        ],\n        content: [\n          'bg-[var(--accent-background)]',\n          'text-[var(--accent-foreground)]',\n          'hover:bg-[var(--accent-background)]/90',\n          'data-[pressed]:bg-[var(--accent-background)]/80',\n        ],\n      },\n      size: {\n        sm: 'h-5 px-2 text-xs',\n        default: 'h-6 px-2.5 text-xs',\n        lg: 'h-7 px-3 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'default',\n    },\n  }\n);\n\n/**\n * @deprecated Use badgeVisualVariants instead. This alias is kept for backward compatibility.\n */\nexport const badgeVariants = badgeVisualVariants;\n\n// Icon size classes mapped to badge sizes\n// Sizes are proportional to badge height: sm=20px, default=24px, lg=28px\nconst iconSizeClasses: Record<NonNullable<BadgeProps['size']>, string> = {\n  sm: '[&_svg]:h-2.5 [&_svg]:w-2.5',      // 10px icons for 20px badge\n  default: '[&_svg]:h-3 [&_svg]:w-3',      // 12px icons for 24px badge\n  lg: '[&_svg]:h-3.5 [&_svg]:w-3.5',       // 14px icons for 28px badge\n};\n\n/**\n * Badge Component - Accessible badge for labels, tags, and status indicators\n *\n * Features:\n * - WCAG 2.2 AAA compliant (7:1 contrast, 44x44px touch targets for actionable)\n * - 4 semantic variants (primary, accent, destructive, content)\n * - 3 sizes (sm, default, lg)\n * - Icon support with configurable position\n * - Count display (number or string)\n * - Static badges (span) vs actionable badges (button)\n */\nconst Badge = memo(\n  forwardRef<HTMLButtonElement | HTMLSpanElement, BadgeProps>(\n    (\n      {\n        className,\n        variant = 'primary',\n        size = 'default',\n        children,\n        icon,\n        iconPosition = 'start',\n        count,\n        onPress,\n        isDisabled,\n        id,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledby,\n        'aria-describedby': ariaDescribedby,\n        'data-testid': dataTestId,\n        ...props\n      },\n      ref\n    ): ReactElement => {\n      // Visual classes for the badge appearance\n      const visualClasses = cn(\n        badgeVisualVariants({ variant, size }),\n        iconSizeClasses[size],\n        className\n      );\n\n      // Check if we have multiple content elements (need gap styling)\n      const hasIcon = !!icon;\n      const hasCount = count !== undefined;\n      const hasChildren = !!children;\n      const multipleElements =\n        [hasIcon, hasCount, hasChildren].filter(Boolean).length > 1;\n\n      // Content rendering: icon + children + count (all can display together)\n      // Only wrap children in span when there are multiple elements (for gap)\n      const renderContent = (): ReactElement => (\n        <>\n          {icon && iconPosition === 'start' && (\n            <span className=\"shrink-0\" aria-hidden=\"true\">\n              {icon}\n            </span>\n          )}\n          {children && (multipleElements ? <span>{children}</span> : children)}\n          {count !== undefined && (\n            <span className=\"font-mono tabular-nums\">{count}</span>\n          )}\n          {icon && iconPosition === 'end' && (\n            <span className=\"shrink-0\" aria-hidden=\"true\">\n              {icon}\n            </span>\n          )}\n        </>\n      );\n\n      // Actionable badge (with onPress) - uses 2-layer architecture\n      if (onPress) {\n        return (\n          <AriaButton\n            ref={ref as React.Ref<HTMLButtonElement>}\n            isDisabled={isDisabled}\n            onPress={onPress}\n            className={badgeOuterVariants()}\n            id={id}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-describedby={ariaDescribedby}\n            data-testid={dataTestId}\n            {...(props as Omit<AriaButtonProps, 'className'>)}\n          >\n            {(renderProps) => (\n              <span\n                className={cn(\n                  visualClasses,\n                  // Interaction styles for visual feedback\n                  PRESSED_STYLES,\n                  HOVER_STYLES,\n                  HIGH_CONTRAST_HOVER,\n                  HIGH_CONTRAST_PRESSED\n                )}\n                data-pressed={renderProps.isPressed || undefined}\n              >\n                {renderContent()}\n              </span>\n            )}\n          </AriaButton>\n        );\n      }\n\n      // Static badge - simple span element\n      return (\n        <span\n          ref={ref as React.Ref<HTMLSpanElement>}\n          className={visualClasses}\n          id={id}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-describedby={ariaDescribedby}\n          data-testid={dataTestId}\n          {...props}\n        >\n          {renderContent()}\n        </span>\n      );\n    }\n  )\n);\n\nBadge.displayName = 'Badge';\n\nexport { Badge };\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 { type ReactNode } from 'react';\nimport { type PressEvent } from 'react-aria-components';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\n\n/**\n * Badge Component Types\n *\n * Defines the props schema and TypeScript types for the Badge component.\n * Extends BaseComponentPropsSchema for consistent accessibility and styling APIs.\n *\n * @see badge-prd.md for full requirements\n * @see WCAG 2.2 AAA compliance requirements\n */\n\n// Variant schema - semantic color variants\nexport const BadgeVariantSchema = z.enum([\n  'primary', // Default brand color for general labels\n  'accent', // Highlighted/featured content\n  'destructive', // Errors, warnings, critical states\n  'content', // Neutral/informational content\n]);\n\n// Size schema - visual size variants\nexport const BadgeSizeSchema = z.enum([\n  'sm', // 20px height\n  'default', // 24px height\n  'lg', // 28px height\n]);\n\n// Icon position schema\nexport const BadgeIconPositionSchema = z.enum([\n  'start', // Icon before text (default)\n  'end', // Icon after text (useful for dismiss/close)\n]);\n\n// Main props schema extending base component props\nexport const BadgePropsSchema = BaseComponentPropsSchema.extend({\n  // Content - override children to be string only for badges\n  children: z.string().optional(),\n  icon: z.custom<ReactNode>().optional(),\n  iconPosition: BadgeIconPositionSchema.optional().default('start'),\n  count: z.union([z.number(), z.string()]).optional(),\n\n  // Variants\n  variant: BadgeVariantSchema.optional().default('primary'),\n  size: BadgeSizeSchema.optional().default('default'),\n\n  // Interaction - makes badge actionable when provided\n  onPress: z.function().optional(), // React Aria PressEvent handler\n  isDisabled: z.boolean().optional(),\n});\n\n// TypeScript types inferred from schemas\nexport type BadgeVariant = z.infer<typeof BadgeVariantSchema>;\nexport type BadgeSize = z.infer<typeof BadgeSizeSchema>;\nexport type BadgeIconPosition = z.infer<typeof BadgeIconPositionSchema>;\n\n// Base props from Zod schema (excluding onPress which needs proper typing)\ntype BadgePropsBase = Omit<z.infer<typeof BadgePropsSchema>, 'onPress'>;\n\n/**\n * Badge component props interface\n * Uses Zod schema inference for most props, but properly types onPress\n * to match React Aria's PressEvent handler signature\n */\nexport interface BadgeProps extends BadgePropsBase {\n  /** Press handler - makes badge actionable when provided */\n  onPress?: (e: PressEvent) => void;\n}\n"]}