@jiwambe/components 0.2.0

package/dist/components/Button/Button.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+const variantClasses = {
+  primary: [
+    "bg-fill-action-primary text-text-action-primary",
+    "hover:bg-fill-action-primary-hover",
+    "active:bg-fill-action-primary-active",
+    "disabled:bg-fill-action-primary-disabled disabled:text-text-action-primary-disabled disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+  ].join(" "),
+  secondary: [
+    "bg-fill-action-secondary text-text-action-secondary",
+    "hover:bg-fill-action-secondary-hover",
+    "active:bg-fill-action-secondary-active",
+    "disabled:bg-fill-action-secondary-disabled disabled:text-text-action-secondary-disabled disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+  ].join(" "),
+  inverse: [
+    "bg-fill-action-inverse text-text-action-secondary font-secondary",
+    "hover:bg-fill-action-inverse-hover",
+    "active:bg-fill-action-inverse-active",
+    "disabled:bg-fill-action-inverse-disabled disabled:text-text-action-secondary-disabled disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+  ].join(" "),
+  ghost: [
+    "bg-fill-action-ghost text-text-action-tertiary",
+    "hover:bg-fill-action-ghost-hover",
+    "active:bg-fill-action-ghost-active",
+    "disabled:bg-fill-action-ghost-disabled disabled:text-text-action-tertiary-disabled disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+  ].join(" ")
+};
+const sizeClasses = {
+  small: {
+    text: "h-[40px] px-4 py-0 gap-2 rounded-rad-sm text-btn-small",
+    iconOnly: "h-[40px] w-[40px] p-0 rounded-rad-sm",
+    icon: "w-4 h-4"
+  },
+  large: {
+    text: "h-[48px] px-5 py-0 gap-2 rounded-rad-md text-btn-reg",
+    iconOnly: "h-[48px] w-[48px] p-0 rounded-rad-md",
+    icon: "w-5 h-5"
+  }
+};
+function Button({
+  variant,
+  size = "small",
+  iconLeft,
+  iconRight,
+  iconOnly,
+  disabled = false,
+  children,
+  className = "",
+  style,
+  ref,
+  ...rest
+}) {
+  const isIconOnly = !!iconOnly;
+  const config = sizeClasses[size];
+  const buttonClasses = [
+    "peer",
+    "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 outline-none border-none",
+    variantClasses[variant],
+    isIconOnly ? config.iconOnly : config.text,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: buttonClasses,
+        style,
+        disabled,
+        "aria-disabled": disabled || void 0,
+        ...rest,
+        children: isIconOnly ? /* @__PURE__ */ jsx("span", { className: `${config.icon} inline-flex items-center justify-center`, children: iconOnly }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          iconLeft && /* @__PURE__ */ jsx("span", { className: `${config.icon} inline-flex items-center justify-center`, children: iconLeft }),
+          children && /* @__PURE__ */ jsx("span", { children }),
+          iconRight && /* @__PURE__ */ jsx("span", { className: `${config.icon} inline-flex items-center justify-center`, children: iconRight })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute -left-1 -top-1 w-[calc(100%+8px)] h-[calc(100%+8px)] rounded-rad-md border-border-md border-border-focus pointer-events-none hidden peer-focus-visible:block",
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+export {
+  Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\nimport type { ButtonVariant, ButtonSize } from '../../types';\n\n/**\n * Props for the Button component. Extends native button HTML attributes.\n */\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant (primary, secondary, inverse, ghost). */\n  variant: ButtonVariant;\n  /**\n   * Button size. Affects height, padding, and typography.\n   * @default 'small'\n   */\n  size?: ButtonSize;\n  /** Icon or element rendered before the button text. @default undefined */\n  iconLeft?: React.ReactNode;\n  /** Icon or element rendered after the button text. @default undefined */\n  iconRight?: React.ReactNode;\n  /**\n   * When provided, renders a square icon-only button with no text.\n   * You must provide aria-label for accessibility.\n   * @default undefined\n   * @see aria-label\n   */\n  iconOnly?: React.ReactNode;\n  /** When true, disables the button and applies disabled styling. @default false */\n  disabled?: boolean;\n  /** Button label or content. Omit when using iconOnly. @default undefined */\n  children?: React.ReactNode;\n  /** Additional CSS class names. Merged with variant/size classes. @default undefined */\n  className?: string;\n  /** Inline styles. @default undefined */\n  style?: React.CSSProperties;\n  /**\n   * Accessible label. Required when iconOnly is set; recommended for icon buttons.\n   * @default undefined\n   * @see iconOnly\n   */\n  'aria-label'?: string;\n  /** Forwarded ref for the button element. @default undefined */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Variant classes (default, hover, active, disabled)\n// ---------------------------------------------------------------------------\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  primary: [\n    'bg-fill-action-primary text-text-action-primary',\n    'hover:bg-fill-action-primary-hover',\n    'active:bg-fill-action-primary-active',\n    'disabled:bg-fill-action-primary-disabled disabled:text-text-action-primary-disabled disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ].join(' '),\n\n  secondary: [\n    'bg-fill-action-secondary text-text-action-secondary',\n    'hover:bg-fill-action-secondary-hover',\n    'active:bg-fill-action-secondary-active',\n    'disabled:bg-fill-action-secondary-disabled disabled:text-text-action-secondary-disabled disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ].join(' '),\n\n  inverse: [\n    'bg-fill-action-inverse text-text-action-secondary font-secondary',\n    'hover:bg-fill-action-inverse-hover',\n    'active:bg-fill-action-inverse-active',\n    'disabled:bg-fill-action-inverse-disabled disabled:text-text-action-secondary-disabled disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ].join(' '),\n\n  ghost: [\n    'bg-fill-action-ghost text-text-action-tertiary',\n    'hover:bg-fill-action-ghost-hover',\n    'active:bg-fill-action-ghost-active',\n    'disabled:bg-fill-action-ghost-disabled disabled:text-text-action-tertiary-disabled disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ].join(' '),\n};\n\n// ---------------------------------------------------------------------------\n// Size classes\n// ---------------------------------------------------------------------------\n\ninterface SizeConfig {\n  /** Classes for buttons with text (and optional icons). */\n  text: string;\n  /** Classes for icon-only buttons. */\n  iconOnly: string;\n  /** Icon dimension classes. */\n  icon: string;\n}\n\nconst sizeClasses: Record<ButtonSize, SizeConfig> = {\n  small: {\n    text: 'h-[40px] px-4 py-0 gap-2 rounded-rad-sm text-btn-small',\n    iconOnly: 'h-[40px] w-[40px] p-0 rounded-rad-sm',\n    icon: 'w-4 h-4',\n  },\n  large: {\n    text: 'h-[48px] px-5 py-0 gap-2 rounded-rad-md text-btn-reg',\n    iconOnly: 'h-[48px] w-[48px] p-0 rounded-rad-md',\n    icon: 'w-5 h-5',\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Button component with design-system variants, sizes, icon support, and\n * an accessible focus ring that appears only on keyboard navigation.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"large\">Click Me</Button>\n * <Button variant=\"secondary\" iconLeft={<SearchIcon />}>Search</Button>\n * <Button variant=\"ghost\" iconOnly={<MenuIcon />} aria-label=\"Open menu\" />\n * ```\n */\nexport function Button({\n  variant,\n  size = 'small',\n  iconLeft,\n  iconRight,\n  iconOnly,\n  disabled = false,\n  children,\n  className = '',\n  style,\n  ref,\n  ...rest\n}: ButtonProps) {\n  const isIconOnly = !!iconOnly;\n  const config = sizeClasses[size];\n\n  const buttonClasses = [\n    'peer',\n    'inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 outline-none border-none',\n    variantClasses[variant],\n    isIconOnly ? config.iconOnly : config.text,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className=\"relative inline-flex\">\n      {/* Button element */}\n      <button\n        ref={ref}\n        className={buttonClasses}\n        style={style}\n        disabled={disabled}\n        aria-disabled={disabled || undefined}\n        {...rest}\n      >\n        {isIconOnly ? (\n          <span className={`${config.icon} inline-flex items-center justify-center`}>\n            {iconOnly}\n          </span>\n        ) : (\n          <>\n            {iconLeft && (\n              <span className={`${config.icon} inline-flex items-center justify-center`}>\n                {iconLeft}\n              </span>\n            )}\n            {children && <span>{children}</span>}\n            {iconRight && (\n              <span className={`${config.icon} inline-flex items-center justify-center`}>\n                {iconRight}\n              </span>\n            )}\n          </>\n        )}\n      </button>\n\n      {/* Focus ring – only visible on keyboard focus (:focus-visible) */}\n      <div\n        className=\"absolute -left-1 -top-1 w-[calc(100%+8px)] h-[calc(100%+8px)] rounded-rad-md border-border-md border-border-focus pointer-events-none hidden peer-focus-visible:block\"\n        aria-hidden=\"true\"\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAiDA;AAAsD;AAC3C;AACP;AACA;AACA;AACA;AACQ;AAEC;AACT;AACA;AACA;AACA;AACQ;AAED;AACP;AACA;AACA;AACA;AACQ;AAEH;AACL;AACA;AACA;AACA;AAEJ;AAeA;AAAoD;AAC3C;AACC;AACI;AACJ;AAAA;AAED;AACC;AACI;AACJ;AAEV;AAiBO;AAAgB;AACrB;AACO;AACP;AACA;AACA;AACW;AACX;AACY;AACZ;AACA;AAEF;AACE;AACA;AAEA;AAAsB;AACpB;AACA;AACsB;AACgB;AACtC;AAKF;AAGI;AAAA;AAAC;AAAA;AACC;AACW;AACX;AACA;AAC2B;AACvB;AAQC;AAGC;AAE2B;AAI3B;AAEJ;AAAA;AAAA;AAKJ;AAAC;AAAA;AACW;AACE;AAAA;AAAA;AAIpB;;;;"}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+/**
+ * Card layout type. 'text-only' — no image; 'media-horizontal' — image above content, video aspect;
+ * 'media-vertical' — image above content, 4:3 aspect.
+ */
+export type CardType = 'text-only' | 'media-horizontal' | 'media-vertical';
+/**
+ * Props for the Card component. Title is required; image and action are optional.
+ */
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Layout: text-only, or media with horizontal/vertical image aspect. @default 'text-only' */
+    type?: CardType;
+    /** Image source URL. Required when type is media-horizontal or media-vertical. @default undefined */
+    imageSrc?: string;
+    /** Image alt text for accessibility. @default '' */
+    imageAlt?: string;
+    /** Width for next/image. @default 600 */
+    imageWidth?: number;
+    /** Height for next/image. @default 400 */
+    imageHeight?: number;
+    /** Next.js image quality (1-100). @default undefined */
+    imageQuality?: number;
+    /** Bypass Next.js image optimization. Useful for small sharp PNGs. @default false */
+    imageUnoptimized?: boolean;
+    /** Overlay message displayed centered on the image. @default undefined */
+    message?: string;
+    /** Card title (required). Rendered as heading. */
+    title: string;
+    /** Card description text below the title. @default undefined */
+    description?: string;
+    /** Label for the action button or link. @default undefined */
+    label?: string;
+    /** Called when the action button is clicked (when labelHref is not set). @default undefined */
+    onLabelClick?: () => void;
+    /** When set, the action renders as a link to this href. @default undefined */
+    labelHref?: string;
+    /** Component to render the action link as (e.g. next/link). @default 'a' */
+    linkAs?: React.ElementType;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Card with optional image, title, description, and action. Renders a bordered container
+ * with design-token styling. Use for product cards, feature highlights, or content blocks.
+ * For image-only or custom layouts use Box or a custom component.
+ *
+ * @example
+ * <Card title="Feature" description="Description here." type="text-only" />
+ *
+ * @example
+ * <Card type="media-horizontal" imageSrc="/img.jpg" imageAlt="Product" title="Product" label="View" labelHref="/product" />
+ */
+export declare function Card({ type, imageSrc, imageAlt, imageWidth, imageHeight, imageQuality, imageUnoptimized, message, title, description, label, onLabelClick, labelHref, linkAs, className, ref, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,8FAA8F;IAC9F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+FAA+F;IAC/F,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC3B,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAmFD;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAkB,EAClB,QAAQ,EACR,QAAa,EACb,UAAgB,EAChB,WAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,OAAO,EACP,KAAK,EACL,WAAW,EACX,KAAK,EACL,YAAY,EACZ,SAAS,EACT,MAAM,EACN,SAAc,EACd,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CAuCX"}

package/dist/components/Card/Card.js

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Image from "next/image";
+function CardImage({
+  src,
+  alt,
+  ratio,
+  message,
+  width,
+  height,
+  quality,
+  unoptimized
+}) {
+  const aspectClass = ratio === "horizontal" ? "aspect-video" : "aspect-[4/3]";
+  return /* @__PURE__ */ jsxs("div", { className: `relative w-full overflow-hidden rounded-t-rad-md ${aspectClass}`, children: [
+    /* @__PURE__ */ jsx(
+      Image,
+      {
+        src,
+        alt,
+        width,
+        height,
+        quality,
+        unoptimized,
+        className: "h-full w-full object-cover"
+      }
+    ),
+    message && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-green-950/50", children: /* @__PURE__ */ jsx("span", { className: "text-title-md text-neutral-0 text-center px-space-4", children: message }) })
+  ] });
+}
+function CardAction({
+  label,
+  onClick,
+  href,
+  linkAs
+}) {
+  const classes = "inline-flex items-center justify-center rounded-rad-sm px-space-4 py-space-2 text-btn-small bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover active:bg-fill-action-primary-active transition-colors";
+  if (href) {
+    const LinkComponent = linkAs || "a";
+    return /* @__PURE__ */ jsx(LinkComponent, { href, className: classes, children: label });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: classes, children: label });
+}
+function Card({
+  type = "text-only",
+  imageSrc,
+  imageAlt = "",
+  imageWidth = 600,
+  imageHeight = 400,
+  imageQuality,
+  imageUnoptimized,
+  message,
+  title,
+  description,
+  label,
+  onLabelClick,
+  labelHref,
+  linkAs,
+  className = "",
+  ref,
+  ...rest
+}) {
+  const isMedia = type !== "text-only";
+  const ratio = type === "media-vertical" ? "vertical" : "horizontal";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `flex flex-col rounded-rad-md border border-border-light bg-fill-bg-primary overflow-hidden ${className}`,
+      ...rest,
+      children: [
+        isMedia && imageSrc && /* @__PURE__ */ jsx(
+          CardImage,
+          {
+            src: imageSrc,
+            alt: imageAlt,
+            ratio,
+            message,
+            width: imageWidth,
+            height: imageHeight,
+            quality: imageQuality,
+            unoptimized: imageUnoptimized
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-3 p-space-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-title-sm text-text-primary", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-text-sm text-text-secondary", children: description })
+          ] }),
+          label && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CardAction, { label, onClick: onLabelClick, href: labelHref, linkAs }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Card
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport Image from 'next/image';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * Card layout type. 'text-only' — no image; 'media-horizontal' — image above content, video aspect;\n * 'media-vertical' — image above content, 4:3 aspect.\n */\nexport type CardType = 'text-only' | 'media-horizontal' | 'media-vertical';\n\n/**\n * Props for the Card component. Title is required; image and action are optional.\n */\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout: text-only, or media with horizontal/vertical image aspect. @default 'text-only' */\n  type?: CardType;\n  /** Image source URL. Required when type is media-horizontal or media-vertical. @default undefined */\n  imageSrc?: string;\n  /** Image alt text for accessibility. @default '' */\n  imageAlt?: string;\n  /** Width for next/image. @default 600 */\n  imageWidth?: number;\n  /** Height for next/image. @default 400 */\n  imageHeight?: number;\n  /** Next.js image quality (1-100). @default undefined */\n  imageQuality?: number;\n  /** Bypass Next.js image optimization. Useful for small sharp PNGs. @default false */\n  imageUnoptimized?: boolean;\n  /** Overlay message displayed centered on the image. @default undefined */\n  message?: string;\n  /** Card title (required). Rendered as heading. */\n  title: string;\n  /** Card description text below the title. @default undefined */\n  description?: string;\n  /** Label for the action button or link. @default undefined */\n  label?: string;\n  /** Called when the action button is clicked (when labelHref is not set). @default undefined */\n  onLabelClick?: () => void;\n  /** When set, the action renders as a link to this href. @default undefined */\n  labelHref?: string;\n  /** Component to render the action link as (e.g. next/link). @default 'a' */\n  linkAs?: React.ElementType;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Sub-components\n// ---------------------------------------------------------------------------\n\nfunction CardImage({\n  src,\n  alt,\n  ratio,\n  message,\n  width,\n  height,\n  quality,\n  unoptimized,\n}: {\n  src: string;\n  alt: string;\n  ratio: 'horizontal' | 'vertical';\n  message?: string;\n  width: number;\n  height: number;\n  quality?: number;\n  unoptimized?: boolean;\n}) {\n  const aspectClass = ratio === 'horizontal' ? 'aspect-video' : 'aspect-[4/3]';\n\n  return (\n    <div className={`relative w-full overflow-hidden rounded-t-rad-md ${aspectClass}`}>\n      <Image\n        src={src}\n        alt={alt}\n        width={width}\n        height={height}\n        quality={quality}\n        unoptimized={unoptimized}\n        className=\"h-full w-full object-cover\"\n      />\n      {message && (\n        <div className=\"absolute inset-0 flex items-center justify-center bg-green-950/50\">\n          <span className=\"text-title-md text-neutral-0 text-center px-space-4\">\n            {message}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction CardAction({\n  label,\n  onClick,\n  href,\n  linkAs,\n}: {\n  label: string;\n  onClick?: () => void;\n  href?: string;\n  linkAs?: React.ElementType;\n}) {\n  const classes =\n    'inline-flex items-center justify-center rounded-rad-sm px-space-4 py-space-2 text-btn-small bg-fill-action-primary text-text-action-primary hover:bg-fill-action-primary-hover active:bg-fill-action-primary-active transition-colors';\n\n  if (href) {\n    const LinkComponent = linkAs || 'a';\n    return (\n      <LinkComponent href={href} className={classes}>\n        {label}\n      </LinkComponent>\n    );\n  }\n\n  return (\n    <button type=\"button\" onClick={onClick} className={classes}>\n      {label}\n    </button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Card\n// ---------------------------------------------------------------------------\n\n/**\n * Card with optional image, title, description, and action. Renders a bordered container\n * with design-token styling. Use for product cards, feature highlights, or content blocks.\n * For image-only or custom layouts use Box or a custom component.\n *\n * @example\n * <Card title=\"Feature\" description=\"Description here.\" type=\"text-only\" />\n *\n * @example\n * <Card type=\"media-horizontal\" imageSrc=\"/img.jpg\" imageAlt=\"Product\" title=\"Product\" label=\"View\" labelHref=\"/product\" />\n */\nexport function Card({\n  type = 'text-only',\n  imageSrc,\n  imageAlt = '',\n  imageWidth = 600,\n  imageHeight = 400,\n  imageQuality,\n  imageUnoptimized,\n  message,\n  title,\n  description,\n  label,\n  onLabelClick,\n  labelHref,\n  linkAs,\n  className = '',\n  ref,\n  ...rest\n}: CardProps) {\n  const isMedia = type !== 'text-only';\n  const ratio = type === 'media-vertical' ? 'vertical' : 'horizontal';\n\n  return (\n    <div\n      ref={ref}\n      className={`flex flex-col rounded-rad-md border border-border-light bg-fill-bg-primary overflow-hidden ${className}`}\n      {...rest}\n    >\n      {isMedia && imageSrc && (\n        <CardImage\n          src={imageSrc}\n          alt={imageAlt}\n          ratio={ratio}\n          message={message}\n          width={imageWidth}\n          height={imageHeight}\n          quality={imageQuality}\n          unoptimized={imageUnoptimized}\n        />\n      )}\n\n      <div className=\"flex flex-col gap-space-3 p-space-4\">\n        <div className=\"flex flex-col gap-space-1\">\n          <h3 className=\"text-title-sm text-text-primary\">{title}</h3>\n          {description && (\n            <p className=\"text-text-sm text-text-secondary\">{description}</p>\n          )}\n        </div>\n\n        {label && (\n          <div>\n            <CardAction label={label} onClick={onLabelClick} href={labelHref} linkAs={linkAs} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAqDA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,cAAc,UAAU,eAAe,iBAAiB;AAE9D,SACE,qBAAC,OAAA,EAAI,WAAW,oDAAoD,WAAW,IAC7E,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEX,WACC,oBAAC,OAAA,EAAI,WAAU,qEACb,8BAAC,QAAA,EAAK,WAAU,uDACb,UAAA,QAAA,CACH,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,UACJ;AAEF,MAAI,MAAM;AACR,UAAM,gBAAgB,UAAU;AAChC,WACE,oBAAC,eAAA,EAAc,MAAY,WAAW,SACnC,UAAA,OACH;AAAA,EAEJ;AAEA,6BACG,UAAA,EAAO,MAAK,UAAS,SAAkB,WAAW,SAChD,UAAA,OACH;AAEJ;AAiBO,SAAS,KAAK;AAAA,EACnB,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,UAAU,SAAS;AACzB,QAAM,QAAQ,SAAS,mBAAmB,aAAa;AAEvD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,8FAA8F,SAAS;AAAA,MACjH,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WAAW,YACV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,aAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAIjB,qBAAC,OAAA,EAAI,WAAU,uCACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAG,WAAU,mCAAmC,UAAA,OAAM;AAAA,YACtD,eACC,oBAAC,KAAA,EAAE,WAAU,oCAAoC,UAAA,YAAA,CAAY;AAAA,UAAA,GAEjE;AAAA,UAEC,SACC,oBAAC,OAAA,EACC,UAAA,oBAAC,YAAA,EAAW,OAAc,SAAS,cAAc,MAAM,WAAW,OAAA,CAAgB,EAAA,CACpF;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,61 @@
+import { default as React } from 'react';
+/**
+ * Shape of a single checkbox option. Pass an array of these to CheckboxGroup's options prop.
+ */
+export interface CheckboxOption {
+    /** Value submitted when this option is checked. Must be unique within the group. */
+    value: string;
+    /** Label shown next to the checkbox. */
+    label: string;
+    /** When true, this option cannot be toggled. @default undefined */
+    disabled?: boolean;
+}
+/**
+ * Props for the CheckboxGroup component. Supports controlled (value/onChange) or
+ * uncontrolled (defaultValue) usage. value and onChange work together for controlled mode.
+ */
+export interface CheckboxGroupProps {
+    /** Main label above the group (legend). @default undefined */
+    label?: string;
+    /** Secondary label shown lighter beside the main label. @default undefined */
+    secondaryLabel?: string;
+    /** Supportive text below the label. @default undefined */
+    supportText?: string;
+    /** Name for the checkbox group; each input gets name={name}. @default derived from id */
+    name?: string;
+    /** Controlled selected values (array of option values). Use with onChange. @default undefined */
+    value?: string[];
+    /** Uncontrolled default selected values. @default undefined */
+    defaultValue?: string[];
+    /** Called when selection changes. Receives the new array of selected option values. @default undefined */
+    onChange?: (value: string[]) => void;
+    /** Options to render. Each option: value, label, disabled?. @see CheckboxOption */
+    options: CheckboxOption[];
+    /** Disables the entire group. @default false */
+    disabled?: boolean;
+    /** Shows error state (borders and label) and optional errorMessage. @default false */
+    error?: boolean;
+    /** Error message shown in the alert below the group when error is true. @default undefined */
+    errorMessage?: string;
+    /** Shows required asterisk next to the label. @default undefined */
+    required?: boolean;
+    /** Additional class name on the wrapper. @default undefined */
+    className?: string;
+    /** ID for the group (used for aria-describedby and generated input ids). @default undefined */
+    id?: string;
+    /** Forwarded ref for the fieldset. @default undefined */
+    ref?: React.Ref<HTMLFieldSetElement>;
+}
+/**
+ * Group of checkboxes with a shared label, support text, and optional error state.
+ * Renders a fieldset with design-token styling. Use for multi-select options (e.g. preferences,
+ * filters). For a single checkbox use a native input or a custom control.
+ *
+ * @example
+ * <CheckboxGroup label="Toppings" options={[{ value: 'a', label: 'Option A' }]} onChange={setValues} />
+ *
+ * @example
+ * <CheckboxGroup label="Choose" value={selected} onChange={setSelected} options={opts} error errorMessage="Required" />
+ */
+export declare function CheckboxGroup({ label, secondaryLabel, supportText, name: nameProp, value: valueProp, defaultValue, onChange, options, disabled, error, errorMessage, required, className, id: idProp, ref, }: CheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAMrC;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yFAAyF;IACzF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,mFAAmF;IACnF,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+FAA+F;IAC/F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;CACtC;AAiID;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,cAAc,EACd,WAAW,EACX,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,KAAa,EACb,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,MAAM,EACV,GAAG,GACJ,EAAE,kBAAkB,2CAkGpB"}

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId } from "react";
+function CheckmarkIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M13.3332 4L5.99984 11.3333L2.6665 8" })
+    }
+  );
+}
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function CheckboxItem({
+  name,
+  value,
+  checked,
+  disabled,
+  error,
+  label,
+  id,
+  onChange
+}) {
+  const boxClasses = [
+    "pointer-events-none absolute inset-0 rounded-sm border-2 transition-all duration-150 flex items-center justify-center",
+    !disabled && !error && !checked && "border-border-form-primary bg-fill-bg-primary",
+    !disabled && !error && !checked && "group-hover:border-border-form-primary-hover",
+    !disabled && !error && !checked && "group-active:bg-neutral-100",
+    !disabled && error && !checked && "border-border-err bg-fill-bg-primary",
+    !disabled && checked && !error && "border-green-900 bg-green-900",
+    !disabled && checked && error && "border-border-err bg-fill-bg-primary",
+    disabled && !checked && "border-border-form-primary-disabled bg-fill-form-primary-disabled",
+    disabled && checked && "border-neutral-300 bg-neutral-300",
+    !disabled && "peer-focus-visible:ring-2 peer-focus-visible:ring-border-focus peer-focus-visible:ring-offset-2 peer-focus-visible:rounded-sm"
+  ].filter(Boolean).join(" ");
+  const labelClasses = [
+    "flex-1 text-text-sm cursor-pointer select-none",
+    disabled && "text-text-disabled",
+    !disabled && error && !checked && "text-text-err",
+    !disabled && checked && !error && "text-green-900",
+    !disabled && checked && error && "text-text-err"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: id,
+      className: `group flex cursor-pointer items-center gap-space-2 ${disabled ? "cursor-not-allowed" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative inline-flex h-5 w-5 shrink-0 items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              id,
+              name,
+              value,
+              checked,
+              disabled,
+              onChange: (e) => onChange(e.target.checked),
+              className: "peer sr-only",
+              "aria-invalid": error || void 0
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: boxClasses, children: checked && /* @__PURE__ */ jsx(
+            CheckmarkIcon,
+            {
+              className: `h-4 w-4 shrink-0 aspect-square ${disabled ? "text-neutral-500" : error ? "text-green-900" : "text-neutral-0"}`
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: labelClasses, children: label })
+      ]
+    }
+  );
+}
+function CheckboxGroup({
+  label,
+  secondaryLabel,
+  supportText,
+  name: nameProp,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  options,
+  disabled = false,
+  error = false,
+  errorMessage,
+  required,
+  className,
+  id: idProp,
+  ref
+}) {
+  const autoId = useId();
+  const baseId = idProp ?? autoId;
+  const name = nameProp ?? baseId;
+  const isControlled = valueProp !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue ?? []);
+  const value = isControlled ? valueProp : internal;
+  const handleChange = (optionValue, checked) => {
+    const next = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
+    if (!isControlled) setInternal(next);
+    onChange == null ? void 0 : onChange(next);
+  };
+  const showErrorAlert = error && errorMessage;
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ref,
+      disabled,
+      className: `flex flex-col gap-space-2 border-none p-0 ${className ?? ""}`,
+      "aria-invalid": error || void 0,
+      "aria-describedby": showErrorAlert ? `${baseId}-error` : void 0,
+      children: [
+        (label || supportText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+          label && /* @__PURE__ */ jsxs(
+            "legend",
+            {
+              className: `text-form-label ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+              children: [
+                label,
+                secondaryLabel && /* @__PURE__ */ jsx("span", { className: "ml-1 font-normal text-text-secondary", children: secondaryLabel }),
+                required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-text-err", children: "*" })
+              ]
+            }
+          ),
+          supportText && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-secondary"}`,
+              children: supportText
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-space-3", children: options.map((opt, index) => /* @__PURE__ */ jsx(
+          CheckboxItem,
+          {
+            id: `${baseId}-${index}`,
+            name,
+            value: opt.value,
+            checked: value.includes(opt.value),
+            disabled: disabled || !!opt.disabled,
+            error,
+            label: opt.label,
+            onChange: (checked) => handleChange(opt.value, checked)
+          },
+          opt.value
+        )) }),
+        showErrorAlert && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: `${baseId}-error`,
+            role: "alert",
+            className: `flex items-start gap-space-4 rounded-rad-md p-space-4 ${disabled ? "bg-fill-bg-secondary" : "bg-fill-bg-err"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                ErrorIcon,
+                {
+                  className: `h-5 w-5 shrink-0 ${disabled ? "text-icon-primary-disabled" : "text-icon-err"}`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-err"}`,
+                  children: errorMessage
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CheckboxGroup
+};
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/CheckboxGroup/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["'use client';\n\nimport React, { useId } from 'react';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * Shape of a single checkbox option. Pass an array of these to CheckboxGroup's options prop.\n */\nexport interface CheckboxOption {\n  /** Value submitted when this option is checked. Must be unique within the group. */\n  value: string;\n  /** Label shown next to the checkbox. */\n  label: string;\n  /** When true, this option cannot be toggled. @default undefined */\n  disabled?: boolean;\n}\n\n/**\n * Props for the CheckboxGroup component. Supports controlled (value/onChange) or\n * uncontrolled (defaultValue) usage. value and onChange work together for controlled mode.\n */\nexport interface CheckboxGroupProps {\n  /** Main label above the group (legend). @default undefined */\n  label?: string;\n  /** Secondary label shown lighter beside the main label. @default undefined */\n  secondaryLabel?: string;\n  /** Supportive text below the label. @default undefined */\n  supportText?: string;\n  /** Name for the checkbox group; each input gets name={name}. @default derived from id */\n  name?: string;\n  /** Controlled selected values (array of option values). Use with onChange. @default undefined */\n  value?: string[];\n  /** Uncontrolled default selected values. @default undefined */\n  defaultValue?: string[];\n  /** Called when selection changes. Receives the new array of selected option values. @default undefined */\n  onChange?: (value: string[]) => void;\n  /** Options to render. Each option: value, label, disabled?. @see CheckboxOption */\n  options: CheckboxOption[];\n  /** Disables the entire group. @default false */\n  disabled?: boolean;\n  /** Shows error state (borders and label) and optional errorMessage. @default false */\n  error?: boolean;\n  /** Error message shown in the alert below the group when error is true. @default undefined */\n  errorMessage?: string;\n  /** Shows required asterisk next to the label. @default undefined */\n  required?: boolean;\n  /** Additional class name on the wrapper. @default undefined */\n  className?: string;\n  /** ID for the group (used for aria-describedby and generated input ids). @default undefined */\n  id?: string;\n  /** Forwarded ref for the fieldset. @default undefined */\n  ref?: React.Ref<HTMLFieldSetElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Icons\n// ---------------------------------------------------------------------------\n\nfunction CheckmarkIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M13.3332 4L5.99984 11.3333L2.6665 8\" />\n    </svg>\n  );\n}\n\nfunction ErrorIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Checkbox item (box + label)\n// ---------------------------------------------------------------------------\n\ninterface CheckboxItemProps {\n  name: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  error: boolean;\n  label: string;\n  id: string;\n  onChange: (checked: boolean) => void;\n}\n\nfunction CheckboxItem({\n  name,\n  value,\n  checked,\n  disabled,\n  error,\n  label,\n  id,\n  onChange,\n}: CheckboxItemProps) {\n  const boxClasses = [\n    'pointer-events-none absolute inset-0 rounded-sm border-2 transition-all duration-150 flex items-center justify-center',\n    !disabled && !error && !checked && 'border-border-form-primary bg-fill-bg-primary',\n    !disabled && !error && !checked && 'group-hover:border-border-form-primary-hover',\n    !disabled && !error && !checked && 'group-active:bg-neutral-100',\n    !disabled && error && !checked && 'border-border-err bg-fill-bg-primary',\n    !disabled && checked && !error && 'border-green-900 bg-green-900',\n    !disabled && checked && error && 'border-border-err bg-fill-bg-primary',\n    disabled && !checked && 'border-border-form-primary-disabled bg-fill-form-primary-disabled',\n    disabled && checked && 'border-neutral-300 bg-neutral-300',\n    !disabled &&\n      'peer-focus-visible:ring-2 peer-focus-visible:ring-border-focus peer-focus-visible:ring-offset-2 peer-focus-visible:rounded-sm',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelClasses = [\n    'flex-1 text-text-sm cursor-pointer select-none',\n    disabled && 'text-text-disabled',\n    !disabled && error && !checked && 'text-text-err',\n    !disabled && checked && !error && 'text-green-900',\n    !disabled && checked && error && 'text-text-err',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <label\n      htmlFor={id}\n      className={`group flex cursor-pointer items-center gap-space-2 ${disabled ? 'cursor-not-allowed' : ''}`}\n    >\n      <span className=\"relative inline-flex h-5 w-5 shrink-0 items-center justify-center\">\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n          onChange={(e) => onChange(e.target.checked)}\n          className=\"peer sr-only\"\n          aria-invalid={error || undefined}\n        />\n        <span className={boxClasses}>\n          {checked && (\n            <CheckmarkIcon\n              className={`h-4 w-4 shrink-0 aspect-square ${\n                disabled ? 'text-neutral-500' : error ? 'text-green-900' : 'text-neutral-0'\n              }`}\n            />\n          )}\n        </span>\n      </span>\n      <span className={labelClasses}>{label}</span>\n    </label>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Group of checkboxes with a shared label, support text, and optional error state.\n * Renders a fieldset with design-token styling. Use for multi-select options (e.g. preferences,\n * filters). For a single checkbox use a native input or a custom control.\n *\n * @example\n * <CheckboxGroup label=\"Toppings\" options={[{ value: 'a', label: 'Option A' }]} onChange={setValues} />\n *\n * @example\n * <CheckboxGroup label=\"Choose\" value={selected} onChange={setSelected} options={opts} error errorMessage=\"Required\" />\n */\nexport function CheckboxGroup({\n  label,\n  secondaryLabel,\n  supportText,\n  name: nameProp,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  options,\n  disabled = false,\n  error = false,\n  errorMessage,\n  required,\n  className,\n  id: idProp,\n  ref,\n}: CheckboxGroupProps) {\n  const autoId = useId();\n  const baseId = idProp ?? autoId;\n  const name = nameProp ?? baseId;\n\n  const isControlled = valueProp !== undefined;\n  const [internal, setInternal] = React.useState<string[]>(defaultValue ?? []);\n  const value = isControlled ? valueProp : internal;\n\n  const handleChange = (optionValue: string, checked: boolean) => {\n    const next = checked\n      ? [...value, optionValue]\n      : value.filter((v) => v !== optionValue);\n    if (!isControlled) setInternal(next);\n    onChange?.(next);\n  };\n\n  const showErrorAlert = error && errorMessage;\n\n  return (\n    <fieldset\n      ref={ref}\n      disabled={disabled}\n      className={`flex flex-col gap-space-2 border-none p-0 ${className ?? ''}`}\n      aria-invalid={error || undefined}\n      aria-describedby={showErrorAlert ? `${baseId}-error` : undefined}\n    >\n      {(label || supportText) && (\n        <div className=\"flex flex-col gap-space-1\">\n          {label && (\n            <legend\n              className={`text-form-label ${\n                disabled ? 'text-text-disabled' : 'text-text-primary'\n              }`}\n            >\n              {label}\n              {secondaryLabel && (\n                <span className=\"ml-1 font-normal text-text-secondary\">\n                  {secondaryLabel}\n                </span>\n              )}\n              {required && (\n                <span className=\"ml-0.5 text-text-err\">*</span>\n              )}\n            </legend>\n          )}\n          {supportText && (\n            <p\n              className={`text-text-xs ${\n                disabled ? 'text-text-disabled' : 'text-text-secondary'\n              }`}\n            >\n              {supportText}\n            </p>\n          )}\n        </div>\n      )}\n\n      <div className=\"flex flex-col gap-space-3\">\n        {options.map((opt, index) => (\n          <CheckboxItem\n            key={opt.value}\n            id={`${baseId}-${index}`}\n            name={name}\n            value={opt.value}\n            checked={value.includes(opt.value)}\n            disabled={disabled || !!opt.disabled}\n            error={error}\n            label={opt.label}\n            onChange={(checked) => handleChange(opt.value, checked)}\n          />\n        ))}\n      </div>\n\n      {showErrorAlert && (\n        <div\n          id={`${baseId}-error`}\n          role=\"alert\"\n          className={`flex items-start gap-space-4 rounded-rad-md p-space-4 ${\n            disabled ? 'bg-fill-bg-secondary' : 'bg-fill-bg-err'\n          }`}\n        >\n          <ErrorIcon\n            className={`h-5 w-5 shrink-0 ${\n              disabled ? 'text-icon-primary-disabled' : 'text-icon-err'\n            }`}\n          />\n          <span\n            className={`text-text-xs ${\n              disabled ? 'text-text-disabled' : 'text-text-err'\n            }`}\n          >\n            {errorMessage}\n          </span>\n        </div>\n      )}\n    </fieldset>\n  );\n}\n"],"names":[],"mappings":";;;AA6DA;AACE;AACE;AAAC;AAAA;AACC;AACM;AACC;AACC;AACH;AACE;AACK;AACE;AACC;AACH;AAEkC;AAAA;AAGpD;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACO;AAEZ;AAAC;AAAA;AACU;AACP;AACO;AAAA;AAAA;AACX;AAGN;AAiBA;AAAsB;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAAmB;AACjB;AACmC;AACA;AACA;AACD;AACA;AACD;AACT;AACD;AAErB;AAKJ;AAAqB;AACnB;AACY;AACsB;AACA;AACD;AAKnC;AACE;AAAC;AAAA;AACU;AAC4F;AAErG;AACE;AAAA;AAAC;AAAA;AACM;AACL;AACA;AACA;AACA;AACA;AAC0C;AAChC;AACa;AAAA;AAAA;AAIrB;AAAC;AAAA;AAGC;AAAA;AAGN;AACF;AACsC;AAAA;AAAA;AAG5C;AAiBO;AAAuB;AAC5B;AACA;AACA;AACM;AACC;AACP;AACA;AACA;AACW;AACH;AACR;AACA;AACA;AACI;AAEN;AACE;AACA;AACA;AAEA;AACA;AACA;AAEA;AACE;AAGA;AACA;AAAW;AAGb;AAEA;AACE;AAAC;AAAA;AACC;AACA;AACuE;AAChD;AACgC;AAErD;AAEG;AACC;AAAC;AAAA;AAGC;AAEC;AAAA;AAIC;AAGwC;AAAA;AAAA;AAAA;AAK5C;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AAGP;AAKE;AAAC;AAAA;AAEuB;AACtB;AACW;AACsB;AACL;AAC5B;AACW;AAC2C;AAAA;AAR7C;AAWf;AAGE;AAAC;AAAA;AACc;AACR;AAGL;AAEA;AAAA;AAAC;AAAA;AAGC;AAAA;AAAA;AAEF;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AACH;AAAA;AAAA;AACF;AAAA;AAIR;;;;"}