@tribepad/themis 1.0.0

package/dist/chunk-Z4FRNOF6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/shared-variants.ts"],"names":[],"mappings":";AAiBO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,2BAAA;AAAA,EACA,qBAAA;AAAA,EACA,iCAAA;AAAA,EACA;AACF;AAMO,IAAM,kBAAA,GAAqB;AAAA,EAChC,4BAAA;AAAA,EACA,sBAAA;AAAA,EACA,kCAAA;AAAA,EACA;AACF;AAMO,IAAM,UAAA,GAAa;AAAA,EACxB,oBAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF;AAKO,IAAM,eAAA,GAAkB;AAAA,EAC7B,oBAAA;AAAA,EACA,0BAAA;AAAA,EACA;AACF;AASO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,8BAAA;AAAA,EACA;AACF;AAKO,IAAM,kBAAA,GAAqB;AAAA,EAChC,qCAAA;AAAA,EACA,4BAAA;AAAA,EACA;AACF;AASO,IAAM,qBAAA,GAAwB;AAAA,EACnC,EAAA,EAAI,SAAA;AAAA,EACJ,OAAA,EAAS,SAAA;AAAA,EACT,EAAA,EAAI;AACN;AAKO,IAAM,sBAAA,GAAyB;AAAA,EACpC,EAAA,EAAI,SAAA;AAAA,EACJ,OAAA,EAAS,WAAA;AAAA,EACT,EAAA,EAAI;AACN;AASO,IAAM,gBAAA,GAAmB;AAAA,EAC9B,cAAA;AAAA,EACA;AACF;AAKO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,EAAA,EAAI,SAAA;AAAA;AAAA,EACJ,OAAA,EAAS,WAAA;AAAA;AAAA,EACT,EAAA,EAAI;AAAA;AACN;AAKO,IAAM,aAAA,GAAgB;AAAA,EAC3B,EAAA,EAAI,KAAA;AAAA;AAAA,EACJ,OAAA,EAAS,MAAA;AAAA;AAAA,EACT,EAAA,EAAI;AAAA;AACN;AASO,IAAM,kBAAA,GAAqB;AAAA,EAChC,MAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAKO,IAAM,oBAAA,GAAuB;AAAA,EAClC,MAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF;AAKO,IAAM,gBAAA,GAAmB;AAAA,EAC9B;AACF;AAKO,IAAM,UAAA,GAAa;AAAA,EACxB,aAAA;AAAA,EACA;AACF;AAKO,IAAM,kBAAA,GAAqB;AAS3B,IAAM,oBAAA,GAAuB;AAAA,EAClC,4BAAA;AAAA,EACA,2BAAA;AAAA,EACA;AACF;AAKO,IAAM,qBAAA,GAAwB;AAAA,EACnC,4BAAA;AAAA,EACA,2BAAA;AAAA,EACA;AACF;AAKO,IAAM,cAAA,GAAiB;AAAA,EAC5B,+BAAA;AAAA,EACA;AACF;AAKO,IAAM,iBAAA,GAAoB;AAAA,EAC/B,mBAAA;AAAA,EACA;AACF;AAKO,IAAM,eAAA,GAAkB;AAAA,EAC7B,mBAAA;AAAA,EACA;AACF;AASO,IAAM,YAAA,GAAe;AAAA,EAC1B,0BAAA;AAAA,EACA;AACF;AASO,SAAS,iBAAiB,MAAA,EAAkD;AACjF,EAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,CAAA,CAAA,KAAK,KAAA,CAAM,OAAA,CAAQ,CAAC,CAAA,GAAI,CAAC,GAAG,CAAC,CAAA,GAAI,CAAC,CAAC,CAAC,CAAA;AAC5D","file":"chunk-Z4FRNOF6.mjs","sourcesContent":["/**\n * Shared CVA Variant Utilities\n *\n * Common patterns extracted from component variants for consistency and reduced bundle size.\n * Use these constants in CVA definitions to ensure consistent styling across Themis.\n *\n * @see interaction-states.ts for interaction-specific styles (focus, hover, pressed)\n */\n\n// =============================================================================\n// Focus Ring Patterns\n// =============================================================================\n\n/**\n * Focus-within ring (for container elements with focusable children)\n * Use when the container should show focus when any child is focused\n */\nexport const FOCUS_WITHIN_RING = [\n  'focus-within:outline-none',\n  'focus-within:ring-2',\n  'focus-within:ring-[var(--ring)]',\n  'focus-within:ring-offset-2',\n] as const;\n\n/**\n * Focus-visible ring (for directly focusable elements)\n * Use for buttons, inputs, and other interactive elements\n */\nexport const FOCUS_VISIBLE_RING = [\n  'focus-visible:outline-none',\n  'focus-visible:ring-2',\n  'focus-visible:ring-[var(--ring)]',\n  'focus-visible:ring-offset-2',\n] as const;\n\n/**\n * Standard focus ring (for elements using :focus pseudo-class)\n * Prefer focus-visible when possible for better UX\n */\nexport const FOCUS_RING = [\n  'focus:outline-none',\n  'focus:ring-2',\n  'focus:ring-[var(--ring)]',\n] as const;\n\n/**\n * Focus with background change (for segments, cells, menu items)\n */\nexport const FOCUS_HIGHLIGHT = [\n  'focus:outline-none',\n  'focus:bg-[var(--accent)]',\n  'focus:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Disabled State Patterns\n// =============================================================================\n\n/**\n * Standard disabled state using disabled attribute\n */\nexport const DISABLED_STANDARD = [\n  'disabled:pointer-events-none',\n  'disabled:opacity-50',\n] as const;\n\n/**\n * Disabled state using data attribute (React Aria pattern)\n */\nexport const DISABLED_DATA_ATTR = [\n  'data-[disabled]:pointer-events-none',\n  'data-[disabled]:opacity-50',\n  'data-[disabled]:cursor-not-allowed',\n] as const;\n\n// =============================================================================\n// Size-Based Text Variants\n// =============================================================================\n\n/**\n * Small text size scale (xs -> sm -> base)\n */\nexport const TEXT_SIZE_SMALL_SCALE = {\n  sm: 'text-xs',\n  default: 'text-sm',\n  lg: 'text-base',\n} as const;\n\n/**\n * Medium text size scale (sm -> base -> lg)\n */\nexport const TEXT_SIZE_MEDIUM_SCALE = {\n  sm: 'text-sm',\n  default: 'text-base',\n  lg: 'text-lg',\n} as const;\n\n// =============================================================================\n// Touch Target Utilities\n// =============================================================================\n\n/**\n * WCAG 2.2 AAA minimum touch target (44x44px)\n */\nexport const TOUCH_TARGET_MIN = [\n  'min-h-[44px]',\n  'min-w-[44px]',\n] as const;\n\n/**\n * Common button/cell sizes with touch target compliance\n */\nexport const INTERACTIVE_SIZES = {\n  sm: 'h-9 w-9',      // 36px - desktop only, NOT AAA compliant\n  default: 'h-11 w-11', // 44px - AAA compliant\n  lg: 'h-14 w-14',    // 56px - AAA compliant, enhanced\n} as const;\n\n/**\n * Height-only sizes for fields and inputs\n */\nexport const FIELD_HEIGHTS = {\n  sm: 'h-9',      // 36px\n  default: 'h-11', // 44px\n  lg: 'h-14',     // 56px\n} as const;\n\n// =============================================================================\n// Message/Feedback Patterns\n// =============================================================================\n\n/**\n * Error message styling\n */\nexport const ERROR_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--destructive)]',\n] as const;\n\n/**\n * Success message styling\n */\nexport const SUCCESS_MESSAGE_BASE = [\n  'flex',\n  'items-center',\n  'gap-1.5',\n  'text-[var(--success)]',\n] as const;\n\n/**\n * Description/helper text styling\n */\nexport const DESCRIPTION_BASE = [\n  'text-[var(--menu-muted)]',\n] as const;\n\n/**\n * Label base styling\n */\nexport const LABEL_BASE = [\n  'font-medium',\n  'text-[var(--content-foreground)]',\n] as const;\n\n/**\n * Required indicator pattern\n */\nexport const REQUIRED_INDICATOR = \"after:content-['*'] after:ml-0.5 after:text-[var(--destructive)]\";\n\n// =============================================================================\n// Animation Patterns\n// =============================================================================\n\n/**\n * Popover/dropdown entry animation\n */\nexport const POPOVER_ANIMATION_IN = [\n  'data-[entering]:animate-in',\n  'data-[entering]:fade-in-0',\n  'data-[entering]:zoom-in-95',\n] as const;\n\n/**\n * Popover/dropdown exit animation\n */\nexport const POPOVER_ANIMATION_OUT = [\n  'data-[exiting]:animate-out',\n  'data-[exiting]:fade-out-0',\n  'data-[exiting]:zoom-out-95',\n] as const;\n\n/**\n * Reduced motion support (WCAG 2.2)\n */\nexport const REDUCED_MOTION = [\n  'motion-reduce:transition-none',\n  'motion-reduce:animate-none',\n] as const;\n\n/**\n * Standard transition for colors\n */\nexport const TRANSITION_COLORS = [\n  'transition-colors',\n  'duration-200',\n] as const;\n\n/**\n * Fast transition for interactions\n */\nexport const TRANSITION_FAST = [\n  'transition-colors',\n  'duration-150',\n] as const;\n\n// =============================================================================\n// Hover State Patterns\n// =============================================================================\n\n/**\n * Accent background on hover (for interactive items)\n */\nexport const HOVER_ACCENT = [\n  'hover:bg-[var(--accent)]',\n  'hover:text-[var(--accent-foreground)]',\n] as const;\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\n/**\n * Combines multiple style arrays into a flat array for CVA base styles\n */\nexport function combineStyles(...styles: (readonly string[] | string)[]): string[] {\n  return styles.flatMap(s => Array.isArray(s) ? [...s] : [s]);\n}\n"]}

package/dist/chunk-ZMYLD3BN.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var chunkVIREG536_js = require('./chunk-VIREG536.js');
+var react = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+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: chunkVIREG536_js.cn("form-layout w-full", className),
+        ...props,
+        children: [
+          errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "alert",
+              "aria-live": "assertive",
+              "data-testid": "form-layout-error",
+              className: chunkVIREG536_js.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: chunkVIREG536_js.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: chunkVIREG536_js.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=chunk-ZMYLD3BN.js.map
+//# sourceMappingURL=chunk-ZMYLD3BN.js.map

package/dist/chunk-ZMYLD3BN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/FormLayout/FormLayout.tsx"],"names":["cva","jsx","forwardRef","useId","useState","useEffect","jsxs","cn","AlertCircle","CheckCircle2"],"mappings":"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","file":"chunk-ZMYLD3BN.js","sourcesContent":["\"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"]}