@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Select/index.mjs

@@ -1,4 +1,584 @@
-export { MultiSelect, Select, SelectHeaderPropsSchema, SelectItemPropsSchema, SelectPropsSchema, SelectSectionPropsSchema } from '../../chunk-6TYWWQHM.mjs';
-import '../../chunk-5SVLJN2C.mjs';
+"use client";
+import { forwardRef, useId, Children, useMemo, isValidElement } from 'react';
+import { Select as Select$1, Label, Text, Button, SelectValue, FieldError, Popover, ListBox, ListBoxItem, Header, ListBoxSection } from 'react-aria-components';
+import { cva } from 'class-variance-authority';
+import { Loader2, ChevronDown, AlertCircle, CheckSquare, Check } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { z } from 'zod';
+
+// src/elements/Select/Select.tsx
+var selectTriggerVariants = 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 = 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 = 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 = 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 = 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 = 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 = useId();
+    const descriptionId = useId();
+    const errorId = useId();
+    const childCount = 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__ */ jsxs(
+      Select$1,
+      {
+        value,
+        defaultValue,
+        onChange: (key) => {
+          if (onChange) {
+            onChange(key);
+          }
+        },
+        placeholder,
+        disabledKeys,
+        isOpen,
+        onOpenChange,
+        isDisabled: isDisabled || isLoading,
+        isRequired,
+        name,
+        validate,
+        validationBehavior,
+        isInvalid,
+        className,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(Label, { id: labelId, className: "text-sm font-medium text-[var(--content-foreground)]", children: [
+            label,
+            isRequired && /* @__PURE__ */ jsx("span", { className: "text-[var(--destructive)] ml-1", children: "*" })
+          ] }),
+          description && /* @__PURE__ */ jsx(Text, { id: descriptionId, slot: "description", className: "text-sm text-[var(--menu-muted)] mt-1", children: description }),
+          /* @__PURE__ */ jsxs(
+            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__ */ jsx(SelectValue, { className: "flex-1 text-left truncate" }),
+                isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-[var(--menu-muted)]", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-[var(--menu-muted)]", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { id: errorId, className: selectErrorVariants({ size }), children: ({ validationErrors }) => {
+            const displayError = errorMessage || validationErrors.join(" ");
+            return displayError ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4", "aria-hidden": "true" }),
+              displayError
+            ] }) : null;
+          } }),
+          /* @__PURE__ */ jsx(Popover, { className: selectPopoverVariants({ size }), children: /* @__PURE__ */ jsxs(ListBox, { className: "outline-none", children: [
+            isLoading && childCount > 0 && /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-11 px-4 py-2",
+                children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-[var(--accent-background)] rounded animate-pulse" })
+              },
+              `skeleton-${i}`
+            )) }),
+            !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+              children,
+              childCount === 0 && /* @__PURE__ */ jsx(
+                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__ */ jsx("span", { role: "status", children: emptyStateMessage || "No options available" })
+                }
+              )
+            ] })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+SelectRoot.displayName = "Select";
+var MultiSelectRoot = 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 = useId();
+    const descriptionId = useId();
+    const errorId = useId();
+    const childCount = 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 = useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      const processChildren = (nodes) => {
+        Children.forEach(nodes, (child) => {
+          if (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 = 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__ */ jsxs(
+      Select$1,
+      {
+        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__ */ jsxs(Label, { id: labelId, className: "text-sm font-medium text-[var(--content-foreground)]", children: [
+            label,
+            isRequired && /* @__PURE__ */ jsx("span", { className: "text-[var(--destructive)] ml-1", children: "*" })
+          ] }),
+          description && /* @__PURE__ */ jsx(Text, { id: descriptionId, slot: "description", className: "text-sm text-[var(--menu-muted)] mt-1", children: description }),
+          /* @__PURE__ */ jsxs(
+            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__ */ jsx("span", { className: "flex-1 text-left truncate", children: displayValue }),
+                isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-[var(--menu-muted)]", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-[var(--menu-muted)]", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { id: errorId, className: selectErrorVariants({ size }), children: ({ validationErrors }) => {
+            const displayError = errorMessage || validationErrors.join(" ");
+            return displayError ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4", "aria-hidden": "true" }),
+              displayError
+            ] }) : null;
+          } }),
+          /* @__PURE__ */ jsx(Popover, { className: selectPopoverVariants({ size }), children: /* @__PURE__ */ jsxs(ListBox, { className: "outline-none", children: [
+            isLoading && childCount > 0 && /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-11 px-4 py-2", children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-[var(--accent-background)] rounded animate-pulse" }) }, `skeleton-${i}`)) }),
+            !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+              children,
+              childCount === 0 && /* @__PURE__ */ jsx(
+                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__ */ 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__ */ jsx(
+    ListBoxItem,
+    {
+      id: value,
+      textValue: textValue || (typeof children === "string" ? children : void 0),
+      className: `${selectItemVariants({ size: "default" })} ${className || ""}`,
+      isDisabled,
+      ...props,
+      children: ({ isSelected, selectionMode, isDisabled: itemDisabled }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        selectionMode === "multiple" ? /* @__PURE__ */ jsx(
+          CheckSquare,
+          {
+            className: `absolute left-2 h-4 w-4 ${isSelected ? "visible" : "invisible"}`,
+            "aria-hidden": "true"
+          }
+        ) : isSelected && /* @__PURE__ */ jsx(Check, { className: "absolute left-2 h-4 w-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: itemDisabled ? "text-[var(--menu-muted)]" : "", children })
+      ] })
+    }
+  );
+}
+SelectItem.displayName = "SelectItem";
+function SelectSection({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx(ListBoxSection, { className: `border-t border-[var(--border)] first:border-t-0 ${className || ""}`, ...props, children });
+}
+SelectSection.displayName = "SelectSection";
+function SelectHeader({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx(Header, { className: `${selectSectionVariants({ size: "default" })} ${className || ""}`, ...props, children });
+}
+SelectHeader.displayName = "SelectHeader";
+var Select = Object.assign(SelectRoot, {
+  Item: SelectItem,
+  Section: SelectSection,
+  Header: SelectHeader
+});
+var MultiSelect = Object.assign(MultiSelectRoot, {
+  Item: SelectItem,
+  Section: SelectSection,
+  Header: SelectHeader
+});
+var BaseComponentPropsSchema = z.object({
+  // Styling
+  className: z.string().optional(),
+  // React
+  children: z.any().optional(),
+  // ReactNode not directly supported by Zod
+  id: z.string().optional(),
+  // Accessibility (WCAG 2.2 AA requirements)
+  "aria-label": z.string().optional(),
+  "aria-labelledby": z.string().optional(),
+  "aria-describedby": z.string().optional(),
+  "aria-live": z.enum(["off", "polite", "assertive"]).optional(),
+  "aria-hidden": z.boolean().optional(),
+  // Testing & Development
+  "data-testid": z.string().optional()
+});
+
+// src/elements/Select/Select.types.ts
+var SelectSizeSchema = z.enum(["sm", "default", "lg"]);
+var SelectionModeSchema = z.enum(["single", "multiple"]);
+var ValidationBehaviorSchema = z.enum(["native", "aria"]);
+var SelectPropsSchema = BaseComponentPropsSchema.extend({
+  // Display props (US-1)
+  label: z.string(),
+  // Required for accessibility
+  placeholder: z.string().optional(),
+  description: z.string().optional(),
+  // Selection props (US-1, US-6)
+  value: z.union([z.string(), z.array(z.string())]).optional(),
+  defaultValue: z.union([z.string(), z.array(z.string())]).optional(),
+  selectionMode: SelectionModeSchema.optional().default("single"),
+  // State props (US-1, US-5)
+  isOpen: z.boolean().optional(),
+  isDisabled: z.boolean().optional().default(false),
+  isRequired: z.boolean().optional().default(false),
+  disabledKeys: z.array(z.string()).optional(),
+  // Validation props (US-4)
+  validate: z.custom().optional(),
+  validationBehavior: ValidationBehaviorSchema.optional().default("aria"),
+  errorMessage: z.string().optional(),
+  // Loading state (US-7)
+  isLoading: z.boolean().optional().default(false),
+  emptyStateMessage: z.string().optional(),
+  // Form integration (US-10)
+  name: z.string().optional(),
+  // Size variant (US-9)
+  size: SelectSizeSchema.optional().default("default"),
+  // Event handlers (US-1)
+  onChange: z.custom().optional(),
+  onOpenChange: z.custom().optional(),
+  // Children (Select.Item, Select.Section components)
+  children: z.custom()
+});
+var SelectItemPropsSchema = BaseComponentPropsSchema.extend({
+  // Item value (required)
+  value: z.string(),
+  // Text value for typeahead and accessibility (required for custom children)
+  textValue: z.string().optional(),
+  // Disabled state
+  isDisabled: z.boolean().optional().default(false),
+  // Item content
+  children: z.custom(),
+  // Optional className for custom styling
+  className: z.string().optional()
+});
+var SelectSectionPropsSchema = BaseComponentPropsSchema.extend({
+  // Section content (typically Select.Header + Select.Item components)
+  children: z.custom(),
+  // Optional className for custom styling
+  className: z.string().optional()
+});
+var SelectHeaderPropsSchema = BaseComponentPropsSchema.extend({
+  // Header text
+  children: z.custom(),
+  // Optional className for header styling
+  className: z.string().optional()
+});
+
+export { MultiSelect, Select, SelectHeaderPropsSchema, SelectItemPropsSchema, SelectPropsSchema, SelectSectionPropsSchema };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map