@tribepad/themis 1.0.0 → 1.0.1

package/dist/chunk-Z4FRNOF6.mjs.map

@@ -1 +0,0 @@
-{"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

@@ -1,166 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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"]}