shad-m 1.0.0

package/dist/common/interactive/select/utils.js

@@ -0,0 +1,31 @@
+'use strict';
+
+const removeDiacritics = (str) => {
+  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/Đ/g, "D");
+};
+const normalizeToOptions = (value, availableOptions = []) => {
+  if (!value) return [];
+  if (typeof value === "string") {
+    const found = availableOptions.find((opt) => opt.value === value);
+    const result = found ? [found] : [{ value, name: value }];
+    return result;
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) return [];
+    if (value.length > 0 && typeof value[0] === "object" && "value" in value[0]) {
+      return value;
+    }
+    const stringValues = value;
+    return stringValues.map((stringValue) => {
+      const found = availableOptions.find((opt) => opt.value === stringValue);
+      if (found) return found;
+      return { value: stringValue, name: stringValue };
+    }).filter(Boolean);
+  }
+  return [];
+};
+
+exports.normalizeToOptions = normalizeToOptions;
+exports.removeDiacritics = removeDiacritics;
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/common/interactive/select/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/utils.ts"],"names":[],"mappings":";;AAMO,MAAM,gBAAA,GAAmB,CAAC,GAAA,KAAwB;AACvD,EAAA,OAAO,GAAA,CACJ,SAAA,CAAU,KAAK,CAAA,CACf,QAAQ,kBAAA,EAAoB,EAAE,CAAA,CAC9B,OAAA,CAAQ,IAAA,EAAM,GAAG,CAAA,CACjB,OAAA,CAAQ,MAAM,GAAG,CAAA;AACtB;AAGO,MAAM,kBAAA,GAAqB,CAChC,KAAA,EACA,gBAAA,GAA6B,EAAC,KACjB;AACb,EAAA,IAAI,CAAC,KAAA,EAAO,OAAO,EAAC;AAGpB,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,IAAA,MAAM,QAAQ,gBAAA,CAAiB,IAAA,CAAK,CAAC,GAAA,KAAQ,GAAA,CAAI,UAAU,KAAK,CAAA;AAChE,IAAA,MAAM,MAAA,GAAS,KAAA,GAAQ,CAAC,KAAK,CAAA,GAAI,CAAC,EAAE,KAAA,EAAc,IAAA,EAAM,KAAA,EAAO,CAAA;AAC/D,IAAA,OAAO,MAAA;AAAA,EACT;AAGA,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG;AACxB,IAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,EAAC;AAGhC,IAAA,IAAI,KAAA,CAAM,MAAA,GAAS,CAAA,IAAK,OAAO,KAAA,CAAM,CAAC,CAAA,KAAM,QAAA,IAAY,OAAA,IAAW,KAAA,CAAM,CAAC,CAAA,EAAG;AAC3E,MAAA,OAAO,KAAA;AAAA,IACT;AAGA,IAAA,MAAM,YAAA,GAAe,KAAA;AACrB,IAAA,OAAO,YAAA,CACJ,GAAA,CAAI,CAAC,WAAA,KAAgB;AAEpB,MAAA,MAAM,QAAQ,gBAAA,CAAiB,IAAA,CAAK,CAAC,GAAA,KAAQ,GAAA,CAAI,UAAU,WAAW,CAAA;AACtE,MAAA,IAAI,OAAO,OAAO,KAAA;AAGlB,MAAA,OAAO,EAAE,KAAA,EAAO,WAAA,EAAa,IAAA,EAAM,WAAA,EAAY;AAAA,IACjD,CAAC,CAAA,CACA,MAAA,CAAO,OAAO,CAAA;AAAA,EACnB;AAEA,EAAA,OAAO,EAAC;AACV","file":"utils.js","sourcesContent":["import { Option, SelectValueType } from './types';\n\n/**\n * Remove Vietnamese diacritics from string for search purposes\n * Example: \"Hà Nội\" -> \"Ha Noi\"\n */\nexport const removeDiacritics = (str: string): string => {\n  return str\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    .replace(/đ/g, 'd')\n    .replace(/Đ/g, 'D');\n};\n\n// Helper functions to normalize values\nexport const normalizeToOptions = (\n  value: SelectValueType | undefined,\n  availableOptions: Option[] = [],\n): Option[] => {\n  if (!value) return [];\n\n  // Handle single string value\n  if (typeof value === 'string') {\n    const found = availableOptions.find((opt) => opt.value === value);\n    const result = found ? [found] : [{ value: value, name: value }];\n    return result;\n  }\n\n  // Handle array values\n  if (Array.isArray(value)) {\n    if (value.length === 0) return [];\n\n    // If already Option[], return as is\n    if (value.length > 0 && typeof value[0] === 'object' && 'value' in value[0]) {\n      return value as Option[];\n    }\n\n    // If string[], convert to Option[] by finding matching options\n    const stringValues = value as string[];\n    return stringValues\n      .map((stringValue) => {\n        // First try to find exact match in available options\n        const found = availableOptions.find((opt) => opt.value === stringValue);\n        if (found) return found;\n\n        // If not found, create minimal Option object\n        return { value: stringValue, name: stringValue };\n      })\n      .filter(Boolean);\n  }\n\n  return [];\n};\n"]}

package/dist/common/interactive/select/utils.mjs

@@ -0,0 +1,28 @@
+const removeDiacritics = (str) => {
+  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/Đ/g, "D");
+};
+const normalizeToOptions = (value, availableOptions = []) => {
+  if (!value) return [];
+  if (typeof value === "string") {
+    const found = availableOptions.find((opt) => opt.value === value);
+    const result = found ? [found] : [{ value, name: value }];
+    return result;
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) return [];
+    if (value.length > 0 && typeof value[0] === "object" && "value" in value[0]) {
+      return value;
+    }
+    const stringValues = value;
+    return stringValues.map((stringValue) => {
+      const found = availableOptions.find((opt) => opt.value === stringValue);
+      if (found) return found;
+      return { value: stringValue, name: stringValue };
+    }).filter(Boolean);
+  }
+  return [];
+};
+
+export { normalizeToOptions, removeDiacritics };
+//# sourceMappingURL=utils.mjs.map
+//# sourceMappingURL=utils.mjs.map

package/dist/common/interactive/select/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/utils.ts"],"names":[],"mappings":"AAMO,MAAM,gBAAA,GAAmB,CAAC,GAAA,KAAwB;AACvD,EAAA,OAAO,GAAA,CACJ,SAAA,CAAU,KAAK,CAAA,CACf,QAAQ,kBAAA,EAAoB,EAAE,CAAA,CAC9B,OAAA,CAAQ,IAAA,EAAM,GAAG,CAAA,CACjB,OAAA,CAAQ,MAAM,GAAG,CAAA;AACtB;AAGO,MAAM,kBAAA,GAAqB,CAChC,KAAA,EACA,gBAAA,GAA6B,EAAC,KACjB;AACb,EAAA,IAAI,CAAC,KAAA,EAAO,OAAO,EAAC;AAGpB,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,IAAA,MAAM,QAAQ,gBAAA,CAAiB,IAAA,CAAK,CAAC,GAAA,KAAQ,GAAA,CAAI,UAAU,KAAK,CAAA;AAChE,IAAA,MAAM,MAAA,GAAS,KAAA,GAAQ,CAAC,KAAK,CAAA,GAAI,CAAC,EAAE,KAAA,EAAc,IAAA,EAAM,KAAA,EAAO,CAAA;AAC/D,IAAA,OAAO,MAAA;AAAA,EACT;AAGA,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG;AACxB,IAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,EAAC;AAGhC,IAAA,IAAI,KAAA,CAAM,MAAA,GAAS,CAAA,IAAK,OAAO,KAAA,CAAM,CAAC,CAAA,KAAM,QAAA,IAAY,OAAA,IAAW,KAAA,CAAM,CAAC,CAAA,EAAG;AAC3E,MAAA,OAAO,KAAA;AAAA,IACT;AAGA,IAAA,MAAM,YAAA,GAAe,KAAA;AACrB,IAAA,OAAO,YAAA,CACJ,GAAA,CAAI,CAAC,WAAA,KAAgB;AAEpB,MAAA,MAAM,QAAQ,gBAAA,CAAiB,IAAA,CAAK,CAAC,GAAA,KAAQ,GAAA,CAAI,UAAU,WAAW,CAAA;AACtE,MAAA,IAAI,OAAO,OAAO,KAAA;AAGlB,MAAA,OAAO,EAAE,KAAA,EAAO,WAAA,EAAa,IAAA,EAAM,WAAA,EAAY;AAAA,IACjD,CAAC,CAAA,CACA,MAAA,CAAO,OAAO,CAAA;AAAA,EACnB;AAEA,EAAA,OAAO,EAAC;AACV","file":"utils.mjs","sourcesContent":["import { Option, SelectValueType } from './types';\n\n/**\n * Remove Vietnamese diacritics from string for search purposes\n * Example: \"Hà Nội\" -> \"Ha Noi\"\n */\nexport const removeDiacritics = (str: string): string => {\n  return str\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    .replace(/đ/g, 'd')\n    .replace(/Đ/g, 'D');\n};\n\n// Helper functions to normalize values\nexport const normalizeToOptions = (\n  value: SelectValueType | undefined,\n  availableOptions: Option[] = [],\n): Option[] => {\n  if (!value) return [];\n\n  // Handle single string value\n  if (typeof value === 'string') {\n    const found = availableOptions.find((opt) => opt.value === value);\n    const result = found ? [found] : [{ value: value, name: value }];\n    return result;\n  }\n\n  // Handle array values\n  if (Array.isArray(value)) {\n    if (value.length === 0) return [];\n\n    // If already Option[], return as is\n    if (value.length > 0 && typeof value[0] === 'object' && 'value' in value[0]) {\n      return value as Option[];\n    }\n\n    // If string[], convert to Option[] by finding matching options\n    const stringValues = value as string[];\n    return stringValues\n      .map((stringValue) => {\n        // First try to find exact match in available options\n        const found = availableOptions.find((opt) => opt.value === stringValue);\n        if (found) return found;\n\n        // If not found, create minimal Option object\n        return { value: stringValue, name: stringValue };\n      })\n      .filter(Boolean);\n  }\n\n  return [];\n};\n"]}

package/dist/common/interactive/select/variants.d.ts

@@ -0,0 +1,4 @@
+export declare const selectButtonVariants: (props?: ({
+    size?: "lg" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=variants.d.ts.map

package/dist/common/interactive/select/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/common/interactive/select/variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;;8EAkBhC,CAAC"}

package/dist/common/interactive/select/variants.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+
+const selectButtonVariants = classVarianceAuthority.cva(
+  [
+    "group/trigger flex flex-row items-center w-full space-x-2 rounded-sm pl-3 pr-2 disabled:cursor-not-allowed",
+    "text-inks",
+    "bg-background disabled:bg-ink-50s",
+    "border border-ink-200 hover:border-blue-300 focus:border-blue aria-expanded:border-blue disabled:border-ink-200 data-[form-state=error]:border-red-500"
+  ],
+  {
+    variants: {
+      size: {
+        default: "h-12",
+        lg: "h-14"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+
+exports.selectButtonVariants = selectButtonVariants;
+//# sourceMappingURL=variants.js.map
+//# sourceMappingURL=variants.js.map

package/dist/common/interactive/select/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/variants.ts"],"names":["cva"],"mappings":";;;;AAEO,MAAM,oBAAA,GAAuBA,0BAAA;AAAA,EAClC;AAAA,IACE,4GAAA;AAAA,IACA,WAAA;AAAA,IACA,mCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,MAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ","file":"variants.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const selectButtonVariants = cva(\n  [\n    'group/trigger flex flex-row items-center w-full space-x-2 rounded-sm pl-3 pr-2 disabled:cursor-not-allowed',\n    'text-inks',\n    'bg-background disabled:bg-ink-50s',\n    'border border-ink-200 hover:border-blue-300 focus:border-blue aria-expanded:border-blue disabled:border-ink-200 data-[form-state=error]:border-red-500',\n  ],\n  {\n    variants: {\n      size: {\n        default: 'h-12',\n        lg: 'h-14',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n);\n"]}

package/dist/common/interactive/select/variants.mjs

@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+const selectButtonVariants = cva(
+  [
+    "group/trigger flex flex-row items-center w-full space-x-2 rounded-sm pl-3 pr-2 disabled:cursor-not-allowed",
+    "text-inks",
+    "bg-background disabled:bg-ink-50s",
+    "border border-ink-200 hover:border-blue-300 focus:border-blue aria-expanded:border-blue disabled:border-ink-200 data-[form-state=error]:border-red-500"
+  ],
+  {
+    variants: {
+      size: {
+        default: "h-12",
+        lg: "h-14"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+
+export { selectButtonVariants };
+//# sourceMappingURL=variants.mjs.map
+//# sourceMappingURL=variants.mjs.map

package/dist/common/interactive/select/variants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/variants.ts"],"names":[],"mappings":";;AAEO,MAAM,oBAAA,GAAuB,GAAA;AAAA,EAClC;AAAA,IACE,4GAAA;AAAA,IACA,WAAA;AAAA,IACA,mCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,MAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ","file":"variants.mjs","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const selectButtonVariants = cva(\n  [\n    'group/trigger flex flex-row items-center w-full space-x-2 rounded-sm pl-3 pr-2 disabled:cursor-not-allowed',\n    'text-inks',\n    'bg-background disabled:bg-ink-50s',\n    'border border-ink-200 hover:border-blue-300 focus:border-blue aria-expanded:border-blue disabled:border-ink-200 data-[form-state=error]:border-red-500',\n  ],\n  {\n    variants: {\n      size: {\n        default: 'h-12',\n        lg: 'h-14',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n);\n"]}

package/dist/common/interactive/select-chip.d.ts

@@ -0,0 +1,20 @@
+import { Option } from '@/common/interactive';
+import { FunctionComponent, ReactNode } from 'react';
+interface SelectChipsProps {
+    multiple?: boolean;
+    toggleable?: boolean;
+    options?: Option[];
+    value?: Option[];
+    onChange?: (value?: Option[]) => void;
+    maxLength?: number;
+    iconsMapping?: {
+        [key: string]: ReactNode | FunctionComponent;
+    };
+    addonIconsMapping?: {
+        [key: string]: ReactNode | FunctionComponent;
+    };
+    disabled?: boolean;
+}
+declare const SelectChips: import("react").MemoExoticComponent<({ value, options, onChange, toggleable, multiple, maxLength, iconsMapping, addonIconsMapping, disabled, }: SelectChipsProps) => import("react/jsx-runtime").JSX.Element>;
+export { SelectChips };
+//# sourceMappingURL=select-chip.d.ts.map

package/dist/common/interactive/select-chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-chip.d.ts","sourceRoot":"","sources":["../../../src/common/interactive/select-chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAEL,iBAAiB,EAGjB,SAAS,EAGV,MAAM,OAAO,CAAC;AAEf,UAAU,gBAAgB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAAA;KAAE,CAAC;IAChE,iBAAiB,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAAA;KAAE,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,kJAWZ,gBAAgB,6CAqCpB,CAAC;AAwBF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/common/interactive/select-chip.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('@/components/button');
+var react = require('react');
+
+const SelectChips = react.memo(
+  ({
+    value,
+    options,
+    onChange,
+    toggleable,
+    multiple,
+    maxLength = -1,
+    iconsMapping,
+    addonIconsMapping,
+    disabled
+  }) => {
+    const memoizedOptions = react.useMemo(() => options, [options]);
+    const handleSelect = react.useCallback(
+      (selectItem) => {
+        if (!multiple) {
+          if (toggleable && value?.some((item) => item.value === selectItem?.value)) {
+            onChange?.([]);
+          } else {
+            onChange?.([selectItem]);
+          }
+        } else if (value?.some((item) => item.value === selectItem?.value)) {
+          const newValue = value.filter((item) => item.value !== selectItem?.value);
+          onChange?.(newValue);
+        } else if (maxLength === -1 || (value ?? [])?.length < maxLength) {
+          onChange?.([...value ?? [], selectItem]);
+        }
+      },
+      [value, multiple, onChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: memoizedOptions?.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+      ChipItem,
+      {
+        option: type,
+        active: value?.some((item) => item.value === type?.value),
+        onSelect: handleSelect,
+        icon: iconsMapping?.[type.value],
+        addonIcon: addonIconsMapping?.[type.value],
+        disabled
+      },
+      type.value
+    )) });
+  }
+);
+SelectChips.displayName = "SelectChips";
+const ChipItem = react.memo(({ active, icon, addonIcon, option, onSelect, disabled }) => {
+  const IconComp = icon ? icon : "span";
+  const AddonIconComp = addonIcon ? addonIcon : "span";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    button.Button,
+    {
+      variant: active ? "secondary" : "outline",
+      size: "sm",
+      className: "rounded-full px-4",
+      onClick: () => !disabled && onSelect?.(option),
+      type: "button",
+      disabled: active ? false : disabled,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: active ? "ic-active" : "" }),
+        option.name ?? option.value,
+        addonIcon && /* @__PURE__ */ jsxRuntime.jsx(AddonIconComp, { className: active ? "ic-active" : "" })
+      ]
+    },
+    option.value
+  );
+});
+
+exports.SelectChips = SelectChips;
+//# sourceMappingURL=select-chip.js.map
+//# sourceMappingURL=select-chip.js.map

package/dist/common/interactive/select-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/select-chip.tsx"],"names":["memo","useMemo","useCallback","jsx","jsxs","Button"],"mappings":"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","file":"select-chip.js","sourcesContent":["import { Option } from '@/common/interactive';\nimport { Button } from '@/components/button';\nimport {\n  cloneElement,\n  FunctionComponent,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n} from 'react';\n\ninterface SelectChipsProps {\n  multiple?: boolean;\n  toggleable?: boolean;\n  options?: Option[];\n  value?: Option[];\n  onChange?: (value?: Option[]) => void;\n  maxLength?: number;\n  iconsMapping?: { [key: string]: ReactNode | FunctionComponent };\n  addonIconsMapping?: { [key: string]: ReactNode | FunctionComponent };\n  disabled?: boolean;\n}\n\nconst SelectChips = memo(\n  ({\n    value,\n    options,\n    onChange,\n    toggleable,\n    multiple,\n    maxLength = -1,\n    iconsMapping,\n    addonIconsMapping,\n    disabled,\n  }: SelectChipsProps) => {\n    const memoizedOptions = useMemo(() => options, [options]);\n\n    const handleSelect = useCallback(\n      (selectItem: Option) => {\n        if (!multiple) {\n          if (toggleable && value?.some((item) => item.value === selectItem?.value)) {\n            onChange?.([]);\n          } else {\n            onChange?.([selectItem]);\n          }\n        } else if (value?.some((item) => item.value === selectItem?.value)) {\n          const newValue = (value as Option[]).filter((item) => item.value !== selectItem?.value);\n          onChange?.(newValue);\n        } else if (maxLength === -1 || ((value as Option[]) ?? [])?.length < maxLength) {\n          onChange?.([...(value ?? []), selectItem]);\n        }\n      },\n      [value, multiple, onChange],\n    );\n\n    return (\n      <div className=\"flex flex-wrap gap-3\">\n        {memoizedOptions?.map((type: Option) => (\n          <ChipItem\n            key={type.value}\n            option={type}\n            active={value?.some((item) => item.value === type?.value)}\n            onSelect={handleSelect}\n            icon={iconsMapping?.[type.value]}\n            addonIcon={addonIconsMapping?.[type.value]}\n            disabled={disabled}\n          />\n        ))}\n      </div>\n    );\n  },\n);\nSelectChips.displayName = 'SelectChips';\n\nconst ChipItem = memo(({ active, icon, addonIcon, option, onSelect, disabled }: any) => {\n  const IconComp = icon ? icon : 'span';\n  const AddonIconComp = addonIcon ? addonIcon : 'span';\n\n  return (\n    <Button\n      variant={active ? 'secondary' : 'outline'}\n      size=\"sm\"\n      className=\"rounded-full px-4\"\n      key={option.value}\n      onClick={() => !disabled && onSelect?.(option)}\n      type=\"button\"\n      disabled={active ? false : disabled}\n    >\n      {icon && <IconComp className={active ? 'ic-active' : ''} />}\n      {option.name ?? option.value}\n      {addonIcon && <AddonIconComp className={active ? 'ic-active' : ''} />}\n    </Button>\n  );\n});\n\nexport { SelectChips };\n"]}

package/dist/common/interactive/select-chip.mjs

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from '@/components/button';
+import { memo, useMemo, useCallback } from 'react';
+
+const SelectChips = memo(
+  ({
+    value,
+    options,
+    onChange,
+    toggleable,
+    multiple,
+    maxLength = -1,
+    iconsMapping,
+    addonIconsMapping,
+    disabled
+  }) => {
+    const memoizedOptions = useMemo(() => options, [options]);
+    const handleSelect = useCallback(
+      (selectItem) => {
+        if (!multiple) {
+          if (toggleable && value?.some((item) => item.value === selectItem?.value)) {
+            onChange?.([]);
+          } else {
+            onChange?.([selectItem]);
+          }
+        } else if (value?.some((item) => item.value === selectItem?.value)) {
+          const newValue = value.filter((item) => item.value !== selectItem?.value);
+          onChange?.(newValue);
+        } else if (maxLength === -1 || (value ?? [])?.length < maxLength) {
+          onChange?.([...value ?? [], selectItem]);
+        }
+      },
+      [value, multiple, onChange]
+    );
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: memoizedOptions?.map((type) => /* @__PURE__ */ jsx(
+      ChipItem,
+      {
+        option: type,
+        active: value?.some((item) => item.value === type?.value),
+        onSelect: handleSelect,
+        icon: iconsMapping?.[type.value],
+        addonIcon: addonIconsMapping?.[type.value],
+        disabled
+      },
+      type.value
+    )) });
+  }
+);
+SelectChips.displayName = "SelectChips";
+const ChipItem = memo(({ active, icon, addonIcon, option, onSelect, disabled }) => {
+  const IconComp = icon ? icon : "span";
+  const AddonIconComp = addonIcon ? addonIcon : "span";
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: active ? "secondary" : "outline",
+      size: "sm",
+      className: "rounded-full px-4",
+      onClick: () => !disabled && onSelect?.(option),
+      type: "button",
+      disabled: active ? false : disabled,
+      children: [
+        icon && /* @__PURE__ */ jsx(IconComp, { className: active ? "ic-active" : "" }),
+        option.name ?? option.value,
+        addonIcon && /* @__PURE__ */ jsx(AddonIconComp, { className: active ? "ic-active" : "" })
+      ]
+    },
+    option.value
+  );
+});
+
+export { SelectChips };
+//# sourceMappingURL=select-chip.mjs.map
+//# sourceMappingURL=select-chip.mjs.map

package/dist/common/interactive/select-chip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/select-chip.tsx"],"names":[],"mappings":"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","file":"select-chip.mjs","sourcesContent":["import { Option } from '@/common/interactive';\nimport { Button } from '@/components/button';\nimport {\n  cloneElement,\n  FunctionComponent,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n} from 'react';\n\ninterface SelectChipsProps {\n  multiple?: boolean;\n  toggleable?: boolean;\n  options?: Option[];\n  value?: Option[];\n  onChange?: (value?: Option[]) => void;\n  maxLength?: number;\n  iconsMapping?: { [key: string]: ReactNode | FunctionComponent };\n  addonIconsMapping?: { [key: string]: ReactNode | FunctionComponent };\n  disabled?: boolean;\n}\n\nconst SelectChips = memo(\n  ({\n    value,\n    options,\n    onChange,\n    toggleable,\n    multiple,\n    maxLength = -1,\n    iconsMapping,\n    addonIconsMapping,\n    disabled,\n  }: SelectChipsProps) => {\n    const memoizedOptions = useMemo(() => options, [options]);\n\n    const handleSelect = useCallback(\n      (selectItem: Option) => {\n        if (!multiple) {\n          if (toggleable && value?.some((item) => item.value === selectItem?.value)) {\n            onChange?.([]);\n          } else {\n            onChange?.([selectItem]);\n          }\n        } else if (value?.some((item) => item.value === selectItem?.value)) {\n          const newValue = (value as Option[]).filter((item) => item.value !== selectItem?.value);\n          onChange?.(newValue);\n        } else if (maxLength === -1 || ((value as Option[]) ?? [])?.length < maxLength) {\n          onChange?.([...(value ?? []), selectItem]);\n        }\n      },\n      [value, multiple, onChange],\n    );\n\n    return (\n      <div className=\"flex flex-wrap gap-3\">\n        {memoizedOptions?.map((type: Option) => (\n          <ChipItem\n            key={type.value}\n            option={type}\n            active={value?.some((item) => item.value === type?.value)}\n            onSelect={handleSelect}\n            icon={iconsMapping?.[type.value]}\n            addonIcon={addonIconsMapping?.[type.value]}\n            disabled={disabled}\n          />\n        ))}\n      </div>\n    );\n  },\n);\nSelectChips.displayName = 'SelectChips';\n\nconst ChipItem = memo(({ active, icon, addonIcon, option, onSelect, disabled }: any) => {\n  const IconComp = icon ? icon : 'span';\n  const AddonIconComp = addonIcon ? addonIcon : 'span';\n\n  return (\n    <Button\n      variant={active ? 'secondary' : 'outline'}\n      size=\"sm\"\n      className=\"rounded-full px-4\"\n      key={option.value}\n      onClick={() => !disabled && onSelect?.(option)}\n      type=\"button\"\n      disabled={active ? false : disabled}\n    >\n      {icon && <IconComp className={active ? 'ic-active' : ''} />}\n      {option.name ?? option.value}\n      {addonIcon && <AddonIconComp className={active ? 'ic-active' : ''} />}\n    </Button>\n  );\n});\n\nexport { SelectChips };\n"]}

package/dist/common/interactive/select-level.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Option, SelectProps } from '@/common/interactive/select';
+export interface SelectWithLevelProps extends Omit<SelectProps, 'children'> {
+    value?: (Option | Option[] | undefined)[];
+    options?: Option[][];
+    multiple?: boolean;
+    onValueChange?: (values: (Option | Option[] | undefined)[]) => void;
+    onChange?: (values: (Option | Option[] | undefined)[]) => void;
+    loading?: boolean;
+    hasSearch?: boolean;
+    hasRemoveIcon?: boolean;
+    isError?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    valueLabel?: (selectedValues?: Option[]) => string;
+}
+declare const SelectLevel: React.MemoExoticComponent<({ value, options, label, multiple, onValueChange, onChange, loading, hasSearch, hasRemoveIcon, isError, placeholder, disabled, valueLabel, }: SelectWithLevelProps) => import("react/jsx-runtime").JSX.Element>;
+export { SelectLevel };
+//# sourceMappingURL=select-level.d.ts.map

package/dist/common/interactive/select-level.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-level.d.ts","sourceRoot":"","sources":["../../../src/common/interactive/select-level.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EACL,MAAM,EAMN,WAAW,EAGZ,MAAM,6BAA6B,CAAC;AAqBrC,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IACzE,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;IACpE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC;CACpD;AAED,QAAA,MAAM,WAAW,2KAeZ,oBAAoB,6CA+KxB,CAAC;AAgFF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/common/interactive/select-level.js

@@ -0,0 +1,236 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var select = require('@/common/interactive/select');
+var Icon = require('@/assets/Icon');
+var button = require('@/components/button');
+var lucideReact = require('lucide-react');
+var input = require('@/components/input');
+var skeleton = require('@/components/skeleton');
+var utils = require('@/lib/utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function findIndexOrLast(array = []) {
+  for (let i = 0; i < array.length; i++) {
+    if (array[i] === null || array[i] === void 0) {
+      return i;
+    }
+  }
+  if (!array || !array.length) return 0;
+  return array.length - 1;
+}
+const SelectLevel = React.memo(
+  ({
+    value,
+    options,
+    label,
+    multiple,
+    onValueChange,
+    onChange,
+    loading,
+    hasSearch,
+    hasRemoveIcon,
+    isError,
+    placeholder,
+    disabled,
+    valueLabel
+  }) => {
+    const [levelActive, setLevelActive] = React__default.default.useState(0);
+    const [selectedLevelValues, setSelectedLevelValues] = React__default.default.useState([]);
+    const [selectedTempValues, setSelectedTempValues] = React__default.default.useState([]);
+    const lastLevel = React.useMemo(() => (options?.length ?? 1) - 1, [options]);
+    const selectedValue = React.useMemo(() => {
+      let values = selectedLevelValues[lastLevel] ?? [];
+      if (values?.length === 0 && levelActive > 0)
+        values = [selectedLevelValues[levelActive - 1]].filter(Boolean);
+      return values;
+    }, [levelActive, selectedLevelValues]);
+    const selectedTempValue = React.useMemo(() => {
+      let values = selectedTempValues[lastLevel] ?? [];
+      if (values?.length === 0 && levelActive > 0)
+        values = [selectedTempValues[levelActive - 1]].filter(Boolean);
+      return values;
+    }, [lastLevel, selectedTempValues]);
+    const preValue = React.useMemo(
+      () => levelActive <= 0 ? null : selectedTempValues[levelActive - 1],
+      [selectedTempValues, levelActive]
+    );
+    React.useEffect(() => {
+      if (JSON.stringify(value) != JSON.stringify(selectedLevelValues)) {
+        const levelIndex = findIndexOrLast(value);
+        setLevelActive(levelIndex);
+        setSelectedLevelValues(value ?? []);
+        setSelectedTempValues(value ?? []);
+      }
+    }, [value]);
+    const handleValueChange = (values, level) => {
+      let newSelectedValues = [...selectedTempValues];
+      const newValues = values?.filter((item) => !/^\d+\//.test(item.value)) ?? [];
+      if (level === lastLevel) {
+        newSelectedValues[level] = newValues;
+        !multiple && setSelectedLevelValues([...newSelectedValues]);
+        !multiple && onChange?.(newSelectedValues);
+      } else {
+        newSelectedValues[level] = newValues[0];
+        newSelectedValues = newSelectedValues.splice(0, level + 1);
+        setLevelActive(level + 1);
+      }
+      setSelectedTempValues([...newSelectedValues]);
+      onValueChange?.(newSelectedValues);
+    };
+    const handleBack = () => {
+      if (levelActive > 0) {
+        const newSelectedValues = [...selectedTempValues].splice(0, levelActive - 1);
+        setLevelActive(levelActive - 1);
+        setSelectedTempValues([...newSelectedValues]);
+        setSelectedLevelValues([...newSelectedValues]);
+        onChange?.([...newSelectedValues]);
+      }
+    };
+    const handleApplyCustomValues = () => {
+      setSelectedLevelValues(selectedTempValues);
+      onChange?.(selectedTempValues);
+    };
+    const handleClearValue = () => {
+      setSelectedTempValues([]);
+      setSelectedLevelValues([]);
+      setLevelActive(0);
+      onChange?.([]);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select,
+      {
+        value: selectedTempValue?.map((item) => {
+          let values = selectedTempValues[lastLevel] ?? [];
+          if (values?.length === 0 && levelActive > 0)
+            return {
+              ...item,
+              value: `${levelActive}/${item.value}`
+            };
+          return item;
+        }),
+        label,
+        onValueChange: (values) => handleValueChange(values, levelActive),
+        onClearValue: handleClearValue,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { isError, hasRemoveIcon, placeholder, children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { children: () => typeof valueLabel === "function" ? valueLabel(selectedValue) : selectedValue?.map((option) => option.name ?? option.value)?.join(", ") }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(select.SelectBody, { className: "flex flex-col !p-0 !pt-3", children: [
+            preValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex cursor-pointer items-center gap-1 px-3 pb-3", onClick: handleBack, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowLeftIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-t18sb text-overflow text-ellipsis whitespace-nowrap", children: preValue?.name ?? preValue?.value ?? "" })
+            ] }),
+            options?.map(
+              (levelOptions, index) => levelActive === index ? /* @__PURE__ */ jsxRuntime.jsx(
+                SelectOptions,
+                {
+                  options: levelOptions,
+                  multiple: lastLevel === index ? multiple : false,
+                  selectable: lastLevel === index,
+                  loading,
+                  hasSearch
+                },
+                `${index}-${levelOptions?.length}`
+              ) : null
+            ),
+            multiple && levelActive === lastLevel && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "relative flex gap-3 p-3",
+                style: { boxShadow: "0px -8px 24px -4px #172E7E17" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      type: "button",
+                      variant: "link",
+                      size: "sm",
+                      onClick: () => handleValueChange([], levelActive),
+                      children: "B\u1ECF ch\u1ECDn"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(select.SelectClose, { className: "w-full", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    button.Button,
+                    {
+                      type: "button",
+                      className: "w-full",
+                      size: "sm",
+                      onClick: handleApplyCustomValues,
+                      children: [
+                        "\xC1p d\u1EE5ng",
+                        " ",
+                        Array.isArray(selectedTempValues?.[levelActive]) && !!selectedTempValues?.[levelActive]?.length ? `(${selectedTempValues?.[levelActive]?.length})` : ""
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+const SelectOptions = React.memo(
+  ({ options, multiple, selectable, loading, hasSearch }) => {
+    const [searchedOptions, setSearchedOptions] = React__default.default.useState(options ?? []);
+    const handleSearch = (searchValue) => {
+      if (!searchValue) {
+        setSearchedOptions(options ?? []);
+      } else {
+        const resultOptions = options?.filter(
+          // (option) => (option.name?.toLowerCase().search(searchValue.toLowerCase()) ?? -1) > -1,
+          (option) => option.name?.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").includes(
+            searchValue.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+          ) ?? false
+        );
+        setSearchedOptions(resultOptions ?? []);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-2 overflow-hidden", children: [
+      hasSearch && /* @__PURE__ */ jsxRuntime.jsx(
+        input.Input,
+        {
+          className: "mx-3",
+          buttonIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { color: "#bbbbbb", className: "h-4 w-4" }),
+          onChange: (e) => handleSearch(e.target.value),
+          placeholder: "T\xECm ki\u1EBFm"
+        }
+      ),
+      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 px-3 pb-3", children: new Array(5).fill(1).map((_item, index) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-full" }, index)) }),
+      " ",
+      !loading && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: utils.cn(
+            "divide-border max-h-[360px] flex-1 divide-y overflow-auto",
+            searchedOptions?.length && "border-border border-t"
+          ),
+          children: [
+            searchedOptions?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+              select.SelectItem,
+              {
+                multiple,
+                option,
+                onClick: (e) => !selectable && e.stopPropagation(),
+                rightIcon: selectable ? null : /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowRightIcon, {}),
+                className: "p-3",
+                children: option?.name || option?.value
+              }
+            )),
+            !searchedOptions?.length && /* @__PURE__ */ jsxRuntime.jsx(select.SelectEmptyState, { className: "p-3" })
+          ]
+        }
+      )
+    ] });
+  }
+);
+
+exports.SelectLevel = SelectLevel;
+//# sourceMappingURL=select-level.js.map
+//# sourceMappingURL=select-level.js.map