@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/popover/index.js

@@ -0,0 +1,290 @@
+"use client";
+import { Popover as Popover$1 } from '@base-ui-components/react/popover';
+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/popover/popover.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 popoverPopupVariants = tv({
+  base: [
+    // Layout - uses component overlay tokens
+    "p-spatial-component-overlay-padding",
+    // Background - uses overlay background token
+    "bg-overlay-background",
+    // Border - uses overlay border token
+    "border border-overlay-border",
+    // Text - uses overlay text token
+    "text-overlay-text",
+    // Border radius - uses surface overlay token
+    "rounded-surface-overlay",
+    // Shadow for elevation
+    "shadow-lg",
+    // 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 (higher than backdrop z-40)
+    "z-50",
+    // Max width for reasonable content display
+    "max-w-[320px]"
+  ],
+  variants: {
+    variant: {
+      default: ""
+      // Future variants can be added here
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var popoverArrowVariants = floatingArrowVariants;
+var PopoverRoot = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { ...props, children });
+};
+var PopoverTrigger = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const isSingleElement = React.isValidElement(children);
+    if (isSingleElement) {
+      return /* @__PURE__ */ jsx(
+        Popover$1.Trigger,
+        {
+          ref,
+          className,
+          render: children,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Popover$1.Trigger, { ref, className, ...props, children });
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverPortal = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { ...props, children });
+};
+var PopoverBackdrop = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Popover$1.Backdrop,
+      {
+        ref,
+        className: cn("fixed inset-0 z-40", className),
+        ...props
+      }
+    );
+  }
+);
+PopoverBackdrop.displayName = "PopoverBackdrop";
+var PopoverPositioner = React.forwardRef(({ className, side = "bottom", sideOffset = 8, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Positioner,
+    {
+      ref,
+      side,
+      sideOffset,
+      className: cn("z-50", className),
+      ...props
+    }
+  );
+});
+PopoverPositioner.displayName = "PopoverPositioner";
+var PopoverPopup = React.forwardRef(
+  ({ className, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Popover$1.Popup,
+      {
+        ref,
+        className: cn(popoverPopupVariants({ variant }), className),
+        ...props
+      }
+    );
+  }
+);
+PopoverPopup.displayName = "PopoverPopup";
+var PopoverArrow = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Popover$1.Arrow,
+      {
+        ref,
+        className: cn(popoverArrowVariants(), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          FloatingArrowSvg,
+          {
+            fillClassName: "fill-overlay-background",
+            borderClassName: "fill-overlay-border"
+          }
+        )
+      }
+    );
+  }
+);
+PopoverArrow.displayName = "PopoverArrow";
+var PopoverTitle = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Popover$1.Title,
+      {
+        ref,
+        className: cn("typography-body-md-md font-semibold", className),
+        ...props
+      }
+    );
+  }
+);
+PopoverTitle.displayName = "PopoverTitle";
+var PopoverDescription = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Description,
+    {
+      ref,
+      className: cn(
+        "typography-body-sm-md text-overlay-text-muted mt-8",
+        className
+      ),
+      ...props
+    }
+  );
+});
+PopoverDescription.displayName = "PopoverDescription";
+var PopoverClose = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Popover$1.Close,
+      {
+        ref,
+        className: cn(
+          "absolute right-8 top-8 rounded-surface-ui-small p-4",
+          "text-overlay-text-muted hover:text-overlay-text",
+          "hover:bg-bg-section focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+PopoverClose.displayName = "PopoverClose";
+var Popover = ({
+  children,
+  trigger,
+  title,
+  side = "bottom",
+  sideOffset = 8,
+  align = "center",
+  showArrow = true,
+  showClose = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    PopoverRoot,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { children: trigger }),
+        /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, { side, sideOffset, align, children: /* @__PURE__ */ jsxs(PopoverPopup, { className, children: [
+          showArrow && /* @__PURE__ */ jsx(PopoverArrow, {}),
+          showClose && /* @__PURE__ */ jsxs(PopoverClose, { children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "12",
+                height: "12",
+                viewBox: "0 0 12 12",
+                fill: "none",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] }),
+          title && /* @__PURE__ */ jsx(PopoverTitle, { children: title }),
+          title ? /* @__PURE__ */ jsx(PopoverDescription, { children }) : children
+        ] }) }) })
+      ]
+    }
+  );
+};
+var PopoverParts = Object.assign(PopoverRoot, {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Portal: PopoverPortal,
+  Backdrop: PopoverBackdrop,
+  Positioner: PopoverPositioner,
+  Popup: PopoverPopup,
+  Arrow: PopoverArrow,
+  Title: PopoverTitle,
+  Description: PopoverDescription,
+  Close: PopoverClose
+});
+
+export { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverParts, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, popoverArrowVariants, popoverPopupVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/shared/floating-arrow.tsx","../../src/components/atoms/popover/popover.tsx"],"names":["twMerge","tv","jsx","BasePopover","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 { Popover as BasePopover } from \"@base-ui-components/react/popover\";\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 * Popover popup variants\n *\n * Uses semantic overlay tokens for themeable styling:\n * - color.overlay.background - Light background\n * - color.overlay.border - Subtle border\n * - color.overlay.text - Primary text\n * - surface.overlay.radius - Rounded corners\n * - spatial.component.overlay.padding/gap - Consistent spacing\n */\nconst popoverPopupVariants = tv({\n\tbase: [\n\t\t// Layout - uses component overlay tokens\n\t\t\"p-spatial-component-overlay-padding\",\n\t\t// Background - uses overlay background token\n\t\t\"bg-overlay-background\",\n\t\t// Border - uses overlay border token\n\t\t\"border border-overlay-border\",\n\t\t// Text - uses overlay text token\n\t\t\"text-overlay-text\",\n\t\t// Border radius - uses surface overlay token\n\t\t\"rounded-surface-overlay\",\n\t\t// Shadow for elevation\n\t\t\"shadow-lg\",\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 (higher than backdrop z-40)\n\t\t\"z-50\",\n\t\t// Max width for reasonable content display\n\t\t\"max-w-[320px]\",\n\t],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"\",\n\t\t\t// Future variants can be added here\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t},\n});\n\n/**\n * Popover arrow variants - uses shared floating arrow variants\n */\nconst popoverArrowVariants = floatingArrowVariants;\n\n// ============================================================================\n// Popover Root\n// ============================================================================\n\nexport interface PopoverRootProps extends BasePopover.Root.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Popover Root\n *\n * Groups all popover parts. Does not render an element.\n */\nconst PopoverRoot = ({ children, ...props }: PopoverRootProps) => {\n\treturn <BasePopover.Root {...props}>{children}</BasePopover.Root>;\n};\n\n// ============================================================================\n// Popover Trigger\n// ============================================================================\n\nexport interface PopoverTriggerProps\n\textends React.ComponentProps<typeof BasePopover.Trigger> {\n\tclassName?: string;\n}\n\n/**\n * Popover Trigger\n *\n * The element that triggers the popover on click.\n * Renders as the child element with popover behavior attached.\n * When children is a single React element, uses `render` prop to avoid wrapper element.\n */\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\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<BasePopover.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<BasePopover.Trigger ref={ref} className={className} {...props}>\n\t\t\t\t{children}\n\t\t\t</BasePopover.Trigger>\n\t\t);\n\t},\n);\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\n// ============================================================================\n// Popover Portal\n// ============================================================================\n\nexport interface PopoverPortalProps extends BasePopover.Portal.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Popover Portal\n *\n * Renders the popover popup in a portal outside the DOM hierarchy.\n */\nconst PopoverPortal = ({ children, ...props }: PopoverPortalProps) => {\n\treturn <BasePopover.Portal {...props}>{children}</BasePopover.Portal>;\n};\n\n// ============================================================================\n// Popover Backdrop\n// ============================================================================\n\nexport interface PopoverBackdropProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Backdrop>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Backdrop\n *\n * Optional backdrop element that can be used to close the popover on click.\n */\nconst PopoverBackdrop = React.forwardRef<HTMLDivElement, PopoverBackdropProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Backdrop\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"fixed inset-0 z-40\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverBackdrop.displayName = \"PopoverBackdrop\";\n\n// ============================================================================\n// Popover Positioner\n// ============================================================================\n\nexport interface PopoverPositionerProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BasePopover.Positioner>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\n/**\n * Popover Positioner\n *\n * Positions the popover popup relative to the trigger.\n */\nconst PopoverPositioner = React.forwardRef<\n\tHTMLDivElement,\n\tPopoverPositionerProps\n>(({ className, side = \"bottom\", sideOffset = 8, ...props }, ref) => {\n\treturn (\n\t\t<BasePopover.Positioner\n\t\t\tref={ref}\n\t\t\tside={side}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\"z-50\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nPopoverPositioner.displayName = \"PopoverPositioner\";\n\n// ============================================================================\n// Popover Popup\n// ============================================================================\n\nexport interface PopoverPopupProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Popup>, \"className\">,\n\t\tVariantProps<typeof popoverPopupVariants> {\n\tclassName?: string;\n}\n\n/**\n * Popover Popup\n *\n * The popover content container with styled appearance.\n */\nconst PopoverPopup = React.forwardRef<HTMLDivElement, PopoverPopupProps>(\n\t({ className, variant, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Popup\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(popoverPopupVariants({ variant }), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverPopup.displayName = \"PopoverPopup\";\n\n// ============================================================================\n// Popover Arrow\n// ============================================================================\n\nexport interface PopoverArrowProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Arrow>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Arrow\n *\n * Visual pointer element for the popover.\n * Uses shared FloatingArrowSvg with overlay color tokens for fill and border.\n */\nconst PopoverArrow = React.forwardRef<HTMLDivElement, PopoverArrowProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Arrow\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(popoverArrowVariants(), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<FloatingArrowSvg\n\t\t\t\t\tfillClassName=\"fill-overlay-background\"\n\t\t\t\t\tborderClassName=\"fill-overlay-border\"\n\t\t\t\t/>\n\t\t\t</BasePopover.Arrow>\n\t\t);\n\t},\n);\nPopoverArrow.displayName = \"PopoverArrow\";\n\n// ============================================================================\n// Popover Title\n// ============================================================================\n\nexport interface PopoverTitleProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Title>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Title\n *\n * Title element for the popover content.\n */\nconst PopoverTitle = React.forwardRef<HTMLHeadingElement, PopoverTitleProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Title\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"typography-body-md-md font-semibold\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverTitle.displayName = \"PopoverTitle\";\n\n// ============================================================================\n// Popover Description\n// ============================================================================\n\nexport interface PopoverDescriptionProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BasePopover.Description>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\n/**\n * Popover Description\n *\n * Description element for the popover content.\n */\nconst PopoverDescription = React.forwardRef<\n\tHTMLParagraphElement,\n\tPopoverDescriptionProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<BasePopover.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"typography-body-sm-md text-overlay-text-muted mt-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nPopoverDescription.displayName = \"PopoverDescription\";\n\n// ============================================================================\n// Popover Close\n// ============================================================================\n\nexport interface PopoverCloseProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Close>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Close\n *\n * Close button for the popover.\n */\nconst PopoverClose = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Close\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute right-8 top-8 rounded-surface-ui-small p-4\",\n\t\t\t\t\t\"text-overlay-text-muted hover:text-overlay-text\",\n\t\t\t\t\t\"hover:bg-bg-section focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverClose.displayName = \"PopoverClose\";\n\n// ============================================================================\n// Simple Popover Component\n// ============================================================================\n\nexport interface PopoverProps {\n\t/** The content to show in the popover */\n\tchildren: React.ReactNode;\n\t/** The element that triggers the popover */\n\ttrigger: React.ReactNode;\n\t/** Title for the popover (optional) */\n\ttitle?: React.ReactNode;\n\t/** Side of the trigger to show the popover */\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/** Whether to show an arrow */\n\tshowArrow?: boolean;\n\t/** Whether to show a close button */\n\tshowClose?: 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 * Popover\n *\n * A simple, pre-composed popover component for common use cases.\n * For more complex needs, use the compound components directly.\n *\n * @example\n * ```tsx\n * <Popover\n *   trigger={<Button>Click me</Button>}\n *   title=\"Popover Title\"\n * >\n *   <p>This is the popover content.</p>\n * </Popover>\n * ```\n */\nconst Popover = ({\n\tchildren,\n\ttrigger,\n\ttitle,\n\tside = \"bottom\",\n\tsideOffset = 8,\n\talign = \"center\",\n\tshowArrow = true,\n\tshowClose = false,\n\topen,\n\tdefaultOpen,\n\tonOpenChange,\n\tclassName,\n}: PopoverProps) => {\n\treturn (\n\t\t<PopoverRoot\n\t\t\topen={open}\n\t\t\tdefaultOpen={defaultOpen}\n\t\t\tonOpenChange={onOpenChange}\n\t\t>\n\t\t\t<PopoverTrigger>{trigger}</PopoverTrigger>\n\t\t\t<PopoverPortal>\n\t\t\t\t<PopoverPositioner side={side} sideOffset={sideOffset} align={align}>\n\t\t\t\t\t<PopoverPopup className={className}>\n\t\t\t\t\t\t{showArrow && <PopoverArrow />}\n\t\t\t\t\t\t{showClose && (\n\t\t\t\t\t\t\t<PopoverClose>\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 12 12\"\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t\t\t</PopoverClose>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{title && <PopoverTitle>{title}</PopoverTitle>}\n\t\t\t\t\t\t{title ? (\n\t\t\t\t\t\t\t<PopoverDescription>{children}</PopoverDescription>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tchildren\n\t\t\t\t\t\t)}\n\t\t\t\t\t</PopoverPopup>\n\t\t\t\t</PopoverPositioner>\n\t\t\t</PopoverPortal>\n\t\t</PopoverRoot>\n\t);\n};\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const PopoverParts = Object.assign(PopoverRoot, {\n\tRoot: PopoverRoot,\n\tTrigger: PopoverTrigger,\n\tPortal: PopoverPortal,\n\tBackdrop: PopoverBackdrop,\n\tPositioner: PopoverPositioner,\n\tPopup: PopoverPopup,\n\tArrow: PopoverArrow,\n\tTitle: PopoverTitle,\n\tDescription: PopoverDescription,\n\tClose: PopoverClose,\n});\n\nexport {\n\tPopover,\n\tPopoverRoot,\n\tPopoverTrigger,\n\tPopoverPortal,\n\tPopoverBackdrop,\n\tPopoverPositioner,\n\tPopoverPopup,\n\tPopoverArrow,\n\tPopoverTitle,\n\tPopoverDescription,\n\tPopoverClose,\n\tpopoverPopupVariants,\n\tpopoverArrowVariants,\n};\n"]}

package/dist/prose/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+interface ProseProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+/**
+ * Prose container for long-form content with proper typography and spacing.
+ *
+ * Provides responsive spacing between content blocks:
+ * - Desktop (1440px+): 96px gap
+ * - Tablet (768px+): 72px gap
+ * - Mobile: 56px gap
+ *
+ * Use with ProseSection components for proper content structure.
+ */
+declare const Prose: React.ForwardRefExoticComponent<ProseProps & React.RefAttributes<HTMLDivElement>>;
+interface ProseSectionProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * The heading text for this section
+     */
+    heading: string;
+    /**
+     * The heading level to render (h2 or h3)
+     * @default "h2"
+     */
+    as?: "h2" | "h3";
+    children: React.ReactNode;
+}
+/**
+ * A section within Prose content, containing a heading and body text.
+ *
+ * Responsive typography:
+ * - h2: Uses typography-h3
+ * - h3: Uses typography-h4
+ * - Body: Uses typography-body-medium
+ */
+declare const ProseSection: React.ForwardRefExoticComponent<ProseSectionProps & React.RefAttributes<HTMLElement>>;
+
+export { Prose, type ProseProps, ProseSection, type ProseSectionProps };

package/dist/prose/index.js

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { cnBase } from 'tailwind-variants';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/sections/prose/prose.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var Prose = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-full max-w-[700px] flex-col overflow-hidden",
+          // Responsive gap between sections
+          "gap-56 md:gap-72 xl:gap-96",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Prose.displayName = "Prose";
+var ProseSection = React.forwardRef(
+  ({ className, heading, as = "h2", children, ...props }, ref) => {
+    const Heading = as;
+    const headingClass = as === "h2" ? "typography-h3" : "typography-h4";
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        ref,
+        className: cn(
+          "flex w-full flex-col",
+          // Responsive gap between heading and body
+          "gap-24 md:gap-40",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Heading, { className: cn(headingClass, "text-gray-900"), children: heading }),
+          /* @__PURE__ */ jsx("div", { className: "typography-body-medium flex flex-col gap-[1em] text-gray-800 break-words", children })
+        ]
+      }
+    );
+  }
+);
+ProseSection.displayName = "ProseSection";
+
+export { Prose, ProseSection };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/prose/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/sections/prose/prose.tsx"],"names":["twMerge"],"mappings":";;;;;;AAKO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAOA,MAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACUA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC3C,IAAA,uBACC,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACV,oDAAA;AAAA;AAAA,UAEA,4BAAA;AAAA,UACA;AAAA,SACD;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACF;AAAA,EAEF;AACD;AACA,KAAA,CAAM,WAAA,GAAc,OAAA;AAuBpB,IAAM,YAAA,GAAqB,KAAA,CAAA,UAAA;AAAA,EAC1B,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,EAAA,GAAK,MAAM,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC/D,IAAA,MAAM,OAAA,GAAU,EAAA;AAChB,IAAA,MAAM,YAAA,GAAe,EAAA,KAAO,IAAA,GAAO,eAAA,GAAkB,eAAA;AAErD,IAAA,uBACC,IAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACV,sBAAA;AAAA;AAAA,UAEA,kBAAA;AAAA,UACA;AAAA,SACD;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,WAAQ,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,eAAe,GAClD,QAAA,EAAA,OAAA,EACF,CAAA;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0EAAA,EACb,QAAA,EACF;AAAA;AAAA;AAAA,KACD;AAAA,EAEF;AACD;AACA,YAAA,CAAa,WAAA,GAAc,cAAA","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 * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ProseProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Prose container for long-form content with proper typography and spacing.\n *\n * Provides responsive spacing between content blocks:\n * - Desktop (1440px+): 96px gap\n * - Tablet (768px+): 72px gap\n * - Mobile: 56px gap\n *\n * Use with ProseSection components for proper content structure.\n */\nconst Prose = React.forwardRef<HTMLDivElement, ProseProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex w-full max-w-[700px] flex-col overflow-hidden\",\n\t\t\t\t\t// Responsive gap between sections\n\t\t\t\t\t\"gap-56 md:gap-72 xl:gap-96\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nProse.displayName = \"Prose\";\n\nexport interface ProseSectionProps extends React.HTMLAttributes<HTMLElement> {\n\t/**\n\t * The heading text for this section\n\t */\n\theading: string;\n\t/**\n\t * The heading level to render (h2 or h3)\n\t * @default \"h2\"\n\t */\n\tas?: \"h2\" | \"h3\";\n\tchildren: React.ReactNode;\n}\n\n/**\n * A section within Prose content, containing a heading and body text.\n *\n * Responsive typography:\n * - h2: Uses typography-h3\n * - h3: Uses typography-h4\n * - Body: Uses typography-body-medium\n */\nconst ProseSection = React.forwardRef<HTMLElement, ProseSectionProps>(\n\t({ className, heading, as = \"h2\", children, ...props }, ref) => {\n\t\tconst Heading = as;\n\t\tconst headingClass = as === \"h2\" ? \"typography-h3\" : \"typography-h4\";\n\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex w-full flex-col\",\n\t\t\t\t\t// Responsive gap between heading and body\n\t\t\t\t\t\"gap-24 md:gap-40\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<Heading className={cn(headingClass, \"text-gray-900\")}>\n\t\t\t\t\t{heading}\n\t\t\t\t</Heading>\n\t\t\t\t<div className=\"typography-body-medium flex flex-col gap-[1em] text-gray-800 break-words\">\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nProseSection.displayName = \"ProseSection\";\n\nexport { Prose, ProseSection };\n"]}

package/dist/quote-block/index.d.ts

@@ -0,0 +1,156 @@
+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 quoteBlockVariants: tailwind_variants.TVReturnType<{
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string[];
+    quoteWrapper: string;
+    quote: string[];
+    openQuote: string[];
+    attribution: string;
+    signature: string;
+    byline: string;
+    bylineName: string;
+    bylineTitle: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}, {
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}>, {
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string[];
+    quoteWrapper: string;
+    quote: string[];
+    openQuote: string[];
+    attribution: string;
+    signature: string;
+    byline: string;
+    bylineName: string;
+    bylineTitle: string;
+}, tailwind_variants.TVReturnType<{
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    content: string[];
+    quoteWrapper: string;
+    quote: string[];
+    openQuote: string[];
+    attribution: string;
+    signature: string;
+    byline: string;
+    bylineName: string;
+    bylineTitle: string;
+}, undefined, tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}, {
+    size: {
+        default: {
+            root: string;
+        };
+        compact: {
+            root: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+interface QuoteBlockProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, VariantProps<typeof quoteBlockVariants> {
+    /**
+     * The quote text to display
+     */
+    quote: string;
+    /**
+     * Whether to show decorative quote marks
+     * @default true
+     */
+    showQuoteMarks?: boolean;
+    /**
+     * Signature image URL (optional)
+     */
+    signatureImage?: string;
+    /**
+     * Alt text for signature image
+     */
+    signatureAlt?: string;
+    /**
+     * Attribution name (e.g., "Donald J. Trump")
+     */
+    attributionName?: string;
+    /**
+     * Attribution title (e.g., "45 & 47 President of the United States")
+     */
+    attributionTitle?: string;
+    /**
+     * Background element - use BackgroundImage or similar
+     */
+    background?: React.ReactNode;
+    /**
+     * Overlay opacity (0-1)
+     */
+    overlayOpacity?: number;
+    /**
+     * Overlay color
+     */
+    overlayColor?: string;
+    /**
+     * Custom class for the quote text
+     */
+    quoteClassName?: string;
+    /**
+     * Custom class for the byline name
+     */
+    bylineNameClassName?: string;
+    /**
+     * Custom class for the byline title
+     */
+    bylineTitleClassName?: string;
+}
+declare const QuoteBlock: React.ForwardRefExoticComponent<QuoteBlockProps & React.RefAttributes<HTMLElement>>;
+
+export { QuoteBlock, type QuoteBlockProps, quoteBlockVariants };