analytica-frontend-lib 1.0.44 → 1.0.46

package/dist/Select/index.js

@@ -111,8 +111,6 @@ var Select = ({
     store,
     (s) => s
   );
-  const isControlled = propValue !== void 0;
-  const currentValue = isControlled ? propValue : value;
   const findLabelForValue = (children2, targetValue) => {
     let found = null;
     const search = (nodes) => {
@@ -137,7 +135,6 @@ var Select = ({
     }
   }, [children, defaultValue, selectedLabel]);
   (0, import_react.useEffect)(() => {
-    setValue(currentValue);
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setOpen(false);
@@ -173,10 +170,16 @@ var Select = ({
     };
   }, [open]);
   (0, import_react.useEffect)(() => {
-    if (onValueChange) {
-      onValueChange(value);
+    setValue(value);
+    onValueChange?.(value);
+  }, [value, onValueChange]);
+  (0, import_react.useEffect)(() => {
+    if (propValue) {
+      setValue(propValue);
+      const label = findLabelForValue(children, propValue);
+      if (label) store.setState({ selectedLabel: label });
     }
-  }, [value]);
+  }, [propValue]);
   const sizeClasses = SIZE_CLASSES[size];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore(children, store) });
 };
@@ -269,8 +272,12 @@ var SelectItem = (0, import_react.forwardRef)(
     ...props
   }, ref) => {
     const store = useSelectStore(externalStore);
-    const selectedValue = (0, import_zustand.useStore)(store, (s) => s.value);
-    const { setValue, setSelectedLabel, setOpen } = store.getState();
+    const {
+      value: selectedValue,
+      setValue,
+      setOpen,
+      setSelectedLabel
+    } = (0, import_zustand.useStore)(store, (s) => s);
     const handleClick = (e) => {
       const labelNode = getLabelAsNode(children);
       if (!disabled) {

package/dist/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Select/Select.tsx"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n  ReactNode,\n  useEffect,\n  useRef,\n  ButtonHTMLAttributes,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  isValidElement,\n  Children,\n  cloneElement,\n} from 'react';\nimport { CaretDown, Check } from 'phosphor-react';\n\nconst VARIANT_CLASSES = {\n  outlined: 'border-2 rounded-sm focus:border-primary-950',\n  underlined: 'border-b-2 focus:border-primary-950',\n  rounded: 'border-2 rounded-4xl focus:border-primary-950',\n} as const;\n\nconst SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n  large: 'text-lg',\n} as const;\n\nconst SIDE_CLASSES = {\n  top: 'bottom-full -translate-y-1',\n  right: 'top-full translate-y-1',\n  bottom: 'top-full translate-y-1',\n  left: 'top-full translate-y-1',\n};\nconst ALIGN_CLASSES = {\n  start: 'left-0',\n  center: 'left-1/2 -translate-x-1/2',\n  end: 'right-0',\n};\n\ninterface SelectStore {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  value: string;\n  setValue: (value: string) => void;\n  selectedLabel: ReactNode;\n  setSelectedLabel: (label: ReactNode) => void;\n}\n\ntype SelectStoreApi = StoreApi<SelectStore>;\n\nexport function createSelectStore(): SelectStoreApi {\n  return create<SelectStore>((set) => ({\n    open: false,\n    setOpen: (open) => set({ open }),\n    value: '',\n    setValue: (value) => set({ value }),\n    selectedLabel: '',\n    setSelectedLabel: (label) => set({ selectedLabel: label }),\n  }));\n}\n\nexport const useSelectStore = (externalStore?: SelectStoreApi) => {\n  if (!externalStore) {\n    throw new Error(\n      'Component must be used within a Select (store is missing)'\n    );\n  }\n\n  return externalStore;\n};\n\nexport function getLabelAsNode(children: ReactNode): ReactNode {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return children;\n  }\n  const flattened = Children.toArray(children);\n\n  if (flattened.length === 1) return flattened[0];\n\n  return <>{flattened}</>;\n}\n\ninterface SelectProps {\n  children: ReactNode;\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  size?: 'small' | 'medium' | 'large';\n}\n\nconst injectStore = (children: ReactNode, store: SelectStoreApi): ReactNode => {\n  return Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      const typedChild = child as ReactElement<{\n        store?: SelectStoreApi;\n        children?: ReactNode;\n      }>;\n\n      const newProps: Partial<{ store: SelectStoreApi; children: ReactNode }> =\n        {\n          store,\n        };\n\n      if (typedChild.props.children) {\n        newProps.children = injectStore(typedChild.props.children, store);\n      }\n\n      return cloneElement(typedChild, newProps);\n    }\n    return child;\n  });\n};\n\nconst Select = ({\n  children,\n  defaultValue = '',\n  value: propValue,\n  onValueChange,\n  size = 'small',\n}: SelectProps) => {\n  const storeRef = useRef<SelectStoreApi | null>(null);\n  storeRef.current ??= createSelectStore();\n  const store = storeRef.current;\n\n  const selectRef = useRef<HTMLDivElement>(null);\n  const { open, setOpen, setValue, value, selectedLabel } = useStore(\n    store,\n    (s) => s\n  );\n\n  const isControlled = propValue !== undefined;\n  const currentValue = isControlled ? propValue : value;\n\n  const findLabelForValue = (\n    children: ReactNode,\n    targetValue: string\n  ): string | null => {\n    let found: string | null = null;\n    const search = (nodes: ReactNode) => {\n      Children.forEach(nodes, (child) => {\n        if (!isValidElement(child)) return;\n        const typedChild = child as ReactElement<{\n          value?: string;\n          children?: ReactNode;\n        }>;\n        if (\n          typedChild.type === SelectItem &&\n          typedChild.props.value === targetValue\n        ) {\n          if (typeof typedChild.props.children === 'string')\n            found = typedChild.props.children;\n        }\n        if (typedChild.props.children && !found)\n          search(typedChild.props.children);\n      });\n    };\n    search(children);\n    return found;\n  };\n\n  useEffect(() => {\n    if (!selectedLabel && defaultValue) {\n      const label = findLabelForValue(children, defaultValue);\n      if (label) store.setState({ selectedLabel: label });\n    }\n  }, [children, defaultValue, selectedLabel]);\n\n  useEffect(() => {\n    setValue(currentValue);\n    const handleClickOutside = (event: globalThis.MouseEvent) => {\n      if (\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n\n    const handleArrowKeys = (event: globalThis.KeyboardEvent) => {\n      const selectContent = selectRef.current?.querySelector('[role=\"menu\"]');\n      if (selectContent) {\n        event.preventDefault();\n        const items = Array.from(\n          selectContent.querySelectorAll(\n            '[role=\"menuitem\"]:not([aria-disabled=\"true\"])'\n          )\n        ).filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n        const focused = document.activeElement as HTMLElement;\n        const currentIndex = items.findIndex((item) => item === focused);\n\n        let nextIndex = 0;\n        if (event.key === 'ArrowDown') {\n          nextIndex =\n            currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n        } else {\n          nextIndex =\n            currentIndex === -1\n              ? items.length - 1\n              : (currentIndex - 1 + items.length) % items.length;\n        }\n        items[nextIndex]?.focus();\n      }\n    };\n\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('keydown', handleArrowKeys);\n    }\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('keydown', handleArrowKeys);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(value);\n    }\n  }, [value]);\n\n  const sizeClasses = SIZE_CLASSES[size];\n\n  return (\n    <div className={`relative ${sizeClasses} w-[288px]`} ref={selectRef}>\n      {injectStore(children, store)}\n    </div>\n  );\n};\n\nconst SelectValue = ({\n  placeholder,\n  store: externalStore,\n}: {\n  placeholder?: string;\n  store?: SelectStoreApi;\n}) => {\n  const store = useSelectStore(externalStore);\n\n  const selectedLabel = useStore(store, (s) => s.selectedLabel);\n  const value = useStore(store, (s) => s.value);\n  return (\n    <span className=\"text-inherit\">\n      {selectedLabel || placeholder || value}\n    </span>\n  );\n};\n\ninterface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  invalid?: boolean;\n  variant?: 'outlined' | 'underlined' | 'rounded';\n  store?: SelectStoreApi;\n}\n\nconst SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      className,\n      invalid = false,\n      variant = 'outlined',\n      store: externalStore,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n\n    const open = useStore(store, (s) => s.open);\n    const toggleOpen = () => store.setState({ open: !open });\n\n    const variantClasses = VARIANT_CLASSES[variant];\n\n    return (\n      <button\n        ref={ref}\n        className={`\n        flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2\n        ${invalid && 'border-indicator-error text-text-600'}\n        ${\n          disabled\n            ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n            : 'cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n        }\n        ${!invalid && !disabled ? 'text-text-700' : ''}\n        ${variantClasses}\n        ${className}\n      `}\n        onClick={toggleOpen}\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-controls={open ? 'select-content' : undefined}\n        {...props}\n      >\n        {props.children}\n        <CaretDown\n          className={`h-[1em] w-[1em] opacity-50 transition-transform ${open ? 'rotate-180' : ''}`}\n        />\n      </button>\n    );\n  }\n);\nSelectTrigger.displayName = 'SelectTrigger';\n\ninterface SelectContentProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  align?: 'start' | 'center' | 'end';\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  store?: SelectStoreApi;\n}\n\nconst SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      children,\n      className,\n      align = 'start',\n      side = 'bottom',\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n\n    const open = useStore(store, (s) => s.open);\n    if (!open) return null;\n\n    const getPositionClasses = () =>\n      `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;\n\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        className={`bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nSelectContent.displayName = 'SelectContent';\n\ninterface SelectItemProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  disabled?: boolean;\n  store?: SelectStoreApi;\n}\n\nconst SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled = false,\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n\n    const selectedValue = useStore(store, (s) => s.value);\n    const { setValue, setSelectedLabel, setOpen } = store.getState();\n\n    const handleClick = (\n      e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>\n    ) => {\n      const labelNode = getLabelAsNode(children);\n      if (!disabled) {\n        setValue(value);\n        setSelectedLabel(labelNode);\n        setOpen(false);\n      }\n      props.onClick?.(e as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        role=\"menuitem\"\n        aria-disabled={disabled}\n        ref={ref}\n        className={`\n          focus-visible:bg-background-50\n          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0\n          ${className}\n          ${\n            disabled\n              ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n              : 'cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n          }\n          ${selectedValue === value && 'bg-background-50'}\n        `}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') handleClick(e);\n        }}\n        tabIndex={disabled ? -1 : 0}\n        {...props}\n      >\n        <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n          {selectedValue === value && <Check className=\"\" />}\n        </span>\n        {children}\n      </div>\n    );\n  }\n);\n\nSelectItem.displayName = 'SelectItem';\n\nexport default Select;\nexport { SelectTrigger, SelectContent, SelectItem, SelectValue };\n"],"mappings":"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","names":["children"]}
+{"version":3,"sources":["../../src/components/Select/Select.tsx"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n  ReactNode,\n  useEffect,\n  useRef,\n  ButtonHTMLAttributes,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  isValidElement,\n  Children,\n  cloneElement,\n} from 'react';\nimport { CaretDown, Check } from 'phosphor-react';\n\nconst VARIANT_CLASSES = {\n  outlined: 'border-2 rounded-sm focus:border-primary-950',\n  underlined: 'border-b-2 focus:border-primary-950',\n  rounded: 'border-2 rounded-4xl focus:border-primary-950',\n} as const;\n\nconst SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n  large: 'text-lg',\n} as const;\n\nconst SIDE_CLASSES = {\n  top: 'bottom-full -translate-y-1',\n  right: 'top-full translate-y-1',\n  bottom: 'top-full translate-y-1',\n  left: 'top-full translate-y-1',\n};\nconst ALIGN_CLASSES = {\n  start: 'left-0',\n  center: 'left-1/2 -translate-x-1/2',\n  end: 'right-0',\n};\n\ninterface SelectStore {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  value: string;\n  setValue: (value: string) => void;\n  selectedLabel: ReactNode;\n  setSelectedLabel: (label: ReactNode) => void;\n}\n\ntype SelectStoreApi = StoreApi<SelectStore>;\n\nexport function createSelectStore(): SelectStoreApi {\n  return create<SelectStore>((set) => ({\n    open: false,\n    setOpen: (open) => set({ open }),\n    value: '',\n    setValue: (value) => set({ value }),\n    selectedLabel: '',\n    setSelectedLabel: (label) => set({ selectedLabel: label }),\n  }));\n}\n\nexport const useSelectStore = (externalStore?: SelectStoreApi) => {\n  if (!externalStore) {\n    throw new Error(\n      'Component must be used within a Select (store is missing)'\n    );\n  }\n\n  return externalStore;\n};\n\nexport function getLabelAsNode(children: ReactNode): ReactNode {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return children;\n  }\n  const flattened = Children.toArray(children);\n\n  if (flattened.length === 1) return flattened[0];\n\n  return <>{flattened}</>;\n}\n\ninterface SelectProps {\n  children: ReactNode;\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  size?: 'small' | 'medium' | 'large';\n}\n\nconst injectStore = (children: ReactNode, store: SelectStoreApi): ReactNode => {\n  return Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      const typedChild = child as ReactElement<{\n        store?: SelectStoreApi;\n        children?: ReactNode;\n      }>;\n\n      const newProps: Partial<{ store: SelectStoreApi; children: ReactNode }> =\n        {\n          store,\n        };\n\n      if (typedChild.props.children) {\n        newProps.children = injectStore(typedChild.props.children, store);\n      }\n\n      return cloneElement(typedChild, newProps);\n    }\n    return child;\n  });\n};\n\nconst Select = ({\n  children,\n  defaultValue = '',\n  value: propValue,\n  onValueChange,\n  size = 'small',\n}: SelectProps) => {\n  const storeRef = useRef<SelectStoreApi | null>(null);\n  storeRef.current ??= createSelectStore();\n  const store = storeRef.current;\n\n  const selectRef = useRef<HTMLDivElement>(null);\n  const { open, setOpen, setValue, value, selectedLabel } = useStore(\n    store,\n    (s) => s\n  );\n\n  const findLabelForValue = (\n    children: ReactNode,\n    targetValue: string\n  ): string | null => {\n    let found: string | null = null;\n    const search = (nodes: ReactNode) => {\n      Children.forEach(nodes, (child) => {\n        if (!isValidElement(child)) return;\n        const typedChild = child as ReactElement<{\n          value?: string;\n          children?: ReactNode;\n        }>;\n        if (\n          typedChild.type === SelectItem &&\n          typedChild.props.value === targetValue\n        ) {\n          if (typeof typedChild.props.children === 'string')\n            found = typedChild.props.children;\n        }\n        if (typedChild.props.children && !found)\n          search(typedChild.props.children);\n      });\n    };\n    search(children);\n    return found;\n  };\n\n  useEffect(() => {\n    if (!selectedLabel && defaultValue) {\n      const label = findLabelForValue(children, defaultValue);\n      if (label) store.setState({ selectedLabel: label });\n    }\n  }, [children, defaultValue, selectedLabel]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: globalThis.MouseEvent) => {\n      if (\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n\n    const handleArrowKeys = (event: globalThis.KeyboardEvent) => {\n      const selectContent = selectRef.current?.querySelector('[role=\"menu\"]');\n      if (selectContent) {\n        event.preventDefault();\n        const items = Array.from(\n          selectContent.querySelectorAll(\n            '[role=\"menuitem\"]:not([aria-disabled=\"true\"])'\n          )\n        ).filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n        const focused = document.activeElement as HTMLElement;\n        const currentIndex = items.findIndex((item) => item === focused);\n\n        let nextIndex = 0;\n        if (event.key === 'ArrowDown') {\n          nextIndex =\n            currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n        } else {\n          nextIndex =\n            currentIndex === -1\n              ? items.length - 1\n              : (currentIndex - 1 + items.length) % items.length;\n        }\n        items[nextIndex]?.focus();\n      }\n    };\n\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('keydown', handleArrowKeys);\n    }\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('keydown', handleArrowKeys);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    setValue(value);\n    onValueChange?.(value);\n  }, [value, onValueChange]);\n\n  useEffect(() => {\n    if (propValue) {\n      setValue(propValue);\n      const label = findLabelForValue(children, propValue);\n      if (label) store.setState({ selectedLabel: label });\n    }\n  }, [propValue]);\n\n  const sizeClasses = SIZE_CLASSES[size];\n\n  return (\n    <div className={`relative ${sizeClasses} w-[288px]`} ref={selectRef}>\n      {injectStore(children, store)}\n    </div>\n  );\n};\n\nconst SelectValue = ({\n  placeholder,\n  store: externalStore,\n}: {\n  placeholder?: string;\n  store?: SelectStoreApi;\n}) => {\n  const store = useSelectStore(externalStore);\n\n  const selectedLabel = useStore(store, (s) => s.selectedLabel);\n  const value = useStore(store, (s) => s.value);\n  return (\n    <span className=\"text-inherit\">\n      {selectedLabel || placeholder || value}\n    </span>\n  );\n};\n\ninterface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  invalid?: boolean;\n  variant?: 'outlined' | 'underlined' | 'rounded';\n  store?: SelectStoreApi;\n}\n\nconst SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      className,\n      invalid = false,\n      variant = 'outlined',\n      store: externalStore,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n    const open = useStore(store, (s) => s.open);\n    const toggleOpen = () => store.setState({ open: !open });\n\n    const variantClasses = VARIANT_CLASSES[variant];\n\n    return (\n      <button\n        ref={ref}\n        className={`\n        flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2\n        ${invalid && 'border-indicator-error text-text-600'}\n        ${\n          disabled\n            ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n            : 'cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n        }\n        ${!invalid && !disabled ? 'text-text-700' : ''}\n        ${variantClasses}\n        ${className}\n      `}\n        onClick={toggleOpen}\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-controls={open ? 'select-content' : undefined}\n        {...props}\n      >\n        {props.children}\n        <CaretDown\n          className={`h-[1em] w-[1em] opacity-50 transition-transform ${open ? 'rotate-180' : ''}`}\n        />\n      </button>\n    );\n  }\n);\nSelectTrigger.displayName = 'SelectTrigger';\n\ninterface SelectContentProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  align?: 'start' | 'center' | 'end';\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  store?: SelectStoreApi;\n}\n\nconst SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      children,\n      className,\n      align = 'start',\n      side = 'bottom',\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n\n    const open = useStore(store, (s) => s.open);\n    if (!open) return null;\n\n    const getPositionClasses = () =>\n      `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;\n\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        className={`bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nSelectContent.displayName = 'SelectContent';\n\ninterface SelectItemProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  disabled?: boolean;\n  store?: SelectStoreApi;\n}\n\nconst SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled = false,\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n    const {\n      value: selectedValue,\n      setValue,\n      setOpen,\n      setSelectedLabel,\n    } = useStore(store, (s) => s);\n\n    const handleClick = (\n      e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>\n    ) => {\n      const labelNode = getLabelAsNode(children);\n      if (!disabled) {\n        setValue(value);\n        setSelectedLabel(labelNode);\n        setOpen(false);\n      }\n      props.onClick?.(e as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        role=\"menuitem\"\n        aria-disabled={disabled}\n        ref={ref}\n        className={`\n          focus-visible:bg-background-50\n          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0\n          ${className}\n          ${\n            disabled\n              ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n              : 'cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n          }\n          ${selectedValue === value && 'bg-background-50'}\n        `}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') handleClick(e);\n        }}\n        tabIndex={disabled ? -1 : 0}\n        {...props}\n      >\n        <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n          {selectedValue === value && <Check className=\"\" />}\n        </span>\n        {children}\n      </div>\n    );\n  }\n);\n\nSelectItem.displayName = 'SelectItem';\n\nexport default Select;\nexport { SelectTrigger, SelectContent, SelectItem, SelectValue };\n"],"mappings":"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","names":["children"]}

package/dist/Select/index.mjs

@@ -87,8 +87,6 @@ var Select = ({
     store,
     (s) => s
   );
-  const isControlled = propValue !== void 0;
-  const currentValue = isControlled ? propValue : value;
   const findLabelForValue = (children2, targetValue) => {
     let found = null;
     const search = (nodes) => {
@@ -113,7 +111,6 @@ var Select = ({
     }
   }, [children, defaultValue, selectedLabel]);
   useEffect(() => {
-    setValue(currentValue);
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setOpen(false);
@@ -149,10 +146,16 @@ var Select = ({
     };
   }, [open]);
   useEffect(() => {
-    if (onValueChange) {
-      onValueChange(value);
+    setValue(value);
+    onValueChange?.(value);
+  }, [value, onValueChange]);
+  useEffect(() => {
+    if (propValue) {
+      setValue(propValue);
+      const label = findLabelForValue(children, propValue);
+      if (label) store.setState({ selectedLabel: label });
     }
-  }, [value]);
+  }, [propValue]);
   const sizeClasses = SIZE_CLASSES[size];
   return /* @__PURE__ */ jsx("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore(children, store) });
 };
@@ -245,8 +248,12 @@ var SelectItem = forwardRef(
     ...props
   }, ref) => {
     const store = useSelectStore(externalStore);
-    const selectedValue = useStore(store, (s) => s.value);
-    const { setValue, setSelectedLabel, setOpen } = store.getState();
+    const {
+      value: selectedValue,
+      setValue,
+      setOpen,
+      setSelectedLabel
+    } = useStore(store, (s) => s);
     const handleClick = (e) => {
       const labelNode = getLabelAsNode(children);
       if (!disabled) {

package/dist/Select/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Select/Select.tsx"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n  ReactNode,\n  useEffect,\n  useRef,\n  ButtonHTMLAttributes,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  isValidElement,\n  Children,\n  cloneElement,\n} from 'react';\nimport { CaretDown, Check } from 'phosphor-react';\n\nconst VARIANT_CLASSES = {\n  outlined: 'border-2 rounded-sm focus:border-primary-950',\n  underlined: 'border-b-2 focus:border-primary-950',\n  rounded: 'border-2 rounded-4xl focus:border-primary-950',\n} as const;\n\nconst SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n  large: 'text-lg',\n} as const;\n\nconst SIDE_CLASSES = {\n  top: 'bottom-full -translate-y-1',\n  right: 'top-full translate-y-1',\n  bottom: 'top-full translate-y-1',\n  left: 'top-full translate-y-1',\n};\nconst ALIGN_CLASSES = {\n  start: 'left-0',\n  center: 'left-1/2 -translate-x-1/2',\n  end: 'right-0',\n};\n\ninterface SelectStore {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  value: string;\n  setValue: (value: string) => void;\n  selectedLabel: ReactNode;\n  setSelectedLabel: (label: ReactNode) => void;\n}\n\ntype SelectStoreApi = StoreApi<SelectStore>;\n\nexport function createSelectStore(): SelectStoreApi {\n  return create<SelectStore>((set) => ({\n    open: false,\n    setOpen: (open) => set({ open }),\n    value: '',\n    setValue: (value) => set({ value }),\n    selectedLabel: '',\n    setSelectedLabel: (label) => set({ selectedLabel: label }),\n  }));\n}\n\nexport const useSelectStore = (externalStore?: SelectStoreApi) => {\n  if (!externalStore) {\n    throw new Error(\n      'Component must be used within a Select (store is missing)'\n    );\n  }\n\n  return externalStore;\n};\n\nexport function getLabelAsNode(children: ReactNode): ReactNode {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return children;\n  }\n  const flattened = Children.toArray(children);\n\n  if (flattened.length === 1) return flattened[0];\n\n  return <>{flattened}</>;\n}\n\ninterface SelectProps {\n  children: ReactNode;\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  size?: 'small' | 'medium' | 'large';\n}\n\nconst injectStore = (children: ReactNode, store: SelectStoreApi): ReactNode => {\n  return Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      const typedChild = child as ReactElement<{\n        store?: SelectStoreApi;\n        children?: ReactNode;\n      }>;\n\n      const newProps: Partial<{ store: SelectStoreApi; children: ReactNode }> =\n        {\n          store,\n        };\n\n      if (typedChild.props.children) {\n        newProps.children = injectStore(typedChild.props.children, store);\n      }\n\n      return cloneElement(typedChild, newProps);\n    }\n    return child;\n  });\n};\n\nconst Select = ({\n  children,\n  defaultValue = '',\n  value: propValue,\n  onValueChange,\n  size = 'small',\n}: SelectProps) => {\n  const storeRef = useRef<SelectStoreApi | null>(null);\n  storeRef.current ??= createSelectStore();\n  const store = storeRef.current;\n\n  const selectRef = useRef<HTMLDivElement>(null);\n  const { open, setOpen, setValue, value, selectedLabel } = useStore(\n    store,\n    (s) => s\n  );\n\n  const isControlled = propValue !== undefined;\n  const currentValue = isControlled ? propValue : value;\n\n  const findLabelForValue = (\n    children: ReactNode,\n    targetValue: string\n  ): string | null => {\n    let found: string | null = null;\n    const search = (nodes: ReactNode) => {\n      Children.forEach(nodes, (child) => {\n        if (!isValidElement(child)) return;\n        const typedChild = child as ReactElement<{\n          value?: string;\n          children?: ReactNode;\n        }>;\n        if (\n          typedChild.type === SelectItem &&\n          typedChild.props.value === targetValue\n        ) {\n          if (typeof typedChild.props.children === 'string')\n            found = typedChild.props.children;\n        }\n        if (typedChild.props.children && !found)\n          search(typedChild.props.children);\n      });\n    };\n    search(children);\n    return found;\n  };\n\n  useEffect(() => {\n    if (!selectedLabel && defaultValue) {\n      const label = findLabelForValue(children, defaultValue);\n      if (label) store.setState({ selectedLabel: label });\n    }\n  }, [children, defaultValue, selectedLabel]);\n\n  useEffect(() => {\n    setValue(currentValue);\n    const handleClickOutside = (event: globalThis.MouseEvent) => {\n      if (\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n\n    const handleArrowKeys = (event: globalThis.KeyboardEvent) => {\n      const selectContent = selectRef.current?.querySelector('[role=\"menu\"]');\n      if (selectContent) {\n        event.preventDefault();\n        const items = Array.from(\n          selectContent.querySelectorAll(\n            '[role=\"menuitem\"]:not([aria-disabled=\"true\"])'\n          )\n        ).filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n        const focused = document.activeElement as HTMLElement;\n        const currentIndex = items.findIndex((item) => item === focused);\n\n        let nextIndex = 0;\n        if (event.key === 'ArrowDown') {\n          nextIndex =\n            currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n        } else {\n          nextIndex =\n            currentIndex === -1\n              ? items.length - 1\n              : (currentIndex - 1 + items.length) % items.length;\n        }\n        items[nextIndex]?.focus();\n      }\n    };\n\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('keydown', handleArrowKeys);\n    }\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('keydown', handleArrowKeys);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    if (onValueChange) {\n      onValueChange(value);\n    }\n  }, [value]);\n\n  const sizeClasses = SIZE_CLASSES[size];\n\n  return (\n    <div className={`relative ${sizeClasses} w-[288px]`} ref={selectRef}>\n      {injectStore(children, store)}\n    </div>\n  );\n};\n\nconst SelectValue = ({\n  placeholder,\n  store: externalStore,\n}: {\n  placeholder?: string;\n  store?: SelectStoreApi;\n}) => {\n  const store = useSelectStore(externalStore);\n\n  const selectedLabel = useStore(store, (s) => s.selectedLabel);\n  const value = useStore(store, (s) => s.value);\n  return (\n    <span className=\"text-inherit\">\n      {selectedLabel || placeholder || value}\n    </span>\n  );\n};\n\ninterface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  invalid?: boolean;\n  variant?: 'outlined' | 'underlined' | 'rounded';\n  store?: SelectStoreApi;\n}\n\nconst SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      className,\n      invalid = false,\n      variant = 'outlined',\n      store: externalStore,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n\n    const open = useStore(store, (s) => s.open);\n    const toggleOpen = () => store.setState({ open: !open });\n\n    const variantClasses = VARIANT_CLASSES[variant];\n\n    return (\n      <button\n        ref={ref}\n        className={`\n        flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2\n        ${invalid && 'border-indicator-error text-text-600'}\n        ${\n          disabled\n            ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n            : 'cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n        }\n        ${!invalid && !disabled ? 'text-text-700' : ''}\n        ${variantClasses}\n        ${className}\n      `}\n        onClick={toggleOpen}\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-controls={open ? 'select-content' : undefined}\n        {...props}\n      >\n        {props.children}\n        <CaretDown\n          className={`h-[1em] w-[1em] opacity-50 transition-transform ${open ? 'rotate-180' : ''}`}\n        />\n      </button>\n    );\n  }\n);\nSelectTrigger.displayName = 'SelectTrigger';\n\ninterface SelectContentProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  align?: 'start' | 'center' | 'end';\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  store?: SelectStoreApi;\n}\n\nconst SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      children,\n      className,\n      align = 'start',\n      side = 'bottom',\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n\n    const open = useStore(store, (s) => s.open);\n    if (!open) return null;\n\n    const getPositionClasses = () =>\n      `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;\n\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        className={`bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nSelectContent.displayName = 'SelectContent';\n\ninterface SelectItemProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  disabled?: boolean;\n  store?: SelectStoreApi;\n}\n\nconst SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled = false,\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n\n    const selectedValue = useStore(store, (s) => s.value);\n    const { setValue, setSelectedLabel, setOpen } = store.getState();\n\n    const handleClick = (\n      e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>\n    ) => {\n      const labelNode = getLabelAsNode(children);\n      if (!disabled) {\n        setValue(value);\n        setSelectedLabel(labelNode);\n        setOpen(false);\n      }\n      props.onClick?.(e as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        role=\"menuitem\"\n        aria-disabled={disabled}\n        ref={ref}\n        className={`\n          focus-visible:bg-background-50\n          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0\n          ${className}\n          ${\n            disabled\n              ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n              : 'cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n          }\n          ${selectedValue === value && 'bg-background-50'}\n        `}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') handleClick(e);\n        }}\n        tabIndex={disabled ? -1 : 0}\n        {...props}\n      >\n        <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n          {selectedValue === value && <Check className=\"\" />}\n        </span>\n        {children}\n      </div>\n    );\n  }\n);\n\nSelectItem.displayName = 'SelectItem';\n\nexport default Select;\nexport { SelectTrigger, SelectContent, SelectItem, SelectValue };\n"],"mappings":"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","names":["children"]}
+{"version":3,"sources":["../../src/components/Select/Select.tsx"],"sourcesContent":["import { create, StoreApi, useStore } from 'zustand';\nimport {\n  ReactNode,\n  useEffect,\n  useRef,\n  ButtonHTMLAttributes,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  isValidElement,\n  Children,\n  cloneElement,\n} from 'react';\nimport { CaretDown, Check } from 'phosphor-react';\n\nconst VARIANT_CLASSES = {\n  outlined: 'border-2 rounded-sm focus:border-primary-950',\n  underlined: 'border-b-2 focus:border-primary-950',\n  rounded: 'border-2 rounded-4xl focus:border-primary-950',\n} as const;\n\nconst SIZE_CLASSES = {\n  small: 'text-sm',\n  medium: 'text-md',\n  large: 'text-lg',\n} as const;\n\nconst SIDE_CLASSES = {\n  top: 'bottom-full -translate-y-1',\n  right: 'top-full translate-y-1',\n  bottom: 'top-full translate-y-1',\n  left: 'top-full translate-y-1',\n};\nconst ALIGN_CLASSES = {\n  start: 'left-0',\n  center: 'left-1/2 -translate-x-1/2',\n  end: 'right-0',\n};\n\ninterface SelectStore {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  value: string;\n  setValue: (value: string) => void;\n  selectedLabel: ReactNode;\n  setSelectedLabel: (label: ReactNode) => void;\n}\n\ntype SelectStoreApi = StoreApi<SelectStore>;\n\nexport function createSelectStore(): SelectStoreApi {\n  return create<SelectStore>((set) => ({\n    open: false,\n    setOpen: (open) => set({ open }),\n    value: '',\n    setValue: (value) => set({ value }),\n    selectedLabel: '',\n    setSelectedLabel: (label) => set({ selectedLabel: label }),\n  }));\n}\n\nexport const useSelectStore = (externalStore?: SelectStoreApi) => {\n  if (!externalStore) {\n    throw new Error(\n      'Component must be used within a Select (store is missing)'\n    );\n  }\n\n  return externalStore;\n};\n\nexport function getLabelAsNode(children: ReactNode): ReactNode {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return children;\n  }\n  const flattened = Children.toArray(children);\n\n  if (flattened.length === 1) return flattened[0];\n\n  return <>{flattened}</>;\n}\n\ninterface SelectProps {\n  children: ReactNode;\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  size?: 'small' | 'medium' | 'large';\n}\n\nconst injectStore = (children: ReactNode, store: SelectStoreApi): ReactNode => {\n  return Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      const typedChild = child as ReactElement<{\n        store?: SelectStoreApi;\n        children?: ReactNode;\n      }>;\n\n      const newProps: Partial<{ store: SelectStoreApi; children: ReactNode }> =\n        {\n          store,\n        };\n\n      if (typedChild.props.children) {\n        newProps.children = injectStore(typedChild.props.children, store);\n      }\n\n      return cloneElement(typedChild, newProps);\n    }\n    return child;\n  });\n};\n\nconst Select = ({\n  children,\n  defaultValue = '',\n  value: propValue,\n  onValueChange,\n  size = 'small',\n}: SelectProps) => {\n  const storeRef = useRef<SelectStoreApi | null>(null);\n  storeRef.current ??= createSelectStore();\n  const store = storeRef.current;\n\n  const selectRef = useRef<HTMLDivElement>(null);\n  const { open, setOpen, setValue, value, selectedLabel } = useStore(\n    store,\n    (s) => s\n  );\n\n  const findLabelForValue = (\n    children: ReactNode,\n    targetValue: string\n  ): string | null => {\n    let found: string | null = null;\n    const search = (nodes: ReactNode) => {\n      Children.forEach(nodes, (child) => {\n        if (!isValidElement(child)) return;\n        const typedChild = child as ReactElement<{\n          value?: string;\n          children?: ReactNode;\n        }>;\n        if (\n          typedChild.type === SelectItem &&\n          typedChild.props.value === targetValue\n        ) {\n          if (typeof typedChild.props.children === 'string')\n            found = typedChild.props.children;\n        }\n        if (typedChild.props.children && !found)\n          search(typedChild.props.children);\n      });\n    };\n    search(children);\n    return found;\n  };\n\n  useEffect(() => {\n    if (!selectedLabel && defaultValue) {\n      const label = findLabelForValue(children, defaultValue);\n      if (label) store.setState({ selectedLabel: label });\n    }\n  }, [children, defaultValue, selectedLabel]);\n\n  useEffect(() => {\n    const handleClickOutside = (event: globalThis.MouseEvent) => {\n      if (\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n\n    const handleArrowKeys = (event: globalThis.KeyboardEvent) => {\n      const selectContent = selectRef.current?.querySelector('[role=\"menu\"]');\n      if (selectContent) {\n        event.preventDefault();\n        const items = Array.from(\n          selectContent.querySelectorAll(\n            '[role=\"menuitem\"]:not([aria-disabled=\"true\"])'\n          )\n        ).filter((el): el is HTMLElement => el instanceof HTMLElement);\n\n        const focused = document.activeElement as HTMLElement;\n        const currentIndex = items.findIndex((item) => item === focused);\n\n        let nextIndex = 0;\n        if (event.key === 'ArrowDown') {\n          nextIndex =\n            currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n        } else {\n          nextIndex =\n            currentIndex === -1\n              ? items.length - 1\n              : (currentIndex - 1 + items.length) % items.length;\n        }\n        items[nextIndex]?.focus();\n      }\n    };\n\n    if (open) {\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('keydown', handleArrowKeys);\n    }\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n      document.removeEventListener('keydown', handleArrowKeys);\n    };\n  }, [open]);\n\n  useEffect(() => {\n    setValue(value);\n    onValueChange?.(value);\n  }, [value, onValueChange]);\n\n  useEffect(() => {\n    if (propValue) {\n      setValue(propValue);\n      const label = findLabelForValue(children, propValue);\n      if (label) store.setState({ selectedLabel: label });\n    }\n  }, [propValue]);\n\n  const sizeClasses = SIZE_CLASSES[size];\n\n  return (\n    <div className={`relative ${sizeClasses} w-[288px]`} ref={selectRef}>\n      {injectStore(children, store)}\n    </div>\n  );\n};\n\nconst SelectValue = ({\n  placeholder,\n  store: externalStore,\n}: {\n  placeholder?: string;\n  store?: SelectStoreApi;\n}) => {\n  const store = useSelectStore(externalStore);\n\n  const selectedLabel = useStore(store, (s) => s.selectedLabel);\n  const value = useStore(store, (s) => s.value);\n  return (\n    <span className=\"text-inherit\">\n      {selectedLabel || placeholder || value}\n    </span>\n  );\n};\n\ninterface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  className?: string;\n  invalid?: boolean;\n  variant?: 'outlined' | 'underlined' | 'rounded';\n  store?: SelectStoreApi;\n}\n\nconst SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  (\n    {\n      className,\n      invalid = false,\n      variant = 'outlined',\n      store: externalStore,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n    const open = useStore(store, (s) => s.open);\n    const toggleOpen = () => store.setState({ open: !open });\n\n    const variantClasses = VARIANT_CLASSES[variant];\n\n    return (\n      <button\n        ref={ref}\n        className={`\n        flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2\n        ${invalid && 'border-indicator-error text-text-600'}\n        ${\n          disabled\n            ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n            : 'cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n        }\n        ${!invalid && !disabled ? 'text-text-700' : ''}\n        ${variantClasses}\n        ${className}\n      `}\n        onClick={toggleOpen}\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        aria-controls={open ? 'select-content' : undefined}\n        {...props}\n      >\n        {props.children}\n        <CaretDown\n          className={`h-[1em] w-[1em] opacity-50 transition-transform ${open ? 'rotate-180' : ''}`}\n        />\n      </button>\n    );\n  }\n);\nSelectTrigger.displayName = 'SelectTrigger';\n\ninterface SelectContentProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  align?: 'start' | 'center' | 'end';\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  store?: SelectStoreApi;\n}\n\nconst SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(\n  (\n    {\n      children,\n      className,\n      align = 'start',\n      side = 'bottom',\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n\n    const open = useStore(store, (s) => s.open);\n    if (!open) return null;\n\n    const getPositionClasses = () =>\n      `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;\n\n    return (\n      <div\n        role=\"menu\"\n        ref={ref}\n        className={`bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md border-border-100 ${getPositionClasses()} ${className}`}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\nSelectContent.displayName = 'SelectContent';\n\ninterface SelectItemProps extends HTMLAttributes<HTMLDivElement> {\n  value: string;\n  disabled?: boolean;\n  store?: SelectStoreApi;\n}\n\nconst SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(\n  (\n    {\n      className,\n      children,\n      value,\n      disabled = false,\n      store: externalStore,\n      ...props\n    },\n    ref\n  ) => {\n    const store = useSelectStore(externalStore);\n    const {\n      value: selectedValue,\n      setValue,\n      setOpen,\n      setSelectedLabel,\n    } = useStore(store, (s) => s);\n\n    const handleClick = (\n      e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>\n    ) => {\n      const labelNode = getLabelAsNode(children);\n      if (!disabled) {\n        setValue(value);\n        setSelectedLabel(labelNode);\n        setOpen(false);\n      }\n      props.onClick?.(e as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        role=\"menuitem\"\n        aria-disabled={disabled}\n        ref={ref}\n        className={`\n          focus-visible:bg-background-50\n          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0\n          ${className}\n          ${\n            disabled\n              ? 'cursor-not-allowed text-text-400 pointer-events-none opacity-50'\n              : 'cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground'\n          }\n          ${selectedValue === value && 'bg-background-50'}\n        `}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') handleClick(e);\n        }}\n        tabIndex={disabled ? -1 : 0}\n        {...props}\n      >\n        <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n          {selectedValue === value && <Check className=\"\" />}\n        </span>\n        {children}\n      </div>\n    );\n  }\n);\n\nSelectItem.displayName = 'SelectItem';\n\nexport default Select;\nexport { SelectTrigger, SelectContent, SelectItem, SelectValue };\n"],"mappings":"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","names":["children"]}

package/dist/Stepper/index.d.mts

@@ -0,0 +1,169 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Stepper size variants
+ */
+type StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';
+/**
+ * Step state variants
+ */
+type StepState = 'pending' | 'current' | 'completed';
+/**
+ * Individual step data interface
+ */
+interface StepData {
+    /** Unique identifier for the step */
+    id: string;
+    /** Label text for the step */
+    label: string;
+    /** Current state of the step */
+    state: StepState;
+}
+/**
+ * Size configurations - Following design system pattern from CSS specifications
+ * Small size based on exact CSS: width 58px, height 38px, gap 8px
+ */
+declare const SIZE_CLASSES: {
+    readonly small: {
+        readonly container: "gap-2";
+        readonly stepWidth: "w-[58px]";
+        readonly stepHeight: "h-[38px]";
+        readonly indicator: "w-5 h-5";
+        readonly progressBar: "h-0.5";
+        readonly indicatorTextSize: "2xs";
+        readonly labelTextSize: "xs";
+        readonly iconSize: "w-3 h-3";
+    };
+    readonly medium: {
+        readonly container: "gap-3";
+        readonly stepWidth: "w-[110px]";
+        readonly stepHeight: "h-[48px]";
+        readonly indicator: "w-6 h-6";
+        readonly progressBar: "h-0.5";
+        readonly indicatorTextSize: "2xs";
+        readonly labelTextSize: "xs";
+        readonly iconSize: "w-3.5 h-3.5";
+    };
+    readonly large: {
+        readonly container: "gap-4";
+        readonly stepWidth: "w-[160px]";
+        readonly stepHeight: "h-[58px]";
+        readonly indicator: "w-7 h-7";
+        readonly progressBar: "h-1";
+        readonly indicatorTextSize: "xs";
+        readonly labelTextSize: "sm";
+        readonly iconSize: "w-4 h-4";
+    };
+    readonly extraLarge: {
+        readonly container: "gap-5";
+        readonly stepWidth: "w-[200px]";
+        readonly stepHeight: "h-[68px]";
+        readonly indicator: "w-8 h-8";
+        readonly progressBar: "h-1";
+        readonly indicatorTextSize: "xs";
+        readonly labelTextSize: "sm";
+        readonly iconSize: "w-[18px] h-[18px]";
+    };
+};
+/**
+ * State configurations using exact colors from CSS specs
+ * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)
+ * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido
+ * completed: #1C61B2 = primary-800 (etapa concluída)
+ * text color: #FEFEFF = text
+ */
+declare const STATE_CLASSES: {
+    readonly pending: {
+        readonly progressBar: "bg-text-400";
+        readonly indicator: "bg-text-400";
+        readonly indicatorText: "text-white";
+        readonly label: "text-text-400";
+    };
+    readonly current: {
+        readonly progressBar: "bg-primary-800";
+        readonly indicator: "bg-primary-800";
+        readonly indicatorText: "text-white";
+        readonly label: "text-primary-800";
+    };
+    readonly completed: {
+        readonly progressBar: "bg-primary-400";
+        readonly indicator: "bg-primary-400";
+        readonly indicatorText: "text-white";
+        readonly label: "text-primary-400";
+    };
+};
+/**
+ * Type for size classes
+ */
+type SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];
+/**
+ * Type for state classes
+ */
+type StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];
+/**
+ * Props for individual step component
+ */
+interface StepProps {
+    step: StepData;
+    index: number;
+    size: StepperSize;
+    sizeClasses: SizeClassType;
+    stateClasses: StateClassType;
+    isLast: boolean;
+    className?: string;
+}
+/**
+ * Individual Step component - Based on exact design specifications
+ * Layout: flex-column with progress bar at top, then icon+label row
+ * Fully responsive for mobile, tablets, and laptops
+ */
+declare const Step: ({ step, index, size: _size, sizeClasses, stateClasses, isLast: _isLast, className, }: StepProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Stepper component props interface
+ */
+type StepperProps = {
+    /** Array of step data */
+    steps: StepData[];
+    /** Size variant of the stepper */
+    size?: StepperSize;
+    /** Current active step index */
+    currentStep?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Step container CSS classes */
+    stepClassName?: string;
+    /** Progress indicator (e.g., "Etapa 2 de 4") */
+    showProgress?: boolean;
+    /** Custom progress text */
+    progressText?: string;
+    /** Make stepper responsive (vertical on mobile) */
+    responsive?: boolean;
+};
+/**
+ * Stepper component for Analytica Ensino platforms
+ *
+ * A progress stepper component that displays a sequence of steps with different states.
+ * Follows the exact design specifications with proper spacing, colors, and layout.
+ * Fully responsive for mobile, tablets, and laptops.
+ *
+ * Design specifications:
+ * - Based on exact CSS specifications from Figma design
+ * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)
+ * - Progressive sizing with responsive breakpoints that adapt to device type
+ * - Consistent gaps that scale with screen size and device capabilities
+ * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)
+ * - Responsive design with overflow scroll on smaller devices
+ * - Optimized text sizing and layout for each device category
+ *
+ * @example
+ * ```tsx
+ * // Basic stepper - automatically responsive for all devices
+ * <Stepper steps={steps} currentStep={1} />
+ *
+ * // Custom styling with full responsive behavior
+ * <Stepper steps={steps} size="medium" showProgress responsive />
+ * ```
+ */
+declare const Stepper: ({ steps: initialSteps, size, currentStep, className, stepClassName, showProgress, progressText, responsive, }: StepperProps) => react_jsx_runtime.JSX.Element;
+
+export { Step, type StepData, type StepperProps, Stepper as default };

package/dist/Stepper/index.d.ts

@@ -0,0 +1,169 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Stepper size variants
+ */
+type StepperSize = 'small' | 'medium' | 'large' | 'extraLarge';
+/**
+ * Step state variants
+ */
+type StepState = 'pending' | 'current' | 'completed';
+/**
+ * Individual step data interface
+ */
+interface StepData {
+    /** Unique identifier for the step */
+    id: string;
+    /** Label text for the step */
+    label: string;
+    /** Current state of the step */
+    state: StepState;
+}
+/**
+ * Size configurations - Following design system pattern from CSS specifications
+ * Small size based on exact CSS: width 58px, height 38px, gap 8px
+ */
+declare const SIZE_CLASSES: {
+    readonly small: {
+        readonly container: "gap-2";
+        readonly stepWidth: "w-[58px]";
+        readonly stepHeight: "h-[38px]";
+        readonly indicator: "w-5 h-5";
+        readonly progressBar: "h-0.5";
+        readonly indicatorTextSize: "2xs";
+        readonly labelTextSize: "xs";
+        readonly iconSize: "w-3 h-3";
+    };
+    readonly medium: {
+        readonly container: "gap-3";
+        readonly stepWidth: "w-[110px]";
+        readonly stepHeight: "h-[48px]";
+        readonly indicator: "w-6 h-6";
+        readonly progressBar: "h-0.5";
+        readonly indicatorTextSize: "2xs";
+        readonly labelTextSize: "xs";
+        readonly iconSize: "w-3.5 h-3.5";
+    };
+    readonly large: {
+        readonly container: "gap-4";
+        readonly stepWidth: "w-[160px]";
+        readonly stepHeight: "h-[58px]";
+        readonly indicator: "w-7 h-7";
+        readonly progressBar: "h-1";
+        readonly indicatorTextSize: "xs";
+        readonly labelTextSize: "sm";
+        readonly iconSize: "w-4 h-4";
+    };
+    readonly extraLarge: {
+        readonly container: "gap-5";
+        readonly stepWidth: "w-[200px]";
+        readonly stepHeight: "h-[68px]";
+        readonly indicator: "w-8 h-8";
+        readonly progressBar: "h-1";
+        readonly indicatorTextSize: "xs";
+        readonly labelTextSize: "sm";
+        readonly iconSize: "w-[18px] h-[18px]";
+    };
+};
+/**
+ * State configurations using exact colors from CSS specs
+ * pending: #A3A3A3 = text-400 (etapa ainda não iniciada)
+ * current: #1C61B2 = primary-800 (etapa atual sendo preenchida) - baseado no CSS fornecido
+ * completed: #1C61B2 = primary-800 (etapa concluída)
+ * text color: #FEFEFF = text
+ */
+declare const STATE_CLASSES: {
+    readonly pending: {
+        readonly progressBar: "bg-text-400";
+        readonly indicator: "bg-text-400";
+        readonly indicatorText: "text-white";
+        readonly label: "text-text-400";
+    };
+    readonly current: {
+        readonly progressBar: "bg-primary-800";
+        readonly indicator: "bg-primary-800";
+        readonly indicatorText: "text-white";
+        readonly label: "text-primary-800";
+    };
+    readonly completed: {
+        readonly progressBar: "bg-primary-400";
+        readonly indicator: "bg-primary-400";
+        readonly indicatorText: "text-white";
+        readonly label: "text-primary-400";
+    };
+};
+/**
+ * Type for size classes
+ */
+type SizeClassType = (typeof SIZE_CLASSES)[keyof typeof SIZE_CLASSES];
+/**
+ * Type for state classes
+ */
+type StateClassType = (typeof STATE_CLASSES)[keyof typeof STATE_CLASSES];
+/**
+ * Props for individual step component
+ */
+interface StepProps {
+    step: StepData;
+    index: number;
+    size: StepperSize;
+    sizeClasses: SizeClassType;
+    stateClasses: StateClassType;
+    isLast: boolean;
+    className?: string;
+}
+/**
+ * Individual Step component - Based on exact design specifications
+ * Layout: flex-column with progress bar at top, then icon+label row
+ * Fully responsive for mobile, tablets, and laptops
+ */
+declare const Step: ({ step, index, size: _size, sizeClasses, stateClasses, isLast: _isLast, className, }: StepProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Stepper component props interface
+ */
+type StepperProps = {
+    /** Array of step data */
+    steps: StepData[];
+    /** Size variant of the stepper */
+    size?: StepperSize;
+    /** Current active step index */
+    currentStep?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Step container CSS classes */
+    stepClassName?: string;
+    /** Progress indicator (e.g., "Etapa 2 de 4") */
+    showProgress?: boolean;
+    /** Custom progress text */
+    progressText?: string;
+    /** Make stepper responsive (vertical on mobile) */
+    responsive?: boolean;
+};
+/**
+ * Stepper component for Analytica Ensino platforms
+ *
+ * A progress stepper component that displays a sequence of steps with different states.
+ * Follows the exact design specifications with proper spacing, colors, and layout.
+ * Fully responsive for mobile, tablets, and laptops.
+ *
+ * Design specifications:
+ * - Based on exact CSS specifications from Figma design
+ * - Fully responsive: mobile (320px+) -> tablets (640px+) -> laptops (1024px+)
+ * - Progressive sizing with responsive breakpoints that adapt to device type
+ * - Consistent gaps that scale with screen size and device capabilities
+ * - Consistent color scheme: pending (gray), current (dark blue), completed (light blue)
+ * - Responsive design with overflow scroll on smaller devices
+ * - Optimized text sizing and layout for each device category
+ *
+ * @example
+ * ```tsx
+ * // Basic stepper - automatically responsive for all devices
+ * <Stepper steps={steps} currentStep={1} />
+ *
+ * // Custom styling with full responsive behavior
+ * <Stepper steps={steps} size="medium" showProgress responsive />
+ * ```
+ */
+declare const Stepper: ({ steps: initialSteps, size, currentStep, className, stepClassName, showProgress, progressText, responsive, }: StepperProps) => react_jsx_runtime.JSX.Element;
+
+export { Step, type StepData, type StepperProps, Stepper as default };