@duskmoon-dev/components 0.1.2

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

@@ -0,0 +1,319 @@
+"use client";
+
+// src/components/date-picker/DatePicker.tsx
+import { forwardRef, useMemo, useState } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/date-picker.ts
+var datePickerBaseClass = "datepicker";
+var datePickerInputClass = "datepicker-input";
+var datePickerIconClass = "datepicker-icon";
+var datePickerDropdownClass = "datepicker-dropdown";
+var datePickerDropdownOpenClass = "datepicker-dropdown-open";
+var datePickerFooterClass = "datepicker-footer";
+var datePickerPresetClass = "datepicker-preset";
+var datePickerRangeClass = "datepicker-range";
+var datePickerSeparatorClass = "datepicker-range-separator";
+var datePickerClearClass = "datepicker-clear";
+var datePickerSizeClasses = {
+  sm: "datepicker-sm",
+  md: "",
+  lg: "datepicker-lg"
+};
+var datePickerStatusClasses = {
+  error: "datepicker-error",
+  success: "datepicker-success"
+};
+var datePickerPickerClasses = {
+  date: "",
+  week: "datepicker-week",
+  month: "datepicker-month-picker",
+  quarter: "datepicker-quarter-picker",
+  year: "datepicker-year-picker",
+  time: "datepicker-time-picker"
+};
+function getDatePickerClasses({
+  size = "md",
+  status,
+  picker = "date",
+  open,
+  disabled,
+  range,
+  className
+}) {
+  return cn(datePickerBaseClass, datePickerSizeClasses[size], status && datePickerStatusClasses[status], datePickerPickerClasses[picker], open && "datepicker-open", disabled && "datepicker-disabled", range && datePickerRangeClass, className);
+}
+function getDatePickerDropdownClasses({
+  open,
+  className
+}) {
+  return cn(datePickerDropdownClass, open && datePickerDropdownOpenClass, className);
+}
+
+// src/components/date-picker/DatePicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function todayValue(picker) {
+  const today = new Date;
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, "0");
+  const day = String(today.getDate()).padStart(2, "0");
+  if (picker === "month")
+    return `${year}-${month}`;
+  if (picker === "year")
+    return String(year);
+  if (picker === "time")
+    return "00:00";
+  return `${year}-${month}-${day}`;
+}
+function inputTypeForPicker(picker) {
+  if (picker === "month")
+    return "month";
+  if (picker === "week")
+    return "week";
+  if (picker === "time")
+    return "time";
+  return picker === "year" || picker === "quarter" ? "text" : "date";
+}
+function placeholderForPicker(picker) {
+  if (picker === "month")
+    return "Select month";
+  if (picker === "week")
+    return "Select week";
+  if (picker === "quarter")
+    return "Select quarter";
+  if (picker === "year")
+    return "Select year";
+  if (picker === "time")
+    return "Select time";
+  return "Select date";
+}
+function normalizeDateValue(value) {
+  return typeof value === "string" && value.length > 0 ? value : undefined;
+}
+var DatePickerRoot = forwardRef(({
+  allowClear,
+  className,
+  defaultOpen,
+  defaultValue,
+  disabled,
+  disabledDate,
+  onBlur,
+  onChange,
+  onFocus,
+  onOpenChange,
+  open,
+  picker = "date",
+  placeholder,
+  presets,
+  showNow,
+  size = "md",
+  status,
+  value,
+  ...props
+}, ref) => {
+  const isValueControlled = value !== undefined;
+  const isOpenControlled = open !== undefined;
+  const [innerValue, setInnerValue] = useState(() => normalizeDateValue(defaultValue));
+  const [innerOpen, setInnerOpen] = useState(Boolean(defaultOpen));
+  const currentValue = isValueControlled ? normalizeDateValue(value) : innerValue;
+  const visible = isOpenControlled ? Boolean(open) : innerOpen;
+  const inputType = inputTypeForPicker(picker);
+  function setVisible(nextOpen) {
+    if (!isOpenControlled) {
+      setInnerOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  function emitChange(nextValue) {
+    if (nextValue && disabledDate?.(nextValue)) {
+      return;
+    }
+    if (!isValueControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, nextValue ?? "");
+  }
+  const presetItems = useMemo(() => presets ?? [], [presets]);
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      open: visible,
+      disabled,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        className: datePickerInputClass,
+        disabled,
+        type: inputType,
+        value: currentValue ?? "",
+        placeholder: placeholder ?? placeholderForPicker(picker),
+        onFocus: (event) => {
+          onFocus?.(event);
+          setVisible(true);
+        },
+        onBlur: (event) => {
+          onBlur?.(event);
+          setVisible(false);
+        },
+        onChange: (event) => emitChange(event.currentTarget.value || undefined)
+      }),
+      allowClear && currentValue && !disabled ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: datePickerClearClass,
+        "aria-label": "Clear date",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => emitChange(undefined),
+        children: "x"
+      }) : null,
+      /* @__PURE__ */ jsx("span", {
+        className: datePickerIconClass,
+        "aria-hidden": "true",
+        children: "calendar"
+      }),
+      (presetItems.length > 0 || showNow) && visible ? /* @__PURE__ */ jsxs("div", {
+        className: getDatePickerDropdownClasses({ open: visible }),
+        children: [
+          presetItems.map((preset, index) => /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: datePickerPresetClass,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => emitChange(preset.value),
+            children: preset.label
+          }, index)),
+          showNow ? /* @__PURE__ */ jsx("div", {
+            className: datePickerFooterClass,
+            children: /* @__PURE__ */ jsx("button", {
+              type: "button",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => emitChange(todayValue(picker)),
+              children: "Now"
+            })
+          }) : null
+        ]
+      }) : null
+    ]
+  });
+});
+DatePickerRoot.displayName = "DatePicker";
+var RangePicker = forwardRef(({
+  allowClear,
+  className,
+  defaultValue,
+  disabled,
+  disabledDate,
+  onChange,
+  picker = "date",
+  placeholder,
+  separator = "-",
+  size = "md",
+  status,
+  value,
+  ...props
+}, ref) => {
+  const isControlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(defaultValue ?? [undefined, undefined]);
+  const currentValue = isControlled ? value : innerValue;
+  const inputType = inputTypeForPicker(picker);
+  function emitChange(nextValue) {
+    if (nextValue.some((item) => item !== undefined && Boolean(disabledDate?.(item)))) {
+      return;
+    }
+    if (!isControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, [nextValue[0] ?? "", nextValue[1] ?? ""]);
+  }
+  function updateIndex(index, nextItem) {
+    emitChange(index === 0 ? [nextItem, currentValue?.[1]] : [currentValue?.[0], nextItem]);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getDatePickerClasses({
+      size,
+      status,
+      picker,
+      disabled,
+      range: true,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        className: datePickerInputClass,
+        disabled,
+        type: inputType,
+        value: currentValue?.[0] ?? "",
+        placeholder: Array.isArray(placeholder) ? placeholder[0] : "Start date",
+        onChange: (event) => updateIndex(0, event.currentTarget.value || undefined)
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: datePickerSeparatorClass,
+        children: separator
+      }),
+      /* @__PURE__ */ jsx("input", {
+        className: datePickerInputClass,
+        disabled,
+        type: inputType,
+        value: currentValue?.[1] ?? "",
+        placeholder: Array.isArray(placeholder) ? placeholder[1] : "End date",
+        onChange: (event) => updateIndex(1, event.currentTarget.value || undefined)
+      }),
+      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: datePickerClearClass,
+        "aria-label": "Clear date range",
+        onClick: () => emitChange([undefined, undefined]),
+        children: "x"
+      }) : null
+    ]
+  });
+});
+RangePicker.displayName = "DatePicker.RangePicker";
+function withPicker(picker, displayName) {
+  const Picker = forwardRef((props, ref) => /* @__PURE__ */ jsx(DatePickerRoot, {
+    ...props,
+    ref,
+    picker
+  }));
+  Picker.displayName = displayName;
+  return Picker;
+}
+var DatePicker = Object.assign(DatePickerRoot, {
+  RangePicker,
+  WeekPicker: withPicker("week", "DatePicker.WeekPicker"),
+  MonthPicker: withPicker("month", "DatePicker.MonthPicker"),
+  QuarterPicker: withPicker("quarter", "DatePicker.QuarterPicker"),
+  YearPicker: withPicker("year", "DatePicker.YearPicker")
+});
+export {
+  DatePicker
+};

package/dist/components/descriptions/Descriptions.d.ts

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

package/dist/components/descriptions/Descriptions.types.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps, CSSProperties, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type DescriptionsSize = "small" | "middle" | "default" | "sm" | "md" | "lg";
+export type DescriptionsLayout = "horizontal" | "vertical";
+export type DescriptionsBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type DescriptionsResponsiveValue = Partial<Record<DescriptionsBreakpoint, number>>;
+export type DescriptionsColumn = number | DescriptionsResponsiveValue;
+export type DescriptionsSpan = number | DescriptionsResponsiveValue | "filled";
+export interface DescriptionsItemType {
+    key?: string | number;
+    label?: ReactNode;
+    children?: ReactNode;
+    span?: DescriptionsSpan;
+    className?: string;
+    labelStyle?: CSSProperties;
+    contentStyle?: CSSProperties;
+}
+export interface DescriptionsProps extends Omit<ComponentProps<"div">, "children" | "title"> {
+    title?: ReactNode;
+    extra?: ReactNode;
+    items?: DescriptionsItemType[];
+    children?: ReactNode;
+    bordered?: boolean;
+    size?: DescriptionsSize;
+    column?: DescriptionsColumn;
+    layout?: DescriptionsLayout;
+    labelStyle?: CSSProperties;
+    contentStyle?: CSSProperties;
+}
+export interface DescriptionsItemProps extends Omit<ComponentProps<"div">, "children"> {
+    label?: ReactNode;
+    children?: ReactNode;
+    span?: DescriptionsSpan;
+    labelStyle?: CSSProperties;
+    contentStyle?: CSSProperties;
+}
+export type DescriptionsItemComponent = ForwardRefExoticComponent<DescriptionsItemProps & RefAttributes<HTMLDivElement>>;
+export type DescriptionsComponent = ForwardRefExoticComponent<DescriptionsProps & RefAttributes<HTMLDivElement>> & {
+    Item: DescriptionsItemComponent;
+};

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

@@ -0,0 +1,2 @@
+export { Descriptions } from "./Descriptions";
+export type { DescriptionsBreakpoint, DescriptionsColumn, DescriptionsComponent, DescriptionsItemComponent, DescriptionsItemProps, DescriptionsItemType, DescriptionsLayout, DescriptionsProps, DescriptionsResponsiveValue, DescriptionsSize, DescriptionsSpan, } from "./Descriptions.types";

package/dist/components/descriptions/index.js

@@ -0,0 +1,196 @@
+"use client";
+
+// src/components/descriptions/Descriptions.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/descriptions.ts
+var descriptionsBaseClass = "descriptions";
+var descriptionsBorderedClass = "descriptions-bordered";
+var descriptionsHeaderClass = "descriptions-header";
+var descriptionsTitleClass = "descriptions-title";
+var descriptionsExtraClass = "descriptions-extra";
+var descriptionsBodyClass = "descriptions-body";
+var descriptionsItemClass = "descriptions-item";
+var descriptionsItemLabelClass = "descriptions-item-label";
+var descriptionsItemContentClass = "descriptions-item-content";
+var descriptionsSizeClasses = {
+  small: "descriptions-sm",
+  middle: "descriptions-md",
+  default: "descriptions-lg",
+  sm: "descriptions-sm",
+  md: "descriptions-md",
+  lg: "descriptions-lg"
+};
+var descriptionsLayoutClasses = {
+  horizontal: "descriptions-horizontal",
+  vertical: "descriptions-vertical"
+};
+function getDescriptionsClasses({
+  bordered,
+  size = "default",
+  layout = "horizontal",
+  className
+}) {
+  return cn(descriptionsBaseClass, bordered && descriptionsBorderedClass, descriptionsSizeClasses[size], descriptionsLayoutClasses[layout], className);
+}
+
+// src/components/descriptions/Descriptions.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function hasNode(node) {
+  return node !== undefined && node !== null && node !== false;
+}
+function firstResponsiveNumber(value, fallback) {
+  if (!value)
+    return fallback;
+  return value.xxl ?? value.xl ?? value.lg ?? value.md ?? value.sm ?? value.xs ?? fallback;
+}
+function resolveColumn(column) {
+  if (typeof column === "number")
+    return Math.max(1, column);
+  return firstResponsiveNumber(column, 3);
+}
+function resolveSpan(span, column) {
+  if (span === "filled")
+    return column;
+  if (typeof span === "number")
+    return Math.min(Math.max(1, span), column);
+  return Math.min(firstResponsiveNumber(span, 1), column);
+}
+function toItems(items, children) {
+  if (items)
+    return items;
+  return React.Children.toArray(children).filter(React.isValidElement).map((child, index) => {
+    const props = child.props;
+    return {
+      key: child.key ?? index,
+      label: props.label,
+      children: props.children,
+      span: props.span,
+      className: props.className,
+      labelStyle: props.labelStyle,
+      contentStyle: props.contentStyle
+    };
+  });
+}
+var DescriptionsItem = forwardRef(({ children, label, span, labelStyle, contentStyle, className, style, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ...props,
+  ref,
+  className: cn(descriptionsItemClass, className),
+  style: {
+    ...style,
+    gridColumn: typeof span === "number" ? `span ${span} / span ${span}` : undefined
+  },
+  children: [
+    hasNode(label) ? /* @__PURE__ */ jsx("div", {
+      className: descriptionsItemLabelClass,
+      style: labelStyle,
+      children: label
+    }) : null,
+    /* @__PURE__ */ jsx("div", {
+      className: descriptionsItemContentClass,
+      style: contentStyle,
+      children
+    })
+  ]
+}));
+DescriptionsItem.displayName = "Descriptions.Item";
+var DescriptionsRoot = forwardRef(({
+  title,
+  extra,
+  items,
+  children,
+  bordered,
+  size = "default",
+  column,
+  layout = "horizontal",
+  labelStyle,
+  contentStyle,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const resolvedColumn = resolveColumn(column);
+  const descriptionItems = toItems(items, children);
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getDescriptionsClasses({
+      bordered,
+      size,
+      layout,
+      className
+    }),
+    style,
+    children: [
+      hasNode(title) || hasNode(extra) ? /* @__PURE__ */ jsxs("div", {
+        className: descriptionsHeaderClass,
+        children: [
+          hasNode(title) ? /* @__PURE__ */ jsx("div", {
+            className: descriptionsTitleClass,
+            children: title
+          }) : null,
+          hasNode(extra) ? /* @__PURE__ */ jsx("div", {
+            className: descriptionsExtraClass,
+            children: extra
+          }) : null
+        ]
+      }) : null,
+      /* @__PURE__ */ jsx("div", {
+        className: descriptionsBodyClass,
+        style: {
+          gridTemplateColumns: `repeat(${resolvedColumn}, minmax(0, 1fr))`
+        },
+        children: descriptionItems.map((item, index) => /* @__PURE__ */ jsxs("div", {
+          className: cn(descriptionsItemClass, item.className),
+          style: {
+            gridColumn: `span ${resolveSpan(item.span, resolvedColumn)} / span ${resolveSpan(item.span, resolvedColumn)}`
+          },
+          children: [
+            hasNode(item.label) ? /* @__PURE__ */ jsx("div", {
+              className: descriptionsItemLabelClass,
+              style: { ...labelStyle, ...item.labelStyle },
+              children: item.label
+            }) : null,
+            /* @__PURE__ */ jsx("div", {
+              className: descriptionsItemContentClass,
+              style: { ...contentStyle, ...item.contentStyle },
+              children: item.children
+            })
+          ]
+        }, item.key ?? index))
+      })
+    ]
+  });
+});
+DescriptionsRoot.displayName = "Descriptions";
+var Descriptions = Object.assign(DescriptionsRoot, {
+  Item: DescriptionsItem
+});
+export {
+  Descriptions
+};

package/dist/components/divider/Divider.d.ts

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

package/dist/components/divider/Divider.types.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerVariant = "solid" | "dashed" | "dotted";
+export type DividerThickness = "thin" | "medium" | "thick";
+export type DividerColor = "neutral" | "primary" | "secondary" | "tertiary";
+export type DividerSpacing = "normal" | "compact" | "comfortable" | "spacious";
+export interface DividerProps extends ComponentProps<"div"> {
+    orientation?: DividerOrientation;
+    variant?: DividerVariant;
+    thickness?: DividerThickness;
+    color?: DividerColor;
+    spacing?: DividerSpacing;
+    labelPosition?: "center" | "left" | "right";
+}

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

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

package/dist/components/divider/index.js

@@ -0,0 +1,108 @@
+"use client";
+
+// src/components/divider/Divider.tsx
+import { 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/divider.ts
+var dividerBaseClass = "divider";
+var dividerOrientationClasses = {
+  horizontal: "",
+  vertical: "divider-vertical"
+};
+var dividerVariantClasses = {
+  solid: "divider-solid",
+  dashed: "divider-dashed",
+  dotted: "divider-dotted"
+};
+var dividerThicknessClasses = {
+  thin: "divider-thin",
+  medium: "divider-medium",
+  thick: "divider-thick"
+};
+var dividerColorClasses = {
+  neutral: "",
+  primary: "divider-primary",
+  secondary: "divider-secondary",
+  tertiary: "divider-tertiary"
+};
+var dividerSpacingClasses = {
+  normal: "",
+  compact: "divider-compact",
+  comfortable: "divider-comfortable",
+  spacious: "divider-spacious"
+};
+function getDividerClasses({
+  orientation = "horizontal",
+  variant = "solid",
+  thickness = "thin",
+  color = "neutral",
+  spacing = "normal",
+  className
+}) {
+  return cn(dividerBaseClass, dividerOrientationClasses[orientation], dividerVariantClasses[variant], dividerThicknessClasses[thickness], dividerColorClasses[color], dividerSpacingClasses[spacing], className);
+}
+
+// src/components/divider/Divider.tsx
+import { jsx } from "react/jsx-runtime";
+var Divider = forwardRef(({
+  orientation = "horizontal",
+  variant = "solid",
+  thickness = "thin",
+  color = "neutral",
+  spacing = "normal",
+  labelPosition = "center",
+  className,
+  children,
+  role = "separator",
+  ...props
+}, ref) => {
+  const labelClass = children && orientation === "horizontal" ? {
+    center: "divider-text",
+    left: "divider-text-left",
+    right: "divider-text-right"
+  }[labelPosition] : undefined;
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    role,
+    "aria-orientation": orientation,
+    className: getDividerClasses({
+      orientation,
+      variant,
+      thickness,
+      color,
+      spacing,
+      className: cn(labelClass, className)
+    }),
+    ...props,
+    children
+  });
+});
+Divider.displayName = "Divider";
+export {
+  Divider
+};

package/dist/components/dm-auxiliary/DmAuxiliary.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { DmAuxiliaryProps } from "./DmAuxiliary.types";
+export declare const DmAuxiliary: React.ForwardRefExoticComponent<Omit<DmAuxiliaryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default DmAuxiliary;