@duskmoon-dev/components 0.1.2

package/dist/components/cascader/Cascader.types.d.ts

@@ -0,0 +1,63 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type CascaderValue = string | number;
+export type CascaderSingleValue = CascaderValue[];
+export type CascaderMultipleValue = CascaderValue[][];
+export type CascaderChangeValue = CascaderSingleValue | CascaderMultipleValue;
+export type CascaderSize = "small" | "middle" | "large";
+export type CascaderStatus = "error" | "warning";
+export type CascaderExpandTrigger = "click" | "hover";
+export type CascaderCheckedStrategy = "SHOW_PARENT" | "SHOW_CHILD";
+export interface CascaderOption {
+    label?: ReactNode;
+    value?: CascaderValue;
+    children?: CascaderOption[];
+    disabled?: boolean;
+    isLeaf?: boolean;
+    loading?: boolean;
+    className?: string;
+    [key: string]: unknown;
+}
+export interface CascaderFieldNames {
+    label?: string;
+    value?: string;
+    children?: string;
+}
+export interface CascaderSearchConfig {
+    filter?: (inputValue: string, path: CascaderOption[], names: Required<CascaderFieldNames>) => boolean;
+    render?: (inputValue: string, path: CascaderOption[], names: Required<CascaderFieldNames>) => ReactNode;
+    limit?: number | false;
+}
+export interface CascaderProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSelect"> {
+    allowClear?: boolean;
+    changeOnSelect?: boolean;
+    checkable?: boolean;
+    checkedStrategy?: CascaderCheckedStrategy;
+    children?: ReactNode;
+    defaultOpen?: boolean;
+    defaultValue?: CascaderChangeValue;
+    disabled?: boolean;
+    displayRender?: (labels: ReactNode[], selectedOptions?: CascaderOption[]) => ReactNode;
+    expandTrigger?: CascaderExpandTrigger;
+    fieldNames?: CascaderFieldNames;
+    loadData?: (selectedOptions: CascaderOption[]) => void;
+    multiple?: boolean;
+    notFoundContent?: ReactNode;
+    onChange?: (value: CascaderChangeValue, selectedOptions?: CascaderOption[] | CascaderOption[][]) => void;
+    onDropdownVisibleChange?: (open: boolean) => void;
+    onOpenChange?: (open: boolean) => void;
+    onSearch?: (value: string) => void;
+    onSelect?: (value: CascaderSingleValue, selectedOptions?: CascaderOption[]) => void;
+    open?: boolean;
+    options?: CascaderOption[];
+    placeholder?: ReactNode;
+    showSearch?: boolean | CascaderSearchConfig;
+    size?: CascaderSize;
+    status?: CascaderStatus;
+    value?: CascaderChangeValue;
+}
+export type CascaderPanelProps = Omit<CascaderProps, "allowClear" | "defaultOpen" | "open" | "placeholder">;
+export type CascaderComponent = ForwardRefExoticComponent<CascaderProps & RefAttributes<HTMLDivElement>> & {
+    Panel: ForwardRefExoticComponent<CascaderPanelProps & RefAttributes<HTMLDivElement>>;
+    SHOW_PARENT: "SHOW_PARENT";
+    SHOW_CHILD: "SHOW_CHILD";
+};

package/dist/components/cascader/index.d.ts

@@ -0,0 +1,2 @@
+export { Cascader } from "./Cascader";
+export type { CascaderChangeValue, CascaderCheckedStrategy, CascaderComponent, CascaderFieldNames, CascaderMultipleValue, CascaderOption, CascaderPanelProps, CascaderProps, CascaderSingleValue, CascaderValue, } from "./Cascader.types";

package/dist/components/cascader/index.js

@@ -0,0 +1,509 @@
+"use client";
+
+// src/components/cascader/Cascader.tsx
+import React, { 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/cascader.ts
+var cascaderContainerClass = "cascader-container";
+var cascaderBaseClass = "cascader";
+var cascaderOpenClass = "cascader-open";
+var cascaderDisabledClass = "cascader-disabled";
+var cascaderSelectionClass = "cascader-selection";
+var cascaderPlaceholderClass = "cascader-placeholder";
+var cascaderClearClass = "cascader-clear";
+var cascaderIconClass = "cascader-icon";
+var cascaderDropdownClass = "cascader-dropdown";
+var cascaderSearchClass = "cascader-search";
+var cascaderMenusClass = "cascader-menus";
+var cascaderMenuClass = "cascader-menu";
+var cascaderOptionClass = "cascader-option";
+var cascaderOptionActiveClass = "cascader-option-active";
+var cascaderOptionSelectedClass = "cascader-option-selected";
+var cascaderOptionDisabledClass = "cascader-option-disabled";
+var cascaderOptionLoadingClass = "cascader-option-loading";
+var cascaderOptionExpandClass = "cascader-option-expand";
+var cascaderEmptyClass = "cascader-empty";
+var cascaderTagClass = "cascader-tag";
+var cascaderSizeClasses = {
+  small: "cascader-sm",
+  middle: "",
+  large: "cascader-lg"
+};
+var cascaderStatusClasses = {
+  error: "cascader-error",
+  warning: "cascader-warning"
+};
+function getCascaderContainerClasses({
+  open,
+  disabled,
+  className
+}) {
+  return cn(cascaderContainerClass, open && cascaderOpenClass, disabled && cascaderDisabledClass, className);
+}
+function getCascaderClasses({
+  size = "middle",
+  status,
+  disabled,
+  className
+}) {
+  return cn(cascaderBaseClass, cascaderSizeClasses[size], status && cascaderStatusClasses[status], disabled && cascaderDisabledClass, className);
+}
+function getCascaderOptionClasses({
+  active,
+  selected,
+  disabled,
+  loading,
+  expand,
+  className
+}) {
+  return cn(cascaderOptionClass, active && cascaderOptionActiveClass, selected && cascaderOptionSelectedClass, disabled && cascaderOptionDisabledClass, loading && cascaderOptionLoadingClass, expand && cascaderOptionExpandClass, className);
+}
+
+// src/components/cascader/Cascader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultFieldNames = {
+  label: "label",
+  value: "value",
+  children: "children"
+};
+function normalizeFieldNames(fieldNames) {
+  return { ...defaultFieldNames, ...fieldNames };
+}
+function getOptionValue(option, names) {
+  return option[names.value];
+}
+function getOptionLabel(option, names) {
+  return option[names.label] ?? getOptionValue(option, names);
+}
+function getOptionChildren(option, names) {
+  const children = option[names.children];
+  return Array.isArray(children) ? children : undefined;
+}
+function valueKey(value) {
+  return value.map(String).join("__dm_cascader__");
+}
+function isMultipleValue(value) {
+  return Array.isArray(value) && Array.isArray(value[0]);
+}
+function normalizeSingleValue(value) {
+  if (!Array.isArray(value) || isMultipleValue(value)) {
+    return [];
+  }
+  return value.filter((item) => typeof item === "string" || typeof item === "number");
+}
+function normalizeMultipleValue(value) {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  if (isMultipleValue(value)) {
+    return value.map(normalizeSingleValue);
+  }
+  const single = normalizeSingleValue(value);
+  return single.length > 0 ? [single] : [];
+}
+function findPath(options, value, names) {
+  const path = [];
+  let levelOptions = options;
+  for (const item of value) {
+    const next = levelOptions.find((option) => getOptionValue(option, names) === item);
+    if (!next) {
+      return [];
+    }
+    path.push(next);
+    levelOptions = getOptionChildren(next, names) ?? [];
+  }
+  return path;
+}
+function flattenLeafPaths(options, names, parents = []) {
+  return options.flatMap((option) => {
+    const path = [...parents, option];
+    const children = getOptionChildren(option, names);
+    if (children?.length) {
+      return flattenLeafPaths(children, names, path);
+    }
+    return [path];
+  });
+}
+function labelsForPath(path, names) {
+  return path.map((option) => getOptionLabel(option, names));
+}
+function valuesForPath(path, names) {
+  return path.map((option) => getOptionValue(option, names)).filter((value) => typeof value === "string" || typeof value === "number");
+}
+function defaultDisplay(labels) {
+  return labels.map((label, index) => /* @__PURE__ */ jsxs(React.Fragment, {
+    children: [
+      index > 0 ? " / " : null,
+      label
+    ]
+  }, index));
+}
+function defaultFilter(inputValue, path, names) {
+  return labelsForPath(path, names).map((label) => String(label ?? "")).join(" / ").toLowerCase().includes(inputValue.toLowerCase());
+}
+function CascaderMenus({
+  activeValue,
+  changeOnSelect,
+  disabled,
+  expandTrigger = "click",
+  loadData,
+  multiple,
+  names,
+  onActiveChange,
+  onPick,
+  options,
+  selectedKeys
+}) {
+  const columns = [];
+  let levelOptions = options;
+  columns.push(levelOptions);
+  for (const activeItem of activeValue) {
+    const option = levelOptions.find((candidate) => getOptionValue(candidate, names) === activeItem);
+    const children = option ? getOptionChildren(option, names) : undefined;
+    if (!children?.length) {
+      break;
+    }
+    columns.push(children);
+    levelOptions = children;
+  }
+  if (columns[0].length === 0) {
+    return /* @__PURE__ */ jsx("div", {
+      className: cascaderEmptyClass,
+      children: "No data"
+    });
+  }
+  return /* @__PURE__ */ jsx("div", {
+    className: cascaderMenusClass,
+    children: columns.map((column, columnIndex) => {
+      const parentValue = activeValue.slice(0, columnIndex);
+      return /* @__PURE__ */ jsx("div", {
+        className: cascaderMenuClass,
+        role: "menu",
+        children: column.map((option) => {
+          const optionValue = getOptionValue(option, names);
+          const optionChildren = getOptionChildren(option, names);
+          const nextValue = optionValue === undefined ? parentValue : [...parentValue, optionValue];
+          const path = findPath(options, nextValue, names);
+          const hasChildren = Boolean(optionChildren?.length);
+          const canLoad = Boolean(loadData && option.isLeaf === false && !hasChildren);
+          const selectable = !hasChildren || changeOnSelect || multiple;
+          const selected = selectedKeys.has(valueKey(nextValue));
+          const active = activeValue[columnIndex] === optionValue;
+          return /* @__PURE__ */ jsxs("button", {
+            type: "button",
+            role: "menuitem",
+            disabled: disabled || option.disabled,
+            className: getCascaderOptionClasses({
+              active,
+              selected,
+              disabled: disabled || option.disabled,
+              loading: option.loading,
+              expand: hasChildren || canLoad,
+              className: option.className
+            }),
+            onMouseEnter: () => {
+              if (!disabled && !option.disabled && expandTrigger === "hover") {
+                onActiveChange(nextValue);
+              }
+            },
+            onClick: () => {
+              if (disabled || option.disabled) {
+                return;
+              }
+              onActiveChange(nextValue);
+              if (canLoad) {
+                loadData?.(path);
+              }
+              if (selectable) {
+                onPick(path, !hasChildren && !canLoad);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                children: getOptionLabel(option, names)
+              }),
+              option.loading ? /* @__PURE__ */ jsx("span", {
+                "aria-hidden": "true",
+                children: "..."
+              }) : null,
+              hasChildren || canLoad ? /* @__PURE__ */ jsx("span", {
+                "aria-hidden": "true",
+                children: "›"
+              }) : null
+            ]
+          }, String(optionValue ?? getOptionLabel(option, names)));
+        })
+      }, columnIndex);
+    })
+  });
+}
+var CascaderPanel = forwardRef(({ className, options = [], fieldNames, value, defaultValue, onChange, onSelect, ...props }, ref) => {
+  const names = useMemo(() => normalizeFieldNames(fieldNames), [fieldNames]);
+  const [activeValue, setActiveValue] = useState(normalizeSingleValue(value ?? defaultValue));
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = value ?? internalValue;
+  const selectedValues = normalizeMultipleValue(currentValue);
+  const selectedKeys = new Set(selectedValues.map(valueKey));
+  function pick(path) {
+    const nextValue = valuesForPath(path, names);
+    setInternalValue(nextValue);
+    onSelect?.(nextValue, path);
+    onChange?.(nextValue, path);
+  }
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    className,
+    children: /* @__PURE__ */ jsx(CascaderMenus, {
+      activeValue,
+      names,
+      onActiveChange: setActiveValue,
+      onPick: (path) => pick(path),
+      options,
+      selectedKeys
+    })
+  });
+});
+CascaderPanel.displayName = "Cascader.Panel";
+var CascaderRoot = forwardRef(({
+  allowClear,
+  changeOnSelect,
+  className,
+  defaultOpen,
+  defaultValue,
+  disabled,
+  displayRender,
+  expandTrigger = "click",
+  fieldNames,
+  loadData,
+  multiple,
+  notFoundContent = "No data",
+  onChange,
+  onDropdownVisibleChange,
+  onOpenChange,
+  onSearch,
+  onSelect,
+  open,
+  options = [],
+  placeholder = "Please select",
+  showSearch,
+  size = "middle",
+  status,
+  value,
+  ...props
+}, ref) => {
+  const names = useMemo(() => normalizeFieldNames(fieldNames), [fieldNames]);
+  const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [activeValue, setActiveValue] = useState(normalizeSingleValue(value ?? defaultValue));
+  const [searchValue, setSearchValue] = useState("");
+  const controlledOpen = open !== undefined;
+  const visible = controlledOpen ? open : internalOpen;
+  const controlledValue = value !== undefined;
+  const currentValue = controlledValue ? value : internalValue;
+  const selectedValues = multiple ? normalizeMultipleValue(currentValue) : normalizeSingleValue(currentValue).length > 0 ? [normalizeSingleValue(currentValue)] : [];
+  const selectedKeys = new Set(selectedValues.map(valueKey));
+  const selectedPaths = selectedValues.map((item) => findPath(options, item, names));
+  const hasValue = selectedValues.length > 0;
+  const searchable = Boolean(showSearch);
+  const flattenedPaths = useMemo(() => flattenLeafPaths(options, names), [names, options]);
+  const filteredPaths = searchable && searchValue ? flattenedPaths.filter((path) => {
+    if (typeof showSearch === "object" && showSearch.filter) {
+      return showSearch.filter(searchValue, path, names);
+    }
+    return defaultFilter(searchValue, path, names);
+  }).slice(0, typeof showSearch === "object" && typeof showSearch.limit === "number" ? showSearch.limit : undefined) : [];
+  function setVisible(nextOpen) {
+    if (disabled) {
+      return;
+    }
+    if (!controlledOpen) {
+      setInternalOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+    onDropdownVisibleChange?.(nextOpen);
+  }
+  function emitChange(nextValue, selectedOptions) {
+    if (!controlledValue) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue, selectedOptions);
+  }
+  function pickPath(path, complete) {
+    const nextValue = valuesForPath(path, names);
+    onSelect?.(nextValue, path);
+    if (multiple) {
+      const currentValues = normalizeMultipleValue(currentValue);
+      const nextKey = valueKey(nextValue);
+      const selected = currentValues.some((item) => valueKey(item) === nextKey);
+      const nextValues = selected ? currentValues.filter((item) => valueKey(item) !== nextKey) : [...currentValues, nextValue];
+      const nextPaths = nextValues.map((item) => findPath(options, item, names));
+      emitChange(nextValues, nextPaths);
+      return;
+    }
+    if (complete || changeOnSelect) {
+      emitChange(nextValue, path);
+      if (complete) {
+        setVisible(false);
+      }
+    }
+  }
+  function clearValue(event) {
+    event.stopPropagation();
+    if (disabled) {
+      return;
+    }
+    const emptyValue = multiple ? [] : [];
+    if (!controlledValue) {
+      setInternalValue(emptyValue);
+    }
+    setActiveValue([]);
+    onChange?.(emptyValue, multiple ? [] : []);
+  }
+  function renderSelection() {
+    if (!hasValue) {
+      return /* @__PURE__ */ jsx("span", {
+        className: cascaderPlaceholderClass,
+        children: placeholder
+      });
+    }
+    if (multiple) {
+      return selectedPaths.map((path2, index) => /* @__PURE__ */ jsx("span", {
+        className: cascaderTagClass,
+        children: displayRender ? displayRender(labelsForPath(path2, names), path2) : defaultDisplay(labelsForPath(path2, names))
+      }, valueKey(selectedValues[index] ?? [])));
+    }
+    const path = selectedPaths[0] ?? [];
+    const labels = labelsForPath(path, names);
+    return displayRender ? displayRender(labels, path) : defaultDisplay(labels);
+  }
+  const searchResults = filteredPaths.length > 0 ? /* @__PURE__ */ jsx("div", {
+    className: cascaderMenuClass,
+    role: "menu",
+    children: filteredPaths.map((path) => {
+      const pathValue = valuesForPath(path, names);
+      const label = typeof showSearch === "object" && showSearch.render ? showSearch.render(searchValue, path, names) : defaultDisplay(labelsForPath(path, names));
+      return /* @__PURE__ */ jsx("button", {
+        type: "button",
+        role: "menuitem",
+        className: getCascaderOptionClasses({
+          selected: selectedKeys.has(valueKey(pathValue))
+        }),
+        onClick: () => {
+          setActiveValue(pathValue);
+          pickPath(path, true);
+          setSearchValue("");
+        },
+        children: label
+      }, valueKey(pathValue));
+    })
+  }) : /* @__PURE__ */ jsx("div", {
+    className: cascaderEmptyClass,
+    children: notFoundContent
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getCascaderContainerClasses({
+      open: visible,
+      disabled,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsxs("button", {
+        type: "button",
+        className: getCascaderClasses({ size, status, disabled }),
+        disabled,
+        "aria-haspopup": "menu",
+        "aria-expanded": visible,
+        onClick: () => setVisible(!visible),
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: cascaderSelectionClass,
+            children: renderSelection()
+          }),
+          allowClear && hasValue && !disabled ? /* @__PURE__ */ jsx("span", {
+            className: cascaderClearClass,
+            "aria-label": "Clear selection",
+            role: "button",
+            tabIndex: 0,
+            onClick: clearValue,
+            onKeyDown: (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.stopPropagation();
+                clearValue(event);
+              }
+            },
+            children: "x"
+          }) : null,
+          /* @__PURE__ */ jsx("span", {
+            className: cascaderIconClass,
+            "aria-hidden": "true",
+            children: "v"
+          })
+        ]
+      }),
+      visible ? /* @__PURE__ */ jsxs("div", {
+        className: cascaderDropdownClass,
+        children: [
+          searchable ? /* @__PURE__ */ jsx("input", {
+            className: cascaderSearchClass,
+            placeholder: typeof placeholder === "string" ? placeholder : undefined,
+            value: searchValue,
+            onChange: (event) => {
+              setSearchValue(event.currentTarget.value);
+              onSearch?.(event.currentTarget.value);
+            }
+          }) : null,
+          searchable && searchValue ? searchResults : /* @__PURE__ */ jsx(CascaderMenus, {
+            activeValue,
+            changeOnSelect,
+            disabled,
+            expandTrigger,
+            loadData,
+            multiple,
+            names,
+            onActiveChange: setActiveValue,
+            onPick: pickPath,
+            options,
+            selectedKeys
+          })
+        ]
+      }) : null
+    ]
+  });
+});
+CascaderRoot.displayName = "Cascader";
+var Cascader = Object.assign(CascaderRoot, {
+  Panel: CascaderPanel,
+  SHOW_PARENT: "SHOW_PARENT",
+  SHOW_CHILD: "SHOW_CHILD"
+});
+export {
+  Cascader
+};

package/dist/components/checkbox/Checkbox.d.ts

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

package/dist/components/checkbox/Checkbox.types.d.ts

@@ -0,0 +1,15 @@
+import type { ChangeEvent, ComponentProps, ReactNode } from "react";
+export type CheckboxColor = "primary" | "secondary" | "tertiary";
+export type CheckboxSize = "sm" | "md" | "lg";
+export type CheckboxLabelPosition = "left" | "right";
+export interface CheckboxProps extends Omit<ComponentProps<"input">, "children" | "className" | "size" | "type"> {
+    color?: CheckboxColor;
+    size?: CheckboxSize;
+    indeterminate?: boolean;
+    error?: boolean;
+    loading?: boolean;
+    labelPosition?: CheckboxLabelPosition;
+    className?: string;
+    children?: ReactNode;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/components/checkbox/index.d.ts

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