@deepnoid/ui 0.0.112 → 0.1.0

package/dist/chunk-2ALY3PH5.mjs

@@ -1,66 +0,0 @@
-"use client";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
-
-// src/components/card/card.tsx
-import { forwardRef, useMemo, useCallback } from "react";
-import { jsx } from "react/jsx-runtime";
-var Card = forwardRef((props, ref) => {
-  const { classNames, children, ...variantProps } = props;
-  const slots = useMemo(() => card({ ...variantProps }), [variantProps]);
-  const getBaseProps = useCallback(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  return /* @__PURE__ */ jsx("div", { ref, ...getBaseProps(), children });
-});
-Card.displayName = "Card";
-var card_default = Card;
-var card = tv({
-  slots: {
-    base: ["min-w-[100px]", "min-h-[100px]", "border", "border-trans-light", "rounded-xxlg", "bg-container"]
-  },
-  variants: {
-    variant: {
-      solid: {},
-      line: {}
-    },
-    color: {
-      primary: {},
-      secondary: {}
-    },
-    isPressable: {
-      true: {
-        base: ["cursor-pointer", "hover:shadow-drop", "hover:shadow-foreground/20", "transition duration-200"]
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    isPressable: false
-  },
-  compoundVariants: [
-    {
-      color: "primary",
-      isPressable: true,
-      class: {
-        base: ["hover:border-primary-main", "hover:bg-primary-soft"]
-      }
-    },
-    {
-      color: "secondary",
-      isPressable: true,
-      class: {
-        base: ["hover:border-secondary-main", "hover:bg-secondary-soft"]
-      }
-    }
-  ]
-});
-
-export {
-  card_default
-};

package/dist/chunk-A3RWT3JJ.mjs

@@ -1,197 +0,0 @@
-"use client";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
-
-// src/components/slider/slider.tsx
-import { forwardRef, useRef, useState, useEffect } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Slider = forwardRef((props, ref) => {
-  const { size, onChange, ...inputProps } = props;
-  const { base, trackWrapper, track, thumb, labelWrapper, label, filter } = slider({ ...props });
-  const min = props.min || 0;
-  const max = props.max || 0;
-  const [value, setValue] = useState(props.value || 0);
-  const [percentage, setPercentage] = useState(props.value || 0);
-  const [mouseStatus, setMouseStatus] = useState();
-  const THUMB_SIZE = props.size === "sm" ? 8 : props.size === "md" ? 10 : 12;
-  const trackRef = useRef(null);
-  const mouseStatusRef = useRef();
-  useEffect(() => {
-    const defaultValue = Math.min(Math.max(value, min), max);
-    const defaultPercentage = Math.floor(defaultValue / max * 100);
-    setPercentage(defaultPercentage);
-  }, [max, min, value]);
-  const handleMouseDown = () => {
-    mouseStatusRef.current = "DOWN";
-    setMouseStatus("DOWN");
-  };
-  const handleClickTrack = (event) => {
-    var _a;
-    if (!trackRef.current) return;
-    if (props.isDisabled) return;
-    const trackRect = trackRef.current.getBoundingClientRect();
-    const offsetX = event.clientX - trackRect.left;
-    const _percentage = Math.min(100, Math.max(0, offsetX / trackRect.width * 100));
-    const calculatedValue = Math.floor(_percentage / 100 * (max - min) + min);
-    setValue(calculatedValue);
-    setPercentage(_percentage);
-    (_a = props.onChange) == null ? void 0 : _a.call(props, calculatedValue);
-  };
-  useEffect(() => {
-    const handleMouseMove = (event) => {
-      var _a;
-      if (!props.isDisabled) {
-        if (mouseStatusRef.current === "DOWN" && trackRef.current) {
-          const trackRect = trackRef.current.getBoundingClientRect();
-          const offsetX = event.clientX - trackRect.left;
-          const _percentage = Math.min(100, Math.max(0, offsetX / trackRect.width * 100));
-          const calculatedValue = Math.floor(_percentage / 100 * (max - min) + min);
-          setPercentage(_percentage);
-          (_a = props.onChange) == null ? void 0 : _a.call(props, calculatedValue);
-        }
-      }
-    };
-    const handleMouseUp = () => {
-      mouseStatusRef.current = "UP";
-      setMouseStatus("UP");
-    };
-    const handleMouseLeave = () => {
-      mouseStatusRef.current = "UP";
-      setMouseStatus("UP");
-    };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-    document.addEventListener("mouseleave", handleMouseLeave);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.removeEventListener("mouseleave", handleMouseLeave);
-    };
-  }, [props.isDisabled]);
-  return /* @__PURE__ */ jsxs("div", { className: base(), children: [
-    /* @__PURE__ */ jsx("div", { className: labelWrapper(), children: props.label && /* @__PURE__ */ jsx("div", { className: label(), children: props.label }) }),
-    /* @__PURE__ */ jsxs("div", { className: trackWrapper(), onMouseDown: handleMouseDown, children: [
-      /* @__PURE__ */ jsx("div", { ref: trackRef, className: track(), onClick: handleClickTrack, children: /* @__PURE__ */ jsx("div", { className: filter(), style: { width: `${percentage}%` } }) }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-dragging": mouseStatus === "DOWN",
-          className: thumb(),
-          style: { left: `calc(${percentage}% - ${THUMB_SIZE / 2}px)` }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          className: "hidden",
-          type: "range",
-          min: props.min,
-          max: props.max,
-          value: props.value,
-          ...inputProps
-        }
-      )
-    ] })
-  ] });
-});
-Slider.displayName = "Slider";
-var slider_default = Slider;
-var slider = tv({
-  slots: {
-    base: "flex flex-col w-[200px]",
-    labelWrapper: "flex justify-between items-center",
-    label: "",
-    value: "",
-    trackWrapper: "relative flex flex-direction items-center",
-    track: ["flex", "w-full", "relative", "rounded-full", "bg-neutral-soft"],
-    filter: ["h-full", "absolute", "rounded-full"],
-    thumb: ["absolute", "flex", "justify-center", "items-center", "rounded-full"]
-  },
-  variants: {
-    size: {
-      sm: {
-        track: "h-[2px]",
-        thumb: ["w-[6px] h-[6px]", "hover:shadow-[0px_0px_0px_2px]"],
-        label: "text-sm",
-        value: "text-sm"
-      },
-      md: {
-        track: "h-[4px]",
-        thumb: ["w-[8px] h-[8px]", "hover:shadow-[0px_0px_0px_3px]"],
-        label: "text-md",
-        value: "text-md"
-      },
-      lg: {
-        track: "h-[6px]",
-        thumb: ["w-[12px] h-[12px]", "hover:shadow-[0px_0px_0px_4px]"],
-        label: "text-lg",
-        value: "text-lg"
-      }
-    },
-    color: {
-      primary: {
-        filter: "bg-primary-main",
-        thumb: "bg-primary-main"
-      },
-      secondary: {
-        filter: "bg-secondary-main",
-        thumb: "bg-secondary-main"
-      }
-    },
-    gradient: {
-      true: {
-        filter: ["bg-gradient-to-r", "from-primary-main", "to-secondary-main"]
-      }
-    },
-    fullWidth: {
-      true: {
-        base: "w-full"
-      }
-    },
-    hideThumb: {
-      true: {
-        thumb: "sr-only",
-        track: "overflow-hidden cursor-pointer"
-      }
-    },
-    isDisabled: {
-      false: {
-        thumb: ["cursor-grab", "data-[dragging=true]:cursor-grabbing"]
-      },
-      true: {
-        thumb: ["bg-neutral-light", "hover:shadow-none", "cursor-default"],
-        filter: ["bg-neutral-light", "from-none", "to-none", "cursor-default"]
-      }
-    }
-  },
-  compoundVariants: [
-    // filter boxShadow & color
-    {
-      isDisabled: false,
-      color: "primary",
-      class: {
-        thumb: "hover:shadow-primary-main/20"
-      }
-    },
-    {
-      isDisabled: false,
-      color: "secondary",
-      class: {
-        thumb: "data-[dragging=true]:shadow-secondary-main/20"
-      }
-    }
-  ],
-  defaultVariants: {
-    size: "md",
-    color: "primary",
-    hideThumb: false,
-    isDisabled: false
-  }
-});
-
-export {
-  slider_default,
-  slider
-};

package/dist/chunk-ANYPMQH4.mjs

@@ -1,200 +0,0 @@
-"use client";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-J725QONZ.mjs";
-
-// src/components/checkbox/checkbox.tsx
-import { forwardRef, useCallback, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var CheckBox = forwardRef((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, checkbox.variantKeys);
-  const { children, classNames, ...inputProps } = props;
-  const slots = useMemo(() => checkbox({ ...variantProps }), [...Object.values(variantProps)]);
-  const getBaseProps = useCallback(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getInputProps = useCallback(() => {
-    return {
-      ...inputProps,
-      type: "checkbox",
-      ref,
-      size: 0
-    };
-  }, [slots, classNames, inputProps]);
-  const getWrapperProps = useCallback(() => {
-    return {
-      className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper })
-    };
-  }, [slots, classNames]);
-  const getLabelProps = useCallback(() => {
-    return {
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    };
-  }, [classNames == null ? void 0 : classNames.label, slots]);
-  const getIconProps = useCallback(() => {
-    return {
-      isSelected: true,
-      className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
-    };
-  }, [slots, classNames]);
-  const CheckBoxIcon = (props2) => {
-    const { isSelected, ...otherProps } = props2;
-    return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", role: "presentation", viewBox: "0 0 17 18", ...otherProps, children: /* @__PURE__ */ jsx(
-      "polyline",
-      {
-        fill: "none",
-        points: "1 9 7 14 15 4",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeWidth: 3,
-        style: isSelected ? {
-          transition: "stroke-dashoffset 250ms linear 0.2s"
-        } : {}
-      }
-    ) });
-  };
-  return /* @__PURE__ */ jsxs("label", { ...getBaseProps(), children: [
-    /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx("input", { ...getInputProps() }) }),
-    /* @__PURE__ */ jsx("span", { ...getWrapperProps(), children: /* @__PURE__ */ jsx(CheckBoxIcon, { ...getIconProps() }) }),
-    children && /* @__PURE__ */ jsx("span", { ...getLabelProps(), children })
-  ] });
-});
-CheckBox.displayName = "CheckBox";
-var checkbox_default = CheckBox;
-var checkbox = tv({
-  slots: {
-    base: ["group", "relative", "inline-flex", "items-center", "cursor-pointer"],
-    wrapper: [
-      "relative",
-      "inline-flex",
-      "items-center",
-      "justify-center",
-      // before
-      "before:content-['']",
-      "before:absolute",
-      "before:inset-0",
-      "before:border-solid",
-      "before:border-[1px]",
-      "before:box-border",
-      "before:z-10",
-      "before:border-neutral-main",
-      // after
-      "after:content-['']",
-      "after:absolute",
-      "after:inset-0",
-      "after:scale-50",
-      "after:opacity-0",
-      "group-has-[:checked]:after:scale-100",
-      "group-has-[:checked]:after:opacity-100",
-      // hover
-      "group-hover:before:bg-neutral-soft",
-      "before:transition duration-200"
-    ],
-    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-white"],
-    label: ["relative", "text-foreground", "select-none"]
-  },
-  variants: {
-    color: {
-      primary: {
-        wrapper: ["group-has-[:checked]:before:border-primary-main", "group-has-[:checked]:before:bg-primary-main"]
-      },
-      secondary: {
-        wrapper: ["group-has-[:checked]:before:border-secondary-main", "group-has-[:checked]:before:bg-secondary-main"]
-      }
-    },
-    size: {
-      sm: {
-        wrapper: ["w-[15px]", "h-[15px]", "rounded-sm", "before:rounded-[3px]", "after:rounded-[3px]"],
-        label: ["text-sm", "ml-[6px]"],
-        icon: ["w-[10px]", "h-[10px]"]
-      },
-      md: {
-        wrapper: ["w-[17px]", "h-[17px]", "rounded-md", "before:rounded-[3px]", "after:rounded-[3px]"],
-        label: ["text-md", "ml-[8px]"],
-        icon: ["w-[12px]", "h-[12px]"]
-      },
-      lg: {
-        wrapper: ["w-[20px]", "h-[20px]", "rounded-lg", "before:rounded-[4px]", "after:rounded-[4px]"],
-        label: ["text-lg", "ml-[10px]"],
-        icon: ["w-[15px]", "h-[15px]"]
-      }
-    },
-    lineThrough: {
-      true: {
-        label: [
-          "inline-flex",
-          "items-center",
-          "justify-center",
-          "before:content-['']",
-          "before:absolute",
-          "before:bg-black",
-          "before:w-0",
-          "before:h-0.5",
-          "group-has-[:checked]:opacity-60",
-          "group-has-[:checked]:before:w-full"
-        ]
-      }
-    },
-    isInvalid: {
-      true: {
-        wrapper: [
-          "before:border-danger-main",
-          "group-has-[:checked]:before:bg-danger-main",
-          "group-has-[:checked]:before:border-danger-main"
-        ],
-        label: "text-danger-main"
-      }
-    },
-    isDisabled: {
-      true: {
-        base: "opacity-disabled pointer-events-none text-neutral-light",
-        wrapper: [
-          "after:bg-neutral-soft",
-          "before:border-neutral-light",
-          "before:bg-neutral-soft",
-          "group-has-[:checked]:before:bg-neutral-soft",
-          "group-has-[:checked]:before:border-neutral-light"
-        ],
-        label: "text-neutral-light",
-        icon: "text-neutral-light"
-      }
-    },
-    disableAnimation: {
-      true: {
-        wrapper: "transition-none",
-        icon: "transition-none",
-        label: "transition-none"
-      },
-      false: {
-        wrapper: [
-          "before:transition-colors",
-          "group-data-[pressed=true]:scale-95",
-          "transition-transform",
-          "after:transition-transform-opacity",
-          "after:!ease-linear",
-          "after:!duration-200",
-          "motion-reduce:transition-none"
-        ],
-        icon: ["transition-opacity", "motion-reduce:transition-none"],
-        label: ["transition-colors-opacity", "before:transition-width", "motion-reduce:transition-none"]
-      }
-    }
-  },
-  defaultVariants: {
-    color: "primary",
-    size: "md",
-    isDisabled: false,
-    lineThrough: false,
-    disableAnimation: false
-  }
-});
-
-export {
-  checkbox_default
-};