@deepnoid/ui 0.0.111 → 0.1.0

package/dist/chunk-VWMXZUR2.mjs

@@ -0,0 +1,82 @@
+"use client";
+import {
+  Icon_default
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+
+// src/components/breadcrumb/breadcrumb.tsx
+import { forwardRef, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BreadcrumbMenu = forwardRef(({ label, onClick, isCurrent, size }, ref) => {
+  const slots = useMemo(() => breadcrumbStyle({ size }), [size]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      onClick,
+      className: `${slots.content()} ${isCurrent ? "text-primary-main underline" : ""}`,
+      "aria-current": isCurrent ? "page" : void 0,
+      children: label
+    }
+  );
+});
+var Breadcrumb = forwardRef(({ startIconName, size, menus, classNames }, ref) => {
+  const slots = useMemo(() => breadcrumbStyle({ size }), [size]);
+  const renderMenus = (menus2) => menus2.map((menu, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-[5px]", children: [
+    /* @__PURE__ */ jsx(BreadcrumbMenu, { label: menu.label, onClick: menu.onClick, isCurrent: !menu.children, size }),
+    menu.children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Icon_default, { name: "right", className: slots.separator() }),
+      renderMenus(menu.children)
+    ] }) : index !== menus2.length - 1 && /* @__PURE__ */ jsx(Icon_default, { name: "right", className: slots.separator() })
+  ] }, `${menu.label}-${index}`));
+  return /* @__PURE__ */ jsx("nav", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxs("ul", { className: "flex items-center gap-1", children: [
+    startIconName && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Icon_default, { name: startIconName, fill: true, size, className: `${slots.icon()}` }) }),
+    renderMenus(menus)
+  ] }) });
+});
+Breadcrumb.displayName = "Breadcrumb";
+var breadcrumb_default = Breadcrumb;
+var breadcrumbStyle = tv({
+  slots: {
+    base: ["flex", "items-center"],
+    content: [
+      "text-neutral-main",
+      "flex",
+      "items-center",
+      "hover:underline",
+      "cursor-pointer",
+      "[line-height:initial]"
+    ],
+    icon: ["fill-primary-main", "text-primary-main", "stroke-primary-main"],
+    separator: ["stroke-neutral-main"]
+  },
+  variants: {
+    size: {
+      sm: {
+        base: "text-sm",
+        separator: "w-[18px] h-[18px]"
+      },
+      md: {
+        base: "text-md",
+        separator: "w-[21px] h-[21px]"
+      },
+      lg: {
+        base: "text-lg",
+        separator: "w-[24px] h-[24px]"
+      },
+      xl: {
+        base: "text-xl",
+        separator: "w-[27px] h-[27px]"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export {
+  breadcrumb_default
+};

package/dist/chunk-WQBOPCH6.mjs

@@ -0,0 +1,29 @@
+"use client";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+
+// src/components/backdrop/backdrop.tsx
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var Backdrop = ({ open }) => {
+  const [isVisible, setIsVisible] = useState(open);
+  useEffect(() => {
+    setIsVisible(open);
+  }, [open]);
+  if (!isVisible) return null;
+  const slots = backdropStyle();
+  return /* @__PURE__ */ jsx("div", { className: slots.base() });
+};
+Backdrop.displayName = "Backdrop";
+var backdrop_default = Backdrop;
+var backdropStyle = tv({
+  slots: {
+    base: ["fixed", "inset-0", "z-50", "bg-trans-strong"]
+  },
+  defaultVariants: {}
+});
+
+export {
+  backdrop_default
+};

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-X2MQCISM.mjs

@@ -0,0 +1,413 @@
+"use client";
+import {
+  ripple_default
+} from "./chunk-LXHUO6VM.mjs";
+import {
+  useRipple
+} from "./chunk-6PNKRBUT.mjs";
+import {
+  Icon_default
+} from "./chunk-24NQEB73.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+
+// src/components/button/button.tsx
+import React, { forwardRef, useMemo, useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Button = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, buttonStyle.variantKeys);
+  const { classNames, startContent, endContent, disableRipple, children, ...buttonProps } = props;
+  const slots = useMemo(() => buttonStyle({ ...variantProps }), [variantProps]);
+  const { onPress: onRipplePressHandler, onClear: onClearRipple, ripples } = useRipple();
+  const handlePress = useCallback(
+    (e) => {
+      if (disableRipple || originalProps.isDisabled) return;
+      onRipplePressHandler(e);
+    },
+    [disableRipple, originalProps.isDisabled, ref, onRipplePressHandler]
+  );
+  const mouseDownHandler = useCallback(
+    (e) => {
+      var _a;
+      (_a = buttonProps.onMouseDown) == null ? void 0 : _a.call(buttonProps, e);
+      if (disableRipple || originalProps.isDisabled) return;
+      handlePress(e);
+    },
+    [buttonProps.onMouseDown, disableRipple, originalProps.isDisabled, ref, onRipplePressHandler]
+  );
+  const getRippleProps = useCallback(
+    () => ({ ripples, onClear: onClearRipple }),
+    [ripples, onClearRipple]
+  );
+  const getBaseProps = useCallback(
+    () => ({
+      ...buttonProps,
+      onMouseDown: mouseDownHandler,
+      ref,
+      disabled: originalProps.isDisabled || originalProps.isLoading,
+      "data-loading": originalProps.isLoading,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
+    }),
+    [buttonProps, ref, originalProps.isDisabled, originalProps.isLoading, slots, classNames == null ? void 0 : classNames.base]
+  );
+  const getContentProps = useCallback(
+    () => ({
+      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      size: originalProps.size
+    }),
+    [slots, classNames, originalProps.size]
+  );
+  const renderContent = (content) => {
+    if (React.isValidElement(content)) {
+      const _content = content;
+      const existingProps = _content.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return React.cloneElement(content, mergedProps);
+    } else {
+      const contentProps = getContentProps();
+      return /* @__PURE__ */ jsx("div", { ...contentProps, children: content });
+    }
+  };
+  return /* @__PURE__ */ jsx("button", { ...getBaseProps(), children: originalProps.isLoading ? renderContent(/* @__PURE__ */ jsx(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    startContent && renderContent(startContent),
+    children,
+    endContent && renderContent(endContent),
+    !disableRipple && /* @__PURE__ */ jsx(ripple_default, { ...getRippleProps() })
+  ] }) });
+});
+Button.displayName = "Button";
+var button_default = Button;
+var buttonStyle = tv({
+  slots: {
+    base: "relative flex items-center justify-center whitespace-nowrap transition duration-200 select-none overflow-hidden box-border border border-transparent",
+    content: ""
+  },
+  variants: {
+    variant: {
+      solid: "",
+      soft: "",
+      outline: {
+        base: "bg-transparent border-transparent"
+      },
+      ghost: ""
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      neutral: "",
+      info: "",
+      success: "",
+      warning: "",
+      danger: ""
+    },
+    size: {
+      sm: {
+        base: "h-[24px] px-[8px] py-[3px] text-sm font-[700] rounded-sm gap-sm"
+      },
+      md: {
+        base: "h-[32px] px-[12px] py-[5.5px] text-md font-[700] rounded-md gap-md"
+      },
+      lg: {
+        base: "h-[40px] px-[16px] py-[8px] text-lg font-[700] rounded-lg gap-lg"
+      },
+      xl: {
+        base: "h-[50px] px-[20px] py-[11.5px] text-xl font-[700] rounded-xl gap-xl"
+      }
+    },
+    radius: {
+      default: {
+        base: ""
+      },
+      full: {
+        base: "rounded-full"
+      },
+      none: {
+        base: "rounded-none"
+      }
+    },
+    fullWidth: {
+      true: {
+        base: "w-full"
+      }
+    },
+    isLoading: {
+      true: {}
+    },
+    isDisabled: {
+      true: {
+        base: "!bg-neutral-soft !border-neutral-soft !text-neutral-light pointer-events-none"
+      }
+    },
+    isInGroup: {
+      true: {
+        base: "[&:not(:first-child):not(:last-child)]:rounded-none first:rounded-r-none last:rounded-l-none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid",
+    color: "primary",
+    fullWidth: false,
+    isDisabled: false,
+    isLoading: false,
+    isInGroup: false
+  },
+  compoundVariants: [
+    // solid & color
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: ["text-white", "bg-primary-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: ["text-white", "bg-secondary-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "neutral",
+      class: {
+        base: ["text-white", "bg-neutral-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "info",
+      class: {
+        base: ["text-white", "bg-info-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: ["text-white", "bg-success-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: ["text-white", "bg-warning-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: ["text-white", "bg-danger-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+      }
+    },
+    // soft & color
+    {
+      variant: "soft",
+      color: "primary",
+      class: {
+        base: ["text-primary-main", "bg-primary-soft", "border-primary-soft", "hover:border-primary-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "secondary",
+      class: {
+        base: ["text-secondary-main", "bg-secondary-soft", "border-secondary-soft", "hover:border-secondary-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "neutral",
+      class: {
+        base: ["text-neutral-main", "bg-neutral-soft", "border-neutral-soft", "hover:border-neutral-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "info",
+      class: {
+        base: ["text-info-main", "bg-info-soft", "border-info-soft", "hover:border-info-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "success",
+      class: {
+        base: ["text-success-main", "bg-success-soft", "border-success-soft", "hover:border-success-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "warning",
+      class: {
+        base: ["text-warning-main", "bg-warning-soft", "border-warning-soft", "hover:border-warning-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "danger",
+      class: {
+        base: ["text-danger-main", "bg-danger-soft", "border-danger-soft", "hover:border-danger-light"]
+      }
+    },
+    // outline & color
+    {
+      variant: "outline",
+      color: "primary",
+      class: {
+        base: ["bg-transparent", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "secondary",
+      class: {
+        base: ["bg-transparent", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "neutral",
+      class: {
+        base: ["bg-transparent", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "info",
+      class: {
+        base: ["bg-transparent", "border-info-main", "text-info-main", "hover:bg-info-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "success",
+      class: {
+        base: ["bg-transparent", "border-success-main", "text-success-main", "hover:bg-success-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "warning",
+      class: {
+        base: ["bg-transparent", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
+      }
+    },
+    {
+      variant: "outline",
+      color: "danger",
+      class: {
+        base: ["bg-transparent", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
+      }
+    },
+    // ghost & color
+    {
+      variant: "ghost",
+      color: "primary",
+      class: {
+        base: ["text-primary-main", "border-transparent", "hover:bg-primary-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "secondary",
+      class: {
+        base: ["text-secondary-main", "border-transparent", "hover:bg-secondary-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "neutral",
+      class: {
+        base: ["text-neutral-main", "border-transparent", "hover:bg-neutral-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "info",
+      class: {
+        base: ["text-info-main", "border-transparent", "hover:bg-info-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      class: {
+        base: ["text-success-main", "border-transparent", "hover:bg-success-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "warning",
+      class: {
+        base: ["text-warning-main", "border-transparent", "hover:bg-warning-soft"]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "danger",
+      class: {
+        base: ["text-danger-main", "border-transparent", "hover:bg-danger-soft"]
+      }
+    },
+    // variant && size
+    {
+      variant: ["soft", "outline"],
+      size: "sm",
+      class: {
+        base: "border-[1px]"
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "md",
+      class: {
+        base: "border-[1.25px]"
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "lg",
+      class: {
+        base: "border-[1.5px]"
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "xl",
+      class: {
+        base: "border-[1.75px]"
+      }
+    },
+    // variant && isDisabled
+    {
+      variant: ["soft", "ghost"],
+      isDisabled: true,
+      class: {
+        base: "!border-neutral-soft"
+      }
+    },
+    {
+      variant: ["outline"],
+      isDisabled: true,
+      class: {
+        base: "!border-neutral-light"
+      }
+    }
+  ]
+});
+
+export {
+  button_default
+};