@sth87/shadcn-design-system 0.1.1 → 0.1.3

package/dist/esm/components/Checkbox/Checkbox.js

@@ -1,17 +1,17 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import u, { useState as D } from "react";
-import { Checkbox as L } from "../../packages/ui/src/components/checkbox.js";
+import u, { useState as L } from "react";
+import { Checkbox as V } from "../../packages/ui/src/components/checkbox.js";
 import "@radix-ui/react-slot";
 import "../../packages/ui/src/components/button.js";
 import "../../packages/ui/src/components/button-group.js";
 import "../../packages/ui/src/components/input.js";
 import "../../packages/ui/src/components/textarea.js";
-import { Label as V } from "../../packages/ui/src/components/label.js";
+import { Label as g } from "../../packages/ui/src/components/label.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "@radix-ui/react-tooltip";
 import { cn as a } from "../../packages/ui/src/lib/utils.js";
-import { Info as g } from "lucide-react";
+import { Info as C } from "lucide-react";
 import "react-day-picker";
 import "../../packages/ui/src/components/popover.js";
 import "@radix-ui/react-separator";
@@ -36,55 +36,55 @@ import { Tooltip as b } from "../Tooltip/Tooltip.js";
 import { AnimatePresence as $ } from "motion/react";
 import { ConfettiPiece as q } from "../../utils/css.js";
 const B = u.forwardRef(
-  (C, N) => {
+  (N, w) => {
     const {
       label: o,
       infoTooltip: i,
       helperText: r,
-      state: l,
-      variant: w = "default",
-      size: v = "default",
-      color: k,
+      state: m,
+      variant: v = "default",
+      size: k = "default",
+      color: y,
       labelPosition: t = "right",
-      labelAlignment: m = "center",
-      icon: y,
-      animation: T,
-      id: I,
+      labelAlignment: l = "center",
+      icon: T,
+      animation: I,
+      id: j,
       onCheckedChange: c,
-      ...j
-    } = C, [z, p] = D(!1), A = u.useId(), d = I || A, P = {
+      ...z
+    } = N, [A, p] = L(!1), P = u.useId(), d = j || P, S = {
       default: "ds:text-muted-foreground",
       success: "ds:text-success",
       warning: "ds:text-warning",
       error: "ds:text-error"
-    }, S = (n) => {
+    }, _ = (n) => {
       n && (p(!0), setTimeout(() => p(!1), 800)), c?.(n);
-    }, f = t === "top" || t === "bottom", _ = f ? "ds:flex-col" : "ds:flex-row", F = f ? "ds:gap-1.5" : "ds:gap-2", R = m === "start" ? "ds:items-start" : m === "center" ? "ds:items-center" : "ds:items-end", h = "ds:flex ds:gap-2 ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70";
+    }, f = t === "top" || t === "bottom", F = f ? "ds:flex-col" : "ds:flex-row", R = f ? "ds:gap-1.5" : "ds:gap-2", D = l === "start" ? "ds:items-start" : l === "center" ? "ds:items-center" : "ds:items-end", h = "ds:flex ds:gap-2 ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70";
     return /* @__PURE__ */ s("div", { className: a("ds:flex ds:flex-col ds:gap-1.5 ds:relative", {}), children: [
-      /* @__PURE__ */ s("div", { className: a("ds:flex", _, F, R), children: [
-        (t === "top" || t === "left") && o && /* @__PURE__ */ s("label", { htmlFor: d, className: h, children: [
+      /* @__PURE__ */ s("div", { className: a("ds:flex", F, R, D), children: [
+        (t === "top" || t === "left") && o && /* @__PURE__ */ s(g, { htmlFor: d, className: h, children: [
           o,
-          i && /* @__PURE__ */ e(b, { content: i, children: /* @__PURE__ */ e(g, { className: "ds:size-3.5 ds:min-w-3.5" }) })
+          i && /* @__PURE__ */ e(b, { content: i, children: /* @__PURE__ */ e(C, { className: "ds:size-3.5 ds:min-w-3.5" }) })
         ] }),
         /* @__PURE__ */ s("div", { className: "ds:relative ds:inline-flex", children: [
           /* @__PURE__ */ e(
-            L,
+            V,
             {
-              ref: N,
+              ref: w,
               id: d,
-              ...j,
-              variant: w,
-              size: v,
-              color: k,
-              icon: y,
-              onCheckedChange: T ? S : c
+              ...z,
+              variant: v,
+              size: k,
+              color: y,
+              icon: T,
+              onCheckedChange: I ? _ : c
             }
           ),
-          /* @__PURE__ */ e($, { children: z && /* @__PURE__ */ e("div", { className: "ds:pointer-events-none ds:absolute ds:inset-0", children: [...Array(12)].map((n, x) => /* @__PURE__ */ e(q, { index: x }, x)) }) })
+          /* @__PURE__ */ e($, { children: A && /* @__PURE__ */ e("div", { className: "ds:pointer-events-none ds:absolute ds:inset-0", children: [...Array(12)].map((n, x) => /* @__PURE__ */ e(q, { index: x }, x)) }) })
         ] }),
-        (t === "bottom" || t === "right") && o && /* @__PURE__ */ s(V, { htmlFor: d, className: h, children: [
+        (t === "bottom" || t === "right") && o && /* @__PURE__ */ s(g, { htmlFor: d, className: h, children: [
           o,
-          i && /* @__PURE__ */ e(b, { content: i, children: /* @__PURE__ */ e(g, { className: "ds:size-3.5 ds:min-w-3.5" }) })
+          i && /* @__PURE__ */ e(b, { content: i, children: /* @__PURE__ */ e(C, { className: "ds:size-3.5 ds:min-w-3.5" }) })
         ] })
       ] }),
       r && /* @__PURE__ */ e("div", { className: "ds:flex ds:items-center ds:justify-between ds:text-xs ds:gap-2", children: r && /* @__PURE__ */ e(
@@ -92,7 +92,7 @@ const B = u.forwardRef(
         {
           className: a(
             "ds:text-xs",
-            l ? P?.[l] : ""
+            m ? S?.[m] : ""
           ),
           children: r
         }

package/dist/esm/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Checkbox as SCheckbox } from \"@dsui/ui/components/checkbox\";\nimport { cn } from \"@dsui/ui/index\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Label } from \"../Label\";\nimport { Info } from \"lucide-react\";\nimport { AnimatePresence } from \"motion/react\";\nimport { ConfettiPiece } from \"@/utils/css\";\nimport type { CheckedState } from \"@radix-ui/react-checkbox\";\n\nexport type CheckboxProps = Omit<\n  React.ComponentPropsWithoutRef<typeof SCheckbox>,\n  \"onCheckedChange\" | \"variant\" | \"size\" | \"color\" | \"icon\"\n> & {\n  onCheckedChange?: (checked: CheckedState) => void;\n  variant?: \"default\" | \"circle\";\n  size?: \"sm\" | \"default\" | \"lg\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  icon?: React.ReactNode;\n  label?: React.ReactNode;\n  labelPosition?: \"top\" | \"left\" | \"right\" | \"bottom\";\n  labelAlignment?: \"start\" | \"center\" | \"end\";\n  infoTooltip?: React.ReactNode;\n  helperText?: React.ReactNode;\n  state?: \"default\" | \"error\" | \"success\" | \"warning\";\n  animation?: \"confetti\" | undefined;\n};\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref) => {\n    const {\n      label,\n      infoTooltip,\n      helperText,\n      state,\n      variant = \"default\",\n      size = \"default\",\n      color,\n      labelPosition = \"right\",\n      labelAlignment = \"center\",\n      icon,\n      animation,\n      id,\n      onCheckedChange,\n      ...rest\n    } = props;\n    const [showConfetti, setShowConfetti] = useState(false);\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n\n    // State\n    const helperTextStyles = {\n      default: \"ds:text-muted-foreground\",\n      success: \"ds:text-success\",\n      warning: \"ds:text-warning\",\n      error: \"ds:text-error\",\n    };\n\n    const handleCheckedChange = (checked: CheckedState) => {\n      if (checked) {\n        setShowConfetti(true);\n        setTimeout(() => setShowConfetti(false), 800);\n      }\n      onCheckedChange?.(checked);\n    };\n\n    const isVertical = labelPosition === \"top\" || labelPosition === \"bottom\";\n    const flexDirection = isVertical ? \"ds:flex-col\" : \"ds:flex-row\";\n    const gapClass = isVertical ? \"ds:gap-1.5\" : \"ds:gap-2\";\n\n    const alignmentClass =\n      labelAlignment === \"start\"\n        ? \"ds:items-start\"\n        : labelAlignment === \"center\"\n          ? \"ds:items-center\"\n          : \"ds:items-end\";\n\n    const labelClass =\n      \"ds:flex ds:gap-2 ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\";\n\n    return (\n      <div className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {})}>\n        <div className={cn(\"ds:flex\", flexDirection, gapClass, alignmentClass)}>\n          {(labelPosition === \"top\" || labelPosition === \"left\") && label && (\n            <label htmlFor={inputId} className={labelClass}>\n              {label}\n              {infoTooltip && (\n                <Tooltip content={infoTooltip}>\n                  <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n                </Tooltip>\n              )}\n            </label>\n          )}\n\n          <div className=\"ds:relative ds:inline-flex\">\n            <SCheckbox\n              ref={ref}\n              id={inputId}\n              {...rest}\n              variant={variant}\n              size={size}\n              color={color}\n              icon={icon}\n              onCheckedChange={\n                animation ? handleCheckedChange : onCheckedChange\n              }\n            />\n\n            <AnimatePresence>\n              {showConfetti && (\n                <div className=\"ds:pointer-events-none ds:absolute ds:inset-0\">\n                  {[...Array(12)].map((_, i) => (\n                    <ConfettiPiece key={i} index={i} />\n                  ))}\n                </div>\n              )}\n            </AnimatePresence>\n          </div>\n\n          {(labelPosition === \"bottom\" || labelPosition === \"right\") &&\n            label && (\n              <Label htmlFor={inputId} className={labelClass}>\n                {label}\n                {infoTooltip && (\n                  <Tooltip content={infoTooltip}>\n                    <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n                  </Tooltip>\n                )}\n              </Label>\n            )}\n        </div>\n\n        {helperText && (\n          <div className=\"ds:flex ds:items-center ds:justify-between ds:text-xs ds:gap-2\">\n            {helperText && (\n              <p\n                className={cn(\n                  \"ds:text-xs\",\n                  state ? helperTextStyles?.[state] : \"\"\n                )}\n              >\n                {helperText}\n              </p>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","label","infoTooltip","helperText","state","variant","size","color","labelPosition","labelAlignment","icon","animation","id","onCheckedChange","rest","showConfetti","setShowConfetti","useState","generatedId","inputId","helperTextStyles","handleCheckedChange","checked","isVertical","flexDirection","gapClass","alignmentClass","labelClass","cn","jsxs","Tooltip","jsx","Info","SCheckbox","AnimatePresence","_","i","ConfettiPiece","Label"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Checkbox as SCheckbox } from \"@dsui/ui/components/checkbox\";\nimport { cn } from \"@dsui/ui/index\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Label } from \"../Label\";\nimport { Info } from \"lucide-react\";\nimport { AnimatePresence } from \"motion/react\";\nimport { ConfettiPiece } from \"@/utils/css\";\nimport type { CheckedState } from \"@radix-ui/react-checkbox\";\n\nexport type CheckboxProps = Omit<\n  React.ComponentPropsWithoutRef<typeof SCheckbox>,\n  \"onCheckedChange\" | \"variant\" | \"size\" | \"color\" | \"icon\"\n> & {\n  onCheckedChange?: (checked: CheckedState) => void;\n  variant?: \"default\" | \"circle\";\n  size?: \"sm\" | \"default\" | \"lg\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  icon?: React.ReactNode;\n  label?: React.ReactNode;\n  labelPosition?: \"top\" | \"left\" | \"right\" | \"bottom\";\n  labelAlignment?: \"start\" | \"center\" | \"end\";\n  infoTooltip?: React.ReactNode;\n  helperText?: React.ReactNode;\n  state?: \"default\" | \"error\" | \"success\" | \"warning\";\n  animation?: \"confetti\" | undefined;\n};\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref) => {\n    const {\n      label,\n      infoTooltip,\n      helperText,\n      state,\n      variant = \"default\",\n      size = \"default\",\n      color,\n      labelPosition = \"right\",\n      labelAlignment = \"center\",\n      icon,\n      animation,\n      id,\n      onCheckedChange,\n      ...rest\n    } = props;\n    const [showConfetti, setShowConfetti] = useState(false);\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n\n    // State\n    const helperTextStyles = {\n      default: \"ds:text-muted-foreground\",\n      success: \"ds:text-success\",\n      warning: \"ds:text-warning\",\n      error: \"ds:text-error\",\n    };\n\n    const handleCheckedChange = (checked: CheckedState) => {\n      if (checked) {\n        setShowConfetti(true);\n        setTimeout(() => setShowConfetti(false), 800);\n      }\n      onCheckedChange?.(checked);\n    };\n\n    const isVertical = labelPosition === \"top\" || labelPosition === \"bottom\";\n    const flexDirection = isVertical ? \"ds:flex-col\" : \"ds:flex-row\";\n    const gapClass = isVertical ? \"ds:gap-1.5\" : \"ds:gap-2\";\n\n    const alignmentClass =\n      labelAlignment === \"start\"\n        ? \"ds:items-start\"\n        : labelAlignment === \"center\"\n          ? \"ds:items-center\"\n          : \"ds:items-end\";\n\n    const labelClass =\n      \"ds:flex ds:gap-2 ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\";\n\n    return (\n      <div className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {})}>\n        <div className={cn(\"ds:flex\", flexDirection, gapClass, alignmentClass)}>\n          {(labelPosition === \"top\" || labelPosition === \"left\") && label && (\n            <Label htmlFor={inputId} className={labelClass}>\n              {label}\n              {infoTooltip && (\n                <Tooltip content={infoTooltip}>\n                  <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n                </Tooltip>\n              )}\n            </Label>\n          )}\n\n          <div className=\"ds:relative ds:inline-flex\">\n            <SCheckbox\n              ref={ref}\n              id={inputId}\n              {...rest}\n              variant={variant}\n              size={size}\n              color={color}\n              icon={icon}\n              onCheckedChange={\n                animation ? handleCheckedChange : onCheckedChange\n              }\n            />\n\n            <AnimatePresence>\n              {showConfetti && (\n                <div className=\"ds:pointer-events-none ds:absolute ds:inset-0\">\n                  {[...Array(12)].map((_, i) => (\n                    <ConfettiPiece key={i} index={i} />\n                  ))}\n                </div>\n              )}\n            </AnimatePresence>\n          </div>\n\n          {(labelPosition === \"bottom\" || labelPosition === \"right\") &&\n            label && (\n              <Label htmlFor={inputId} className={labelClass}>\n                {label}\n                {infoTooltip && (\n                  <Tooltip content={infoTooltip}>\n                    <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n                  </Tooltip>\n                )}\n              </Label>\n            )}\n        </div>\n\n        {helperText && (\n          <div className=\"ds:flex ds:items-center ds:justify-between ds:text-xs ds:gap-2\">\n            {helperText && (\n              <p\n                className={cn(\n                  \"ds:text-xs\",\n                  state ? helperTextStyles?.[state] : \"\"\n                )}\n              >\n                {helperText}\n              </p>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","label","infoTooltip","helperText","state","variant","size","color","labelPosition","labelAlignment","icon","animation","id","onCheckedChange","rest","showConfetti","setShowConfetti","useState","generatedId","inputId","helperTextStyles","handleCheckedChange","checked","isVertical","flexDirection","gapClass","alignmentClass","labelClass","cn","jsxs","Label","Tooltip","jsx","Info","SCheckbox","AnimatePresence","_","i","ConfettiPiece"],"mappings":"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"}

package/dist/esm/components/Select/Select.js

@@ -6,13 +6,14 @@ import { cn as o } from "../../packages/ui/src/lib/utils.js";
 import { FloatingLabel as O } from "../FloatLabel.js";
 import { Info as z } from "lucide-react";
 import { Tooltip as L } from "../Tooltip/Tooltip.js";
-const ee = n.forwardRef(
+import { Label as ee } from "../../packages/ui/src/components/label.js";
+const se = n.forwardRef(
   ({
     className: N,
     label: u,
     helperText: w,
     state: f = "default",
-    size: l = "normal",
+    size: r = "normal",
     isFloatLabel: t,
     infoTooltip: p,
     clearable: y = !1,
@@ -43,8 +44,8 @@ const ee = n.forwardRef(
     }, [S, c]);
     const P = n.useCallback(
       (d) => {
-        const r = d || "";
-        c === void 0 && _(r), I?.(r), x?.(r);
+        const l = d || "";
+        c === void 0 && _(l), I?.(l), x?.(l);
       },
       [I, x, c]
     ), Q = n.useCallback(
@@ -57,11 +58,11 @@ const ee = n.forwardRef(
       success: "ds:text-success",
       warning: "ds:text-warning",
       error: "ds:text-error"
-    }, G = t ? l === "xl" || l === "lg" ? l : "xl" : l, W = n.useMemo(() => {
+    }, G = t ? r === "xl" || r === "lg" ? r : "xl" : r, W = n.useMemo(() => {
       const d = /* @__PURE__ */ new Map();
-      return g.forEach((r) => {
-        const e = r.group;
-        d.has(e) || d.set(e, []), d.get(e).push(r);
+      return g.forEach((l) => {
+        const e = l.group;
+        d.has(e) || d.set(e, []), d.get(e).push(l);
       }), d;
     }, [g]);
     return /* @__PURE__ */ s("div", { className: N, children: /* @__PURE__ */ m(
@@ -73,7 +74,7 @@ const ee = n.forwardRef(
         }),
         children: [
           !t && u && /* @__PURE__ */ m(
-            "label",
+            ee,
             {
               htmlFor: i,
               className: "ds:flex ds:gap-2 ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70",
@@ -103,7 +104,7 @@ const ee = n.forwardRef(
                       className: o(
                         "ds:peer ds:w-full",
                         {
-                          "ds:pt-5 ds:pb-1": t && l !== "lg"
+                          "ds:pt-5 ds:pb-1": t && r !== "lg"
                         },
                         N
                       ),
@@ -125,14 +126,14 @@ const ee = n.forwardRef(
                     O,
                     {
                       htmlFor: i,
-                      size: l,
+                      size: r,
                       infoTooltip: p,
                       required: M,
                       children: u
                     }
                   ),
-                  /* @__PURE__ */ s(B, { search: h, children: [...W.entries()].map(([d, r]) => d ? /* @__PURE__ */ m(n.Fragment, { children: [
-                    /* @__PURE__ */ s(F, { heading: d, children: r.map((e) => /* @__PURE__ */ s(
+                  /* @__PURE__ */ s(B, { search: h, children: [...W.entries()].map(([d, l]) => d ? /* @__PURE__ */ m(n.Fragment, { children: [
+                    /* @__PURE__ */ s(F, { heading: d, children: l.map((e) => /* @__PURE__ */ s(
                       H,
                       {
                         value: e.value,
@@ -144,7 +145,7 @@ const ee = n.forwardRef(
                       e.value
                     )) }),
                     /* @__PURE__ */ s(R, {})
-                  ] }, d) : r.map((e) => /* @__PURE__ */ s(
+                  ] }, d) : l.map((e) => /* @__PURE__ */ s(
                     H,
                     {
                       value: e.value,
@@ -175,14 +176,14 @@ const ee = n.forwardRef(
                   className: o(
                     "ds:peer ds:w-full ds:justify-start",
                     {
-                      "ds:pt-5 ds:pb-1": t && l !== "lg"
+                      "ds:pt-5 ds:pb-1": t && r !== "lg"
                     }
                     // className,
                   ),
                   size: G,
                   state: f,
                   dropdownClassName: o("ds:opacity-40", {
-                    "ds:translate-y-[-8px]": t && l !== "lg"
+                    "ds:translate-y-[-8px]": t && r !== "lg"
                   }),
                   searchable: !!h,
                   tagRender: a,
@@ -194,7 +195,7 @@ const ee = n.forwardRef(
                 O,
                 {
                   htmlFor: i,
-                  size: l,
+                  size: r,
                   infoTooltip: p,
                   required: M,
                   shouldFloat: !!(c ?? V),
@@ -210,8 +211,8 @@ const ee = n.forwardRef(
     ) });
   }
 );
-ee.displayName = "Select";
+se.displayName = "Select";
 export {
-  ee as default
+  se as default
 };
 //# sourceMappingURL=Select.js.map

package/dist/esm/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  MultiSelect as BaseMultiSelect,\n  MultiSelectTrigger as BaseMultiSelectTrigger,\n  MultiSelectValue as BaseMultiSelectValue,\n  MultiSelectContent as BaseMultiSelectContent,\n  MultiSelectItem as BaseMultiSelectItem,\n  MultiSelectGroup as BaseMultiSelectGroup,\n  MultiSelectSeparator as BaseMultiSelectSeparator,\n} from \"@dsui/ui/components/select\";\nimport {\n  Combobox,\n  type ComboboxProps,\n  type SelectOption as SSelectOption,\n} from \"@dsui/ui/components/combobox\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Info } from \"lucide-react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\nexport type SelectOption = SSelectOption;\n\nexport type SelectProps = Omit<ComboboxProps, \"ref\"> & {\n  label?: string;\n  helperText?: React.ReactNode;\n  state?: \"default\" | \"success\" | \"warning\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  isFloatLabel?: boolean;\n  infoTooltip?: React.ReactNode;\n  clearable?: boolean;\n  placeholder?: string;\n  options?: SelectOption[];\n  tagRender?: (option: SelectOption) => React.ReactNode;\n  multiple?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  values?: string[];\n  defaultValues?: string | string[];\n  onValuesChange?: (values: string[]) => void;\n  search?: boolean | { placeholder?: string; emptyMessage?: string };\n  clickToRemove?: boolean;\n  overflowBehavior?: \"wrap\" | \"wrap-when-open\" | \"cutoff\";\n  className?: string;\n  disabled?: boolean;\n  onChange?: (value: string | string[]) => void;\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  required?: boolean;\n};\n\nconst Select = React.forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      state = \"default\",\n      size = \"normal\",\n      isFloatLabel,\n      infoTooltip,\n      clearable = false,\n      placeholder = \"\",\n      options = [],\n      tagRender,\n      multiple = false,\n      value,\n      defaultValue,\n      onValueChange,\n      values,\n      defaultValues,\n      onValuesChange,\n      search,\n      clickToRemove = true,\n      overflowBehavior = \"wrap-when-open\",\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      required,\n    },\n    ref\n  ) => {\n    const selectId = React.useId();\n\n    // For single select, use controlled value or internal state\n    const [internalValue, setInternalValue] = React.useState(\n      value ?? defaultValue ?? \"\"\n    );\n\n    React.useEffect(() => {\n      if (!multiple && value !== undefined) {\n        setInternalValue(value);\n      }\n    }, [multiple, value]);\n\n    // Handle single select value change\n    const handleSingleValueChange = React.useCallback(\n      (newValue?: string | null) => {\n        const val = newValue || \"\";\n        if (value === undefined) {\n          setInternalValue(val);\n        }\n        onValueChange?.(val);\n        onChange?.(val);\n      },\n      [onValueChange, onChange, value]\n    );\n\n    // Handle multi select values change\n    const handleMultiValuesChange = React.useCallback(\n      (newValues: string[]) => {\n        onValuesChange?.(newValues);\n        onChange?.(newValues);\n      },\n      [onValuesChange, onChange]\n    );\n\n    // Helper text styles\n    const helperTextStyles = {\n      default: \"ds:text-muted-foreground\",\n      success: \"ds:text-success\",\n      warning: \"ds:text-warning\",\n      error: \"ds:text-error\",\n    };\n\n    // Calculate current size\n    const currentSize = isFloatLabel\n      ? size === \"xl\" || size === \"lg\"\n        ? size\n        : \"xl\"\n      : size;\n\n    // Group options by group property\n    const groupedOptions = React.useMemo(() => {\n      const groups = new Map<string | undefined, SelectOption[]>();\n      options.forEach((option) => {\n        const group = option.group;\n        if (!groups.has(group)) {\n          groups.set(group, []);\n        }\n        groups.get(group)!.push(option);\n      });\n      return groups;\n    }, [options]);\n\n    return (\n      <div className={className}>\n        <div\n          ref={ref}\n          className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {\n            \"ds:floating-label ds:relative\": isFloatLabel,\n          })}\n        >\n          {!isFloatLabel && label && (\n            <label\n              htmlFor={selectId}\n              className=\"ds:flex ds:gap-2 ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\"\n            >\n              <span>\n                {label}\n                {required && <span className=\"ds:text-error ds:ml-0.5\">*</span>}\n              </span>\n              {infoTooltip && (\n                <Tooltip content={infoTooltip}>\n                  <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n                </Tooltip>\n              )}\n            </label>\n          )}\n\n          <div className=\"ds:relative\">\n            {!multiple ? (\n              // Single Mode\n              <>\n                <Combobox\n                  value={value ?? internalValue}\n                  options={options}\n                  placeHolder={placeholder}\n                  emptyText={\n                    typeof search === \"object\"\n                      ? search.emptyMessage\n                      : \"No results found\"\n                  }\n                  onChange={handleSingleValueChange}\n                  clearable={clearable}\n                  disabled={disabled}\n                  id={selectId}\n                  className={cn(\n                    \"ds:peer ds:w-full ds:justify-start\",\n                    {\n                      \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n                    }\n                    // className,\n                  )}\n                  size={currentSize}\n                  state={state}\n                  dropdownClassName={cn(\"ds:opacity-40\", {\n                    \"ds:translate-y-[-8px]\": isFloatLabel && size !== \"lg\",\n                  })}\n                  searchable={!!search}\n                  tagRender={tagRender}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                />\n                {isFloatLabel && (\n                  <FloatingLabel\n                    htmlFor={selectId}\n                    size={size}\n                    infoTooltip={infoTooltip}\n                    required={required}\n                    shouldFloat={!!(value ?? internalValue)}\n                    className=\"ds:pointer-events-none\"\n                  >\n                    {label}\n                  </FloatingLabel>\n                )}\n              </>\n            ) : (\n              // Multi Mode\n              <BaseMultiSelect\n                values={values}\n                defaultValues={\n                  typeof defaultValues === \"string\"\n                    ? [defaultValues]\n                    : defaultValues\n                }\n                onValuesChange={handleMultiValuesChange}\n              >\n                <BaseMultiSelectTrigger\n                  id={selectId}\n                  disabled={disabled}\n                  className={cn(\n                    \"ds:peer ds:w-full\",\n                    {\n                      \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n                    },\n                    className\n                  )}\n                  size={currentSize}\n                  state={state}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                >\n                  <BaseMultiSelectValue\n                    placeholder={placeholder}\n                    clickToRemove={clickToRemove && clearable}\n                    overflowBehavior={overflowBehavior}\n                  />\n                </BaseMultiSelectTrigger>\n\n                {isFloatLabel && (\n                  <FloatingLabel\n                    htmlFor={selectId}\n                    size={size}\n                    infoTooltip={infoTooltip}\n                    required={required}\n                  >\n                    {label}\n                  </FloatingLabel>\n                )}\n\n                <BaseMultiSelectContent search={search}>\n                  {[...groupedOptions.entries()].map(([group, items]) => {\n                    if (group) {\n                      return (\n                        <React.Fragment key={group}>\n                          <BaseMultiSelectGroup heading={group}>\n                            {items.map((option) => (\n                              <BaseMultiSelectItem\n                                key={option.value}\n                                value={option.value}\n                                disabled={option?.disabled}\n                                icon={option?.icon}\n                                tagRender={!!tagRender}\n                              >\n                                {tagRender ? tagRender(option) : option.label}\n                              </BaseMultiSelectItem>\n                            ))}\n                          </BaseMultiSelectGroup>\n                          <BaseMultiSelectSeparator />\n                        </React.Fragment>\n                      );\n                    }\n                    return items.map((option) => (\n                      <BaseMultiSelectItem\n                        key={option.value}\n                        value={option.value}\n                        disabled={option?.disabled}\n                        icon={option?.icon}\n                        tagRender={!!tagRender}\n                      >\n                        {tagRender ? tagRender(option) : option.label}\n                      </BaseMultiSelectItem>\n                    ));\n                  })}\n                </BaseMultiSelectContent>\n              </BaseMultiSelect>\n            )}\n          </div>\n\n          {helperText && (\n            <p className={cn(\"ds:text-xs\", state ? helperTextStyles[state] : \"\")}>\n              {helperText}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nSelect.displayName = \"Select\";\nexport default Select;\n"],"names":["Select","React","className","label","helperText","state","size","isFloatLabel","infoTooltip","clearable","placeholder","options","tagRender","multiple","value","defaultValue","onValueChange","values","defaultValues","onValuesChange","search","clickToRemove","overflowBehavior","disabled","onChange","onFocus","onBlur","required","ref","selectId","internalValue","setInternalValue","handleSingleValueChange","newValue","val","handleMultiValuesChange","newValues","helperTextStyles","currentSize","groupedOptions","groups","option","group","jsx","jsxs","cn","Tooltip","Info","BaseMultiSelect","BaseMultiSelectTrigger","BaseMultiSelectValue","FloatingLabel","BaseMultiSelectContent","items","BaseMultiSelectGroup","BaseMultiSelectItem","BaseMultiSelectSeparator","Fragment","Combobox"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  MultiSelect as BaseMultiSelect,\n  MultiSelectTrigger as BaseMultiSelectTrigger,\n  MultiSelectValue as BaseMultiSelectValue,\n  MultiSelectContent as BaseMultiSelectContent,\n  MultiSelectItem as BaseMultiSelectItem,\n  MultiSelectGroup as BaseMultiSelectGroup,\n  MultiSelectSeparator as BaseMultiSelectSeparator,\n} from \"@dsui/ui/components/select\";\nimport {\n  Combobox,\n  type ComboboxProps,\n  type SelectOption as SSelectOption,\n} from \"@dsui/ui/components/combobox\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Info } from \"lucide-react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { Label } from \"../Label\";\n\nexport type SelectOption = SSelectOption;\n\nexport type SelectProps = Omit<ComboboxProps, \"ref\"> & {\n  label?: string;\n  helperText?: React.ReactNode;\n  state?: \"default\" | \"success\" | \"warning\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  isFloatLabel?: boolean;\n  infoTooltip?: React.ReactNode;\n  clearable?: boolean;\n  placeholder?: string;\n  options?: SelectOption[];\n  tagRender?: (option: SelectOption) => React.ReactNode;\n  multiple?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  values?: string[];\n  defaultValues?: string | string[];\n  onValuesChange?: (values: string[]) => void;\n  search?: boolean | { placeholder?: string; emptyMessage?: string };\n  clickToRemove?: boolean;\n  overflowBehavior?: \"wrap\" | \"wrap-when-open\" | \"cutoff\";\n  className?: string;\n  disabled?: boolean;\n  onChange?: (value: string | string[]) => void;\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n  required?: boolean;\n};\n\nconst Select = React.forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      state = \"default\",\n      size = \"normal\",\n      isFloatLabel,\n      infoTooltip,\n      clearable = false,\n      placeholder = \"\",\n      options = [],\n      tagRender,\n      multiple = false,\n      value,\n      defaultValue,\n      onValueChange,\n      values,\n      defaultValues,\n      onValuesChange,\n      search,\n      clickToRemove = true,\n      overflowBehavior = \"wrap-when-open\",\n      disabled,\n      onChange,\n      onFocus,\n      onBlur,\n      required,\n    },\n    ref\n  ) => {\n    const selectId = React.useId();\n\n    // For single select, use controlled value or internal state\n    const [internalValue, setInternalValue] = React.useState(\n      value ?? defaultValue ?? \"\"\n    );\n\n    React.useEffect(() => {\n      if (!multiple && value !== undefined) {\n        setInternalValue(value);\n      }\n    }, [multiple, value]);\n\n    // Handle single select value change\n    const handleSingleValueChange = React.useCallback(\n      (newValue?: string | null) => {\n        const val = newValue || \"\";\n        if (value === undefined) {\n          setInternalValue(val);\n        }\n        onValueChange?.(val);\n        onChange?.(val);\n      },\n      [onValueChange, onChange, value]\n    );\n\n    // Handle multi select values change\n    const handleMultiValuesChange = React.useCallback(\n      (newValues: string[]) => {\n        onValuesChange?.(newValues);\n        onChange?.(newValues);\n      },\n      [onValuesChange, onChange]\n    );\n\n    // Helper text styles\n    const helperTextStyles = {\n      default: \"ds:text-muted-foreground\",\n      success: \"ds:text-success\",\n      warning: \"ds:text-warning\",\n      error: \"ds:text-error\",\n    };\n\n    // Calculate current size\n    const currentSize = isFloatLabel\n      ? size === \"xl\" || size === \"lg\"\n        ? size\n        : \"xl\"\n      : size;\n\n    // Group options by group property\n    const groupedOptions = React.useMemo(() => {\n      const groups = new Map<string | undefined, SelectOption[]>();\n      options.forEach((option) => {\n        const group = option.group;\n        if (!groups.has(group)) {\n          groups.set(group, []);\n        }\n        groups.get(group)!.push(option);\n      });\n      return groups;\n    }, [options]);\n\n    return (\n      <div className={className}>\n        <div\n          ref={ref}\n          className={cn(\"ds:flex ds:flex-col ds:gap-1.5 ds:relative\", {\n            \"ds:floating-label ds:relative\": isFloatLabel,\n          })}\n        >\n          {!isFloatLabel && label && (\n            <Label\n              htmlFor={selectId}\n              className=\"ds:flex ds:gap-2 ds:text-sm ds:font-medium ds:leading-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:opacity-70\"\n            >\n              <span>\n                {label}\n                {required && <span className=\"ds:text-error ds:ml-0.5\">*</span>}\n              </span>\n              {infoTooltip && (\n                <Tooltip content={infoTooltip}>\n                  <Info className=\"ds:size-3.5 ds:min-w-3.5\" />\n                </Tooltip>\n              )}\n            </Label>\n          )}\n\n          <div className=\"ds:relative\">\n            {!multiple ? (\n              // Single Mode\n              <>\n                <Combobox\n                  value={value ?? internalValue}\n                  options={options}\n                  placeHolder={placeholder}\n                  emptyText={\n                    typeof search === \"object\"\n                      ? search.emptyMessage\n                      : \"No results found\"\n                  }\n                  onChange={handleSingleValueChange}\n                  clearable={clearable}\n                  disabled={disabled}\n                  id={selectId}\n                  className={cn(\n                    \"ds:peer ds:w-full ds:justify-start\",\n                    {\n                      \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n                    }\n                    // className,\n                  )}\n                  size={currentSize}\n                  state={state}\n                  dropdownClassName={cn(\"ds:opacity-40\", {\n                    \"ds:translate-y-[-8px]\": isFloatLabel && size !== \"lg\",\n                  })}\n                  searchable={!!search}\n                  tagRender={tagRender}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                />\n                {isFloatLabel && (\n                  <FloatingLabel\n                    htmlFor={selectId}\n                    size={size}\n                    infoTooltip={infoTooltip}\n                    required={required}\n                    shouldFloat={!!(value ?? internalValue)}\n                    className=\"ds:pointer-events-none\"\n                  >\n                    {label}\n                  </FloatingLabel>\n                )}\n              </>\n            ) : (\n              // Multi Mode\n              <BaseMultiSelect\n                values={values}\n                defaultValues={\n                  typeof defaultValues === \"string\"\n                    ? [defaultValues]\n                    : defaultValues\n                }\n                onValuesChange={handleMultiValuesChange}\n              >\n                <BaseMultiSelectTrigger\n                  id={selectId}\n                  disabled={disabled}\n                  className={cn(\n                    \"ds:peer ds:w-full\",\n                    {\n                      \"ds:pt-5 ds:pb-1\": isFloatLabel && size !== \"lg\",\n                    },\n                    className\n                  )}\n                  size={currentSize}\n                  state={state}\n                  onFocus={onFocus}\n                  onBlur={onBlur}\n                >\n                  <BaseMultiSelectValue\n                    placeholder={placeholder}\n                    clickToRemove={clickToRemove && clearable}\n                    overflowBehavior={overflowBehavior}\n                  />\n                </BaseMultiSelectTrigger>\n\n                {isFloatLabel && (\n                  <FloatingLabel\n                    htmlFor={selectId}\n                    size={size}\n                    infoTooltip={infoTooltip}\n                    required={required}\n                  >\n                    {label}\n                  </FloatingLabel>\n                )}\n\n                <BaseMultiSelectContent search={search}>\n                  {[...groupedOptions.entries()].map(([group, items]) => {\n                    if (group) {\n                      return (\n                        <React.Fragment key={group}>\n                          <BaseMultiSelectGroup heading={group}>\n                            {items.map((option) => (\n                              <BaseMultiSelectItem\n                                key={option.value}\n                                value={option.value}\n                                disabled={option?.disabled}\n                                icon={option?.icon}\n                                tagRender={!!tagRender}\n                              >\n                                {tagRender ? tagRender(option) : option.label}\n                              </BaseMultiSelectItem>\n                            ))}\n                          </BaseMultiSelectGroup>\n                          <BaseMultiSelectSeparator />\n                        </React.Fragment>\n                      );\n                    }\n                    return items.map((option) => (\n                      <BaseMultiSelectItem\n                        key={option.value}\n                        value={option.value}\n                        disabled={option?.disabled}\n                        icon={option?.icon}\n                        tagRender={!!tagRender}\n                      >\n                        {tagRender ? tagRender(option) : option.label}\n                      </BaseMultiSelectItem>\n                    ));\n                  })}\n                </BaseMultiSelectContent>\n              </BaseMultiSelect>\n            )}\n          </div>\n\n          {helperText && (\n            <p className={cn(\"ds:text-xs\", state ? helperTextStyles[state] : \"\")}>\n              {helperText}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nSelect.displayName = \"Select\";\nexport default Select;\n"],"names":["Select","React","className","label","helperText","state","size","isFloatLabel","infoTooltip","clearable","placeholder","options","tagRender","multiple","value","defaultValue","onValueChange","values","defaultValues","onValuesChange","search","clickToRemove","overflowBehavior","disabled","onChange","onFocus","onBlur","required","ref","selectId","internalValue","setInternalValue","handleSingleValueChange","newValue","val","handleMultiValuesChange","newValues","helperTextStyles","currentSize","groupedOptions","groups","option","group","jsx","jsxs","cn","Label","Tooltip","Info","BaseMultiSelect","BaseMultiSelectTrigger","BaseMultiSelectValue","FloatingLabel","BaseMultiSelectContent","items","BaseMultiSelectGroup","BaseMultiSelectItem","BaseMultiSelectSeparator","Fragment","Combobox"],"mappings":"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"}

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,4 +1,4 @@
-import { jsx as t, Fragment as _, jsxs as m } from "react/jsx-runtime";
+import { jsx as s, Fragment as _, jsxs as m } from "react/jsx-runtime";
 import * as c from "react";
 import { useMemo as g, useCallback as j } from "react";
 import { TooltipProvider as S, Tooltip as W, TooltipTrigger as X, TooltipContent as A } from "../../packages/ui/src/components/tooltip.js";
@@ -8,7 +8,7 @@ import "../../packages/ui/src/components/button-group.js";
 import "../../packages/ui/src/components/input.js";
 import "../../packages/ui/src/components/textarea.js";
 import "@radix-ui/react-label";
-import { cn as e } from "../../packages/ui/src/lib/utils.js";
+import { cn as r } from "../../packages/ui/src/lib/utils.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "lucide-react";
@@ -35,69 +35,69 @@ import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
 import { useMotionValue as E, useSpring as u, useTransform as f, motion as v } from "motion/react";
 import { animationClass as F } from "../../utils/animations.js";
-const xt = c.memo(function({
-  content: n,
-  children: o,
+const xs = c.memo(function({
+  content: a,
+  children: e,
   sideOffset: b = 4,
   delayDuration: h = 0,
-  className: s,
+  className: o,
   childClassName: x,
   position: y = "top",
   noArrow: w = !1,
   animation: i,
-  ...a
+  ...d
 }) {
-  const l = { stiffness: 100, damping: 5 }, k = g(() => F(i, s), [i, s]), d = g(() => {
-    switch (a.color) {
+  const n = { stiffness: 100, damping: 5 }, k = g(() => F(i, o), [i, o]), l = g(() => {
+    switch (d.color) {
       case "primary":
-        return "bg-primary text-primary-foreground [&>span>svg]:bg-primary [&>span>svg]:fill-primary";
+        return "ds:bg-primary ds:text-primary-foreground ds:[&>span>svg]:bg-primary ds:[&>span>svg]:fill-primary";
       case "secondary":
-        return "bg-secondary text-secondary-foreground [&>span>svg]:bg-secondary [&>span>svg]:fill-secondary";
+        return "ds:bg-secondary ds:text-secondary-foreground ds:[&>span>svg]:bg-secondary ds:[&>span>svg]:fill-secondary";
       case "dark":
         return "";
       case "light":
-        return "bg-neutral-200 text-neutral-950 [&_svg]:bg-neutral-200 [&_svg]:fill-neutral-200";
+        return "ds:bg-neutral-200 ds:text-neutral-950 ds:[&_svg]:bg-neutral-200 ds:[&_svg]:fill-neutral-200";
       case "inverted":
-        return "dark:bg-white dark:text-black dark:[&_svg]:bg-white dark:[&_svg]:fill-white";
+        return "ds:dark:bg-white ds:dark:text-black ds:dark:[&_svg]:bg-white ds:dark:[&_svg]:fill-white";
       case "success":
-        return "bg-success text-success-foreground [&>span>svg]:bg-success [&>span>svg]:fill-success";
+        return "ds:bg-success ds:text-success-foreground ds:[&>span>svg]:bg-success ds:[&>span>svg]:fill-success";
       case "warning":
-        return "bg-warning text-warning-foreground [&>span>svg]:bg-warning [&>span>svg]:fill-warning";
+        return "ds:bg-warning ds:text-warning-foreground ds:[&>span>svg]:bg-warning ds:[&>span>svg]:fill-warning";
       case "error":
-        return "bg-error text-error-foreground [&>span>svg]:bg-error [&>span>svg]:fill-error";
+        return "ds:bg-error ds:text-error-foreground ds:[&>span>svg]:bg-error ds:[&>span>svg]:fill-error";
       case "glass":
-        return "bg-white/15 text-foreground backdrop-blur-sm shadow-lg [&>span>svg]:bg-white/15 [&>span>svg]:fill-white/15";
+        return "ds:bg-white/15 ds:text-foreground ds:backdrop-blur-sm ds:shadow-lg ds:[&>span>svg]:bg-white/15 ds:[&>span>svg]:fill-white/15";
       default:
-        return "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance";
+        return "ds:bg-foreground ds:text-background ds:animate-in ds:fade-in-0 ds:zoom-in-95 ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=closed]:zoom-out-95 ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=left]:slide-in-from-right-2 ds:data-[side=right]:slide-in-from-left-2 ds:data-[side=top]:slide-in-from-bottom-2 ds:z-50 ds:w-fit ds:origin-(--radix-tooltip-content-transform-origin) ds:rounded-md ds:px-3 ds:py-1.5 ds:text-xs ds:text-balance";
     }
-  }, [a?.color]), r = E(0), T = u(
-    f(r, [-100, 100], [-45, 45]),
-    l
+  }, [d?.color]), t = E(0), T = u(
+    f(t, [-100, 100], [-45, 45]),
+    n
   ), C = u(
-    f(r, [-100, 100], [-50, 50]),
-    l
+    f(t, [-100, 100], [-50, 50]),
+    n
   ), M = j(
     (p) => {
       const N = p.target.offsetWidth / 2;
-      r.set(p.nativeEvent.offsetX - N);
+      t.set(p.nativeEvent.offsetX - N);
     },
-    [r]
-  ), z = c.memo(() => o ? /* @__PURE__ */ t(
+    [t]
+  ), z = c.memo(() => e ? /* @__PURE__ */ s(
     "span",
     {
       onMouseMove: M,
-      className: e("ds:inline-block", x),
-      children: o
+      className: r("ds:inline-block", x),
+      children: e
     }
-  ) : /* @__PURE__ */ t(_, {}));
+  ) : /* @__PURE__ */ s(_, {}));
   return i === "spec" ? /* @__PURE__ */ m(
     v.div,
     {
-      className: e("ds:relative ds:-me-2.5 ds:inline-block", s),
+      className: r("ds:relative ds:-me-2.5 ds:inline-block", o),
       whileHover: "hover",
       initial: "initial",
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ s(
           v.div,
           {
             variants: {
@@ -118,33 +118,33 @@ const xt = c.memo(function({
               rotate: T,
               whiteSpace: "nowrap"
             },
-            className: e(
+            className: r(
               "ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl",
-              d
+              l
             ),
-            children: /* @__PURE__ */ t("div", { className: "ds:relative ds:z-1", children: n })
+            children: /* @__PURE__ */ s("div", { className: "ds:relative ds:z-1", children: a })
           }
         ),
-        /* @__PURE__ */ t(z, {})
+        /* @__PURE__ */ s(z, {})
       ]
     }
-  ) : /* @__PURE__ */ t(S, { delayDuration: h, children: /* @__PURE__ */ m(W, { children: [
-    /* @__PURE__ */ t(X, { asChild: !0, children: o }),
-    /* @__PURE__ */ t(
+  ) : /* @__PURE__ */ s(S, { delayDuration: h, children: /* @__PURE__ */ m(W, { children: [
+    /* @__PURE__ */ s(X, { asChild: !0, children: e }),
+    /* @__PURE__ */ s(
       A,
       {
-        ...a,
+        ...d,
         side: y,
         sideOffset: b,
-        className: e(k?.className, d, {
+        className: r(k?.className, l, {
           "ds:[&>span>svg]:invisible": w
         }),
-        children: n
+        children: a
       }
     )
   ] }) });
 });
 export {
-  xt as Tooltip
+  xs as Tooltip
 };
 //# sourceMappingURL=Tooltip.js.map

package/dist/esm/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Tooltip as DsTooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  type TooltipContentProps,\n} from \"@dsui/ui/components/tooltip\";\nimport { cn } from \"@dsui/ui/index\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport type { BasicAnimation, BasicColor } from \"@/types/variables\";\nimport { useMemo, useCallback } from \"react\";\nimport { animationClass } from \"@/utils/animations\";\n\ntype Color = BasicColor | \"dark\" | \"light\" | \"inverted\";\n\nexport type TooltipProps = TooltipContentProps & {\n  content: React.ReactNode;\n  children: React.ReactNode;\n  sideOffset?: number;\n  delayDuration?: number;\n  position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  className?: string;\n  childClassName?: string;\n  noArrow?: boolean;\n  animation?: BasicAnimation;\n  color?: Color;\n};\n\nexport const Tooltip = React.memo(function Tooltip({\n  content,\n  children,\n  sideOffset = 4,\n  delayDuration = 0,\n  className,\n  childClassName,\n  position = \"top\",\n  noArrow = false,\n  animation,\n  ...props\n}: TooltipProps) {\n  const springConfig = { stiffness: 100, damping: 5 };\n\n  const tooltipAnimation = useMemo<{ className?: string } | null>(() => {\n    return animationClass(animation, className);\n  }, [animation, className]);\n\n  const tooltipColor = useMemo<string>(() => {\n    switch (props.color) {\n      case \"primary\":\n        return \"bg-primary text-primary-foreground [&>span>svg]:bg-primary [&>span>svg]:fill-primary\";\n      case \"secondary\":\n        return \"bg-secondary text-secondary-foreground [&>span>svg]:bg-secondary [&>span>svg]:fill-secondary\";\n      case \"dark\":\n        return \"\";\n      case \"light\":\n        return \"bg-neutral-200 text-neutral-950 [&_svg]:bg-neutral-200 [&_svg]:fill-neutral-200\";\n      case \"inverted\":\n        return \"dark:bg-white dark:text-black dark:[&_svg]:bg-white dark:[&_svg]:fill-white\";\n      case \"success\":\n        return \"bg-success text-success-foreground [&>span>svg]:bg-success [&>span>svg]:fill-success\";\n      case \"warning\":\n        return \"bg-warning text-warning-foreground [&>span>svg]:bg-warning [&>span>svg]:fill-warning\";\n      case \"error\":\n        return \"bg-error text-error-foreground [&>span>svg]:bg-error [&>span>svg]:fill-error\";\n      case \"glass\":\n        return \"bg-white/15 text-foreground backdrop-blur-sm shadow-lg [&>span>svg]:bg-white/15 [&>span>svg]:fill-white/15\";\n      default:\n        return \"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\";\n    }\n  }, [props?.color]);\n\n  // on mouse move\n  const x = useMotionValue(0);\n  // rotate the tooltip\n  const rotate = useSpring(\n    useTransform(x, [-100, 100], [-45, 45]),\n    springConfig\n  );\n  // translate the tooltip\n  const translateX = useSpring(\n    useTransform(x, [-100, 100], [-50, 50]),\n    springConfig\n  );\n\n  const handleMouseMove = useCallback(\n    (event: React.MouseEvent) => {\n      const halfWidth = (event.target as HTMLElement).offsetWidth / 2;\n      x.set(event.nativeEvent.offsetX - halfWidth);\n    },\n    [x]\n  );\n\n  const ChildComp = React.memo(() => {\n    if (!children) return <></>;\n\n    return (\n      <span\n        onMouseMove={handleMouseMove}\n        className={cn(\"ds:inline-block\", childClassName)}\n      >\n        {children}\n      </span>\n    );\n  });\n\n  if (animation === \"spec\") {\n    return (\n      <motion.div\n        className={cn(\"ds:relative ds:-me-2.5 ds:inline-block\", className)}\n        whileHover=\"hover\"\n        initial=\"initial\"\n      >\n        <motion.div\n          variants={{\n            initial: { opacity: 0, y: 20, scale: 0 },\n            hover: {\n              opacity: 1,\n              y: -5,\n              scale: 1,\n              transition: {\n                type: \"tween\",\n                duration: 0.2,\n                ease: \"easeOut\",\n              },\n            },\n          }}\n          style={{\n            translateX: translateX,\n            rotate: rotate,\n            whiteSpace: \"nowrap\",\n          }}\n          className={cn(\n            \"ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl\",\n            tooltipColor\n          )}\n        >\n          <div className=\"ds:relative ds:z-1\">{content}</div>\n        </motion.div>\n\n        <ChildComp />\n      </motion.div>\n    );\n  }\n\n  return (\n    <TooltipProvider delayDuration={delayDuration}>\n      <DsTooltip>\n        <TooltipTrigger asChild>{children}</TooltipTrigger>\n        <TooltipContent\n          {...props}\n          side={position}\n          sideOffset={sideOffset}\n          className={cn(tooltipAnimation?.className, tooltipColor, {\n            \"ds:[&>span>svg]:invisible\": noArrow,\n          })}\n        >\n          {content}\n        </TooltipContent>\n      </DsTooltip>\n    </TooltipProvider>\n  );\n});\n"],"names":["Tooltip","React","content","children","sideOffset","delayDuration","className","childClassName","position","noArrow","animation","props","springConfig","tooltipAnimation","useMemo","animationClass","tooltipColor","x","useMotionValue","rotate","useSpring","useTransform","translateX","handleMouseMove","useCallback","event","halfWidth","ChildComp","jsx","cn","Fragment","jsxs","motion","TooltipProvider","DsTooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Tooltip as DsTooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  type TooltipContentProps,\n} from \"@dsui/ui/components/tooltip\";\nimport { cn } from \"@dsui/ui/index\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport type { BasicAnimation, BasicColor } from \"@/types/variables\";\nimport { useMemo, useCallback } from \"react\";\nimport { animationClass } from \"@/utils/animations\";\n\ntype Color = BasicColor | \"dark\" | \"light\" | \"inverted\";\n\nexport type TooltipProps = TooltipContentProps & {\n  content: React.ReactNode;\n  children: React.ReactNode;\n  sideOffset?: number;\n  delayDuration?: number;\n  position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  className?: string;\n  childClassName?: string;\n  noArrow?: boolean;\n  animation?: BasicAnimation;\n  color?: Color;\n};\n\nexport const Tooltip = React.memo(function Tooltip({\n  content,\n  children,\n  sideOffset = 4,\n  delayDuration = 0,\n  className,\n  childClassName,\n  position = \"top\",\n  noArrow = false,\n  animation,\n  ...props\n}: TooltipProps) {\n  const springConfig = { stiffness: 100, damping: 5 };\n\n  const tooltipAnimation = useMemo<{ className?: string } | null>(() => {\n    return animationClass(animation, className);\n  }, [animation, className]);\n\n  const tooltipColor = useMemo<string>(() => {\n    switch (props.color) {\n      case \"primary\":\n        return \"ds:bg-primary ds:text-primary-foreground ds:[&>span>svg]:bg-primary ds:[&>span>svg]:fill-primary\";\n      case \"secondary\":\n        return \"ds:bg-secondary ds:text-secondary-foreground ds:[&>span>svg]:bg-secondary ds:[&>span>svg]:fill-secondary\";\n      case \"dark\":\n        return \"\";\n      case \"light\":\n        return \"ds:bg-neutral-200 ds:text-neutral-950 ds:[&_svg]:bg-neutral-200 ds:[&_svg]:fill-neutral-200\";\n      case \"inverted\":\n        return \"ds:dark:bg-white ds:dark:text-black ds:dark:[&_svg]:bg-white ds:dark:[&_svg]:fill-white\";\n      case \"success\":\n        return \"ds:bg-success ds:text-success-foreground ds:[&>span>svg]:bg-success ds:[&>span>svg]:fill-success\";\n      case \"warning\":\n        return \"ds:bg-warning ds:text-warning-foreground ds:[&>span>svg]:bg-warning ds:[&>span>svg]:fill-warning\";\n      case \"error\":\n        return \"ds:bg-error ds:text-error-foreground ds:[&>span>svg]:bg-error ds:[&>span>svg]:fill-error\";\n      case \"glass\":\n        return \"ds:bg-white/15 ds:text-foreground ds:backdrop-blur-sm ds:shadow-lg ds:[&>span>svg]:bg-white/15 ds:[&>span>svg]:fill-white/15\";\n      default:\n        return \"ds:bg-foreground ds:text-background ds:animate-in ds:fade-in-0 ds:zoom-in-95 ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=closed]:zoom-out-95 ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=left]:slide-in-from-right-2 ds:data-[side=right]:slide-in-from-left-2 ds:data-[side=top]:slide-in-from-bottom-2 ds:z-50 ds:w-fit ds:origin-(--radix-tooltip-content-transform-origin) ds:rounded-md ds:px-3 ds:py-1.5 ds:text-xs ds:text-balance\";\n    }\n  }, [props?.color]);\n\n  // on mouse move\n  const x = useMotionValue(0);\n  // rotate the tooltip\n  const rotate = useSpring(\n    useTransform(x, [-100, 100], [-45, 45]),\n    springConfig\n  );\n  // translate the tooltip\n  const translateX = useSpring(\n    useTransform(x, [-100, 100], [-50, 50]),\n    springConfig\n  );\n\n  const handleMouseMove = useCallback(\n    (event: React.MouseEvent) => {\n      const halfWidth = (event.target as HTMLElement).offsetWidth / 2;\n      x.set(event.nativeEvent.offsetX - halfWidth);\n    },\n    [x]\n  );\n\n  const ChildComp = React.memo(() => {\n    if (!children) return <></>;\n\n    return (\n      <span\n        onMouseMove={handleMouseMove}\n        className={cn(\"ds:inline-block\", childClassName)}\n      >\n        {children}\n      </span>\n    );\n  });\n\n  if (animation === \"spec\") {\n    return (\n      <motion.div\n        className={cn(\"ds:relative ds:-me-2.5 ds:inline-block\", className)}\n        whileHover=\"hover\"\n        initial=\"initial\"\n      >\n        <motion.div\n          variants={{\n            initial: { opacity: 0, y: 20, scale: 0 },\n            hover: {\n              opacity: 1,\n              y: -5,\n              scale: 1,\n              transition: {\n                type: \"tween\",\n                duration: 0.2,\n                ease: \"easeOut\",\n              },\n            },\n          }}\n          style={{\n            translateX: translateX,\n            rotate: rotate,\n            whiteSpace: \"nowrap\",\n          }}\n          className={cn(\n            \"ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl\",\n            tooltipColor\n          )}\n        >\n          <div className=\"ds:relative ds:z-1\">{content}</div>\n        </motion.div>\n\n        <ChildComp />\n      </motion.div>\n    );\n  }\n\n  return (\n    <TooltipProvider delayDuration={delayDuration}>\n      <DsTooltip>\n        <TooltipTrigger asChild>{children}</TooltipTrigger>\n        <TooltipContent\n          {...props}\n          side={position}\n          sideOffset={sideOffset}\n          className={cn(tooltipAnimation?.className, tooltipColor, {\n            \"ds:[&>span>svg]:invisible\": noArrow,\n          })}\n        >\n          {content}\n        </TooltipContent>\n      </DsTooltip>\n    </TooltipProvider>\n  );\n});\n"],"names":["Tooltip","React","content","children","sideOffset","delayDuration","className","childClassName","position","noArrow","animation","props","springConfig","tooltipAnimation","useMemo","animationClass","tooltipColor","x","useMotionValue","rotate","useSpring","useTransform","translateX","handleMouseMove","useCallback","event","halfWidth","ChildComp","jsx","cn","Fragment","jsxs","motion","TooltipProvider","DsTooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}