@tribepad/themis 1.0.1 → 1.0.3

package/dist/elements/Select/index.mjs

@@ -1,584 +1,3 @@
 "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
+import {forwardRef,Children,useMemo,memo,useId,isValidElement}from'react';import {SelectValue,ListBoxItem,Select,Label,Text,Button,FieldError,Popover,ListBox,Header,ListBoxSection}from'react-aria-components';import {CheckSquare,Check,Loader2,ChevronDown,AlertCircle}from'lucide-react';import {cva}from'class-variance-authority';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {z}from'zod';var q=cva(["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-visible:ring-2","focus-visible:ring-[var(--ring)]","focus-visible:ring-offset-2","hover:bg-[var(--accent)]/10","disabled:cursor-not-allowed","disabled:opacity-50","data-[loading=true]:cursor-wait","truncate"],{variants:{size:{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-background)]",false:"border-[var(--input-border)] hover:border-[var(--input-border)]/80"}},defaultVariants:{size:"default",isInvalid:false}}),F=cva(["relative","flex","w-full","cursor-pointer","select-none","items-center","rounded-sm","outline-none","transition-colors","pl-8","pr-2","hover:bg-[var(--accent)]","hover:text-[var(--accent-foreground)]","focus:bg-[var(--accent)]","focus:text-[var(--accent-foreground)]","data-[selected=true]:bg-[var(--accent)]","data-[selected=true]:text-[var(--accent-foreground)]","data-[disabled=true]:pointer-events-none","data-[disabled=true]:opacity-50","data-[disabled=true]:text-[var(--menu-muted)]"],{variants:{size:{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"}}),K=cva(["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","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"}}),G=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"}}),J=cva(["flex","items-center","gap-1.5","text-sm","font-medium","text-[var(--destructive-background)]","mt-1.5"],{variants:{size:{sm:"text-xs mt-1",default:"text-sm mt-1.5",lg:"text-base mt-2"}},defaultVariants:{size:"default"}});function X({ariaSelectProps:s,triggerContent:r,triggerRef:n,label:o,description:c,isRequired:u,isDisabled:d,isLoading:a,errorMessage:i,size:p,emptyStateMessage:N,childCount:b,children:v}){let f=useId(),y=useId(),h=useId(),S=!!i;return jsxs(Select,{...s,isInvalid:S,children:[jsxs(Label,{id:f,className:"text-sm font-medium text-[var(--content-foreground)]",children:[o,u&&jsx("span",{className:"text-[var(--destructive-background)] ml-1",children:"*"})]}),c&&jsx(Text,{id:y,slot:"description",className:"text-sm text-[var(--menu-muted)] mt-1",children:c}),jsxs(Button,{ref:n,className:q({size:p,isInvalid:S}),"aria-labelledby":f,"aria-describedby":c?y:i?h:void 0,"data-loading":a,...u&&{"aria-required":"true"},...a&&{"aria-busy":"true"},...(d||a)&&{"aria-disabled":"true"},children:[r,a?jsx(Loader2,{className:"h-4 w-4 animate-spin text-[var(--menu-muted)]","aria-hidden":"true"}):jsx(ChevronDown,{className:"h-4 w-4 text-[var(--menu-muted)]","aria-hidden":"true"})]}),jsx(FieldError,{id:h,className:J({size:p}),children:({validationErrors:g})=>{let m=i||g.join(" ");return m?jsxs(Fragment,{children:[jsx(AlertCircle,{className:"h-4 w-4","aria-hidden":"true"}),m]}):null}}),jsx(Popover,{className:K({size:p}),children:jsxs(ListBox,{className:"outline-none",children:[a&&b>0&&jsx(Fragment,{children:Array.from({length:3}).map((g,m)=>jsx("div",{className:"h-11 px-4 py-2",children:jsx("div",{className:"h-4 bg-[var(--accent-background)] rounded animate-pulse"})},`skeleton-${m}`))}),!a&&jsxs(Fragment,{children:[v,b===0&&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:jsx("span",{role:"status",children:N||"No options available"})})]})]})})]})}var Y=forwardRef(({label:s,placeholder:r,description:n,value:o,defaultValue:c,isOpen:u,isDisabled:d=false,isRequired:a=false,disabledKeys:i,validate:p,validationBehavior:N="aria",errorMessage:b,isLoading:v=false,emptyStateMessage:f,name:y,size:h="default",onChange:S,onOpenChange:g,className:m,children:M,...P},H)=>{let R=Children.count(M);return R>1e3&&console.warn("Select has >1000 items. Consider using Autocomplete component for better performance."),jsx(X,{ariaSelectProps:{value:o,defaultValue:c,onChange:C=>{S&&S(C);},placeholder:r,disabledKeys:i,isOpen:u,onOpenChange:g,isDisabled:d||v,isRequired:a,name:y,validate:p,validationBehavior:N,className:m,...P},triggerContent:jsx(SelectValue,{className:"flex-1 text-left truncate"}),triggerRef:H,label:s,description:n,isRequired:a,isDisabled:d,isLoading:v,errorMessage:b,size:h,emptyStateMessage:f,childCount:R,children:M})});Y.displayName="Select";var Z=forwardRef(({label:s,placeholder:r,description:n,value:o,defaultValue:c,selectionMode:u="multiple",isOpen:d,isDisabled:a=false,isRequired:i=false,disabledKeys:p,validate:N,validationBehavior:b="aria",errorMessage:v,isLoading:f=false,emptyStateMessage:y,name:h,size:S="default",onChange:g,onOpenChange:m,className:M,children:P,...H},R)=>{let C=Children.count(P);C>1e3&&console.warn("Select has >1000 items. Consider using Autocomplete component for better performance.");let O=useMemo(()=>{let z=new Map,I=te=>{Children.forEach(te,$=>{if(isValidElement($)){let V=$;if(V.type===k||V.props?.value){let _=V.props.value,j=V.props.children;_&&typeof j=="string"&&z.set(_,j);}V.props?.children&&I(V.props.children);}});};return I(P),z},[P]),ee=useMemo(()=>!o||!Array.isArray(o)||o.length===0?r||"":o.length<=2?o.map(I=>O.get(I)||I).join(", "):`${o.length} items selected`,[o,O,r]);return jsx(X,{ariaSelectProps:{value:o,defaultValue:c,onChange:z=>{g&&g(z);},selectionMode:"multiple",disabledKeys:p,isOpen:d,onOpenChange:m,isDisabled:a||f,isRequired:i,name:h,validate:N,validationBehavior:b,className:M,...H},triggerContent:jsx("span",{className:"flex-1 text-left truncate",children:ee}),triggerRef:R,label:s,description:n,isRequired:i,isDisabled:a,isLoading:f,errorMessage:v,size:S,emptyStateMessage:y,childCount:C,children:P})});Z.displayName="MultiSelect";var k=memo(function({children:r,textValue:n,value:o,isDisabled:c=false,className:u,...d}){if(!n&&typeof r!="string"){let a="Select.Item with custom children requires textValue prop for accessibility";if(process.env.NODE_ENV==="development")throw new Error(a);console.warn(a);}return jsx(ListBoxItem,{id:o,textValue:n||(typeof r=="string"?r:void 0),className:`${F({size:"default"})} ${u||""}`,isDisabled:c,...d,children:({isSelected:a,selectionMode:i,isDisabled:p})=>jsxs(Fragment,{children:[i==="multiple"?jsx(CheckSquare,{className:`absolute left-2 h-4 w-4 ${a?"visible":"invisible"}`,"aria-hidden":"true"}):a&&jsx(Check,{className:"absolute left-2 h-4 w-4","aria-hidden":"true"}),jsx("span",{className:p?"text-[var(--menu-muted)]":"",children:r})]})})});k.displayName="SelectItem";function T({children:s,className:r,...n}){return jsx(ListBoxSection,{className:`border-t border-[var(--border)] first:border-t-0 ${r||""}`,...n,children:s})}T.displayName="SelectSection";function D({children:s,className:r,...n}){return jsx(Header,{className:`${G({size:"default"})} ${r||""}`,...n,children:s})}D.displayName="SelectHeader";var ve=Object.assign(Y,{Item:k,Section:T,Header:D}),ye=Object.assign(Z,{Item:k,Section:T,Header:D});var B=z.object({className:z.string().optional(),children:z.any().optional(),id:z.string().optional(),"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(),"data-testid":z.string().optional()});var he=z.enum(["sm","default","lg"]),Pe=z.enum(["single","multiple"]),Ve=z.enum(["native","aria"]),Ne=B.extend({label:z.string(),placeholder:z.string().optional(),description:z.string().optional(),value:z.union([z.string(),z.array(z.string())]).optional(),defaultValue:z.union([z.string(),z.array(z.string())]).optional(),selectionMode:Pe.optional().default("single"),isOpen:z.boolean().optional(),isDisabled:z.boolean().optional().default(false),isRequired:z.boolean().optional().default(false),disabledKeys:z.array(z.string()).optional(),validate:z.custom().optional(),validationBehavior:Ve.optional().default("aria"),errorMessage:z.string().optional(),isLoading:z.boolean().optional().default(false),emptyStateMessage:z.string().optional(),name:z.string().optional(),size:he.optional().default("default"),onChange:z.custom().optional(),onOpenChange:z.custom().optional(),children:z.custom()}),ze=B.extend({value:z.string(),textValue:z.string().optional(),isDisabled:z.boolean().optional().default(false),children:z.custom(),className:z.string().optional()}),Ie=B.extend({children:z.custom(),className:z.string().optional()}),we=B.extend({children:z.custom(),className:z.string().optional()});export{ye as MultiSelect,ve as Select,we as SelectHeaderPropsSchema,ze as SelectItemPropsSchema,Ne as SelectPropsSchema,Ie as SelectSectionPropsSchema};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map