@tribepad/themis 1.0.1 → 1.0.2

package/dist/elements/FormLayout/index.js

@@ -1,172 +1,3 @@
 "use client";
-'use strict';
-
-var react = require('react');
-var classVarianceAuthority = require('class-variance-authority');
-var lucideReact = require('lucide-react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/elements/FormLayout/FormLayout.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var formLayoutBodyVariants = classVarianceAuthority.cva(
-  // Base styles - grid layout with responsive columns
-  "grid grid-cols-1 mt-6",
-  {
-    variants: {
-      // Column variants (responsive: mobile single, desktop optional double)
-      columns: {
-        1: "",
-        // Single column (no additional classes needed)
-        2: "md:grid-cols-2"
-        // Double column on md breakpoint and up
-      },
-      // Density variants (controls gap between form fields)
-      density: {
-        default: "gap-4",
-        // 16px gap
-        compact: "gap-2",
-        // 8px gap
-        comfortable: "gap-6"
-        // 24px gap
-      }
-    },
-    defaultVariants: {
-      columns: 1,
-      density: "default"
-    }
-  }
-);
-var Heading = ({ level, id, className, children }) => {
-  const Tag = `h${level}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { id, className, children });
-};
-var FormLayout = react.forwardRef(
-  ({
-    title,
-    requiredNote,
-    description,
-    columns = 1,
-    headingLevel = 2,
-    density = "default",
-    errorMessage,
-    successMessage,
-    fieldErrors: _fieldErrors,
-    autoHideSuccess = false,
-    autoHideDuration = 5e3,
-    className,
-    children,
-    actions,
-    id,
-    "data-testid": dataTestId,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    "aria-describedby": ariaDescribedby,
-    ...props
-  }, ref) => {
-    const headingId = react.useId();
-    const finalHeadingId = id ? `${id}-title` : headingId;
-    const finalAriaLabelledby = ariaLabelledby || finalHeadingId;
-    const [showSuccess, setShowSuccess] = react.useState(true);
-    react.useEffect(() => {
-      setShowSuccess(true);
-      if (successMessage && autoHideSuccess) {
-        const timer = setTimeout(() => {
-          setShowSuccess(false);
-        }, autoHideDuration);
-        return () => clearTimeout(timer);
-      }
-    }, [successMessage, autoHideSuccess, autoHideDuration]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "section",
-      {
-        ref,
-        id,
-        "data-testid": dataTestId,
-        "aria-label": ariaLabel,
-        "aria-labelledby": !ariaLabel ? finalAriaLabelledby : void 0,
-        "aria-describedby": ariaDescribedby,
-        className: cn("form-layout w-full", className),
-        ...props,
-        children: [
-          errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              role: "alert",
-              "aria-live": "assertive",
-              "data-testid": "form-layout-error",
-              className: cn(
-                "rounded-lg border px-4 py-3 mb-6 text-sm",
-                "border-[var(--destructive-background)] bg-[var(--destructive-foreground)] text-[var(--destructive-background)]",
-                "flex items-start gap-3"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-5 w-5 flex-shrink-0 mt-0.5", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Error" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1", children: errorMessage })
-                ] })
-              ]
-            }
-          ),
-          successMessage && showSuccess && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              role: "status",
-              "aria-live": "polite",
-              "data-testid": "form-layout-success",
-              className: cn(
-                "rounded-lg border px-4 py-3 mb-6 text-sm",
-                "border-success bg-success/10 text-success",
-                "flex items-start gap-3"
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "h-5 w-5 flex-shrink-0 mt-0.5", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Success" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1", children: successMessage })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "form-layout-header mb-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Heading,
-              {
-                level: headingLevel,
-                id: finalHeadingId,
-                className: "text-[var(--content-foreground)] font-semibold",
-                children: title
-              }
-            ),
-            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--content-foreground)] leading-relaxed mt-2", children: description }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--content-foreground)]", children: requiredNote })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "data-testid": "form-layout-body",
-              className: cn(
-                formLayoutBodyVariants({
-                  columns,
-                  density
-                })
-              ),
-              children
-            }
-          ),
-          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "form-layout-actions", className: "flex justify-between items-center mt-4 gap-2 max-md:flex-col max-md:w-full", children: actions })
-        ]
-      }
-    );
-  }
-);
-FormLayout.displayName = "FormLayout";
-
-exports.FormLayout = FormLayout;
-exports.formLayoutBodyVariants = formLayoutBodyVariants;
-//# sourceMappingURL=index.js.map
+'use strict';var react=require('react'),classVarianceAuthority=require('class-variance-authority'),lucideReact=require('lucide-react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function r(...a){return tailwindMerge.twMerge(clsx.clsx(a))}var g=classVarianceAuthority.cva("grid grid-cols-1 mt-6",{variants:{columns:{1:"",2:"md:grid-cols-2"},density:{default:"gap-4",compact:"gap-2",comfortable:"gap-6"}},defaultVariants:{columns:1,density:"default"}}),_=({level:a,id:l,className:o,children:d})=>{let i=`h${a}`;return jsxRuntime.jsx(i,{id:l,className:o,children:d})},x=react.forwardRef(({title:a,requiredNote:l,description:o,columns:d=1,headingLevel:i=2,density:b="default",errorMessage:n,successMessage:s,fieldErrors:j,autoHideSuccess:c=false,autoHideDuration:f=5e3,className:N,children:h,actions:u,id:m,"data-testid":L,"aria-label":p,"aria-labelledby":F,"aria-describedby":w,...C},k)=>{let E=react.useId(),y=m?`${m}-title`:E,H=F||y,[S,v]=react.useState(true);return react.useEffect(()=>{if(v(true),s&&c){let P=setTimeout(()=>{v(false);},f);return ()=>clearTimeout(P)}},[s,c,f]),jsxRuntime.jsxs("section",{ref:k,id:m,"data-testid":L,"aria-label":p,"aria-labelledby":p?void 0:H,"aria-describedby":w,className:r("form-layout w-full",N),...C,children:[n&&jsxRuntime.jsxs("div",{role:"alert","aria-live":"assertive","data-testid":"form-layout-error",className:r("rounded-lg border px-4 py-3 mb-6 text-sm","border-[var(--destructive-background)] bg-[var(--destructive-foreground)] text-[var(--destructive-background)]","flex items-start gap-3"),children:[jsxRuntime.jsx(lucideReact.AlertCircle,{className:"h-5 w-5 flex-shrink-0 mt-0.5","aria-hidden":"true"}),jsxRuntime.jsxs("div",{className:"flex-1",children:[jsxRuntime.jsx("p",{className:"font-medium",children:"Error"}),jsxRuntime.jsx("p",{className:"mt-1",children:n})]})]}),s&&S&&jsxRuntime.jsxs("div",{role:"status","aria-live":"polite","data-testid":"form-layout-success",className:r("rounded-lg border px-4 py-3 mb-6 text-sm","border-success bg-success/10 text-success","flex items-start gap-3"),children:[jsxRuntime.jsx(lucideReact.CheckCircle2,{className:"h-5 w-5 flex-shrink-0 mt-0.5","aria-hidden":"true"}),jsxRuntime.jsxs("div",{className:"flex-1",children:[jsxRuntime.jsx("p",{className:"font-medium",children:"Success"}),jsxRuntime.jsx("p",{className:"mt-1",children:s})]})]}),jsxRuntime.jsxs("header",{className:"form-layout-header mb-6",children:[jsxRuntime.jsx(_,{level:i,id:y,className:"text-[var(--content-foreground)] font-semibold",children:a}),o&&jsxRuntime.jsx("p",{className:"text-sm text-[var(--content-foreground)] leading-relaxed mt-2",children:o}),jsxRuntime.jsx("p",{className:"text-sm text-[var(--content-foreground)]",children:l})]}),jsxRuntime.jsx("div",{"data-testid":"form-layout-body",className:r(g({columns:d,density:b})),children:h}),u&&jsxRuntime.jsx("div",{"data-testid":"form-layout-actions",className:"flex justify-between items-center mt-4 gap-2 max-md:flex-col max-md:w-full",children:u})]})});x.displayName="FormLayout";exports.FormLayout=x;exports.formLayoutBodyVariants=g;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/elements/FormLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/FormLayout/FormLayout.tsx"],"names":["twMerge","clsx","cva","jsx","forwardRef","useId","useState","useEffect","jsxs","AlertCircle","CheckCircle2"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\n/**\n * FormLayout Component\n * Structural layout component for consistent form presentation\n *\n * @see FormLayout-plan.md (Component API Design)\n * @see FormLayout-design-decisions.md (Approved design specifications)\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements - WCAG 2.2 AAA)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { JSX, forwardRef, FC, useId, ReactNode, useState, useEffect } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { AlertCircle, CheckCircle2 } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport type { FormLayoutProps, HeadingLevel } from './FormLayout.types';\n\n/**\n * Body variant styles using CVA\n * Controls column layout and field spacing (density)\n */\nconst formLayoutBodyVariants = cva(\n  // Base styles - grid layout with responsive columns\n  \"grid grid-cols-1 mt-6\",\n  {\n    variants: {\n      // Column variants (responsive: mobile single, desktop optional double)\n      columns: {\n        1: \"\",  // Single column (no additional classes needed)\n        2: \"md:grid-cols-2\",  // Double column on md breakpoint and up\n      },\n      // Density variants (controls gap between form fields)\n      density: {\n        default: \"gap-4\",      // 16px gap\n        compact: \"gap-2\",      // 8px gap\n        comfortable: \"gap-6\",  // 24px gap\n      },\n    },\n    defaultVariants: {\n      columns: 1,\n      density: \"default\",\n    },\n  }\n);\n\n/**\n * Polymorphic Heading Component\n * Renders h1-h6 based on headingLevel prop for proper document hierarchy\n */\ninterface HeadingProps {\n  level: HeadingLevel;\n  id: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst Heading: FC<HeadingProps> = ({ level, id, className, children }) => {\n  const Tag = `h${level}` as keyof JSX.IntrinsicElements;\n\n  return (\n    <Tag id={id} className={className}>\n      {children}\n    </Tag>\n  );\n};\n\n/**\n * FormLayout Component\n * Provides consistent form structure with header, body, and optional actions\n */\nexport const FormLayout = forwardRef<HTMLElement, FormLayoutProps>(\n  (\n    {\n      title,\n      requiredNote,\n      description,\n      columns = 1,\n      headingLevel = 2,\n      density = 'default',\n      errorMessage,\n      successMessage,\n      fieldErrors: _fieldErrors,\n      autoHideSuccess = false,\n      autoHideDuration = 5000,\n      className,\n      children,\n      actions,\n      id,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique IDs for accessibility\n    const headingId = useId();\n    const finalHeadingId = id ? `${id}-title` : headingId;\n\n    // Determine aria-labelledby (use prop if provided, otherwise point to heading)\n    const finalAriaLabelledby = ariaLabelledby || finalHeadingId;\n\n    // Auto-hide success message state\n    const [showSuccess, setShowSuccess] = useState(true);\n\n    // Auto-hide success message after duration\n    useEffect(() => {\n      // Reset show state when message changes (must come first!)\n      setShowSuccess(true);\n\n      // Set timeout to hide if autoHideSuccess is enabled\n      if (successMessage && autoHideSuccess) {\n        const timer = setTimeout(() => {\n          setShowSuccess(false);\n        }, autoHideDuration);\n\n        return (): void => clearTimeout(timer);\n      }\n    }, [successMessage, autoHideSuccess, autoHideDuration]);\n\n    return (\n      <section\n        ref={ref}\n        id={id}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        aria-labelledby={!ariaLabel ? finalAriaLabelledby : undefined}\n        aria-describedby={ariaDescribedby}\n        className={cn(\"form-layout w-full\", className)}\n        {...props}\n      >\n        {/* Error Message Alert */}\n        {errorMessage && (\n          <div\n            role=\"alert\"\n            aria-live=\"assertive\"\n            data-testid=\"form-layout-error\"\n            className={cn(\n              \"rounded-lg border px-4 py-3 mb-6 text-sm\",\n              \"border-[var(--destructive-background)] bg-[var(--destructive-foreground)] text-[var(--destructive-background)]\",\n              \"flex items-start gap-3\"\n            )}\n          >\n            <AlertCircle className=\"h-5 w-5 flex-shrink-0 mt-0.5\" aria-hidden=\"true\" />\n            <div className=\"flex-1\">\n              <p className=\"font-medium\">Error</p>\n              <p className=\"mt-1\">{errorMessage}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Success Message Alert */}\n        {successMessage && showSuccess && (\n          <div\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"form-layout-success\"\n            className={cn(\n              \"rounded-lg border px-4 py-3 mb-6 text-sm\",\n              \"border-success bg-success/10 text-success\",\n              \"flex items-start gap-3\"\n            )}\n          >\n            <CheckCircle2 className=\"h-5 w-5 flex-shrink-0 mt-0.5\" aria-hidden=\"true\" />\n            <div className=\"flex-1\">\n              <p className=\"font-medium\">Success</p>\n              <p className=\"mt-1\">{successMessage}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Header Section: Title → Description → Required Note */}\n        <header className=\"form-layout-header mb-6\">\n          {/* Title (configurable heading level) */}\n          <Heading\n            level={headingLevel}\n            id={finalHeadingId}\n            className=\"text-[var(--content-foreground)] font-semibold\"\n          >\n            {title}\n          </Heading>\n\n          {/* Description (optional) */}\n          {description && (\n            <p className=\"text-sm text-[var(--content-foreground)] leading-relaxed mt-2\">\n              {description}\n            </p>\n          )}\n\n          {/* Required Note (always visible) */}\n          <p className=\"text-sm text-[var(--content-foreground)]\">\n            {requiredNote}\n          </p>\n        </header>\n\n        {/* Body Section: Form fields with configurable layout */}\n        <div\n          data-testid=\"form-layout-body\"\n          className={cn(\n            formLayoutBodyVariants({\n              columns,\n              density,\n            })\n          )}\n        >\n          {children}\n        </div>\n\n        {/* Actions Section: Optional footer for buttons */}\n        {actions && (\n          <div data-testid=\"form-layout-actions\" className=\"flex justify-between items-center mt-4 gap-2 max-md:flex-col max-md:w-full\">\n            {actions}\n          </div>\n        )}\n      </section>\n    );\n  }\n);\n\nFormLayout.displayName = \"FormLayout\";\n\nexport { formLayoutBodyVariants };\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/FormLayout/FormLayout.tsx"],"names":["cn","inputs","twMerge","clsx","formLayoutBodyVariants","cva","Heading","level","id","className","children","Tag","jsx","FormLayout","forwardRef","title","requiredNote","description","columns","headingLevel","density","errorMessage","successMessage","_fieldErrors","autoHideSuccess","autoHideDuration","actions","dataTestId","ariaLabel","ariaLabelledby","ariaDescribedby","props","ref","headingId","useId","finalHeadingId","finalAriaLabelledby","showSuccess","setShowSuccess","useState","useEffect","timer","jsxs","AlertCircle","CheckCircle2"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\n/**\n * FormLayout Component\n * Structural layout component for consistent form presentation\n *\n * @see FormLayout-plan.md (Component API Design)\n * @see FormLayout-design-decisions.md (Approved design specifications)\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements - WCAG 2.2 AAA)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { JSX, forwardRef, FC, useId, ReactNode, useState, useEffect } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { AlertCircle, CheckCircle2 } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport type { FormLayoutProps, HeadingLevel } from './FormLayout.types';\n\n/**\n * Body variant styles using CVA\n * Controls column layout and field spacing (density)\n */\nconst formLayoutBodyVariants = cva(\n  // Base styles - grid layout with responsive columns\n  \"grid grid-cols-1 mt-6\",\n  {\n    variants: {\n      // Column variants (responsive: mobile single, desktop optional double)\n      columns: {\n        1: \"\",  // Single column (no additional classes needed)\n        2: \"md:grid-cols-2\",  // Double column on md breakpoint and up\n      },\n      // Density variants (controls gap between form fields)\n      density: {\n        default: \"gap-4\",      // 16px gap\n        compact: \"gap-2\",      // 8px gap\n        comfortable: \"gap-6\",  // 24px gap\n      },\n    },\n    defaultVariants: {\n      columns: 1,\n      density: \"default\",\n    },\n  }\n);\n\n/**\n * Polymorphic Heading Component\n * Renders h1-h6 based on headingLevel prop for proper document hierarchy\n */\ninterface HeadingProps {\n  level: HeadingLevel;\n  id: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst Heading: FC<HeadingProps> = ({ level, id, className, children }) => {\n  const Tag = `h${level}` as keyof JSX.IntrinsicElements;\n\n  return (\n    <Tag id={id} className={className}>\n      {children}\n    </Tag>\n  );\n};\n\n/**\n * FormLayout Component\n * Provides consistent form structure with header, body, and optional actions\n */\nexport const FormLayout = forwardRef<HTMLElement, FormLayoutProps>(\n  (\n    {\n      title,\n      requiredNote,\n      description,\n      columns = 1,\n      headingLevel = 2,\n      density = 'default',\n      errorMessage,\n      successMessage,\n      fieldErrors: _fieldErrors,\n      autoHideSuccess = false,\n      autoHideDuration = 5000,\n      className,\n      children,\n      actions,\n      id,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique IDs for accessibility\n    const headingId = useId();\n    const finalHeadingId = id ? `${id}-title` : headingId;\n\n    // Determine aria-labelledby (use prop if provided, otherwise point to heading)\n    const finalAriaLabelledby = ariaLabelledby || finalHeadingId;\n\n    // Auto-hide success message state\n    const [showSuccess, setShowSuccess] = useState(true);\n\n    // Auto-hide success message after duration\n    useEffect(() => {\n      // Reset show state when message changes (must come first!)\n      setShowSuccess(true);\n\n      // Set timeout to hide if autoHideSuccess is enabled\n      if (successMessage && autoHideSuccess) {\n        const timer = setTimeout(() => {\n          setShowSuccess(false);\n        }, autoHideDuration);\n\n        return (): void => clearTimeout(timer);\n      }\n    }, [successMessage, autoHideSuccess, autoHideDuration]);\n\n    return (\n      <section\n        ref={ref}\n        id={id}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        aria-labelledby={!ariaLabel ? finalAriaLabelledby : undefined}\n        aria-describedby={ariaDescribedby}\n        className={cn(\"form-layout w-full\", className)}\n        {...props}\n      >\n        {/* Error Message Alert */}\n        {errorMessage && (\n          <div\n            role=\"alert\"\n            aria-live=\"assertive\"\n            data-testid=\"form-layout-error\"\n            className={cn(\n              \"rounded-lg border px-4 py-3 mb-6 text-sm\",\n              \"border-[var(--destructive-background)] bg-[var(--destructive-foreground)] text-[var(--destructive-background)]\",\n              \"flex items-start gap-3\"\n            )}\n          >\n            <AlertCircle className=\"h-5 w-5 flex-shrink-0 mt-0.5\" aria-hidden=\"true\" />\n            <div className=\"flex-1\">\n              <p className=\"font-medium\">Error</p>\n              <p className=\"mt-1\">{errorMessage}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Success Message Alert */}\n        {successMessage && showSuccess && (\n          <div\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"form-layout-success\"\n            className={cn(\n              \"rounded-lg border px-4 py-3 mb-6 text-sm\",\n              \"border-success bg-success/10 text-success\",\n              \"flex items-start gap-3\"\n            )}\n          >\n            <CheckCircle2 className=\"h-5 w-5 flex-shrink-0 mt-0.5\" aria-hidden=\"true\" />\n            <div className=\"flex-1\">\n              <p className=\"font-medium\">Success</p>\n              <p className=\"mt-1\">{successMessage}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Header Section: Title → Description → Required Note */}\n        <header className=\"form-layout-header mb-6\">\n          {/* Title (configurable heading level) */}\n          <Heading\n            level={headingLevel}\n            id={finalHeadingId}\n            className=\"text-[var(--content-foreground)] font-semibold\"\n          >\n            {title}\n          </Heading>\n\n          {/* Description (optional) */}\n          {description && (\n            <p className=\"text-sm text-[var(--content-foreground)] leading-relaxed mt-2\">\n              {description}\n            </p>\n          )}\n\n          {/* Required Note (always visible) */}\n          <p className=\"text-sm text-[var(--content-foreground)]\">\n            {requiredNote}\n          </p>\n        </header>\n\n        {/* Body Section: Form fields with configurable layout */}\n        <div\n          data-testid=\"form-layout-body\"\n          className={cn(\n            formLayoutBodyVariants({\n              columns,\n              density,\n            })\n          )}\n        >\n          {children}\n        </div>\n\n        {/* Actions Section: Optional footer for buttons */}\n        {actions && (\n          <div data-testid=\"form-layout-actions\" className=\"flex justify-between items-center mt-4 gap-2 max-md:flex-col max-md:w-full\">\n            {actions}\n          </div>\n        )}\n      </section>\n    );\n  }\n);\n\nFormLayout.displayName = \"FormLayout\";\n\nexport { formLayoutBodyVariants };\n"]}

package/dist/elements/FormLayout/index.mjs

@@ -1,169 +1,3 @@
 "use client";
-import { forwardRef, useId, useState, useEffect } from 'react';
-import { cva } from 'class-variance-authority';
-import { AlertCircle, CheckCircle2 } from 'lucide-react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/elements/FormLayout/FormLayout.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var formLayoutBodyVariants = cva(
-  // Base styles - grid layout with responsive columns
-  "grid grid-cols-1 mt-6",
-  {
-    variants: {
-      // Column variants (responsive: mobile single, desktop optional double)
-      columns: {
-        1: "",
-        // Single column (no additional classes needed)
-        2: "md:grid-cols-2"
-        // Double column on md breakpoint and up
-      },
-      // Density variants (controls gap between form fields)
-      density: {
-        default: "gap-4",
-        // 16px gap
-        compact: "gap-2",
-        // 8px gap
-        comfortable: "gap-6"
-        // 24px gap
-      }
-    },
-    defaultVariants: {
-      columns: 1,
-      density: "default"
-    }
-  }
-);
-var Heading = ({ level, id, className, children }) => {
-  const Tag = `h${level}`;
-  return /* @__PURE__ */ jsx(Tag, { id, className, children });
-};
-var FormLayout = forwardRef(
-  ({
-    title,
-    requiredNote,
-    description,
-    columns = 1,
-    headingLevel = 2,
-    density = "default",
-    errorMessage,
-    successMessage,
-    fieldErrors: _fieldErrors,
-    autoHideSuccess = false,
-    autoHideDuration = 5e3,
-    className,
-    children,
-    actions,
-    id,
-    "data-testid": dataTestId,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledby,
-    "aria-describedby": ariaDescribedby,
-    ...props
-  }, ref) => {
-    const headingId = useId();
-    const finalHeadingId = id ? `${id}-title` : headingId;
-    const finalAriaLabelledby = ariaLabelledby || finalHeadingId;
-    const [showSuccess, setShowSuccess] = useState(true);
-    useEffect(() => {
-      setShowSuccess(true);
-      if (successMessage && autoHideSuccess) {
-        const timer = setTimeout(() => {
-          setShowSuccess(false);
-        }, autoHideDuration);
-        return () => clearTimeout(timer);
-      }
-    }, [successMessage, autoHideSuccess, autoHideDuration]);
-    return /* @__PURE__ */ jsxs(
-      "section",
-      {
-        ref,
-        id,
-        "data-testid": dataTestId,
-        "aria-label": ariaLabel,
-        "aria-labelledby": !ariaLabel ? finalAriaLabelledby : void 0,
-        "aria-describedby": ariaDescribedby,
-        className: cn("form-layout w-full", className),
-        ...props,
-        children: [
-          errorMessage && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "alert",
-              "aria-live": "assertive",
-              "data-testid": "form-layout-error",
-              className: cn(
-                "rounded-lg border px-4 py-3 mb-6 text-sm",
-                "border-[var(--destructive-background)] bg-[var(--destructive-foreground)] text-[var(--destructive-background)]",
-                "flex items-start gap-3"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 flex-shrink-0 mt-0.5", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Error" }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-1", children: errorMessage })
-                ] })
-              ]
-            }
-          ),
-          successMessage && showSuccess && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "status",
-              "aria-live": "polite",
-              "data-testid": "form-layout-success",
-              className: cn(
-                "rounded-lg border px-4 py-3 mb-6 text-sm",
-                "border-success bg-success/10 text-success",
-                "flex items-start gap-3"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(CheckCircle2, { className: "h-5 w-5 flex-shrink-0 mt-0.5", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Success" }),
-                  /* @__PURE__ */ jsx("p", { className: "mt-1", children: successMessage })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("header", { className: "form-layout-header mb-6", children: [
-            /* @__PURE__ */ jsx(
-              Heading,
-              {
-                level: headingLevel,
-                id: finalHeadingId,
-                className: "text-[var(--content-foreground)] font-semibold",
-                children: title
-              }
-            ),
-            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--content-foreground)] leading-relaxed mt-2", children: description }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--content-foreground)]", children: requiredNote })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-testid": "form-layout-body",
-              className: cn(
-                formLayoutBodyVariants({
-                  columns,
-                  density
-                })
-              ),
-              children
-            }
-          ),
-          actions && /* @__PURE__ */ jsx("div", { "data-testid": "form-layout-actions", className: "flex justify-between items-center mt-4 gap-2 max-md:flex-col max-md:w-full", children: actions })
-        ]
-      }
-    );
-  }
-);
-FormLayout.displayName = "FormLayout";
-
-export { FormLayout, formLayoutBodyVariants };
-//# sourceMappingURL=index.mjs.map
+import {forwardRef,useId,useState,useEffect}from'react';import {cva}from'class-variance-authority';import {AlertCircle,CheckCircle2}from'lucide-react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsxs,jsx}from'react/jsx-runtime';function r(...a){return twMerge(clsx(a))}var g=cva("grid grid-cols-1 mt-6",{variants:{columns:{1:"",2:"md:grid-cols-2"},density:{default:"gap-4",compact:"gap-2",comfortable:"gap-6"}},defaultVariants:{columns:1,density:"default"}}),_=({level:a,id:l,className:o,children:d})=>{let i=`h${a}`;return jsx(i,{id:l,className:o,children:d})},x=forwardRef(({title:a,requiredNote:l,description:o,columns:d=1,headingLevel:i=2,density:b="default",errorMessage:n,successMessage:s,fieldErrors:j,autoHideSuccess:c=false,autoHideDuration:f=5e3,className:N,children:h,actions:u,id:m,"data-testid":L,"aria-label":p,"aria-labelledby":F,"aria-describedby":w,...C},k)=>{let E=useId(),y=m?`${m}-title`:E,H=F||y,[S,v]=useState(true);return useEffect(()=>{if(v(true),s&&c){let P=setTimeout(()=>{v(false);},f);return ()=>clearTimeout(P)}},[s,c,f]),jsxs("section",{ref:k,id:m,"data-testid":L,"aria-label":p,"aria-labelledby":p?void 0:H,"aria-describedby":w,className:r("form-layout w-full",N),...C,children:[n&&jsxs("div",{role:"alert","aria-live":"assertive","data-testid":"form-layout-error",className:r("rounded-lg border px-4 py-3 mb-6 text-sm","border-[var(--destructive-background)] bg-[var(--destructive-foreground)] text-[var(--destructive-background)]","flex items-start gap-3"),children:[jsx(AlertCircle,{className:"h-5 w-5 flex-shrink-0 mt-0.5","aria-hidden":"true"}),jsxs("div",{className:"flex-1",children:[jsx("p",{className:"font-medium",children:"Error"}),jsx("p",{className:"mt-1",children:n})]})]}),s&&S&&jsxs("div",{role:"status","aria-live":"polite","data-testid":"form-layout-success",className:r("rounded-lg border px-4 py-3 mb-6 text-sm","border-success bg-success/10 text-success","flex items-start gap-3"),children:[jsx(CheckCircle2,{className:"h-5 w-5 flex-shrink-0 mt-0.5","aria-hidden":"true"}),jsxs("div",{className:"flex-1",children:[jsx("p",{className:"font-medium",children:"Success"}),jsx("p",{className:"mt-1",children:s})]})]}),jsxs("header",{className:"form-layout-header mb-6",children:[jsx(_,{level:i,id:y,className:"text-[var(--content-foreground)] font-semibold",children:a}),o&&jsx("p",{className:"text-sm text-[var(--content-foreground)] leading-relaxed mt-2",children:o}),jsx("p",{className:"text-sm text-[var(--content-foreground)]",children:l})]}),jsx("div",{"data-testid":"form-layout-body",className:r(g({columns:d,density:b})),children:h}),u&&jsx("div",{"data-testid":"form-layout-actions",className:"flex justify-between items-center mt-4 gap-2 max-md:flex-col max-md:w-full",children:u})]})});x.displayName="FormLayout";export{x as FormLayout,g as formLayoutBodyVariants};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/elements/FormLayout/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/FormLayout/FormLayout.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\n/**\n * FormLayout Component\n * Structural layout component for consistent form presentation\n *\n * @see FormLayout-plan.md (Component API Design)\n * @see FormLayout-design-decisions.md (Approved design specifications)\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements - WCAG 2.2 AAA)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { JSX, forwardRef, FC, useId, ReactNode, useState, useEffect } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { AlertCircle, CheckCircle2 } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport type { FormLayoutProps, HeadingLevel } from './FormLayout.types';\n\n/**\n * Body variant styles using CVA\n * Controls column layout and field spacing (density)\n */\nconst formLayoutBodyVariants = cva(\n  // Base styles - grid layout with responsive columns\n  \"grid grid-cols-1 mt-6\",\n  {\n    variants: {\n      // Column variants (responsive: mobile single, desktop optional double)\n      columns: {\n        1: \"\",  // Single column (no additional classes needed)\n        2: \"md:grid-cols-2\",  // Double column on md breakpoint and up\n      },\n      // Density variants (controls gap between form fields)\n      density: {\n        default: \"gap-4\",      // 16px gap\n        compact: \"gap-2\",      // 8px gap\n        comfortable: \"gap-6\",  // 24px gap\n      },\n    },\n    defaultVariants: {\n      columns: 1,\n      density: \"default\",\n    },\n  }\n);\n\n/**\n * Polymorphic Heading Component\n * Renders h1-h6 based on headingLevel prop for proper document hierarchy\n */\ninterface HeadingProps {\n  level: HeadingLevel;\n  id: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst Heading: FC<HeadingProps> = ({ level, id, className, children }) => {\n  const Tag = `h${level}` as keyof JSX.IntrinsicElements;\n\n  return (\n    <Tag id={id} className={className}>\n      {children}\n    </Tag>\n  );\n};\n\n/**\n * FormLayout Component\n * Provides consistent form structure with header, body, and optional actions\n */\nexport const FormLayout = forwardRef<HTMLElement, FormLayoutProps>(\n  (\n    {\n      title,\n      requiredNote,\n      description,\n      columns = 1,\n      headingLevel = 2,\n      density = 'default',\n      errorMessage,\n      successMessage,\n      fieldErrors: _fieldErrors,\n      autoHideSuccess = false,\n      autoHideDuration = 5000,\n      className,\n      children,\n      actions,\n      id,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique IDs for accessibility\n    const headingId = useId();\n    const finalHeadingId = id ? `${id}-title` : headingId;\n\n    // Determine aria-labelledby (use prop if provided, otherwise point to heading)\n    const finalAriaLabelledby = ariaLabelledby || finalHeadingId;\n\n    // Auto-hide success message state\n    const [showSuccess, setShowSuccess] = useState(true);\n\n    // Auto-hide success message after duration\n    useEffect(() => {\n      // Reset show state when message changes (must come first!)\n      setShowSuccess(true);\n\n      // Set timeout to hide if autoHideSuccess is enabled\n      if (successMessage && autoHideSuccess) {\n        const timer = setTimeout(() => {\n          setShowSuccess(false);\n        }, autoHideDuration);\n\n        return (): void => clearTimeout(timer);\n      }\n    }, [successMessage, autoHideSuccess, autoHideDuration]);\n\n    return (\n      <section\n        ref={ref}\n        id={id}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        aria-labelledby={!ariaLabel ? finalAriaLabelledby : undefined}\n        aria-describedby={ariaDescribedby}\n        className={cn(\"form-layout w-full\", className)}\n        {...props}\n      >\n        {/* Error Message Alert */}\n        {errorMessage && (\n          <div\n            role=\"alert\"\n            aria-live=\"assertive\"\n            data-testid=\"form-layout-error\"\n            className={cn(\n              \"rounded-lg border px-4 py-3 mb-6 text-sm\",\n              \"border-[var(--destructive-background)] bg-[var(--destructive-foreground)] text-[var(--destructive-background)]\",\n              \"flex items-start gap-3\"\n            )}\n          >\n            <AlertCircle className=\"h-5 w-5 flex-shrink-0 mt-0.5\" aria-hidden=\"true\" />\n            <div className=\"flex-1\">\n              <p className=\"font-medium\">Error</p>\n              <p className=\"mt-1\">{errorMessage}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Success Message Alert */}\n        {successMessage && showSuccess && (\n          <div\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"form-layout-success\"\n            className={cn(\n              \"rounded-lg border px-4 py-3 mb-6 text-sm\",\n              \"border-success bg-success/10 text-success\",\n              \"flex items-start gap-3\"\n            )}\n          >\n            <CheckCircle2 className=\"h-5 w-5 flex-shrink-0 mt-0.5\" aria-hidden=\"true\" />\n            <div className=\"flex-1\">\n              <p className=\"font-medium\">Success</p>\n              <p className=\"mt-1\">{successMessage}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Header Section: Title → Description → Required Note */}\n        <header className=\"form-layout-header mb-6\">\n          {/* Title (configurable heading level) */}\n          <Heading\n            level={headingLevel}\n            id={finalHeadingId}\n            className=\"text-[var(--content-foreground)] font-semibold\"\n          >\n            {title}\n          </Heading>\n\n          {/* Description (optional) */}\n          {description && (\n            <p className=\"text-sm text-[var(--content-foreground)] leading-relaxed mt-2\">\n              {description}\n            </p>\n          )}\n\n          {/* Required Note (always visible) */}\n          <p className=\"text-sm text-[var(--content-foreground)]\">\n            {requiredNote}\n          </p>\n        </header>\n\n        {/* Body Section: Form fields with configurable layout */}\n        <div\n          data-testid=\"form-layout-body\"\n          className={cn(\n            formLayoutBodyVariants({\n              columns,\n              density,\n            })\n          )}\n        >\n          {children}\n        </div>\n\n        {/* Actions Section: Optional footer for buttons */}\n        {actions && (\n          <div data-testid=\"form-layout-actions\" className=\"flex justify-between items-center mt-4 gap-2 max-md:flex-col max-md:w-full\">\n            {actions}\n          </div>\n        )}\n      </section>\n    );\n  }\n);\n\nFormLayout.displayName = \"FormLayout\";\n\nexport { formLayoutBodyVariants };\n"]}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/FormLayout/FormLayout.tsx"],"names":["cn","inputs","twMerge","clsx","formLayoutBodyVariants","cva","Heading","level","id","className","children","Tag","jsx","FormLayout","forwardRef","title","requiredNote","description","columns","headingLevel","density","errorMessage","successMessage","_fieldErrors","autoHideSuccess","autoHideDuration","actions","dataTestId","ariaLabel","ariaLabelledby","ariaDescribedby","props","ref","headingId","useId","finalHeadingId","finalAriaLabelledby","showSuccess","setShowSuccess","useState","useEffect","timer","jsxs","AlertCircle","CheckCircle2"],"mappings":"6PAcO,SAASA,KAAMC,CAAAA,CAA8B,CAClD,OAAOC,OAAAA,CAAQC,IAAAA,CAAKF,CAAM,CAAC,CAC7B,CCMA,IAAMG,CAAAA,CAAyBC,GAAAA,CAE7B,uBAAA,CACA,CACE,QAAA,CAAU,CAER,QAAS,CACP,CAAA,CAAG,GACH,CAAA,CAAG,gBACL,EAEA,OAAA,CAAS,CACP,QAAS,OAAA,CACT,OAAA,CAAS,QACT,WAAA,CAAa,OACf,CACF,CAAA,CACA,eAAA,CAAiB,CACf,OAAA,CAAS,CAAA,CACT,QAAS,SACX,CACF,CACF,CAAA,CAaMC,CAAAA,CAA4B,CAAC,CAAE,KAAA,CAAAC,EAAO,EAAA,CAAAC,CAAAA,CAAI,UAAAC,CAAAA,CAAW,QAAA,CAAAC,CAAS,CAAA,GAAM,CACxE,IAAMC,CAAAA,CAAM,CAAA,CAAA,EAAIJ,CAAK,CAAA,CAAA,CAErB,OACEK,GAAAA,CAACD,EAAA,CAAI,EAAA,CAAIH,EAAI,SAAA,CAAWC,CAAAA,CACrB,SAAAC,CAAAA,CACH,CAEJ,EAMaG,CAAAA,CAAaC,UAAAA,CACxB,CACE,CACE,KAAA,CAAAC,EACA,YAAA,CAAAC,CAAAA,CACA,YAAAC,CAAAA,CACA,OAAA,CAAAC,EAAU,CAAA,CACV,YAAA,CAAAC,EAAe,CAAA,CACf,OAAA,CAAAC,EAAU,SAAA,CACV,YAAA,CAAAC,EACA,cAAA,CAAAC,CAAAA,CACA,YAAaC,CAAAA,CACb,eAAA,CAAAC,EAAkB,KAAA,CAClB,gBAAA,CAAAC,EAAmB,GAAA,CACnB,SAAA,CAAAhB,EACA,QAAA,CAAAC,CAAAA,CACA,OAAA,CAAAgB,CAAAA,CACA,EAAA,CAAAlB,CAAAA,CACA,cAAemB,CAAAA,CACf,YAAA,CAAcC,EACd,iBAAA,CAAmBC,CAAAA,CACnB,mBAAoBC,CAAAA,CACpB,GAAGC,CACL,CAAA,CACAC,CAAAA,GACG,CAEH,IAAMC,CAAAA,CAAYC,OAAM,CAClBC,CAAAA,CAAiB3B,EAAK,CAAA,EAAGA,CAAE,CAAA,MAAA,CAAA,CAAWyB,CAAAA,CAGtCG,CAAAA,CAAsBP,CAAAA,EAAkBM,EAGxC,CAACE,CAAAA,CAAaC,CAAc,CAAA,CAAIC,QAAAA,CAAS,IAAI,CAAA,CAGnD,OAAAC,UAAU,IAAM,CAKd,GAHAF,CAAAA,CAAe,IAAI,EAGfhB,CAAAA,EAAkBE,CAAAA,CAAiB,CACrC,IAAMiB,CAAAA,CAAQ,UAAA,CAAW,IAAM,CAC7BH,CAAAA,CAAe,KAAK,EACtB,CAAA,CAAGb,CAAgB,CAAA,CAEnB,OAAO,IAAY,YAAA,CAAagB,CAAK,CACvC,CACF,CAAA,CAAG,CAACnB,CAAAA,CAAgBE,CAAAA,CAAiBC,CAAgB,CAAC,CAAA,CAGpDiB,KAAC,SAAA,CAAA,CACC,GAAA,CAAKV,EACL,EAAA,CAAIxB,CAAAA,CACJ,cAAamB,CAAAA,CACb,YAAA,CAAYC,EACZ,iBAAA,CAAkBA,CAAAA,CAAkC,OAAtBQ,CAAAA,CAC9B,kBAAA,CAAkBN,EAClB,SAAA,CAAW9B,CAAAA,CAAG,qBAAsBS,CAAS,CAAA,CAC5C,GAAGsB,CAAAA,CAGH,QAAA,CAAA,CAAAV,GACCqB,IAAAA,CAAC,KAAA,CAAA,CACC,IAAA,CAAK,OAAA,CACL,WAAA,CAAU,WAAA,CACV,cAAY,mBAAA,CACZ,SAAA,CAAW1C,EACT,0CAAA,CACA,gHAAA,CACA,wBACF,CAAA,CAEA,QAAA,CAAA,CAAAY,IAAC+B,WAAAA,CAAA,CAAY,UAAU,8BAAA,CAA+B,aAAA,CAAY,OAAO,CAAA,CACzED,IAAAA,CAAC,OAAI,SAAA,CAAU,QAAA,CACb,QAAA,CAAA,CAAA9B,GAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,cAAc,QAAA,CAAA,OAAA,CAAK,CAAA,CAChCA,IAAC,GAAA,CAAA,CAAE,SAAA,CAAU,OAAQ,QAAA,CAAAS,CAAAA,CAAa,GACpC,CAAA,CAAA,CACF,CAAA,CAIDC,GAAkBe,CAAAA,EACjBK,IAAAA,CAAC,OACC,IAAA,CAAK,QAAA,CACL,YAAU,QAAA,CACV,aAAA,CAAY,qBAAA,CACZ,SAAA,CAAW1C,CAAAA,CACT,0CAAA,CACA,4CACA,wBACF,CAAA,CAEA,UAAAY,GAAAA,CAACgC,YAAAA,CAAA,CAAa,SAAA,CAAU,8BAAA,CAA+B,cAAY,MAAA,CAAO,CAAA,CAC1EF,KAAC,KAAA,CAAA,CAAI,SAAA,CAAU,SACb,QAAA,CAAA,CAAA9B,GAAAA,CAAC,KAAE,SAAA,CAAU,aAAA,CAAc,mBAAO,CAAA,CAClCA,GAAAA,CAAC,KAAE,SAAA,CAAU,MAAA,CAAQ,SAAAU,CAAAA,CAAe,CAAA,CAAA,CACtC,GACF,CAAA,CAIFoB,IAAAA,CAAC,UAAO,SAAA,CAAU,yBAAA,CAEhB,UAAA9B,GAAAA,CAACN,CAAAA,CAAA,CACC,KAAA,CAAOa,CAAAA,CACP,GAAIgB,CAAAA,CACJ,SAAA,CAAU,gDAAA,CAET,QAAA,CAAApB,CAAAA,CACH,CAAA,CAGCE,GACCL,GAAAA,CAAC,GAAA,CAAA,CAAE,UAAU,+DAAA,CACV,QAAA,CAAAK,EACH,CAAA,CAIFL,GAAAA,CAAC,KAAE,SAAA,CAAU,0CAAA,CACV,SAAAI,CAAAA,CACH,CAAA,CAAA,CACF,EAGAJ,GAAAA,CAAC,KAAA,CAAA,CACC,cAAY,kBAAA,CACZ,SAAA,CAAWZ,CAAAA,CACTI,CAAAA,CAAuB,CACrB,OAAA,CAAAc,EACA,OAAA,CAAAE,CACF,CAAC,CACH,CAAA,CAEC,SAAAV,CAAAA,CACH,CAAA,CAGCgB,GACCd,GAAAA,CAAC,KAAA,CAAA,CAAI,cAAY,qBAAA,CAAsB,SAAA,CAAU,6EAC9C,QAAA,CAAAc,CAAAA,CACH,GAEJ,CAEJ,CACF,EAEAb,CAAAA,CAAW,WAAA,CAAc,YAAA","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\n/**\n * FormLayout Component\n * Structural layout component for consistent form presentation\n *\n * @see FormLayout-plan.md (Component API Design)\n * @see FormLayout-design-decisions.md (Approved design specifications)\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements - WCAG 2.2 AAA)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { JSX, forwardRef, FC, useId, ReactNode, useState, useEffect } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { AlertCircle, CheckCircle2 } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport type { FormLayoutProps, HeadingLevel } from './FormLayout.types';\n\n/**\n * Body variant styles using CVA\n * Controls column layout and field spacing (density)\n */\nconst formLayoutBodyVariants = cva(\n  // Base styles - grid layout with responsive columns\n  \"grid grid-cols-1 mt-6\",\n  {\n    variants: {\n      // Column variants (responsive: mobile single, desktop optional double)\n      columns: {\n        1: \"\",  // Single column (no additional classes needed)\n        2: \"md:grid-cols-2\",  // Double column on md breakpoint and up\n      },\n      // Density variants (controls gap between form fields)\n      density: {\n        default: \"gap-4\",      // 16px gap\n        compact: \"gap-2\",      // 8px gap\n        comfortable: \"gap-6\",  // 24px gap\n      },\n    },\n    defaultVariants: {\n      columns: 1,\n      density: \"default\",\n    },\n  }\n);\n\n/**\n * Polymorphic Heading Component\n * Renders h1-h6 based on headingLevel prop for proper document hierarchy\n */\ninterface HeadingProps {\n  level: HeadingLevel;\n  id: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst Heading: FC<HeadingProps> = ({ level, id, className, children }) => {\n  const Tag = `h${level}` as keyof JSX.IntrinsicElements;\n\n  return (\n    <Tag id={id} className={className}>\n      {children}\n    </Tag>\n  );\n};\n\n/**\n * FormLayout Component\n * Provides consistent form structure with header, body, and optional actions\n */\nexport const FormLayout = forwardRef<HTMLElement, FormLayoutProps>(\n  (\n    {\n      title,\n      requiredNote,\n      description,\n      columns = 1,\n      headingLevel = 2,\n      density = 'default',\n      errorMessage,\n      successMessage,\n      fieldErrors: _fieldErrors,\n      autoHideSuccess = false,\n      autoHideDuration = 5000,\n      className,\n      children,\n      actions,\n      id,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      ...props\n    },\n    ref\n  ) => {\n    // Generate unique IDs for accessibility\n    const headingId = useId();\n    const finalHeadingId = id ? `${id}-title` : headingId;\n\n    // Determine aria-labelledby (use prop if provided, otherwise point to heading)\n    const finalAriaLabelledby = ariaLabelledby || finalHeadingId;\n\n    // Auto-hide success message state\n    const [showSuccess, setShowSuccess] = useState(true);\n\n    // Auto-hide success message after duration\n    useEffect(() => {\n      // Reset show state when message changes (must come first!)\n      setShowSuccess(true);\n\n      // Set timeout to hide if autoHideSuccess is enabled\n      if (successMessage && autoHideSuccess) {\n        const timer = setTimeout(() => {\n          setShowSuccess(false);\n        }, autoHideDuration);\n\n        return (): void => clearTimeout(timer);\n      }\n    }, [successMessage, autoHideSuccess, autoHideDuration]);\n\n    return (\n      <section\n        ref={ref}\n        id={id}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        aria-labelledby={!ariaLabel ? finalAriaLabelledby : undefined}\n        aria-describedby={ariaDescribedby}\n        className={cn(\"form-layout w-full\", className)}\n        {...props}\n      >\n        {/* Error Message Alert */}\n        {errorMessage && (\n          <div\n            role=\"alert\"\n            aria-live=\"assertive\"\n            data-testid=\"form-layout-error\"\n            className={cn(\n              \"rounded-lg border px-4 py-3 mb-6 text-sm\",\n              \"border-[var(--destructive-background)] bg-[var(--destructive-foreground)] text-[var(--destructive-background)]\",\n              \"flex items-start gap-3\"\n            )}\n          >\n            <AlertCircle className=\"h-5 w-5 flex-shrink-0 mt-0.5\" aria-hidden=\"true\" />\n            <div className=\"flex-1\">\n              <p className=\"font-medium\">Error</p>\n              <p className=\"mt-1\">{errorMessage}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Success Message Alert */}\n        {successMessage && showSuccess && (\n          <div\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid=\"form-layout-success\"\n            className={cn(\n              \"rounded-lg border px-4 py-3 mb-6 text-sm\",\n              \"border-success bg-success/10 text-success\",\n              \"flex items-start gap-3\"\n            )}\n          >\n            <CheckCircle2 className=\"h-5 w-5 flex-shrink-0 mt-0.5\" aria-hidden=\"true\" />\n            <div className=\"flex-1\">\n              <p className=\"font-medium\">Success</p>\n              <p className=\"mt-1\">{successMessage}</p>\n            </div>\n          </div>\n        )}\n\n        {/* Header Section: Title → Description → Required Note */}\n        <header className=\"form-layout-header mb-6\">\n          {/* Title (configurable heading level) */}\n          <Heading\n            level={headingLevel}\n            id={finalHeadingId}\n            className=\"text-[var(--content-foreground)] font-semibold\"\n          >\n            {title}\n          </Heading>\n\n          {/* Description (optional) */}\n          {description && (\n            <p className=\"text-sm text-[var(--content-foreground)] leading-relaxed mt-2\">\n              {description}\n            </p>\n          )}\n\n          {/* Required Note (always visible) */}\n          <p className=\"text-sm text-[var(--content-foreground)]\">\n            {requiredNote}\n          </p>\n        </header>\n\n        {/* Body Section: Form fields with configurable layout */}\n        <div\n          data-testid=\"form-layout-body\"\n          className={cn(\n            formLayoutBodyVariants({\n              columns,\n              density,\n            })\n          )}\n        >\n          {children}\n        </div>\n\n        {/* Actions Section: Optional footer for buttons */}\n        {actions && (\n          <div data-testid=\"form-layout-actions\" className=\"flex justify-between items-center mt-4 gap-2 max-md:flex-col max-md:w-full\">\n            {actions}\n          </div>\n        )}\n      </section>\n    );\n  }\n);\n\nFormLayout.displayName = \"FormLayout\";\n\nexport { formLayoutBodyVariants };\n"]}

package/dist/elements/Modal/Modal.d.ts

@@ -132,25 +132,20 @@ declare namespace ModalClose {
     var displayName: string;
 }
 /**
- * CVA Variants for Modal.Content
- *
- * @see PRD.md TR-001 (CVA Variant Styling)
- * @see PRD.md DS-001 (Size Variants)
+ * Re-export CVA variants from Modal.styles.ts for backwards compatibility.
+ * Consumers importing { modalContentVariants, modalOverlayVariants } from './Modal'
+ * will continue to work.
  */
-export declare const modalContentVariants: (props?: ({
-    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
-    animation?: "none" | "slide" | "fade-zoom" | "fade" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/**
- * CVA Variants for Modal Overlay
- */
-export declare const modalOverlayVariants: (props?: ({
-    animation?: "none" | "slide" | "fade-zoom" | "fade" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export { modalContentVariants, modalOverlayVariants } from './Modal.styles';
 /**
  * Compound Component Export
  *
  * Follows Themis library pattern using Object.assign() for compound components.
+ * Enables usage like Modal.Trigger, Modal.Content, etc.
+ *
+ * @deprecated The Object.assign compound pattern will be removed in v2.
+ * Use the direct named exports (ModalTrigger, ModalContent, etc.) instead.
+ * This pattern is kept for backwards compatibility only.
  *
  * @see RESEARCH.md Section 1 (Compound Component Pattern)
  */

package/dist/elements/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/Modal.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAML,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EAChB,MAAM,eAAe,CAAC;AAYvB;;;;;;;;;;;GAWG;AACH,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,IAAe,EAAE,EAAE,UAAU,GAAG,YAAY,CA6C7G;kBA7CQ,SAAS;;;AAiDlB;;;;;;;;;;;;;GAaG;AACH,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAInE;kBAJQ,YAAY;;;AAQrB;;;;;;;;;;GAUG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,IAAW,EACX,SAAuB,EACvB,iBAAuB,EACvB,aAAoB,EACpB,yBAAiC,EACjC,SAAgB,EAChB,SAAS,GACV,EAAE,iBAAiB,GAAG,YAAY,CA8ClC;kBAvDQ,YAAY;;;AA2DrB;;;GAGG;AACH,iBAAS,YAAY,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAErD;kBAFQ,YAAY;;;AAMrB;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAM5E;kBANQ,WAAW;;;AAUpB;;;;;;;;GAQG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAS,EAAE,SAAS,EAAE,EAAE,eAAe,GAAG,YAAY,CAUrF;kBAVQ,UAAU;;;AAcnB;;;;;;;;GAQG;AACH,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,qBAAqB,GAAG,YAAY,CAUtF;kBAVQ,gBAAgB;;;AAczB;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAM5E;kBANQ,WAAW;;;AAUpB;;;;;;;GAOG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,YAAY,CA+B/D;kBA/BQ,UAAU;;;AAmCnB;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB;;;8EAoChC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB;;8EAyBhC,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;;;;;;;;CAShB,CAAC;AAGH,OAAO,EACL,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,GACX,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/Modal.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAML,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EAChB,MAAM,eAAe,CAAC;AAYvB;;;;;;;;;;;GAWG;AACH,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,IAAe,EAAE,EAAE,UAAU,GAAG,YAAY,CA6D7G;kBA7DQ,SAAS;;;AAiElB;;;;;;;;;;;;;GAaG;AACH,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAInE;kBAJQ,YAAY;;;AAQrB;;;;;;;;;;GAUG;AACH,iBAAS,YAAY,CAAC,EACpB,QAAQ,EACR,IAAW,EACX,SAAuB,EACvB,iBAAuB,EACvB,aAAoB,EACpB,yBAAiC,EACjC,SAAgB,EAChB,SAAS,GACV,EAAE,iBAAiB,GAAG,YAAY,CA2ClC;kBApDQ,YAAY;;;AAwDrB;;;GAGG;AACH,iBAAS,YAAY,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAErD;kBAFQ,YAAY;;;AAMrB;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAE5E;kBAFQ,WAAW;;;AAMpB;;;;;;;;GAQG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAS,EAAE,SAAS,EAAE,EAAE,eAAe,GAAG,YAAY,CAMrF;kBANQ,UAAU;;;AAUnB;;;;;;;;GAQG;AACH,iBAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,qBAAqB,GAAG,YAAY,CAMtF;kBANQ,gBAAgB;;;AAUzB;;;;;;;;;GASG;AACH,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAE5E;kBAFQ,WAAW;;;AAMpB;;;;;;;GAOG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,GAAG,YAAY,CA+B/D;kBA/BQ,UAAU;;;AAmCnB;;;;GAIG;AACH,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAE5E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK;;;;;;;;;CAShB,CAAC;AAGH,OAAO,EACL,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,GACX,CAAC"}

package/dist/elements/Modal/Modal.styles.d.ts

@@ -0,0 +1,29 @@
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * CVA Variants for Modal.Content
+ *
+ * Size and animation variant definitions for the modal content container.
+ * Uses CSS custom properties for all colours to support theming.
+ *
+ * @see Modal.types.ts (ModalSize, ModalAnimation)
+ */
+export declare const modalContentVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+    animation?: "none" | "slide" | "fade-zoom" | "fade" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * CVA Variants for Modal Overlay
+ *
+ * Animation variant definitions for the modal backdrop overlay.
+ * Uses CSS custom properties for all colours to support theming.
+ */
+export declare const modalOverlayVariants: (props?: ({
+    animation?: "none" | "slide" | "fade-zoom" | "fade" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Type exports for variant props
+ * Allows TypeScript inference of variant combinations
+ */
+export type ModalContentVariantProps = VariantProps<typeof modalContentVariants>;
+export type ModalOverlayVariantProps = VariantProps<typeof modalOverlayVariants>;
+//# sourceMappingURL=Modal.styles.d.ts.map

package/dist/elements/Modal/Modal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/Modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB;;;8EAoChC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB;;8EAyBhC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACjF,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/elements/Modal/index.d.ts

@@ -11,4 +11,5 @@
  */
 export { Modal, ModalTrigger, ModalContent, ModalOverlay, ModalHeader, ModalTitle, ModalDescription, ModalFooter, ModalClose, modalContentVariants, modalOverlayVariants, } from './Modal';
 export type { ModalProps, ModalTriggerProps, ModalContentProps, ModalOverlayProps, ModalHeaderProps, ModalTitleProps, ModalDescriptionProps, ModalFooterProps, ModalCloseProps, ModalSize, ModalAnimation, } from './Modal.types';
+export type { ModalContentVariantProps, ModalOverlayVariantProps, } from './Modal.styles';
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,cAAc,GACf,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Modal/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,cAAc,GACf,MAAM,eAAe,CAAC;AAEvB,YAAY,EACV,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,gBAAgB,CAAC"}