@duskmoon-dev/components 0.1.2

package/dist/components/dm-query/index.js

@@ -0,0 +1,1319 @@
+"use client";
+
+// ../../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/button.ts
+var buttonBaseClass = "btn";
+var buttonColorClasses = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  tertiary: "btn-tertiary",
+  info: "btn-info",
+  success: "btn-success",
+  warning: "btn-warning",
+  error: "btn-error"
+};
+var buttonAppearanceClasses = {
+  filled: "",
+  outline: "btn-outline",
+  tonal: "btn-tonal",
+  ghost: "btn-ghost",
+  text: "btn-text"
+};
+var buttonShapeClasses = {
+  rect: "",
+  circle: "btn-circle",
+  square: "btn-square"
+};
+var buttonSizeClasses = {
+  xs: "btn-xs",
+  sm: "btn-sm",
+  md: "btn-md",
+  lg: "btn-lg"
+};
+var buttonBlockClass = "btn-block";
+var buttonIsLoadingClass = "btn-loading";
+function getButtonClasses({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  className
+}) {
+  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+}
+
+// src/components/button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Button({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  disabled,
+  ref,
+  ...props
+}) {
+  const classes = getButtonClasses({
+    color,
+    appearance,
+    shape,
+    size,
+    block,
+    isLoading,
+    className
+  });
+  return /* @__PURE__ */ jsxs("button", {
+    ref,
+    className: classes,
+    disabled: disabled || isLoading,
+    "aria-busy": isLoading,
+    "aria-disabled": disabled || isLoading,
+    ...props,
+    children: [
+      isLoading && /* @__PURE__ */ jsx("span", {
+        className: "btn-spinner"
+      }),
+      !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
+        className: "btn-icon-left",
+        children: leftIcon
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "btn-content",
+        children
+      }),
+      !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
+        className: "btn-icon-right",
+        children: rightIcon
+      })
+    ]
+  });
+}
+// src/components/date-picker/DatePicker.tsx
+import { forwardRef, useMemo, useState } from "react";
+
+// 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 as jsx2, jsxs as jsxs2 } 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__ */ jsxs2("div", {
+    ...props,
+    ref,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      open: visible,
+      disabled,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx2("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__ */ jsx2("button", {
+        type: "button",
+        className: datePickerClearClass,
+        "aria-label": "Clear date",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => emitChange(undefined),
+        children: "x"
+      }) : null,
+      /* @__PURE__ */ jsx2("span", {
+        className: datePickerIconClass,
+        "aria-hidden": "true",
+        children: "calendar"
+      }),
+      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs2("div", {
+        className: getDatePickerDropdownClasses({ open: visible }),
+        children: [
+          presetItems.map((preset, index) => /* @__PURE__ */ jsx2("button", {
+            type: "button",
+            className: datePickerPresetClass,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => emitChange(preset.value),
+            children: preset.label
+          }, index)),
+          showNow ? /* @__PURE__ */ jsx2("div", {
+            className: datePickerFooterClass,
+            children: /* @__PURE__ */ jsx2("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__ */ jsxs2("div", {
+    ...props,
+    ref,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      disabled,
+      range: true,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx2("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__ */ jsx2("span", {
+        className: datePickerSeparatorClass,
+        children: separator
+      }),
+      /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2(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/input/Input.tsx
+import {
+  forwardRef as forwardRef2,
+  useImperativeHandle,
+  useRef,
+  useState as useState2
+} from "react";
+
+// src/classes/input.ts
+var inputBaseClass = "input";
+var inputWrapperClass = "input-wrapper";
+var inputAffixWrapperClass = "input-affix-wrapper";
+var inputPrefixClass = "input-prefix";
+var inputSuffixClass = "input-suffix";
+var inputClearClass = "input-clear";
+var inputSearchClass = "input-search";
+var inputSearchButtonClass = "input-search-button";
+var inputPasswordClass = "input-password";
+var inputPasswordToggleClass = "input-password-toggle";
+var inputGroupClass = "input-group";
+var textAreaBaseClass = "textarea";
+var textAreaWrapperClass = "textarea-wrapper";
+var textAreaCountClass = "textarea-counter";
+var textAreaCountExceededClass = "textarea-counter-exceeded";
+var textAreaAutoSizeClass = "textarea-auto-resize";
+var inputVariantClasses = {
+  filled: "input-filled",
+  outlined: "input-outlined"
+};
+var inputSizeClasses = {
+  sm: "input-sm",
+  md: "input-md",
+  lg: "input-lg"
+};
+var inputStatusClasses = {
+  error: "input-error",
+  success: "input-success"
+};
+var textAreaVariantClasses = {
+  filled: "textarea-filled",
+  outlined: "textarea-outlined"
+};
+var textAreaSizeClasses = {
+  sm: "textarea-sm",
+  md: "",
+  lg: "textarea-lg"
+};
+var textAreaStatusClasses = {
+  error: "textarea-error",
+  success: "textarea-success"
+};
+var textAreaResizeClasses = {
+  none: "textarea-resize-none",
+  both: "textarea-resize-both",
+  horizontal: "textarea-resize-horizontal",
+  vertical: "textarea-resize-vertical"
+};
+function getInputClasses({
+  size = "md",
+  status,
+  variant = "outlined",
+  className
+}) {
+  return cn(inputBaseClass, inputVariantClasses[variant], inputSizeClasses[size], status && inputStatusClasses[status], className);
+}
+function getInputWrapperClasses({
+  affixed,
+  className
+}) {
+  return cn(inputWrapperClass, affixed && inputAffixWrapperClass, className);
+}
+function getSearchWrapperClasses({ className }) {
+  return cn(inputSearchClass, className);
+}
+function getPasswordWrapperClasses({
+  className
+}) {
+  return cn(inputPasswordClass, className);
+}
+function getTextAreaClasses({
+  size = "md",
+  status,
+  variant = "outlined",
+  resize = "vertical",
+  autoSize,
+  className
+}) {
+  return cn(textAreaBaseClass, textAreaVariantClasses[variant], textAreaSizeClasses[size], status && textAreaStatusClasses[status], textAreaResizeClasses[resize], autoSize && textAreaAutoSizeClass, className);
+}
+function getTextAreaCountClasses({ exceeded }) {
+  return cn(textAreaCountClass, exceeded && textAreaCountExceededClass);
+}
+
+// src/components/input/Input.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function toTextValue(value) {
+  if (Array.isArray(value)) {
+    return value.join(",");
+  }
+  return value == null ? "" : String(value);
+}
+var InputRoot = forwardRef2(({
+  allowClear,
+  className,
+  defaultValue,
+  disabled,
+  onChange,
+  prefix,
+  size = "md",
+  status,
+  suffix,
+  type = "text",
+  value,
+  variant = "outlined",
+  ...props
+}, ref) => {
+  const inputRef = useRef(null);
+  const [internalValue, setInternalValue] = useState2(() => toTextValue(defaultValue));
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? toTextValue(value) : internalValue;
+  const hasAffix = prefix != null || suffix != null || allowClear;
+  useImperativeHandle(ref, () => inputRef.current);
+  function handleChange(event) {
+    if (!isControlled) {
+      setInternalValue(event.currentTarget.value);
+    }
+    onChange?.(event);
+  }
+  function handleClear() {
+    const input = inputRef.current;
+    if (!input || disabled) {
+      return;
+    }
+    input.value = "";
+    if (!isControlled) {
+      setInternalValue("");
+    }
+    onChange?.({
+      currentTarget: input,
+      target: input,
+      type: "change"
+    });
+    input.focus();
+  }
+  const control = /* @__PURE__ */ jsx3("input", {
+    ...props,
+    ref: inputRef,
+    type,
+    className: getInputClasses({ size, status, variant, className }),
+    disabled,
+    value: currentValue,
+    onChange: handleChange
+  });
+  if (!hasAffix) {
+    return control;
+  }
+  const showClear = allowClear && !disabled && currentValue.length > 0;
+  return /* @__PURE__ */ jsxs3("span", {
+    className: getInputWrapperClasses({ affixed: hasAffix }),
+    children: [
+      prefix != null ? /* @__PURE__ */ jsx3("span", {
+        className: inputPrefixClass,
+        children: prefix
+      }) : null,
+      control,
+      showClear ? /* @__PURE__ */ jsx3("button", {
+        type: "button",
+        className: inputClearClass,
+        "aria-label": "Clear input",
+        onClick: handleClear,
+        children: "x"
+      }) : null,
+      suffix != null ? /* @__PURE__ */ jsx3("span", {
+        className: inputSuffixClass,
+        children: suffix
+      }) : null
+    ]
+  });
+});
+InputRoot.displayName = "Input";
+var Search = forwardRef2(({
+  className,
+  disabled,
+  enterButton,
+  loading,
+  onKeyDown,
+  onSearch,
+  ...props
+}, ref) => {
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
+  function emitSearch(event) {
+    onSearch?.(inputRef.current?.value ?? "", event);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented && event.key === "Enter") {
+      emitSearch(event);
+    }
+  }
+  const buttonContent = enterButton === true ? "Search" : enterButton ?? "Search";
+  return /* @__PURE__ */ jsxs3("span", {
+    className: getSearchWrapperClasses({ className }),
+    children: [
+      /* @__PURE__ */ jsx3(InputRoot, {
+        ...props,
+        ref: inputRef,
+        disabled,
+        onKeyDown: handleKeyDown
+      }),
+      enterButton || loading ? /* @__PURE__ */ jsx3("button", {
+        type: "button",
+        className: inputSearchButtonClass,
+        disabled: disabled || loading,
+        "aria-busy": loading || undefined,
+        onClick: emitSearch,
+        children: loading ? "Loading" : buttonContent
+      }) : null
+    ]
+  });
+});
+Search.displayName = "Input.Search";
+var Password = forwardRef2(({ className, disabled, visibilityToggle = true, ...props }, ref) => {
+  const [visible, setVisible] = useState2(false);
+  const type = visible ? "text" : "password";
+  const toggle = visibilityToggle ? /* @__PURE__ */ jsx3("button", {
+    type: "button",
+    className: inputPasswordToggleClass,
+    disabled,
+    "aria-label": visible ? "Hide password" : "Show password",
+    onClick: () => {
+      setVisible((current) => !current);
+    },
+    children: visible ? "Hide" : "Show"
+  }) : undefined;
+  return /* @__PURE__ */ jsx3("span", {
+    className: getPasswordWrapperClasses({ className }),
+    children: /* @__PURE__ */ jsx3(InputRoot, {
+      ...props,
+      ref,
+      disabled,
+      type,
+      suffix: toggle
+    })
+  });
+});
+Password.displayName = "Input.Password";
+var TextArea = forwardRef2(({
+  autoSize,
+  className,
+  defaultValue,
+  maxLength,
+  onChange,
+  resize = "vertical",
+  showCount,
+  size = "md",
+  status,
+  value,
+  variant = "outlined",
+  ...props
+}, ref) => {
+  const [internalValue, setInternalValue] = useState2(() => toTextValue(defaultValue));
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? toTextValue(value) : internalValue;
+  const count = currentValue.length;
+  const exceeded = maxLength !== undefined && count > maxLength;
+  function handleChange(event) {
+    if (!isControlled) {
+      setInternalValue(event.currentTarget.value);
+    }
+    onChange?.(event);
+  }
+  const control = /* @__PURE__ */ jsx3("textarea", {
+    ...props,
+    ref,
+    className: getTextAreaClasses({
+      size,
+      status,
+      variant,
+      resize,
+      autoSize: Boolean(autoSize),
+      className
+    }),
+    maxLength,
+    value: currentValue,
+    onChange: handleChange
+  });
+  if (!showCount) {
+    return control;
+  }
+  return /* @__PURE__ */ jsxs3("span", {
+    className: textAreaWrapperClass,
+    children: [
+      control,
+      /* @__PURE__ */ jsxs3("span", {
+        className: getTextAreaCountClasses({ exceeded }),
+        children: [
+          count,
+          maxLength !== undefined ? ` / ${maxLength}` : null
+        ]
+      })
+    ]
+  });
+});
+TextArea.displayName = "Input.TextArea";
+var Group = forwardRef2(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
+  ...props,
+  ref,
+  className: cn(inputGroupClass, className),
+  children
+}));
+Group.displayName = "Input.Group";
+var Input = Object.assign(InputRoot, {
+  Search,
+  Password,
+  TextArea,
+  Group
+});
+// src/components/select/Select.tsx
+import React3, { forwardRef as forwardRef3, useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/classes/select.ts
+var selectContainerClass = "select-container";
+var selectBaseClass = "select";
+var selectIconClass = "select-icon";
+var selectOpenClass = "select-open";
+var selectLoadingClass = "select-loading";
+var selectFullClass = "select-full";
+var selectOptionClass = "select-option";
+var selectOptionSelectedClass = "select-option-selected";
+var selectOptionDisabledClass = "select-option-disabled";
+var selectDropdownClass = "select-dropdown";
+var selectSearchClass = "select-search";
+var selectSelectionClass = "select-selection";
+var selectTagClass = "select-tag";
+var selectClearClass = "select-clear";
+var selectPlaceholderClass = "select-placeholder";
+var selectEmptyClass = "select-empty";
+var selectGroupClass = "select-group";
+var selectGroupLabelClass = "select-group-label";
+var selectSizeClasses = {
+  sm: "select-sm",
+  md: "",
+  lg: "select-lg"
+};
+var selectStatusClasses = {
+  error: "select-error",
+  success: "select-success"
+};
+function getSelectContainerClasses({
+  open,
+  loading,
+  disabled,
+  full,
+  className
+}) {
+  return cn(selectContainerClass, open && selectOpenClass, loading && selectLoadingClass, disabled && "select-disabled", full && selectFullClass, className);
+}
+function getSelectClasses({
+  size = "md",
+  status,
+  disabled,
+  className
+}) {
+  return cn(selectBaseClass, selectSizeClasses[size], status && selectStatusClasses[status], disabled && "select-disabled", className);
+}
+function getSelectOptionClasses({
+  selected,
+  disabled,
+  className
+}) {
+  return cn(selectOptionClass, selected && selectOptionSelectedClass, disabled && selectOptionDisabledClass, className);
+}
+
+// src/components/select/Select.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function isGroup(option) {
+  return "options" in option;
+}
+function optionLabel(option) {
+  return option.label ?? option.value;
+}
+function valueKey(value) {
+  return String(value);
+}
+function normalizeSingleValue(value) {
+  if (Array.isArray(value)) {
+    return value[0];
+  }
+  return typeof value === "string" || typeof value === "number" ? value : undefined;
+}
+function normalizeMultiValue(value) {
+  if (Array.isArray(value)) {
+    return value.filter((item) => typeof item === "string" || typeof item === "number");
+  }
+  const single = normalizeSingleValue(value);
+  return single === undefined ? [] : [single];
+}
+function optionsFromChildren(children) {
+  const result = [];
+  React3.Children.forEach(children, (child) => {
+    if (!React3.isValidElement(child)) {
+      return;
+    }
+    if (child.type === Option) {
+      const props = child.props;
+      result.push({
+        value: props.value,
+        label: props.children,
+        disabled: props.disabled,
+        className: props.className
+      });
+      return;
+    }
+    if (child.type === OptGroup) {
+      const props = child.props;
+      result.push({
+        label: props.label,
+        className: props.className,
+        options: optionsFromChildren(props.children).filter((option) => !isGroup(option))
+      });
+    }
+  });
+  return result;
+}
+function flattenOptions(options) {
+  return options.flatMap((option) => isGroup(option) ? option.options : option);
+}
+function matchesOption(option, searchValue, filterOption) {
+  if (!searchValue || filterOption === false) {
+    return true;
+  }
+  if (typeof filterOption === "function") {
+    return filterOption(searchValue, option);
+  }
+  const label = optionLabel(option);
+  const text = typeof label === "string" || typeof label === "number" ? String(label) : String(option.value);
+  return text.toLowerCase().includes(searchValue.toLowerCase());
+}
+function filterOptions(options, searchValue, filterOption) {
+  return options.map((option) => {
+    if (!isGroup(option)) {
+      return matchesOption(option, searchValue, filterOption) ? option : null;
+    }
+    const groupOptions = option.options.filter((child) => matchesOption(child, searchValue, filterOption));
+    return groupOptions.length > 0 ? { ...option, options: groupOptions } : null;
+  }).filter((option) => option !== null);
+}
+function renderValue(option) {
+  return option ? optionLabel(option) : null;
+}
+var Option = forwardRef3(({ children, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+  ...props,
+  ref,
+  children
+}));
+Option.displayName = "Select.Option";
+var OptGroup = forwardRef3(({ children, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+  ...props,
+  ref,
+  children
+}));
+OptGroup.displayName = "Select.OptGroup";
+var SelectRoot = forwardRef3(({
+  allowClear,
+  children,
+  className,
+  defaultValue,
+  disabled,
+  filterOption,
+  loading,
+  mode,
+  onChange,
+  options,
+  placeholder,
+  showSearch,
+  size = "md",
+  status,
+  value,
+  ...props
+}, ref) => {
+  const multiple = mode === "multiple" || mode === "tags";
+  const sourceOptions = useMemo2(() => options ?? optionsFromChildren(children), [children, options]);
+  const flatOptions = useMemo2(() => flattenOptions(sourceOptions), [sourceOptions]);
+  const [open, setOpen] = useState3(false);
+  const [searchValue, setSearchValue] = useState3("");
+  const [internalValue, setInternalValue] = useState3(multiple ? normalizeMultiValue(defaultValue) : normalizeSingleValue(defaultValue));
+  const controlled = value !== undefined;
+  const currentValue = controlled ? value : internalValue;
+  const selectedValues = multiple ? normalizeMultiValue(currentValue) : normalizeSingleValue(currentValue) === undefined ? [] : [normalizeSingleValue(currentValue)];
+  const selectedKeys = new Set(selectedValues.map(valueKey));
+  const selectedOptions = selectedValues.map((selectedValue) => flatOptions.find((option) => option.value === selectedValue) ?? {
+    value: selectedValue,
+    label: selectedValue
+  });
+  const visibleOptions = filterOptions(sourceOptions, searchValue, filterOption);
+  const hasValue = selectedValues.length > 0;
+  const searchable = showSearch || mode === "tags";
+  function emitChange(nextValue) {
+    if (!controlled) {
+      setInternalValue(nextValue);
+    }
+    const nextValues = Array.isArray(nextValue) ? nextValue : nextValue === undefined ? [] : [nextValue];
+    const nextOptions = nextValues.map((next) => flatOptions.find((option) => option.value === next) ?? {
+      value: next,
+      label: next
+    });
+    onChange?.(nextValue, multiple ? nextOptions : nextOptions[0]);
+  }
+  function selectOption(option) {
+    if (disabled || loading || option.disabled) {
+      return;
+    }
+    if (multiple) {
+      const optionKey = valueKey(option.value);
+      const nextValues = selectedKeys.has(optionKey) ? selectedValues.filter((item) => valueKey(item) !== optionKey) : [...selectedValues, option.value];
+      emitChange(nextValues);
+    } else {
+      emitChange(option.value);
+      setOpen(false);
+    }
+    setSearchValue("");
+  }
+  function clearValue(event) {
+    event.stopPropagation();
+    if (disabled || loading) {
+      return;
+    }
+    emitChange(multiple ? [] : undefined);
+    setSearchValue("");
+  }
+  function addTag() {
+    const tag = searchValue.trim();
+    if (mode !== "tags" || tag.length === 0) {
+      return;
+    }
+    if (!selectedKeys.has(tag)) {
+      emitChange([...selectedValues, tag]);
+    }
+    setSearchValue("");
+  }
+  function renderOption(option) {
+    const selected = selectedKeys.has(valueKey(option.value));
+    return /* @__PURE__ */ jsx4("button", {
+      type: "button",
+      role: "option",
+      "aria-selected": selected,
+      disabled: disabled || option.disabled,
+      className: getSelectOptionClasses({
+        selected,
+        disabled: disabled || option.disabled,
+        className: option.className
+      }),
+      onClick: () => selectOption(option),
+      children: optionLabel(option)
+    }, valueKey(option.value));
+  }
+  function renderOptions(optionItems) {
+    return optionItems.map((option, index) => {
+      if (!isGroup(option)) {
+        return renderOption(option);
+      }
+      return /* @__PURE__ */ jsxs4("div", {
+        className: cn(selectGroupClass, option.className),
+        role: "group",
+        children: [
+          /* @__PURE__ */ jsx4("div", {
+            className: selectGroupLabelClass,
+            children: option.label
+          }),
+          option.options.map(renderOption)
+        ]
+      }, `group-${index}`);
+    });
+  }
+  const selection = multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsx4("span", {
+    className: selectTagClass,
+    children: renderValue(option)
+  }, valueKey(option.value))) : renderValue(selectedOptions[0]);
+  return /* @__PURE__ */ jsxs4("div", {
+    ...props,
+    ref,
+    className: getSelectContainerClasses({
+      open,
+      loading,
+      disabled,
+      full: true,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsxs4("button", {
+        type: "button",
+        className: getSelectClasses({ size, status, disabled }),
+        disabled: disabled || loading,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        onClick: () => setOpen((current) => !current),
+        children: [
+          /* @__PURE__ */ jsx4("span", {
+            className: selectSelectionClass,
+            children: hasValue ? selection : /* @__PURE__ */ jsx4("span", {
+              className: selectPlaceholderClass,
+              children: placeholder
+            })
+          }),
+          /* @__PURE__ */ jsx4("span", {
+            className: selectIconClass,
+            "aria-hidden": "true",
+            children: "v"
+          })
+        ]
+      }),
+      allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ jsx4("button", {
+        type: "button",
+        className: selectClearClass,
+        "aria-label": "Clear selection",
+        onClick: clearValue,
+        children: "x"
+      }) : null,
+      open ? /* @__PURE__ */ jsxs4("div", {
+        className: selectDropdownClass,
+        role: "listbox",
+        "aria-multiselectable": multiple || undefined,
+        children: [
+          searchable ? /* @__PURE__ */ jsx4("input", {
+            className: selectSearchClass,
+            value: searchValue,
+            placeholder: typeof placeholder === "string" ? placeholder : undefined,
+            onChange: (event) => setSearchValue(event.currentTarget.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                addTag();
+              }
+            }
+          }) : null,
+          visibleOptions.length > 0 ? renderOptions(visibleOptions) : /* @__PURE__ */ jsx4("div", {
+            className: selectEmptyClass,
+            children: "No data"
+          })
+        ]
+      }) : null
+    ]
+  });
+});
+SelectRoot.displayName = "Select";
+var Select = SelectRoot;
+Select.Option = Option;
+Select.OptGroup = OptGroup;
+// src/components/dm-search/DmSearch.tsx
+import {
+  forwardRef as forwardRef4,
+  useEffect,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo3,
+  useState as useState4
+} from "react";
+
+// src/classes/dm-search.ts
+var dmSearchBaseClass = "dm-search";
+var dmSearchCompactClass = "dm-search-compact";
+var dmSearchCollapsedClass = "dm-search-collapsed";
+var dmSearchFieldsClass = "dm-search-fields";
+var dmSearchFieldClass = "dm-search-field";
+var dmSearchActionsClass = "dm-search-actions";
+var dmSearchFastFilterClass = "dm-search-fast-filter";
+function getDmSearchClasses({
+  compact,
+  collapsed,
+  className
+}) {
+  return cn(dmSearchBaseClass, compact && dmSearchCompactClass, collapsed && dmSearchCollapsedClass, className);
+}
+
+// src/components/dm-search/DmSearch.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function initialValues(items, searchParams, useSearchParams = true) {
+  return items.reduce((acc, item) => {
+    const defaultValue = item.search.extraProps?.value ?? item.search.formProps?.initialValue;
+    acc[item.dataIndex] = useSearchParams && searchParams && item.dataIndex in searchParams ? searchParams[item.dataIndex] : defaultValue;
+    return acc;
+  }, {});
+}
+function optionList(extraProps) {
+  return Array.isArray(extraProps?.options) ? extraProps.options : [];
+}
+function renderField({
+  item,
+  value,
+  setValue,
+  loading,
+  enableDefaultPlaceHolder
+}) {
+  const extraProps = item.search.extraProps ?? {};
+  const placeholder = extraProps.placeholder ?? (enableDefaultPlaceHolder ? item.search.type === "select" ? "Please select" : "Please enter" : undefined);
+  if (item.search.type === "custom") {
+    return item.search.render?.(value, setValue, item) ?? null;
+  }
+  if (item.search.type === "select") {
+    return /* @__PURE__ */ jsx5(Select, {
+      ...extraProps,
+      disabled: Boolean(loading || extraProps.disabled),
+      value,
+      placeholder,
+      onChange: (nextValue) => setValue(nextValue)
+    });
+  }
+  if (item.search.type === "dateRange") {
+    return /* @__PURE__ */ jsx5(DatePicker.RangePicker, {
+      ...extraProps,
+      value,
+      onChange: (nextValue) => setValue(nextValue)
+    });
+  }
+  if (item.search.type === "date") {
+    return /* @__PURE__ */ jsx5(DatePicker, {
+      ...extraProps,
+      value,
+      onChange: (nextValue) => setValue(nextValue)
+    });
+  }
+  if (item.search.type === "radio" || item.search.type === "checkbox") {
+    return /* @__PURE__ */ jsx5("div", {
+      role: item.search.type === "radio" ? "radiogroup" : "group",
+      children: optionList(extraProps).map((option) => /* @__PURE__ */ jsxs5("label", {
+        children: [
+          /* @__PURE__ */ jsx5("input", {
+            type: item.search.type,
+            disabled: loading,
+            checked: item.search.type === "checkbox" ? Array.isArray(value) && value.includes(option.value) : value === option.value,
+            onChange: (event) => {
+              if (item.search.type === "radio") {
+                setValue(option.value);
+                return;
+              }
+              const current = Array.isArray(value) ? value : [];
+              setValue(event.currentTarget.checked ? [...current, option.value] : current.filter((entry) => entry !== option.value));
+            }
+          }),
+          option.label ?? option.value
+        ]
+      }, String(option.value)))
+    });
+  }
+  return /* @__PURE__ */ jsx5(Input, {
+    ...extraProps,
+    type: item.search.type === "input-number" ? "number" : "text",
+    disabled: Boolean(loading || extraProps.disabled),
+    placeholder,
+    value: value == null ? "" : String(value),
+    onChange: (event) => setValue(event.currentTarget.value),
+    onKeyDown: (event) => {
+      if (event.key === "Enter") {
+        event.currentTarget.form?.requestSubmit();
+      }
+    }
+  });
+}
+var DmSearch = forwardRef4(({
+  items = [],
+  onSearch,
+  extra,
+  fastFilterItem,
+  defaultCollapsed = true,
+  hideCollapseBtn = false,
+  compact = false,
+  searchParams,
+  loading = false,
+  enableDefaultPlaceHolder = false,
+  className
+}, ref) => {
+  const allItems = useMemo3(() => fastFilterItem ? [fastFilterItem, ...items] : items, [fastFilterItem, items]);
+  const [collapsed, setCollapsed] = useState4(defaultCollapsed);
+  const [values, setValues] = useState4(() => initialValues(allItems, searchParams));
+  const visibleItems = collapsed ? allItems.slice(0, 1) : allItems;
+  useEffect(() => {
+    setValues(initialValues(allItems, searchParams));
+  }, [allItems, searchParams]);
+  function reset(useSearchParams = false) {
+    const nextValues = initialValues(allItems, searchParams, useSearchParams);
+    setValues(nextValues);
+    return nextValues;
+  }
+  useImperativeHandle2(ref, () => ({
+    onReset: () => {
+      reset(false);
+    }
+  }));
+  return /* @__PURE__ */ jsxs5("form", {
+    id: "searchForm",
+    className: getDmSearchClasses({ compact, collapsed, className }),
+    onSubmit: (event) => {
+      event.preventDefault();
+      onSearch?.(values);
+    },
+    children: [
+      fastFilterItem ? /* @__PURE__ */ jsx5("div", {
+        className: dmSearchFastFilterClass,
+        children: fastFilterItem.title
+      }) : null,
+      /* @__PURE__ */ jsx5("div", {
+        className: dmSearchFieldsClass,
+        children: visibleItems.map((item) => /* @__PURE__ */ jsxs5("label", {
+          className: dmSearchFieldClass,
+          children: [
+            compact ? null : /* @__PURE__ */ jsx5("span", {
+              children: item.title
+            }),
+            renderField({
+              item,
+              value: values[item.dataIndex],
+              loading,
+              enableDefaultPlaceHolder,
+              setValue: (value) => setValues((current) => ({ ...current, [item.dataIndex]: value }))
+            })
+          ]
+        }, item.key))
+      }),
+      /* @__PURE__ */ jsxs5("div", {
+        className: dmSearchActionsClass,
+        children: [
+          /* @__PURE__ */ jsx5(Button, {
+            type: "submit",
+            isLoading: loading,
+            children: "Search"
+          }),
+          /* @__PURE__ */ jsx5(Button, {
+            type: "button",
+            color: "secondary",
+            appearance: "outline",
+            onClick: () => onSearch?.(reset(false)),
+            children: "Reset"
+          }),
+          !hideCollapseBtn && allItems.length > 1 ? /* @__PURE__ */ jsx5(Button, {
+            type: "button",
+            color: "secondary",
+            appearance: "text",
+            onClick: () => {
+              setCollapsed((current) => !current);
+              setValues(initialValues(allItems, searchParams));
+            },
+            children: collapsed ? "Expand" : "Collapse"
+          }) : null,
+          extra
+        ]
+      })
+    ]
+  });
+});
+DmSearch.displayName = "DmSearch";
+// src/components/dm-query/DmQuery.tsx
+import { forwardRef as forwardRef5, useImperativeHandle as useImperativeHandle3, useRef as useRef2, useState as useState5 } from "react";
+import { jsx as jsx6, jsxs as jsxs6, Fragment } from "react/jsx-runtime";
+function toSearchItem(item) {
+  return {
+    key: item.key,
+    title: item.label,
+    dataIndex: item.name,
+    search: {
+      type: item.type,
+      extraProps: item.extraProps,
+      formProps: item.customProps
+    }
+  };
+}
+var DmQuery = forwardRef5(({
+  queryItem,
+  fastFilterItem,
+  collapsed = false,
+  onReset,
+  onSearch,
+  ...props
+}, ref) => {
+  const searchRef = useRef2(null);
+  const [selectedItem, setSelectedItem] = useState5(queryItem[0]);
+  const items = selectedItem ? [toSearchItem(selectedItem)] : queryItem.map(toSearchItem);
+  useImperativeHandle3(ref, () => ({
+    onReset: () => searchRef.current?.onReset(),
+    retractChange: (value, data = queryItem) => {
+      setSelectedItem(data.find((item) => item.name === value || item.key === value));
+    }
+  }));
+  return /* @__PURE__ */ jsx6(DmSearch, {
+    ...props,
+    ref: searchRef,
+    defaultCollapsed: collapsed,
+    items: collapsed ? queryItem.map(toSearchItem) : items,
+    fastFilterItem: fastFilterItem ? toSearchItem(fastFilterItem) : undefined,
+    onSearch,
+    extra: /* @__PURE__ */ jsxs6(Fragment, {
+      children: [
+        props.extra,
+        /* @__PURE__ */ jsx6("button", {
+          type: "button",
+          hidden: true,
+          onClick: () => {
+            searchRef.current?.onReset();
+            onReset?.();
+          }
+        })
+      ]
+    })
+  });
+});
+DmQuery.displayName = "DmQuery";
+export {
+  DmQuery
+};