@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/dialog/index.d.ts

@@ -0,0 +1,268 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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 { Dialog as Dialog$1 } from '@base-ui-components/react/dialog';
+import * as React from 'react';
+
+/**
+ * Dialog backdrop variants
+ *
+ * Semi-transparent overlay behind the dialog content.
+ */
+declare const dialogBackdropVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Dialog popup variants
+ *
+ * Uses semantic overlay tokens for themeable styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - color.overlay.text - Primary text
+ * - surface.overlay.radius - Rounded corners
+ */
+declare const dialogPopupVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    variant: {
+        default: string[];
+        minimal: string[];
+    };
+}>, unknown, unknown, undefined>>;
+interface DialogRootProps extends Dialog$1.Root.Props {
+    children: React.ReactNode;
+}
+/**
+ * Dialog Root
+ *
+ * Groups all dialog parts and manages open/close state.
+ * Provides focus trap, scroll lock, and escape key handling automatically.
+ */
+declare const DialogRoot: ({ children, ...props }: DialogRootProps) => react_jsx_runtime.JSX.Element;
+interface DialogTriggerProps extends React.ComponentProps<typeof Dialog$1.Trigger> {
+    className?: string;
+}
+/**
+ * Dialog Trigger
+ *
+ * The element that triggers the dialog to open on click.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+interface DialogPortalProps extends Dialog$1.Portal.Props {
+    children: React.ReactNode;
+}
+/**
+ * Dialog Portal
+ *
+ * Renders the dialog in a portal outside the DOM hierarchy.
+ * This ensures proper stacking context and avoids z-index issues.
+ */
+declare const DialogPortal: ({ children, ...props }: DialogPortalProps) => react_jsx_runtime.JSX.Element;
+interface DialogBackdropProps extends Omit<React.ComponentProps<typeof Dialog$1.Backdrop>, "className"> {
+    className?: string;
+}
+/**
+ * Dialog Backdrop
+ *
+ * Semi-transparent overlay that covers the page behind the dialog.
+ * Clicking the backdrop closes the dialog by default.
+ */
+declare const DialogBackdrop: React.ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DialogPopupProps extends Omit<React.ComponentProps<typeof Dialog$1.Popup>, "className">, VariantProps<typeof dialogPopupVariants> {
+    className?: string;
+}
+/**
+ * Dialog Popup
+ *
+ * The dialog content container. Centered on screen with configurable size.
+ * Use `variant="minimal"` for borderless dialogs (video modals, etc.)
+ */
+declare const DialogPopup: React.ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DialogTitleProps extends Omit<React.ComponentProps<typeof Dialog$1.Title>, "className"> {
+    className?: string;
+}
+/**
+ * Dialog Title
+ *
+ * Accessible title for the dialog. Should be used for screen reader support.
+ */
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+interface DialogDescriptionProps extends Omit<React.ComponentProps<typeof Dialog$1.Description>, "className"> {
+    className?: string;
+}
+/**
+ * Dialog Description
+ *
+ * Accessible description for the dialog content.
+ */
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+interface DialogCloseProps extends Omit<React.ComponentProps<typeof Dialog$1.Close>, "className"> {
+    className?: string;
+}
+/**
+ * Dialog Close
+ *
+ * Close button for the dialog. Can be placed anywhere within the dialog.
+ */
+declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * Dialog Body
+ *
+ * Container for the main dialog content. Handles overflow scrolling.
+ */
+declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
+interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * Dialog Footer
+ *
+ * Container for dialog actions (buttons, etc.). Typically placed at the bottom.
+ */
+declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+interface DialogProps {
+    /** The content to show in the dialog */
+    children: React.ReactNode;
+    /** The element that triggers the dialog (optional for controlled mode) */
+    trigger?: React.ReactNode;
+    /** Title for the dialog */
+    title?: React.ReactNode;
+    /** Description for the dialog */
+    description?: React.ReactNode;
+    /** Size of the dialog */
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    /** Visual variant: "default" for card style, "minimal" for borderless (video modals) */
+    variant?: "default" | "minimal";
+    /** Whether to show a close button */
+    showClose?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the popup */
+    className?: string;
+}
+/**
+ * Dialog
+ *
+ * A simple, pre-composed dialog component for common use cases.
+ * For more complex needs, use the compound components directly.
+ *
+ * @example
+ * ```tsx
+ * // With trigger
+ * <Dialog
+ *   trigger={<Button>Open Dialog</Button>}
+ *   title="Dialog Title"
+ *   description="This is the dialog description."
+ * >
+ *   <p>Dialog content goes here.</p>
+ * </Dialog>
+ *
+ * // Controlled mode
+ * <Dialog
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Controlled Dialog"
+ * >
+ *   <p>Content here</p>
+ * </Dialog>
+ * ```
+ */
+declare const Dialog: ({ children, trigger, title, description, size, variant, showClose, open, defaultOpen, onOpenChange, className, }: DialogProps) => react_jsx_runtime.JSX.Element;
+declare const DialogParts: (({ children, ...props }: DialogRootProps) => react_jsx_runtime.JSX.Element) & {
+    Root: ({ children, ...props }: DialogRootProps) => react_jsx_runtime.JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: DialogPortalProps) => react_jsx_runtime.JSX.Element;
+    Backdrop: React.ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Body: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+};
+
+export { Dialog, DialogBackdrop, type DialogBackdropProps, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogParts, DialogPopup, type DialogPopupProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogRoot, type DialogRootProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, dialogBackdropVariants, dialogPopupVariants };

package/dist/dialog/index.js

@@ -0,0 +1,288 @@
+"use client";
+import { Dialog as Dialog$1 } from '@base-ui-components/react/dialog';
+import * as React from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/molecules/dialog/dialog.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var dialogBackdropVariants = tv({
+  base: [
+    // Fixed positioning to cover viewport
+    "fixed inset-0",
+    // Semi-transparent black background using alpha token
+    "bg-alpha-black-50",
+    // Smooth opacity transition
+    "transition-opacity duration-200",
+    // Animation states
+    "data-[starting-style]:opacity-0",
+    "data-[ending-style]:opacity-0",
+    // Ensure backdrop covers full viewport on iOS
+    "min-h-dvh"
+  ]
+});
+var dialogPopupVariants = tv({
+  base: [
+    // Fixed positioning, centered
+    "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+    // Layout
+    "flex flex-col",
+    // Max dimensions with viewport margin (24px on each side = 48px total)
+    "max-h-[calc(100vh-48px)] max-w-[calc(100vw-48px)]",
+    // Ensure above backdrop
+    "z-50",
+    // Animation
+    "transition-all duration-200",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+    "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    // Focus outline
+    "outline-none"
+  ],
+  variants: {
+    size: {
+      sm: "w-full sm:max-w-[400px]",
+      md: "w-full sm:max-w-[560px]",
+      lg: "w-full sm:max-w-[720px]",
+      xl: "w-full sm:max-w-[960px]",
+      full: "w-[calc(100vw-48px)] h-[calc(100vh-48px)]"
+    },
+    variant: {
+      default: [
+        // 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-xl"
+      ],
+      minimal: [
+        // Transparent background, no border/shadow
+        "bg-black",
+        "border-0",
+        "text-white",
+        "rounded-8",
+        "shadow-none",
+        "overflow-hidden"
+      ]
+    }
+  },
+  compoundVariants: [
+    // Default variant padding by size
+    { variant: "default", size: "sm", class: "p-24" },
+    { variant: "default", size: "md", class: "p-32" },
+    { variant: "default", size: "lg", class: "p-32" },
+    { variant: "default", size: "xl", class: "p-40" },
+    { variant: "default", size: "full", class: "p-40" },
+    // Minimal variant has no padding
+    { variant: "minimal", size: "sm", class: "p-0" },
+    { variant: "minimal", size: "md", class: "p-0" },
+    { variant: "minimal", size: "lg", class: "p-0" },
+    { variant: "minimal", size: "xl", class: "p-0" },
+    { variant: "minimal", size: "full", class: "p-0" }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+var DialogRoot = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { ...props, children });
+};
+var DialogTrigger = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const isSingleElement = React.isValidElement(children);
+    if (isSingleElement) {
+      return /* @__PURE__ */ jsx(
+        Dialog$1.Trigger,
+        {
+          ref,
+          className,
+          render: children,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ref, className, ...props, children });
+  }
+);
+DialogTrigger.displayName = "DialogTrigger";
+var DialogPortal = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog$1.Portal, { ...props, children });
+};
+var DialogBackdrop = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Dialog$1.Backdrop,
+      {
+        ref,
+        className: cn(dialogBackdropVariants(), className),
+        ...props
+      }
+    );
+  }
+);
+DialogBackdrop.displayName = "DialogBackdrop";
+var DialogPopup = React.forwardRef(
+  ({ className, size, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Dialog$1.Popup,
+      {
+        ref,
+        className: cn(dialogPopupVariants({ size, variant }), className),
+        ...props
+      }
+    );
+  }
+);
+DialogPopup.displayName = "DialogPopup";
+var DialogTitle = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Dialog$1.Title,
+      {
+        ref,
+        className: cn("typography-h4-md font-semibold mb-8", className),
+        ...props
+      }
+    );
+  }
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      ref,
+      className: cn("typography-body-md-md text-overlay-text-muted", className),
+      ...props
+    }
+  );
+});
+DialogDescription.displayName = "DialogDescription";
+var DialogClose = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Dialog$1.Close,
+      {
+        ref,
+        className: cn(
+          "absolute right-16 top-16 rounded-surface-ui-small p-8",
+          "text-overlay-text-muted hover:text-overlay-text",
+          "hover:bg-bg-section",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+          "transition-colors duration-150",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+DialogClose.displayName = "DialogClose";
+var DialogBody = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex-1 overflow-y-auto", className),
+        ...props
+      }
+    );
+  }
+);
+DialogBody.displayName = "DialogBody";
+var DialogFooter = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-end gap-12 pt-24 mt-auto",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var Dialog = ({
+  children,
+  trigger,
+  title,
+  description,
+  size = "md",
+  variant = "default",
+  showClose = true,
+  open,
+  defaultOpen,
+  onOpenChange,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    DialogRoot,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        trigger && /* @__PURE__ */ jsx(DialogTrigger, { children: trigger }),
+        /* @__PURE__ */ jsxs(DialogPortal, { children: [
+          /* @__PURE__ */ jsx(DialogBackdrop, {}),
+          /* @__PURE__ */ jsxs(DialogPopup, { size, variant, className, children: [
+            showClose && /* @__PURE__ */ jsxs(DialogClose, { children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M2 2L14 14M2 14L14 2",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ] }),
+            title && /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+            description && /* @__PURE__ */ jsx(DialogDescription, { children: description }),
+            /* @__PURE__ */ jsx(DialogBody, { children })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var DialogParts = Object.assign(DialogRoot, {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Portal: DialogPortal,
+  Backdrop: DialogBackdrop,
+  Popup: DialogPopup,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
+  Body: DialogBody,
+  Footer: DialogFooter
+});
+
+export { Dialog, DialogBackdrop, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogParts, DialogPopup, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, dialogBackdropVariants, dialogPopupVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/molecules/dialog/dialog.tsx"],"names":["twMerge","BaseDialog"],"mappings":"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","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnBase as twMerge } from \"tailwind-variants\";\n\nexport { twMerge };\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui-components/react/dialog\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Dialog backdrop variants\n *\n * Semi-transparent overlay behind the dialog content.\n */\nconst dialogBackdropVariants = tv({\n\tbase: [\n\t\t// Fixed positioning to cover viewport\n\t\t\"fixed inset-0\",\n\t\t// Semi-transparent black background using alpha token\n\t\t\"bg-alpha-black-50\",\n\t\t// Smooth opacity transition\n\t\t\"transition-opacity duration-200\",\n\t\t// Animation states\n\t\t\"data-[starting-style]:opacity-0\",\n\t\t\"data-[ending-style]:opacity-0\",\n\t\t// Ensure backdrop covers full viewport on iOS\n\t\t\"min-h-dvh\",\n\t],\n});\n\n/**\n * Dialog 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 */\nconst dialogPopupVariants = tv({\n\tbase: [\n\t\t// Fixed positioning, centered\n\t\t\"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\",\n\t\t// Layout\n\t\t\"flex flex-col\",\n\t\t// Max dimensions with viewport margin (24px on each side = 48px total)\n\t\t\"max-h-[calc(100vh-48px)] max-w-[calc(100vw-48px)]\",\n\t\t// Ensure above backdrop\n\t\t\"z-50\",\n\t\t// Animation\n\t\t\"transition-all duration-200\",\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// Focus outline\n\t\t\"outline-none\",\n\t],\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"w-full sm:max-w-[400px]\",\n\t\t\tmd: \"w-full sm:max-w-[560px]\",\n\t\t\tlg: \"w-full sm:max-w-[720px]\",\n\t\t\txl: \"w-full sm:max-w-[960px]\",\n\t\t\tfull: \"w-[calc(100vw-48px)] h-[calc(100vh-48px)]\",\n\t\t},\n\t\tvariant: {\n\t\t\tdefault: [\n\t\t\t\t// Background - uses overlay background token\n\t\t\t\t\"bg-overlay-background\",\n\t\t\t\t// Border - uses overlay border token\n\t\t\t\t\"border border-overlay-border\",\n\t\t\t\t// Text - uses overlay text token\n\t\t\t\t\"text-overlay-text\",\n\t\t\t\t// Border radius - uses surface overlay token\n\t\t\t\t\"rounded-surface-overlay\",\n\t\t\t\t// Shadow for elevation\n\t\t\t\t\"shadow-xl\",\n\t\t\t],\n\t\t\tminimal: [\n\t\t\t\t// Transparent background, no border/shadow\n\t\t\t\t\"bg-black\",\n\t\t\t\t\"border-0\",\n\t\t\t\t\"text-white\",\n\t\t\t\t\"rounded-8\",\n\t\t\t\t\"shadow-none\",\n\t\t\t\t\"overflow-hidden\",\n\t\t\t],\n\t\t},\n\t},\n\tcompoundVariants: [\n\t\t// Default variant padding by size\n\t\t{ variant: \"default\", size: \"sm\", class: \"p-24\" },\n\t\t{ variant: \"default\", size: \"md\", class: \"p-32\" },\n\t\t{ variant: \"default\", size: \"lg\", class: \"p-32\" },\n\t\t{ variant: \"default\", size: \"xl\", class: \"p-40\" },\n\t\t{ variant: \"default\", size: \"full\", class: \"p-40\" },\n\t\t// Minimal variant has no padding\n\t\t{ variant: \"minimal\", size: \"sm\", class: \"p-0\" },\n\t\t{ variant: \"minimal\", size: \"md\", class: \"p-0\" },\n\t\t{ variant: \"minimal\", size: \"lg\", class: \"p-0\" },\n\t\t{ variant: \"minimal\", size: \"xl\", class: \"p-0\" },\n\t\t{ variant: \"minimal\", size: \"full\", class: \"p-0\" },\n\t],\n\tdefaultVariants: {\n\t\tsize: \"md\",\n\t\tvariant: \"default\",\n\t},\n});\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\nexport interface DialogRootProps extends BaseDialog.Root.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Dialog Root\n *\n * Groups all dialog parts and manages open/close state.\n * Provides focus trap, scroll lock, and escape key handling automatically.\n */\nconst DialogRoot = ({ children, ...props }: DialogRootProps) => {\n\treturn <BaseDialog.Root {...props}>{children}</BaseDialog.Root>;\n};\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\nexport interface DialogTriggerProps\n\textends React.ComponentProps<typeof BaseDialog.Trigger> {\n\tclassName?: string;\n}\n\n/**\n * Dialog Trigger\n *\n * The element that triggers the dialog to open on click.\n * When children is a single React element, uses `render` prop to avoid wrapper element.\n */\nconst DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(\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<BaseDialog.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<BaseDialog.Trigger ref={ref} className={className} {...props}>\n\t\t\t\t{children}\n\t\t\t</BaseDialog.Trigger>\n\t\t);\n\t},\n);\nDialogTrigger.displayName = \"DialogTrigger\";\n\n// ============================================================================\n// Dialog Portal\n// ============================================================================\n\nexport interface DialogPortalProps extends BaseDialog.Portal.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Dialog Portal\n *\n * Renders the dialog in a portal outside the DOM hierarchy.\n * This ensures proper stacking context and avoids z-index issues.\n */\nconst DialogPortal = ({ children, ...props }: DialogPortalProps) => {\n\treturn <BaseDialog.Portal {...props}>{children}</BaseDialog.Portal>;\n};\n\n// ============================================================================\n// Dialog Backdrop\n// ============================================================================\n\nexport interface DialogBackdropProps\n\textends Omit<React.ComponentProps<typeof BaseDialog.Backdrop>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Dialog Backdrop\n *\n * Semi-transparent overlay that covers the page behind the dialog.\n * Clicking the backdrop closes the dialog by default.\n */\nconst DialogBackdrop = React.forwardRef<HTMLDivElement, DialogBackdropProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseDialog.Backdrop\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(dialogBackdropVariants(), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nDialogBackdrop.displayName = \"DialogBackdrop\";\n\n// ============================================================================\n// Dialog Popup\n// ============================================================================\n\nexport interface DialogPopupProps\n\textends Omit<React.ComponentProps<typeof BaseDialog.Popup>, \"className\">,\n\t\tVariantProps<typeof dialogPopupVariants> {\n\tclassName?: string;\n}\n\n/**\n * Dialog Popup\n *\n * The dialog content container. Centered on screen with configurable size.\n * Use `variant=\"minimal\"` for borderless dialogs (video modals, etc.)\n */\nconst DialogPopup = React.forwardRef<HTMLDivElement, DialogPopupProps>(\n\t({ className, size, variant, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseDialog.Popup\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(dialogPopupVariants({ size, variant }), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nDialogPopup.displayName = \"DialogPopup\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\nexport interface DialogTitleProps\n\textends Omit<React.ComponentProps<typeof BaseDialog.Title>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Dialog Title\n *\n * Accessible title for the dialog. Should be used for screen reader support.\n */\nconst DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseDialog.Title\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"typography-h4-md font-semibold mb-8\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nDialogTitle.displayName = \"DialogTitle\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\nexport interface DialogDescriptionProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BaseDialog.Description>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\n/**\n * Dialog Description\n *\n * Accessible description for the dialog content.\n */\nconst DialogDescription = React.forwardRef<\n\tHTMLParagraphElement,\n\tDialogDescriptionProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<BaseDialog.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"typography-body-md-md text-overlay-text-muted\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nDialogDescription.displayName = \"DialogDescription\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\nexport interface DialogCloseProps\n\textends Omit<React.ComponentProps<typeof BaseDialog.Close>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Dialog Close\n *\n * Close button for the dialog. Can be placed anywhere within the dialog.\n */\nconst DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseDialog.Close\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute right-16 top-16 rounded-surface-ui-small p-8\",\n\t\t\t\t\t\"text-overlay-text-muted hover:text-overlay-text\",\n\t\t\t\t\t\"hover:bg-bg-section\",\n\t\t\t\t\t\"focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\",\n\t\t\t\t\t\"transition-colors duration-150\",\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);\nDialogClose.displayName = \"DialogClose\";\n\n// ============================================================================\n// Dialog Body\n// ============================================================================\n\nexport interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n\tclassName?: string;\n}\n\n/**\n * Dialog Body\n *\n * Container for the main dialog content. Handles overflow scrolling.\n */\nconst DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"flex-1 overflow-y-auto\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nDialogBody.displayName = \"DialogBody\";\n\n// ============================================================================\n// Dialog Footer\n// ============================================================================\n\nexport interface DialogFooterProps\n\textends React.HTMLAttributes<HTMLDivElement> {\n\tclassName?: string;\n}\n\n/**\n * Dialog Footer\n *\n * Container for dialog actions (buttons, etc.). Typically placed at the bottom.\n */\nconst DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n\t({ className, ...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 items-center justify-end gap-12 pt-24 mt-auto\",\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);\nDialogFooter.displayName = \"DialogFooter\";\n\n// ============================================================================\n// Simple Dialog Component\n// ============================================================================\n\nexport interface DialogProps {\n\t/** The content to show in the dialog */\n\tchildren: React.ReactNode;\n\t/** The element that triggers the dialog (optional for controlled mode) */\n\ttrigger?: React.ReactNode;\n\t/** Title for the dialog */\n\ttitle?: React.ReactNode;\n\t/** Description for the dialog */\n\tdescription?: React.ReactNode;\n\t/** Size of the dialog */\n\tsize?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\t/** Visual variant: \"default\" for card style, \"minimal\" for borderless (video modals) */\n\tvariant?: \"default\" | \"minimal\";\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 * Dialog\n *\n * A simple, pre-composed dialog component for common use cases.\n * For more complex needs, use the compound components directly.\n *\n * @example\n * ```tsx\n * // With trigger\n * <Dialog\n *   trigger={<Button>Open Dialog</Button>}\n *   title=\"Dialog Title\"\n *   description=\"This is the dialog description.\"\n * >\n *   <p>Dialog content goes here.</p>\n * </Dialog>\n *\n * // Controlled mode\n * <Dialog\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   title=\"Controlled Dialog\"\n * >\n *   <p>Content here</p>\n * </Dialog>\n * ```\n */\nconst Dialog = ({\n\tchildren,\n\ttrigger,\n\ttitle,\n\tdescription,\n\tsize = \"md\",\n\tvariant = \"default\",\n\tshowClose = true,\n\topen,\n\tdefaultOpen,\n\tonOpenChange,\n\tclassName,\n}: DialogProps) => {\n\treturn (\n\t\t<DialogRoot\n\t\t\topen={open}\n\t\t\tdefaultOpen={defaultOpen}\n\t\t\tonOpenChange={onOpenChange}\n\t\t>\n\t\t\t{trigger && <DialogTrigger>{trigger}</DialogTrigger>}\n\t\t\t<DialogPortal>\n\t\t\t\t<DialogBackdrop />\n\t\t\t\t<DialogPopup size={size} variant={variant} className={className}>\n\t\t\t\t\t{showClose && (\n\t\t\t\t\t\t<DialogClose>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\td=\"M2 2L14 14M2 14L14 2\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t\t</DialogClose>\n\t\t\t\t\t)}\n\t\t\t\t\t{title && <DialogTitle>{title}</DialogTitle>}\n\t\t\t\t\t{description && <DialogDescription>{description}</DialogDescription>}\n\t\t\t\t\t<DialogBody>{children}</DialogBody>\n\t\t\t\t</DialogPopup>\n\t\t\t</DialogPortal>\n\t\t</DialogRoot>\n\t);\n};\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const DialogParts = Object.assign(DialogRoot, {\n\tRoot: DialogRoot,\n\tTrigger: DialogTrigger,\n\tPortal: DialogPortal,\n\tBackdrop: DialogBackdrop,\n\tPopup: DialogPopup,\n\tTitle: DialogTitle,\n\tDescription: DialogDescription,\n\tClose: DialogClose,\n\tBody: DialogBody,\n\tFooter: DialogFooter,\n});\n\nexport {\n\tDialog,\n\tDialogRoot,\n\tDialogTrigger,\n\tDialogPortal,\n\tDialogBackdrop,\n\tDialogPopup,\n\tDialogTitle,\n\tDialogDescription,\n\tDialogClose,\n\tDialogBody,\n\tDialogFooter,\n\tdialogBackdropVariants,\n\tdialogPopupVariants,\n};\n"]}

package/dist/faq-section/index.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { twoColumnSectionVariants } from '../two-column-section/index.js';
+import 'tailwind-variants/dist/config.js';
+
+interface FaqSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof twoColumnSectionVariants> {
+    /**
+     * The title text displayed in the left column
+     * @default "Frequently Asked Questions"
+     */
+    title?: string;
+    /**
+     * The FAQ content - typically an Accordion with AccordionItems
+     */
+    children: React.ReactNode;
+}
+/**
+ * FaqSection component for displaying FAQ content in a two-column layout.
+ *
+ * Wraps TwoColumnSection with FAQ-specific defaults and typography.
+ *
+ * Layout:
+ * - Mobile/Tablet: Stacked (title above content)
+ * - Desktop (lg+): Title left (~40%), FAQ content right (~60%)
+ *
+ * @example
+ * ```tsx
+ * <FaqSection>
+ *   <Accordion defaultExpanded="faq-1">
+ *     <AccordionItem id="faq-1" title="What is the US Tech Force?">
+ *       Tech Force will be an elite group of technology specialists...
+ *     </AccordionItem>
+ *     <AccordionItem id="faq-2" title="What skills are required?">
+ *       We're looking for expertise in software engineering...
+ *     </AccordionItem>
+ *   </Accordion>
+ * </FaqSection>
+ *
+ * // With custom title
+ * <FaqSection title="Common Questions" colorScheme="light">
+ *   ...
+ * </FaqSection>
+ * ```
+ */
+declare const FaqSection: React.ForwardRefExoticComponent<FaqSectionProps & React.RefAttributes<HTMLElement>>;
+
+export { FaqSection, type FaqSectionProps };