@duskmoon-dev/components 0.1.2

package/dist/components/color-picker/index.js

@@ -0,0 +1,282 @@
+"use client";
+
+// src/components/color-picker/ColorPicker.tsx
+import { forwardRef, 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/color-picker.ts
+var colorPickerBaseClass = "color-picker";
+var colorPickerSwatchClass = "color-picker-swatch";
+var colorPickerTextClass = "color-picker-text";
+var colorPickerPanelClass = "color-picker-panel popover popover-show";
+var colorPickerInputClass = "color-picker-input input";
+var colorPickerPresetsClass = "color-picker-presets";
+var colorPickerPresetClass = "color-picker-preset";
+var colorPickerPresetLabelClass = "color-picker-preset-label";
+var colorPickerPresetColorsClass = "color-picker-preset-colors";
+var colorPickerSizeClasses = {
+  small: "color-picker-sm",
+  middle: "color-picker-md",
+  large: "color-picker-lg",
+  sm: "color-picker-sm",
+  md: "color-picker-md",
+  lg: "color-picker-lg"
+};
+var colorPickerTriggerClasses = {
+  hover: "color-picker-trigger-hover",
+  click: "color-picker-trigger-click"
+};
+var colorPickerFormatClasses = {
+  hex: "color-picker-format-hex",
+  rgb: "color-picker-format-rgb",
+  hsb: "color-picker-format-hsb"
+};
+function getColorPickerClasses({
+  size = "middle",
+  trigger = "click",
+  format = "hex",
+  disabled,
+  open,
+  className
+}) {
+  return cn(colorPickerBaseClass, colorPickerSizeClasses[size], colorPickerTriggerClasses[trigger], colorPickerFormatClasses[format], disabled && "color-picker-disabled", open && "color-picker-open", className);
+}
+
+// src/components/color-picker/ColorPicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function componentToHex(value) {
+  return clamp(Math.round(value), 0, 255).toString(16).padStart(2, "0");
+}
+function isRgb(value) {
+  return typeof value === "object" && value !== null && "r" in value;
+}
+function isHsb(value) {
+  return typeof value === "object" && value !== null && "h" in value;
+}
+function hsbToRgb(value) {
+  const h = (value.h % 360 + 360) % 360;
+  const s = clamp(value.s, 0, 100) / 100;
+  const brightness = clamp(value.b, 0, 100) / 100;
+  const c = brightness * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = brightness - c;
+  const [r2, g, b] = h < 60 ? [c, x, 0] : h < 120 ? [x, c, 0] : h < 180 ? [0, c, x] : h < 240 ? [0, x, c] : h < 300 ? [x, 0, c] : [c, 0, x];
+  return {
+    r: (r2 + m) * 255,
+    g: (g + m) * 255,
+    b: (b + m) * 255,
+    a: value.a
+  };
+}
+function colorToRgb(value) {
+  if (isRgb(value))
+    return value;
+  if (isHsb(value))
+    return hsbToRgb(value);
+  const normalized = value.trim();
+  if (normalized.startsWith("#")) {
+    const hex = normalized.slice(1);
+    const fullHex = hex.length === 3 ? hex.split("").map((item) => item + item).join("") : hex.padEnd(6, "0").slice(0, 6);
+    return {
+      r: Number.parseInt(fullHex.slice(0, 2), 16),
+      g: Number.parseInt(fullHex.slice(2, 4), 16),
+      b: Number.parseInt(fullHex.slice(4, 6), 16)
+    };
+  }
+  const match = normalized.match(/rgba?\(([^)]+)\)/i);
+  if (match) {
+    const [r2, g, b, a] = match[1].split(",").map((part) => Number(part.trim()));
+    return { r: r2, g, b, a };
+  }
+  return { r: 0, g: 0, b: 0 };
+}
+function colorToCss(value, format) {
+  const rgb = colorToRgb(value);
+  if (format === "rgb") {
+    return rgb.a !== undefined ? `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a})` : `rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`;
+  }
+  if (format === "hsb" && isHsb(value)) {
+    return `hsb(${Math.round(value.h)}, ${Math.round(value.s)}%, ${Math.round(value.b)}%)`;
+  }
+  return `#${componentToHex(rgb.r)}${componentToHex(rgb.g)}${componentToHex(rgb.b)}`;
+}
+function parseInput(value, format) {
+  if (format === "rgb") {
+    const rgb = colorToRgb(value);
+    return {
+      r: Math.round(rgb.r),
+      g: Math.round(rgb.g),
+      b: Math.round(rgb.b),
+      a: rgb.a
+    };
+  }
+  return value;
+}
+var ColorPicker = forwardRef(({
+  className,
+  defaultOpen,
+  defaultValue = "#1677ff",
+  disabled,
+  format = "hex",
+  onChange,
+  onChangeComplete,
+  onFormatChange,
+  onOpenChange,
+  open,
+  panelRender,
+  presets,
+  showText,
+  size = "middle",
+  trigger = "click",
+  value,
+  ...props
+}, ref) => {
+  const valueControlled = value !== undefined;
+  const openControlled = open !== undefined;
+  const [innerValue, setInnerValue] = useState(defaultValue);
+  const [innerOpen, setInnerOpen] = useState(Boolean(defaultOpen));
+  const currentValue = valueControlled ? value : innerValue;
+  const visible = openControlled ? Boolean(open) : innerOpen;
+  const cssValue = colorToCss(currentValue, format);
+  function setVisible(nextOpen) {
+    if (disabled)
+      return;
+    if (!openControlled) {
+      setInnerOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  function emitChange(nextValue) {
+    const css = colorToCss(nextValue, format);
+    if (!valueControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, css);
+    onChangeComplete?.(nextValue, css);
+  }
+  const panel = /* @__PURE__ */ jsxs("div", {
+    className: colorPickerPanelClass,
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        className: colorPickerInputClass,
+        "aria-label": "Color value",
+        value: cssValue,
+        onChange: (event) => emitChange(parseInput(event.currentTarget.value, format))
+      }),
+      presets?.length ? /* @__PURE__ */ jsx("div", {
+        className: colorPickerPresetsClass,
+        children: presets.map((preset, presetIndex) => /* @__PURE__ */ jsxs("div", {
+          className: colorPickerPresetClass,
+          children: [
+            preset.label ? /* @__PURE__ */ jsx("div", {
+              className: colorPickerPresetLabelClass,
+              children: preset.label
+            }) : null,
+            /* @__PURE__ */ jsx("div", {
+              className: colorPickerPresetColorsClass,
+              children: preset.colors.map((presetColor, colorIndex) => {
+                const presetCss = colorToCss(presetColor, format);
+                return /* @__PURE__ */ jsx("button", {
+                  type: "button",
+                  "aria-label": `Select color ${presetCss}`,
+                  className: colorPickerSwatchClass,
+                  style: { backgroundColor: colorToCss(presetColor, "hex") },
+                  onClick: () => emitChange(presetColor)
+                }, `${presetIndex}-${colorIndex}`);
+              })
+            })
+          ]
+        }, presetIndex))
+      }) : null
+    ]
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getColorPickerClasses({
+      size,
+      trigger,
+      format,
+      disabled,
+      open: visible,
+      className
+    }),
+    onMouseEnter: () => {
+      if (trigger === "hover")
+        setVisible(true);
+    },
+    onMouseLeave: () => {
+      if (trigger === "hover")
+        setVisible(false);
+    },
+    children: [
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: colorPickerSwatchClass,
+        "aria-label": "Open color picker",
+        disabled,
+        style: { backgroundColor: colorToCss(currentValue, "hex") },
+        onClick: () => {
+          if (trigger === "click")
+            setVisible(!visible);
+        }
+      }),
+      showText ? /* @__PURE__ */ jsx("span", {
+        className: colorPickerTextClass,
+        children: typeof showText === "function" ? showText(cssValue) : cssValue
+      }) : null,
+      /* @__PURE__ */ jsxs("select", {
+        "aria-label": "Color format",
+        value: format,
+        disabled,
+        onChange: (event) => onFormatChange?.(event.currentTarget.value),
+        children: [
+          /* @__PURE__ */ jsx("option", {
+            value: "hex",
+            children: "hex"
+          }),
+          /* @__PURE__ */ jsx("option", {
+            value: "rgb",
+            children: "rgb"
+          }),
+          /* @__PURE__ */ jsx("option", {
+            value: "hsb",
+            children: "hsb"
+          })
+        ]
+      }),
+      visible ? panelRender?.(panel) ?? panel : null
+    ]
+  });
+});
+ColorPicker.displayName = "ColorPicker";
+export {
+  ColorPicker
+};

package/dist/components/config-provider/ConfigProvider.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ConfigProviderComponent, ConfigProviderContextValue } from "./ConfigProvider.types";
+export declare const ConfigContext: React.Context<ConfigProviderContextValue | undefined>;
+export declare const ConfigProvider: ConfigProviderComponent;

package/dist/components/config-provider/ConfigProvider.types.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithoutRef, Context, ElementType, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type ConfigDirection = "ltr" | "rtl";
+export interface ConfigProviderTheme {
+    token?: Record<string, unknown>;
+    components?: Record<string, unknown>;
+    algorithm?: unknown;
+    hashed?: boolean;
+    cssVar?: boolean | Record<string, unknown>;
+}
+export interface ConfigProviderContextValue {
+    prefixCls: string;
+    iconPrefixCls: string;
+    direction?: ConfigDirection;
+    locale?: Record<string, unknown>;
+    theme?: ConfigProviderTheme;
+    getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+    renderEmpty?: (componentName?: string) => ReactNode;
+    virtual?: boolean;
+    wave?: Record<string, unknown> | false;
+}
+export interface ConfigProviderProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "className" | "prefix"> {
+    children?: ReactNode;
+    className?: string;
+    component?: false | ElementType;
+    prefixCls?: string;
+    iconPrefixCls?: string;
+    direction?: ConfigDirection;
+    locale?: Record<string, unknown>;
+    theme?: ConfigProviderTheme;
+    getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+    renderEmpty?: (componentName?: string) => ReactNode;
+    virtual?: boolean;
+    wave?: Record<string, unknown> | false;
+}
+export interface ConfigProviderComponent extends ForwardRefExoticComponent<ConfigProviderProps & RefAttributes<HTMLElement>> {
+    ConfigContext: Context<ConfigProviderContextValue>;
+    useConfig: () => ConfigProviderContextValue;
+    config: (config: Partial<ConfigProviderContextValue>) => void;
+}

package/dist/components/config-provider/index.d.ts

@@ -0,0 +1,2 @@
+export { ConfigContext, ConfigProvider } from "./ConfigProvider";
+export type { ConfigDirection, ConfigProviderComponent, ConfigProviderContextValue, ConfigProviderProps, ConfigProviderTheme, } from "./ConfigProvider.types";

package/dist/components/config-provider/index.js

@@ -0,0 +1,127 @@
+"use client";
+
+// src/components/config-provider/ConfigProvider.tsx
+import React, { createContext, forwardRef, useContext, useMemo } 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/config-provider.ts
+var configProviderClass = "config-provider";
+var configProviderRtlClass = "config-provider-rtl";
+var configProviderLtrClass = "config-provider-ltr";
+function getConfigProviderClasses({
+  direction = "ltr",
+  className
+}) {
+  return cn(configProviderClass, direction === "rtl" ? configProviderRtlClass : configProviderLtrClass, className);
+}
+
+// src/components/config-provider/ConfigProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultConfig = {
+  prefixCls: "dm",
+  iconPrefixCls: "dmicon",
+  direction: "ltr",
+  virtual: true
+};
+var globalConfig = {};
+var ConfigContext = createContext(undefined);
+var ConfigProviderBase = forwardRef(({
+  children,
+  className,
+  component: Component = "div",
+  prefixCls,
+  iconPrefixCls,
+  direction,
+  locale,
+  theme,
+  getPopupContainer,
+  renderEmpty,
+  virtual,
+  wave,
+  ...props
+}, ref) => {
+  const context = useContext(ConfigContext);
+  const parent = useMemo(() => context ?? {
+    ...defaultConfig,
+    ...globalConfig
+  }, [context]);
+  const value = useMemo(() => ({
+    ...defaultConfig,
+    ...globalConfig,
+    ...parent,
+    prefixCls: prefixCls ?? parent.prefixCls ?? globalConfig.prefixCls ?? "dm",
+    iconPrefixCls: iconPrefixCls ?? parent.iconPrefixCls ?? globalConfig.iconPrefixCls ?? "dmicon",
+    direction: direction ?? parent.direction ?? globalConfig.direction ?? "ltr",
+    locale: locale ?? parent.locale ?? globalConfig.locale,
+    theme: theme ?? parent.theme ?? globalConfig.theme,
+    getPopupContainer: getPopupContainer ?? parent.getPopupContainer ?? globalConfig.getPopupContainer,
+    renderEmpty: renderEmpty ?? parent.renderEmpty ?? globalConfig.renderEmpty,
+    virtual: virtual ?? parent.virtual ?? globalConfig.virtual ?? true,
+    wave: wave ?? parent.wave ?? globalConfig.wave
+  }), [
+    direction,
+    getPopupContainer,
+    iconPrefixCls,
+    locale,
+    parent,
+    prefixCls,
+    renderEmpty,
+    theme,
+    virtual,
+    wave
+  ]);
+  const content = /* @__PURE__ */ jsx(ConfigContext.Provider, {
+    value,
+    children
+  });
+  if (Component === false) {
+    return content;
+  }
+  return React.createElement(Component, {
+    ...props,
+    ref,
+    dir: value.direction,
+    className: getConfigProviderClasses({
+      direction: value.direction,
+      className
+    })
+  }, content);
+});
+ConfigProviderBase.displayName = "ConfigProvider";
+var ConfigProvider = ConfigProviderBase;
+ConfigProvider.ConfigContext = ConfigContext;
+ConfigProvider.useConfig = () => {
+  const context = useContext(ConfigContext);
+  return context ?? { ...defaultConfig, ...globalConfig };
+};
+ConfigProvider.config = (config) => {
+  globalConfig = { ...globalConfig, ...config };
+};
+export {
+  ConfigProvider,
+  ConfigContext
+};

package/dist/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerComponent } from "./DatePicker.types";
+export declare const DatePicker: DatePickerComponent;

package/dist/components/date-picker/DatePicker.types.d.ts

@@ -0,0 +1,46 @@
+import type { ChangeEvent, ComponentProps, FocusEvent, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type DatePickerValue = string;
+export type DatePickerRangeValue = [DatePickerValue | undefined, DatePickerValue | undefined];
+export type DatePickerPicker = "date" | "week" | "month" | "quarter" | "year" | "time";
+export type DatePickerSize = "sm" | "md" | "lg";
+export type DatePickerStatus = "error" | "success";
+export interface DatePickerPreset {
+    label: ReactNode;
+    value: DatePickerValue;
+}
+export interface DatePickerProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onBlur" | "onChange" | "onFocus"> {
+    value?: DatePickerValue;
+    defaultValue?: DatePickerValue;
+    onChange?: (value: DatePickerValue | undefined, dateString: string) => void;
+    onBlur?: (event: DatePickerInputFocusEvent) => void;
+    onFocus?: (event: DatePickerInputFocusEvent) => void;
+    onOpenChange?: (open: boolean) => void;
+    picker?: DatePickerPicker;
+    format?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    disabledDate?: (value: DatePickerValue) => boolean;
+    presets?: DatePickerPreset[];
+    showNow?: boolean;
+    allowClear?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    size?: DatePickerSize;
+    status?: DatePickerStatus;
+}
+export interface RangePickerProps extends Omit<DatePickerProps, "placeholder" | "value" | "defaultValue" | "onChange"> {
+    value?: DatePickerRangeValue;
+    defaultValue?: DatePickerRangeValue;
+    onChange?: (value: DatePickerRangeValue, dateStrings: [string, string]) => void;
+    placeholder?: [string, string];
+    separator?: ReactNode;
+}
+export interface DatePickerComponent extends ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>> {
+    RangePicker: ForwardRefExoticComponent<RangePickerProps & RefAttributes<HTMLDivElement>>;
+    WeekPicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
+    MonthPicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
+    QuarterPicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
+    YearPicker: ForwardRefExoticComponent<DatePickerProps & RefAttributes<HTMLDivElement>>;
+}
+export type DatePickerInputChangeEvent = ChangeEvent<HTMLInputElement>;
+export type DatePickerInputFocusEvent = FocusEvent<HTMLInputElement>;

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from "./DatePicker";
+export type { DatePickerComponent, DatePickerPicker, DatePickerPreset, DatePickerProps, DatePickerRangeValue, DatePickerSize, DatePickerStatus, DatePickerValue, RangePickerProps, } from "./DatePicker.types";