@nationaldesignstudio/react 0.6.1 → 0.7.0

package/dist/accordion/index.d.ts

@@ -0,0 +1,95 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React from 'react';
+
+declare const accordionVariants: tailwind_variants.TVReturnType<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}, undefined, "flex flex-col", tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}>, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}, undefined, "flex flex-col", tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}, {
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface AccordionProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof accordionVariants> {
+    /**
+     * Allow multiple items to be expanded at once
+     * @default false
+     */
+    allowMultiple?: boolean;
+    /**
+     * The ID(s) of items that should be expanded by default
+     */
+    defaultExpanded?: string | string[];
+    children: React.ReactNode;
+}
+/**
+ * Accordion component for expandable/collapsible content sections.
+ * Built on Base UI's Accordion primitive.
+ *
+ * Variants:
+ * - light: Light theme styling (default)
+ * - dark: Dark theme styling
+ *
+ * @example
+ * ```tsx
+ * <Accordion defaultExpanded="item-1" variant="dark">
+ *   <AccordionItem id="item-1" title="Question 1">
+ *     Answer to question 1
+ *   </AccordionItem>
+ *   <AccordionItem id="item-2" title="Question 2">
+ *     Answer to question 2
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Unique identifier for this item
+     */
+    id: string;
+    /**
+     * The question/title displayed in the header
+     */
+    title: string;
+    /**
+     * The answer/content revealed when expanded
+     */
+    children: React.ReactNode;
+}
+/**
+ * Individual accordion item with collapsible content.
+ * Must be used within an Accordion component.
+ */
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps };

package/dist/accordion/index.js

@@ -0,0 +1,143 @@
+"use client";
+import { Accordion as Accordion$1 } from '@base-ui-components/react/accordion';
+import * as React from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/atoms/accordion/accordion.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var accordionVariants = tv({
+  base: "flex flex-col",
+  variants: {
+    colorScheme: {
+      dark: "",
+      light: ""
+    }
+  },
+  defaultVariants: {
+    colorScheme: "light"
+  }
+});
+var accordionItemVariants = tv({
+  base: "border-b overflow-hidden",
+  variants: {
+    colorScheme: {
+      dark: "border-gray-300",
+      light: "border-gray-500"
+    }
+  },
+  defaultVariants: {
+    colorScheme: "light"
+  }
+});
+var accordionTriggerVariants = tv({
+  base: [
+    // Uses primitive spacing tokens
+    "flex w-full items-center justify-between py-24 text-left",
+    "typography-body-large transition-colors cursor-pointer"
+  ],
+  variants: {
+    colorScheme: {
+      dark: "text-gray-100 data-[open]:text-white",
+      light: "text-gray-800 data-[open]:text-gray-900"
+    }
+  },
+  defaultVariants: {
+    colorScheme: "light"
+  }
+});
+var accordionPanelVariants = tv({
+  // Uses primitive spacing tokens
+  base: "typography-body-large pb-24",
+  variants: {
+    colorScheme: {
+      dark: "text-gray-100",
+      light: "text-gray-800"
+    }
+  },
+  defaultVariants: {
+    colorScheme: "light"
+  }
+});
+var AccordionContext = React.createContext({
+  colorScheme: "light"
+});
+var Accordion = React.forwardRef(
+  ({
+    className,
+    allowMultiple = false,
+    defaultExpanded,
+    colorScheme = "light",
+    children
+  }, ref) => {
+    const defaultValue = React.useMemo(() => {
+      if (!defaultExpanded) return void 0;
+      if (Array.isArray(defaultExpanded)) return defaultExpanded;
+      return [defaultExpanded];
+    }, [defaultExpanded]);
+    return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { colorScheme }, children: /* @__PURE__ */ jsx(
+      Accordion$1.Root,
+      {
+        ref,
+        className: accordionVariants({ colorScheme, class: className }),
+        defaultValue,
+        multiple: allowMultiple,
+        children
+      }
+    ) });
+  }
+);
+Accordion.displayName = "Accordion";
+var AccordionItem = React.forwardRef(
+  ({ className, id, title, children }, ref) => {
+    const { colorScheme } = React.useContext(AccordionContext);
+    return /* @__PURE__ */ jsxs(
+      Accordion$1.Item,
+      {
+        ref,
+        value: id,
+        className: accordionItemVariants({ colorScheme, class: className }),
+        children: [
+          /* @__PURE__ */ jsx(Accordion$1.Header, { children: /* @__PURE__ */ jsxs(
+            Accordion$1.Trigger,
+            {
+              className: accordionTriggerVariants({ colorScheme }),
+              children: [
+                /* @__PURE__ */ jsx("span", { children: title }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-base transition-transform duration-200",
+                      "[[data-open]_&]:rotate-45"
+                    ),
+                    children: "+"
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Accordion$1.Panel,
+            {
+              className: cn(
+                "h-[var(--accordion-panel-height)] overflow-hidden",
+                "transition-[height] duration-300 ease-out",
+                "[&[data-starting-style]]:h-0 [&[data-ending-style]]:h-0"
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: accordionPanelVariants({ colorScheme }), children })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+
+export { Accordion, AccordionItem };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/atoms/accordion/accordion.tsx"],"names":["twMerge","BaseAccordion"],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnBase as twMerge } from \"tailwind-variants\";\n\nexport { twMerge };\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Accordion as BaseAccordion } from \"@base-ui-components/react/accordion\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n// =============================================================================\n// Accordion Variants\n// =============================================================================\n\nconst accordionVariants = tv({\n\tbase: \"flex flex-col\",\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tdark: \"\",\n\t\t\tlight: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"light\",\n\t},\n});\n\nconst accordionItemVariants = tv({\n\tbase: \"border-b overflow-hidden\",\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tdark: \"border-gray-300\",\n\t\t\tlight: \"border-gray-500\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"light\",\n\t},\n});\n\nconst accordionTriggerVariants = tv({\n\tbase: [\n\t\t// Uses primitive spacing tokens\n\t\t\"flex w-full items-center justify-between py-24 text-left\",\n\t\t\"typography-body-large transition-colors cursor-pointer\",\n\t],\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tdark: \"text-gray-100 data-[open]:text-white\",\n\t\t\tlight: \"text-gray-800 data-[open]:text-gray-900\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"light\",\n\t},\n});\n\nconst accordionPanelVariants = tv({\n\t// Uses primitive spacing tokens\n\tbase: \"typography-body-large pb-24\",\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tdark: \"text-gray-100\",\n\t\t\tlight: \"text-gray-800\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"light\",\n\t},\n});\n\n// =============================================================================\n// Accordion Context\n// =============================================================================\n\nconst AccordionContext = React.createContext<{\n\tcolorScheme: \"dark\" | \"light\";\n}>({\n\tcolorScheme: \"light\",\n});\n\n// =============================================================================\n// Accordion\n// =============================================================================\n\nexport interface AccordionProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof accordionVariants> {\n\t/**\n\t * Allow multiple items to be expanded at once\n\t * @default false\n\t */\n\tallowMultiple?: boolean;\n\t/**\n\t * The ID(s) of items that should be expanded by default\n\t */\n\tdefaultExpanded?: string | string[];\n\tchildren: React.ReactNode;\n}\n\n/**\n * Accordion component for expandable/collapsible content sections.\n * Built on Base UI's Accordion primitive.\n *\n * Variants:\n * - light: Light theme styling (default)\n * - dark: Dark theme styling\n *\n * @example\n * ```tsx\n * <Accordion defaultExpanded=\"item-1\" variant=\"dark\">\n *   <AccordionItem id=\"item-1\" title=\"Question 1\">\n *     Answer to question 1\n *   </AccordionItem>\n *   <AccordionItem id=\"item-2\" title=\"Question 2\">\n *     Answer to question 2\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nconst Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tallowMultiple = false,\n\t\t\tdefaultExpanded,\n\t\t\tcolorScheme = \"light\",\n\t\t\tchildren,\n\t\t},\n\t\tref,\n\t) => {\n\t\t// Normalize defaultExpanded to array format for Base UI\n\t\tconst defaultValue = React.useMemo((): string[] | undefined => {\n\t\t\tif (!defaultExpanded) return undefined;\n\t\t\tif (Array.isArray(defaultExpanded)) return defaultExpanded;\n\t\t\treturn [defaultExpanded];\n\t\t}, [defaultExpanded]);\n\n\t\treturn (\n\t\t\t<AccordionContext.Provider value={{ colorScheme }}>\n\t\t\t\t<BaseAccordion.Root\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={accordionVariants({ colorScheme, class: className })}\n\t\t\t\t\tdefaultValue={defaultValue}\n\t\t\t\t\tmultiple={allowMultiple}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</BaseAccordion.Root>\n\t\t\t</AccordionContext.Provider>\n\t\t);\n\t},\n);\nAccordion.displayName = \"Accordion\";\n\n// =============================================================================\n// AccordionItem\n// =============================================================================\n\nexport interface AccordionItemProps\n\textends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n\t/**\n\t * Unique identifier for this item\n\t */\n\tid: string;\n\t/**\n\t * The question/title displayed in the header\n\t */\n\ttitle: string;\n\t/**\n\t * The answer/content revealed when expanded\n\t */\n\tchildren: React.ReactNode;\n}\n\n/**\n * Individual accordion item with collapsible content.\n * Must be used within an Accordion component.\n */\nconst AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(\n\t({ className, id, title, children }, ref) => {\n\t\tconst { colorScheme } = React.useContext(AccordionContext);\n\n\t\treturn (\n\t\t\t<BaseAccordion.Item\n\t\t\t\tref={ref}\n\t\t\t\tvalue={id}\n\t\t\t\tclassName={accordionItemVariants({ colorScheme, class: className })}\n\t\t\t>\n\t\t\t\t{/* Header - always visible */}\n\t\t\t\t<BaseAccordion.Header>\n\t\t\t\t\t<BaseAccordion.Trigger\n\t\t\t\t\t\tclassName={accordionTriggerVariants({ colorScheme })}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>{title}</span>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"text-base transition-transform duration-200\",\n\t\t\t\t\t\t\t\t\"[[data-open]_&]:rotate-45\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</BaseAccordion.Trigger>\n\t\t\t\t</BaseAccordion.Header>\n\n\t\t\t\t{/* Content - collapsible */}\n\t\t\t\t<BaseAccordion.Panel\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"h-[var(--accordion-panel-height)] overflow-hidden\",\n\t\t\t\t\t\t\"transition-[height] duration-300 ease-out\",\n\t\t\t\t\t\t\"[&[data-starting-style]]:h-0 [&[data-ending-style]]:h-0\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<div className={accordionPanelVariants({ colorScheme })}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</BaseAccordion.Panel>\n\t\t\t</BaseAccordion.Item>\n\t\t);\n\t},\n);\nAccordionItem.displayName = \"AccordionItem\";\n\nexport { Accordion, AccordionItem, accordionVariants };\n"]}

package/dist/background/index.d.ts

@@ -0,0 +1,149 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import { useRender } from '@base-ui-components/react/use-render';
+import * as React from 'react';
+
+declare const backgroundVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Base container for background composition.
+ * Use as a wrapper to compose multiple background layers (image, video, overlay, gradient).
+ *
+ * @example
+ * ```tsx
+ * <Background>
+ *   <Background.Image src="/hero.jpg" />
+ *   <Background.Overlay opacity={0.4} />
+ *   <Background.Gradient direction="to-t" from="black" to="transparent" />
+ * </Background>
+ * ```
+ */
+interface BackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const backgroundImageVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0 size-full object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface BackgroundImageProps extends useRender.ComponentProps<"img">, Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "render"> {
+    /**
+     * URL for the background image
+     */
+    src: string;
+    /**
+     * Object position (default: "center")
+     */
+    position?: string;
+}
+/**
+ * Background image layer using an actual img element with object-cover.
+ * Supports native lazy loading, srcset, and better accessibility.
+ * Supports render prop for element composition.
+ */
+declare function BackgroundImage(props: BackgroundImageProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare namespace BackgroundImage {
+    var displayName: string;
+}
+declare const backgroundVideoVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0 size-full object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface BackgroundVideoProps extends useRender.ComponentProps<"video">, Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "render" | "src"> {
+    /**
+     * URL for the video source
+     */
+    src: string;
+    /**
+     * Video MIME type (default: auto-detected from src)
+     */
+    type?: string;
+    /**
+     * Poster image URL shown before video loads
+     */
+    poster?: string;
+}
+/**
+ * Background video layer using HTML5 video element.
+ * Supports render prop for element composition.
+ */
+declare function BackgroundVideo(props: BackgroundVideoProps): react_jsx_runtime.JSX.Element;
+declare namespace BackgroundVideo {
+    var displayName: string;
+}
+declare const backgroundStreamVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full border-0 scale-[1.5] object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0 size-full border-0 scale-[1.5] object-cover", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface BackgroundStreamProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
+    /**
+     * Cloudflare Stream video ID
+     */
+    videoId: string;
+    /**
+     * Poster image URL (Cloudflare Stream thumbnail or custom)
+     */
+    poster?: string;
+    /**
+     * Whether the video should autoplay (default: true)
+     */
+    autoplay?: boolean;
+    /**
+     * Whether the video should loop (default: true)
+     */
+    loop?: boolean;
+    /**
+     * Whether the video should be muted (default: true)
+     */
+    muted?: boolean;
+    /**
+     * Whether to show playback controls (default: false)
+     */
+    controls?: boolean;
+    /**
+     * Custom Cloudflare customer subdomain (if using custom domains)
+     */
+    customerSubdomain?: string;
+}
+/**
+ * Background video layer using Cloudflare Stream.
+ */
+declare const BackgroundStream: React.ForwardRefExoticComponent<BackgroundStreamProps & React.RefAttributes<HTMLIFrameElement>>;
+declare const backgroundOverlayVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0 bg-bg-overlay", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0 bg-bg-overlay", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface BackgroundOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Overlay opacity (0-1)
+     */
+    opacity?: number;
+}
+/**
+ * Solid color overlay layer. Uses semantic bg-overlay token by default.
+ * Override with className for different colors.
+ */
+declare const BackgroundOverlay: React.ForwardRefExoticComponent<BackgroundOverlayProps & React.RefAttributes<HTMLDivElement>>;
+declare const backgroundGradientVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, "absolute inset-0", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, "absolute inset-0", tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface BackgroundGradientProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Gradient direction (Tailwind convention: to-t, to-b, to-l, to-r, etc.)
+     * Or CSS gradient direction (to top, to bottom, 45deg, etc.)
+     */
+    direction?: string;
+    /**
+     * Starting color (from)
+     */
+    from?: string;
+    /**
+     * Optional middle color (via)
+     */
+    via?: string;
+    /**
+     * Ending color (to)
+     */
+    to?: string;
+    /**
+     * Full custom gradient string (overrides from/via/to)
+     */
+    gradient?: string;
+}
+/**
+ * Gradient overlay layer. Use for fading backgrounds or creating depth.
+ */
+declare const BackgroundGradient: React.ForwardRefExoticComponent<BackgroundGradientProps & React.RefAttributes<HTMLDivElement>>;
+declare const BackgroundCompound: React.ForwardRefExoticComponent<BackgroundProps & React.RefAttributes<HTMLDivElement>> & {
+    Image: typeof BackgroundImage;
+    Video: typeof BackgroundVideo;
+    Stream: React.ForwardRefExoticComponent<BackgroundStreamProps & React.RefAttributes<HTMLIFrameElement>>;
+    Overlay: React.ForwardRefExoticComponent<BackgroundOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    Gradient: React.ForwardRefExoticComponent<BackgroundGradientProps & React.RefAttributes<HTMLDivElement>>;
+};
+
+export { BackgroundCompound as Background, BackgroundGradient, type BackgroundGradientProps, BackgroundImage, type BackgroundImageProps, BackgroundOverlay, type BackgroundOverlayProps, type BackgroundProps, BackgroundStream, type BackgroundStreamProps, BackgroundVideo, type BackgroundVideoProps, backgroundGradientVariants, backgroundImageVariants, backgroundOverlayVariants, backgroundStreamVariants, backgroundVariants, backgroundVideoVariants };

package/dist/background/index.js

@@ -0,0 +1,200 @@
+"use client";
+import { useRender } from '@base-ui-components/react/use-render';
+import * as React from 'react';
+import { tv } from 'tailwind-variants';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/atoms/background/background.tsx
+var backgroundVariants = tv({
+  base: "absolute inset-0"
+});
+var Background = React.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: backgroundVariants({ class: className }),
+      ...props,
+      children
+    }
+  )
+);
+Background.displayName = "Background";
+var backgroundImageVariants = tv({
+  base: "absolute inset-0 size-full object-cover"
+});
+function BackgroundImage(props) {
+  const {
+    className,
+    src,
+    position = "center",
+    alt = "",
+    style,
+    render,
+    ...otherProps
+  } = props;
+  const imgClassName = backgroundImageVariants({ class: className });
+  const imgStyle = { objectPosition: position, ...style };
+  return useRender({
+    render,
+    props: {
+      src,
+      alt,
+      className: imgClassName,
+      style: imgStyle,
+      ...otherProps
+    },
+    defaultTagName: "img"
+  });
+}
+BackgroundImage.displayName = "Background.Image";
+var backgroundVideoVariants = tv({
+  base: "absolute inset-0 size-full object-cover"
+});
+function BackgroundVideo(props) {
+  const {
+    className,
+    src,
+    type,
+    poster,
+    autoPlay = true,
+    loop = true,
+    muted = true,
+    playsInline = true,
+    render,
+    children,
+    ...otherProps
+  } = props;
+  const videoClassName = backgroundVideoVariants({ class: className });
+  const rendered = useRender({
+    render,
+    props: {
+      autoPlay,
+      loop,
+      muted,
+      playsInline,
+      poster,
+      className: videoClassName,
+      ...otherProps
+    },
+    defaultTagName: "video"
+  });
+  if (!render) {
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        autoPlay,
+        loop,
+        muted,
+        playsInline,
+        poster,
+        className: videoClassName,
+        ...otherProps,
+        children: /* @__PURE__ */ jsx("source", { src, type })
+      }
+    );
+  }
+  return rendered;
+}
+BackgroundVideo.displayName = "Background.Video";
+var backgroundStreamVariants = tv({
+  base: "absolute inset-0 size-full border-0 scale-[1.5] object-cover"
+});
+var BackgroundStream = React.forwardRef(
+  ({
+    className,
+    videoId,
+    poster,
+    autoplay = true,
+    loop = true,
+    muted = true,
+    controls = false,
+    customerSubdomain,
+    title = "Background video",
+    ...props
+  }, ref) => {
+    const baseUrl = customerSubdomain ? `https://${customerSubdomain}.cloudflarestream.com` : "https://iframe.videodelivery.net";
+    const params = new URLSearchParams();
+    if (autoplay) params.set("autoplay", "true");
+    if (loop) params.set("loop", "true");
+    if (muted) params.set("muted", "true");
+    if (!controls) params.set("controls", "false");
+    if (poster) params.set("poster", poster);
+    params.set("preload", "auto");
+    const streamUrl = `${baseUrl}/${videoId}?${params.toString()}`;
+    return /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        ref,
+        src: streamUrl,
+        title,
+        allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+        allowFullScreen: true,
+        className: backgroundStreamVariants({ class: className }),
+        ...props
+      }
+    );
+  }
+);
+BackgroundStream.displayName = "Background.Stream";
+var backgroundOverlayVariants = tv({
+  base: "absolute inset-0 bg-bg-overlay"
+});
+var BackgroundOverlay = React.forwardRef(({ className, opacity = 0.4, style, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "aria-hidden": "true",
+    className: backgroundOverlayVariants({ class: className }),
+    style: {
+      opacity,
+      ...style
+    },
+    ...props
+  }
+));
+BackgroundOverlay.displayName = "Background.Overlay";
+var backgroundGradientVariants = tv({
+  base: "absolute inset-0"
+});
+var BackgroundGradient = React.forwardRef(
+  ({
+    className,
+    direction = "to-b",
+    from = "transparent",
+    via,
+    to = "black",
+    gradient,
+    style,
+    ...props
+  }, ref) => {
+    const cssDirection = direction.startsWith("to-") ? direction.replace("to-", "to ") : direction;
+    const gradientValue = gradient || (via ? `linear-gradient(${cssDirection}, ${from}, ${via}, ${to})` : `linear-gradient(${cssDirection}, ${from}, ${to})`);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: backgroundGradientVariants({ class: className }),
+        style: {
+          backgroundImage: gradientValue,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+BackgroundGradient.displayName = "Background.Gradient";
+var BackgroundCompound = Object.assign(Background, {
+  Image: BackgroundImage,
+  Video: BackgroundVideo,
+  Stream: BackgroundStream,
+  Overlay: BackgroundOverlay,
+  Gradient: BackgroundGradient
+});
+
+export { BackgroundCompound as Background, BackgroundGradient, BackgroundImage, BackgroundOverlay, BackgroundStream, BackgroundVideo, backgroundGradientVariants, backgroundImageVariants, backgroundOverlayVariants, backgroundStreamVariants, backgroundVariants, backgroundVideoVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/background/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/atoms/background/background.tsx"],"names":[],"mappings":"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","file":"index.js","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"]}