@deepnoid/ui 0.1.109 → 0.1.110

package/dist/chunk-ZSQQFMEC.mjs

@@ -1,366 +0,0 @@
-"use client";
-import {
-  calendar_default
-} from "./chunk-Y4W76B42.mjs";
-import {
-  timePicker_default
-} from "./chunk-X5XJWJSO.mjs";
-import {
-  useDatePicker
-} from "./chunk-FWJ2ZKH6.mjs";
-import {
-  Icon_default
-} from "./chunk-33DLD2L6.mjs";
-import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
-import {
-  tv
-} from "./chunk-CDXBML6O.mjs";
-
-// src/components/dateTimePicker/dateTimePicker.tsx
-import React, { forwardRef, useCallback, useMemo } from "react";
-import { createPortal } from "react-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DatePicker = forwardRef((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, dateTimePickerStyle.variantKeys);
-  const {
-    classNames,
-    label,
-    errorMessage,
-    startContent,
-    endContent,
-    type = "date",
-    value,
-    onChangeDate,
-    onChangeTime,
-    ...inputProps
-  } = props;
-  const slots = useMemo(() => dateTimePickerStyle({ ...variantProps }), [variantProps]);
-  const {
-    selectedDate,
-    selectedTime,
-    targetRect,
-    popupHeight,
-    isFocusInput,
-    datePickerRef,
-    dateInputRef,
-    datePickerWrapperRef,
-    handleToggleDatePicker,
-    handleChangeDate,
-    handleChangeTime,
-    handleFocusInput,
-    handleBlueInput,
-    calculatePositionWithScroll
-  } = useDatePicker({
-    initialDate: typeof value === "string" ? new Date(value) : void 0,
-    initialTime: typeof value === "string" ? value : void 0
-  });
-  const position = targetRect ? calculatePositionWithScroll(targetRect) : null;
-  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 }),
-      ref: datePickerRef
-    }),
-    [slots, classNames]
-  );
-  const getInputProps = useCallback(
-    () => ({
-      ...inputProps,
-      ref: ref || dateInputRef,
-      className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
-      size: 0,
-      type,
-      value: value !== void 0 ? value : type === "date" ? selectedDate || "" : type === "time" ? selectedTime || "" : "",
-      onChange: (e) => {
-        if (type === "date") {
-          handleChangeDate(e.target.value);
-          if (onChangeDate) {
-            onChangeDate(e.target.value);
-          }
-        } else if (type === "time") {
-          handleChangeTime(e.target.value);
-          if (onChangeTime) {
-            onChangeTime(e.target.value);
-          }
-        }
-      },
-      onFocus: (e) => {
-        handleFocusInput();
-      },
-      onBlur: (e) => {
-        handleBlueInput();
-      },
-      max: "9999-12-31"
-    }),
-    [inputProps, ref, dateInputRef, slots, classNames == null ? void 0 : classNames.input, selectedDate, selectedTime, type, value]
-  );
-  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: handleToggleDatePicker, children: /* @__PURE__ */ jsx(
-    Icon_default,
-    {
-      name: type === "time" ? "clock" : "calendar",
-      size: originalProps.size,
-      className: "cursor-pointer",
-      fill: type === "date"
-    }
-  ) });
-  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 (type) {
-      case "date":
-      case "datetime-local":
-      case "month":
-      case "week":
-      case "time":
-        return renderDateTimePickerIcon();
-      default:
-        return renderContentWithIcon();
-    }
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__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 })
-      ] })
-    ] }),
-    targetRect && /* @__PURE__ */ jsx(Fragment, { children: createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: datePickerWrapperRef,
-          style: {
-            position: "absolute",
-            top: (position == null ? void 0 : position.top) || -99999,
-            left: (position == null ? void 0 : position.left) || -99999,
-            zIndex: 1e3
-          },
-          children: [
-            type === "date" && /* @__PURE__ */ jsx(
-              calendar_default,
-              {
-                color: originalProps.color,
-                selectedDate,
-                highlightWeekend: originalProps.highlightWeekend,
-                onChangeDate: (date) => {
-                  handleChangeDate(date);
-                  if (onChangeDate) onChangeDate(date);
-                }
-              }
-            ),
-            type === "time" && /* @__PURE__ */ jsx(
-              timePicker_default,
-              {
-                color: originalProps.color,
-                selectedTime,
-                isFocusInput,
-                onChangeTime: (time) => {
-                  handleChangeTime(time);
-                  if (onChangeTime) onChangeTime(time);
-                }
-              }
-            )
-          ]
-        }
-      ),
-      document.body
-    ) })
-  ] });
-});
-DatePicker.displayName = "DatePicker";
-var dateTimePicker_default = DatePicker;
-var dateTimePickerStyle = tv({
-  slots: {
-    base: ["group/input", "flex", "flex-col", "inline-block"],
-    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"]
-      }
-    },
-    full: {
-      true: {
-        base: ["w-full"],
-        innerWrapper: ["flex-1"],
-        inputWrapper: ["w-full"]
-      }
-    },
-    disabled: {
-      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"],
-        errorMessage: ["text-danger-light"]
-      }
-    },
-    isRequired: {
-      true: {
-        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    full: false,
-    disabled: false,
-    isRequired: false
-  },
-  compoundVariants: [
-    {
-      disabled: true,
-      isRequired: true,
-      class: {
-        label: ["after:text-danger-light"]
-      }
-    }
-  ]
-});
-
-export {
-  dateTimePicker_default,
-  dateTimePickerStyle
-};

package/dist/components/dateTimePicker/calendar.d.mts

@@ -1,68 +0,0 @@
-import * as tailwind_variants from 'tailwind-variants';
-import { VariantProps } from 'tailwind-variants';
-import react__default, { ComponentProps } from 'react';
-import { SlotsToClasses } from '../../utils/types.mjs';
-
-interface Props extends Omit<ComponentProps<"input">, "size"> {
-    classNames?: SlotsToClasses<CalendarSlots>;
-    selectedDate?: string;
-    highlightWeekend?: boolean;
-    onChangeDate?: (date: string) => void;
-}
-type CalendarProps = Props & CalendarVariantProps;
-declare const Calendar: react__default.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & react__default.RefAttributes<any>>;
-
-declare const calendarStyle: tailwind_variants.TVReturnType<{
-    variant: {
-        solid: {};
-    };
-    color: {
-        primary: {
-            date: string[];
-        };
-        secondary: {
-            date: string[];
-        };
-    };
-}, {
-    base: string[];
-    dateTitle: string[];
-    date: string[];
-}, undefined, {
-    variant: {
-        solid: {};
-    };
-    color: {
-        primary: {
-            date: string[];
-        };
-        secondary: {
-            date: string[];
-        };
-    };
-}, {
-    base: string[];
-    dateTitle: string[];
-    date: string[];
-}, tailwind_variants.TVReturnType<{
-    variant: {
-        solid: {};
-    };
-    color: {
-        primary: {
-            date: string[];
-        };
-        secondary: {
-            date: string[];
-        };
-    };
-}, {
-    base: string[];
-    dateTitle: string[];
-    date: string[];
-}, undefined, unknown, unknown, undefined>>;
-type CalendarVariantProps = VariantProps<typeof calendarStyle>;
-type CalendarSlots = keyof ReturnType<typeof calendarStyle>;
-type CalendarReturnType = ReturnType<typeof calendarStyle>;
-
-export { type CalendarProps, type CalendarReturnType, type CalendarSlots, type CalendarVariantProps, type Props, calendarStyle, Calendar as default };

package/dist/components/dateTimePicker/calendar.d.ts

@@ -1,68 +0,0 @@
-import * as tailwind_variants from 'tailwind-variants';
-import { VariantProps } from 'tailwind-variants';
-import react__default, { ComponentProps } from 'react';
-import { SlotsToClasses } from '../../utils/types.js';
-
-interface Props extends Omit<ComponentProps<"input">, "size"> {
-    classNames?: SlotsToClasses<CalendarSlots>;
-    selectedDate?: string;
-    highlightWeekend?: boolean;
-    onChangeDate?: (date: string) => void;
-}
-type CalendarProps = Props & CalendarVariantProps;
-declare const Calendar: react__default.ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & react__default.RefAttributes<any>>;
-
-declare const calendarStyle: tailwind_variants.TVReturnType<{
-    variant: {
-        solid: {};
-    };
-    color: {
-        primary: {
-            date: string[];
-        };
-        secondary: {
-            date: string[];
-        };
-    };
-}, {
-    base: string[];
-    dateTitle: string[];
-    date: string[];
-}, undefined, {
-    variant: {
-        solid: {};
-    };
-    color: {
-        primary: {
-            date: string[];
-        };
-        secondary: {
-            date: string[];
-        };
-    };
-}, {
-    base: string[];
-    dateTitle: string[];
-    date: string[];
-}, tailwind_variants.TVReturnType<{
-    variant: {
-        solid: {};
-    };
-    color: {
-        primary: {
-            date: string[];
-        };
-        secondary: {
-            date: string[];
-        };
-    };
-}, {
-    base: string[];
-    dateTitle: string[];
-    date: string[];
-}, undefined, unknown, unknown, undefined>>;
-type CalendarVariantProps = VariantProps<typeof calendarStyle>;
-type CalendarSlots = keyof ReturnType<typeof calendarStyle>;
-type CalendarReturnType = ReturnType<typeof calendarStyle>;
-
-export { type CalendarProps, type CalendarReturnType, type CalendarSlots, type CalendarVariantProps, type Props, calendarStyle, Calendar as default };