@duskmoon-dev/components 0.1.2

package/dist/components/dm-date-picker/index.js

@@ -0,0 +1,460 @@
+"use client";
+
+// src/components/date-picker/DatePicker.tsx
+import { forwardRef, useMemo, useState } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/date-picker.ts
+var datePickerBaseClass = "datepicker";
+var datePickerInputClass = "datepicker-input";
+var datePickerIconClass = "datepicker-icon";
+var datePickerDropdownClass = "datepicker-dropdown";
+var datePickerDropdownOpenClass = "datepicker-dropdown-open";
+var datePickerFooterClass = "datepicker-footer";
+var datePickerPresetClass = "datepicker-preset";
+var datePickerRangeClass = "datepicker-range";
+var datePickerSeparatorClass = "datepicker-range-separator";
+var datePickerClearClass = "datepicker-clear";
+var datePickerSizeClasses = {
+  sm: "datepicker-sm",
+  md: "",
+  lg: "datepicker-lg"
+};
+var datePickerStatusClasses = {
+  error: "datepicker-error",
+  success: "datepicker-success"
+};
+var datePickerPickerClasses = {
+  date: "",
+  week: "datepicker-week",
+  month: "datepicker-month-picker",
+  quarter: "datepicker-quarter-picker",
+  year: "datepicker-year-picker",
+  time: "datepicker-time-picker"
+};
+function getDatePickerClasses({
+  size = "md",
+  status,
+  picker = "date",
+  open,
+  disabled,
+  range,
+  className
+}) {
+  return cn(datePickerBaseClass, datePickerSizeClasses[size], status && datePickerStatusClasses[status], datePickerPickerClasses[picker], open && "datepicker-open", disabled && "datepicker-disabled", range && datePickerRangeClass, className);
+}
+function getDatePickerDropdownClasses({
+  open,
+  className
+}) {
+  return cn(datePickerDropdownClass, open && datePickerDropdownOpenClass, className);
+}
+
+// src/components/date-picker/DatePicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function todayValue(picker) {
+  const today = new Date;
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, "0");
+  const day = String(today.getDate()).padStart(2, "0");
+  if (picker === "month")
+    return `${year}-${month}`;
+  if (picker === "year")
+    return String(year);
+  if (picker === "time")
+    return "00:00";
+  return `${year}-${month}-${day}`;
+}
+function inputTypeForPicker(picker) {
+  if (picker === "month")
+    return "month";
+  if (picker === "week")
+    return "week";
+  if (picker === "time")
+    return "time";
+  return picker === "year" || picker === "quarter" ? "text" : "date";
+}
+function placeholderForPicker(picker) {
+  if (picker === "month")
+    return "Select month";
+  if (picker === "week")
+    return "Select week";
+  if (picker === "quarter")
+    return "Select quarter";
+  if (picker === "year")
+    return "Select year";
+  if (picker === "time")
+    return "Select time";
+  return "Select date";
+}
+function normalizeDateValue(value) {
+  return typeof value === "string" && value.length > 0 ? value : undefined;
+}
+var DatePickerRoot = forwardRef(({
+  allowClear,
+  className,
+  defaultOpen,
+  defaultValue,
+  disabled,
+  disabledDate,
+  onBlur,
+  onChange,
+  onFocus,
+  onOpenChange,
+  open,
+  picker = "date",
+  placeholder,
+  presets,
+  showNow,
+  size = "md",
+  status,
+  value,
+  ...props
+}, ref) => {
+  const isValueControlled = value !== undefined;
+  const isOpenControlled = open !== undefined;
+  const [innerValue, setInnerValue] = useState(() => normalizeDateValue(defaultValue));
+  const [innerOpen, setInnerOpen] = useState(Boolean(defaultOpen));
+  const currentValue = isValueControlled ? normalizeDateValue(value) : innerValue;
+  const visible = isOpenControlled ? Boolean(open) : innerOpen;
+  const inputType = inputTypeForPicker(picker);
+  function setVisible(nextOpen) {
+    if (!isOpenControlled) {
+      setInnerOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  function emitChange(nextValue) {
+    if (nextValue && disabledDate?.(nextValue)) {
+      return;
+    }
+    if (!isValueControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, nextValue ?? "");
+  }
+  const presetItems = useMemo(() => presets ?? [], [presets]);
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      open: visible,
+      disabled,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        className: datePickerInputClass,
+        disabled,
+        type: inputType,
+        value: currentValue ?? "",
+        placeholder: placeholder ?? placeholderForPicker(picker),
+        onFocus: (event) => {
+          onFocus?.(event);
+          setVisible(true);
+        },
+        onBlur: (event) => {
+          onBlur?.(event);
+          setVisible(false);
+        },
+        onChange: (event) => emitChange(event.currentTarget.value || undefined)
+      }),
+      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: datePickerClearClass,
+        "aria-label": "Clear date",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => emitChange(undefined),
+        children: "x"
+      }) : null,
+      /* @__PURE__ */ jsx("span", {
+        className: datePickerIconClass,
+        "aria-hidden": "true",
+        children: "calendar"
+      }),
+      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs("div", {
+        className: getDatePickerDropdownClasses({ open: visible }),
+        children: [
+          presetItems.map((preset, index) => /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: datePickerPresetClass,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => emitChange(preset.value),
+            children: preset.label
+          }, index)),
+          showNow ? /* @__PURE__ */ jsx("div", {
+            className: datePickerFooterClass,
+            children: /* @__PURE__ */ jsx("button", {
+              type: "button",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => emitChange(todayValue(picker)),
+              children: "Now"
+            })
+          }) : null
+        ]
+      }) : null
+    ]
+  });
+});
+DatePickerRoot.displayName = "DatePicker";
+var RangePicker = forwardRef(({
+  allowClear,
+  className,
+  defaultValue,
+  disabled,
+  disabledDate,
+  onChange,
+  picker = "date",
+  placeholder,
+  separator = "-",
+  size = "md",
+  status,
+  value,
+  ...props
+}, ref) => {
+  const isControlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(defaultValue ?? [undefined, undefined]);
+  const currentValue = isControlled ? value : innerValue;
+  const inputType = inputTypeForPicker(picker);
+  function emitChange(nextValue) {
+    if (nextValue.some((item) => item !== undefined && Boolean(disabledDate?.(item)))) {
+      return;
+    }
+    if (!isControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, [nextValue[0] ?? "", nextValue[1] ?? ""]);
+  }
+  function updateIndex(index, nextItem) {
+    emitChange(index === 0 ? [nextItem, currentValue?.[1]] : [currentValue?.[0], nextItem]);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      disabled,
+      range: true,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        className: datePickerInputClass,
+        disabled,
+        type: inputType,
+        value: currentValue?.[0] ?? "",
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : "Start date",
+        onChange: (event) => updateIndex(0, event.currentTarget.value || undefined)
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: datePickerSeparatorClass,
+        children: separator
+      }),
+      /* @__PURE__ */ jsx("input", {
+        className: datePickerInputClass,
+        disabled,
+        type: inputType,
+        value: currentValue?.[1] ?? "",
+        placeholder: Array.isArray(placeholder) ? placeholder[1] : "End date",
+        onChange: (event) => updateIndex(1, event.currentTarget.value || undefined)
+      }),
+      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: datePickerClearClass,
+        "aria-label": "Clear date range",
+        onClick: () => emitChange([undefined, undefined]),
+        children: "x"
+      }) : null
+    ]
+  });
+});
+RangePicker.displayName = "DatePicker.RangePicker";
+function withPicker(picker, displayName) {
+  const Picker = forwardRef((props, ref) => /* @__PURE__ */ jsx(DatePickerRoot, {
+    ...props,
+    ref,
+    picker
+  }));
+  Picker.displayName = displayName;
+  return Picker;
+}
+var DatePicker = Object.assign(DatePickerRoot, {
+  RangePicker,
+  WeekPicker: withPicker("week", "DatePicker.WeekPicker"),
+  MonthPicker: withPicker("month", "DatePicker.MonthPicker"),
+  QuarterPicker: withPicker("quarter", "DatePicker.QuarterPicker"),
+  YearPicker: withPicker("year", "DatePicker.YearPicker")
+});
+// src/components/dm-date-picker/DmDatePicker.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/classes/dm-date-picker.ts
+var dmDatePickerClass = "dm-date-picker";
+function getDmDatePickerClasses({ className }) {
+  return cn(dmDatePickerClass, className);
+}
+
+// src/infrastructure.ts
+import { useCallback, useState as useState2 } from "react";
+var primaryColor = "#0065ff";
+var prefixCls = "dm";
+var datePickerLocale = "en";
+var themeUpdateCallbacks = new Set;
+function emitThemeUpdate() {
+  for (const callback of themeUpdateCallbacks) {
+    callback();
+  }
+}
+function setDmPrefixCls(nextPrefixCls) {
+  prefixCls = nextPrefixCls;
+  emitThemeUpdate();
+}
+function setDmPrimaryColor(color) {
+  primaryColor = color;
+  emitThemeUpdate();
+}
+function onDmThemeUpdate(callback) {
+  themeUpdateCallbacks.add(callback);
+  return () => {
+    themeUpdateCallbacks.delete(callback);
+  };
+}
+function getDmTheme() {
+  return {
+    prefixCls,
+    token: {
+      colorInfo: primaryColor,
+      colorPrimary: primaryColor,
+      colorLink: primaryColor
+    },
+    components: {
+      Table: {
+        cellFontSizeSM: 12,
+        cellPaddingBlockSM: 10,
+        headerColor: "#5a607f"
+      },
+      Breadcrumb: {
+        linkColor: "#5a607f",
+        linkHoverColor: "#5a607f",
+        itemColor: "#5a607f",
+        lastItemColor: "#2f2e3f",
+        separatorColor: "#5a607f"
+      },
+      Menu: {
+        collapsedWidth: 60,
+        itemMarginBlock: 8,
+        itemMarginInline: 10,
+        itemPaddingInline: 10
+      },
+      Input: {
+        activeBorderColor: primaryColor
+      },
+      Tabs: {
+        inkBarColor: primaryColor,
+        itemSelectedColor: primaryColor
+      },
+      DatePicker: {
+        activeBorderColor: primaryColor
+      },
+      Tree: {
+        directoryNodeSelectedBg: primaryColor
+      },
+      Radio: {
+        buttonSolidCheckedBg: primaryColor
+      }
+    }
+  };
+}
+function setDmDatePickerLocale(locale) {
+  datePickerLocale = locale;
+}
+function getDmDatePickerLocale() {
+  return datePickerLocale;
+}
+
+// src/components/dm-date-picker/DmDatePicker.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function getDefaultPlaceholder(picker) {
+  const locale = getDmDatePickerLocale();
+  if (locale === "zh") {
+    if (picker === "month")
+      return "请选择月份";
+    if (picker === "year")
+      return "请选择年份";
+    if (picker === "week")
+      return "请选择周";
+    if (picker === "time")
+      return "请选择时间";
+    return "请选择日期";
+  }
+  return;
+}
+var DmDatePickerRoot = forwardRef2(({ className, placeholder, picker, ...props }, ref) => /* @__PURE__ */ jsx2(DatePicker, {
+  ...props,
+  ref,
+  picker,
+  placeholder: placeholder ?? getDefaultPlaceholder(picker),
+  className: getDmDatePickerClasses({ className })
+}));
+DmDatePickerRoot.displayName = "DmDatePicker";
+var DmRangePicker = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(DatePicker.RangePicker, {
+  ...props,
+  ref,
+  className: getDmDatePickerClasses({ className })
+}));
+DmRangePicker.displayName = "DmDatePicker.RangePicker";
+var DmDatePicker = DmDatePickerRoot;
+DmDatePicker.RangePicker = DmRangePicker;
+DmDatePicker.WeekPicker = forwardRef2((props, ref) => /* @__PURE__ */ jsx2(DmDatePicker, {
+  ...props,
+  ref,
+  picker: "week"
+}));
+DmDatePicker.MonthPicker = forwardRef2((props, ref) => /* @__PURE__ */ jsx2(DmDatePicker, {
+  ...props,
+  ref,
+  picker: "month"
+}));
+DmDatePicker.QuarterPicker = forwardRef2((props, ref) => /* @__PURE__ */ jsx2(DmDatePicker, {
+  ...props,
+  ref,
+  picker: "quarter"
+}));
+DmDatePicker.YearPicker = forwardRef2((props, ref) => /* @__PURE__ */ jsx2(DmDatePicker, {
+  ...props,
+  ref,
+  picker: "year"
+}));
+export {
+  setDmDatePickerLocale,
+  DmDatePicker
+};

package/dist/components/dm-drawer/DmDrawer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DmDrawerProps } from "./DmDrawer.types";
+export declare const DmDrawer: React.ForwardRefExoticComponent<Omit<DmDrawerProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/dm-drawer/DmDrawer.types.d.ts

@@ -0,0 +1,16 @@
+import type { MouseEvent, ReactNode } from "react";
+import type { ButtonProps } from "../button/Button.types";
+import type { DrawerProps } from "../drawer/Drawer.types";
+export interface DmDrawerProps extends Omit<DrawerProps, "className" | "closeIcon" | "footer" | "onClose"> {
+    className?: string;
+    closeIcon?: ReactNode;
+    footer?: ReactNode;
+    footerText?: ReactNode;
+    submitText?: ReactNode;
+    submitProps?: Omit<ButtonProps, "children" | "onClick">;
+    submitLoading?: boolean;
+    submitDisabled?: boolean;
+    footerAlign?: "left" | "center" | "right";
+    onSubmit?: () => void;
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+}

package/dist/components/dm-drawer/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./DmDrawer";
+export * from "./DmDrawer.types";