@tribepad/themis 1.0.0

package/dist/chunk-QH7N7D4I.mjs

@@ -0,0 +1,210 @@
+import { PRESSED_STYLES, HOVER_STYLES, HIGH_CONTRAST_HOVER, HIGH_CONTRAST_PRESSED } from './chunk-HK46BT5U.mjs';
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { BaseComponentPropsSchema } from './chunk-5SVLJN2C.mjs';
+import { memo, forwardRef } from 'react';
+import { Button } from 'react-aria-components';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { z } from 'zod';
+
+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 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=chunk-QH7N7D4I.mjs.map
+//# sourceMappingURL=chunk-QH7N7D4I.mjs.map

package/dist/chunk-QH7N7D4I.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Badge/Badge.tsx","../src/elements/Badge/Badge.types.ts"],"names":["AriaButton"],"mappings":"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","file":"chunk-QH7N7D4I.mjs","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"]}