analytica-frontend-lib 1.0.37 → 1.0.38

package/dist/Select/index.js

@@ -0,0 +1,323 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Select/Select.tsx
+var Select_exports = {};
+__export(Select_exports, {
+  SelectContent: () => SelectContent,
+  SelectItem: () => SelectItem,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
+  createSelectStore: () => createSelectStore,
+  default: () => Select_default,
+  getLabelAsNode: () => getLabelAsNode,
+  useSelectStore: () => useSelectStore
+});
+module.exports = __toCommonJS(Select_exports);
+var import_zustand = require("zustand");
+var import_react = require("react");
+var import_phosphor_react = require("phosphor-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var VARIANT_CLASSES = {
+  outlined: "border-2 rounded-sm focus:border-primary-950",
+  underlined: "border-b-2 focus:border-primary-950",
+  rounded: "border-2 rounded-4xl focus:border-primary-950"
+};
+var SIZE_CLASSES = {
+  small: "text-sm",
+  medium: "text-md",
+  large: "text-lg"
+};
+var SIDE_CLASSES = {
+  top: "bottom-full -translate-y-1",
+  right: "top-full translate-y-1",
+  bottom: "top-full translate-y-1",
+  left: "top-full translate-y-1"
+};
+var ALIGN_CLASSES = {
+  start: "left-0",
+  center: "left-1/2 -translate-x-1/2",
+  end: "right-0"
+};
+function createSelectStore() {
+  return (0, import_zustand.create)((set) => ({
+    open: false,
+    setOpen: (open) => set({ open }),
+    value: "",
+    setValue: (value) => set({ value }),
+    selectedLabel: "",
+    setSelectedLabel: (label) => set({ selectedLabel: label })
+  }));
+}
+var useSelectStore = (externalStore) => {
+  if (!externalStore) {
+    throw new Error(
+      "Component must be used within a Select (store is missing)"
+    );
+  }
+  return externalStore;
+};
+function getLabelAsNode(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return children;
+  }
+  const flattened = import_react.Children.toArray(children);
+  if (flattened.length === 1) return flattened[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: flattened });
+}
+var injectStore = (children, store) => {
+  return import_react.Children.map(children, (child) => {
+    if ((0, import_react.isValidElement)(child)) {
+      const typedChild = child;
+      const newProps = {
+        store
+      };
+      if (typedChild.props.children) {
+        newProps.children = injectStore(typedChild.props.children, store);
+      }
+      return (0, import_react.cloneElement)(typedChild, newProps);
+    }
+    return child;
+  });
+};
+var Select = ({
+  children,
+  defaultValue = "",
+  value: propValue,
+  onValueChange,
+  size = "small"
+}) => {
+  const storeRef = (0, import_react.useRef)(null);
+  storeRef.current ??= createSelectStore();
+  const store = storeRef.current;
+  const selectRef = (0, import_react.useRef)(null);
+  const { open, setOpen, setValue, value, selectedLabel } = (0, import_zustand.useStore)(
+    store,
+    (s) => s
+  );
+  const isControlled = propValue !== void 0;
+  const currentValue = isControlled ? propValue : value;
+  const findLabelForValue = (children2, targetValue) => {
+    let found = null;
+    const search = (nodes) => {
+      import_react.Children.forEach(nodes, (child) => {
+        if (!(0, import_react.isValidElement)(child)) return;
+        const typedChild = child;
+        if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
+          if (typeof typedChild.props.children === "string")
+            found = typedChild.props.children;
+        }
+        if (typedChild.props.children && !found)
+          search(typedChild.props.children);
+      });
+    };
+    search(children2);
+    return found;
+  };
+  (0, import_react.useEffect)(() => {
+    if (!selectedLabel && defaultValue) {
+      const label = findLabelForValue(children, defaultValue);
+      if (label) store.setState({ selectedLabel: label });
+    }
+  }, [children, defaultValue, selectedLabel]);
+  (0, import_react.useEffect)(() => {
+    setValue(currentValue);
+    const handleClickOutside = (event) => {
+      if (selectRef.current && !selectRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const handleArrowKeys = (event) => {
+      const selectContent = selectRef.current?.querySelector('[role="menu"]');
+      if (selectContent) {
+        event.preventDefault();
+        const items = Array.from(
+          selectContent.querySelectorAll(
+            '[role="menuitem"]:not([aria-disabled="true"])'
+          )
+        ).filter((el) => el instanceof HTMLElement);
+        const focused = document.activeElement;
+        const currentIndex = items.findIndex((item) => item === focused);
+        let nextIndex = 0;
+        if (event.key === "ArrowDown") {
+          nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+        } else {
+          nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+        }
+        items[nextIndex]?.focus();
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleArrowKeys);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleArrowKeys);
+    };
+  }, [open]);
+  (0, import_react.useEffect)(() => {
+    if (onValueChange) {
+      onValueChange(value);
+    }
+  }, [value]);
+  const sizeClasses = SIZE_CLASSES[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `relative ${sizeClasses} w-[288px]`, ref: selectRef, children: injectStore(children, store) });
+};
+var SelectValue = ({
+  placeholder,
+  store: externalStore
+}) => {
+  const store = useSelectStore(externalStore);
+  const selectedLabel = (0, import_zustand.useStore)(store, (s) => s.selectedLabel);
+  const value = (0, import_zustand.useStore)(store, (s) => s.value);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
+};
+var SelectTrigger = (0, import_react.forwardRef)(
+  ({
+    className,
+    invalid = false,
+    variant = "outlined",
+    store: externalStore,
+    disabled,
+    ...props
+  }, ref) => {
+    const store = useSelectStore(externalStore);
+    const open = (0, import_zustand.useStore)(store, (s) => s.open);
+    const toggleOpen = () => store.setState({ open: !open });
+    const variantClasses = VARIANT_CLASSES[variant];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        ref,
+        className: `
+        flex h-9 min-w-[220px] w-full items-center justify-between border-border-300 px-3 py-2
+        ${invalid && "border-indicator-error text-text-600"}
+        ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+        ${!invalid && !disabled ? "text-text-700" : ""}
+        ${variantClasses}
+        ${className}
+      `,
+        onClick: toggleOpen,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": open ? "select-content" : void 0,
+        ...props,
+        children: [
+          props.children,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_phosphor_react.CaretDown,
+            {
+              className: `h-[1em] w-[1em] opacity-50 transition-transform ${open ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = (0, import_react.forwardRef)(
+  ({
+    children,
+    className,
+    align = "start",
+    side = "bottom",
+    store: externalStore,
+    ...props
+  }, ref) => {
+    const store = useSelectStore(externalStore);
+    const open = (0, import_zustand.useStore)(store, (s) => s.open);
+    if (!open) return null;
+    const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        role: "menu",
+        ref,
+        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}`,
+        ...props,
+        children
+      }
+    );
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = (0, import_react.forwardRef)(
+  ({
+    className,
+    children,
+    value,
+    disabled = false,
+    store: externalStore,
+    ...props
+  }, ref) => {
+    const store = useSelectStore(externalStore);
+    const selectedValue = (0, import_zustand.useStore)(store, (s) => s.value);
+    const { setValue, setSelectedLabel, setOpen } = store.getState();
+    const handleClick = (e) => {
+      const labelNode = getLabelAsNode(children);
+      if (!disabled) {
+        setValue(value);
+        setSelectedLabel(labelNode);
+        setOpen(false);
+      }
+      props.onClick?.(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        role: "menuitem",
+        "aria-disabled": disabled,
+        ref,
+        className: `
+          focus-visible:bg-background-50
+          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
+          ${className}
+          ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
+          ${selectedValue === value && "bg-background-50"}
+        `,
+        onClick: handleClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") handleClick(e);
+        },
+        tabIndex: disabled ? -1 : 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.Check, { className: "" }) }),
+          children
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var Select_default = Select;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  createSelectStore,
+  getLabelAsNode,
+  useSelectStore
+});
+//# sourceMappingURL=index.js.map

package/dist/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Select/Select.tsx"],"sourcesContent":["// app/components/Select.tsx\n'use client';\n\nimport { 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"]}

package/dist/Select/index.mjs

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