@deepnoid/ui 0.0.112 → 0.1.1

package/dist/chunk-WSIADHVC.mjs

@@ -0,0 +1,126 @@
+"use client";
+
+// src/components/tooltip/tooltip-utils.ts
+var getTooltipPosition = (placement, targetRect, width, height, offset) => {
+  let tooltipX = 0, tooltipY = 0;
+  switch (placement) {
+    case "top":
+      tooltipX = targetRect.left + targetRect.width / 2 - width / 2;
+      tooltipY = targetRect.top - height - offset;
+      break;
+    case "left":
+      tooltipX = targetRect.left - width - offset;
+      tooltipY = targetRect.top + targetRect.height / 2 - height / 2;
+      break;
+    case "right":
+      tooltipX = targetRect.right + offset;
+      tooltipY = targetRect.top + targetRect.height / 2 - height / 2;
+      break;
+    case "bottom":
+      tooltipX = targetRect.left + targetRect.width / 2 - width / 2;
+      tooltipY = targetRect.bottom + offset;
+      break;
+    case "top-start":
+      tooltipX = targetRect.left;
+      tooltipY = targetRect.top - height - offset;
+      break;
+    case "top-end":
+      tooltipX = targetRect.right - width;
+      tooltipY = targetRect.top - height - offset;
+      break;
+    case "bottom-start":
+      tooltipX = targetRect.left;
+      tooltipY = targetRect.bottom + offset;
+      break;
+    case "bottom-end":
+      tooltipX = targetRect.right - width;
+      tooltipY = targetRect.bottom + offset;
+      break;
+    case "left-start":
+      tooltipX = targetRect.left - width - offset;
+      tooltipY = targetRect.top;
+      break;
+    case "left-end":
+      tooltipX = targetRect.left - width - offset;
+      tooltipY = targetRect.bottom - height;
+      break;
+    case "right-start":
+      tooltipX = targetRect.right + offset;
+      tooltipY = targetRect.top;
+      break;
+    case "right-end":
+      tooltipX = targetRect.right + offset;
+      tooltipY = targetRect.bottom - height;
+      break;
+  }
+  return { tooltipX, tooltipY };
+};
+var OFFSET = -4;
+var EDGE_GAP = 12;
+var getTailClassName = (placement) => {
+  switch (placement) {
+    case "top":
+      return `bottom-[${OFFSET}px] left-1/2 -translate-x-1/2`;
+    case "bottom":
+      return `top-[${OFFSET}px] left-1/2 -translate-x-1/2`;
+    case "left":
+      return `right-[${OFFSET}px] top-1/2 -translate-y-1/2`;
+    case "right":
+      return `left-[${OFFSET}px] top-1/2 -translate-y-1/2`;
+    case "top-start":
+      return `bottom-[${OFFSET}px] left-[${EDGE_GAP}px]`;
+    case "top-end":
+      return `bottom-[${OFFSET}px] right-[${EDGE_GAP}px]`;
+    case "bottom-start":
+      return `top-[${OFFSET}px] left-[${EDGE_GAP}px]`;
+    case "bottom-end":
+      return `top-[${OFFSET}px] right-[${EDGE_GAP}px]`;
+    case "left-start":
+      return `right-[${OFFSET}px] top-[${EDGE_GAP}px]`;
+    case "left-end":
+      return `right-[${OFFSET}px] bottom-[${EDGE_GAP}px]`;
+    case "right-start":
+      return `left-[${OFFSET}px] top-[${EDGE_GAP}px]`;
+    case "right-end":
+      return `left-[${OFFSET}px] bottom-[${EDGE_GAP}px]`;
+    default:
+      return "";
+  }
+};
+var getTailStyles = (placement) => {
+  switch (placement) {
+    case "top":
+      return { bottom: OFFSET };
+    case "bottom":
+      return { top: OFFSET };
+    case "left":
+      return { right: OFFSET };
+    case "right":
+      return { left: OFFSET };
+    case "top-start":
+      return { bottom: OFFSET, left: EDGE_GAP };
+    case "top-end":
+      return { bottom: OFFSET, right: EDGE_GAP };
+    case "bottom-start":
+      return { top: OFFSET, left: EDGE_GAP };
+    case "bottom-end":
+      return { top: OFFSET, right: EDGE_GAP };
+    case "left-start":
+      return { right: OFFSET, top: EDGE_GAP };
+    case "left-end":
+      return { right: OFFSET, bottom: EDGE_GAP };
+    case "right-start":
+      return { left: OFFSET, top: EDGE_GAP };
+    case "right-end":
+      return { left: OFFSET, bottom: EDGE_GAP };
+    default:
+      console.warn(`Invalid placement: ${placement}. Returning empty style.`);
+      return {};
+  }
+};
+
+export {
+  getTooltipPosition,
+  getTailClassName,
+  getTailStyles
+};

package/dist/{chunk-PXUBPWKU.mjs → chunk-XIHAABHB.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/toast/toast.tsx
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from "react";

package/dist/{chunk-BCN5F2MN.mjs → chunk-YCMZELLD.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   list_default
-} from "./chunk-EYY4CRRR.mjs";
+} from "./chunk-VVOOYDJS.mjs";
 import {
   listItem_default
-} from "./chunk-V77MALL4.mjs";
+} from "./chunk-AYWI2CRE.mjs";
 
 // src/components/dateTimePicker/timePicker.tsx
 import { useState, useRef, useEffect } from "react";

package/dist/{chunk-RZZWHI6O.mjs → chunk-YZNQ2QGK.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-LCI6RPWE.mjs";
+} from "./chunk-24NQEB73.mjs";
 import {
   tv
-} from "./chunk-J725QONZ.mjs";
+} from "./chunk-2ZT6V4QR.mjs";
 
 // src/components/select/option.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,7 +16,9 @@ var Option = (props) => {
       title: props.option.value,
       className: base(),
       onClick: () => props.onClick(props.option),
-      ref: (node) => props.isSelected && (node == null ? void 0 : node.scrollIntoView()),
+      ref: (node) => {
+        props.isSelected && (node == null ? void 0 : node.scrollIntoView());
+      },
       children: [
         /* @__PURE__ */ jsx("div", { className: option(), children: props.children }),
         props.isSelected && /* @__PURE__ */ jsx("div", { className: icon(), children: /* @__PURE__ */ jsx(Icon_default, { name: "check", size: props.size }) })
@@ -56,6 +58,9 @@ var optionStyle = tv({
       },
       lg: {
         base: "text-lg px-[10px] py-[8px]"
+      },
+      xl: {
+        base: "text-xl px-[10px] py-[8px]"
       }
     }
   },

package/dist/chunk-Z74QNVPG.mjs

@@ -0,0 +1,127 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/switch/switch.tsx
+import { forwardRef, useMemo } from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Switch = forwardRef((originalProps, ref) => {
+  const [rawProps, variantProps] = mapPropsVariants(originalProps, switchStyle.variantKeys);
+  const { size, color, isDisabled, disableAnimation, id, classNames, ...inputProps } = { ...rawProps, ...variantProps };
+  const slots = useMemo(() => switchStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ jsxs("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ jsx("input", { ...inputProps, id, ref, type: "checkbox", disabled: isDisabled, className: "hidden" }),
+    /* @__PURE__ */ jsx("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ jsx("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ jsx("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
+  ] });
+});
+Switch.displayName = "Switch";
+var switch_default = Switch;
+var switchStyle = tv({
+  slots: {
+    base: ["group/switch", "relative", "max-w-fit", "inline-flex", "items-center", "justify-start", "cursor-pointer"],
+    outerWrapper: [
+      "relative",
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "flex-shrink-0",
+      "bg-neutral-soft",
+      "overflow-hidden",
+      "rounded-full"
+    ],
+    wrapper: [
+      "relative",
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "flex-shrink-0",
+      "overflow-hidden",
+      "bg-neutral-light",
+      "rounded-full"
+    ],
+    thumb: [
+      "z-10",
+      "flex",
+      "items-center",
+      "justify-center",
+      "bg-white",
+      "shadow-small",
+      "rounded-full",
+      "origin-right"
+    ]
+  },
+  variants: {
+    size: {
+      sm: {
+        outerWrapper: ["w-[32px]", "h-[16px]", "p-[2px]"],
+        wrapper: ["w-[28px]", "h-[12px]", "p-[2px]"],
+        thumb: ["w-[8px]", "h-[8px]", "group-has-[:checked]/switch:ml-[16px]"]
+      },
+      md: {
+        outerWrapper: ["w-[48px]", "h-[24px]", "px-[3px]"],
+        wrapper: ["w-[42px]", "h-[16px]", "px-[3px]"],
+        thumb: ["w-[12px]", "h-[12px]", "group-has-[:checked]/switch:ml-[24px]"]
+      },
+      lg: {
+        outerWrapper: ["w-[64px]", "h-[32px]", "px-[4px]"],
+        wrapper: ["w-[56px]", "h-[24px]", "px-[4px]"],
+        thumb: ["w-[16px]", "h-[16px]", "group-has-[:checked]/switch:ml-[32px]"]
+      },
+      xl: {
+        outerWrapper: ["w-[80px]", "h-[40px]", "px-[5px]"],
+        wrapper: ["w-[70px]", "h-[30px]", "px-[5px]"],
+        thumb: ["w-[20px]", "h-[20px]", "group-has-[:checked]/switch:ml-[40px]"]
+      }
+    },
+    color: {
+      primary: {},
+      secondary: {}
+    },
+    isDisabled: {
+      true: {
+        base: ["!pointer-events-none"],
+        outerWrapper: ["!bg-neutral-soft"],
+        wrapper: ["!bg-neutral-light", "!group-has-[:checked]/switch:bg-neutral-light", "!hover:bg-neutral-light"],
+        thumb: ["!bg-trans-light"]
+      }
+    },
+    disableAnimation: {
+      true: {
+        wrapper: ["transition-none"],
+        thumb: ["transition-none"]
+      },
+      false: {
+        wrapper: ["transition-background"],
+        thumb: ["transition-all"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      class: {
+        outerWrapper: ["group-has-[:checked]/switch:bg-primary-light"],
+        wrapper: ["group-has-[:checked]/switch:bg-primary-main", "hover:bg-primary-light"]
+      }
+    },
+    {
+      color: "secondary",
+      class: {
+        outerWrapper: ["group-has-[:checked]/switch:bg-secondary-light"],
+        wrapper: ["group-has-[:checked]/switch:bg-secondary-main", "hover:bg-secondary-light"]
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    isDisabled: false,
+    disableAnimation: false
+  }
+});
+
+export {
+  switch_default
+};

package/dist/{chunk-KRI5IALM.mjs → chunk-ZEZ6ZA3N.mjs}

@@ -1,10 +1,10 @@
 "use client";
+import {
+  tv
+} from "./chunk-2ZT6V4QR.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
 
 // src/components/tabs/tabs.tsx
 import { forwardRef, useCallback, useMemo, useState } from "react";
@@ -123,6 +123,9 @@ var tabs = tv({
       },
       lg: {
         tab: "w-[140px] h-[36px] text-lg"
+      },
+      xl: {
+        tab: "w-[140px] h-[36px] text-xl"
       }
     },
     fullWidth: {

package/dist/{chunk-KCBBBRSF.mjs → chunk-ZMOAFSYE.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   getTooltipPosition
-} from "./chunk-ODMRJXLJ.mjs";
+} from "./chunk-WSIADHVC.mjs";
 
 // src/components/tooltip/useTooltip.ts
 import { useState, useEffect, useRef } from "react";

package/dist/components/avatar/avatar.d.mts

@@ -0,0 +1,80 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { SlotsToClasses } from '../../utils/types.mjs';
+
+interface AvatarProps extends VariantProps<typeof avatarStyle> {
+    classNames?: SlotsToClasses<AvatarSlots>;
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const avatarStyle: tailwind_variants.TVReturnType<{
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, undefined, {
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, undefined, unknown, unknown, undefined>>;
+type AvatarSlots = keyof ReturnType<typeof avatarStyle>;
+
+export { type AvatarProps, Avatar as default };

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,80 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react from 'react';
+import { SlotsToClasses } from '../../utils/types.js';
+
+interface AvatarProps extends VariantProps<typeof avatarStyle> {
+    classNames?: SlotsToClasses<AvatarSlots>;
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const avatarStyle: tailwind_variants.TVReturnType<{
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, undefined, {
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, tailwind_variants.TVReturnType<{
+    variant: {
+        square: {};
+        round: {};
+    };
+    size: {
+        sm: {
+            base: string[];
+        };
+        md: {
+            base: string[];
+        };
+        lg: {
+            base: string[];
+        };
+        xl: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    content: never[];
+}, undefined, unknown, unknown, undefined>>;
+type AvatarSlots = keyof ReturnType<typeof avatarStyle>;
+
+export { type AvatarProps, Avatar as default };