@duskmoon-dev/components 0.1.2

package/dist/components/input-number/index.js

@@ -0,0 +1,175 @@
+"use client";
+
+// src/components/input-number/InputNumber.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/input-number.ts
+var inputNumberBaseClass = "input-number";
+var inputNumberInputClass = "input-number-input";
+var inputNumberControlsClass = "input-number-controls";
+var inputNumberControlClass = "input-number-control";
+var inputNumberDisabledClass = "input-number-disabled";
+var inputNumberSizeClasses = {
+  sm: "input-number-sm",
+  md: "",
+  lg: "input-number-lg"
+};
+var inputNumberStatusClasses = {
+  error: "input-number-error",
+  success: "input-number-success"
+};
+function getInputNumberClasses({
+  size = "md",
+  status,
+  disabled,
+  className
+}) {
+  return cn(inputNumberBaseClass, inputNumberSizeClasses[size], status && inputNumberStatusClasses[status], disabled && inputNumberDisabledClass, className);
+}
+
+// src/components/input-number/InputNumber.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function clamp(value, min, max) {
+  const withMin = min === undefined ? value : Math.max(min, value);
+  return max === undefined ? withMin : Math.min(max, withMin);
+}
+function normalizePrecision(value, precision) {
+  if (precision === undefined)
+    return value;
+  return Number(value.toFixed(precision));
+}
+function parseNumber(value) {
+  if (value.trim() === "")
+    return null;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+function toDisplayValue(value, formatter) {
+  if (formatter)
+    return formatter(value);
+  return value === null || value === undefined ? "" : String(value);
+}
+var InputNumber = forwardRef(({
+  className,
+  controls = true,
+  defaultValue = null,
+  disabled,
+  formatter,
+  keyboard = true,
+  max,
+  min,
+  onChange,
+  onKeyDown,
+  onStep,
+  parser = parseNumber,
+  precision,
+  size = "md",
+  status,
+  step = 1,
+  value,
+  ...props
+}, ref) => {
+  const controlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(defaultValue);
+  const currentValue = controlled ? value : innerValue;
+  const displayValue = useMemo(() => toDisplayValue(currentValue, formatter), [currentValue, formatter]);
+  function emitChange(nextValue) {
+    const normalized = typeof nextValue === "number" ? normalizePrecision(clamp(nextValue, min, max), precision) : nextValue;
+    if (!controlled) {
+      setInnerValue(normalized);
+    }
+    onChange?.(normalized);
+    return normalized;
+  }
+  function stepValue(type) {
+    if (disabled)
+      return;
+    const offset = type === "up" ? step : -step;
+    const base = typeof currentValue === "number" ? currentValue : 0;
+    const nextValue = emitChange(base + offset);
+    onStep?.(nextValue, { offset, type });
+  }
+  return /* @__PURE__ */ jsxs("span", {
+    className: getInputNumberClasses({
+      size,
+      status,
+      disabled,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        ...props,
+        ref,
+        type: "text",
+        inputMode: "decimal",
+        className: inputNumberInputClass,
+        disabled,
+        value: displayValue,
+        onChange: (event) => emitChange(parser(event.currentTarget.value)),
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (!keyboard || event.defaultPrevented)
+            return;
+          if (event.key === "ArrowUp") {
+            event.preventDefault();
+            stepValue("up");
+          }
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            stepValue("down");
+          }
+        }
+      }),
+      controls ? /* @__PURE__ */ jsxs("span", {
+        className: inputNumberControlsClass,
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: inputNumberControlClass,
+            disabled: disabled || max !== undefined && Number(currentValue) >= max,
+            "aria-label": "Increase value",
+            onClick: () => stepValue("up"),
+            children: "+"
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: inputNumberControlClass,
+            disabled: disabled || min !== undefined && Number(currentValue) <= min,
+            "aria-label": "Decrease value",
+            onClick: () => stepValue("down"),
+            children: "-"
+          })
+        ]
+      }) : null
+    ]
+  });
+});
+InputNumber.displayName = "InputNumber";
+export {
+  InputNumber
+};

package/dist/components/layout/Layout.d.ts

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

package/dist/components/layout/Layout.types.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentProps, CSSProperties, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type LayoutBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export interface LayoutProps extends Omit<ComponentProps<"div">, "ref"> {
+    hasSider?: boolean;
+}
+export type LayoutSectionProps = Omit<ComponentProps<"div">, "ref">;
+export type CollapseType = "clickTrigger" | "responsive";
+export interface LayoutSiderProps extends LayoutSectionProps {
+    collapsible?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapse?: (collapsed: boolean, type: CollapseType) => void;
+    width?: CSSProperties["width"];
+    collapsedWidth?: CSSProperties["width"];
+    trigger?: ReactNode;
+    breakpoint?: LayoutBreakpoint;
+}
+export interface LayoutComponent extends ForwardRefExoticComponent<LayoutProps & RefAttributes<HTMLDivElement>> {
+    Header: ForwardRefExoticComponent<LayoutSectionProps & RefAttributes<HTMLDivElement>>;
+    Sider: ForwardRefExoticComponent<LayoutSiderProps & RefAttributes<HTMLDivElement>>;
+    Content: ForwardRefExoticComponent<LayoutSectionProps & RefAttributes<HTMLDivElement>>;
+    Footer: ForwardRefExoticComponent<LayoutSectionProps & RefAttributes<HTMLDivElement>>;
+}

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

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

package/dist/components/layout/index.js

@@ -0,0 +1,142 @@
+"use client";
+
+// src/components/layout/Layout.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/layout.ts
+var layoutBaseClass = "layout";
+var layoutHasSiderClass = "layout-has-sider";
+var layoutHeaderClass = "layout-header";
+var layoutSiderClass = "layout-sider";
+var layoutSiderCollapsedClass = "layout-sider-collapsed";
+var layoutContentClass = "layout-content";
+var layoutFooterClass = "layout-footer";
+var layoutTriggerClass = "layout-trigger";
+function getLayoutClasses({
+  hasSider,
+  className
+}) {
+  return cn(layoutBaseClass, hasSider && layoutHasSiderClass, className);
+}
+function getLayoutSiderClasses({
+  collapsed,
+  className
+}) {
+  return cn(layoutSiderClass, collapsed && layoutSiderCollapsedClass, className);
+}
+
+// src/components/layout/Layout.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function toSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+var Header = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(layoutHeaderClass, className)
+}));
+Header.displayName = "Layout.Header";
+var Content = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(layoutContentClass, className)
+}));
+Content.displayName = "Layout.Content";
+var Footer = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(layoutFooterClass, className)
+}));
+Footer.displayName = "Layout.Footer";
+var Sider = forwardRef(({
+  children,
+  collapsible,
+  collapsed,
+  defaultCollapsed,
+  onCollapse,
+  width = 200,
+  collapsedWidth = 80,
+  trigger,
+  breakpoint,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const controlled = collapsed !== undefined;
+  const [internalCollapsed, setInternalCollapsed] = useState(() => defaultCollapsed ?? false);
+  const mergedCollapsed = controlled ? collapsed : internalCollapsed;
+  const siderWidth = toSize(mergedCollapsed ? collapsedWidth : width);
+  function toggleCollapsed() {
+    const nextCollapsed = !mergedCollapsed;
+    if (!controlled) {
+      setInternalCollapsed(nextCollapsed);
+    }
+    onCollapse?.(nextCollapsed, "clickTrigger");
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    "data-breakpoint": breakpoint,
+    className: getLayoutSiderClasses({
+      collapsed: mergedCollapsed,
+      className
+    }),
+    style: {
+      flex: `0 0 ${siderWidth}`,
+      maxWidth: siderWidth,
+      minWidth: siderWidth,
+      width: siderWidth,
+      ...style
+    },
+    children: [
+      children,
+      collapsible && trigger !== null ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: layoutTriggerClass,
+        "aria-label": mergedCollapsed ? "Expand sider" : "Collapse sider",
+        onClick: toggleCollapsed,
+        children: trigger ?? (mergedCollapsed ? ">" : "<")
+      }) : null
+    ]
+  });
+});
+Sider.displayName = "Layout.Sider";
+var LayoutRoot = forwardRef(({ hasSider, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: getLayoutClasses({ hasSider, className })
+}));
+LayoutRoot.displayName = "Layout";
+LayoutRoot.Header = Header;
+LayoutRoot.Sider = Sider;
+LayoutRoot.Content = Content;
+LayoutRoot.Footer = Footer;
+var Layout = LayoutRoot;
+export {
+  Layout
+};

package/dist/components/list/List.d.ts

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

package/dist/components/list/List.types.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes } from "react";
+export type ListSize = "sm" | "md" | "lg";
+export interface ListProps<T = unknown> extends Omit<ComponentProps<"div">, "children"> {
+    dataSource?: T[];
+    renderItem?: (item: T, index: number) => ReactNode;
+    children?: ReactNode;
+    bordered?: boolean;
+    size?: ListSize;
+}
+export interface ListItemProps extends ComponentProps<"div"> {
+    actions?: ReactNode[] | ReactNode;
+    extra?: ReactNode;
+    disabled?: boolean;
+}
+export interface ListItemMetaProps extends Omit<ComponentProps<"div">, "title"> {
+    avatar?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+}
+export type ListItemMetaComponent = ForwardRefExoticComponent<ListItemMetaProps & RefAttributes<HTMLDivElement>>;
+export type ListItemComponent = ForwardRefExoticComponent<ListItemProps & RefAttributes<HTMLDivElement>> & {
+    Meta: ListItemMetaComponent;
+};
+export type ListComponent = (<T = unknown>(props: ListProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null) & {
+    Item: ListItemComponent;
+    displayName?: string;
+};

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

@@ -0,0 +1,2 @@
+export { List } from "./List";
+export type { ListComponent, ListItemComponent, ListItemMetaComponent, ListItemMetaProps, ListItemProps, ListProps, ListSize, } from "./List.types";

package/dist/components/list/index.js

@@ -0,0 +1,175 @@
+"use client";
+
+// src/components/list/List.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/list.ts
+var listBaseClass = "list";
+var listBorderedClass = "list-bordered";
+var listItemClass = "list-item";
+var listItemInteractiveClass = "list-item-interactive";
+var listItemDisabledClass = "list-item-disabled";
+var listItemContentClass = "list-item-content";
+var listItemTextClass = "list-item-text";
+var listItemSecondaryClass = "list-item-secondary";
+var listItemLeadingClass = "list-item-leading";
+var listItemTrailingClass = "list-item-trailing";
+var listSizeClasses = {
+  sm: "list-compact",
+  md: "",
+  lg: "list-comfortable"
+};
+function getListClasses({
+  bordered,
+  size = "md",
+  className
+}) {
+  return cn(listBaseClass, bordered && listBorderedClass, listSizeClasses[size], className);
+}
+function getListItemClasses({
+  interactive,
+  disabled,
+  className
+}) {
+  return cn(listItemClass, interactive && !disabled && listItemInteractiveClass, disabled && listItemDisabledClass, className);
+}
+
+// src/components/list/List.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function hasNode(node) {
+  return node !== undefined && node !== null && node !== false;
+}
+function ListRoot({
+  dataSource,
+  renderItem,
+  children,
+  bordered,
+  size = "md",
+  className,
+  ...props
+}, ref) {
+  const renderedItems = dataSource && renderItem ? dataSource.map((item, index) => /* @__PURE__ */ jsx(React.Fragment, {
+    children: renderItem(item, index)
+  }, index)) : children;
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    className: getListClasses({ bordered, size, className }),
+    children: renderedItems
+  });
+}
+var ListRootWithRef = forwardRef(ListRoot);
+var ListItemMeta = forwardRef(({ avatar, title, description, className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+  ...props,
+  ref,
+  className: cn(listItemContentClass, className),
+  children: [
+    avatar ? /* @__PURE__ */ jsx("div", {
+      className: listItemLeadingClass,
+      children: avatar
+    }) : null,
+    hasNode(title) ? /* @__PURE__ */ jsx("div", {
+      className: listItemTextClass,
+      children: title
+    }) : null,
+    hasNode(description) ? /* @__PURE__ */ jsx("div", {
+      className: listItemSecondaryClass,
+      children: description
+    }) : null,
+    children
+  ]
+}));
+ListItemMeta.displayName = "List.Item.Meta";
+function renderTrailing(extra, actions) {
+  const actionNodes = React.Children.toArray(actions);
+  if (!hasNode(extra) && actionNodes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className: listItemTrailingClass,
+    children: [
+      extra,
+      actionNodes
+    ]
+  });
+}
+var ListItemRoot = forwardRef(({
+  children,
+  actions,
+  extra,
+  className,
+  disabled,
+  onClick,
+  tabIndex,
+  role,
+  onKeyDown,
+  ...props
+}, ref) => {
+  const interactive = Boolean(onClick);
+  function handleClick(event) {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (disabled || event.defaultPrevented || !onClick || event.key !== "Enter" && event.key !== " ") {
+      return;
+    }
+    event.preventDefault();
+    onClick(event);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    role: role ?? (interactive ? "button" : undefined),
+    "aria-disabled": disabled || undefined,
+    tabIndex: tabIndex ?? (interactive && !disabled ? 0 : undefined),
+    className: getListItemClasses({ interactive, disabled, className }),
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: listItemContentClass,
+        children
+      }),
+      renderTrailing(extra, actions)
+    ]
+  });
+});
+ListItemRoot.displayName = "List.Item";
+ListItemRoot.Meta = ListItemMeta;
+var List = Object.assign(ListRootWithRef, {
+  Item: ListItemRoot
+});
+List.displayName = "List";
+export {
+  List
+};

package/dist/components/mentions/Mentions.d.ts

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

package/dist/components/mentions/Mentions.types.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type MentionsPlacement = "top" | "bottom";
+export interface MentionsOptionType {
+    value: string;
+    label?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export interface MentionsProps extends Omit<ComponentProps<"textarea">, "children" | "defaultValue" | "onChange" | "onSelect" | "prefix" | "value"> {
+    children?: ReactNode;
+    defaultValue?: string;
+    filterOption?: boolean | ((input: string, option: MentionsOptionType) => boolean);
+    notFoundContent?: ReactNode;
+    onChange?: (value: string) => void;
+    onSearch?: (text: string, prefix: string) => void;
+    onSelect?: (option: MentionsOptionType, prefix: string) => void;
+    options?: MentionsOptionType[];
+    placement?: MentionsPlacement;
+    prefix?: string | string[];
+    split?: string;
+    value?: string;
+}
+export interface MentionsOptionProps extends Omit<ComponentProps<"div">, "children"> {
+    children?: ReactNode;
+    disabled?: boolean;
+    value: string;
+}
+export type MentionsComponent = ForwardRefExoticComponent<MentionsProps & RefAttributes<HTMLTextAreaElement>> & {
+    Option: ForwardRefExoticComponent<MentionsOptionProps & RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,2 @@
+export { Mentions } from "./Mentions";
+export type { MentionsComponent, MentionsOptionProps, MentionsOptionType, MentionsPlacement, MentionsProps, } from "./Mentions.types";