@deepnoid/ui 0.0.112 → 0.1.0

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
+};

package/dist/chunk-XAA5KY6A.mjs

@@ -0,0 +1,63 @@
+"use client";
+import {
+  template
+} from "./chunk-P2TMIZRH.mjs";
+import {
+  tv
+} from "./chunk-IE2BRM7Z.mjs";
+
+// src/components/avatar/avatar.tsx
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var Avatar = forwardRef(
+  ({ variant = "square", size = "md", classNames, ...rest }, ref) => {
+    const SVGIcon = template["avatar"];
+    const slots = useMemo(() => avatarStyle({ variant, size }), [variant, size]);
+    return /* @__PURE__ */ jsx("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ jsx(SVGIcon, { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), ...rest }) });
+  }
+);
+Avatar.displayName = "Avatar";
+var avatar_default = Avatar;
+var avatarStyle = tv({
+  slots: {
+    base: ["w-fit", "h-fit", "flex", "items-center", "justify-center", "bg-neutral-soft", "overflow-hidden"],
+    content: []
+  },
+  variants: {
+    variant: {
+      square: {},
+      round: {}
+    },
+    size: {
+      sm: {
+        base: ["size-[20px]", "min-w-[20px]", "min-h-[20px]", "rounded-sm"]
+      },
+      md: {
+        base: ["size-[30px]", "min-w-[30px]", "min-h-[30px]", "rounded-md"]
+      },
+      lg: {
+        base: ["size-[40px]", "min-w-[40px]", "min-h-[40px]", "rounded-lg"]
+      },
+      xl: {
+        base: ["size-[50px]", "min-w-[50px]", "min-h-[50px]", "rounded-xl"]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "round",
+      size: ["sm", "md", "lg", "xl"],
+      className: {
+        base: ["rounded-full"]
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "square",
+    size: "md"
+  }
+});
+
+export {
+  avatar_default
+};