@jiwambe/components 0.2.0

package/dist/components/ProductImage/ProductImage.js

@@ -0,0 +1,220 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import Image from "next/image";
+function ExpandIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("polyline", { points: "15 3 17 3 17 5" }),
+        /* @__PURE__ */ jsx("polyline", { points: "3 15 3 17 5 17" }),
+        /* @__PURE__ */ jsx("polyline", { points: "17 15 17 17 15 17" }),
+        /* @__PURE__ */ jsx("polyline", { points: "3 5 3 3 5 3" })
+      ]
+    }
+  );
+}
+function ChevronLeftIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12.5 15L7.5 10L12.5 5" }) });
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M7.5 5L12.5 10L7.5 15" }) });
+}
+function ProductImage({ src, alt = "", width = 800, height = 800, showExpand = false, onExpand, className = "", ref, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `relative overflow-hidden rounded-rad-md border border-border-heavy bg-fill-bg-secondary ${className}`,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-space-4", children: /* @__PURE__ */ jsx(
+          Image,
+          {
+            src,
+            alt,
+            width,
+            height,
+            className: "max-h-full max-w-full object-contain"
+          }
+        ) }),
+        showExpand && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onExpand,
+            "aria-label": "Expand image",
+            className: "absolute top-2 right-2 flex h-7 w-7 items-center justify-center rounded-rad-xs bg-fill-bg-primary/80 text-text-secondary hover:bg-fill-bg-primary hover:text-text-primary transition-colors",
+            children: /* @__PURE__ */ jsx(ExpandIcon, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ProductImageGallery({
+  images,
+  defaultIndex = 0,
+  activeIndex: activeProp,
+  onChange,
+  showExpand = true,
+  onExpand,
+  imageWidth = 800,
+  imageHeight = 600,
+  className = "",
+  ref,
+  ...rest
+}) {
+  const isControlled = activeProp !== void 0;
+  const [internal, setInternal] = useState(defaultIndex);
+  const active = isControlled ? activeProp : internal;
+  const thumbnailsRef = useRef(null);
+  const select = useCallback(
+    (idx) => {
+      if (!isControlled) setInternal(idx);
+      onChange == null ? void 0 : onChange(idx);
+    },
+    [isControlled, onChange]
+  );
+  const prev = useCallback(() => {
+    const next2 = active > 0 ? active - 1 : images.length - 1;
+    select(next2);
+  }, [active, images.length, select]);
+  const next = useCallback(() => {
+    const n = active < images.length - 1 ? active + 1 : 0;
+    select(n);
+  }, [active, images.length, select]);
+  useEffect(() => {
+    var _a;
+    const el = (_a = thumbnailsRef.current) == null ? void 0 : _a.children[active];
+    el == null ? void 0 : el.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+  }, [active]);
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      prev();
+    }
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      next();
+    }
+  };
+  const currentImage = images[active];
+  return /* @__PURE__ */ jsxs("div", { ref, className: `flex flex-col gap-space-3 ${className}`, ...rest, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative overflow-hidden rounded-rad-md bg-fill-bg-secondary border border-border-light",
+        tabIndex: 0,
+        role: "img",
+        "aria-label": (currentImage == null ? void 0 : currentImage.alt) ?? "Product image",
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex aspect-[4/3] items-center justify-center p-space-4", children: /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: currentImage == null ? void 0 : currentImage.src,
+              alt: (currentImage == null ? void 0 : currentImage.alt) ?? "",
+              width: imageWidth,
+              height: imageHeight,
+              className: "max-h-full max-w-full object-contain"
+            }
+          ) }),
+          showExpand && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onExpand == null ? void 0 : onExpand(active),
+              "aria-label": "Expand image",
+              className: "absolute top-2 right-2 flex h-7 w-7 items-center justify-center rounded-rad-xs bg-fill-bg-primary/80 text-text-secondary hover:bg-fill-bg-primary hover:text-text-primary transition-colors",
+              children: /* @__PURE__ */ jsx(ExpandIcon, { className: "h-4 w-4" })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: prev,
+                "aria-label": "Previous image",
+                className: "absolute left-2 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-fill-bg-primary/80 text-text-secondary hover:bg-fill-bg-primary hover:text-text-primary transition-colors",
+                children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-5 w-5" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: next,
+                "aria-label": "Next image",
+                className: "absolute right-2 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-fill-bg-primary/80 text-text-secondary hover:bg-fill-bg-primary hover:text-text-primary transition-colors",
+                children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          images.length > 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5", children: images.map((_, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => select(i),
+              "aria-label": `Go to image ${i + 1}`,
+              className: `h-2 w-2 rounded-full transition-colors ${i === active ? "bg-green-900" : "bg-neutral-300 hover:bg-neutral-500"}`
+            },
+            i
+          )) })
+        ]
+      }
+    ),
+    images.length > 1 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: thumbnailsRef,
+        className: "flex gap-space-2 overflow-x-auto scrollbar-none",
+        role: "tablist",
+        "aria-label": "Image thumbnails",
+        children: images.map((img, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": i === active,
+            "aria-label": img.alt ?? `Image ${i + 1}`,
+            onClick: () => select(i),
+            className: `relative flex shrink-0 items-center justify-center overflow-hidden rounded-rad-sm border bg-fill-bg-secondary p-space-2 transition-all ${i === active ? "border-border-heavy ring-1 ring-border-heavy" : "border-border-light hover:border-border-heavy"}`,
+            style: { width: 80, height: 64 },
+            children: [
+              /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: img.src,
+                  alt: img.alt ?? "",
+                  width: 80,
+                  height: 64,
+                  className: "max-h-full max-w-full object-contain"
+                }
+              ),
+              showExpand && /* @__PURE__ */ jsx("span", { className: "absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-[3px] bg-fill-bg-primary/70 text-text-secondary", children: /* @__PURE__ */ jsx(ExpandIcon, { className: "h-3 w-3" }) })
+            ]
+          },
+          i
+        ))
+      }
+    )
+  ] });
+}
+export {
+  ProductImage,
+  ProductImageGallery
+};
+//# sourceMappingURL=ProductImage.js.map

package/dist/components/ProductImage/ProductImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductImage.js","sources":["../../../src/components/ProductImage/ProductImage.tsx"],"sourcesContent":["'use client';\n\nimport React, { useState, useCallback, useRef, useEffect } from 'react';\nimport Image from 'next/image';\n\n// ---------------------------------------------------------------------------\n// Icons\n// ---------------------------------------------------------------------------\n\nfunction ExpandIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <polyline points=\"15 3 17 3 17 5\" />\n      <polyline points=\"3 15 3 17 5 17\" />\n      <polyline points=\"17 15 17 17 15 17\" />\n      <polyline points=\"3 5 3 3 5 3\" />\n    </svg>\n  );\n}\n\nfunction ChevronLeftIcon({ className }: { className?: string }) {\n  return (\n    <svg className={className} width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M12.5 15L7.5 10L12.5 5\" />\n    </svg>\n  );\n}\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n  return (\n    <svg className={className} width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M7.5 5L12.5 10L7.5 15\" />\n    </svg>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ProductImage — single framed product image\n// ---------------------------------------------------------------------------\n\n/**\n * Props for the ProductImage component. Renders a single image in a bordered container\n * with optional expand button. Uses next/image for optimization.\n */\nexport interface ProductImageProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Image source URL. */\n  src: string;\n  /** Alt text for the image. @default '' */\n  alt?: string;\n  /** Width for next/image. @default 800 */\n  width?: number;\n  /** Height for next/image. @default 800 */\n  height?: number;\n  /** When true, shows an expand/fullscreen icon overlay. @default false */\n  showExpand?: boolean;\n  /** Called when the expand icon is clicked. @default undefined */\n  onExpand?: () => void;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Single product image in a bordered, rounded container. Uses next/image. Optional\n * expand button for opening in a lightbox or fullscreen (handle with onExpand).\n * For multiple images with thumbnails use ProductImageGallery.\n *\n * @example\n * <ProductImage src=\"/product.jpg\" alt=\"Product\" />\n *\n * @example\n * <ProductImage src={url} showExpand onExpand={() => openLightbox()} />\n */\nexport function ProductImage({ src, alt = '', width = 800, height = 800, showExpand = false, onExpand, className = '', ref, ...rest }: ProductImageProps) {\n  return (\n    <div\n      ref={ref}\n      className={`relative overflow-hidden rounded-rad-md border border-border-heavy bg-fill-bg-secondary ${className}`}\n      {...rest}\n    >\n      <div className=\"flex items-center justify-center p-space-4\">\n        <Image\n          src={src}\n          alt={alt}\n          width={width}\n          height={height}\n          className=\"max-h-full max-w-full object-contain\"\n        />\n      </div>\n      {showExpand && (\n        <button\n          type=\"button\"\n          onClick={onExpand}\n          aria-label=\"Expand image\"\n          className=\"absolute top-2 right-2 flex h-7 w-7 items-center justify-center rounded-rad-xs bg-fill-bg-primary/80 text-text-secondary hover:bg-fill-bg-primary hover:text-text-primary transition-colors\"\n        >\n          <ExpandIcon className=\"h-4 w-4\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// ProductImageGallery — horizontal thumbnail gallery with main image\n// ---------------------------------------------------------------------------\n\n/**\n * Shape of a single image in the gallery. Each item needs src; alt is optional.\n */\nexport interface GalleryImage {\n  src: string;\n  alt?: string;\n}\n\n/**\n * Props for ProductImageGallery. Main image area shows one image at a time with\n * optional prev/next arrows and expand; thumbnails strip below for multi-image selection.\n * Supports controlled (activeIndex/onChange) or uncontrolled (defaultIndex) selection.\n */\nexport interface ProductImageGalleryProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Array of images. Each: src (string), alt? (string). @see GalleryImage */\n  images: GalleryImage[];\n  /** Index of the initially selected image (uncontrolled). @default 0 */\n  defaultIndex?: number;\n  /** Controlled selected index. Use with onChange. @default undefined */\n  activeIndex?: number;\n  /** Called when the user selects another image (thumbnail or arrow). @default undefined */\n  onChange?: (index: number) => void;\n  /** When true, shows expand icon on the main image. @default true */\n  showExpand?: boolean;\n  /** Called when the expand icon is clicked; receives current image index. @default undefined */\n  onExpand?: (index: number) => void;\n  /** Width for next/image main image. @default 800 */\n  imageWidth?: number;\n  /** Height for next/image main image. Main area uses aspect ratio 4:3. @default 600 */\n  imageHeight?: number;\n  /** Forwarded ref for the root div. @default undefined */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Product image gallery with main image and horizontal thumbnail strip. Main image\n * has prev/next arrows and optional expand; thumbnails are selectable. Use for PDPs\n * or any multi-image product view. Single image use ProductImage instead.\n *\n * @example\n * <ProductImageGallery images={[{ src: '/a.jpg' }, { src: '/b.jpg', alt: 'Back' }]} />\n *\n * @example\n * <ProductImageGallery images={imgs} activeIndex={idx} onChange={setIdx} showExpand onExpand={openLightbox} />\n */\nexport function ProductImageGallery({\n  images,\n  defaultIndex = 0,\n  activeIndex: activeProp,\n  onChange,\n  showExpand = true,\n  onExpand,\n  imageWidth = 800,\n  imageHeight = 600,\n  className = '',\n  ref,\n  ...rest\n}: ProductImageGalleryProps) {\n  const isControlled = activeProp !== undefined;\n  const [internal, setInternal] = useState(defaultIndex);\n  const active = isControlled ? activeProp : internal;\n\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n\n  const select = useCallback(\n    (idx: number) => {\n      if (!isControlled) setInternal(idx);\n      onChange?.(idx);\n    },\n    [isControlled, onChange],\n  );\n\n  const prev = useCallback(() => {\n    const next = active > 0 ? active - 1 : images.length - 1;\n    select(next);\n  }, [active, images.length, select]);\n\n  const next = useCallback(() => {\n    const n = active < images.length - 1 ? active + 1 : 0;\n    select(n);\n  }, [active, images.length, select]);\n\n  useEffect(() => {\n    const el = thumbnailsRef.current?.children[active] as HTMLElement | undefined;\n    el?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n  }, [active]);\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'ArrowLeft') { e.preventDefault(); prev(); }\n    if (e.key === 'ArrowRight') { e.preventDefault(); next(); }\n  };\n\n  const currentImage = images[active];\n\n  return (\n    <div ref={ref} className={`flex flex-col gap-space-3 ${className}`} {...rest}>\n      {/* Main image */}\n      <div\n        className=\"relative overflow-hidden rounded-rad-md bg-fill-bg-secondary border border-border-light\"\n        tabIndex={0}\n        role=\"img\"\n        aria-label={currentImage?.alt ?? 'Product image'}\n        onKeyDown={handleKeyDown}\n      >\n        <div className=\"flex aspect-[4/3] items-center justify-center p-space-4\">\n          <Image\n            src={currentImage?.src}\n            alt={currentImage?.alt ?? ''}\n            width={imageWidth}\n            height={imageHeight}\n            className=\"max-h-full max-w-full object-contain\"\n          />\n        </div>\n\n        {showExpand && (\n          <button\n            type=\"button\"\n            onClick={() => onExpand?.(active)}\n            aria-label=\"Expand image\"\n            className=\"absolute top-2 right-2 flex h-7 w-7 items-center justify-center rounded-rad-xs bg-fill-bg-primary/80 text-text-secondary hover:bg-fill-bg-primary hover:text-text-primary transition-colors\"\n          >\n            <ExpandIcon className=\"h-4 w-4\" />\n          </button>\n        )}\n\n        {/* Navigation arrows */}\n        {images.length > 1 && (\n          <>\n            <button\n              type=\"button\"\n              onClick={prev}\n              aria-label=\"Previous image\"\n              className=\"absolute left-2 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-fill-bg-primary/80 text-text-secondary hover:bg-fill-bg-primary hover:text-text-primary transition-colors\"\n            >\n              <ChevronLeftIcon className=\"h-5 w-5\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={next}\n              aria-label=\"Next image\"\n              className=\"absolute right-2 top-1/2 -translate-y-1/2 flex h-8 w-8 items-center justify-center rounded-full bg-fill-bg-primary/80 text-text-secondary hover:bg-fill-bg-primary hover:text-text-primary transition-colors\"\n            >\n              <ChevronRightIcon className=\"h-5 w-5\" />\n            </button>\n          </>\n        )}\n\n        {/* Pagination dots */}\n        {images.length > 1 && (\n          <div className=\"absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5\">\n            {images.map((_, i) => (\n              <button\n                key={i}\n                type=\"button\"\n                onClick={() => select(i)}\n                aria-label={`Go to image ${i + 1}`}\n                className={`h-2 w-2 rounded-full transition-colors ${\n                  i === active\n                    ? 'bg-green-900'\n                    : 'bg-neutral-300 hover:bg-neutral-500'\n                }`}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n\n      {/* Thumbnails strip */}\n      {images.length > 1 && (\n        <div\n          ref={thumbnailsRef}\n          className=\"flex gap-space-2 overflow-x-auto scrollbar-none\"\n          role=\"tablist\"\n          aria-label=\"Image thumbnails\"\n        >\n          {images.map((img, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={i === active}\n              aria-label={img.alt ?? `Image ${i + 1}`}\n              onClick={() => select(i)}\n              className={`relative flex shrink-0 items-center justify-center overflow-hidden rounded-rad-sm border bg-fill-bg-secondary p-space-2 transition-all ${\n                i === active\n                  ? 'border-border-heavy ring-1 ring-border-heavy'\n                  : 'border-border-light hover:border-border-heavy'\n              }`}\n              style={{ width: 80, height: 64 }}\n            >\n              <Image\n                src={img.src}\n                alt={img.alt ?? ''}\n                width={80}\n                height={64}\n                className=\"max-h-full max-w-full object-contain\"\n              />\n              {showExpand && (\n                <span className=\"absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-[3px] bg-fill-bg-primary/70 text-text-secondary\">\n                  <ExpandIcon className=\"h-3 w-3\" />\n                </span>\n              )}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AASA;AACE;AACE;AAAC;AAAA;AACC;AACM;AACC;AACC;AACH;AACE;AACK;AACE;AACC;AACH;AAEZ;AAAkC;AACA;AACG;AACN;AAAA;AAAA;AAGrC;AAEA;AACE;AAKF;AAEA;AACE;AAKF;AAsCO;AACL;AACE;AAAC;AAAA;AACC;AAC+G;AAC3G;AAEJ;AACE;AAAC;AAAA;AACC;AACA;AACA;AACA;AACU;AAAA;AAEd;AAEE;AAAC;AAAA;AACM;AACI;AACE;AACD;AAEsB;AAAA;AAAA;AAClC;AAAA;AAIR;AAmDO;AAA6B;AAClC;AACe;AACF;AACb;AACa;AACb;AACa;AACC;AACF;AACZ;AAEF;AACE;AACA;AACA;AAEA;AAEA;AAAe;AAEX;AACA;AAAW;AACb;AACuB;AAGzB;AACE;AACA;AAAW;AAGb;AACE;AACA;AAAQ;AAGV;;AACE;AACA;;AAGF;AACE;AAA6B;AAAoB;AAAA;AACjD;AAA8B;AAAoB;AAAA;AAAQ;AAG5D;AAEA;AAGI;AAAA;AAAC;AAAA;AACW;AACA;AACL;AAC4B;AACtB;AAEX;AACE;AAAC;AAAA;AACoB;AACO;AACnB;AACC;AACE;AAAA;AAEd;AAGE;AAAC;AAAA;AACM;AACqB;AACf;AACD;AAEsB;AAAA;AAAA;AAOhC;AAAA;AAAC;AAAA;AACM;AACI;AACE;AACD;AAE2B;AAAA;AAAA;AAEvC;AAAC;AAAA;AACM;AACI;AACE;AACD;AAE4B;AAAA;AAAA;AAE1C;AAOI;AAAC;AAAA;AAEM;AACkB;AACS;AAKhC;AAAA;AARK;AAWX;AAAA;AAAA;AAAA;AAMF;AAAC;AAAA;AACM;AACK;AACL;AACM;AAGT;AAAC;AAAA;AAEM;AACA;AACgB;AACgB;AACd;AAKvB;AAC4B;AAE5B;AAAA;AAAC;AAAA;AACU;AACO;AACT;AACC;AACE;AAAA;AAAA;AAKV;AAAA;AAAA;AAvBG;AA0BR;AAAA;AAAA;AAKX;;;;;"}

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+/**
+ * Shape of a single radio option. Pass an array of these to RadioGroup's options prop.
+ */
+export interface RadioOption {
+    /** Value submitted when this option is selected. Must be unique in the group. */
+    value: string;
+    /** Label shown next to the radio. */
+    label: string;
+    /** When true, this option cannot be selected. @default undefined */
+    disabled?: boolean;
+}
+/**
+ * Props for the RadioGroup component. Single selection; value/onChange for controlled,
+ * defaultValue for uncontrolled. value and onChange work together in controlled mode.
+ */
+export interface RadioGroupProps {
+    /** 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 radio group (each input gets name={name}). @default derived from id */
+    name?: string;
+    /** Controlled selected value (option value string). Use with onChange. @default undefined */
+    value?: string;
+    /** Uncontrolled default selected value. @default undefined */
+    defaultValue?: string;
+    /** Called when selection changes. Receives the selected option value. @default undefined */
+    onChange?: (value: string) => void;
+    /** Options to render. Each: value, label, disabled?. @see RadioOption */
+    options: RadioOption[];
+    /** Disables the entire group. @default false */
+    disabled?: boolean;
+    /** Shows error state 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;
+    /** When true, the selected option shows a trailing checkmark icon. @default false */
+    showCheckIcon?: boolean;
+    /** Additional class name on the wrapper. @default undefined */
+    className?: string;
+    /** ID for the group (used for generated input ids and aria-describedby). @default undefined */
+    id?: string;
+    /** Forwarded ref for the fieldset. @default undefined */
+    ref?: React.Ref<HTMLFieldSetElement>;
+}
+/**
+ * Single-selection radio group with label, support text, and optional error state.
+ * Renders a fieldset with design-token styling. Use for one-of-many choices (e.g. delivery
+ * method, plan). For multi-select use CheckboxGroup. value/onChange for controlled mode.
+ *
+ * @example
+ * <RadioGroup label="Plan" options={[{ value: 'a', label: 'Plan A' }]} onChange={setValue} />
+ *
+ * @example
+ * <RadioGroup label="Option" value={selected} onChange={setSelected} options={opts} showCheckIcon error errorMessage="Required" />
+ */
+export declare function RadioGroup({ label, secondaryLabel, supportText, name: nameProp, value: valueProp, defaultValue, onChange, options, disabled, error, errorMessage, required, showCheckIcon, className, id: idProp, ref, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAMrC;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,yEAAyE;IACzE,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+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;AAsJD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,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,aAAqB,EACrB,SAAS,EACT,EAAE,EAAE,MAAM,EACV,GAAG,GACJ,EAAE,eAAe,2CAmGjB"}

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,233 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useId } from "react";
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" })
+    }
+  );
+}
+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 RadioItem({
+  name,
+  value,
+  checked,
+  disabled,
+  error,
+  showCheckIcon,
+  label,
+  id,
+  onChange
+}) {
+  const unselectedCircle = [
+    "pointer-events-none absolute inset-0 rounded-rad-rounded transition-all duration-150 border-solid border-[1.25px]",
+    !disabled && !error && "border-border-form-primary bg-fill-form-primary",
+    !disabled && !error && "group-hover:border-[1.5px] group-hover:border-border-form-primary-hover",
+    !disabled && !error && "group-active:border-[1.5px] group-active:border-border-form-primary-active",
+    !disabled && error && "border-border-err bg-fill-form-primary",
+    !disabled && error && "group-hover:border-[1.5px]",
+    disabled && "border-border-form-primary-disabled bg-fill-form-primary-disabled"
+  ].filter(Boolean).join(" ");
+  const selectedCircle = [
+    "pointer-events-none absolute inset-0 rounded-rad-rounded transition-all duration-150",
+    !disabled && !error && "bg-fill-action-primary",
+    !disabled && !error && "group-hover:bg-fill-action-primary-hover",
+    !disabled && !error && "group-active:bg-fill-action-primary-active",
+    !disabled && error && "bg-fill-action-primary",
+    disabled && "bg-fill-action-primary-disabled"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: id,
+      className: `group flex items-center gap-space-3 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative flex h-6 w-6 shrink-0 items-center justify-center", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              id,
+              name,
+              value,
+              checked,
+              disabled,
+              onChange: () => onChange(value),
+              className: "peer sr-only",
+              "aria-invalid": error || void 0
+            }
+          ),
+          checked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: selectedCircle }),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "pointer-events-none relative h-3 w-3 shrink-0",
+                width: "12",
+                height: "12",
+                viewBox: "0 0 12 12",
+                fill: "none",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "6", fill: "white" })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("span", { className: unselectedCircle }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "pointer-events-none absolute rounded-rad-rounded border-[1.5px] border-border-focus border-solid opacity-0 peer-focus-visible:opacity-100 -inset-1",
+              "aria-hidden": "true"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `flex-1 text-form-text ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+            children: label
+          }
+        ),
+        showCheckIcon && checked && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `flex h-6 w-6 shrink-0 items-center justify-center rounded-full ${disabled ? "bg-neutral-300 text-neutral-500" : "bg-green-900 text-neutral-0"}`,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function RadioGroup({
+  label,
+  secondaryLabel,
+  supportText,
+  name: nameProp,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  options,
+  disabled = false,
+  error = false,
+  errorMessage,
+  required,
+  showCheckIcon = false,
+  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 = (v) => {
+    if (!isControlled) setInternal(v);
+    onChange == null ? void 0 : onChange(v);
+  };
+  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(
+          RadioItem,
+          {
+            id: `${baseId}-${index}`,
+            name,
+            value: opt.value,
+            checked: value === opt.value,
+            disabled: disabled || !!opt.disabled,
+            error,
+            showCheckIcon,
+            label: opt.label,
+            onChange: handleChange
+          },
+          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 {
+  RadioGroup
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport React, { useId } from 'react';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/**\n * Shape of a single radio option. Pass an array of these to RadioGroup's options prop.\n */\nexport interface RadioOption {\n  /** Value submitted when this option is selected. Must be unique in the group. */\n  value: string;\n  /** Label shown next to the radio. */\n  label: string;\n  /** When true, this option cannot be selected. @default undefined */\n  disabled?: boolean;\n}\n\n/**\n * Props for the RadioGroup component. Single selection; value/onChange for controlled,\n * defaultValue for uncontrolled. value and onChange work together in controlled mode.\n */\nexport interface RadioGroupProps {\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 radio group (each input gets name={name}). @default derived from id */\n  name?: string;\n  /** Controlled selected value (option value string). Use with onChange. @default undefined */\n  value?: string;\n  /** Uncontrolled default selected value. @default undefined */\n  defaultValue?: string;\n  /** Called when selection changes. Receives the selected option value. @default undefined */\n  onChange?: (value: string) => void;\n  /** Options to render. Each: value, label, disabled?. @see RadioOption */\n  options: RadioOption[];\n  /** Disables the entire group. @default false */\n  disabled?: boolean;\n  /** Shows error state 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  /** When true, the selected option shows a trailing checkmark icon. @default false */\n  showCheckIcon?: boolean;\n  /** Additional class name on the wrapper. @default undefined */\n  className?: string;\n  /** ID for the group (used for generated input ids and aria-describedby). @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 CheckIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M20 6L9 17l-5-5\" />\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// Radio item (circle + label + optional check icon)\n// ---------------------------------------------------------------------------\n\ninterface RadioItemProps {\n  name: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  error: boolean;\n  showCheckIcon: boolean;\n  label: string;\n  id: string;\n  onChange: (value: string) => void;\n}\n\nfunction RadioItem({\n  name,\n  value,\n  checked,\n  disabled,\n  error,\n  showCheckIcon,\n  label,\n  id,\n  onChange,\n}: RadioItemProps) {\n  const unselectedCircle = [\n    'pointer-events-none absolute inset-0 rounded-rad-rounded transition-all duration-150 border-solid border-[1.25px]',\n    !disabled && !error && 'border-border-form-primary bg-fill-form-primary',\n    !disabled && !error && 'group-hover:border-[1.5px] group-hover:border-border-form-primary-hover',\n    !disabled && !error && 'group-active:border-[1.5px] group-active:border-border-form-primary-active',\n    !disabled && error && 'border-border-err bg-fill-form-primary',\n    !disabled && error && 'group-hover:border-[1.5px]',\n    disabled && 'border-border-form-primary-disabled bg-fill-form-primary-disabled',\n  ].filter(Boolean).join(' ');\n\n  const selectedCircle = [\n    'pointer-events-none absolute inset-0 rounded-rad-rounded transition-all duration-150',\n    !disabled && !error && 'bg-fill-action-primary',\n    !disabled && !error && 'group-hover:bg-fill-action-primary-hover',\n    !disabled && !error && 'group-active:bg-fill-action-primary-active',\n    !disabled && error && 'bg-fill-action-primary',\n    disabled && 'bg-fill-action-primary-disabled',\n  ].filter(Boolean).join(' ');\n\n  return (\n    <label\n      htmlFor={id}\n      className={`group flex items-center gap-space-3 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}\n    >\n      <span className=\"relative flex h-6 w-6 shrink-0 items-center justify-center\">\n        <input\n          type=\"radio\"\n          id={id}\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n          onChange={() => onChange(value)}\n          className=\"peer sr-only\"\n          aria-invalid={error || undefined}\n        />\n        {checked ? (\n          <>\n            <span className={selectedCircle} />\n            <svg\n              className=\"pointer-events-none relative h-3 w-3 shrink-0\"\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              aria-hidden=\"true\"\n            >\n              <circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"white\" />\n            </svg>\n          </>\n        ) : (\n          <span className={unselectedCircle} />\n        )}\n        <span\n          className=\"pointer-events-none absolute rounded-rad-rounded border-[1.5px] border-border-focus border-solid opacity-0 peer-focus-visible:opacity-100 -inset-1\"\n          aria-hidden=\"true\"\n        />\n      </span>\n      <span\n        className={`flex-1 text-form-text ${\n          disabled ? 'text-text-disabled' : 'text-text-primary'\n        }`}\n      >\n        {label}\n      </span>\n      {showCheckIcon && checked && (\n        <span\n          className={`flex h-6 w-6 shrink-0 items-center justify-center rounded-full ${\n            disabled ? 'bg-neutral-300 text-neutral-500' : 'bg-green-900 text-neutral-0'\n          }`}\n          aria-hidden=\"true\"\n        >\n          <CheckIcon className=\"h-3.5 w-3.5\" />\n        </span>\n      )}\n    </label>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Single-selection radio group with label, support text, and optional error state.\n * Renders a fieldset with design-token styling. Use for one-of-many choices (e.g. delivery\n * method, plan). For multi-select use CheckboxGroup. value/onChange for controlled mode.\n *\n * @example\n * <RadioGroup label=\"Plan\" options={[{ value: 'a', label: 'Plan A' }]} onChange={setValue} />\n *\n * @example\n * <RadioGroup label=\"Option\" value={selected} onChange={setSelected} options={opts} showCheckIcon error errorMessage=\"Required\" />\n */\nexport function RadioGroup({\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  showCheckIcon = false,\n  className,\n  id: idProp,\n  ref,\n}: RadioGroupProps) {\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(defaultValue ?? '');\n  const value = isControlled ? valueProp : internal;\n\n  const handleChange = (v: string) => {\n    if (!isControlled) setInternal(v);\n    onChange?.(v);\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 + support text */}\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      {/* Options */}\n      <div className=\"flex flex-col gap-space-3\">\n        {options.map((opt, index) => (\n          <RadioItem\n            key={opt.value}\n            id={`${baseId}-${index}`}\n            name={name}\n            value={opt.value}\n            checked={value === opt.value}\n            disabled={disabled || !!opt.disabled}\n            error={error}\n            showCheckIcon={showCheckIcon}\n            label={opt.label}\n            onChange={handleChange}\n          />\n        ))}\n      </div>\n\n      {/* Error alert */}\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":";;;AA+DA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACE;AACK;AACE;AACC;AACH;AAEc;AAAA;AAGhC;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACO;AAEZ;AAAC;AAAA;AACU;AACP;AACO;AAAA;AAAA;AACX;AAGN;AAkBA;AAAmB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AAAyB;AACvB;AACuB;AACA;AACA;AACD;AACA;AACV;AAGd;AAAuB;AACrB;AACuB;AACA;AACA;AACD;AACV;AAGd;AACE;AAAC;AAAA;AACU;AAC2F;AAEpG;AACE;AAAA;AAAC;AAAA;AACM;AACL;AACA;AACA;AACA;AACA;AAC8B;AACpB;AACa;AAAA;AAAA;AAIrB;AAAiC;AACjC;AAAC;AAAA;AACW;AACJ;AACC;AACC;AACH;AACO;AAE6B;AAAA;AAAA;AAIV;AAErC;AAAC;AAAA;AACW;AACE;AAAA;AAAA;AAEhB;AACA;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AAGD;AAAC;AAAA;AAGC;AACY;AAEuB;AAAA;AAAA;AACrC;AAAA;AAIR;AAiBO;AAAoB;AACzB;AACA;AACA;AACM;AACC;AACP;AACA;AACA;AACW;AACH;AACR;AACA;AACgB;AAChB;AACI;AAEN;AACE;AACA;AACA;AAEA;AACA;AACA;AAEA;AACE;AACA;AAAW;AAGb;AAEA;AACE;AAAC;AAAA;AACC;AACA;AACuE;AAChD;AACgC;AAGrD;AAEG;AACC;AAAC;AAAA;AAGC;AAEC;AAAA;AAIC;AAGwC;AAAA;AAAA;AAAA;AAK5C;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AAGP;AAME;AAAC;AAAA;AAEuB;AACtB;AACW;AACY;AACK;AAC5B;AACA;AACW;AACD;AAAA;AATD;AAYf;AAIE;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;;;;"}

package/dist/components/Section/Section.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { SystemProps } from '../../utils/responsive-props';
+/**
+ * Vertical padding preset for Section. Controls top/bottom padding at base and lg (940px) breakpoint.
+ * Overridden when py or pt/pb are provided via system props.
+ */
+export type SectionSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Props for the Section component. Extends system props (responsive spacing, etc.).
+ * size applies vertical padding presets unless py/pt/pb are set.
+ */
+export interface SectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'display'>, SystemProps {
+    /**
+     * Vertical padding preset. Ignored when py or pt/pb are provided.
+     * - 'sm' — base: space-4, lg: space-6
+     * - 'md' — base: space-6, lg: space-9
+     * - 'lg' — base: space-9, lg: space-16
+     * - 'xl' — base: space-16, lg: space-24
+     * @default undefined
+     */
+    size?: SectionSize;
+    /** Forwarded ref for the section element. @default undefined */
+    ref?: React.Ref<HTMLElement>;
+    /** Section content. @default undefined */
+    children?: React.ReactNode;
+}
+/**
+ * Semantic section element with optional vertical padding presets (size) and full
+ * system props. Use as the wrapper for each major page block; combine with
+ * Container for width and gutters. Do not nest Section for inner layout — use Box or Stack.
+ *
+ * @example
+ * <Section size="lg">
+ *   <Container>Page content</Container>
+ * </Section>
+ *
+ * @example
+ * <Section size="md" py={{ base: 'space-8', xl: 'space-16' }}>Custom spacing</Section>
+ */
+export declare function Section({ size, children, className, style, ref, ...allRest }: SectionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Section {
+    var displayName: string;
+}
+//# sourceMappingURL=Section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/components/Section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD;;;GAGG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,EAAE,WAAW;IACnG;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AASD;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAc,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,EAAE,YAAY,2CAiD/F;yBAjDe,OAAO"}