@etus/ui 0.1.1 → 0.1.3

package/src/components/forms/MultiSelect/MultiSelect.tsx

@@ -1,291 +0,0 @@
-import type { MultiSelectProps } from "./MultiSelect.types"
-
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-import { Command as CommandPrimitive } from "cmdk"
-import { CheckIcon, ChevronDownIcon, SearchIcon, XIcon } from "lucide-react"
-import * as React from "react"
-
-import { cn } from "../../../lib/utils"
-import {
-  multiSelectContentVariants,
-  multiSelectEmptyVariants,
-  multiSelectInputVariants,
-  multiSelectItemVariants,
-  multiSelectTagVariants,
-  multiSelectTriggerVariants,
-} from "./MultiSelect.variants"
-
-/**
- * MultiSelect - A multi-selection component with tags display
- *
- * Uses Radix Popover for the dropdown container and cmdk (Command) for
- * search/filter functionality with full keyboard accessibility.
- * Selected items are displayed as removable tags.
- *
- * @example
- * ```tsx
- * <MultiSelect
- *   options={[
- *     { value: "apple", label: "Apple" },
- *     { value: "banana", label: "Banana" },
- *   ]}
- *   placeholder="Select fruits..."
- *   onChange={(values) => console.log(values)}
- * />
- * ```
- */
-function MultiSelect({
-  options,
-  value: controlledValue,
-  defaultValue = [],
-  placeholder = "Select options...",
-  searchPlaceholder = "Search...",
-  emptyMessage = "No results found.",
-  disabled = false,
-  error = false,
-  errorMessage,
-  icon,
-  maxSelected,
-  name,
-  open: controlledOpen,
-  defaultOpen = false,
-  onOpenChange,
-  onChange,
-  onSearch,
-  required = false,
-  size = "md",
-  variant = "default",
-  className,
-  ...props
-}: MultiSelectProps) {
-  // Handle controlled vs uncontrolled value
-  const [internalValue, setInternalValue] = React.useState<string[]>(defaultValue)
-  const values = controlledValue ?? internalValue
-
-  // Handle controlled vs uncontrolled open state
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
-  const open = controlledOpen ?? internalOpen
-
-  // Search query state
-  const [searchQuery, setSearchQuery] = React.useState("")
-
-  // Get labels for selected values
-  const selectedLabels = React.useMemo(() => {
-    return values
-      .map((val) => {
-        const option = options.find((opt) => opt.value === val)
-        return option ? { value: val, label: option.label } : null
-      })
-      .filter((item): item is { label: string; value: string; } => item !== null)
-  }, [values, options])
-
-  // Check if max selected limit is reached
-  const isMaxReached = maxSelected !== undefined && values.length >= maxSelected
-
-  // Handle open state changes
-  const handleOpenChange = React.useCallback(
-    (newOpen: boolean) => {
-      // Prevent opening when disabled
-      if (disabled && newOpen) {
-        return
-      }
-
-      if (controlledOpen === undefined) {
-        setInternalOpen(newOpen)
-      }
-      onOpenChange?.(newOpen)
-
-      // Clear search when closing
-      if (!newOpen) {
-        setSearchQuery("")
-      }
-    },
-    [controlledOpen, onOpenChange, disabled]
-  )
-
-  // Handle value toggle
-  const handleToggle = React.useCallback(
-    (selectedValue: string) => {
-      const newValues = values.includes(selectedValue)
-        ? values.filter((v) => v !== selectedValue)
-        : isMaxReached
-          ? values
-          : [...values, selectedValue]
-
-      if (controlledValue === undefined) {
-        setInternalValue(newValues)
-      }
-      onChange?.(newValues)
-    },
-    [values, controlledValue, onChange, isMaxReached]
-  )
-
-  // Handle tag removal
-  const handleRemove = React.useCallback(
-    (valueToRemove: string, event?: React.MouseEvent) => {
-      event?.stopPropagation()
-      const newValues = values.filter((v) => v !== valueToRemove)
-      if (controlledValue === undefined) {
-        setInternalValue(newValues)
-      }
-      onChange?.(newValues)
-    },
-    [values, controlledValue, onChange]
-  )
-
-  // Handle search input changes
-  const handleSearchChange = React.useCallback(
-    (query: string) => {
-      setSearchQuery(query)
-      onSearch?.(query)
-    },
-    [onSearch]
-  )
-
-  return (
-    <>
-      {/* Hidden inputs for form submission */}
-      {name &&
-        values.map((val) => (
-          <input key={val} name={name} type="hidden" value={val} />
-        ))}
-      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>
-      <PopoverPrimitive.Trigger asChild disabled={disabled}>
-        <div
-          className={cn(
-            multiSelectTriggerVariants({ size, variant }),
-            "cursor-pointer flex-wrap",
-            disabled && "pointer-events-none",
-            className
-          )}
-          aria-disabled={disabled || undefined}
-          aria-expanded={open}
-          aria-haspopup="listbox"
-          aria-invalid={error || undefined}
-          aria-required={required || undefined}
-          data-disabled={disabled || undefined}
-          data-error={error || undefined}
-          data-size={size}
-          data-slot="multi-select"
-          data-variant={variant}
-          role="combobox"
-          tabIndex={disabled ? -1 : 0}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault()
-              if (!disabled) {
-                handleOpenChange(!open)
-              }
-            }
-          }}
-          {...props}
-        >
-          <div
-            className="flex flex-1 flex-wrap items-center gap-1"
-            data-slot="multi-select-trigger"
-          >
-            {icon && (
-              <span className="shrink-0" data-slot="multi-select-icon">
-                {icon}
-              </span>
-            )}
-            {selectedLabels.length === 0 ? (
-              <span data-placeholder className="text-muted-foreground">
-                {placeholder}
-              </span>
-            ) : (
-              selectedLabels.map((item) => (
-                <span
-                  key={item.value}
-                  className={cn(multiSelectTagVariants({ size }))}
-                  data-slot="multi-select-tag"
-                  data-value={item.value}
-                >
-                  {item.label}
-                  <button
-                    aria-label={`Remove ${item.label}`}
-                    className="ml-0.5 rounded-sm hover:bg-foreground/10 focus:outline-none"
-                    tabIndex={-1}
-                    type="button"
-                    onClick={(e) => { handleRemove(item.value, e); }}
-                  >
-                    <XIcon className="size-3" />
-                  </button>
-                </span>
-              ))
-            )}
-          </div>
-          <ChevronDownIcon className="size-4 shrink-0 opacity-50" />
-        </div>
-      </PopoverPrimitive.Trigger>
-
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          align="start"
-          className={cn(multiSelectContentVariants())}
-          data-slot="multi-select-content"
-          sideOffset={4}
-        >
-          <CommandPrimitive
-            className="flex h-full w-full flex-col overflow-hidden"
-            shouldFilter={!onSearch}
-          >
-            <div className="flex items-center border-b px-3">
-              <SearchIcon className="mr-2 size-4 shrink-0 opacity-50" />
-              <CommandPrimitive.Input
-                className={cn(multiSelectInputVariants())}
-                data-slot="multi-select-input"
-                placeholder={searchPlaceholder}
-                value={searchQuery}
-                onValueChange={handleSearchChange}
-              />
-            </div>
-
-            <CommandPrimitive.List className="max-h-[300px] overflow-y-auto overflow-x-hidden p-1">
-              <CommandPrimitive.Empty className={cn(multiSelectEmptyVariants())}>
-                {emptyMessage}
-              </CommandPrimitive.Empty>
-
-              {options.map((option) => {
-                const isSelected = values.includes(option.value)
-                const isDisabled = option.disabled ?? (!isSelected && isMaxReached)
-
-                return (
-                  <CommandPrimitive.Item
-                    key={option.value}
-                    className={cn(multiSelectItemVariants())}
-                    data-disabled={isDisabled || undefined}
-                    data-selected={isSelected || undefined}
-                    data-slot="multi-select-item"
-                    disabled={isDisabled}
-                    value={option.label}
-                    onSelect={() => {
-                      if (!isDisabled) {
-                        handleToggle(option.value)
-                      }
-                    }}
-                  >
-                    <div
-                      className={cn(
-                        "flex size-4 shrink-0 items-center justify-center rounded-sm border border-primary",
-                        isSelected
-                          ? "bg-primary text-primary-foreground"
-                          : "opacity-50 [&_svg]:invisible"
-                      )}
-                    >
-                      <CheckIcon className="size-3" />
-                    </div>
-                    {option.label}
-                  </CommandPrimitive.Item>
-                )
-              })}
-            </CommandPrimitive.List>
-          </CommandPrimitive>
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-    </>
-  )
-}
-
-export { MultiSelect }

package/src/components/forms/MultiSelect/MultiSelect.types.ts

@@ -1,147 +0,0 @@
-import type { ComponentProps, ReactNode } from "react"
-
-/**
- * MultiSelect size variants
- */
-export type MultiSelectSize = "lg" | "md" | "sm"
-
-/**
- * MultiSelect visual variants
- */
-export type MultiSelectVariant = "default" | "filled" | "flushed"
-
-/**
- * Represents a single option in the MultiSelect dropdown
- */
-export interface MultiSelectOption {
-  /**
-   * Whether this option is disabled
-   */
-  disabled?: boolean
-
-  /**
-   * The display label of the option
-   */
-  label: string
-
-  /**
-   * The value of the option (used for selection)
-   */
-  value: string
-}
-
-/**
- * Props for the MultiSelect component
- * A multi-selection component that displays selected values as removable tags
- */
-export interface MultiSelectProps extends Omit<ComponentProps<"div">, "onChange"> {
-  /**
-   * Default open state for uncontrolled usage
-   */
-  defaultOpen?: boolean
-
-  /**
-   * Default value for uncontrolled usage
-   */
-  defaultValue?: string[]
-
-  /**
-   * Whether the multiselect is disabled
-   */
-  disabled?: boolean
-
-  /**
-   * Whether the multiselect is in an error state
-   * Applies error styling (red border/ring)
-   */
-  error?: boolean
-
-  /**
-   * Error message for accessibility
-   * Used with aria-errormessage for screen readers
-   */
-  errorMessage?: string
-
-  /**
-   * Leading icon displayed before the selected tags/placeholder
-   */
-  icon?: ReactNode
-
-  /**
-   * Message shown when no options match the search
-   * @default "No results found."
-   */
-  emptyMessage?: string
-
-  /**
-   * Maximum number of items that can be selected
-   */
-  maxSelected?: number
-
-  /**
-   * Name attribute for form submission
-   * When provided, hidden inputs are rendered for each selected value
-   */
-  name?: string
-
-  /**
-   * Callback when value changes
-   */
-  onChange?: (values: string[]) => void
-
-  /**
-   * Callback when open state changes
-   */
-  onOpenChange?: (open: boolean) => void
-
-  /**
-   * Callback when search query changes
-   * Useful for async/server-side filtering
-   */
-  onSearch?: (query: string) => void
-
-  /**
-   * Controlled open state
-   */
-  open?: boolean
-
-  /**
-   * Array of options to display in the dropdown
-   */
-  options: MultiSelectOption[]
-
-  /**
-   * Placeholder text when no value is selected
-   * @default "Select options..."
-   */
-  placeholder?: string
-
-  /**
-   * Whether the multiselect is required
-   * Adds aria-required attribute for accessibility
-   */
-  required?: boolean
-
-  /**
-   * Placeholder text for the search input
-   * @default "Search..."
-   */
-  searchPlaceholder?: string
-
-  /**
-   * Visual size of the multiselect
-   * @default "md"
-   */
-  size?: MultiSelectSize
-
-  /**
-   * Controlled value of the multiselect (array of selected values)
-   */
-  value?: string[]
-
-  /**
-   * Visual variant of the multiselect
-   * @default "default"
-   */
-  variant?: MultiSelectVariant
-}

package/src/components/forms/MultiSelect/MultiSelect.variants.ts

@@ -1,132 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-
-/**
- * MultiSelectTrigger variant styles using CVA
- */
-export const multiSelectTriggerVariants = cva(
-  // Base styles
-  [
-    "flex w-[var(--multiselect-trigger-width)] items-center justify-between gap-2 rounded-md border bg-transparent",
-    "text-sm whitespace-normal shadow-xs transition-[color,box-shadow] outline-none",
-    "data-[placeholder]:text-muted-foreground",
-    "[&_svg:not([class*='text-'])]:text-muted-foreground",
-    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-    "dark:bg-input/30 dark:hover:bg-input/50",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "min-h-[var(--multiselect-trigger-min-height-sm)] px-[var(--multiselect-trigger-padding-x-sm)] py-[var(--multiselect-trigger-padding-y-sm)] text-[length:var(--multiselect-trigger-text-sm)]",
-        md: "min-h-[var(--multiselect-trigger-min-height-md)] px-[var(--multiselect-trigger-padding-x-md)] py-[var(--multiselect-trigger-padding-y-md)] text-[length:var(--multiselect-trigger-text-md)]",
-        lg: "min-h-[var(--multiselect-trigger-min-height-lg)] px-[var(--multiselect-trigger-padding-x-lg)] py-[var(--multiselect-trigger-padding-y-lg)] text-[length:var(--multiselect-trigger-text-lg)]",
-      },
-      variant: {
-        default: "border-input shadow-xs",
-        filled: "border-transparent bg-muted",
-        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0 shadow-none",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      variant: "default",
-    },
-  }
-)
-
-/**
- * MultiSelectContent variant styles using CVA
- */
-export const multiSelectContentVariants = cva(
-  // Base styles
-  [
-    "bg-[color:var(--multiselect-content-bg)] text-[color:var(--multiselect-content-fg)]",
-    "z-50 w-[var(--multiselect-content-width)] overflow-hidden rounded-[var(--multiselect-content-radius)] border shadow-[var(--multiselect-content-shadow)] p-0",
-    // Animation classes
-    "data-[state=open]:animate-in data-[state=closed]:animate-out",
-    "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-    "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-    "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-    "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-  ],
-  {
-    variants: {},
-    defaultVariants: {},
-  }
-)
-
-/**
- * MultiSelectInput variant styles using CVA
- */
-export const multiSelectInputVariants = cva(
-  [
-    "flex h-[var(--multiselect-input-height)] w-full rounded-md bg-transparent py-[var(--multiselect-input-padding-y)] text-[length:var(--multiselect-input-text)] outline-none",
-    "placeholder:text-muted-foreground",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-  ],
-  {
-    variants: {},
-    defaultVariants: {},
-  }
-)
-
-/**
- * MultiSelectItem variant styles using CVA
- */
-export const multiSelectItemVariants = cva(
-  [
-    "relative flex cursor-default items-center gap-2 rounded-[var(--multiselect-item-radius)] px-[var(--multiselect-item-padding-x)] py-[var(--multiselect-item-padding-y)] text-[length:var(--multiselect-item-text)]",
-    "outline-none select-none",
-    "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
-    "data-[highlighted=true]:bg-accent data-[highlighted=true]:text-accent-foreground",
-    "[&_svg:not([class*='text-'])]:text-muted-foreground",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  ],
-  {
-    variants: {},
-    defaultVariants: {},
-  }
-)
-
-/**
- * MultiSelectEmpty variant styles using CVA
- */
-export const multiSelectEmptyVariants = cva(
-  ["py-[var(--multiselect-empty-padding-y)] text-center text-[length:var(--multiselect-empty-text)] text-[color:var(--multiselect-empty-fg)]"],
-  {
-    variants: {},
-    defaultVariants: {},
-  }
-)
-
-/**
- * MultiSelectTag variant styles using CVA
- */
-export const multiSelectTagVariants = cva(
-  [
-    "inline-flex items-center gap-1 rounded-[var(--multiselect-tag-radius)] bg-[color:var(--multiselect-tag-bg)] text-[color:var(--multiselect-tag-fg)]",
-    "font-medium shrink-0",
-    "[&_svg]:size-3 [&_svg]:shrink-0",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "text-[length:var(--multiselect-tag-text-sm)] px-[var(--multiselect-tag-padding-x-sm)] py-[var(--multiselect-tag-padding-y-sm)]",
-        md: "text-[length:var(--multiselect-tag-text-md)] px-[var(--multiselect-tag-padding-x-md)] py-[var(--multiselect-tag-padding-y-md)]",
-        lg: "text-[length:var(--multiselect-tag-text-lg)] px-[var(--multiselect-tag-padding-x-lg)] py-[var(--multiselect-tag-padding-y-lg)]",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
-  }
-)
-
-export type MultiSelectTriggerVariantProps = VariantProps<typeof multiSelectTriggerVariants>
-export type MultiSelectContentVariantProps = VariantProps<typeof multiSelectContentVariants>
-export type MultiSelectInputVariantProps = VariantProps<typeof multiSelectInputVariants>
-export type MultiSelectItemVariantProps = VariantProps<typeof multiSelectItemVariants>
-export type MultiSelectEmptyVariantProps = VariantProps<typeof multiSelectEmptyVariants>
-export type MultiSelectTagVariantProps = VariantProps<typeof multiSelectTagVariants>