@nationaldesignstudio/react 0.5.1 → 0.5.2

package/dist/components/atoms/background/background.js

@@ -1,190 +0,0 @@
-import { jsx as u } from "react/jsx-runtime";
-import * as b from "react";
-import { tv as m } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
-import { useRender as y } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/use-render/useRender.js";
-const $ = m({
-  base: "absolute inset-0"
-}), k = b.forwardRef(
-  ({ className: s, children: e, ...a }, r) => /* @__PURE__ */ u(
-    "div",
-    {
-      ref: r,
-      "aria-hidden": "true",
-      className: $({ class: s }),
-      ...a,
-      children: e
-    }
-  )
-);
-k.displayName = "Background";
-const w = m({
-  base: "absolute inset-0 size-full object-cover"
-});
-function N(s) {
-  const {
-    className: e,
-    src: a,
-    position: r = "center",
-    alt: t = "",
-    style: l,
-    render: i,
-    ...n
-  } = s, d = w({ class: e }), c = { objectPosition: r, ...l };
-  return y({
-    render: i,
-    props: {
-      src: a,
-      alt: t,
-      className: d,
-      style: c,
-      ...n
-    },
-    defaultTagName: "img"
-  });
-}
-N.displayName = "Background.Image";
-const R = m({
-  base: "absolute inset-0 size-full object-cover"
-});
-function v(s) {
-  const {
-    className: e,
-    src: a,
-    type: r,
-    poster: t,
-    autoPlay: l = !0,
-    loop: i = !0,
-    muted: n = !0,
-    playsInline: d = !0,
-    render: c,
-    children: g,
-    ...p
-  } = s, o = R({ class: e }), f = y({
-    render: c,
-    props: {
-      autoPlay: l,
-      loop: i,
-      muted: n,
-      playsInline: d,
-      poster: t,
-      className: o,
-      ...p
-    },
-    defaultTagName: "video"
-  });
-  return c ? f : /* @__PURE__ */ u(
-    "video",
-    {
-      autoPlay: l,
-      loop: i,
-      muted: n,
-      playsInline: d,
-      poster: t,
-      className: o,
-      ...p,
-      children: /* @__PURE__ */ u("source", { src: a, type: r })
-    }
-  );
-}
-v.displayName = "Background.Video";
-const S = m({
-  base: "absolute inset-0 size-full border-0 scale-[1.5] object-cover"
-}), B = b.forwardRef(
-  ({
-    className: s,
-    videoId: e,
-    poster: a,
-    autoplay: r = !0,
-    loop: t = !0,
-    muted: l = !0,
-    controls: i = !1,
-    customerSubdomain: n,
-    title: d = "Background video",
-    ...c
-  }, g) => {
-    const p = n ? `https://${n}.cloudflarestream.com` : "https://iframe.videodelivery.net", o = new URLSearchParams();
-    r && o.set("autoplay", "true"), t && o.set("loop", "true"), l && o.set("muted", "true"), i || o.set("controls", "false"), a && o.set("poster", a), o.set("preload", "auto");
-    const f = `${p}/${e}?${o.toString()}`;
-    return /* @__PURE__ */ u(
-      "iframe",
-      {
-        ref: g,
-        src: f,
-        title: d,
-        allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
-        allowFullScreen: !0,
-        className: S({ class: s }),
-        ...c
-      }
-    );
-  }
-);
-B.displayName = "Background.Stream";
-const j = m({
-  base: "absolute inset-0 bg-bg-overlay"
-}), h = b.forwardRef(({ className: s, opacity: e = 0.4, style: a, ...r }, t) => /* @__PURE__ */ u(
-  "div",
-  {
-    ref: t,
-    "aria-hidden": "true",
-    className: j({ class: s }),
-    style: {
-      opacity: e,
-      ...a
-    },
-    ...r
-  }
-));
-h.displayName = "Background.Overlay";
-const I = m({
-  base: "absolute inset-0"
-}), V = b.forwardRef(
-  ({
-    className: s,
-    direction: e = "to-b",
-    from: a = "transparent",
-    via: r,
-    to: t = "black",
-    gradient: l,
-    style: i,
-    ...n
-  }, d) => {
-    const c = e.startsWith("to-") ? e.replace("to-", "to ") : e, g = l || (r ? `linear-gradient(${c}, ${a}, ${r}, ${t})` : `linear-gradient(${c}, ${a}, ${t})`);
-    return /* @__PURE__ */ u(
-      "div",
-      {
-        ref: d,
-        "aria-hidden": "true",
-        className: I({ class: s }),
-        style: {
-          backgroundImage: g,
-          ...i
-        },
-        ...n
-      }
-    );
-  }
-);
-V.displayName = "Background.Gradient";
-const z = Object.assign(k, {
-  Image: N,
-  Video: v,
-  Stream: B,
-  Overlay: h,
-  Gradient: V
-});
-export {
-  z as Background,
-  V as BackgroundGradient,
-  N as BackgroundImage,
-  h as BackgroundOverlay,
-  B as BackgroundStream,
-  v as BackgroundVideo,
-  I as backgroundGradientVariants,
-  w as backgroundImageVariants,
-  j as backgroundOverlayVariants,
-  S as backgroundStreamVariants,
-  $ as backgroundVariants,
-  R as backgroundVideoVariants
-};
-//# sourceMappingURL=background.js.map

package/dist/components/atoms/background/background.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"background.js","sources":["../../../../src/components/atoms/background/background.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\n// =============================================================================\n// Background Atomic Component\n// =============================================================================\n\nconst backgroundVariants = tv({\n\tbase: \"absolute inset-0\",\n});\n\n/**\n * Base container for background composition.\n * Use as a wrapper to compose multiple background layers (image, video, overlay, gradient).\n *\n * @example\n * ```tsx\n * <Background>\n *   <Background.Image src=\"/hero.jpg\" />\n *   <Background.Overlay opacity={0.4} />\n *   <Background.Gradient direction=\"to-t\" from=\"black\" to=\"transparent\" />\n * </Background>\n * ```\n */\nexport interface BackgroundProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst Background = React.forwardRef<HTMLDivElement, BackgroundProps>(\n\t({ className, children, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={backgroundVariants({ class: className })}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nBackground.displayName = \"Background\";\n\n// =============================================================================\n// Background.Image\n// =============================================================================\n\nconst backgroundImageVariants = tv({\n\tbase: \"absolute inset-0 size-full object-cover\",\n});\n\nexport interface BackgroundImageProps\n\textends useRender.ComponentProps<\"img\">,\n\t\tOmit<React.ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"render\"> {\n\t/**\n\t * URL for the background image\n\t */\n\tsrc: string;\n\t/**\n\t * Object position (default: \"center\")\n\t */\n\tposition?: string;\n}\n\n/**\n * Background image layer using an actual img element with object-cover.\n * Supports native lazy loading, srcset, and better accessibility.\n * Supports render prop for element composition.\n */\nfunction BackgroundImage(props: BackgroundImageProps) {\n\tconst {\n\t\tclassName,\n\t\tsrc,\n\t\tposition = \"center\",\n\t\talt = \"\",\n\t\tstyle,\n\t\trender,\n\t\t...otherProps\n\t} = props;\n\n\tconst imgClassName = backgroundImageVariants({ class: className });\n\tconst imgStyle = { objectPosition: position, ...style };\n\n\treturn useRender({\n\t\trender,\n\t\tprops: {\n\t\t\tsrc,\n\t\t\talt,\n\t\t\tclassName: imgClassName,\n\t\t\tstyle: imgStyle,\n\t\t\t...otherProps,\n\t\t},\n\t\tdefaultTagName: \"img\",\n\t});\n}\nBackgroundImage.displayName = \"Background.Image\";\n\n// =============================================================================\n// Background.Video\n// =============================================================================\n\nconst backgroundVideoVariants = tv({\n\tbase: \"absolute inset-0 size-full object-cover\",\n});\n\nexport interface BackgroundVideoProps\n\textends useRender.ComponentProps<\"video\">,\n\t\tOmit<\n\t\t\tReact.VideoHTMLAttributes<HTMLVideoElement>,\n\t\t\t\"children\" | \"render\" | \"src\"\n\t\t> {\n\t/**\n\t * URL for the video source\n\t */\n\tsrc: string;\n\t/**\n\t * Video MIME type (default: auto-detected from src)\n\t */\n\ttype?: string;\n\t/**\n\t * Poster image URL shown before video loads\n\t */\n\tposter?: string;\n}\n\n/**\n * Background video layer using HTML5 video element.\n * Supports render prop for element composition.\n */\nfunction BackgroundVideo(props: BackgroundVideoProps) {\n\tconst {\n\t\tclassName,\n\t\tsrc,\n\t\ttype,\n\t\tposter,\n\t\tautoPlay = true,\n\t\tloop = true,\n\t\tmuted = true,\n\t\tplaysInline = true,\n\t\trender,\n\t\tchildren,\n\t\t...otherProps\n\t} = props;\n\n\tconst videoClassName = backgroundVideoVariants({ class: className });\n\n\t// useRender must be called unconditionally\n\tconst rendered = useRender({\n\t\trender,\n\t\tprops: {\n\t\t\tautoPlay,\n\t\t\tloop,\n\t\t\tmuted,\n\t\t\tplaysInline,\n\t\t\tposter,\n\t\t\tclassName: videoClassName,\n\t\t\t...otherProps,\n\t\t},\n\t\tdefaultTagName: \"video\",\n\t});\n\n\t// If no render prop, return video with source child\n\tif (!render) {\n\t\treturn (\n\t\t\t<video\n\t\t\t\tautoPlay={autoPlay}\n\t\t\t\tloop={loop}\n\t\t\t\tmuted={muted}\n\t\t\t\tplaysInline={playsInline}\n\t\t\t\tposter={poster}\n\t\t\t\tclassName={videoClassName}\n\t\t\t\t{...otherProps}\n\t\t\t>\n\t\t\t\t<source src={src} type={type} />\n\t\t\t</video>\n\t\t);\n\t}\n\n\treturn rendered;\n}\nBackgroundVideo.displayName = \"Background.Video\";\n\n// =============================================================================\n// Background.Stream\n// =============================================================================\n\nconst backgroundStreamVariants = tv({\n\tbase: \"absolute inset-0 size-full border-0 scale-[1.5] object-cover\",\n});\n\nexport interface BackgroundStreamProps\n\textends React.IframeHTMLAttributes<HTMLIFrameElement> {\n\t/**\n\t * Cloudflare Stream video ID\n\t */\n\tvideoId: string;\n\t/**\n\t * Poster image URL (Cloudflare Stream thumbnail or custom)\n\t */\n\tposter?: string;\n\t/**\n\t * Whether the video should autoplay (default: true)\n\t */\n\tautoplay?: boolean;\n\t/**\n\t * Whether the video should loop (default: true)\n\t */\n\tloop?: boolean;\n\t/**\n\t * Whether the video should be muted (default: true)\n\t */\n\tmuted?: boolean;\n\t/**\n\t * Whether to show playback controls (default: false)\n\t */\n\tcontrols?: boolean;\n\t/**\n\t * Custom Cloudflare customer subdomain (if using custom domains)\n\t */\n\tcustomerSubdomain?: string;\n}\n\n/**\n * Background video layer using Cloudflare Stream.\n */\nconst BackgroundStream = React.forwardRef<\n\tHTMLIFrameElement,\n\tBackgroundStreamProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tvideoId,\n\t\t\tposter,\n\t\t\tautoplay = true,\n\t\t\tloop = true,\n\t\t\tmuted = true,\n\t\t\tcontrols = false,\n\t\t\tcustomerSubdomain,\n\t\t\ttitle = \"Background video\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst baseUrl = customerSubdomain\n\t\t\t? `https://${customerSubdomain}.cloudflarestream.com`\n\t\t\t: \"https://iframe.videodelivery.net\";\n\n\t\tconst params = new URLSearchParams();\n\t\tif (autoplay) params.set(\"autoplay\", \"true\");\n\t\tif (loop) params.set(\"loop\", \"true\");\n\t\tif (muted) params.set(\"muted\", \"true\");\n\t\tif (!controls) params.set(\"controls\", \"false\");\n\t\tif (poster) params.set(\"poster\", poster);\n\t\tparams.set(\"preload\", \"auto\");\n\n\t\tconst streamUrl = `${baseUrl}/${videoId}?${params.toString()}`;\n\n\t\treturn (\n\t\t\t<iframe\n\t\t\t\tref={ref}\n\t\t\t\tsrc={streamUrl}\n\t\t\t\ttitle={title}\n\t\t\t\tallow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n\t\t\t\tallowFullScreen\n\t\t\t\tclassName={backgroundStreamVariants({ class: className })}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nBackgroundStream.displayName = \"Background.Stream\";\n\n// =============================================================================\n// Background.Overlay\n// =============================================================================\n\nconst backgroundOverlayVariants = tv({\n\tbase: \"absolute inset-0 bg-bg-overlay\",\n});\n\nexport interface BackgroundOverlayProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Overlay opacity (0-1)\n\t */\n\topacity?: number;\n}\n\n/**\n * Solid color overlay layer. Uses semantic bg-overlay token by default.\n * Override with className for different colors.\n */\nconst BackgroundOverlay = React.forwardRef<\n\tHTMLDivElement,\n\tBackgroundOverlayProps\n>(({ className, opacity = 0.4, style, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\taria-hidden=\"true\"\n\t\tclassName={backgroundOverlayVariants({ class: className })}\n\t\tstyle={{\n\t\t\topacity,\n\t\t\t...style,\n\t\t}}\n\t\t{...props}\n\t/>\n));\nBackgroundOverlay.displayName = \"Background.Overlay\";\n\n// =============================================================================\n// Background.Gradient\n// =============================================================================\n\nconst backgroundGradientVariants = tv({\n\tbase: \"absolute inset-0\",\n});\n\nexport interface BackgroundGradientProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Gradient direction (Tailwind convention: to-t, to-b, to-l, to-r, etc.)\n\t * Or CSS gradient direction (to top, to bottom, 45deg, etc.)\n\t */\n\tdirection?: string;\n\t/**\n\t * Starting color (from)\n\t */\n\tfrom?: string;\n\t/**\n\t * Optional middle color (via)\n\t */\n\tvia?: string;\n\t/**\n\t * Ending color (to)\n\t */\n\tto?: string;\n\t/**\n\t * Full custom gradient string (overrides from/via/to)\n\t */\n\tgradient?: string;\n}\n\n/**\n * Gradient overlay layer. Use for fading backgrounds or creating depth.\n */\nconst BackgroundGradient = React.forwardRef<\n\tHTMLDivElement,\n\tBackgroundGradientProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tdirection = \"to-b\",\n\t\t\tfrom = \"transparent\",\n\t\t\tvia,\n\t\t\tto = \"black\",\n\t\t\tgradient,\n\t\t\tstyle,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\t// Convert Tailwind-style direction to CSS\n\t\tconst cssDirection = direction.startsWith(\"to-\")\n\t\t\t? direction.replace(\"to-\", \"to \")\n\t\t\t: direction;\n\n\t\tconst gradientValue =\n\t\t\tgradient ||\n\t\t\t(via\n\t\t\t\t? `linear-gradient(${cssDirection}, ${from}, ${via}, ${to})`\n\t\t\t\t: `linear-gradient(${cssDirection}, ${from}, ${to})`);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName={backgroundGradientVariants({ class: className })}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundImage: gradientValue,\n\t\t\t\t\t...style,\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nBackgroundGradient.displayName = \"Background.Gradient\";\n\n// =============================================================================\n// Compound Export\n// =============================================================================\n\nconst BackgroundCompound = Object.assign(Background, {\n\tImage: BackgroundImage,\n\tVideo: BackgroundVideo,\n\tStream: BackgroundStream,\n\tOverlay: BackgroundOverlay,\n\tGradient: BackgroundGradient,\n});\n\nexport {\n\tBackgroundCompound as Background,\n\tBackgroundImage,\n\tBackgroundVideo,\n\tBackgroundStream,\n\tBackgroundOverlay,\n\tBackgroundGradient,\n\tbackgroundVariants,\n\tbackgroundImageVariants,\n\tbackgroundVideoVariants,\n\tbackgroundStreamVariants,\n\tbackgroundOverlayVariants,\n\tbackgroundGradientVariants,\n};\n"],"names":["backgroundVariants","tv","Background","React","className","children","props","ref","jsx","backgroundImageVariants","BackgroundImage","src","position","alt","style","render","otherProps","imgClassName","imgStyle","useRender","backgroundVideoVariants","BackgroundVideo","type","poster","autoPlay","loop","muted","playsInline","videoClassName","rendered","backgroundStreamVariants","BackgroundStream","videoId","autoplay","controls","customerSubdomain","title","baseUrl","params","streamUrl","backgroundOverlayVariants","BackgroundOverlay","opacity","backgroundGradientVariants","BackgroundGradient","direction","from","via","to","gradient","cssDirection","gradientValue","BackgroundCompound"],"mappings":"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"}

package/dist/components/atoms/button/button.d.ts

@@ -1,148 +0,0 @@
-import { ButtonProps as BaseButtonProps } from '@base-ui-components/react/button';
-import { VariantProps } from 'tailwind-variants';
-import { ButtonTheme } from '../../../lib/theme';
-import * as React from "react";
-/**
- * Button component based on Figma Button component
- *
- * Variants (matches Figma):
- * - primary: Blue filled button for primary actions
- * - default: Dark filled button for secondary prominence
- * - secondary: Light gray filled button with subtle border
- * - destructive: Red filled button for destructive actions
- * - outline: Bordered button with transparent background
- * - ghost: Transparent button with subtle hover
- * - link: Text-only button with underline on hover
- *
- * Sizes (matches Figma):
- * - sm: Small buttons (32px height)
- * - default: Default buttons (36px height)
- * - lg: Large buttons (40px height)
- *
- * For icon-only buttons, use the IconButton component instead.
- *
- * Theme Support:
- * Pass a `theme` prop to override default colors via CSS custom properties.
- */
-declare const buttonVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
-        primary: string;
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        themed: string;
-    };
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50", import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        primary: string;
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        themed: string;
-    };
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        primary: string;
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        themed: string;
-    };
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}>, {
-    variant: {
-        primary: string;
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        themed: string;
-    };
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
-        primary: string;
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        themed: string;
-    };
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, undefined, "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50", import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        primary: string;
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        themed: string;
-    };
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        primary: string;
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
-        themed: string;
-    };
-    size: {
-        sm: string;
-        default: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
-export type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
-export type ButtonProps = BaseButtonProps & VariantProps<typeof buttonVariants> & HTMLButtonProps & {
-    /**
-     * Theme overrides for button styling via CSS custom properties
-     */
-    theme?: ButtonTheme;
-};
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { Button, buttonVariants };

package/dist/components/atoms/button/button.figma.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/atoms/button/button.js

@@ -1,68 +0,0 @@
-import { jsx as h } from "react/jsx-runtime";
-import * as m from "react";
-import { tv as f } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
-import { buttonThemeToStyleVars as x } from "../../../lib/theme.js";
-import { Button as y } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/button/Button.js";
-const k = f({
-  base: "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50",
-  variants: {
-    variant: {
-      // Primary - blue filled button
-      primary: "bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover active:bg-button-primary-bg-active border-transparent",
-      // Default - dark filled button
-      default: "bg-button-default-bg text-button-default-text hover:bg-button-default-bg-hover active:bg-button-default-bg-active border-transparent",
-      // Secondary - light gray filled with subtle border
-      secondary: "bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover active:bg-button-secondary-bg-active border border-button-secondary-border",
-      // Destructive - red filled button
-      destructive: "bg-button-destructive-bg text-button-destructive-text hover:bg-button-destructive-bg-hover active:bg-button-destructive-bg-active border-transparent",
-      // Outline - bordered with transparent background
-      outline: "bg-button-outline-bg text-button-outline-text hover:bg-button-outline-bg-hover active:bg-button-outline-bg-active border border-button-outline-border hover:border-button-outline-border-hover",
-      // Ghost - transparent with subtle hover
-      ghost: "bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover active:bg-button-ghost-bg-active border-transparent",
-      // Link - text only with underline on hover
-      link: "bg-transparent text-button-link-text hover:text-button-link-text-hover hover:underline active:text-button-link-text-hover border-transparent underline-offset-4",
-      // Themed - uses CSS custom properties for styling
-      themed: "[background:var(--btn-bg)] [color:var(--btn-text)] [border-color:var(--btn-border-color,transparent)] hover:[background:var(--btn-bg-hover,var(--btn-bg))] active:[background:var(--btn-bg-active,var(--btn-bg-hover,var(--btn-bg)))]"
-    },
-    size: {
-      sm: "typography-ui-text-xs h-spatial-ui-button-height-small px-spatial-ui-button-padding-x-small py-spatial-ui-button-padding-y-small rounded-surface-button-small",
-      default: "typography-ui-text-sm h-spatial-ui-button-height-medium px-spatial-ui-button-padding-x-medium py-spatial-ui-button-padding-y-medium rounded-surface-button-medium",
-      lg: "typography-ui-text-md h-spatial-ui-button-height-large px-spatial-ui-button-padding-x-large py-spatial-ui-button-padding-y-large rounded-surface-button-large"
-    }
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "default"
-  }
-});
-function B(t) {
-  return t ? Object.values(t).some((e) => e != null) : !1;
-}
-const V = m.forwardRef(
-  ({ className: t, variant: e, size: o, render: r, nativeButton: u, theme: a, style: n, ...s }, d) => {
-    const g = u ?? r === void 0, i = B(a), b = i ? "themed" : e, l = x(a), v = i ? { ...l, ...n } : n, c = b ?? "default", p = o ?? "default";
-    return /* @__PURE__ */ h(
-      y,
-      {
-        className: k({
-          variant: b,
-          size: o,
-          class: t
-        }),
-        ref: d,
-        render: r,
-        nativeButton: g,
-        style: v,
-        "data-variant": c,
-        "data-size": p,
-        ...s
-      }
-    );
-  }
-);
-V.displayName = "Button";
-export {
-  V as Button,
-  k as buttonVariants
-};
-//# sourceMappingURL=button.js.map

package/dist/components/atoms/button/button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/atoms/button/button.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n\tButton as BaseButton,\n\ttype ButtonProps as BaseButtonProps,\n} from \"@base-ui-components/react/button\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { type ButtonTheme, buttonThemeToStyleVars } from \"../../../lib/theme\";\n\n/**\n * Button component based on Figma Button component\n *\n * Variants (matches Figma):\n * - primary: Blue filled button for primary actions\n * - default: Dark filled button for secondary prominence\n * - secondary: Light gray filled button with subtle border\n * - destructive: Red filled button for destructive actions\n * - outline: Bordered button with transparent background\n * - ghost: Transparent button with subtle hover\n * - link: Text-only button with underline on hover\n *\n * Sizes (matches Figma):\n * - sm: Small buttons (32px height)\n * - default: Default buttons (36px height)\n * - lg: Large buttons (40px height)\n *\n * For icon-only buttons, use the IconButton component instead.\n *\n * Theme Support:\n * Pass a `theme` prop to override default colors via CSS custom properties.\n */\nconst buttonVariants = tv({\n\tbase: \"inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50\",\n\tvariants: {\n\t\tvariant: {\n\t\t\t// Primary - blue filled button\n\t\t\tprimary:\n\t\t\t\t\"bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover active:bg-button-primary-bg-active border-transparent\",\n\t\t\t// Default - dark filled button\n\t\t\tdefault:\n\t\t\t\t\"bg-button-default-bg text-button-default-text hover:bg-button-default-bg-hover active:bg-button-default-bg-active border-transparent\",\n\t\t\t// Secondary - light gray filled with subtle border\n\t\t\tsecondary:\n\t\t\t\t\"bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover active:bg-button-secondary-bg-active border border-button-secondary-border\",\n\t\t\t// Destructive - red filled button\n\t\t\tdestructive:\n\t\t\t\t\"bg-button-destructive-bg text-button-destructive-text hover:bg-button-destructive-bg-hover active:bg-button-destructive-bg-active border-transparent\",\n\t\t\t// Outline - bordered with transparent background\n\t\t\toutline:\n\t\t\t\t\"bg-button-outline-bg text-button-outline-text hover:bg-button-outline-bg-hover active:bg-button-outline-bg-active border border-button-outline-border hover:border-button-outline-border-hover\",\n\t\t\t// Ghost - transparent with subtle hover\n\t\t\tghost:\n\t\t\t\t\"bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover active:bg-button-ghost-bg-active border-transparent\",\n\t\t\t// Link - text only with underline on hover\n\t\t\tlink: \"bg-transparent text-button-link-text hover:text-button-link-text-hover hover:underline active:text-button-link-text-hover border-transparent underline-offset-4\",\n\t\t\t// Themed - uses CSS custom properties for styling\n\t\t\tthemed:\n\t\t\t\t\"[background:var(--btn-bg)] [color:var(--btn-text)] [border-color:var(--btn-border-color,transparent)] hover:[background:var(--btn-bg-hover,var(--btn-bg))] active:[background:var(--btn-bg-active,var(--btn-bg-hover,var(--btn-bg)))]\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"typography-ui-text-xs h-spatial-ui-button-height-small px-spatial-ui-button-padding-x-small py-spatial-ui-button-padding-y-small rounded-surface-button-small\",\n\t\t\tdefault:\n\t\t\t\t\"typography-ui-text-sm h-spatial-ui-button-height-medium px-spatial-ui-button-padding-x-medium py-spatial-ui-button-padding-y-medium rounded-surface-button-medium\",\n\t\t\tlg: \"typography-ui-text-md h-spatial-ui-button-height-large px-spatial-ui-button-padding-x-large py-spatial-ui-button-padding-y-large rounded-surface-button-large\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t\tsize: \"default\",\n\t},\n});\n\nexport type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\nexport type ButtonProps = BaseButtonProps &\n\tVariantProps<typeof buttonVariants> &\n\tHTMLButtonProps & {\n\t\t/**\n\t\t * Theme overrides for button styling via CSS custom properties\n\t\t */\n\t\ttheme?: ButtonTheme;\n\t};\n\n/**\n * Check if a ButtonTheme has any actual values set\n */\nfunction hasThemeValues(theme: ButtonTheme | undefined): boolean {\n\tif (!theme) return false;\n\treturn Object.values(theme).some((v) => v !== undefined && v !== null);\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{ className, variant, size, render, nativeButton, theme, style, ...props },\n\t\tref,\n\t) => {\n\t\t// When render prop is provided, default nativeButton to false to suppress warnings\n\t\tconst isNativeButton = nativeButton ?? render === undefined;\n\n\t\t// If theme has actual values, use \"themed\" variant to enable CSS custom property styling\n\t\tconst hasTheme = hasThemeValues(theme);\n\t\tconst effectiveVariant = hasTheme ? \"themed\" : variant;\n\t\tconst themeStyles = buttonThemeToStyleVars(theme);\n\t\tconst combinedStyles = hasTheme ? { ...themeStyles, ...style } : style;\n\n\t\t// Resolve actual values for data attributes\n\t\tconst resolvedVariant = effectiveVariant ?? \"default\";\n\t\tconst resolvedSize = size ?? \"default\";\n\n\t\treturn (\n\t\t\t<BaseButton\n\t\t\t\tclassName={buttonVariants({\n\t\t\t\t\tvariant: effectiveVariant,\n\t\t\t\t\tsize,\n\t\t\t\t\tclass: className,\n\t\t\t\t})}\n\t\t\t\tref={ref}\n\t\t\t\trender={render}\n\t\t\t\tnativeButton={isNativeButton}\n\t\t\t\tstyle={combinedStyles}\n\t\t\t\tdata-variant={resolvedVariant}\n\t\t\t\tdata-size={resolvedSize}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n"],"names":["buttonVariants","tv","hasThemeValues","theme","v","Button","React","className","variant","size","render","nativeButton","style","props","ref","isNativeButton","hasTheme","effectiveVariant","themeStyles","buttonThemeToStyleVars","combinedStyles","resolvedVariant","resolvedSize","jsx","BaseButton"],"mappings":";;;;;AAgCA,MAAMA,IAAiBC,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACT,SAAS;AAAA;AAAA,MAER,SACC;AAAA;AAAA,MAED,SACC;AAAA;AAAA,MAED,WACC;AAAA;AAAA,MAED,aACC;AAAA;AAAA,MAED,SACC;AAAA;AAAA,MAED,OACC;AAAA;AAAA,MAED,MAAM;AAAA;AAAA,MAEN,QACC;AAAA,IAAA;AAAA,IAEF,MAAM;AAAA,MACL,IAAI;AAAA,MACJ,SACC;AAAA,MACD,IAAI;AAAA,IAAA;AAAA,EACL;AAAA,EAED,iBAAiB;AAAA,IAChB,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAER,CAAC;AAeD,SAASC,EAAeC,GAAyC;AAChE,SAAKA,IACE,OAAO,OAAOA,CAAK,EAAE,KAAK,CAACC,MAAyBA,KAAM,IAAI,IADlD;AAEpB;AAEA,MAAMC,IAASC,EAAM;AAAA,EACpB,CACC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,cAAAC,GAAc,OAAAR,GAAO,OAAAS,GAAO,GAAGC,EAAA,GACnEC,MACI;AAEJ,UAAMC,IAAiBJ,KAAgBD,MAAW,QAG5CM,IAAWd,EAAeC,CAAK,GAC/Bc,IAAmBD,IAAW,WAAWR,GACzCU,IAAcC,EAAuBhB,CAAK,GAC1CiB,IAAiBJ,IAAW,EAAE,GAAGE,GAAa,GAAGN,MAAUA,GAG3DS,IAAkBJ,KAAoB,WACtCK,IAAeb,KAAQ;AAE7B,WACC,gBAAAc;AAAA,MAACC;AAAAA,MAAA;AAAA,QACA,WAAWxB,EAAe;AAAA,UACzB,SAASiB;AAAA,UACT,MAAAR;AAAA,UACA,OAAOF;AAAA,QAAA,CACP;AAAA,QACD,KAAAO;AAAA,QACA,QAAAJ;AAAA,QACA,cAAcK;AAAA,QACd,OAAOK;AAAA,QACP,gBAAcC;AAAA,QACd,aAAWC;AAAA,QACV,GAAGT;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACD;AACAR,EAAO,cAAc;"}

package/dist/components/atoms/button/icon-button.d.ts

@@ -1,172 +0,0 @@
-import { useRender } from '@base-ui-components/react/use-render';
-import { VariantProps } from 'tailwind-variants';
-/**
- * IconButton component based on Figma Button component (icon-only variant)
- *
- * **IMPORTANT: Accessibility Requirement**
- * Icon-only buttons MUST have an accessible label. Provide one of:
- * - `aria-label`: A text description of the button's action (recommended)
- * - `aria-labelledby`: Reference to an element containing the label
- * - `title`: Tooltip text (less preferred, but provides a label)
- *
- * @example
- * ```tsx
- * // Correct usage with aria-label
- * <IconButton aria-label="Close menu">
- *   <CloseIcon />
- * </IconButton>
- * ```
- *
- * Variants (matches Figma):
- * - primary: Filled brand button (indigo background)
- * - primary-outline: Outlined brand button (indigo border/text)
- * - secondary: Filled neutral button (white background, for dark backgrounds)
- * - secondary-outline: Outlined neutral button (white border/text, for dark backgrounds)
- * - ghost: Transparent button with subtle hover (for light backgrounds)
- * - ghost-inverse: Transparent button with subtle hover (for dark backgrounds)
- *
- * Sizes:
- * - sm: Small (28x28)
- * - md: Medium (40x40) - default
- * - lg: Large (56x56)
- *
- * Rounded:
- * - default: Standard border radius (matches size)
- * - full: Fully circular
- */
-declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
-        primary: string;
-        "primary-outline": string;
-        secondary: string;
-        "secondary-outline": string;
-        ghost: string;
-        "ghost-inverse": string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    rounded: {
-        default: string;
-        full: string;
-    };
-}, undefined, "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        primary: string;
-        "primary-outline": string;
-        secondary: string;
-        "secondary-outline": string;
-        ghost: string;
-        "ghost-inverse": string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    rounded: {
-        default: string;
-        full: string;
-    };
-}, {
-    variant: {
-        primary: string;
-        "primary-outline": string;
-        secondary: string;
-        "secondary-outline": string;
-        ghost: string;
-        "ghost-inverse": string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    rounded: {
-        default: string;
-        full: string;
-    };
-}>, {
-    variant: {
-        primary: string;
-        "primary-outline": string;
-        secondary: string;
-        "secondary-outline": string;
-        ghost: string;
-        "ghost-inverse": string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    rounded: {
-        default: string;
-        full: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
-        primary: string;
-        "primary-outline": string;
-        secondary: string;
-        "secondary-outline": string;
-        ghost: string;
-        "ghost-inverse": string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    rounded: {
-        default: string;
-        full: string;
-    };
-}, undefined, "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        primary: string;
-        "primary-outline": string;
-        secondary: string;
-        "secondary-outline": string;
-        ghost: string;
-        "ghost-inverse": string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    rounded: {
-        default: string;
-        full: string;
-    };
-}, {
-    variant: {
-        primary: string;
-        "primary-outline": string;
-        secondary: string;
-        "secondary-outline": string;
-        ghost: string;
-        "ghost-inverse": string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    rounded: {
-        default: string;
-        full: string;
-    };
-}>, unknown, unknown, undefined>>;
-interface IconButtonState extends Record<string, unknown> {
-    variant: "primary" | "primary-outline" | "secondary" | "secondary-outline" | "ghost" | "ghost-inverse";
-    size: "sm" | "md" | "lg";
-    rounded: "default" | "full";
-}
-export interface IconButtonProps extends useRender.ComponentProps<"button", IconButtonState>, VariantProps<typeof iconButtonVariants> {
-}
-declare function IconButton(props: IconButtonProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
-export { IconButton, iconButtonVariants };