@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Select/index.js

@@ -1,33 +1,591 @@
+"use client";
 'use strict';
 
-var chunk3XD2JUL3_js = require('../../chunk-3XD2JUL3.js');
-require('../../chunk-T4COXKQ3.js');
+var react = require('react');
+var reactAriaComponents = require('react-aria-components');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+var zod = require('zod');
 
-
-
-Object.defineProperty(exports, "MultiSelect", {
-  enumerable: true,
-  get: function () { return chunk3XD2JUL3_js.MultiSelect; }
+// src/elements/Select/Select.tsx
+var selectTriggerVariants = classVarianceAuthority.cva(
+  [
+    // Base styles
+    "flex",
+    "w-full",
+    "items-center",
+    "justify-between",
+    "rounded-md",
+    "border",
+    "bg-[var(--content-background)]",
+    "text-[var(--content-foreground)]",
+    "transition-colors",
+    "duration-200",
+    "outline-none",
+    // Focus ring (WCAG 2.2 AAA - 7:1 contrast)
+    "focus-visible:ring-2",
+    "focus-visible:ring-[var(--ring)]",
+    "focus-visible:ring-offset-2",
+    // Hover state
+    "hover:bg-[var(--accent)]/10",
+    // Disabled state
+    "disabled:cursor-not-allowed",
+    "disabled:opacity-50",
+    // Loading state
+    "data-[loading=true]:cursor-wait",
+    // Truncate text
+    "truncate"
+  ],
+  {
+    variants: {
+      size: {
+        // All sizes use 44px minimum touch target for WCAG 2.2 AAA compliance
+        // Visual height varies but touch area remains accessible
+        sm: "h-9 px-3 text-sm min-h-[44px]",
+        default: "h-11 px-4 text-base min-h-[44px]",
+        lg: "h-14 px-5 text-lg min-h-[44px]"
+      },
+      isInvalid: {
+        true: "border-[var(--destructive)]",
+        false: "border-[var(--input)] hover:border-[var(--input)]/80"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      isInvalid: false
+    }
+  }
+);
+var selectItemVariants = classVarianceAuthority.cva(
+  [
+    // Base styles
+    "relative",
+    "flex",
+    "w-full",
+    "cursor-pointer",
+    "select-none",
+    "items-center",
+    "rounded-sm",
+    "outline-none",
+    "transition-colors",
+    // Padding for checkmark icon (left side)
+    "pl-8",
+    "pr-2",
+    // Hover state
+    "hover:bg-[var(--accent)]",
+    "hover:text-[var(--accent-foreground)]",
+    // Focus state
+    "focus:bg-[var(--accent)]",
+    "focus:text-[var(--accent-foreground)]",
+    // Selected state
+    "data-[selected=true]:bg-[var(--accent)]",
+    "data-[selected=true]:text-[var(--accent-foreground)]",
+    // Disabled state
+    "data-[disabled=true]:pointer-events-none",
+    "data-[disabled=true]:opacity-50",
+    "data-[disabled=true]:text-[var(--menu-muted)]"
+  ],
+  {
+    variants: {
+      size: {
+        // All sizes use 44px minimum touch target for WCAG 2.2 AAA compliance
+        sm: "h-9 py-1.5 text-sm min-h-[44px]",
+        default: "h-11 py-2 text-base min-h-[44px]",
+        lg: "h-14 py-3 text-lg min-h-[44px]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var selectPopoverVariants = classVarianceAuthority.cva(
+  [
+    // Base styles - use menu tokens to match Dropdown styling
+    "z-50",
+    "w-[--trigger-width]",
+    "rounded-md",
+    "border",
+    "border-[var(--menu-border)]",
+    "bg-[var(--menu-background)]",
+    "text-[var(--menu-foreground)]",
+    "shadow-md",
+    "outline-none",
+    "overflow-auto",
+    // Animations
+    "data-[entering]:animate-in",
+    "data-[entering]:fade-in-0",
+    "data-[entering]:zoom-in-95",
+    "data-[exiting]:animate-out",
+    "data-[exiting]:fade-out-0",
+    "data-[exiting]:zoom-out-95"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-h-[200px] p-1",
+        default: "max-h-[300px] p-1",
+        lg: "max-h-[400px] p-1"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var selectSectionVariants = classVarianceAuthority.cva(
+  [
+    "px-2",
+    "py-1.5",
+    "text-xs",
+    "font-semibold",
+    "text-[var(--menu-muted)]",
+    "uppercase",
+    "tracking-wider"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-1 text-[10px]",
+        default: "px-2 py-1.5 text-xs",
+        lg: "px-3 py-2 text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var selectErrorVariants = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "gap-1.5",
+    "text-sm",
+    "font-medium",
+    "text-[var(--destructive)]",
+    "mt-1.5"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs mt-1",
+        default: "text-sm mt-1.5",
+        lg: "text-base mt-2"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var SelectRoot = react.forwardRef(
+  ({
+    // Display props
+    label,
+    placeholder,
+    description,
+    // Selection props
+    value,
+    defaultValue,
+    // State props
+    isOpen,
+    isDisabled = false,
+    isRequired = false,
+    disabledKeys,
+    // Validation props
+    validate,
+    validationBehavior = "aria",
+    errorMessage,
+    // Loading state
+    isLoading = false,
+    emptyStateMessage,
+    // Form integration
+    name,
+    // Size variant
+    size = "default",
+    // Event handlers
+    onChange,
+    onOpenChange,
+    // Standard props
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const labelId = react.useId();
+    const descriptionId = react.useId();
+    const errorId = react.useId();
+    const childCount = react.Children.count(children);
+    if (childCount > 1e3) {
+      console.warn(
+        "Select has >1000 items. Consider using Autocomplete component for better performance."
+      );
+    }
+    const isInvalid = Boolean(errorMessage);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactAriaComponents.Select,
+      {
+        value,
+        defaultValue,
+        onChange: (key) => {
+          if (onChange) {
+            onChange(key);
+          }
+        },
+        placeholder,
+        disabledKeys,
+        isOpen,
+        onOpenChange,
+        isDisabled: isDisabled || isLoading,
+        isRequired,
+        name,
+        validate,
+        validationBehavior,
+        isInvalid,
+        className,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Label, { id: labelId, className: "text-sm font-medium text-[var(--content-foreground)]", children: [
+            label,
+            isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--destructive)] ml-1", children: "*" })
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { id: descriptionId, slot: "description", className: "text-sm text-[var(--menu-muted)] mt-1", children: description }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            reactAriaComponents.Button,
+            {
+              ref,
+              className: selectTriggerVariants({ size, isInvalid }),
+              "aria-labelledby": labelId,
+              "aria-describedby": description ? descriptionId : errorMessage ? errorId : void 0,
+              "data-loading": isLoading,
+              ...isRequired && { "aria-required": "true" },
+              ...isLoading && { "aria-busy": "true" },
+              ...(isDisabled || isLoading) && { "aria-disabled": "true" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.SelectValue, { className: "flex-1 text-left truncate" }),
+                isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-[var(--menu-muted)]", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-[var(--menu-muted)]", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { id: errorId, className: selectErrorVariants({ size }), children: ({ validationErrors }) => {
+            const displayError = errorMessage || validationErrors.join(" ");
+            return displayError ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4", "aria-hidden": "true" }),
+              displayError
+            ] }) : null;
+          } }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { className: selectPopoverVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.ListBox, { className: "outline-none", children: [
+            isLoading && childCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-11 px-4 py-2",
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-[var(--accent-background)] rounded animate-pulse" })
+              },
+              `skeleton-${i}`
+            )) }),
+            !isLoading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              children,
+              childCount === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                reactAriaComponents.ListBoxItem,
+                {
+                  id: "__empty__",
+                  textValue: "empty",
+                  isDisabled: true,
+                  className: "py-6 text-center text-sm text-[var(--menu-muted)] cursor-default pointer-events-none",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", children: emptyStateMessage || "No options available" })
+                }
+              )
+            ] })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+SelectRoot.displayName = "Select";
+var MultiSelectRoot = react.forwardRef(
+  ({
+    // Display props
+    label,
+    placeholder,
+    description,
+    // Selection props
+    value,
+    defaultValue,
+    selectionMode: _selectionMode = "multiple",
+    // State props
+    isOpen,
+    isDisabled = false,
+    isRequired = false,
+    disabledKeys,
+    // Validation props
+    validate,
+    validationBehavior = "aria",
+    errorMessage,
+    // Loading state
+    isLoading = false,
+    emptyStateMessage,
+    // Form integration
+    name,
+    // Size variant
+    size = "default",
+    // Event handlers
+    onChange,
+    onOpenChange,
+    // Standard props
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const labelId = react.useId();
+    const descriptionId = react.useId();
+    const errorId = react.useId();
+    const childCount = react.Children.count(children);
+    if (childCount > 1e3) {
+      console.warn(
+        "Select has >1000 items. Consider using Autocomplete component for better performance."
+      );
+    }
+    const isInvalid = Boolean(errorMessage);
+    const valueToLabelMap = react.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      const processChildren = (nodes) => {
+        react.Children.forEach(nodes, (child) => {
+          if (react.isValidElement(child)) {
+            const element = child;
+            if (element.type === SelectItem || element.props?.value) {
+              const itemValue = element.props.value;
+              const itemChildren = element.props.children;
+              if (itemValue && typeof itemChildren === "string") {
+                map.set(itemValue, itemChildren);
+              }
+            }
+            if (element.props?.children) {
+              processChildren(element.props.children);
+            }
+          }
+        });
+      };
+      processChildren(children);
+      return map;
+    }, [children]);
+    const displayValue = react.useMemo(() => {
+      if (!value || !Array.isArray(value) || value.length === 0) {
+        return placeholder || "";
+      }
+      if (value.length <= 2) {
+        const labels = value.map((v) => valueToLabelMap.get(v) || v);
+        return labels.join(", ");
+      }
+      return `${value.length} items selected`;
+    }, [value, valueToLabelMap, placeholder]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactAriaComponents.Select,
+      {
+        value,
+        defaultValue,
+        onChange: (keys) => {
+          if (onChange) {
+            onChange(keys);
+          }
+        },
+        selectionMode: "multiple",
+        disabledKeys,
+        isOpen,
+        onOpenChange,
+        isDisabled: isDisabled || isLoading,
+        isRequired,
+        name,
+        validate,
+        validationBehavior,
+        isInvalid,
+        className,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Label, { id: labelId, className: "text-sm font-medium text-[var(--content-foreground)]", children: [
+            label,
+            isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--destructive)] ml-1", children: "*" })
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { id: descriptionId, slot: "description", className: "text-sm text-[var(--menu-muted)] mt-1", children: description }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            reactAriaComponents.Button,
+            {
+              ref,
+              className: selectTriggerVariants({ size, isInvalid }),
+              "aria-labelledby": labelId,
+              "aria-describedby": description ? descriptionId : errorMessage ? errorId : void 0,
+              "data-loading": isLoading,
+              ...isRequired && { "aria-required": "true" },
+              ...isLoading && { "aria-busy": "true" },
+              ...(isDisabled || isLoading) && { "aria-disabled": "true" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left truncate", children: displayValue }),
+                isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-[var(--menu-muted)]", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-[var(--menu-muted)]", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { id: errorId, className: selectErrorVariants({ size }), children: ({ validationErrors }) => {
+            const displayError = errorMessage || validationErrors.join(" ");
+            return displayError ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-4 w-4", "aria-hidden": "true" }),
+              displayError
+            ] }) : null;
+          } }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Popover, { className: selectPopoverVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.ListBox, { className: "outline-none", children: [
+            isLoading && childCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-11 px-4 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-[var(--accent-background)] rounded animate-pulse" }) }, `skeleton-${i}`)) }),
+            !isLoading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              children,
+              childCount === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                reactAriaComponents.ListBoxItem,
+                {
+                  id: "__empty__",
+                  textValue: "empty",
+                  isDisabled: true,
+                  className: "py-6 text-center text-sm text-[var(--menu-muted)] cursor-default pointer-events-none",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { role: "status", children: emptyStateMessage || "No options available" })
+                }
+              )
+            ] })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+MultiSelectRoot.displayName = "MultiSelect";
+function SelectItem({ children, textValue, value, isDisabled = false, className, ...props }) {
+  if (!textValue && typeof children !== "string") {
+    const message = "Select.Item with custom children requires textValue prop for accessibility";
+    if (process.env.NODE_ENV === "development") {
+      throw new Error(message);
+    } else {
+      console.warn(message);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.ListBoxItem,
+    {
+      id: value,
+      textValue: textValue || (typeof children === "string" ? children : void 0),
+      className: `${selectItemVariants({ size: "default" })} ${className || ""}`,
+      isDisabled,
+      ...props,
+      children: ({ isSelected, selectionMode, isDisabled: itemDisabled }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        selectionMode === "multiple" ? /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.CheckSquare,
+          {
+            className: `absolute left-2 h-4 w-4 ${isSelected ? "visible" : "invisible"}`,
+            "aria-hidden": "true"
+          }
+        ) : isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "absolute left-2 h-4 w-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: itemDisabled ? "text-[var(--menu-muted)]" : "", children })
+      ] })
+    }
+  );
+}
+SelectItem.displayName = "SelectItem";
+function SelectSection({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.ListBoxSection, { className: `border-t border-[var(--border)] first:border-t-0 ${className || ""}`, ...props, children });
+}
+SelectSection.displayName = "SelectSection";
+function SelectHeader({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Header, { className: `${selectSectionVariants({ size: "default" })} ${className || ""}`, ...props, children });
+}
+SelectHeader.displayName = "SelectHeader";
+var Select = Object.assign(SelectRoot, {
+  Item: SelectItem,
+  Section: SelectSection,
+  Header: SelectHeader
 });
-Object.defineProperty(exports, "Select", {
-  enumerable: true,
-  get: function () { return chunk3XD2JUL3_js.Select; }
+var MultiSelect = Object.assign(MultiSelectRoot, {
+  Item: SelectItem,
+  Section: SelectSection,
+  Header: SelectHeader
 });
-Object.defineProperty(exports, "SelectHeaderPropsSchema", {
-  enumerable: true,
-  get: function () { return chunk3XD2JUL3_js.SelectHeaderPropsSchema; }
+var BaseComponentPropsSchema = zod.z.object({
+  // Styling
+  className: zod.z.string().optional(),
+  // React
+  children: zod.z.any().optional(),
+  // ReactNode not directly supported by Zod
+  id: zod.z.string().optional(),
+  // Accessibility (WCAG 2.2 AA requirements)
+  "aria-label": zod.z.string().optional(),
+  "aria-labelledby": zod.z.string().optional(),
+  "aria-describedby": zod.z.string().optional(),
+  "aria-live": zod.z.enum(["off", "polite", "assertive"]).optional(),
+  "aria-hidden": zod.z.boolean().optional(),
+  // Testing & Development
+  "data-testid": zod.z.string().optional()
 });
-Object.defineProperty(exports, "SelectItemPropsSchema", {
-  enumerable: true,
-  get: function () { return chunk3XD2JUL3_js.SelectItemPropsSchema; }
+
+// src/elements/Select/Select.types.ts
+var SelectSizeSchema = zod.z.enum(["sm", "default", "lg"]);
+var SelectionModeSchema = zod.z.enum(["single", "multiple"]);
+var ValidationBehaviorSchema = zod.z.enum(["native", "aria"]);
+var SelectPropsSchema = BaseComponentPropsSchema.extend({
+  // Display props (US-1)
+  label: zod.z.string(),
+  // Required for accessibility
+  placeholder: zod.z.string().optional(),
+  description: zod.z.string().optional(),
+  // Selection props (US-1, US-6)
+  value: zod.z.union([zod.z.string(), zod.z.array(zod.z.string())]).optional(),
+  defaultValue: zod.z.union([zod.z.string(), zod.z.array(zod.z.string())]).optional(),
+  selectionMode: SelectionModeSchema.optional().default("single"),
+  // State props (US-1, US-5)
+  isOpen: zod.z.boolean().optional(),
+  isDisabled: zod.z.boolean().optional().default(false),
+  isRequired: zod.z.boolean().optional().default(false),
+  disabledKeys: zod.z.array(zod.z.string()).optional(),
+  // Validation props (US-4)
+  validate: zod.z.custom().optional(),
+  validationBehavior: ValidationBehaviorSchema.optional().default("aria"),
+  errorMessage: zod.z.string().optional(),
+  // Loading state (US-7)
+  isLoading: zod.z.boolean().optional().default(false),
+  emptyStateMessage: zod.z.string().optional(),
+  // Form integration (US-10)
+  name: zod.z.string().optional(),
+  // Size variant (US-9)
+  size: SelectSizeSchema.optional().default("default"),
+  // Event handlers (US-1)
+  onChange: zod.z.custom().optional(),
+  onOpenChange: zod.z.custom().optional(),
+  // Children (Select.Item, Select.Section components)
+  children: zod.z.custom()
 });
-Object.defineProperty(exports, "SelectPropsSchema", {
-  enumerable: true,
-  get: function () { return chunk3XD2JUL3_js.SelectPropsSchema; }
+var SelectItemPropsSchema = BaseComponentPropsSchema.extend({
+  // Item value (required)
+  value: zod.z.string(),
+  // Text value for typeahead and accessibility (required for custom children)
+  textValue: zod.z.string().optional(),
+  // Disabled state
+  isDisabled: zod.z.boolean().optional().default(false),
+  // Item content
+  children: zod.z.custom(),
+  // Optional className for custom styling
+  className: zod.z.string().optional()
 });
-Object.defineProperty(exports, "SelectSectionPropsSchema", {
-  enumerable: true,
-  get: function () { return chunk3XD2JUL3_js.SelectSectionPropsSchema; }
+var SelectSectionPropsSchema = BaseComponentPropsSchema.extend({
+  // Section content (typically Select.Header + Select.Item components)
+  children: zod.z.custom(),
+  // Optional className for custom styling
+  className: zod.z.string().optional()
 });
+var SelectHeaderPropsSchema = BaseComponentPropsSchema.extend({
+  // Header text
+  children: zod.z.custom(),
+  // Optional className for header styling
+  className: zod.z.string().optional()
+});
+
+exports.MultiSelect = MultiSelect;
+exports.Select = Select;
+exports.SelectHeaderPropsSchema = SelectHeaderPropsSchema;
+exports.SelectItemPropsSchema = SelectItemPropsSchema;
+exports.SelectPropsSchema = SelectPropsSchema;
+exports.SelectSectionPropsSchema = SelectSectionPropsSchema;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map