@etus/ui 0.4.0-beta.2 → 0.4.0-beta.20

package/dist/chunk-ONN5XVYC.js

@@ -0,0 +1,382 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { Check, X } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var tagVariants = cva(
+  // Base styles (always applied)
+  [
+    "inline-flex items-center justify-center",
+    "font-medium whitespace-nowrap shrink-0 gap-[var(--tag-size-gap-default)]",
+    "rounded-[var(--tag-radius)] border bg-background text-foreground",
+    "transition-colors duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--tag-size-height-sm)] px-[var(--tag-size-padding-x-sm)] text-[length:var(--tag-size-text-sm)] [&_[data-slot='tag-checkbox']]:size-[var(--tag-size-checkbox-sm)]",
+        md: "h-[var(--tag-size-height-md)] px-[var(--tag-size-padding-x-md)] text-[length:var(--tag-size-text-md)] [&_[data-slot='tag-checkbox']]:size-[var(--tag-size-checkbox-md)]",
+        lg: "h-[var(--tag-size-height-lg)] px-[var(--tag-size-padding-x-lg)] text-[length:var(--tag-size-text-lg)] [&_[data-slot='tag-checkbox']]:size-[var(--tag-size-checkbox-lg)]"
+      },
+      checked: {
+        true: "border-[color:var(--tag-color-border-checked)] bg-[color:var(--tag-color-bg-checked)]",
+        false: "border-[color:var(--tag-color-border-default)] bg-[color:var(--tag-color-bg-default)]"
+      },
+      disabled: {
+        true: "opacity-50 pointer-events-none",
+        false: ""
+      },
+      interactive: {
+        true: "cursor-pointer hover:bg-[color:var(--tag-color-bg-hover)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      checked: false,
+      disabled: false,
+      interactive: false
+    }
+  }
+);
+var tagCountVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    "rounded-[var(--tag-count-radius)] bg-muted text-muted-foreground font-medium"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-[var(--tag-size-count-height-sm)] min-w-[var(--tag-size-count-min-width-sm)] px-1 text-[length:var(--tag-size-count-text-sm)]",
+        md: "h-[var(--tag-size-count-height-md)] min-w-[var(--tag-size-count-min-width-md)] px-1.5 text-[length:var(--tag-size-count-text-md)]",
+        lg: "h-[var(--tag-size-count-height-lg)] min-w-[var(--tag-size-count-min-width-lg)] px-1.5 text-[length:var(--tag-size-count-text-lg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var tagCheckboxVariants = cva(
+  [
+    "inline-flex items-center justify-center shrink-0",
+    "rounded border transition-colors"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-[var(--tag-size-checkbox-sm)]",
+        md: "size-[var(--tag-size-checkbox-md)]",
+        lg: "size-[var(--tag-size-checkbox-lg)]"
+      },
+      checked: {
+        true: "bg-[color:var(--tag-checkbox-bg-checked)] border-[color:var(--tag-checkbox-border-checked)] text-[color:var(--tag-checkbox-text-checked)]",
+        false: "border-[color:var(--tag-checkbox-border-default)] bg-[color:var(--tag-checkbox-bg-default)]"
+      },
+      disabled: {
+        true: "opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      checked: false,
+      disabled: false
+    }
+  }
+);
+var tagGroupVariants = cva("inline-flex", {
+  variants: {
+    /**
+     * Layout mode for tags
+     */
+    layout: {
+      /** Single line with scroll */
+      inline: "flex-nowrap overflow-x-auto",
+      /** Wrap to multiple lines */
+      wrap: "flex-wrap",
+      /** Vertical stack */
+      stack: "flex-col"
+    },
+    /**
+     * Gap between tags
+     */
+    gap: {
+      none: "gap-0",
+      xs: "gap-1",
+      sm: "gap-1.5",
+      md: "gap-2",
+      lg: "gap-3"
+    },
+    /**
+     * Alignment of tags
+     */
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end"
+    }
+  },
+  defaultVariants: {
+    layout: "wrap",
+    gap: "sm",
+    align: "center"
+  }
+});
+var TagGroupContext = React.createContext(null);
+function useTagGroup() {
+  return React.use(TagGroupContext);
+}
+function TagGroup({
+  children,
+  className,
+  layout,
+  gap,
+  align,
+  size,
+  disabled,
+  ...props
+}) {
+  const contextValue = React.useMemo(
+    () => ({
+      size,
+      disabled
+    }),
+    [size, disabled]
+  );
+  return /* @__PURE__ */ jsx(TagGroupContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(tagGroupVariants({ layout, gap, align }), className),
+      "data-slot": "tag-group",
+      role: "group",
+      ...props,
+      children
+    }
+  ) });
+}
+TagGroup.displayName = "TagGroup";
+function TagCheckbox({
+  checked,
+  disabled,
+  size
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(tagCheckboxVariants({ size, checked, disabled })),
+      "data-slot": "tag-checkbox",
+      children: checked && /* @__PURE__ */ jsx(Check, { className: "size-3", strokeWidth: 3 })
+    }
+  );
+}
+function TagCount({ count, size }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(tagCountVariants({ size })), "data-slot": "tag-count", children: count > 999 ? "999+" : count });
+}
+var dismissSizeMap = {
+  sm: { button: "size-3.5", icon: "size-2.5" },
+  // 14px button, 10px icon
+  md: { button: "size-4", icon: "size-3" },
+  // 16px button, 12px icon
+  lg: { button: "size-4.5", icon: "size-3.5" }
+  // 18px button, 14px icon
+};
+function TagDismiss({
+  onClick,
+  disabled,
+  size = "md"
+}) {
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (!disabled) {
+      onClick();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && !disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick();
+    }
+  };
+  const sizeClasses = dismissSizeMap[size];
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        sizeClasses.button,
+        "-mr-0.5 rounded-sm inline-flex items-center justify-center shrink-0",
+        "text-muted-foreground hover:text-foreground hover:bg-muted",
+        "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        disabled && "pointer-events-none"
+      ),
+      "aria-label": "Remove tag",
+      "data-slot": "tag-dismiss",
+      disabled,
+      tabIndex: -1,
+      type: "button",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: /* @__PURE__ */ jsx(X, { className: sizeClasses.icon })
+    }
+  );
+}
+function TagAvatar({ src, fallback, alt }) {
+  const [imageError, setImageError] = React.useState(false);
+  const initials = fallback.split(" ").map((word) => word[0]).join("").toUpperCase().slice(0, 2);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "size-4 -ml-0.5 rounded-full shrink-0 inline-flex items-center justify-center overflow-hidden bg-muted text-3xs font-medium",
+      "data-slot": "tag-avatar",
+      children: src && !imageError ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt: alt ?? fallback,
+          className: "size-full object-cover",
+          src,
+          onError: () => {
+            setImageError(true);
+          }
+        }
+      ) : /* @__PURE__ */ jsx("span", { "aria-label": alt ?? fallback, children: initials })
+    }
+  );
+}
+var TAG_DOT_COLOR_CLASS = {
+  brand: "bg-[color:var(--tag-color-dot)]",
+  neutral: "bg-[color:var(--tag-color-dot-neutral)]",
+  success: "bg-[color:var(--tag-color-dot-success)]",
+  warning: "bg-[color:var(--tag-color-dot-warning)]",
+  destructive: "bg-[color:var(--tag-color-dot-destructive)]",
+  info: "bg-[color:var(--tag-color-dot-info)]"
+};
+function TagDot({ color = "success" }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("size-1.5 rounded-full shrink-0", TAG_DOT_COLOR_CLASS[color]),
+      "data-slot": "tag-dot"
+    }
+  );
+}
+function TagCountry({ code }) {
+  const countryToFlag = (countryCode) => {
+    const codePoints = Array.from(countryCode.toUpperCase()).map(
+      (char) => 127397 + char.charCodeAt(0)
+    );
+    return String.fromCodePoint(...codePoints);
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": `Flag of ${code}`,
+      className: "text-base -ml-0.5 shrink-0 leading-none",
+      "data-slot": "tag-country",
+      role: "img",
+      children: countryToFlag(code)
+    }
+  );
+}
+function Tag({
+  children,
+  className,
+  size: sizeProp,
+  checkbox,
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  dot,
+  dotColor,
+  icon,
+  avatar,
+  country,
+  count,
+  onDismiss,
+  disabled: disabledProp,
+  onClick,
+  onKeyDown,
+  ...props
+}) {
+  const groupContext = useTagGroup();
+  const size = sizeProp ?? groupContext?.size ?? "md";
+  const disabled = disabledProp ?? groupContext?.disabled;
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+  const isChecked = controlledChecked ?? internalChecked;
+  const isInteractive = Boolean(checkbox) || Boolean(onClick);
+  const handleToggle = () => {
+    if (disabled) return;
+    const newChecked = !isChecked;
+    setInternalChecked(newChecked);
+    onCheckedChange?.(newChecked);
+  };
+  const handleClick = (e) => {
+    if (disabled) return;
+    if (checkbox) {
+      handleToggle();
+    }
+    onClick?.(e);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (checkbox && (e.key === " " || e.key === "Enter")) {
+      e.preventDefault();
+      handleToggle();
+    }
+    if (onDismiss && (e.key === "Delete" || e.key === "Backspace")) {
+      e.preventDefault();
+      onDismiss();
+    }
+    onKeyDown?.(e);
+  };
+  const renderLeading = () => {
+    if (checkbox) {
+      return /* @__PURE__ */ jsx(TagCheckbox, { checked: isChecked, disabled, size });
+    }
+    if (avatar) return /* @__PURE__ */ jsx(TagAvatar, { ...avatar });
+    if (country) return /* @__PURE__ */ jsx(TagCountry, { code: country });
+    if (icon) return /* @__PURE__ */ jsx("span", { className: "shrink-0 [&_svg]:size-3.5", "data-slot": "tag-icon", children: icon });
+    if (dot) return /* @__PURE__ */ jsx(TagDot, { color: dotColor });
+    return null;
+  };
+  const renderTrailing = () => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      count !== void 0 && /* @__PURE__ */ jsx(TagCount, { count, size }),
+      onDismiss && /* @__PURE__ */ jsx(TagDismiss, { disabled, size, onClick: onDismiss })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        tagVariants({
+          size,
+          checked: isChecked,
+          disabled,
+          interactive: isInteractive
+        }),
+        className
+      ),
+      "aria-checked": checkbox ? isChecked : void 0,
+      "aria-disabled": disabled,
+      "data-slot": "tag",
+      role: checkbox ? "checkbox" : void 0,
+      tabIndex: isInteractive && !disabled ? 0 : void 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        renderLeading(),
+        /* @__PURE__ */ jsx("span", { "data-slot": "tag-content", children }),
+        renderTrailing()
+      ]
+    }
+  );
+}
+Tag.displayName = "Tag";
+
+export { Tag, TagGroup, tagCheckboxVariants, tagCountVariants, tagGroupVariants, tagVariants, useTagGroup };
+//# sourceMappingURL=chunk-ONN5XVYC.js.map
+//# sourceMappingURL=chunk-ONN5XVYC.js.map

package/dist/chunk-ONN5XVYC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Tag/Tag.variants.ts","../src/components/primitives/Tag/TagGroup.tsx","../src/components/primitives/Tag/Tag.tsx"],"names":["jsx","React2"],"mappings":"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","file":"chunk-ONN5XVYC.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Tag style variants using CVA\n *\n * @see https://cva.style/docs\n */\nexport const tagVariants = cva(\n  // Base styles (always applied)\n  [\n    \"inline-flex items-center justify-center\",\n    \"font-medium whitespace-nowrap shrink-0 gap-[var(--tag-size-gap-default)]\",\n    \"rounded-[var(--tag-radius)] border bg-background text-foreground\",\n    \"transition-colors duration-200\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--tag-size-height-sm)] px-[var(--tag-size-padding-x-sm)] text-[length:var(--tag-size-text-sm)] [&_[data-slot='tag-checkbox']]:size-[var(--tag-size-checkbox-sm)]\",\n        md: \"h-[var(--tag-size-height-md)] px-[var(--tag-size-padding-x-md)] text-[length:var(--tag-size-text-md)] [&_[data-slot='tag-checkbox']]:size-[var(--tag-size-checkbox-md)]\",\n        lg: \"h-[var(--tag-size-height-lg)] px-[var(--tag-size-padding-x-lg)] text-[length:var(--tag-size-text-lg)] [&_[data-slot='tag-checkbox']]:size-[var(--tag-size-checkbox-lg)]\",\n      },\n      checked: {\n        true: \"border-[color:var(--tag-color-border-checked)] bg-[color:var(--tag-color-bg-checked)]\",\n        false: \"border-[color:var(--tag-color-border-default)] bg-[color:var(--tag-color-bg-default)]\",\n      },\n      disabled: {\n        true: \"opacity-50 pointer-events-none\",\n        false: \"\",\n      },\n      interactive: {\n        true: \"cursor-pointer hover:bg-[color:var(--tag-color-bg-hover)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      checked: false,\n      disabled: false,\n      interactive: false,\n    },\n  }\n)\n\n/**\n * Tag count pill styles\n */\nexport const tagCountVariants = cva(\n  [\n    \"inline-flex items-center justify-center\",\n    \"rounded-[var(--tag-count-radius)] bg-muted text-muted-foreground font-medium\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--tag-size-count-height-sm)] min-w-[var(--tag-size-count-min-width-sm)] px-1 text-[length:var(--tag-size-count-text-sm)]\",\n        md: \"h-[var(--tag-size-count-height-md)] min-w-[var(--tag-size-count-min-width-md)] px-1.5 text-[length:var(--tag-size-count-text-md)]\",\n        lg: \"h-[var(--tag-size-count-height-lg)] min-w-[var(--tag-size-count-min-width-lg)] px-1.5 text-[length:var(--tag-size-count-text-lg)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * Tag checkbox styles\n */\nexport const tagCheckboxVariants = cva(\n  [\n    \"inline-flex items-center justify-center shrink-0\",\n    \"rounded border transition-colors\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-[var(--tag-size-checkbox-sm)]\",\n        md: \"size-[var(--tag-size-checkbox-md)]\",\n        lg: \"size-[var(--tag-size-checkbox-lg)]\",\n      },\n      checked: {\n        true: \"bg-[color:var(--tag-checkbox-bg-checked)] border-[color:var(--tag-checkbox-border-checked)] text-[color:var(--tag-checkbox-text-checked)]\",\n        false: \"border-[color:var(--tag-checkbox-border-default)] bg-[color:var(--tag-checkbox-bg-default)]\",\n      },\n      disabled: {\n        true: \"opacity-50\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      checked: false,\n      disabled: false,\n    },\n  }\n)\n\nexport type TagVariantProps = VariantProps<typeof tagVariants>\n\n/**\n * TagGroup layout variants\n */\nexport const tagGroupVariants = cva(\"inline-flex\", {\n  variants: {\n    /**\n     * Layout mode for tags\n     */\n    layout: {\n      /** Single line with scroll */\n      inline: \"flex-nowrap overflow-x-auto\",\n      /** Wrap to multiple lines */\n      wrap: \"flex-wrap\",\n      /** Vertical stack */\n      stack: \"flex-col\",\n    },\n    /**\n     * Gap between tags\n     */\n    gap: {\n      none: \"gap-0\",\n      xs: \"gap-1\",\n      sm: \"gap-1.5\",\n      md: \"gap-2\",\n      lg: \"gap-3\",\n    },\n    /**\n     * Alignment of tags\n     */\n    align: {\n      start: \"items-start\",\n      center: \"items-center\",\n      end: \"items-end\",\n    },\n  },\n  defaultVariants: {\n    layout: \"wrap\",\n    gap: \"sm\",\n    align: \"center\",\n  },\n})\n\nexport type TagGroupVariantProps = VariantProps<typeof tagGroupVariants>\n","\"use client\"\n\nimport type { TagGroupContextValue, TagGroupProps } from \"./Tag.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { tagGroupVariants } from \"./Tag.variants\"\n\n/**\n * Context for TagGroup to pass props to child Tags\n */\nconst TagGroupContext = React.createContext<null | TagGroupContextValue>(null)\n\n/**\n * Hook to access TagGroup context\n */\nexport function useTagGroup(): null | TagGroupContextValue {\n  return React.use(TagGroupContext)\n}\n\n/**\n * TagGroup - Container for grouping multiple Tag components\n *\n * Provides layout control, gap spacing, and can pass size/disabled\n * props to all child Tags via context.\n *\n * @example\n * ```tsx\n * // Basic grouping with wrap layout\n * <TagGroup>\n *   <Tag>React</Tag>\n *   <Tag>TypeScript</Tag>\n *   <Tag>Tailwind</Tag>\n * </TagGroup>\n *\n * // Inline scrollable\n * <TagGroup layout=\"inline\" gap=\"md\">\n *   {tags.map(tag => <Tag key={tag}>{tag}</Tag>)}\n * </TagGroup>\n *\n * // With size inheritance\n * <TagGroup size=\"sm\">\n *   <Tag checkbox>Option 1</Tag>\n *   <Tag checkbox>Option 2</Tag>\n * </TagGroup>\n *\n * // Vertical stack\n * <TagGroup layout=\"stack\" align=\"start\">\n *   <Tag>First</Tag>\n *   <Tag>Second</Tag>\n *   <Tag>Third</Tag>\n * </TagGroup>\n * ```\n */\nexport function TagGroup({\n  children,\n  className,\n  layout,\n  gap,\n  align,\n  size,\n  disabled,\n  ...props\n}: TagGroupProps) {\n  // Memoize context value to prevent unnecessary re-renders\n  const contextValue = React.useMemo<TagGroupContextValue>(\n    () => ({\n      size,\n      disabled,\n    }),\n    [size, disabled]\n  )\n\n  return (\n    <TagGroupContext value={contextValue}>\n      <div\n        className={cn(tagGroupVariants({ layout, gap, align }), className)}\n        data-slot=\"tag-group\"\n        role=\"group\"\n        {...props}\n      >\n        {children}\n      </div>\n    </TagGroupContext>\n  )\n}\n\nTagGroup.displayName = \"TagGroup\"\n","\"use client\"\n\nimport type { TagAvatarProps, TagDotColor, TagProps } from \"./Tag.types\"\n\nimport { Check, X } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { tagCheckboxVariants, tagCountVariants, tagVariants } from \"./Tag.variants\"\nimport { useTagGroup } from \"./TagGroup\"\n\n// Internal checkbox component\nfunction TagCheckbox({\n  checked,\n  disabled,\n  size,\n}: {\n  checked: boolean\n  disabled?: boolean\n  size: \"lg\" | \"md\" | \"sm\"\n}) {\n  return (\n    <span\n      className={cn(tagCheckboxVariants({ size, checked, disabled }))}\n      data-slot=\"tag-checkbox\"\n    >\n      {checked && <Check className=\"size-3\" strokeWidth={3} />}\n    </span>\n  )\n}\n\n// Internal count pill component\nfunction TagCount({ count, size }: { count: number; size: \"lg\" | \"md\" | \"sm\" }) {\n  return (\n    <span className={cn(tagCountVariants({ size }))} data-slot=\"tag-count\">\n      {count > 999 ? \"999+\" : count}\n    </span>\n  )\n}\n\n// Dismiss button size mapping (Figma: sm=10px, md=12px, lg=14px icons)\nconst dismissSizeMap = {\n  sm: { button: \"size-3.5\", icon: \"size-2.5\" },  // 14px button, 10px icon\n  md: { button: \"size-4\", icon: \"size-3\" },      // 16px button, 12px icon\n  lg: { button: \"size-4.5\", icon: \"size-3.5\" }, // 18px button, 14px icon\n}\n\n// Internal dismiss button component\nfunction TagDismiss({\n  onClick,\n  disabled,\n  size = \"md\",\n}: {\n  disabled?: boolean\n  onClick: () => void\n  size?: \"lg\" | \"md\" | \"sm\"\n}) {\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    if (!disabled) {\n      onClick()\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if ((e.key === \"Enter\" || e.key === \" \") && !disabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      onClick()\n    }\n  }\n\n  const sizeClasses = dismissSizeMap[size]\n\n  return (\n    <button\n      className={cn(\n        sizeClasses.button,\n        \"-mr-0.5 rounded-sm inline-flex items-center justify-center shrink-0\",\n        \"text-muted-foreground hover:text-foreground hover:bg-muted\",\n        \"transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n        disabled && \"pointer-events-none\"\n      )}\n      aria-label=\"Remove tag\"\n      data-slot=\"tag-dismiss\"\n      disabled={disabled}\n      tabIndex={-1}\n      type=\"button\"\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n    >\n      <X className={sizeClasses.icon} />\n    </button>\n  )\n}\n\n// Internal avatar component\nfunction TagAvatar({ src, fallback, alt }: TagAvatarProps) {\n  const [imageError, setImageError] = React.useState(false)\n\n  const initials = fallback\n    .split(\" \")\n    .map((word) => word[0])\n    .join(\"\")\n    .toUpperCase()\n    .slice(0, 2)\n\n  return (\n    <span\n      className=\"size-4 -ml-0.5 rounded-full shrink-0 inline-flex items-center justify-center overflow-hidden bg-muted text-3xs font-medium\"\n      data-slot=\"tag-avatar\"\n    >\n      {src && !imageError ? (\n        <img\n          alt={alt ?? fallback}\n          className=\"size-full object-cover\"\n          src={src}\n          onError={() => {\n            setImageError(true)\n          }}\n        />\n      ) : (\n        <span aria-label={alt ?? fallback}>{initials}</span>\n      )}\n    </span>\n  )\n}\n\n// Internal dot component\nconst TAG_DOT_COLOR_CLASS: Record<TagDotColor, string> = {\n  brand: \"bg-[color:var(--tag-color-dot)]\",\n  neutral: \"bg-[color:var(--tag-color-dot-neutral)]\",\n  success: \"bg-[color:var(--tag-color-dot-success)]\",\n  warning: \"bg-[color:var(--tag-color-dot-warning)]\",\n  destructive: \"bg-[color:var(--tag-color-dot-destructive)]\",\n  info: \"bg-[color:var(--tag-color-dot-info)]\",\n}\n\nfunction TagDot({ color = \"success\" }: { color?: TagDotColor }) {\n  return (\n    <span\n      className={cn(\"size-1.5 rounded-full shrink-0\", TAG_DOT_COLOR_CLASS[color])}\n      data-slot=\"tag-dot\"\n    />\n  )\n}\n\n// Internal country flag component\nfunction TagCountry({ code }: { code: string }) {\n  const countryToFlag = (countryCode: string) => {\n    // eslint-disable-next-line unicorn/prefer-spread -- Array.from handles Unicode correctly for country codes\n    const codePoints = Array.from(countryCode.toUpperCase()).map(\n      (char) => 127397 + char.charCodeAt(0)\n    )\n    return String.fromCodePoint(...codePoints)\n  }\n\n  return (\n    <span\n      aria-label={`Flag of ${code}`}\n      className=\"text-base -ml-0.5 shrink-0 leading-none\"\n      data-slot=\"tag-country\"\n      role=\"img\"\n    >\n      {countryToFlag(code)}\n    </span>\n  )\n}\n\n/**\n * Tag - Interactive selectable/filterable component\n *\n * Used for filtering, categorization, and selection with optional\n * checkbox, count, avatar, country flag, and dismiss functionality.\n *\n * @example\n * ```tsx\n * // Basic tag\n * <Tag>Label</Tag>\n *\n * // With checkbox\n * <Tag checkbox checked={selected} onCheckedChange={setSelected}>\n *   React\n * </Tag>\n *\n * // With count and dismiss\n * <Tag count={5} onDismiss={() => {}}>\n *   Notifications\n * </Tag>\n * ```\n */\nexport function Tag({\n  children,\n  className,\n  size: sizeProp,\n  checkbox,\n  checked: controlledChecked,\n  defaultChecked = false,\n  onCheckedChange,\n  dot,\n  dotColor,\n  icon,\n  avatar,\n  country,\n  count,\n  onDismiss,\n  disabled: disabledProp,\n  onClick,\n  onKeyDown,\n  ...props\n}: TagProps) {\n  // Get context from TagGroup (if present)\n  const groupContext = useTagGroup()\n\n  // Merge with context values\n  const size = sizeProp ?? groupContext?.size ?? \"md\"\n  const disabled = disabledProp ?? groupContext?.disabled\n\n  // Uncontrolled state for checkbox\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked)\n\n  // Use controlled or uncontrolled checked value\n  const isChecked = controlledChecked ?? internalChecked\n  const isInteractive = Boolean(checkbox) || Boolean(onClick)\n\n  // Handle checkbox toggle\n  const handleToggle = () => {\n    if (disabled) return\n\n    const newChecked = !isChecked\n    setInternalChecked(newChecked)\n    onCheckedChange?.(newChecked)\n  }\n\n  // Handle click\n  const handleClick = (e: React.MouseEvent<HTMLSpanElement>) => {\n    if (disabled) return\n\n    if (checkbox) {\n      handleToggle()\n    }\n\n    onClick?.(e)\n  }\n\n  // Handle keyboard\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {\n    if (disabled) return\n\n    // Toggle on Space/Enter for checkbox\n    if (checkbox && (e.key === \" \" || e.key === \"Enter\")) {\n      e.preventDefault()\n      handleToggle()\n    }\n\n    // Dismiss on Delete/Backspace\n    if (onDismiss && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n      e.preventDefault()\n      onDismiss()\n    }\n\n    onKeyDown?.(e)\n  }\n\n  // Render leading content (checkbox, avatar, country, icon, or dot)\n  const renderLeading = () => {\n    if (checkbox) {\n      return <TagCheckbox checked={isChecked} disabled={disabled} size={size} />\n    }\n    if (avatar) return <TagAvatar {...avatar} />\n    if (country) return <TagCountry code={country} />\n    if (icon) return <span className=\"shrink-0 [&_svg]:size-3.5\" data-slot=\"tag-icon\">{icon}</span>\n    if (dot) return <TagDot color={dotColor} />\n    return null\n  }\n\n  // Render trailing content (count, dismiss)\n  const renderTrailing = () => {\n    return (\n      <>\n        {count !== undefined && <TagCount count={count} size={size} />}\n        {onDismiss && <TagDismiss disabled={disabled} size={size} onClick={onDismiss} />}\n      </>\n    )\n  }\n\n  return (\n    <span\n      className={cn(\n        tagVariants({\n          size,\n          checked: isChecked,\n          disabled,\n          interactive: isInteractive,\n        }),\n        className\n      )}\n      aria-checked={checkbox ? isChecked : undefined}\n      aria-disabled={disabled}\n      data-slot=\"tag\"\n      role={checkbox ? \"checkbox\" : undefined}\n      tabIndex={isInteractive && !disabled ? 0 : undefined}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {renderLeading()}\n      <span data-slot=\"tag-content\">{children}</span>\n      {renderTrailing()}\n    </span>\n  )\n}\n\nTag.displayName = \"Tag\"\n"]}

package/dist/chunk-ONTUN5XH.js

@@ -0,0 +1,57 @@
+import { cva } from 'class-variance-authority';
+
+// src/components/forms/RadioGroup/RadioGroup.variants.ts
+var radioGroupVariants = cva("grid gap-3", {
+  variants: {
+    orientation: {
+      vertical: "grid-flow-row",
+      horizontal: "grid-flow-col auto-cols-max"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+var radioGroupItemVariants = cva(
+  [
+    "flex items-center justify-center",
+    "aspect-square shrink-0 rounded-full outline-none transition-[color,box-shadow]",
+    "border border-[color:var(--radio-root-border-default)] bg-[color:var(--radio-root-bg-default)] text-[color:var(--radio-indicator-color)] dark:bg-input/30",
+    "shadow-[var(--radio-root-shadow)]",
+    "data-[state=checked]:border-[color:var(--radio-root-border-checked)] data-[state=checked]:bg-[color:var(--radio-root-bg-checked)]",
+    "focus-visible:border-[color:var(--radio-root-border-default)] focus-visible:ring-[color:var(--radio-root-border-default)]/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "disabled:cursor-not-allowed disabled:bg-[color:var(--radio-root-bg-disabled)] disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-[var(--radio-root-size-sm)]",
+        md: "size-[var(--radio-root-size-md)]",
+        lg: "size-[var(--radio-root-size-lg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var radioGroupIndicatorVariants = cva(
+  "rounded-full bg-current",
+  {
+    variants: {
+      size: {
+        sm: "size-[var(--radio-indicator-size-sm)]",
+        md: "size-[var(--radio-indicator-size-md)]",
+        lg: "size-[var(--radio-indicator-size-lg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+export { radioGroupIndicatorVariants, radioGroupItemVariants, radioGroupVariants };
+//# sourceMappingURL=chunk-ONTUN5XH.js.map
+//# sourceMappingURL=chunk-ONTUN5XH.js.map

package/dist/chunk-ONTUN5XH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/RadioGroup/RadioGroup.variants.ts"],"names":[],"mappings":";;;AAEO,IAAM,kBAAA,GAAqB,IAAI,YAAA,EAAc;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,QAAA,EAAU,eAAA;AAAA,MACV,UAAA,EAAY;AAAA;AACd,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC;AAAA,IACE,kCAAA;AAAA,IACA,gFAAA;AAAA,IACA,2JAAA;AAAA,IACA,mCAAA;AAAA,IACA,mIAAA;AAAA,IACA,uJAAA;AAAA,IACA,wGAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,kCAAA;AAAA,QACJ,EAAA,EAAI,kCAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAEO,IAAM,2BAAA,GAA8B,GAAA;AAAA,EACzC,yBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,uCAAA;AAAA,QACJ,EAAA,EAAI,uCAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ","file":"chunk-ONTUN5XH.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const radioGroupVariants = cva(\"grid gap-3\", {\n  variants: {\n    orientation: {\n      vertical: \"grid-flow-row\",\n      horizontal: \"grid-flow-col auto-cols-max\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n})\n\nexport const radioGroupItemVariants = cva(\n  [\n    \"flex items-center justify-center\",\n    \"aspect-square shrink-0 rounded-full outline-none transition-[color,box-shadow]\",\n    \"border border-[color:var(--radio-root-border-default)] bg-[color:var(--radio-root-bg-default)] text-[color:var(--radio-indicator-color)] dark:bg-input/30\",\n    \"shadow-[var(--radio-root-shadow)]\",\n    \"data-[state=checked]:border-[color:var(--radio-root-border-checked)] data-[state=checked]:bg-[color:var(--radio-root-bg-checked)]\",\n    \"focus-visible:border-[color:var(--radio-root-border-default)] focus-visible:ring-[color:var(--radio-root-border-default)]/50 focus-visible:ring-[3px]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n    \"disabled:cursor-not-allowed disabled:bg-[color:var(--radio-root-bg-disabled)] disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-[var(--radio-root-size-sm)]\",\n        md: \"size-[var(--radio-root-size-md)]\",\n        lg: \"size-[var(--radio-root-size-lg)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioGroupIndicatorVariants = cva(\n  \"rounded-full bg-current\",\n  {\n    variants: {\n      size: {\n        sm: \"size-[var(--radio-indicator-size-sm)]\",\n        md: \"size-[var(--radio-indicator-size-md)]\",\n        lg: \"size-[var(--radio-indicator-size-lg)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type RadioGroupVariantProps = VariantProps<typeof radioGroupVariants>\nexport type RadioGroupItemVariantProps = VariantProps<typeof radioGroupItemVariants>\nexport type RadioGroupIndicatorVariantProps = VariantProps<typeof radioGroupIndicatorVariants>\n"]}

package/dist/chunk-OOJO4QGD.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-OOJO4QGD.js.map
+//# sourceMappingURL=chunk-OOJO4QGD.js.map

package/dist/chunk-OOJO4QGD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-OOJO4QGD.js"}

package/dist/chunk-OWZ3MZ5C.js

@@ -0,0 +1,79 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sectionVariants = cva(
+  [
+    "rounded-[var(--section-root-radius)]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-background",
+        muted: "bg-muted/30",
+        elevated: "bg-card shadow-md",
+        bordered: "border border-border"
+      },
+      size: {
+        sm: "p-[var(--section-size-sm-padding)]",
+        default: "p-[var(--section-size-default-padding)]",
+        lg: "p-[var(--section-size-lg-padding)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Section({
+  variant,
+  size,
+  title,
+  description,
+  footer,
+  className,
+  children,
+  ...props
+}) {
+  const hasHeader = title ?? description;
+  const generatedId = React.useId();
+  const titleId = title ? generatedId : void 0;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: cn(sectionVariants({ variant, size }), className),
+      "data-slot": "section",
+      ...props,
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs("header", { className: "mb-[var(--section-header-margin-bottom)] space-y-[var(--section-header-gap)]", "data-slot": "section-header", children: [
+          title && /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: "text-lg font-medium leading-none tracking-tight",
+              "data-slot": "section-title",
+              id: titleId,
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-sm text-muted-foreground",
+              "data-slot": "section-description",
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { "data-slot": "section-content", children }),
+        footer && /* @__PURE__ */ jsx("footer", { className: "mt-4 pt-4 border-t", "data-slot": "section-footer", children: footer })
+      ]
+    }
+  );
+}
+
+export { Section, sectionVariants };
+//# sourceMappingURL=chunk-OWZ3MZ5C.js.map
+//# sourceMappingURL=chunk-OWZ3MZ5C.js.map

package/dist/chunk-OWZ3MZ5C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Section/Section.variants.ts","../src/components/layout/Section/Section.tsx"],"names":[],"mappings":";;;;;AAMO,IAAM,eAAA,GAAkB,GAAA;AAAA,EAC7B;AAAA,IACE;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,eAAA;AAAA,QACT,KAAA,EAAO,aAAA;AAAA,QACP,QAAA,EAAU,mBAAA;AAAA,QACV,QAAA,EAAU;AAAA,OACZ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,oCAAA;AAAA,QACJ,OAAA,EAAS,yCAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;ACtBA,SAAS,OAAA,CAAQ;AAAA,EACf,OAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,YAAY,KAAA,IAAS,WAAA;AAC3B,EAAA,MAAM,cAAoB,KAAA,CAAA,KAAA,EAAM;AAChC,EAAA,MAAM,OAAA,GAAU,QAAQ,WAAA,GAAc,MAAA;AAEtC,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAW,GAAG,eAAA,CAAgB,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MAC3D,WAAA,EAAU,SAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACC,IAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,8EAAA,EAA+E,aAAU,gBAAA,EACxG,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,iDAAA;AAAA,cACV,WAAA,EAAU,eAAA;AAAA,cACV,EAAA,EAAI,OAAA;AAAA,cAEH,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,WAAA,oBACC,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,+BAAA;AAAA,cACV,WAAA,EAAU,qBAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA;AACH,SAAA,EAEJ,CAAA;AAAA,wBAEF,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,iBAAA,EAAmB,QAAA,EAAS,CAAA;AAAA,QAC1C,0BACC,GAAA,CAAC,QAAA,EAAA,EAAO,WAAU,oBAAA,EAAqB,WAAA,EAAU,kBAC9C,QAAA,EAAA,MAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-OWZ3MZ5C.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Section variant styles\n * Layout component for grouping related content in semantic sections\n */\nexport const sectionVariants = cva(\n  [\n    \"rounded-[var(--section-root-radius)]\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-background\",\n        muted: \"bg-muted/30\",\n        elevated: \"bg-card shadow-md\",\n        bordered: \"border border-border\",\n      },\n      size: {\n        sm: \"p-[var(--section-size-sm-padding)]\",\n        default: \"p-[var(--section-size-default-padding)]\",\n        lg: \"p-[var(--section-size-lg-padding)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport type SectionVariantProps = VariantProps<typeof sectionVariants>\n","import type { SectionProps } from \"./Section.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { sectionVariants } from \"./Section.variants\"\n\nfunction Section({\n  variant,\n  size,\n  title,\n  description,\n  footer,\n  className,\n  children,\n  ...props\n}: SectionProps) {\n  const hasHeader = title ?? description\n  const generatedId = React.useId()\n  const titleId = title ? generatedId : undefined\n\n  return (\n    <section\n      aria-labelledby={titleId}\n      className={cn(sectionVariants({ variant, size }), className)}\n      data-slot=\"section\"\n      {...props}\n    >\n      {hasHeader && (\n        <header className=\"mb-[var(--section-header-margin-bottom)] space-y-[var(--section-header-gap)]\" data-slot=\"section-header\">\n          {title && (\n            <h2\n              className=\"text-lg font-medium leading-none tracking-tight\"\n              data-slot=\"section-title\"\n              id={titleId}\n            >\n              {title}\n            </h2>\n          )}\n          {description && (\n            <p\n              className=\"text-sm text-muted-foreground\"\n              data-slot=\"section-description\"\n            >\n              {description}\n            </p>\n          )}\n        </header>\n      )}\n      <div data-slot=\"section-content\">{children}</div>\n      {footer && (\n        <footer className=\"mt-4 pt-4 border-t\" data-slot=\"section-footer\">\n          {footer}\n        </footer>\n      )}\n    </section>\n  )\n}\n\nexport { Section }\n"]}