@duskmoon-dev/components 0.1.2

package/dist/components/steps/index.js

@@ -0,0 +1,311 @@
+"use client";
+
+// src/components/steps/Steps.tsx
+import React, { forwardRef } 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/steps.ts
+var stepsBaseClass = "stepper";
+var stepsVerticalClass = "stepper-vertical";
+var stepsAltLabelsClass = "stepper-alt-labels";
+var stepsProgressDotClass = "stepper-progress-dot";
+var stepsWithPercentClass = "stepper-with-percent";
+var stepsStepClass = "stepper-step";
+var stepsStepButtonClass = "stepper-step-button";
+var stepsStepIconClass = "stepper-step-icon";
+var stepsStepLabelClass = "stepper-step-label";
+var stepsStepDescriptionClass = "stepper-step-description";
+var stepsStepConnectorClass = "stepper-step-connector";
+var stepsStepBodyClass = "stepper-step-body";
+var stepsStepSubtitleClass = "stepper-step-subtitle";
+var stepsStepClickableClass = "stepper-step-clickable";
+var stepsStepDotClass = "stepper-step-dot";
+var stepsStepPercentClass = "stepper-step-percent";
+var stepsStepProgressClass = "stepper-step-progress";
+var stepsDirectionClasses = {
+  horizontal: "",
+  vertical: stepsVerticalClass
+};
+var stepsStatusClasses = {
+  wait: "stepper-step-wait",
+  process: "stepper-step-active",
+  finish: "stepper-step-completed",
+  error: "stepper-step-error"
+};
+function getStepsClasses({
+  direction = "horizontal",
+  progressDot,
+  percent,
+  className
+}) {
+  return cn(stepsBaseClass, stepsDirectionClasses[direction], progressDot && stepsAltLabelsClass, progressDot && stepsProgressDotClass, percent !== undefined && stepsWithPercentClass, className);
+}
+function getStepsStepClasses({
+  status,
+  disabled,
+  clickable,
+  className
+}) {
+  return cn(stepsStepClass, stepsStatusClasses[status], disabled && "stepper-step-disabled", clickable && stepsStepClickableClass, className);
+}
+function getStepsStepIconClasses({
+  progressDot,
+  percent
+}) {
+  return cn(stepsStepIconClass, progressDot && stepsStepDotClass, percent && stepsStepProgressClass);
+}
+
+// src/components/steps/Steps.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function hasNode(node) {
+  return node !== undefined && node !== null && node !== false;
+}
+function toInteger(value, fallback) {
+  if (value === undefined || !Number.isFinite(value)) {
+    return fallback;
+  }
+  return Math.floor(value);
+}
+function clampPercent(percent) {
+  if (!Number.isFinite(percent)) {
+    return 0;
+  }
+  return Math.min(100, Math.max(0, percent));
+}
+var Step = forwardRef(() => null);
+Step.displayName = "Steps.Step";
+function isStepElement(child) {
+  return React.isValidElement(child) && child.type === Step;
+}
+function getStepItems(items, children) {
+  if (items) {
+    return items;
+  }
+  return React.Children.toArray(children).flatMap((child) => {
+    if (!isStepElement(child)) {
+      return [];
+    }
+    return [
+      {
+        ...child.props,
+        key: child.key ?? undefined
+      }
+    ];
+  });
+}
+function getItemDescription(item) {
+  return item.description ?? item.content ?? item.children;
+}
+function getItemContent(item) {
+  return item.content ?? item.description ?? item.children;
+}
+function getStepStatus({
+  item,
+  index,
+  current,
+  currentStatus
+}) {
+  if (item.status) {
+    return item.status;
+  }
+  if (index < current) {
+    return "finish";
+  }
+  if (index === current) {
+    return currentStatus;
+  }
+  return "wait";
+}
+function renderProgressDot({
+  progressDot,
+  item,
+  index,
+  status
+}) {
+  const iconDot = /* @__PURE__ */ jsx("span", {
+    className: "stepper-step-dot-inner"
+  });
+  if (typeof progressDot !== "function") {
+    return iconDot;
+  }
+  return progressDot(iconDot, {
+    index,
+    status,
+    title: item.title,
+    description: getItemDescription(item),
+    content: getItemContent(item)
+  });
+}
+function renderStepIcon({
+  item,
+  index,
+  initial,
+  status,
+  progressDot,
+  percent
+}) {
+  const progressDotEnabled = Boolean(progressDot);
+  const progressPercent = !progressDotEnabled && status === "process" && percent !== undefined ? clampPercent(percent) : undefined;
+  const icon = progressDotEnabled ? renderProgressDot({
+    progressDot,
+    item,
+    index,
+    status
+  }) : item.icon ?? (status === "finish" ? "✓" : initial + index + 1);
+  return /* @__PURE__ */ jsx("span", {
+    className: getStepsStepIconClasses({
+      progressDot: progressDotEnabled,
+      percent: progressPercent !== undefined
+    }),
+    "aria-hidden": progressPercent === undefined ? "true" : undefined,
+    children: progressPercent !== undefined ? /* @__PURE__ */ jsx("span", {
+      className: stepsStepPercentClass,
+      role: "progressbar",
+      "aria-label": `Step ${index + 1} progress`,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": progressPercent,
+      style: {
+        "--steps-percent": `${progressPercent}%`
+      },
+      children: icon
+    }) : icon
+  });
+}
+function renderStepContent(item) {
+  const description = getItemDescription(item);
+  return /* @__PURE__ */ jsxs("span", {
+    className: stepsStepBodyClass,
+    children: [
+      hasNode(item.title) || hasNode(item.subTitle) ? /* @__PURE__ */ jsxs("span", {
+        className: stepsStepLabelClass,
+        children: [
+          item.title,
+          hasNode(item.subTitle) ? /* @__PURE__ */ jsx("span", {
+            className: stepsStepSubtitleClass,
+            children: item.subTitle
+          }) : null
+        ]
+      }) : null,
+      hasNode(description) ? /* @__PURE__ */ jsx("span", {
+        className: stepsStepDescriptionClass,
+        children: description
+      }) : null
+    ]
+  });
+}
+var StepsRoot = forwardRef(({
+  items,
+  children,
+  current,
+  status = "process",
+  direction = "horizontal",
+  progressDot,
+  percent,
+  initial,
+  onChange,
+  className,
+  role,
+  ...props
+}, ref) => {
+  const stepItems = getStepItems(items, children);
+  const mergedCurrent = toInteger(current, 0);
+  const initialOffset = toInteger(initial, 0);
+  const progressDotEnabled = Boolean(progressDot);
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    role: role ?? "list",
+    className: getStepsClasses({
+      direction,
+      progressDot: progressDotEnabled,
+      percent,
+      className
+    }),
+    children: stepItems.map((item, index) => {
+      const stepStatus = getStepStatus({
+        item,
+        index,
+        current: mergedCurrent,
+        currentStatus: status
+      });
+      const clickable = Boolean(onChange) && !item.disabled;
+      const content = /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          renderStepIcon({
+            item,
+            index,
+            initial: initialOffset,
+            status: stepStatus,
+            progressDot,
+            percent: index === mergedCurrent ? percent : undefined
+          }),
+          renderStepContent(item)
+        ]
+      });
+      return /* @__PURE__ */ jsxs("div", {
+        role: "listitem",
+        "aria-current": index === mergedCurrent ? "step" : undefined,
+        className: getStepsStepClasses({
+          status: stepStatus,
+          disabled: item.disabled,
+          clickable,
+          className: item.className
+        }),
+        style: item.style,
+        children: [
+          onChange ? /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: stepsStepButtonClass,
+            disabled: item.disabled,
+            onClick: () => {
+              if (!item.disabled) {
+                onChange(index);
+              }
+            },
+            children: content
+          }) : /* @__PURE__ */ jsx("div", {
+            className: stepsStepButtonClass,
+            children: content
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: stepsStepConnectorClass,
+            "aria-hidden": "true"
+          })
+        ]
+      }, item.key ?? index);
+    })
+  });
+});
+StepsRoot.displayName = "Steps";
+var Steps = Object.assign(StepsRoot, {
+  Step
+});
+export {
+  Steps,
+  Step
+};

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import type { SwitchProps } from "./Switch.types";
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/switch/Switch.types.d.ts

@@ -0,0 +1,16 @@
+import type { ChangeEvent, ComponentProps, ReactNode } from "react";
+export type SwitchSize = "sm" | "md" | "lg";
+export type SwitchColor = "primary" | "secondary" | "tertiary";
+export type SwitchChangeEvent = ChangeEvent<HTMLInputElement>;
+export interface SwitchProps extends Omit<ComponentProps<"input">, "checked" | "children" | "className" | "color" | "defaultChecked" | "onChange" | "size" | "type"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean, event: SwitchChangeEvent) => void;
+    disabled?: boolean;
+    loading?: boolean;
+    size?: SwitchSize;
+    color?: SwitchColor;
+    checkedChildren?: ReactNode;
+    unCheckedChildren?: ReactNode;
+    className?: string;
+}

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

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

package/dist/components/switch/index.js

@@ -0,0 +1,120 @@
+"use client";
+
+// src/components/switch/Switch.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/switch.ts
+var switchBaseClass = "switch";
+var switchInputClass = "switch-input";
+var switchTrackClass = "switch-track";
+var switchThumbClass = "switch-thumb";
+var switchLoadingClass = "switch-loading";
+var switchSizeClasses = {
+  sm: "switch-sm",
+  md: "",
+  lg: "switch-lg"
+};
+var switchColorClasses = {
+  primary: "switch-primary",
+  secondary: "switch-secondary",
+  tertiary: "switch-tertiary"
+};
+function getSwitchClasses({
+  size = "md",
+  loading,
+  className
+}) {
+  return cn(switchBaseClass, switchSizeClasses[size], loading && switchLoadingClass, className);
+}
+function getSwitchTrackClasses({
+  color = "primary"
+}) {
+  return cn(switchTrackClass, switchColorClasses[color]);
+}
+
+// src/components/switch/Switch.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Switch = forwardRef(({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  loading,
+  size = "md",
+  color = "primary",
+  checkedChildren,
+  unCheckedChildren,
+  className,
+  ...props
+}, ref) => {
+  const [internalChecked, setInternalChecked] = useState(() => defaultChecked ?? false);
+  const isControlled = checked !== undefined;
+  const isChecked = isControlled ? checked : internalChecked;
+  const isDisabled = disabled || loading;
+  const hasChildren = checkedChildren != null || unCheckedChildren != null;
+  function handleChange(event) {
+    const nextChecked = event.currentTarget.checked;
+    if (!isControlled) {
+      setInternalChecked(nextChecked);
+    }
+    onChange?.(nextChecked, event);
+  }
+  return /* @__PURE__ */ jsxs("label", {
+    className: getSwitchClasses({ size, loading, className }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        ...props,
+        ref,
+        type: "checkbox",
+        role: "switch",
+        className: switchInputClass,
+        checked: isChecked,
+        disabled: isDisabled,
+        "aria-checked": isChecked,
+        "aria-busy": loading || undefined,
+        onChange: handleChange
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: getSwitchTrackClasses({ color }),
+        "aria-hidden": "true",
+        children: [
+          hasChildren && /* @__PURE__ */ jsx("span", {
+            children: isChecked ? checkedChildren : unCheckedChildren
+          }),
+          /* @__PURE__ */ jsx("span", {
+            className: switchThumbClass
+          })
+        ]
+      })
+    ]
+  });
+});
+Switch.displayName = "Switch";
+export {
+  Switch
+};

package/dist/components/table/Table.d.ts

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

package/dist/components/table/Table.types.d.ts

@@ -0,0 +1,142 @@
+import type { ComponentProps, CSSProperties, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes } from "react";
+export type TableKey = string | number;
+export type TableRecord = Record<string, unknown>;
+export type DataIndex = string | number | readonly (string | number)[];
+export type SortOrder = "ascend" | "descend" | null;
+export type FilterValue = Array<string | number | boolean | null>;
+export type TableSize = "small" | "middle" | "large";
+export type TableRowKey<T> = keyof T | ((record: T, index: number) => TableKey);
+export interface TablePaginationConfig {
+    current?: number;
+    defaultCurrent?: number;
+    pageSize?: number;
+    defaultPageSize?: number;
+    total?: number;
+    disabled?: boolean;
+    hideOnSinglePage?: boolean;
+    showTotal?: (total: number, range: [number, number]) => ReactNode;
+    onChange?: (page: number, pageSize: number) => void;
+}
+export interface TableFilterItem {
+    text: ReactNode;
+    value: string | number | boolean;
+    children?: TableFilterItem[];
+}
+export type TableSorter<T> = boolean | ((first: T, second: T) => number) | {
+    compare?: (first: T, second: T) => number;
+    multiple?: number;
+};
+export interface TableColumnType<T = TableRecord> {
+    title?: ReactNode;
+    dataIndex?: DataIndex;
+    key?: TableKey;
+    width?: string | number;
+    align?: "left" | "center" | "right";
+    className?: string;
+    fixed?: "left" | "right" | boolean;
+    ellipsis?: boolean;
+    render?: (value: unknown, record: T, index: number) => ReactNode;
+    sorter?: TableSorter<T>;
+    sortOrder?: SortOrder;
+    defaultSortOrder?: SortOrder;
+    sortDirections?: SortOrder[];
+    filters?: TableFilterItem[];
+    filteredValue?: FilterValue | null;
+    defaultFilteredValue?: FilterValue | null;
+    filterMultiple?: boolean;
+    onFilter?: (value: string | number | boolean | null, record: T) => boolean;
+    children?: TableColumnsType<T>;
+    onCell?: (record: T, index: number) => ComponentProps<"td">;
+    onHeaderCell?: (column: TableColumnType<T>) => ComponentProps<"th">;
+}
+export interface TableColumnGroupType<T = TableRecord> extends Omit<TableColumnType<T>, "dataIndex" | "render" | "sorter" | "filters"> {
+    children: TableColumnsType<T>;
+}
+export type TableColumnsType<T = TableRecord> = TableColumnType<T>[];
+export type TableColumnProps<T = TableRecord> = TableColumnType<T> & {
+    children?: ReactNode;
+};
+export type TableColumnGroupProps<T = TableRecord> = Omit<TableColumnGroupType<T>, "children"> & {
+    children?: ReactNode;
+};
+export interface SorterResult<T = TableRecord> {
+    column?: TableColumnType<T>;
+    columnKey?: TableKey;
+    field?: DataIndex;
+    order?: SortOrder;
+}
+export interface TableCurrentDataSource<T = TableRecord> {
+    currentDataSource: T[];
+    action: "paginate" | "sort" | "filter";
+}
+export interface TableRowSelection<T = TableRecord> {
+    type?: "checkbox" | "radio";
+    selectedRowKeys?: TableKey[];
+    defaultSelectedRowKeys?: TableKey[];
+    hideSelectAll?: boolean;
+    columnTitle?: ReactNode;
+    getCheckboxProps?: (record: T) => ComponentProps<"input">;
+    renderCell?: (checked: boolean, record: T, index: number, originNode: ReactNode) => ReactNode;
+    onChange?: (selectedRowKeys: TableKey[], selectedRows: T[]) => void;
+    onSelect?: (record: T, selected: boolean, selectedRows: T[], nativeEvent: Event) => void;
+    onSelectAll?: (selected: boolean, selectedRows: T[], changedRows: T[]) => void;
+}
+export interface TableExpandableConfig<T = TableRecord> {
+    expandedRowKeys?: TableKey[];
+    defaultExpandedRowKeys?: TableKey[];
+    expandedRowRender?: (record: T, index: number, indent: number, expanded: boolean) => ReactNode;
+    rowExpandable?: (record: T) => boolean;
+    expandRowByClick?: boolean;
+    columnTitle?: ReactNode;
+    onExpand?: (expanded: boolean, record: T) => void;
+    onExpandedRowsChange?: (expandedKeys: TableKey[]) => void;
+}
+export interface TableLocale {
+    emptyText?: ReactNode;
+}
+export interface TableProps<T = TableRecord> extends Omit<ComponentProps<"div">, "onChange"> {
+    columns?: TableColumnsType<T>;
+    dataSource?: T[];
+    rowKey?: TableRowKey<T>;
+    loading?: boolean | {
+        spinning?: boolean;
+        indicator?: ReactNode;
+    };
+    bordered?: boolean;
+    size?: TableSize;
+    pagination?: false | TablePaginationConfig;
+    rowSelection?: TableRowSelection<T>;
+    expandable?: TableExpandableConfig<T>;
+    summary?: (pageData: readonly T[]) => ReactNode;
+    locale?: TableLocale;
+    tableLayout?: CSSProperties["tableLayout"];
+    scroll?: {
+        x?: number | string | true;
+        y?: number | string;
+    };
+    onChange?: (pagination: TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: SorterResult<T>, extra: TableCurrentDataSource<T>) => void;
+}
+export interface TableSummaryProps extends ComponentProps<"tfoot"> {
+    fixed?: boolean | "top" | "bottom";
+}
+export type TableSummaryRowProps = ComponentProps<"tr">;
+export type TableSummaryCellProps = ComponentProps<"td"> & {
+    index?: number;
+};
+export type TableColumnComponent = ForwardRefExoticComponent<TableColumnProps & RefAttributes<HTMLTableCellElement>>;
+export type TableColumnGroupComponent = ForwardRefExoticComponent<TableColumnGroupProps & RefAttributes<HTMLTableCellElement>>;
+export type TableSummaryComponent = ForwardRefExoticComponent<TableSummaryProps & RefAttributes<HTMLTableSectionElement>> & {
+    Row: ForwardRefExoticComponent<TableSummaryRowProps & RefAttributes<HTMLTableRowElement>>;
+    Cell: ForwardRefExoticComponent<TableSummaryCellProps & RefAttributes<HTMLTableCellElement>>;
+};
+export type TableComponent = (<T = TableRecord>(props: TableProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null) & {
+    Column: TableColumnComponent;
+    ColumnGroup: TableColumnGroupComponent;
+    Summary: TableSummaryComponent;
+    SELECTION_ALL: "SELECT_ALL";
+    SELECTION_INVERT: "SELECT_INVERT";
+    SELECTION_NONE: "SELECT_NONE";
+    SELECTION_COLUMN: "SELECTION_COLUMN";
+    EXPAND_COLUMN: "EXPAND_COLUMN";
+    displayName?: string;
+};

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

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