@nationaldesignstudio/react 0.3.0 → 0.5.1

package/dist/components/sections/tout/tout.js

@@ -0,0 +1,178 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import * as u from "react";
+import { tv as N, cnBase as e } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { themeToStyleVars as b } from "../../../lib/theme.js";
+const w = N({
+  base: [
+    // Full width
+    "w-full",
+    // Positioning context for background
+    "relative overflow-hidden",
+    // Responsive height: 600px mobile, 750px tablet, 900px desktop
+    "h-[600px] md:h-[750px] lg:h-[900px]"
+  ],
+  variants: {
+    colorScheme: {
+      light: "",
+      dark: ""
+    },
+    align: {
+      left: "",
+      center: ""
+    }
+  },
+  defaultVariants: {
+    colorScheme: "light",
+    align: "left"
+  }
+}), S = u.forwardRef(
+  ({
+    className: n,
+    colorScheme: s = "light",
+    align: i = "left",
+    headline: m,
+    body: o,
+    primaryAction: g,
+    secondaryAction: p,
+    backgroundMedia: h,
+    footer: d,
+    theme: t,
+    style: x,
+    ...y
+  }, f) => {
+    const r = i === "center", c = s === "dark", v = b(t);
+    return /* @__PURE__ */ a(
+      "section",
+      {
+        ref: f,
+        className: w({ colorScheme: s, align: i, class: n }),
+        style: { ...v, ...x },
+        ...y,
+        children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-0 pointer-events-none",
+              children: [
+                /* @__PURE__ */ l("div", { className: "absolute inset-0 bg-gray-500" }),
+                h
+              ]
+            }
+          ),
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: e(
+                // Position above background
+                "relative z-10",
+                // Grid setup with responsive columns
+                "grid w-full h-full",
+                // Mobile: 4 columns with gap-20
+                "grid-cols-4 gap-20",
+                // Tablet (md): 12 columns
+                "md:grid-cols-12",
+                // Desktop (lg): 24 columns
+                "lg:grid-cols-24",
+                // Max width and centering like grid-container
+                "max-w-[var(--breakpoint-lg)] mx-auto",
+                // Responsive margins matching grid-container - uses primitive spacing tokens
+                "px-20 md:px-56 lg:px-72",
+                // Vertical padding to position content at bottom - uses primitive spacing tokens
+                "py-36 md:py-56 lg:py-72"
+              ),
+              style: {
+                // Grid spacing theme overrides
+                ...t?.spatial?.gridSmallMargin && {
+                  paddingLeft: "var(--theme-grid-small-margin)",
+                  paddingRight: "var(--theme-grid-small-margin)"
+                },
+                ...t?.spatial?.gridSmallGutter && {
+                  gap: "var(--theme-grid-small-gutter)"
+                }
+              },
+              children: /* @__PURE__ */ a(
+                "div",
+                {
+                  className: e(
+                    // Flex container for content
+                    "flex flex-col",
+                    r ? "justify-start items-center" : "justify-end",
+                    // Responsive gap between text and buttons - uses primitive spacing tokens
+                    "gap-28 md:gap-36",
+                    // Mobile: all 4 cols
+                    "col-span-4",
+                    // Tablet & Desktop: 9 cols left-aligned, full width centered
+                    r ? "md:col-span-12 lg:col-span-24" : "md:col-span-9"
+                  ),
+                  children: [
+                    /* @__PURE__ */ a(
+                      "div",
+                      {
+                        className: e(
+                          "flex flex-col gap-16",
+                          r && "items-center text-center"
+                        ),
+                        children: [
+                          /* @__PURE__ */ l(
+                            "h2",
+                            {
+                              className: e(
+                                "typography-h4",
+                                c ? "text-gray-100" : "text-gray-900"
+                              ),
+                              style: {
+                                color: t?.colors?.textPrimary ? "var(--theme-text-primary)" : void 0
+                              },
+                              children: m
+                            }
+                          ),
+                          o && /* @__PURE__ */ l(
+                            "p",
+                            {
+                              className: e(
+                                "typography-body-small",
+                                c ? "text-gray-400" : "text-gray-800"
+                              ),
+                              style: {
+                                color: t?.colors?.textSecondary ? "var(--theme-text-secondary)" : void 0
+                              },
+                              children: o
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ a(
+                      "div",
+                      {
+                        className: e(
+                          "flex flex-row",
+                          r ? "justify-center" : "items-start",
+                          // Responsive gap between buttons
+                          "gap-8 md:gap-12",
+                          "[&>*]:flex-shrink-0"
+                        ),
+                        children: [
+                          g,
+                          p
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          d && /* @__PURE__ */ l("div", { className: "absolute bottom-6 md:bottom-8 left-0 right-0 z-10", children: d })
+        ]
+      }
+    );
+  }
+);
+S.displayName = "Tout";
+export {
+  S as Tout,
+  w as toutVariants
+};
+//# sourceMappingURL=tout.js.map

package/dist/components/sections/tout/tout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tout.js","sources":["../../../../src/components/sections/tout/tout.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { type ComponentTheme, themeToStyleVars } from \"@/lib/theme\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Tout variants for background and content styling\n */\nconst toutVariants = tv({\n\tbase: [\n\t\t// Full width\n\t\t\"w-full\",\n\t\t// Positioning context for background\n\t\t\"relative overflow-hidden\",\n\t\t// Responsive height: 600px mobile, 750px tablet, 900px desktop\n\t\t\"h-[600px] md:h-[750px] lg:h-[900px]\",\n\t],\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tlight: \"\",\n\t\t\tdark: \"\",\n\t\t},\n\t\talign: {\n\t\t\tleft: \"\",\n\t\t\tcenter: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"light\",\n\t\talign: \"left\",\n\t},\n});\n\n/**\n * Tout component based on Figma BaseKit / Touts\n *\n * A full-bleed section with a background image and overlaid content.\n * Content can be positioned on the left side or centered.\n *\n * Color schemes:\n * - light: Light text styling (default)\n * - dark: Dark text styling\n *\n * Alignment:\n * - left: Content aligned to the left (default)\n * - center: Content centered\n *\n * Responsive behavior:\n * - Mobile (sm): 600px height, 4 columns with gap-20, content spans all 4 cols\n * - Tablet (md): 750px height, 12 columns with gap-20, content spans 9 cols (left) or centered\n * - Desktop (lg): 900px height, 24 columns with gap-20, content spans 9 cols (left) or centered\n *\n * This component is self-contained - do NOT wrap in a grid-container.\n */\nexport interface ToutProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof toutVariants> {\n\t/**\n\t * The headline displayed in the tout\n\t */\n\theadline: React.ReactNode;\n\t/**\n\t * The body text displayed below the headline (optional)\n\t */\n\tbody?: string;\n\t/**\n\t * Primary action button (required)\n\t */\n\tprimaryAction: React.ReactNode;\n\t/**\n\t * Secondary action button (optional)\n\t */\n\tsecondaryAction?: React.ReactNode;\n\t/**\n\t * Background media (image or video element)\n\t * Should be a full-bleed element that covers the entire section\n\t */\n\tbackgroundMedia: React.ReactNode;\n\t/**\n\t * Optional footer content to display at the bottom of the section.\n\t * Use with NdstudioFooter component for the branded footer.\n\t */\n\tfooter?: React.ReactNode;\n\t/**\n\t * Component-level theme overrides.\n\t * Allows customization of colors, spacing, and surface properties.\n\t */\n\ttheme?: ComponentTheme;\n}\n\n/**\n * Tout component for hero-like sections with background media and overlaid content.\n *\n * This component is self-contained with its own grid.\n * Grid setup:\n * - Desktop (lg): 24 columns, gap-20, content spans 9 cols\n * - Tablet (md): 12 columns, gap-20, content spans 9 cols\n * - Mobile: 4 columns, gap-20, content spans all 4 cols\n *\n * @example\n * ```tsx\n * <Tout\n *   headline=\"Feature Headline\"\n *   body=\"Description of the feature...\"\n *   primaryAction={<Button>Primary</Button>}\n *   secondaryAction={<Button variant=\"outline\" colorScheme=\"light\">Secondary</Button>}\n *   backgroundMedia={\n *     <img\n *       src=\"/background.jpg\"\n *       alt=\"\"\n *       className=\"absolute inset-0 w-full h-full object-cover\"\n *     />\n *   }\n *   footer={<NdstudioFooter />}\n * />\n * ```\n */\nconst Tout = React.forwardRef<HTMLElement, ToutProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tcolorScheme = \"light\",\n\t\t\talign = \"left\",\n\t\t\theadline,\n\t\t\tbody,\n\t\t\tprimaryAction,\n\t\t\tsecondaryAction,\n\t\t\tbackgroundMedia,\n\t\t\tfooter,\n\t\t\ttheme,\n\t\t\tstyle,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst isCentered = align === \"center\";\n\t\tconst isDark = colorScheme === \"dark\";\n\t\tconst themeStyles = themeToStyleVars(theme);\n\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={toutVariants({ colorScheme, align, class: className })}\n\t\t\t\tstyle={{ ...themeStyles, ...style }}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Background layer - full bleed */}\n\t\t\t\t<div\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName=\"absolute inset-0 pointer-events-none\"\n\t\t\t\t>\n\t\t\t\t\t{/* Fallback background color */}\n\t\t\t\t\t<div className=\"absolute inset-0 bg-gray-500\" />\n\t\t\t\t\t{/* Background media */}\n\t\t\t\t\t{backgroundMedia}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Inner grid for content alignment - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// Position above background\n\t\t\t\t\t\t\"relative z-10\",\n\t\t\t\t\t\t// Grid setup with responsive columns\n\t\t\t\t\t\t\"grid w-full h-full\",\n\t\t\t\t\t\t// Mobile: 4 columns with gap-20\n\t\t\t\t\t\t\"grid-cols-4 gap-20\",\n\t\t\t\t\t\t// Tablet (md): 12 columns\n\t\t\t\t\t\t\"md:grid-cols-12\",\n\t\t\t\t\t\t// Desktop (lg): 24 columns\n\t\t\t\t\t\t\"lg:grid-cols-24\",\n\t\t\t\t\t\t// Max width and centering like grid-container\n\t\t\t\t\t\t\"max-w-[var(--breakpoint-lg)] mx-auto\",\n\t\t\t\t\t\t// Responsive margins matching grid-container - uses primitive spacing tokens\n\t\t\t\t\t\t\"px-20 md:px-56 lg:px-72\",\n\t\t\t\t\t\t// Vertical padding to position content at bottom - uses primitive spacing tokens\n\t\t\t\t\t\t\"py-36 md:py-56 lg:py-72\",\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t// Grid spacing theme overrides\n\t\t\t\t\t\t...(theme?.spatial?.gridSmallMargin && {\n\t\t\t\t\t\t\tpaddingLeft: \"var(--theme-grid-small-margin)\",\n\t\t\t\t\t\t\tpaddingRight: \"var(--theme-grid-small-margin)\",\n\t\t\t\t\t\t}),\n\t\t\t\t\t\t...(theme?.spatial?.gridSmallGutter && {\n\t\t\t\t\t\t\tgap: \"var(--theme-grid-small-gutter)\",\n\t\t\t\t\t\t}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{/* Content column - aligned to grid */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t// Flex container for content\n\t\t\t\t\t\t\t\"flex flex-col\",\n\t\t\t\t\t\t\tisCentered ? \"justify-start items-center\" : \"justify-end\",\n\t\t\t\t\t\t\t// Responsive gap between text and buttons - uses primitive spacing tokens\n\t\t\t\t\t\t\t\"gap-28 md:gap-36\",\n\t\t\t\t\t\t\t// Mobile: all 4 cols\n\t\t\t\t\t\t\t\"col-span-4\",\n\t\t\t\t\t\t\t// Tablet & Desktop: 9 cols left-aligned, full width centered\n\t\t\t\t\t\t\tisCentered ? \"md:col-span-12 lg:col-span-24\" : \"md:col-span-9\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Text content stack - uses primitive spacing tokens */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex flex-col gap-16\",\n\t\t\t\t\t\t\t\tisCentered && \"items-center text-center\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h2\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"typography-h4\",\n\t\t\t\t\t\t\t\t\tisDark ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: theme?.colors?.textPrimary\n\t\t\t\t\t\t\t\t\t\t? \"var(--theme-text-primary)\"\n\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{headline}\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t{body && (\n\t\t\t\t\t\t\t\t<p\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"typography-body-small\",\n\t\t\t\t\t\t\t\t\t\tisDark ? \"text-gray-400\" : \"text-gray-800\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: theme?.colors?.textSecondary\n\t\t\t\t\t\t\t\t\t\t\t? \"var(--theme-text-secondary)\"\n\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{body}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* CTA buttons - uses primitive spacing tokens */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex flex-row\",\n\t\t\t\t\t\t\t\tisCentered ? \"justify-center\" : \"items-start\",\n\t\t\t\t\t\t\t\t// Responsive gap between buttons\n\t\t\t\t\t\t\t\t\"gap-8 md:gap-12\",\n\t\t\t\t\t\t\t\t\"[&>*]:flex-shrink-0\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{primaryAction}\n\t\t\t\t\t\t\t{secondaryAction}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Footer slot */}\n\t\t\t\t{footer && (\n\t\t\t\t\t<div className=\"absolute bottom-6 md:bottom-8 left-0 right-0 z-10\">\n\t\t\t\t\t\t{footer}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</section>\n\t\t);\n\t},\n);\nTout.displayName = \"Tout\";\n\nexport { Tout, toutVariants };\n"],"names":["toutVariants","tv","Tout","React","className","colorScheme","align","headline","body","primaryAction","secondaryAction","backgroundMedia","footer","theme","style","props","ref","isCentered","isDark","themeStyles","themeToStyleVars","jsxs","jsx","cn"],"mappings":"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"}

package/dist/components/sections/two-column-section/two-column-section.js

@@ -0,0 +1,113 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import * as c from "react";
+import { tv as m, cnBase as e } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const n = m({
+  // Base styles - responsive padding using primitive spacing tokens
+  base: [
+    "w-full",
+    // Small (mobile): 20px x, 56px top, 20px bottom
+    "px-20 pt-56 pb-20",
+    // Medium (tablet): 56px x, 56px y
+    "md:px-56 md:py-56",
+    // Large (desktop): 72px x, 72px top, 112px bottom
+    "lg:px-72 lg:pt-72 lg:pb-112"
+  ],
+  variants: {
+    colorScheme: {
+      dark: "bg-gray-1200",
+      light: "bg-white"
+    },
+    layout: {
+      asymmetric: "",
+      equal: ""
+    }
+  },
+  defaultVariants: {
+    colorScheme: "dark",
+    layout: "asymmetric"
+  }
+}), y = c.forwardRef(
+  ({
+    className: g,
+    colorScheme: a = "dark",
+    layout: t,
+    title: i,
+    lead: l,
+    children: d,
+    ...o
+  }, p) => /* @__PURE__ */ r(
+    "section",
+    {
+      ref: p,
+      className: n({
+        colorScheme: a,
+        layout: t,
+        class: g
+      }),
+      ...o,
+      children: /* @__PURE__ */ s(
+        "div",
+        {
+          className: e(
+            "border-t pt-36",
+            a === "dark" ? "border-gray-700" : "border-gray-300",
+            // Grid layout - uses primitive spacing tokens
+            "grid grid-cols-1 gap-56",
+            t === "equal" ? "md:grid-cols-2" : "lg:grid-cols-24 lg:gap-56"
+          ),
+          children: [
+            /* @__PURE__ */ r(
+              "h2",
+              {
+                className: e(
+                  "typography-subheading-medium",
+                  a === "dark" ? "text-gray-100" : "text-gray-900",
+                  // Column span based on layout
+                  t !== "equal" && "lg:col-span-9"
+                ),
+                children: i
+              }
+            ),
+            /* @__PURE__ */ s(
+              "div",
+              {
+                className: e(
+                  "flex flex-col gap-56",
+                  t !== "equal" && "lg:col-span-15"
+                ),
+                children: [
+                  l && /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: e(
+                        "typography-body-large",
+                        a === "dark" ? "text-gray-100" : "text-gray-900"
+                      ),
+                      children: typeof l == "string" ? /* @__PURE__ */ r("p", { children: l }) : l
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: e(
+                        "typography-body-medium flex flex-col gap-[1em]",
+                        a === "dark" ? "text-gray-400" : "text-gray-600"
+                      ),
+                      children: d
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  )
+);
+y.displayName = "TwoColumnSection";
+export {
+  y as TwoColumnSection,
+  n as twoColumnSectionVariants
+};
+//# sourceMappingURL=two-column-section.js.map

package/dist/components/sections/two-column-section/two-column-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"two-column-section.js","sources":["../../../../src/components/sections/two-column-section/two-column-section.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * TwoColumnSection component for text-heavy content sections\n *\n * Layout:\n * - Desktop (lg+): Title left, content right with border-top divider\n * - Mobile/Tablet: Stacked vertically\n *\n * Uses the 24-column grid system.\n */\nconst twoColumnSectionVariants = tv({\n\t// Base styles - responsive padding using primitive spacing tokens\n\tbase: [\n\t\t\"w-full\",\n\t\t// Small (mobile): 20px x, 56px top, 20px bottom\n\t\t\"px-20 pt-56 pb-20\",\n\t\t// Medium (tablet): 56px x, 56px y\n\t\t\"md:px-56 md:py-56\",\n\t\t// Large (desktop): 72px x, 72px top, 112px bottom\n\t\t\"lg:px-72 lg:pt-72 lg:pb-112\",\n\t],\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tdark: \"bg-gray-1200\",\n\t\t\tlight: \"bg-white\",\n\t\t},\n\t\tlayout: {\n\t\t\tasymmetric: \"\",\n\t\t\tequal: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"dark\",\n\t\tlayout: \"asymmetric\",\n\t},\n});\n\nexport interface TwoColumnSectionProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof twoColumnSectionVariants> {\n\t/**\n\t * The title text displayed in the left column\n\t */\n\ttitle: string;\n\t/**\n\t * Lead content - prominently styled (brighter text)\n\t * Can be a string or ReactNode for rich content\n\t */\n\tlead?: React.ReactNode;\n\t/**\n\t * Body content - secondary styled (muted text)\n\t * Can be a string or ReactNode for rich content\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Layout style for the columns\n\t * - \"asymmetric\" (default): Uses 24-column grid with ~40/60 split (title: 9, content: 15)\n\t * - \"equal\": Simple 2-column equal-width layout at md+ breakpoints\n\t */\n\tlayout?: \"asymmetric\" | \"equal\";\n}\n\n/**\n * TwoColumnSection component for text-heavy content with title/content split.\n *\n * Layout:\n * - Mobile/Tablet: Stacked (title above content)\n * - Desktop (lg+): Title left (~40%), Content right (~60%)\n *\n * @example\n * ```tsx\n * <TwoColumnSection\n *   title=\"US Tech Force\"\n *   lead=\"The US Tech Force is recruiting an elite corps of engineers...\"\n *   variant=\"dark\"\n * >\n *   <p>Through a two-year program, participants will work...</p>\n *   <p>Upon completing the program, engineers can seek...</p>\n * </TwoColumnSection>\n * ```\n */\nconst TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tcolorScheme = \"dark\",\n\t\t\tlayout,\n\t\t\ttitle,\n\t\t\tlead,\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={twoColumnSectionVariants({\n\t\t\t\t\tcolorScheme,\n\t\t\t\t\tlayout,\n\t\t\t\t\tclass: className,\n\t\t\t\t})}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Inner container with border-top - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"border-t pt-36\",\n\t\t\t\t\t\tcolorScheme === \"dark\" ? \"border-gray-700\" : \"border-gray-300\",\n\t\t\t\t\t\t// Grid layout - uses primitive spacing tokens\n\t\t\t\t\t\t\"grid grid-cols-1 gap-56\",\n\t\t\t\t\t\tlayout === \"equal\" ? \"md:grid-cols-2\" : \"lg:grid-cols-24 lg:gap-56\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{/* Title column */}\n\t\t\t\t\t<h2\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"typography-subheading-medium\",\n\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t// Column span based on layout\n\t\t\t\t\t\t\tlayout !== \"equal\" && \"lg:col-span-9\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\n\t\t\t\t\t{/* Content column - uses primitive spacing tokens */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex flex-col gap-56\",\n\t\t\t\t\t\t\tlayout !== \"equal\" && \"lg:col-span-15\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Lead content - brighter/prominent */}\n\t\t\t\t\t\t{lead && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"typography-body-large\",\n\t\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{typeof lead === \"string\" ? <p>{lead}</p> : lead}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{/* Body content - muted */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"typography-body-medium flex flex-col gap-[1em]\",\n\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-400\" : \"text-gray-600\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nTwoColumnSection.displayName = \"TwoColumnSection\";\n\nexport { TwoColumnSection, twoColumnSectionVariants };\n"],"names":["twoColumnSectionVariants","tv","TwoColumnSection","React","className","colorScheme","layout","title","lead","children","props","ref","jsx","jsxs","cn"],"mappings":";;;AAaA,MAAMA,IAA2BC,EAAG;AAAA;AAAA,EAEnC,MAAM;AAAA,IACL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,IAER,QAAQ;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IAAA;AAAA,EACR;AAAA,EAED,iBAAiB;AAAA,IAChB,aAAa;AAAA,IACb,QAAQ;AAAA,EAAA;AAEV,CAAC,GA8CKC,IAAmBC,EAAM;AAAA,EAC9B,CACC;AAAA,IACC,WAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MAGC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAAD;AAAA,MACA,WAAWX,EAAyB;AAAA,QACnC,aAAAK;AAAA,QACA,QAAAC;AAAA,QACA,OAAOF;AAAA,MAAA,CACP;AAAA,MACA,GAAGM;AAAA,MAGJ,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAWC;AAAAA,YACV;AAAA,YACAT,MAAgB,SAAS,oBAAoB;AAAA;AAAA,YAE7C;AAAA,YACAC,MAAW,UAAU,mBAAmB;AAAA,UAAA;AAAA,UAIzC,UAAA;AAAA,YAAA,gBAAAM;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,WAAWE;AAAAA,kBACV;AAAA,kBACAT,MAAgB,SAAS,kBAAkB;AAAA;AAAA,kBAE3CC,MAAW,WAAW;AAAA,gBAAA;AAAA,gBAGtB,UAAAC;AAAA,cAAA;AAAA,YAAA;AAAA,YAIF,gBAAAM;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,WAAWC;AAAAA,kBACV;AAAA,kBACAR,MAAW,WAAW;AAAA,gBAAA;AAAA,gBAItB,UAAA;AAAA,kBAAAE,KACA,gBAAAI;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACA,WAAWE;AAAAA,wBACV;AAAA,wBACAT,MAAgB,SAAS,kBAAkB;AAAA,sBAAA;AAAA,sBAG3C,iBAAOG,KAAS,WAAW,gBAAAI,EAAC,KAAA,EAAG,aAAK,IAAOJ;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAK9C,gBAAAI;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACA,WAAWE;AAAAA,wBACV;AAAA,wBACAT,MAAgB,SAAS,kBAAkB;AAAA,sBAAA;AAAA,sBAG3C,UAAAI;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACD;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAIJ;AACAP,EAAiB,cAAc;"}

package/dist/components/shared/floating-arrow.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Shared arrow variants for floating UI components
+ *
+ * Used by Tooltip, Popover, and other floating components.
+ * Handles positioning based on the side attribute.
+ */
+export declare const floatingArrowVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface FloatingArrowSvgProps {
+    /** CSS class for the main fill color (e.g., "fill-tooltip-bg" or "fill-overlay-background") */
+    fillClassName: string;
+    /** CSS class for the border color using fill-* (e.g., "fill-overlay-border") - renders as outline behind main fill */
+    borderClassName?: string;
+    /** Additional className for the SVG element */
+    className?: string;
+}
+/**
+ * FloatingArrowSvg
+ *
+ * A shared arrow SVG component for floating UI elements.
+ * Use with Tooltip, Popover, Dropdown, and other floating components.
+ *
+ * @example
+ * ```tsx
+ * // For dark tooltip (no border)
+ * <FloatingArrowSvg fillClassName="fill-tooltip-bg" />
+ *
+ * // For light popover with border
+ * <FloatingArrowSvg
+ *   fillClassName="fill-overlay-background"
+ *   borderClassName="fill-overlay-border"
+ * />
+ * ```
+ */
+export declare const FloatingArrowSvg: ({ fillClassName, borderClassName, className, }: FloatingArrowSvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/floating-arrow.js

@@ -0,0 +1,51 @@
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { tv as s, cnBase as d } from "../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+const n = s({
+  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"
+  ]
+}), c = ({
+  fillClassName: e,
+  borderClassName: t,
+  className: i
+}) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "20",
+    height: "10",
+    viewBox: "0 0 20 10",
+    fill: "none",
+    className: d("block", i),
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ a(
+        "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: e
+        }
+      ),
+      t && /* @__PURE__ */ a(
+        "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: t
+        }
+      )
+    ]
+  }
+);
+export {
+  c as FloatingArrowSvg,
+  n as floatingArrowVariants
+};
+//# sourceMappingURL=floating-arrow.js.map

package/dist/components/shared/floating-arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-arrow.js","sources":["../../../src/components/shared/floating-arrow.tsx"],"sourcesContent":["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"],"names":["floatingArrowVariants","tv","FloatingArrowSvg","fillClassName","borderClassName","className","jsxs","cn","jsx"],"mappings":";;AASO,MAAMA,IAAwBC,EAAG;AAAA,EACvC,MAAM;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA;AAEF,CAAC,GA6BYC,IAAmB,CAAC;AAAA,EAChC,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACD,MACC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAWC,EAAG,SAASF,CAAS;AAAA,IAChC,eAAY;AAAA,IAGZ,UAAA;AAAA,MAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,GAAE;AAAA,UACF,WAAWL;AAAA,QAAA;AAAA,MAAA;AAAA,MAGXC,KACA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,GAAE;AAAA,UACF,WAAWJ;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAEF;"}

package/dist/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @nationaldesignstudio/react
+ * Design system components for React applications
+ */
 export type { AccordionItemProps, AccordionProps, } from './components/atoms/accordion';
 export { Accordion, AccordionItem } from './components/atoms/accordion';
 export type { BackgroundGradientProps, BackgroundImageProps, BackgroundOverlayProps, BackgroundProps, BackgroundStreamProps, BackgroundVideoProps, } from './components/atoms/background';
@@ -10,8 +14,12 @@ export type { NdstudioFooterProps } from './components/atoms/ndstudio-footer';
 export { NdstudioFooter } from './components/atoms/ndstudio-footer';
 export type { PagerControlProps } from './components/atoms/pager-control';
 export { PagerControl, pagerControlVariants, } from './components/atoms/pager-control';
+export type { PopoverArrowProps, PopoverBackdropProps, PopoverCloseProps, PopoverDescriptionProps, PopoverPopupProps, PopoverPortalProps, PopoverPositionerProps, PopoverProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, } from './components/atoms/popover';
+export { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverParts, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, popoverArrowVariants, popoverPopupVariants, } from './components/atoms/popover';
 export type { SelectGroupLabelProps, SelectGroupProps, SelectOptionProps, SelectPopupProps, SelectProps, SelectTriggerProps, } from './components/atoms/select';
 export { Select, SelectGroup, SelectGroupLabel, SelectOption, SelectPopup, SelectRoot, SelectTrigger, selectOptionVariants, selectPopupVariants, selectTriggerVariants, } from './components/atoms/select';
+export type { TooltipArrowProps, TooltipPopupProps, TooltipPortalProps, TooltipPositionerProps, TooltipProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps, } from './components/atoms/tooltip';
+export { Tooltip, TooltipArrow, TooltipParts, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipRoot, TooltipTrigger, tooltipArrowVariants, tooltipPopupVariants, } from './components/atoms/tooltip';
 export type { DevToolbarProps, GridOverlayProps } from './components/dev-tools';
 export { DevToolbar, GridOverlay } from './components/dev-tools';
 export type { CardActionsProps, CardBodyProps, CardContentProps, CardDescriptionProps, CardEyebrowProps, CardImageProps, CardProps, CardTitleProps, } from './components/organisms/card';