@tribepad/themis 1.0.0

package/dist/chunk-KPRRBSG6.mjs

@@ -0,0 +1,272 @@
+import { Button } from './chunk-BDXKKMBZ.mjs';
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { BaseComponentPropsSchema } from './chunk-5SVLJN2C.mjs';
+import { forwardRef, useState, useCallback } from 'react';
+import { RotateCcw } from 'lucide-react';
+import { z } from 'zod';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var FlipButtonPositionSchema = z.enum([
+  "top-right",
+  "top-left",
+  "bottom-right",
+  "bottom-left"
+]);
+var FlipButtonLabelSchema = z.object({
+  show: z.string().optional(),
+  hide: z.string().optional()
+});
+var FlipButtonIconSchema = z.object({
+  /** Icon to show on front side button (default: RotateCcw) */
+  front: z.custom().optional(),
+  /** Icon to show on back side button (default: same as front or RotateCcw) */
+  back: z.custom().optional()
+});
+var CardPropsSchema = BaseComponentPropsSchema.extend({
+  // Flip functionality
+  /** Enable flip animation feature */
+  flippable: z.boolean().optional().default(false),
+  /** Content to display on the back side of the card */
+  backContent: z.custom().optional(),
+  /** Controlled mode: current flip state */
+  isFlipped: z.boolean().optional(),
+  /** Uncontrolled mode: initial flip state */
+  defaultFlipped: z.boolean().optional().default(false),
+  /** Callback fired when flip state changes */
+  onFlipChange: z.custom().optional(),
+  // Flip button configuration
+  /** Position of the flip button on the card */
+  flipButtonPosition: FlipButtonPositionSchema.optional().default("top-right"),
+  /** Custom labels for the flip button title attribute */
+  flipButtonLabel: FlipButtonLabelSchema.optional(),
+  /** Custom icons for the flip button (default: RotateCcw) */
+  flipButtonIcon: FlipButtonIconSchema.optional(),
+  /** Duration of flip animation in milliseconds */
+  flipDuration: z.number().optional().default(600)
+});
+var CardHeaderPropsSchema = BaseComponentPropsSchema.extend({
+  children: z.custom()
+});
+var CardTitlePropsSchema = BaseComponentPropsSchema.extend({
+  /** Heading level (h1-h6) - defaults to h3 */
+  as: z.enum(["h1", "h2", "h3", "h4", "h5", "h6"]).optional().default("h3"),
+  children: z.custom()
+});
+var CardDescriptionPropsSchema = BaseComponentPropsSchema.extend({
+  children: z.custom()
+});
+var CardContentPropsSchema = BaseComponentPropsSchema.extend({
+  children: z.custom()
+});
+var CardFooterPropsSchema = BaseComponentPropsSchema.extend({
+  children: z.custom()
+});
+var CardActionPropsSchema = BaseComponentPropsSchema.extend({
+  children: z.custom()
+});
+var flipButtonPositionVariants = cva(
+  [
+    "absolute z-10 min-h-[44px] min-w-[44px] p-2",
+    "flex items-center justify-center",
+    "rounded-full bg-[var(--accent-background)]",
+    "text-[var(--primary-action)] hover:text-[var(--primary-action-hover)]",
+    "transition-colors duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
+  ],
+  {
+    variants: {
+      position: {
+        "top-right": "top-2 right-2",
+        "top-left": "top-2 left-2",
+        "bottom-right": "bottom-2 right-2",
+        "bottom-left": "bottom-2 left-2"
+      }
+    },
+    defaultVariants: {
+      position: "top-right"
+    }
+  }
+);
+var Card = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      flippable = false,
+      backContent,
+      isFlipped: controlledFlipped,
+      defaultFlipped = false,
+      onFlipChange,
+      flipButtonPosition = "top-right",
+      flipButtonLabel,
+      flipButtonIcon,
+      flipDuration = 600,
+      ...rest
+    } = props;
+    const [internalFlipped, setInternalFlipped] = useState(defaultFlipped);
+    const isControlled = controlledFlipped !== void 0;
+    const flipped = isControlled ? controlledFlipped : internalFlipped;
+    const handleFlip = useCallback(() => {
+      const newState = !flipped;
+      if (!isControlled) {
+        setInternalFlipped(newState);
+      }
+      onFlipChange?.(newState);
+    }, [flipped, isControlled, onFlipChange]);
+    if (!flippable) {
+      return /* @__PURE__ */ jsx(
+        "article",
+        {
+          ref,
+          className: cn(
+            "rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm",
+            className
+          ),
+          ...rest,
+          children
+        }
+      );
+    }
+    const showLabel = flipButtonLabel?.show ?? "Show more details";
+    const hideLabel = flipButtonLabel?.hide ?? "Show less details";
+    const defaultIcon = /* @__PURE__ */ jsx(RotateCcw, { className: "h-5 w-5", "aria-hidden": "true" });
+    const frontIcon = flipButtonIcon?.front ?? defaultIcon;
+    const backIcon = flipButtonIcon?.back ?? flipButtonIcon?.front ?? defaultIcon;
+    const FlipButton = ({ label, icon }) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        visualSize: "icon",
+        "aria-hidden": "true",
+        excludeFromTabOrder: true,
+        onPress: handleFlip,
+        className: flipButtonPositionVariants({ position: flipButtonPosition }),
+        "aria-label": label,
+        children: icon
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      "article",
+      {
+        ref,
+        className: cn("relative", className),
+        style: { perspective: "1000px" },
+        ...rest,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative transition-transform",
+              "motion-reduce:transition-none"
+            ),
+            style: {
+              transformStyle: "preserve-3d",
+              transitionDuration: `${flipDuration}ms`,
+              transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)"
+            },
+            "data-flipped": flipped,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "relative rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm",
+                  style: { backfaceVisibility: "hidden" },
+                  "data-side": "front",
+                  children: [
+                    children,
+                    /* @__PURE__ */ jsx(FlipButton, { label: showLabel, icon: frontIcon })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "absolute inset-0 overflow-y-auto rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm",
+                  style: {
+                    backfaceVisibility: "hidden",
+                    transform: "rotateY(180deg)"
+                  },
+                  "data-side": "back",
+                  children: [
+                    backContent,
+                    /* @__PURE__ */ jsx(FlipButton, { label: hideLabel, icon: backIcon })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var CardHeader = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "header",
+    {
+      ref,
+      className: cn("flex flex-col space-y-1.5 p-6", className),
+      ...props,
+      children
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = forwardRef(
+  ({ className, as: Comp = "h3", children, ...props }, ref) => /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn("text-2xl font-semibold leading-none tracking-tight", className),
+      ...props,
+      children
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("text-sm text-[var(--content-foreground-muted)]", className),
+      ...props,
+      children
+    }
+  )
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props, children })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "footer",
+    {
+      ref,
+      className: cn("flex items-center p-6 pt-0", className),
+      ...props,
+      children
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+var CardAction = forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("ml-auto", className),
+      ...props,
+      children
+    }
+  )
+);
+CardAction.displayName = "CardAction";
+
+export { Card, CardAction, CardActionPropsSchema, CardContent, CardContentPropsSchema, CardDescription, CardDescriptionPropsSchema, CardFooter, CardFooterPropsSchema, CardHeader, CardHeaderPropsSchema, CardPropsSchema, CardTitle, CardTitlePropsSchema, FlipButtonIconSchema, FlipButtonLabelSchema, FlipButtonPositionSchema, flipButtonPositionVariants };
+//# sourceMappingURL=chunk-KPRRBSG6.mjs.map
+//# sourceMappingURL=chunk-KPRRBSG6.mjs.map

package/dist/chunk-KPRRBSG6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Card/Card.types.ts","../src/elements/Card/Card.tsx"],"names":[],"mappings":"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","file":"chunk-KPRRBSG6.mjs","sourcesContent":["import { z } from 'zod';\nimport { cva } from 'class-variance-authority';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\nimport type { ReactNode } from 'react';\n\n/**\n * Flip button position variants\n * Controls where the flip button appears on the card\n *\n * @see card-prd.md US-5 (Flip Button Position)\n */\nexport const FlipButtonPositionSchema = z.enum([\n  'top-right',\n  'top-left',\n  'bottom-right',\n  'bottom-left',\n]);\nexport type FlipButtonPosition = z.infer<typeof FlipButtonPositionSchema>;\n\n/**\n * Flip button label configuration\n * Custom labels for the flip button title attribute\n *\n * @see card-prd.md US-6 (Custom Labels)\n */\nexport const FlipButtonLabelSchema = z.object({\n  show: z.string().optional(),\n  hide: z.string().optional(),\n});\nexport type FlipButtonLabel = z.infer<typeof FlipButtonLabelSchema>;\n\n/**\n * Flip button icon configuration\n * Custom icons for the front and back flip buttons\n */\nexport const FlipButtonIconSchema = z.object({\n  /** Icon to show on front side button (default: RotateCcw) */\n  front: z.custom<ReactNode>().optional(),\n  /** Icon to show on back side button (default: same as front or RotateCcw) */\n  back: z.custom<ReactNode>().optional(),\n});\nexport type FlipButtonIcon = z.infer<typeof FlipButtonIconSchema>;\n\n/**\n * Card root component props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n * @see card-prd.md US-2 (Flippable Card)\n * @see card-prd.md US-3 (Controlled/Uncontrolled State)\n */\nexport const CardPropsSchema = BaseComponentPropsSchema.extend({\n  // Flip functionality\n  /** Enable flip animation feature */\n  flippable: z.boolean().optional().default(false),\n\n  /** Content to display on the back side of the card */\n  backContent: z.custom<ReactNode>().optional(),\n\n  /** Controlled mode: current flip state */\n  isFlipped: z.boolean().optional(),\n\n  /** Uncontrolled mode: initial flip state */\n  defaultFlipped: z.boolean().optional().default(false),\n\n  /** Callback fired when flip state changes */\n  onFlipChange: z.custom<(isFlipped: boolean) => void>().optional(),\n\n  // Flip button configuration\n  /** Position of the flip button on the card */\n  flipButtonPosition: FlipButtonPositionSchema.optional().default('top-right'),\n\n  /** Custom labels for the flip button title attribute */\n  flipButtonLabel: FlipButtonLabelSchema.optional(),\n\n  /** Custom icons for the flip button (default: RotateCcw) */\n  flipButtonIcon: FlipButtonIconSchema.optional(),\n\n  /** Duration of flip animation in milliseconds */\n  flipDuration: z.number().optional().default(600),\n});\n\nexport type CardProps = z.infer<typeof CardPropsSchema>;\n\n/**\n * CardHeader props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardHeaderPropsSchema = BaseComponentPropsSchema.extend({\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardHeaderProps = z.infer<typeof CardHeaderPropsSchema>;\n\n/**\n * CardTitle props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardTitlePropsSchema = BaseComponentPropsSchema.extend({\n  /** Heading level (h1-h6) - defaults to h3 */\n  as: z.enum(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).optional().default('h3'),\n\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardTitleProps = z.infer<typeof CardTitlePropsSchema>;\n\n/**\n * CardDescription props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardDescriptionPropsSchema = BaseComponentPropsSchema.extend({\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardDescriptionProps = z.infer<typeof CardDescriptionPropsSchema>;\n\n/**\n * CardContent props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardContentPropsSchema = BaseComponentPropsSchema.extend({\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardContentProps = z.infer<typeof CardContentPropsSchema>;\n\n/**\n * CardFooter props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardFooterPropsSchema = BaseComponentPropsSchema.extend({\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardFooterProps = z.infer<typeof CardFooterPropsSchema>;\n\n/**\n * CardAction props schema\n *\n * @see card-prd.md US-1 (Basic Card Container)\n */\nexport const CardActionPropsSchema = BaseComponentPropsSchema.extend({\n  children: z.custom<ReactNode>(),\n});\n\nexport type CardActionProps = z.infer<typeof CardActionPropsSchema>;\n\n/**\n * CVA variants for flip button positioning\n *\n * Provides consistent positioning classes for the flip button\n * based on the flipButtonPosition prop.\n *\n * Buttons are rendered INSIDE both front and back sides so they\n * flip along with the card content for a more natural feel.\n *\n * @see card-prd.md US-5 (Flip Button Position)\n */\nexport const flipButtonPositionVariants = cva(\n  [\n    'absolute z-10 min-h-[44px] min-w-[44px] p-2',\n    'flex items-center justify-center',\n    'rounded-full bg-[var(--accent-background)]',\n    'text-[var(--primary-action)] hover:text-[var(--primary-action-hover)]',\n    'transition-colors duration-200',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]',\n  ],\n  {\n    variants: {\n      position: {\n        'top-right': 'top-2 right-2',\n        'top-left': 'top-2 left-2',\n        'bottom-right': 'bottom-2 right-2',\n        'bottom-left': 'bottom-2 left-2',\n      },\n    },\n    defaultVariants: {\n      position: 'top-right',\n    },\n  }\n);\n","/**\n * Card Component (TDD Stub)\n *\n * This is a minimal stub to allow tests to run during the RED phase.\n * Full implementation will be added in the GREEN phase.\n *\n * @see card-prd.md (Product Requirements)\n * @see plan.md (Implementation Plan)\n */\n\nimport { forwardRef, useState, useCallback, type HTMLAttributes, type ReactNode } from 'react';\nimport { RotateCcw } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport {\n  flipButtonPositionVariants,\n  type CardProps,\n  type CardHeaderProps,\n  type CardTitleProps,\n  type CardDescriptionProps,\n  type CardContentProps,\n  type CardFooterProps,\n  type CardActionProps,\n} from './Card.types';\n\n// ============================================================================\n// Card (Root Component)\n// ============================================================================\n\nexport const Card = forwardRef<HTMLElement, CardProps & HTMLAttributes<HTMLElement>>(\n  (props, ref) => {\n    const {\n      children,\n      className,\n      flippable = false,\n      backContent,\n      isFlipped: controlledFlipped,\n      defaultFlipped = false,\n      onFlipChange,\n      flipButtonPosition = 'top-right',\n      flipButtonLabel,\n      flipButtonIcon,\n      flipDuration = 600,\n      ...rest\n    } = props;\n\n    // Controlled/uncontrolled state\n    const [internalFlipped, setInternalFlipped] = useState(defaultFlipped);\n    const isControlled = controlledFlipped !== undefined;\n    const flipped = isControlled ? controlledFlipped : internalFlipped;\n\n    const handleFlip = useCallback(() => {\n      const newState = !flipped;\n      if (!isControlled) {\n        setInternalFlipped(newState);\n      }\n      onFlipChange?.(newState);\n    }, [flipped, isControlled, onFlipChange]);\n\n    // Non-flippable card\n    if (!flippable) {\n      return (\n        <article\n          ref={ref}\n          className={cn(\n            'rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm',\n            className\n          )}\n          {...rest}\n        >\n          {children}\n        </article>\n      );\n    }\n\n    // Flippable card\n    const showLabel = flipButtonLabel?.show ?? 'Show more details';\n    const hideLabel = flipButtonLabel?.hide ?? 'Show less details';\n\n    // Default icon\n    const defaultIcon = <RotateCcw className=\"h-5 w-5\" aria-hidden=\"true\" />;\n    // Custom icons (back defaults to front if not specified)\n    const frontIcon = flipButtonIcon?.front ?? defaultIcon;\n    const backIcon = flipButtonIcon?.back ?? flipButtonIcon?.front ?? defaultIcon;\n\n    // Flip button component - rendered on both front and back\n    const FlipButton = ({ label, icon }: { label: string; icon: ReactNode }) => (\n      <Button\n        variant=\"ghost\"\n        visualSize=\"icon\"\n        aria-hidden=\"true\"\n        excludeFromTabOrder\n        onPress={handleFlip}\n        className={flipButtonPositionVariants({ position: flipButtonPosition })}\n        aria-label={label}\n      >\n        {icon}\n      </Button>\n    );\n\n    return (\n      <article\n        ref={ref}\n        className={cn('relative', className)}\n        style={{ perspective: '1000px' }}\n        {...rest}\n      >\n        {/* Flipper container - handles 3D transform */}\n        <div\n          className={cn(\n            'relative transition-transform',\n            'motion-reduce:transition-none'\n          )}\n          style={{\n            transformStyle: 'preserve-3d',\n            transitionDuration: `${flipDuration}ms`,\n            transform: flipped ? 'rotateY(180deg)' : 'rotateY(0deg)',\n          }}\n          data-flipped={flipped}\n        >\n          {/* Front side */}\n          <div\n            className=\"relative rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm\"\n            style={{ backfaceVisibility: 'hidden' }}\n            data-side=\"front\"\n          >\n            {children}\n            <FlipButton label={showLabel} icon={frontIcon} />\n          </div>\n\n          {/* Back side - scrollable if content overflows */}\n          <div\n            className=\"absolute inset-0 overflow-y-auto rounded-lg border border-[var(--border)] bg-[var(--content-background)] text-[var(--content-foreground)] shadow-sm\"\n            style={{\n              backfaceVisibility: 'hidden',\n              transform: 'rotateY(180deg)',\n            }}\n            data-side=\"back\"\n          >\n            {backContent}\n            <FlipButton label={hideLabel} icon={backIcon} />\n          </div>\n        </div>\n      </article>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n\n// ============================================================================\n// CardHeader\n// ============================================================================\n\nexport const CardHeader = forwardRef<HTMLElement, CardHeaderProps & HTMLAttributes<HTMLElement>>(\n  ({ className, children, ...props }, ref) => (\n    <header\n      ref={ref}\n      className={cn('flex flex-col space-y-1.5 p-6', className)}\n      {...props}\n    >\n      {children}\n    </header>\n  )\n);\n\nCardHeader.displayName = 'CardHeader';\n\n// ============================================================================\n// CardTitle\n// ============================================================================\n\nexport const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps & HTMLAttributes<HTMLHeadingElement>>(\n  ({ className, as: Comp = 'h3', children, ...props }, ref) => (\n    <Comp\n      ref={ref}\n      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n);\n\nCardTitle.displayName = 'CardTitle';\n\n// ============================================================================\n// CardDescription\n// ============================================================================\n\nexport const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps & HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, children, ...props }, ref) => (\n    <p\n      ref={ref}\n      className={cn('text-sm text-[var(--content-foreground-muted)]', className)}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n);\n\nCardDescription.displayName = 'CardDescription';\n\n// ============================================================================\n// CardContent\n// ============================================================================\n\nexport const CardContent = forwardRef<HTMLDivElement, CardContentProps & HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn('p-6 pt-0', className)} {...props}>\n      {children}\n    </div>\n  )\n);\n\nCardContent.displayName = 'CardContent';\n\n// ============================================================================\n// CardFooter\n// ============================================================================\n\nexport const CardFooter = forwardRef<HTMLElement, CardFooterProps & HTMLAttributes<HTMLElement>>(\n  ({ className, children, ...props }, ref) => (\n    <footer\n      ref={ref}\n      className={cn('flex items-center p-6 pt-0', className)}\n      {...props}\n    >\n      {children}\n    </footer>\n  )\n);\n\nCardFooter.displayName = 'CardFooter';\n\n// ============================================================================\n// CardAction\n// ============================================================================\n\nexport const CardAction = forwardRef<HTMLDivElement, CardActionProps & HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('ml-auto', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n\nCardAction.displayName = 'CardAction';\n"]}

package/dist/chunk-NFSBGRDB.mjs

@@ -0,0 +1,57 @@
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { BaseComponentPropsSchema } from './chunk-5SVLJN2C.mjs';
+import { memo, forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+import { z } from 'zod';
+
+var skeletonVariants = cva(
+  // Base styles - pulse animation and theme-aware background
+  "animate-pulse bg-[var(--accent-background)] relative",
+  {
+    variants: {
+      // Shape variants
+      variant: {
+        rectangle: "rounded-md",
+        // Default: 0.375rem border radius
+        circle: "rounded-full",
+        // Circular shape (for avatars, icons)
+        text: "rounded-sm h-4"
+        // Text line placeholder (1rem height, 0.125rem radius)
+      }
+    },
+    defaultVariants: {
+      variant: "rectangle"
+    }
+  }
+);
+var Skeleton = memo(
+  forwardRef(
+    ({ className, variant, ...props }, ref) => {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          role: "status",
+          "aria-live": "polite",
+          "aria-busy": "true",
+          className: cn(skeletonVariants({ variant }), className),
+          ...props,
+          children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading..." })
+        }
+      );
+    }
+  )
+);
+Skeleton.displayName = "Skeleton";
+var SkeletonPropsSchema = BaseComponentPropsSchema.extend({
+  // Variants - shape of the skeleton placeholder
+  variant: z.enum(["rectangle", "circle", "text"]).optional().default("rectangle"),
+  // Custom className for width/height overrides
+  // Users can pass className="w-20 h-20" for custom sizing
+  className: z.string().optional()
+});
+
+export { Skeleton, SkeletonPropsSchema, skeletonVariants };
+//# sourceMappingURL=chunk-NFSBGRDB.mjs.map
+//# sourceMappingURL=chunk-NFSBGRDB.mjs.map

package/dist/chunk-NFSBGRDB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Skeleton/Skeleton.tsx","../src/elements/Skeleton/Skeleton.types.ts"],"names":[],"mappings":";;;;;;;AAoBA,IAAM,gBAAA,GAAmB,GAAA;AAAA;AAAA,EAEvB,sDAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA,MAER,OAAA,EAAS;AAAA,QACP,SAAA,EAAW,YAAA;AAAA;AAAA,QACX,MAAA,EAAQ,cAAA;AAAA;AAAA,QACR,IAAA,EAAM;AAAA;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AAeA,IAAM,QAAA,GAAW,IAAA;AAAA,EACf,UAAA;AAAA,IACE,CAAC,EAAE,SAAA,EAAW,SAAS,GAAG,KAAA,IAAS,GAAA,KAAQ;AACzC,MAAA,uBACE,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAA,EAAK,QAAA;AAAA,UACL,WAAA,EAAU,QAAA;AAAA,UACV,WAAA,EAAU,MAAA;AAAA,UACV,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,UACrD,GAAG,KAAA;AAAA,UAGJ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,YAAA,EAAU;AAAA;AAAA,OACtC;AAAA,IAEJ;AAAA;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AC5DhB,IAAM,mBAAA,GAAsB,yBAAyB,MAAA,CAAO;AAAA;AAAA,EAEjE,OAAA,EAAS,CAAA,CACN,IAAA,CAAK,CAAC,WAAA,EAAa,QAAA,EAAU,MAAM,CAAC,CAAA,CACpC,QAAA,EAAS,CACT,OAAA,CAAQ,WAAW,CAAA;AAAA;AAAA;AAAA,EAItB,SAAA,EAAW,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA;AACxB,CAAC","file":"chunk-NFSBGRDB.mjs","sourcesContent":["\"use client\";\n\n/**\n * Skeleton Component\n * Loading placeholder with pulse animation and theme-aware styling\n *\n * @see ShadCN Skeleton: https://ui.shadcn.com/docs/components/skeleton\n * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)\n * @see tasks.md Phase 2 (Green Phase - Implementation)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo, type HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Skeleton variant styles using CVA\n * @see tasks.md Phase 2.2 (CVA Variant Definitions)\n */\nconst skeletonVariants = cva(\n  // Base styles - pulse animation and theme-aware background\n  \"animate-pulse bg-[var(--accent-background)] relative\",\n  {\n    variants: {\n      // Shape variants\n      variant: {\n        rectangle: \"rounded-md\", // Default: 0.375rem border radius\n        circle: \"rounded-full\",  // Circular shape (for avatars, icons)\n        text: \"rounded-sm h-4\",  // Text line placeholder (1rem height, 0.125rem radius)\n      },\n    },\n    defaultVariants: {\n      variant: \"rectangle\",\n    },\n  }\n);\n\nexport interface SkeletonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof skeletonVariants> {\n  variant?: 'rectangle' | 'circle' | 'text';\n  className?: string;\n}\n\n/**\n * Skeleton Component\n * Non-interactive loading placeholder with pulse animation\n *\n * @see tasks.md Phase 2.4 (Component Implementation)\n */\nconst Skeleton = memo(\n  forwardRef<HTMLDivElement, SkeletonProps>(\n    ({ className, variant, ...props }, ref) => {\n      return (\n        <div\n          ref={ref}\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-busy=\"true\"\n          className={cn(skeletonVariants({ variant }), className)}\n          {...props}\n        >\n          {/* Screen reader text for accessibility */}\n          <span className=\"sr-only\">Loading...</span>\n        </div>\n      );\n    }\n  )\n);\n\nSkeleton.displayName = \"Skeleton\";\n\nexport { Skeleton, skeletonVariants };\n","import { z } from 'zod';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\n\n/**\n * Skeleton props schema extending BaseComponentProps\n *\n * @see ShadCN Skeleton: https://ui.shadcn.com/docs/components/skeleton\n * @see tasks.md Phase 1.1 (Type System)\n * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)\n * @see constitution.md Principle IV (Accessibility First)\n */\nexport const SkeletonPropsSchema = BaseComponentPropsSchema.extend({\n  // Variants - shape of the skeleton placeholder\n  variant: z\n    .enum(['rectangle', 'circle', 'text'])\n    .optional()\n    .default('rectangle'),\n\n  // Custom className for width/height overrides\n  // Users can pass className=\"w-20 h-20\" for custom sizing\n  className: z.string().optional(),\n});\n\nexport type SkeletonProps = z.infer<typeof SkeletonPropsSchema>;\n\n/**\n * CVA variant configuration type\n * Used for class-variance-authority integration\n */\nexport type SkeletonVariant = z.infer<typeof SkeletonPropsSchema>['variant'];\n"]}

package/dist/chunk-NGJVCFTM.js

@@ -0,0 +1,219 @@
+'use strict';
+
+var chunkB5Q4UPL6_js = require('./chunk-B5Q4UPL6.js');
+var chunkVIREG536_js = require('./chunk-VIREG536.js');
+var chunkT4COXKQ3_js = require('./chunk-T4COXKQ3.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+var zod = require('zod');
+
+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 = chunkVIREG536_js.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: chunkVIREG536_js.cn(
+                  visualClasses,
+                  // Interaction styles for visual feedback
+                  chunkB5Q4UPL6_js.PRESSED_STYLES,
+                  chunkB5Q4UPL6_js.HOVER_STYLES,
+                  chunkB5Q4UPL6_js.HIGH_CONTRAST_HOVER,
+                  chunkB5Q4UPL6_js.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 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 = chunkT4COXKQ3_js.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=chunk-NGJVCFTM.js.map
+//# sourceMappingURL=chunk-NGJVCFTM.js.map

package/dist/chunk-NGJVCFTM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Badge/Badge.tsx","../src/elements/Badge/Badge.types.ts"],"names":["cva","memo","forwardRef","cn","jsxs","Fragment","jsx","AriaButton","PRESSED_STYLES","HOVER_STYLES","HIGH_CONTRAST_HOVER","HIGH_CONTRAST_PRESSED","z","BaseComponentPropsSchema"],"mappings":";;;;;;;;;;;AAsCO,IAAM,kBAAA,GAAqBA,0BAAA;AAAA,EAChC;AAAA,IACE,kDAAA;AAAA,IACA,2BAAA;AAAA,IACA,4BAAA;AAAA,IACA,sBAAA;AAAA,IACA,kCAAA;AAAA,IACA,6BAAA;AAAA,IACA,oDAAA;AAAA,IACA,8BAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,UAAU,EAAC;AAAA,IACX,iBAAiB;AAAC;AAEtB;AAQO,IAAM,mBAAA,GAAsBA,0BAAA;AAAA,EACjC;AAAA,IACE,yCAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,mBAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,4BAAA;AAAA,UACA,yCAAA;AAAA,UACA,qCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,MAAA,EAAQ;AAAA,UACN,+BAAA;AAAA,UACA,iCAAA;AAAA,UACA,wCAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,WAAA,EAAa;AAAA,UACX,oCAAA;AAAA,UACA,sCAAA;AAAA,UACA,6CAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,OAAA,EAAS;AAAA,UACP,+BAAA;AAAA,UACA,iCAAA;AAAA,UACA,wCAAA;AAAA,UACA;AAAA;AACF,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,OAAA,EAAS,oBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,aAAA,GAAgB;AAI7B,IAAM,eAAA,GAAmE;AAAA,EACvE,EAAA,EAAI,6BAAA;AAAA;AAAA,EACJ,OAAA,EAAS,yBAAA;AAAA;AAAA,EACT,EAAA,EAAI;AAAA;AACN,CAAA;AAaA,IAAM,KAAA,GAAQC,UAAA;AAAA,EACZC,gBAAA;AAAA,IACE,CACE;AAAA,MACE,SAAA;AAAA,MACA,OAAA,GAAU,SAAA;AAAA,MACV,IAAA,GAAO,SAAA;AAAA,MACP,QAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA,GAAe,OAAA;AAAA,MACf,KAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,EAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB,cAAA;AAAA,MACnB,kBAAA,EAAoB,eAAA;AAAA,MACpB,aAAA,EAAe,UAAA;AAAA,MACf,GAAG;AAAA,OAEL,GAAA,KACiB;AAEjB,MAAA,MAAM,aAAA,GAAgBC,mBAAA;AAAA,QACpB,mBAAA,CAAoB,EAAE,OAAA,EAAS,IAAA,EAAM,CAAA;AAAA,QACrC,gBAAgB,IAAI,CAAA;AAAA,QACpB;AAAA,OACF;AAGA,MAAA,MAAM,OAAA,GAAU,CAAC,CAAC,IAAA;AAClB,MAAA,MAAM,WAAW,KAAA,KAAU,MAAA;AAC3B,MAAA,MAAM,WAAA,GAAc,CAAC,CAAC,QAAA;AACtB,MAAA,MAAM,gBAAA,GACJ,CAAC,OAAA,EAAS,QAAA,EAAU,WAAW,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,MAAA,GAAS,CAAA;AAI5D,MAAA,MAAM,aAAA,GAAgB,sBACpBC,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,IAAQ,YAAA,KAAiB,2BACxBC,cAAA,CAAC,MAAA,EAAA,EAAK,WAAU,UAAA,EAAW,aAAA,EAAY,QACpC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,QAED,QAAA,KAAa,gBAAA,mBAAmBA,cAAA,CAAC,MAAA,EAAA,EAAM,UAAS,CAAA,GAAU,QAAA,CAAA;AAAA,QAC1D,UAAU,MAAA,oBACTA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAA0B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAEjD,IAAA,IAAQ,iBAAiB,KAAA,oBACxBA,cAAA,CAAC,UAAK,SAAA,EAAU,UAAA,EAAW,aAAA,EAAY,MAAA,EACpC,QAAA,EAAA,IAAA,EACH;AAAA,OAAA,EAEJ,CAAA;AAIF,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,uBACEA,cAAA;AAAA,UAACC,0BAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,UAAA;AAAA,YACA,OAAA;AAAA,YACA,WAAW,kBAAA,EAAmB;AAAA,YAC9B,EAAA;AAAA,YACA,YAAA,EAAY,SAAA;AAAA,YACZ,iBAAA,EAAiB,cAAA;AAAA,YACjB,kBAAA,EAAkB,eAAA;AAAA,YAClB,aAAA,EAAa,UAAA;AAAA,YACZ,GAAI,KAAA;AAAA,YAEJ,WAAC,WAAA,qBACAD,cAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAWH,mBAAA;AAAA,kBACT,aAAA;AAAA;AAAA,kBAEAK,+BAAA;AAAA,kBACAC,6BAAA;AAAA,kBACAC,oCAAA;AAAA,kBACAC;AAAA,iBACF;AAAA,gBACA,cAAA,EAAc,YAAY,SAAA,IAAa,MAAA;AAAA,gBAEtC,QAAA,EAAA,aAAA;AAAc;AAAA;AACjB;AAAA,SAEJ;AAAA,MAEJ;AAGA,MAAA,uBACEL,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,SAAA,EAAW,aAAA;AAAA,UACX,EAAA;AAAA,UACA,YAAA,EAAY,SAAA;AAAA,UACZ,iBAAA,EAAiB,cAAA;AAAA,UACjB,kBAAA,EAAkB,eAAA;AAAA,UAClB,aAAA,EAAa,UAAA;AAAA,UACZ,GAAG,KAAA;AAAA,UAEH,QAAA,EAAA,aAAA;AAAc;AAAA,OACjB;AAAA,IAEJ;AAAA;AAEJ;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA;ACtOb,IAAM,kBAAA,GAAqBM,MAAE,IAAA,CAAK;AAAA,EACvC,SAAA;AAAA;AAAA,EACA,QAAA;AAAA;AAAA,EACA,aAAA;AAAA;AAAA,EACA;AAAA;AACF,CAAC;AAGM,IAAM,eAAA,GAAkBA,MAAE,IAAA,CAAK;AAAA,EACpC,IAAA;AAAA;AAAA,EACA,SAAA;AAAA;AAAA,EACA;AAAA;AACF,CAAC;AAGM,IAAM,uBAAA,GAA0BA,MAAE,IAAA,CAAK;AAAA,EAC5C,OAAA;AAAA;AAAA,EACA;AAAA;AACF,CAAC;AAGM,IAAM,gBAAA,GAAmBC,0CAAyB,MAAA,CAAO;AAAA;AAAA,EAE9D,QAAA,EAAUD,KAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS;AAAA,EAC9B,IAAA,EAAMA,KAAA,CAAE,MAAA,EAAkB,CAAE,QAAA,EAAS;AAAA,EACrC,YAAA,EAAc,uBAAA,CAAwB,QAAA,EAAS,CAAE,QAAQ,OAAO,CAAA;AAAA,EAChE,KAAA,EAAOA,KAAA,CAAE,KAAA,CAAM,CAACA,KAAA,CAAE,MAAA,EAAO,EAAGA,KAAA,CAAE,MAAA,EAAQ,CAAC,CAAA,CAAE,QAAA,EAAS;AAAA;AAAA,EAGlD,OAAA,EAAS,kBAAA,CAAmB,QAAA,EAAS,CAAE,QAAQ,SAAS,CAAA;AAAA,EACxD,IAAA,EAAM,eAAA,CAAgB,QAAA,EAAS,CAAE,QAAQ,SAAS,CAAA;AAAA;AAAA,EAGlD,OAAA,EAASA,KAAA,CAAE,QAAA,EAAS,CAAE,QAAA,EAAS;AAAA;AAAA,EAC/B,UAAA,EAAYA,KAAA,CAAE,OAAA,EAAQ,CAAE,QAAA;AAC1B,CAAC","file":"chunk-NGJVCFTM.js","sourcesContent":["\"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';\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"]}