@deepnoid/ui 0.1.0 → 0.1.2

package/dist/chunk-RQ76IOYC.mjs

@@ -1,300 +0,0 @@
-"use client";
-import {
-  usePagination_default
-} from "./chunk-F3HENRVM.mjs";
-import {
-  input_default
-} from "./chunk-SK2A72R2.mjs";
-import {
-  tv
-} from "./chunk-IE2BRM7Z.mjs";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-
-// src/components/pagination/pagination.tsx
-import { forwardRef, useCallback, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Pagination = forwardRef((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, pagination.variantKeys);
-  const {
-    classNames,
-    currentPage,
-    groupSize,
-    totalPage,
-    showPageNumber = true,
-    showPageLabel,
-    showPageInput,
-    showFirstLastButtons,
-    handleChangePage
-  } = props;
-  const { startPage, endPage, pageList, handleClickMovePage } = usePagination_default({
-    currentPage,
-    totalPage,
-    groupSize,
-    handleChangePage
-  });
-  const slots = useMemo(() => pagination({ ...variantProps }), [variantProps]);
-  const getBaseProps = useCallback(() => ({ className: slots.base({ class: classNames == null ? void 0 : classNames.base }) }), [slots, classNames]);
-  const getLabelProps = useCallback(
-    () => ({ className: `${slots.label({ class: classNames == null ? void 0 : classNames.label })} + ${showPageInput && " !min-w-[55px]"}` }),
-    [slots, classNames, showPageInput]
-  );
-  const getWrapperProps = useCallback(
-    () => ({ className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }) }),
-    [slots, classNames]
-  );
-  const getIconProps = useCallback(() => ({ className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) }), [slots, classNames]);
-  const getButtonProps = useCallback(
-    () => ({ className: slots.button({ class: classNames == null ? void 0 : classNames.button }) }),
-    [slots, classNames]
-  );
-  const getLabelWrapperProps = useCallback(
-    () => ({
-      className: "flex shrink-0",
-      onSubmit: (e) => {
-        e.preventDefault();
-        if (showPageInput && handleChangePage) {
-          const formData = new FormData(e.target);
-          const page = formData.get("pagination-input");
-          if (page) handleChangePage(+page);
-        }
-      }
-    }),
-    [handleChangePage, showPageInput]
-  );
-  const getInputProps = useCallback(
-    () => ({
-      defaultValue: currentPage,
-      size: "sm",
-      name: "pagination-input",
-      type: "number",
-      max: totalPage,
-      min: 1,
-      classNames: { inputWrapper: "!w-[48px] h-[20px] px-[6px]", input: "input-arrow-hide" }
-    }),
-    [currentPage, totalPage]
-  );
-  return /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
-    showPageLabel && /* @__PURE__ */ jsx("span", { ...getLabelProps(), children: `${currentPage} of ${totalPage}` }),
-    /* @__PURE__ */ jsxs("form", { ...getLabelWrapperProps(), children: [
-      showPageInput && /* @__PURE__ */ jsx(input_default, { ...getInputProps() }, `${currentPage}+pagination-input`),
-      showPageLabel && /* @__PURE__ */ jsxs("span", { ...getLabelProps(), children: [
-        !showPageInput && currentPage,
-        ` of ${totalPage}`
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { ...getWrapperProps(), children: [
-      showFirstLastButtons && /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-label": "firstPage",
-          "data-is-active": currentPage > 1,
-          ...getIconProps(),
-          onClick: currentPage > 1 ? handleClickMovePage(1) : void 0,
-          children: "<<"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-label": "prevPage",
-          "data-is-active": currentPage > 1,
-          ...getIconProps(),
-          onClick: currentPage > 1 ? handleClickMovePage(currentPage - 1) : void 0,
-          children: "<"
-        }
-      ),
-      showPageNumber && pageList.map((page, index) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          ...getButtonProps(),
-          "data-selected": currentPage === page,
-          onClick: handleClickMovePage(page),
-          children: page
-        },
-        index
-      )),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-label": "nextPage",
-          "data-is-active": currentPage < totalPage,
-          ...getIconProps(),
-          onClick: currentPage < totalPage ? handleClickMovePage(currentPage + 1) : void 0,
-          children: ">"
-        }
-      ),
-      showFirstLastButtons && /* @__PURE__ */ jsx(
-        "div",
-        {
-          "aria-label": "lastPage",
-          "data-is-active": currentPage < totalPage,
-          ...getIconProps(),
-          onClick: currentPage < totalPage ? handleClickMovePage(totalPage) : void 0,
-          children: ">>"
-        }
-      ),
-      /* @__PURE__ */ jsxs("form", { ...getLabelWrapperProps(), children: [
-        showPageInput && /* @__PURE__ */ jsx(input_default, { ...getInputProps() }, `${currentPage}+pagination-input`),
-        showPageLabel && /* @__PURE__ */ jsxs("span", { ...getLabelProps(), children: [
-          !showPageInput && currentPage,
-          ` of ${totalPage}`
-        ] })
-      ] })
-    ] })
-  ] });
-});
-Pagination.displayName = "Pagination";
-var pagination_default = Pagination;
-var pagination = tv(
-  {
-    slots: {
-      base: "flex items-center select-none",
-      label: "text-primary-main text-right whitespace-nowrap",
-      wrapper: "flex overflow-hidden flex items-center",
-      icon: "flex items-center justify-center cursor-pointer",
-      button: "flex items-center justify-center cursor-pointer data-[selected=true]:font-[600] transition duration-200"
-    },
-    variants: {
-      variant: {
-        solid: {
-          button: ["text-neutral-dark"],
-          icon: "text-neutral-dark data-[is-active=false]:text-neutral-light data-[is-active=false]:cursor-default"
-        },
-        line: {
-          wrapper: "!gap-0",
-          button: ["text-foreground"],
-          icon: "text-foreground data-[is-active=false]:text-neutral-light data-[is-active=false]:cursor-default first-of-type:border-l-0"
-        }
-      },
-      size: {
-        sm: {
-          wrapper: "gap-[6px]",
-          label: "min-w-[85px] text-sm mr-[10px]",
-          icon: ["h-[15px] text-sm"],
-          button: ["min-w-[28px] h-[15px] text-sm"]
-        },
-        md: {
-          wrapper: "gap-[8px]",
-          label: "min-w-[95px] text-md mr-[12px]",
-          icon: ["h-[17px] text-md"],
-          button: ["min-w-[32px] h-[17px] text-md"]
-        },
-        lg: {
-          wrapper: "gap-[10px]",
-          label: "min-w-[105px] text-lg mr-[14px]",
-          icon: ["h-[20px] text-lg"],
-          button: ["min-w-[37px] h-[20px] text-lg"]
-        },
-        xl: {
-          wrapper: "gap-[10px]",
-          label: "min-w-[105px] text-lg mr-[14px]",
-          icon: ["h-[20px] text-lg"],
-          button: ["min-w-[37px] h-[20px] text-lg"]
-        }
-      },
-      color: {
-        primary: {
-          label: "text-primary-main"
-        },
-        secondary: {
-          label: "text-secondary-main"
-        }
-      },
-      isDisabled: {
-        true: {
-          icon: "!text-neutral-light !cursor-default",
-          button: "!text-neutral-light !cursor-default"
-        }
-      }
-    },
-    defaultVariants: {
-      variant: "solid",
-      color: "primary",
-      size: "md",
-      isDisabled: false
-    },
-    compoundVariants: [
-      {
-        variant: "solid",
-        color: "primary",
-        class: {
-          button: "hover:text-primary-main data-[selected=true]:text-primary-main data-[selected=true]:border-primary-main",
-          icon: "hover:text-primary-main"
-        }
-      },
-      {
-        variant: "solid",
-        color: "secondary",
-        class: {
-          button: "hover:text-secondary-main data-[selected=true]:text-secondary-main data-[selected=true]:border-secondary-main",
-          icon: "hover:text-secondary-main"
-        }
-      },
-      {
-        variant: "line",
-        size: "sm",
-        class: {
-          wrapper: "border rounded-sm gap-0",
-          button: "!min-w-[40px] h-[20px] border-l",
-          icon: "min-w-[40px] h-[20px] border-l"
-        }
-      },
-      {
-        variant: "line",
-        size: "md",
-        class: {
-          wrapper: "border rounded-md gap-0",
-          button: "!min-w-[45px] h-[22px] border-l",
-          icon: "min-w-[45px] h-[22px] border-l"
-        }
-      },
-      {
-        variant: "line",
-        size: "lg",
-        class: {
-          wrapper: "border rounded-lg gap-0",
-          button: "!min-w-[50px] h-[24px] border-l",
-          icon: "min-w-[50px] h-[24px] border-l"
-        }
-      },
-      {
-        variant: "line",
-        size: "xl",
-        class: {
-          wrapper: "border rounded-lg gap-0",
-          button: "!min-w-[50px] h-[24px] border-l",
-          icon: "min-w-[50px] h-[24px] border-l"
-        }
-      },
-      {
-        variant: "line",
-        color: "primary",
-        class: {
-          wrapper: "border-primary-main",
-          button: "border-primary-main hover:bg-primary-soft hover:text-primary-main data-[selected=true]:bg-primary-soft data-[selected=true]:text-primary-main",
-          icon: "border-primary-main data-[selected=true]:bg-primary-soft data-[selected=true]:text-primary-main data-[is-active=true]:hover:text-primary-main data-[is-active=true]:hover:bg-primary-soft"
-        }
-      },
-      {
-        variant: "line",
-        color: "secondary",
-        class: {
-          wrapper: "border-secondary-main",
-          button: "border-secondary-main hover:bg-secondary-soft hover:text-secondary-main data-[selected=true]:bg-secondary-soft data-[selected=true]:text-secondary-main",
-          icon: "border-secondary-main data-[selected=true]:bg-secondary-soft data-[selected=true]:text-secondary-main data-[is-active=true]:hover:text-secondary-main data-[is-active=true]:hover:bg-secondary-soft"
-        }
-      }
-    ]
-  },
-  {
-    twMerge: false
-  }
-);
-
-export {
-  Pagination,
-  pagination_default,
-  pagination
-};

package/dist/chunk-SK2A72R2.mjs

@@ -1,263 +0,0 @@
-"use client";
-import {
-  Icon_default
-} from "./chunk-24NQEB73.mjs";
-import {
-  tv
-} from "./chunk-IE2BRM7Z.mjs";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-
-// src/components/input/input.tsx
-import React, { forwardRef, useRef, useCallback, useMemo } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Input = forwardRef((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
-  const { classNames, label, errorMessage, startContent, endContent, ...inputProps } = props;
-  const inputRef = useRef(null);
-  const slots = useMemo(() => inputStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = useCallback(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = useCallback(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getInnerWrapperProps = useCallback(
-    () => ({
-      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getInputWrapperProps = useCallback(
-    () => ({
-      className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getInputProps = useCallback(
-    () => ({
-      ...inputProps,
-      ref: ref || inputRef,
-      className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
-      size: 0
-    }),
-    [slots, classNames, inputProps, ref]
-  );
-  const getContentProps = useCallback(
-    () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
-      size: originalProps.size
-    }),
-    [slots, classNames, originalProps.size]
-  );
-  const getErrorMessageProps = useCallback(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
-  );
-  const renderStartContent = () => {
-    if (React.isValidElement(startContent)) {
-      const existingProps = startContent.props;
-      const mergedProps = {
-        ...getContentProps(),
-        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
-      };
-      return React.cloneElement(startContent, mergedProps);
-    } else {
-      const contentProps = getContentProps();
-      return /* @__PURE__ */ jsx("div", { ...contentProps, children: startContent });
-    }
-  };
-  const renderDateTimePickerIcon = () => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...getContentProps(),
-      onClick: () => {
-        const target = ref && "current" in ref ? ref.current : inputRef.current;
-        target == null ? void 0 : target.focus();
-        target == null ? void 0 : target.showPicker();
-      },
-      children: /* @__PURE__ */ jsx(Icon_default, { name: props.type === "time" ? "clock" : "calendar", size: originalProps.size, className: "cursor-pointer" })
-    }
-  );
-  const renderContentWithIcon = () => {
-    if (React.isValidElement(endContent)) {
-      const existingProps = endContent.props;
-      const mergedProps = {
-        ...getContentProps(),
-        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
-      };
-      return React.cloneElement(endContent, mergedProps);
-    } else if (errorMessage) {
-      const iconProps = { ...getContentProps(), className: getContentProps().className };
-      return /* @__PURE__ */ jsx("div", { ...iconProps, children: /* @__PURE__ */ jsx(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
-    } else {
-      return /* @__PURE__ */ jsx(Fragment, {});
-    }
-  };
-  const renderEndContent = () => {
-    switch (props.type) {
-      case "date":
-      case "datetime-local":
-      case "month":
-      case "week":
-      case "time":
-        return renderDateTimePickerIcon();
-      default:
-        return renderContentWithIcon();
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { ...getBaseProps(), children: [
-    label && /* @__PURE__ */ jsx("label", { ...getLabelProps(), children: label }),
-    /* @__PURE__ */ jsxs("div", { ...getInnerWrapperProps(), children: [
-      /* @__PURE__ */ jsxs("div", { ...getInputWrapperProps(), children: [
-        startContent && renderStartContent(),
-        /* @__PURE__ */ jsx("input", { ...getInputProps() }),
-        renderEndContent()
-      ] }),
-      errorMessage && /* @__PURE__ */ jsx("p", { ...getErrorMessageProps(), children: errorMessage })
-    ] })
-  ] });
-});
-Input.displayName = "Input";
-var input_default = Input;
-var inputStyle = tv({
-  slots: {
-    base: ["group/input", "flex", "flex-col"],
-    label: ["flex", "items-center"],
-    innerWrapper: ["flex", "flex-col"],
-    inputWrapper: [
-      "flex",
-      "items-center",
-      "transition",
-      "duration-200",
-      "group-has-[p]/input:border-danger-main",
-      "group-has-[p]/input:bg-danger-soft"
-    ],
-    input: ["w-full", "h-full", "bg-transparent", "placeholder:text-neutral-main", "focus-visible:outline-none"],
-    content: ["flex", "items-center", "select-none", "group-has-[p]/input:text-danger-main"],
-    errorMessage: ["text-danger-main"]
-  },
-  variants: {
-    variant: {
-      solid: {
-        inputWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
-      },
-      normal: {
-        inputWrapper: [
-          "bg-transparent",
-          "border",
-          "border-neutral-main",
-          "hover:bg-trans-soft",
-          "has-[:focus]:bg-trans-soft"
-        ]
-      },
-      line: {
-        inputWrapper: [
-          "bg-transparent",
-          "border-b",
-          "border-neutral-main",
-          "!rounded-none",
-          "hover:bg-trans-soft",
-          "has-[:focus]:bg-trans-soft"
-        ]
-      }
-    },
-    color: {
-      primary: {
-        inputWrapper: ["has-[:focus]:border-primary-main"],
-        content: ["text-primary-main"]
-      },
-      secondary: {
-        inputWrapper: ["has-[:focus]:border-secondary-main"],
-        content: ["text-secondary-main"]
-      }
-    },
-    size: {
-      sm: {
-        base: ["text-sm", "gap-[6px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[6px]"],
-        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[6px]", "py-[4.5px]", "gap-[6px]"],
-        errorMessage: ["text-sm"]
-      },
-      md: {
-        base: ["text-md", "gap-[8px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[8px]"],
-        inputWrapper: ["w-[240px]", "h-[30px]", "rounded-md", "px-[8px]", "py-[6.5px]", "gap-[8px]"],
-        errorMessage: ["text-md"]
-      },
-      lg: {
-        base: ["text-lg", "gap-[10px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
-        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-lg", "px-[10px]", "py-[8px]", "gap-[10px]"],
-        errorMessage: ["text-lg"]
-      },
-      xl: {
-        base: ["text-xl", "gap-[10px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
-        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-xl", "px-[10px]", "py-[8px]", "gap-[10px]"],
-        errorMessage: ["text-xl"]
-      }
-    },
-    radius: {
-      default: "",
-      none: {
-        inputWrapper: ["rounded-none"]
-      },
-      full: {
-        inputWrapper: ["rounded-full"]
-      }
-    },
-    fullWidth: {
-      true: {
-        base: ["w-full"],
-        innerWrapper: ["flex-1"],
-        inputWrapper: ["w-full"]
-      }
-    },
-    isDisabled: {
-      true: {
-        label: ["text-neutral-light"],
-        inputWrapper: ["bg-neutral-soft", "border-neutral-light", "pointer-events-none"],
-        input: ["text-neutral-light", "placeholder:text-neutral-light"],
-        content: ["text-neutral-light", "group-has-[p]/input:text-danger-light"],
-        errorMessage: ["text-danger-light"]
-      }
-    },
-    isRequired: {
-      true: {
-        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    fullWidth: false,
-    isDisabled: false,
-    isRequired: false
-  },
-  compoundVariants: [
-    {
-      isDisabled: true,
-      isRequired: true,
-      class: {
-        label: ["after:text-danger-light"]
-      }
-    }
-  ]
-});
-
-export {
-  input_default,
-  inputStyle
-};