@deepnoid/ui 0.1.199 → 0.1.201

package/dist/{chunk-4E5OF43U.mjs → chunk-75ZDPLJ4.mjs}

@@ -16,8 +16,9 @@ import {
 import { forwardRef, useMemo, useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ALL_OPTION_VALUE = "__ALL__";
 var Select = forwardRef((originalProps, ref) => {
-  var _a, _b;
+  var _a, _b, _c;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const {
     label,
@@ -28,6 +29,7 @@ var Select = forwardRef((originalProps, ref) => {
     defaultSelectedOptions,
     onChange,
     multiple,
+    enableSelectAll,
     dropdownIconName = "brace-up",
     optionIconName,
     optionIconPlacement,
@@ -69,10 +71,14 @@ var Select = forwardRef((originalProps, ref) => {
     };
   };
   const handleChangeOption = (option) => {
-    let nextOptions;
+    let nextOptions = [];
     if (multiple) {
-      const exists = selectedOptions.some((o) => o.value === option.value);
-      nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      if (enableSelectAll && option.value === ALL_OPTION_VALUE) {
+        nextOptions = selectedOptions.length === options.length ? [] : [...options];
+      } else {
+        const exists = selectedOptions.some((o) => o.value === option.value);
+        nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      }
     } else {
       nextOptions = [option];
       closeSelect();
@@ -106,10 +112,26 @@ var Select = forwardRef((originalProps, ref) => {
     }
   }, [originalProps.value, defaultSelectedOptions, options]);
   const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
-  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_b = selectedOptions[0]) == null ? void 0 : _b.value) || "";
+  let allOptionValue = "";
+  if (multiple) {
+    if (selectedOptions.length === 0) {
+      allOptionValue = "\uC804\uCCB4 \uC120\uD0DD";
+    } else if (selectedOptions.length === options.length) {
+      allOptionValue = `\uC804\uCCB4 (${options.length}) \uC120\uD0DD\uB428`;
+    } else {
+      allOptionValue = `${selectedOptions.length} / ${options.length} \uC120\uD0DD\uB428`;
+    }
+  } else {
+    allOptionValue = ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
+  }
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_b = selectedOptions[0]) == null ? void 0 : _b.label) || "";
+  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_c = selectedOptions[0]) == null ? void 0 : _c.value) || "";
   const renderOptions = () => {
     if (!isVisible) return null;
+    const renderedOptions = [...options];
+    if (multiple && enableSelectAll) {
+      renderedOptions.unshift({ label: allOptionValue, value: ALL_OPTION_VALUE });
+    }
     return createPortal(
       /* @__PURE__ */ jsx(
         "div",
@@ -127,8 +149,8 @@ var Select = forwardRef((originalProps, ref) => {
             transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
             transition: "opacity 150ms ease-out, transform 150ms ease-out"
           },
-          children: options.map((option) => {
-            const isSelected = selectedOptions.some((o) => o.value === option.value);
+          children: renderedOptions.map((option) => {
+            const isSelected = option.value === ALL_OPTION_VALUE ? selectedOptions.length === options.length : selectedOptions.some((o) => o.value === option.value);
             return /* @__PURE__ */ jsxs(
               "div",
               {
@@ -239,7 +261,8 @@ var select = tv({
       "placeholder:text-neutral-main",
       "text-body-foreground",
       "group-has-[p.error]/select:text-danger-main",
-      "group-has-[p.error]/select:placeholder:text-danger-main"
+      "group-has-[p.error]/select:placeholder:text-danger-main",
+      "truncate"
     ],
     optionsWrapper: ["bg-body-background", "overflow-auto", "flex", "flex-col", "gap-[10px]"],
     option: [
@@ -338,7 +361,7 @@ var select = tv({
         selectWrapper: ["w-[240px]", "h-[50px]", "rounded-xl", "px-[10px]"],
         select: ["text-xl"],
         optionsWrapper: ["shadow-drop-xl", "rounded-xl", "p-[10px]"],
-        option: ["px-[10px]", "py-[11.5px]", , "rounded-xl", "text-xl", "gap-[10px]"],
+        option: ["px-[10px]", "py-[11.5px]", "rounded-xl", "text-xl", "gap-[10px]"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       }

package/dist/{chunk-STV6EZHD.mjs → chunk-F6BQCZ54.mjs}

@@ -10,13 +10,24 @@ import {
 } from "./chunk-27Y6K5NK.mjs";
 
 // src/components/tree/tree.tsx
-import { forwardRef, useMemo, useState, useCallback } from "react";
+import { forwardRef, useMemo, useState, useCallback, useEffect, memo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var TreeNodeItem = forwardRef(
+var TreeNodeItemBase = forwardRef(
   ({ node, depth, fileIcon, selectedName, classNames, onExpand }, ref) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [children, setChildren] = useState(node.children);
     const slots = useMemo(() => treeStyle(), []);
+    const hasSelectedInChildren = useCallback(
+      (children2) => {
+        if (!children2 || !selectedName) return false;
+        return children2.some((child) => child.selectedName === selectedName || hasSelectedInChildren(child.children));
+      },
+      [selectedName]
+    );
+    const [children, setChildren] = useState(node.children);
+    const [isOpen, setIsOpen] = useState(() => {
+      if (!selectedName) return false;
+      return hasSelectedInChildren(node.children);
+    });
+    const hasOpenedInitially = useRef(false);
     const hasMore = useMemo(() => {
       if (node.isLeaf) return false;
       if (Array.isArray(children)) return children.length > 0;
@@ -29,7 +40,6 @@ var TreeNodeItem = forwardRef(
           setChildren(result);
         } catch (e) {
           console.error("Failed to load child nodes ", e);
-        } finally {
         }
       }
       setIsOpen((prev) => !prev);
@@ -44,6 +54,14 @@ var TreeNodeItem = forwardRef(
       e.preventDefault();
       (_a = node.onRightClick) == null ? void 0 : _a.call(node, e);
     };
+    useEffect(() => {
+      if (!selectedName) return;
+      if (!hasOpenedInitially.current) {
+        const shouldOpen = hasSelectedInChildren(children);
+        setIsOpen(shouldOpen);
+        hasOpenedInitially.current = true;
+      }
+    }, [selectedName, children, hasSelectedInChildren]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -59,7 +77,7 @@ var TreeNodeItem = forwardRef(
               className: clsx(
                 slots.node({ class: classNames == null ? void 0 : classNames.node }),
                 slots.clickable({ class: classNames == null ? void 0 : classNames.clickable }),
-                selectedName == node.selectedName ? "bg-neutral-soft" : ""
+                selectedName === node.selectedName ? "bg-neutral-soft" : ""
               ),
               onClick: handleClick,
               onContextMenu: handleRightClick,
@@ -96,7 +114,8 @@ var TreeNodeItem = forwardRef(
     );
   }
 );
-TreeNodeItem.displayName = "TreeNodeItem";
+TreeNodeItemBase.displayName = "TreeNodeItem";
+var TreeNodeItem = memo(TreeNodeItemBase);
 var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedName, classNames, onExpand }) => {
   const slots = useMemo(() => treeStyle(), []);
   const handleClick = (e) => {
@@ -166,6 +185,7 @@ var treeStyle = tv({
 });
 
 export {
+  TreeNodeItem,
   Tree,
   tree_default
 };

package/dist/{chunk-ZP2EQULZ.mjs → chunk-YBXBTE5T.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   select_default
-} from "./chunk-4E5OF43U.mjs";
+} from "./chunk-75ZDPLJ4.mjs";
 import {
   Icon_default
 } from "./chunk-YEYUS6DW.mjs";

package/dist/components/picker/index.js

@@ -7139,8 +7139,9 @@ var import_react_dom3 = require("react-dom");
 var import_react8 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var ALL_OPTION_VALUE = "__ALL__";
 var Select = (0, import_react8.forwardRef)((originalProps, ref) => {
-  var _a, _b;
+  var _a, _b, _c;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const {
     label,
@@ -7151,6 +7152,7 @@ var Select = (0, import_react8.forwardRef)((originalProps, ref) => {
     defaultSelectedOptions,
     onChange,
     multiple,
+    enableSelectAll,
     dropdownIconName = "brace-up",
     optionIconName,
     optionIconPlacement,
@@ -7192,10 +7194,14 @@ var Select = (0, import_react8.forwardRef)((originalProps, ref) => {
     };
   };
   const handleChangeOption = (option) => {
-    let nextOptions;
+    let nextOptions = [];
     if (multiple) {
-      const exists = selectedOptions.some((o) => o.value === option.value);
-      nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      if (enableSelectAll && option.value === ALL_OPTION_VALUE) {
+        nextOptions = selectedOptions.length === options.length ? [] : [...options];
+      } else {
+        const exists = selectedOptions.some((o) => o.value === option.value);
+        nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      }
     } else {
       nextOptions = [option];
       closeSelect();
@@ -7229,10 +7235,26 @@ var Select = (0, import_react8.forwardRef)((originalProps, ref) => {
     }
   }, [originalProps.value, defaultSelectedOptions, options]);
   const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
-  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_b = selectedOptions[0]) == null ? void 0 : _b.value) || "";
+  let allOptionValue = "";
+  if (multiple) {
+    if (selectedOptions.length === 0) {
+      allOptionValue = "\uC804\uCCB4 \uC120\uD0DD";
+    } else if (selectedOptions.length === options.length) {
+      allOptionValue = `\uC804\uCCB4 (${options.length}) \uC120\uD0DD\uB428`;
+    } else {
+      allOptionValue = `${selectedOptions.length} / ${options.length} \uC120\uD0DD\uB428`;
+    }
+  } else {
+    allOptionValue = ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
+  }
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_b = selectedOptions[0]) == null ? void 0 : _b.label) || "";
+  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_c = selectedOptions[0]) == null ? void 0 : _c.value) || "";
   const renderOptions = () => {
     if (!isVisible) return null;
+    const renderedOptions = [...options];
+    if (multiple && enableSelectAll) {
+      renderedOptions.unshift({ label: allOptionValue, value: ALL_OPTION_VALUE });
+    }
     return (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
@@ -7250,8 +7272,8 @@ var Select = (0, import_react8.forwardRef)((originalProps, ref) => {
             transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
             transition: "opacity 150ms ease-out, transform 150ms ease-out"
           },
-          children: options.map((option) => {
-            const isSelected = selectedOptions.some((o) => o.value === option.value);
+          children: renderedOptions.map((option) => {
+            const isSelected = option.value === ALL_OPTION_VALUE ? selectedOptions.length === options.length : selectedOptions.some((o) => o.value === option.value);
             return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               "div",
               {
@@ -7362,7 +7384,8 @@ var select = tv({
       "placeholder:text-neutral-main",
       "text-body-foreground",
       "group-has-[p.error]/select:text-danger-main",
-      "group-has-[p.error]/select:placeholder:text-danger-main"
+      "group-has-[p.error]/select:placeholder:text-danger-main",
+      "truncate"
     ],
     optionsWrapper: ["bg-body-background", "overflow-auto", "flex", "flex-col", "gap-[10px]"],
     option: [
@@ -7461,7 +7484,7 @@ var select = tv({
         selectWrapper: ["w-[240px]", "h-[50px]", "rounded-xl", "px-[10px]"],
         select: ["text-xl"],
         optionsWrapper: ["shadow-drop-xl", "rounded-xl", "p-[10px]"],
-        option: ["px-[10px]", "py-[11.5px]", , "rounded-xl", "text-xl", "gap-[10px]"],
+        option: ["px-[10px]", "py-[11.5px]", "rounded-xl", "text-xl", "gap-[10px]"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       }

package/dist/components/picker/index.mjs

@@ -1,8 +1,5 @@
 "use client";
 import "../../chunk-4VWG4726.mjs";
-import {
-  timePicker_default
-} from "../../chunk-ZP2EQULZ.mjs";
 import {
   datePicker_default
 } from "../../chunk-2EUKWA4W.mjs";
@@ -10,8 +7,11 @@ import "../../chunk-FWFEKWWD.mjs";
 import {
   day_default
 } from "../../chunk-XZYQFBCT.mjs";
+import {
+  timePicker_default
+} from "../../chunk-YBXBTE5T.mjs";
 import "../../chunk-QCEKPS7U.mjs";
-import "../../chunk-4E5OF43U.mjs";
+import "../../chunk-75ZDPLJ4.mjs";
 import "../../chunk-2GCSFWHD.mjs";
 import "../../chunk-3RTVVQA3.mjs";
 import "../../chunk-MY5U63QO.mjs";

package/dist/components/picker/timePicker.js

@@ -5203,8 +5203,9 @@ function toVal(mix) {
 
 // src/components/select/select.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var ALL_OPTION_VALUE = "__ALL__";
 var Select = (0, import_react.forwardRef)((originalProps, ref) => {
-  var _a, _b;
+  var _a, _b, _c;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const {
     label,
@@ -5215,6 +5216,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     defaultSelectedOptions,
     onChange,
     multiple,
+    enableSelectAll,
     dropdownIconName = "brace-up",
     optionIconName,
     optionIconPlacement,
@@ -5256,10 +5258,14 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     };
   };
   const handleChangeOption = (option) => {
-    let nextOptions;
+    let nextOptions = [];
     if (multiple) {
-      const exists = selectedOptions.some((o) => o.value === option.value);
-      nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      if (enableSelectAll && option.value === ALL_OPTION_VALUE) {
+        nextOptions = selectedOptions.length === options.length ? [] : [...options];
+      } else {
+        const exists = selectedOptions.some((o) => o.value === option.value);
+        nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      }
     } else {
       nextOptions = [option];
       closeSelect();
@@ -5293,10 +5299,26 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     }
   }, [originalProps.value, defaultSelectedOptions, options]);
   const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
-  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_b = selectedOptions[0]) == null ? void 0 : _b.value) || "";
+  let allOptionValue = "";
+  if (multiple) {
+    if (selectedOptions.length === 0) {
+      allOptionValue = "\uC804\uCCB4 \uC120\uD0DD";
+    } else if (selectedOptions.length === options.length) {
+      allOptionValue = `\uC804\uCCB4 (${options.length}) \uC120\uD0DD\uB428`;
+    } else {
+      allOptionValue = `${selectedOptions.length} / ${options.length} \uC120\uD0DD\uB428`;
+    }
+  } else {
+    allOptionValue = ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
+  }
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_b = selectedOptions[0]) == null ? void 0 : _b.label) || "";
+  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_c = selectedOptions[0]) == null ? void 0 : _c.value) || "";
   const renderOptions = () => {
     if (!isVisible) return null;
+    const renderedOptions = [...options];
+    if (multiple && enableSelectAll) {
+      renderedOptions.unshift({ label: allOptionValue, value: ALL_OPTION_VALUE });
+    }
     return (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
@@ -5314,8 +5336,8 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
             transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
             transition: "opacity 150ms ease-out, transform 150ms ease-out"
           },
-          children: options.map((option) => {
-            const isSelected = selectedOptions.some((o) => o.value === option.value);
+          children: renderedOptions.map((option) => {
+            const isSelected = option.value === ALL_OPTION_VALUE ? selectedOptions.length === options.length : selectedOptions.some((o) => o.value === option.value);
             return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
@@ -5426,7 +5448,8 @@ var select = tv({
       "placeholder:text-neutral-main",
       "text-body-foreground",
       "group-has-[p.error]/select:text-danger-main",
-      "group-has-[p.error]/select:placeholder:text-danger-main"
+      "group-has-[p.error]/select:placeholder:text-danger-main",
+      "truncate"
     ],
     optionsWrapper: ["bg-body-background", "overflow-auto", "flex", "flex-col", "gap-[10px]"],
     option: [
@@ -5525,7 +5548,7 @@ var select = tv({
         selectWrapper: ["w-[240px]", "h-[50px]", "rounded-xl", "px-[10px]"],
         select: ["text-xl"],
         optionsWrapper: ["shadow-drop-xl", "rounded-xl", "p-[10px]"],
-        option: ["px-[10px]", "py-[11.5px]", , "rounded-xl", "text-xl", "gap-[10px]"],
+        option: ["px-[10px]", "py-[11.5px]", "rounded-xl", "text-xl", "gap-[10px]"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       }

package/dist/components/picker/timePicker.mjs

@@ -2,9 +2,9 @@
 import {
   timePickerStyle,
   timePicker_default
-} from "../../chunk-ZP2EQULZ.mjs";
+} from "../../chunk-YBXBTE5T.mjs";
 import "../../chunk-QCEKPS7U.mjs";
-import "../../chunk-4E5OF43U.mjs";
+import "../../chunk-75ZDPLJ4.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YEYUS6DW.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/components/select/index.d.mts

@@ -1,4 +1,4 @@
-export { default as Select, SelectOption, SelectProps } from './select.mjs';
+export { MultiSelectValue, default as Select, SelectOption, SelectOptionValue, SelectProps } from './select.mjs';
 import 'tailwind-variants';
 import 'react';
 import '../../utils/types.mjs';

package/dist/components/select/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Select, SelectOption, SelectProps } from './select.js';
+export { MultiSelectValue, default as Select, SelectOption, SelectOptionValue, SelectProps } from './select.js';
 import 'tailwind-variants';
 import 'react';
 import '../../utils/types.js';

package/dist/components/select/index.js

@@ -5200,8 +5200,9 @@ function toVal(mix) {
 
 // src/components/select/select.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var ALL_OPTION_VALUE = "__ALL__";
 var Select = (0, import_react.forwardRef)((originalProps, ref) => {
-  var _a, _b;
+  var _a, _b, _c;
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
   const {
     label,
@@ -5212,6 +5213,7 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     defaultSelectedOptions,
     onChange,
     multiple,
+    enableSelectAll,
     dropdownIconName = "brace-up",
     optionIconName,
     optionIconPlacement,
@@ -5253,10 +5255,14 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     };
   };
   const handleChangeOption = (option) => {
-    let nextOptions;
+    let nextOptions = [];
     if (multiple) {
-      const exists = selectedOptions.some((o) => o.value === option.value);
-      nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      if (enableSelectAll && option.value === ALL_OPTION_VALUE) {
+        nextOptions = selectedOptions.length === options.length ? [] : [...options];
+      } else {
+        const exists = selectedOptions.some((o) => o.value === option.value);
+        nextOptions = exists ? selectedOptions.filter((o) => o.value !== option.value) : [...selectedOptions, option];
+      }
     } else {
       nextOptions = [option];
       closeSelect();
@@ -5290,10 +5296,26 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
     }
   }, [originalProps.value, defaultSelectedOptions, options]);
   const position = targetRect ? calculatePositionWithScroll(targetRect, optionWrapperHeight) : null;
-  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
-  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_b = selectedOptions[0]) == null ? void 0 : _b.value) || "";
+  let allOptionValue = "";
+  if (multiple) {
+    if (selectedOptions.length === 0) {
+      allOptionValue = "\uC804\uCCB4 \uC120\uD0DD";
+    } else if (selectedOptions.length === options.length) {
+      allOptionValue = `\uC804\uCCB4 (${options.length}) \uC120\uD0DD\uB428`;
+    } else {
+      allOptionValue = `${selectedOptions.length} / ${options.length} \uC120\uD0DD\uB428`;
+    }
+  } else {
+    allOptionValue = ((_a = selectedOptions[0]) == null ? void 0 : _a.label) || "";
+  }
+  const displayValue = multiple ? selectedOptions.map((opt) => opt.label).join(", ") : ((_b = selectedOptions[0]) == null ? void 0 : _b.label) || "";
+  const selectedValue = multiple ? selectedOptions.map((opt) => opt.value).join(",") : ((_c = selectedOptions[0]) == null ? void 0 : _c.value) || "";
   const renderOptions = () => {
     if (!isVisible) return null;
+    const renderedOptions = [...options];
+    if (multiple && enableSelectAll) {
+      renderedOptions.unshift({ label: allOptionValue, value: ALL_OPTION_VALUE });
+    }
     return (0, import_react_dom.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
@@ -5311,8 +5333,8 @@ var Select = (0, import_react.forwardRef)((originalProps, ref) => {
             transform: isOpen ? "translateY(0)" : "translateY(-0.25rem)",
             transition: "opacity 150ms ease-out, transform 150ms ease-out"
           },
-          children: options.map((option) => {
-            const isSelected = selectedOptions.some((o) => o.value === option.value);
+          children: renderedOptions.map((option) => {
+            const isSelected = option.value === ALL_OPTION_VALUE ? selectedOptions.length === options.length : selectedOptions.some((o) => o.value === option.value);
             return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
@@ -5423,7 +5445,8 @@ var select = tv({
       "placeholder:text-neutral-main",
       "text-body-foreground",
       "group-has-[p.error]/select:text-danger-main",
-      "group-has-[p.error]/select:placeholder:text-danger-main"
+      "group-has-[p.error]/select:placeholder:text-danger-main",
+      "truncate"
     ],
     optionsWrapper: ["bg-body-background", "overflow-auto", "flex", "flex-col", "gap-[10px]"],
     option: [
@@ -5522,7 +5545,7 @@ var select = tv({
         selectWrapper: ["w-[240px]", "h-[50px]", "rounded-xl", "px-[10px]"],
         select: ["text-xl"],
         optionsWrapper: ["shadow-drop-xl", "rounded-xl", "p-[10px]"],
-        option: ["px-[10px]", "py-[11.5px]", , "rounded-xl", "text-xl", "gap-[10px]"],
+        option: ["px-[10px]", "py-[11.5px]", "rounded-xl", "text-xl", "gap-[10px]"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       }

package/dist/components/select/index.mjs

@@ -2,7 +2,7 @@
 import "../../chunk-QCEKPS7U.mjs";
 import {
   select_default
-} from "../../chunk-4E5OF43U.mjs";
+} from "../../chunk-75ZDPLJ4.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-YEYUS6DW.mjs";
 import "../../chunk-E3G5QXSH.mjs";

package/dist/components/select/select.d.mts

@@ -7,14 +7,16 @@ import { IconName } from '../icon/Icon.mjs';
 import 'react/jsx-runtime';
 import '../icon/template.mjs';
 
-interface SelectOption {
+type SelectOptionValue = string | number;
+type SelectOption = {
     label: string;
-    value: string | number;
-}
+    value: SelectOptionValue;
+};
+type MultiSelectValue = SelectOptionValue[];
 type OptionIconPlacement = "start" | "end";
-interface Props extends Omit<ComponentPropsWithRef<"input">, "onChange" | keyof SelectVariantProps> {
+interface Props extends Omit<ComponentPropsWithRef<"input">, "onChange" | "value" | keyof SelectVariantProps> {
     options: SelectOption[];
-    value?: string | number;
+    value?: SelectOptionValue | MultiSelectValue;
     defaultSelectedOptions?: SelectOption[];
     label?: string;
     helperMessage?: string;
@@ -22,6 +24,7 @@ interface Props extends Omit<ComponentPropsWithRef<"input">, "onChange" | keyof
     classNames?: SlotsToClasses<SelectSlots>;
     onChange?: (options: SelectOption[]) => void;
     multiple?: boolean;
+    enableSelectAll?: boolean;
     dropdownIconName?: IconName;
     optionIconName?: IconName;
     optionIconPlacement?: OptionIconPlacement;
@@ -100,7 +103,7 @@ declare const select: tailwind_variants.TVReturnType<{
             selectWrapper: string[];
             select: string[];
             optionsWrapper: string[];
-            option: (string | undefined)[];
+            option: string[];
             helperMessage: string[];
             errorMessage: string[];
         };
@@ -213,7 +216,7 @@ declare const select: tailwind_variants.TVReturnType<{
             selectWrapper: string[];
             select: string[];
             optionsWrapper: string[];
-            option: (string | undefined)[];
+            option: string[];
             helperMessage: string[];
             errorMessage: string[];
         };
@@ -326,7 +329,7 @@ declare const select: tailwind_variants.TVReturnType<{
             selectWrapper: string[];
             select: string[];
             optionsWrapper: string[];
-            option: (string | undefined)[];
+            option: string[];
             helperMessage: string[];
             errorMessage: string[];
         };
@@ -372,4 +375,4 @@ declare const select: tailwind_variants.TVReturnType<{
 type SelectVariantProps = VariantProps<typeof select>;
 type SelectSlots = keyof ReturnType<typeof select>;
 
-export { type SelectOption, type SelectProps, type SelectVariantProps, Select as default };
+export { type MultiSelectValue, type SelectOption, type SelectOptionValue, type SelectProps, type SelectVariantProps, Select as default };

package/dist/components/select/select.d.ts

@@ -7,14 +7,16 @@ import { IconName } from '../icon/Icon.js';
 import 'react/jsx-runtime';
 import '../icon/template.js';
 
-interface SelectOption {
+type SelectOptionValue = string | number;
+type SelectOption = {
     label: string;
-    value: string | number;
-}
+    value: SelectOptionValue;
+};
+type MultiSelectValue = SelectOptionValue[];
 type OptionIconPlacement = "start" | "end";
-interface Props extends Omit<ComponentPropsWithRef<"input">, "onChange" | keyof SelectVariantProps> {
+interface Props extends Omit<ComponentPropsWithRef<"input">, "onChange" | "value" | keyof SelectVariantProps> {
     options: SelectOption[];
-    value?: string | number;
+    value?: SelectOptionValue | MultiSelectValue;
     defaultSelectedOptions?: SelectOption[];
     label?: string;
     helperMessage?: string;
@@ -22,6 +24,7 @@ interface Props extends Omit<ComponentPropsWithRef<"input">, "onChange" | keyof
     classNames?: SlotsToClasses<SelectSlots>;
     onChange?: (options: SelectOption[]) => void;
     multiple?: boolean;
+    enableSelectAll?: boolean;
     dropdownIconName?: IconName;
     optionIconName?: IconName;
     optionIconPlacement?: OptionIconPlacement;
@@ -100,7 +103,7 @@ declare const select: tailwind_variants.TVReturnType<{
             selectWrapper: string[];
             select: string[];
             optionsWrapper: string[];
-            option: (string | undefined)[];
+            option: string[];
             helperMessage: string[];
             errorMessage: string[];
         };
@@ -213,7 +216,7 @@ declare const select: tailwind_variants.TVReturnType<{
             selectWrapper: string[];
             select: string[];
             optionsWrapper: string[];
-            option: (string | undefined)[];
+            option: string[];
             helperMessage: string[];
             errorMessage: string[];
         };
@@ -326,7 +329,7 @@ declare const select: tailwind_variants.TVReturnType<{
             selectWrapper: string[];
             select: string[];
             optionsWrapper: string[];
-            option: (string | undefined)[];
+            option: string[];
             helperMessage: string[];
             errorMessage: string[];
         };
@@ -372,4 +375,4 @@ declare const select: tailwind_variants.TVReturnType<{
 type SelectVariantProps = VariantProps<typeof select>;
 type SelectSlots = keyof ReturnType<typeof select>;
 
-export { type SelectOption, type SelectProps, type SelectVariantProps, Select as default };
+export { type MultiSelectValue, type SelectOption, type SelectOptionValue, type SelectProps, type SelectVariantProps, Select as default };