@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/tooltip/index.js

@@ -0,0 +1,200 @@
+"use client";
+import { Tooltip as Tooltip$1 } from '@base-ui-components/react/tooltip';
+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/tooltip/tooltip.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var floatingArrowVariants = tv({
+  base: [
+    // Display flex to properly size the arrow container
+    "flex",
+    // Positioning based on floating side (uses spacing tokens since --spacing: 1px)
+    "data-[side=bottom]:-top-7",
+    "data-[side=left]:-right-12 data-[side=left]:rotate-90",
+    "data-[side=right]:-left-12 data-[side=right]:-rotate-90",
+    "data-[side=top]:-bottom-7 data-[side=top]:rotate-180",
+    // Animation - follows popup
+    "data-[starting-style]:opacity-0",
+    "data-[ending-style]:opacity-0"
+  ]
+});
+var FloatingArrowSvg = ({
+  fillClassName,
+  borderClassName,
+  className
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "20",
+    height: "10",
+    viewBox: "0 0 20 10",
+    fill: "none",
+    className: cn("block", className),
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+          className: fillClassName
+        }
+      ),
+      borderClassName && /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+          className: borderClassName
+        }
+      )
+    ]
+  }
+);
+var tooltipPopupVariants = tv({
+  base: [
+    // Layout - uses component tooltip tokens
+    "px-spatial-component-tooltip-padding-x py-spatial-component-tooltip-padding-y",
+    // Background and text - uses tooltip color tokens
+    "bg-tooltip-bg text-tooltip-text",
+    // Border radius - uses surface tooltip token
+    "rounded-surface-tooltip",
+    // Typography - uses semantic body text composite
+    "typography-body-sm-md font-medium",
+    // Shadow for elevation
+    "shadow-md",
+    // Allow arrow to extend outside popup bounds
+    "overflow-visible",
+    // Animation
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity] duration-150",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+    "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    // Ensure it's above other content
+    "z-50"
+  ],
+  variants: {
+    variant: {
+      default: ""
+      // Future variants can be added here (e.g., light, primary)
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var tooltipArrowVariants = floatingArrowVariants;
+var TooltipProvider = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { ...props, children });
+};
+var TooltipRoot = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props, children });
+};
+var TooltipTrigger = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const isSingleElement = React.isValidElement(children);
+    if (isSingleElement) {
+      return /* @__PURE__ */ jsx(
+        Tooltip$1.Trigger,
+        {
+          ref,
+          className,
+          render: children,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { ref, className, ...props, children });
+  }
+);
+TooltipTrigger.displayName = "TooltipTrigger";
+var TooltipPortal = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { ...props, children });
+};
+var TooltipPositioner = React.forwardRef(({ className, side = "top", sideOffset = 8, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Positioner,
+    {
+      ref,
+      side,
+      sideOffset,
+      className,
+      ...props
+    }
+  );
+});
+TooltipPositioner.displayName = "TooltipPositioner";
+var TooltipPopup = React.forwardRef(
+  ({ className, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tooltip$1.Popup,
+      {
+        ref,
+        role: "tooltip",
+        className: cn(tooltipPopupVariants({ variant }), className),
+        ...props
+      }
+    );
+  }
+);
+TooltipPopup.displayName = "TooltipPopup";
+var TooltipArrow = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Tooltip$1.Arrow,
+      {
+        ref,
+        className: cn(tooltipArrowVariants(), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(FloatingArrowSvg, { fillClassName: "fill-tooltip-bg" })
+      }
+    );
+  }
+);
+TooltipArrow.displayName = "TooltipArrow";
+var Tooltip = ({
+  content,
+  children,
+  side = "top",
+  sideOffset = 8,
+  align = "center",
+  delay,
+  closeDelay,
+  showArrow = true,
+  open,
+  defaultOpen,
+  onOpenChange,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    TooltipRoot,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { delay, closeDelay, children }),
+        /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, { side, sideOffset, align, children: /* @__PURE__ */ jsxs(TooltipPopup, { className, children: [
+          showArrow && /* @__PURE__ */ jsx(TooltipArrow, {}),
+          content
+        ] }) }) })
+      ]
+    }
+  );
+};
+var TooltipParts = Object.assign(TooltipRoot, {
+  Provider: TooltipProvider,
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger,
+  Portal: TooltipPortal,
+  Positioner: TooltipPositioner,
+  Popup: TooltipPopup,
+  Arrow: TooltipArrow
+});
+
+export { Tooltip, TooltipArrow, TooltipParts, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, tooltipArrowVariants, tooltipPopupVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/shared/floating-arrow.tsx","../../src/components/atoms/tooltip/tooltip.tsx"],"names":["twMerge","tv","jsx","BaseTooltip","jsxs"],"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","import { tv } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Shared arrow variants for floating UI components\n *\n * Used by Tooltip, Popover, and other floating components.\n * Handles positioning based on the side attribute.\n */\nexport const floatingArrowVariants = tv({\n\tbase: [\n\t\t// Display flex to properly size the arrow container\n\t\t\"flex\",\n\t\t// Positioning based on floating side (uses spacing tokens since --spacing: 1px)\n\t\t\"data-[side=bottom]:-top-7\",\n\t\t\"data-[side=left]:-right-12 data-[side=left]:rotate-90\",\n\t\t\"data-[side=right]:-left-12 data-[side=right]:-rotate-90\",\n\t\t\"data-[side=top]:-bottom-7 data-[side=top]:rotate-180\",\n\t\t// Animation - follows popup\n\t\t\"data-[starting-style]:opacity-0\",\n\t\t\"data-[ending-style]:opacity-0\",\n\t],\n});\n\nexport interface FloatingArrowSvgProps {\n\t/** CSS class for the main fill color (e.g., \"fill-tooltip-bg\" or \"fill-overlay-background\") */\n\tfillClassName: string;\n\t/** CSS class for the border color using fill-* (e.g., \"fill-overlay-border\") - renders as outline behind main fill */\n\tborderClassName?: string;\n\t/** Additional className for the SVG element */\n\tclassName?: string;\n}\n\n/**\n * FloatingArrowSvg\n *\n * A shared arrow SVG component for floating UI elements.\n * Use with Tooltip, Popover, Dropdown, and other floating components.\n *\n * @example\n * ```tsx\n * // For dark tooltip (no border)\n * <FloatingArrowSvg fillClassName=\"fill-tooltip-bg\" />\n *\n * // For light popover with border\n * <FloatingArrowSvg\n *   fillClassName=\"fill-overlay-background\"\n *   borderClassName=\"fill-overlay-border\"\n * />\n * ```\n */\nexport const FloatingArrowSvg = ({\n\tfillClassName,\n\tborderClassName,\n\tclassName,\n}: FloatingArrowSvgProps) => (\n\t<svg\n\t\twidth=\"20\"\n\t\theight=\"10\"\n\t\tviewBox=\"0 0 20 10\"\n\t\tfill=\"none\"\n\t\tclassName={cn(\"block\", className)}\n\t\taria-hidden=\"true\"\n\t>\n\t\t{/* Main fill shape */}\n\t\t<path\n\t\t\td=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n\t\t\tclassName={fillClassName}\n\t\t/>\n\t\t{/* Border stroke (rendered on top for outline effect) */}\n\t\t{borderClassName && (\n\t\t\t<path\n\t\t\t\td=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n\t\t\t\tclassName={borderClassName}\n\t\t\t/>\n\t\t)}\n\t</svg>\n);\n","\"use client\";\n\nimport { Tooltip as BaseTooltip } from \"@base-ui-components/react/tooltip\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport {\n\tFloatingArrowSvg,\n\tfloatingArrowVariants,\n} from \"../../shared/floating-arrow\";\n\n/**\n * Tooltip popup variants\n *\n * Uses semantic tokens for themeable styling:\n * - color.tooltip.bg - Dark background\n * - color.tooltip.text - Light text\n * - surface.tooltip.radius - Small border radius\n * - spatial.component.tooltip.padding-x/y - Consistent padding\n */\nconst tooltipPopupVariants = tv({\n\tbase: [\n\t\t// Layout - uses component tooltip tokens\n\t\t\"px-spatial-component-tooltip-padding-x py-spatial-component-tooltip-padding-y\",\n\t\t// Background and text - uses tooltip color tokens\n\t\t\"bg-tooltip-bg text-tooltip-text\",\n\t\t// Border radius - uses surface tooltip token\n\t\t\"rounded-surface-tooltip\",\n\t\t// Typography - uses semantic body text composite\n\t\t\"typography-body-sm-md font-medium\",\n\t\t// Shadow for elevation\n\t\t\"shadow-md\",\n\t\t// Allow arrow to extend outside popup bounds\n\t\t\"overflow-visible\",\n\t\t// Animation\n\t\t\"origin-[var(--transform-origin)]\",\n\t\t\"transition-[transform,scale,opacity] duration-150\",\n\t\t\"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n\t\t\"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n\t\t// Ensure it's above other content\n\t\t\"z-50\",\n\t],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"\",\n\t\t\t// Future variants can be added here (e.g., light, primary)\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t},\n});\n\n/**\n * Tooltip arrow variants - uses shared floating arrow variants\n */\nconst tooltipArrowVariants = floatingArrowVariants;\n\n// ============================================================================\n// Tooltip Provider\n// ============================================================================\n\nexport interface TooltipProviderProps extends BaseTooltip.Provider.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Tooltip Provider\n *\n * Manages shared delays across multiple tooltips.\n * Wrap your app or a section with this to enable tooltip delay grouping.\n */\nconst TooltipProvider = ({ children, ...props }: TooltipProviderProps) => {\n\treturn <BaseTooltip.Provider {...props}>{children}</BaseTooltip.Provider>;\n};\n\n// ============================================================================\n// Tooltip Root\n// ============================================================================\n\nexport interface TooltipRootProps extends BaseTooltip.Root.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Tooltip Root\n *\n * Groups all tooltip parts. Does not render an element.\n */\nconst TooltipRoot = ({ children, ...props }: TooltipRootProps) => {\n\treturn <BaseTooltip.Root {...props}>{children}</BaseTooltip.Root>;\n};\n\n// ============================================================================\n// Tooltip Trigger\n// ============================================================================\n\nexport interface TooltipTriggerProps\n\textends React.ComponentProps<typeof BaseTooltip.Trigger> {\n\tclassName?: string;\n}\n\n/**\n * Tooltip Trigger\n *\n * The element that triggers the tooltip on hover/focus.\n * Renders as the child element with tooltip behavior attached.\n * When children is a single React element, uses `render` prop to avoid wrapper element.\n */\nconst TooltipTrigger = React.forwardRef<HTMLButtonElement, TooltipTriggerProps>(\n\t({ className, children, ...props }, ref) => {\n\t\t// If children is a single React element, use render prop to avoid wrapper\n\t\tconst isSingleElement = React.isValidElement(children);\n\n\t\tif (isSingleElement) {\n\t\t\treturn (\n\t\t\t\t<BaseTooltip.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\trender={children as React.ReactElement<Record<string, unknown>>}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BaseTooltip.Trigger ref={ref} className={className} {...props}>\n\t\t\t\t{children}\n\t\t\t</BaseTooltip.Trigger>\n\t\t);\n\t},\n);\nTooltipTrigger.displayName = \"TooltipTrigger\";\n\n// ============================================================================\n// Tooltip Portal\n// ============================================================================\n\nexport interface TooltipPortalProps extends BaseTooltip.Portal.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Tooltip Portal\n *\n * Renders the tooltip popup in a portal outside the DOM hierarchy.\n */\nconst TooltipPortal = ({ children, ...props }: TooltipPortalProps) => {\n\treturn <BaseTooltip.Portal {...props}>{children}</BaseTooltip.Portal>;\n};\n\n// ============================================================================\n// Tooltip Positioner\n// ============================================================================\n\nexport interface TooltipPositionerProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BaseTooltip.Positioner>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\n/**\n * Tooltip Positioner\n *\n * Positions the tooltip popup relative to the trigger.\n */\nconst TooltipPositioner = React.forwardRef<\n\tHTMLDivElement,\n\tTooltipPositionerProps\n>(({ className, side = \"top\", sideOffset = 8, ...props }, ref) => {\n\treturn (\n\t\t<BaseTooltip.Positioner\n\t\t\tref={ref}\n\t\t\tside={side}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={className}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nTooltipPositioner.displayName = \"TooltipPositioner\";\n\n// ============================================================================\n// Tooltip Popup\n// ============================================================================\n\nexport interface TooltipPopupProps\n\textends Omit<React.ComponentProps<typeof BaseTooltip.Popup>, \"className\">,\n\t\tVariantProps<typeof tooltipPopupVariants> {\n\tclassName?: string;\n}\n\n/**\n * Tooltip Popup\n *\n * The tooltip content container with styled appearance.\n */\nconst TooltipPopup = React.forwardRef<HTMLDivElement, TooltipPopupProps>(\n\t({ className, variant, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseTooltip.Popup\n\t\t\t\tref={ref}\n\t\t\t\trole=\"tooltip\"\n\t\t\t\tclassName={cn(tooltipPopupVariants({ variant }), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTooltipPopup.displayName = \"TooltipPopup\";\n\n// ============================================================================\n// Tooltip Arrow\n// ============================================================================\n\nexport interface TooltipArrowProps\n\textends Omit<React.ComponentProps<typeof BaseTooltip.Arrow>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Tooltip Arrow\n *\n * Visual pointer element for the tooltip.\n * Uses shared FloatingArrowSvg with tooltip-bg color token.\n */\nconst TooltipArrow = React.forwardRef<HTMLDivElement, TooltipArrowProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseTooltip.Arrow\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(tooltipArrowVariants(), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<FloatingArrowSvg fillClassName=\"fill-tooltip-bg\" />\n\t\t\t</BaseTooltip.Arrow>\n\t\t);\n\t},\n);\nTooltipArrow.displayName = \"TooltipArrow\";\n\n// ============================================================================\n// Simple Tooltip Component\n// ============================================================================\n\nexport interface TooltipProps {\n\t/** The content to show in the tooltip */\n\tcontent: React.ReactNode;\n\t/** The element that triggers the tooltip */\n\tchildren: React.ReactNode;\n\t/** Side of the trigger to show the tooltip */\n\tside?: \"top\" | \"bottom\" | \"left\" | \"right\";\n\t/** Offset from the trigger */\n\tsideOffset?: number;\n\t/** Alignment along the side */\n\talign?: \"start\" | \"center\" | \"end\";\n\t/** Delay before showing the tooltip (ms) */\n\tdelay?: number;\n\t/** Delay before hiding the tooltip (ms) */\n\tcloseDelay?: number;\n\t/** Whether to show an arrow */\n\tshowArrow?: boolean;\n\t/** Controlled open state */\n\topen?: boolean;\n\t/** Default open state */\n\tdefaultOpen?: boolean;\n\t/** Callback when open state changes */\n\tonOpenChange?: (open: boolean) => void;\n\t/** Additional className for the popup */\n\tclassName?: string;\n}\n\n/**\n * Tooltip\n *\n * A simple, pre-composed tooltip component for common use cases.\n *\n * @example\n * ```tsx\n * <Tooltip content=\"Save your changes\">\n *   <Button>Save</Button>\n * </Tooltip>\n * ```\n */\nconst Tooltip = ({\n\tcontent,\n\tchildren,\n\tside = \"top\",\n\tsideOffset = 8,\n\talign = \"center\",\n\tdelay,\n\tcloseDelay,\n\tshowArrow = true,\n\topen,\n\tdefaultOpen,\n\tonOpenChange,\n\tclassName,\n}: TooltipProps) => {\n\treturn (\n\t\t<TooltipRoot\n\t\t\topen={open}\n\t\t\tdefaultOpen={defaultOpen}\n\t\t\tonOpenChange={onOpenChange}\n\t\t>\n\t\t\t<TooltipTrigger delay={delay} closeDelay={closeDelay}>\n\t\t\t\t{children}\n\t\t\t</TooltipTrigger>\n\t\t\t<TooltipPortal>\n\t\t\t\t<TooltipPositioner side={side} sideOffset={sideOffset} align={align}>\n\t\t\t\t\t<TooltipPopup className={className}>\n\t\t\t\t\t\t{showArrow && <TooltipArrow />}\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TooltipPopup>\n\t\t\t\t</TooltipPositioner>\n\t\t\t</TooltipPortal>\n\t\t</TooltipRoot>\n\t);\n};\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const TooltipParts = Object.assign(TooltipRoot, {\n\tProvider: TooltipProvider,\n\tRoot: TooltipRoot,\n\tTrigger: TooltipTrigger,\n\tPortal: TooltipPortal,\n\tPositioner: TooltipPositioner,\n\tPopup: TooltipPopup,\n\tArrow: TooltipArrow,\n});\n\nexport {\n\tTooltip,\n\tTooltipProvider,\n\tTooltipRoot,\n\tTooltipTrigger,\n\tTooltipPortal,\n\tTooltipPositioner,\n\tTooltipPopup,\n\tTooltipArrow,\n\ttooltipPopupVariants,\n\ttooltipArrowVariants,\n};\n"]}

package/dist/tout/index.d.ts

@@ -0,0 +1,157 @@
+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';
+import { a as ComponentTheme } from '../theme-CzBPUlh_.js';
+
+/**
+ * Tout variants for background and content styling
+ */
+declare const toutVariants: tailwind_variants.TVReturnType<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}>, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+    align: {
+        left: string;
+        center: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Tout component based on Figma BaseKit / Touts
+ *
+ * A full-bleed section with a background image and overlaid content.
+ * Content can be positioned on the left side or centered.
+ *
+ * Color schemes:
+ * - light: Light text styling (default)
+ * - dark: Dark text styling
+ *
+ * Alignment:
+ * - left: Content aligned to the left (default)
+ * - center: Content centered
+ *
+ * Responsive behavior:
+ * - Mobile (sm): 600px height, 4 columns with gap-20, content spans all 4 cols
+ * - Tablet (md): 750px height, 12 columns with gap-20, content spans 9 cols (left) or centered
+ * - Desktop (lg): 900px height, 24 columns with gap-20, content spans 9 cols (left) or centered
+ *
+ * This component is self-contained - do NOT wrap in a grid-container.
+ */
+interface ToutProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof toutVariants> {
+    /**
+     * The headline displayed in the tout
+     */
+    headline: React.ReactNode;
+    /**
+     * The body text displayed below the headline (optional)
+     */
+    body?: string;
+    /**
+     * Primary action button (required)
+     */
+    primaryAction: React.ReactNode;
+    /**
+     * Secondary action button (optional)
+     */
+    secondaryAction?: React.ReactNode;
+    /**
+     * Background media (image or video element)
+     * Should be a full-bleed element that covers the entire section
+     */
+    backgroundMedia: React.ReactNode;
+    /**
+     * Optional footer content to display at the bottom of the section.
+     * Use with NdstudioFooter component for the branded footer.
+     */
+    footer?: React.ReactNode;
+    /**
+     * Component-level theme overrides.
+     * Allows customization of colors, spacing, and surface properties.
+     */
+    theme?: ComponentTheme;
+}
+/**
+ * Tout component for hero-like sections with background media and overlaid content.
+ *
+ * This component is self-contained with its own grid.
+ * Grid setup:
+ * - Desktop (lg): 24 columns, gap-20, content spans 9 cols
+ * - Tablet (md): 12 columns, gap-20, content spans 9 cols
+ * - Mobile: 4 columns, gap-20, content spans all 4 cols
+ *
+ * @example
+ * ```tsx
+ * <Tout
+ *   headline="Feature Headline"
+ *   body="Description of the feature..."
+ *   primaryAction={<Button>Primary</Button>}
+ *   secondaryAction={<Button variant="outline" colorScheme="light">Secondary</Button>}
+ *   backgroundMedia={
+ *     <img
+ *       src="/background.jpg"
+ *       alt=""
+ *       className="absolute inset-0 w-full h-full object-cover"
+ *     />
+ *   }
+ *   footer={<NdstudioFooter />}
+ * />
+ * ```
+ */
+declare const Tout: React.ForwardRefExoticComponent<ToutProps & React.RefAttributes<HTMLElement>>;
+
+export { Tout, type ToutProps };