@duskmoon-dev/components 0.1.2

package/dist/components/badge/index.js

@@ -0,0 +1,84 @@
+"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/badge.ts
+var badgeBaseClass = "badge";
+var badgeColorClasses = {
+  primary: "badge-primary",
+  secondary: "badge-secondary",
+  info: "badge-info",
+  success: "badge-success",
+  warning: "badge-warning",
+  error: "badge-error"
+};
+var badgeAppearanceClasses = {
+  filled: "",
+  outline: "badge-outline",
+  tonal: "badge-tonal",
+  ghost: "badge-ghost"
+};
+var badgeSizeClasses = {
+  sm: "badge-sm",
+  md: "badge-md",
+  lg: "badge-lg"
+};
+function getBadgeClasses({
+  color = "primary",
+  appearance = "filled",
+  size = "md",
+  className
+}) {
+  return cn(badgeBaseClass, badgeColorClasses[color], badgeAppearanceClasses[appearance], badgeSizeClasses[size], className);
+}
+
+// src/components/badge/Badge.tsx
+import { jsx } from "react/jsx-runtime";
+function Badge({
+  color = "primary",
+  appearance = "filled",
+  size = "md",
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const classes = getBadgeClasses({
+    color,
+    appearance,
+    size,
+    className
+  });
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: classes,
+    ...props,
+    children
+  });
+}
+export {
+  Badge
+};

package/dist/components/breadcrumb/Breadcrumb.d.ts

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

package/dist/components/breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,53 @@
+import type { ComponentProps, ForwardRefExoticComponent, Key, MouseEvent, MouseEventHandler, ReactNode, RefAttributes } from "react";
+export type BreadcrumbParams = Record<string, string | number | undefined>;
+export interface BreadcrumbMenuClickInfo {
+    key: Key;
+    item: BreadcrumbMenuItemType;
+    domEvent: MouseEvent<HTMLElement>;
+}
+export interface BreadcrumbMenuItemType {
+    key?: Key;
+    label?: ReactNode;
+    title?: ReactNode;
+    href?: string;
+    path?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLElement>;
+    children?: BreadcrumbMenuItemType[];
+}
+export interface BreadcrumbMenuProps {
+    items?: BreadcrumbMenuItemType[];
+    onClick?: (info: BreadcrumbMenuClickInfo) => void;
+    selectedKeys?: Key[];
+}
+export interface BreadcrumbRoute extends Omit<ComponentProps<"span">, "children" | "title" | "onClick"> {
+    key?: Key;
+    title?: ReactNode;
+    label?: ReactNode;
+    breadcrumbName?: ReactNode;
+    path?: string;
+    href?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    menu?: BreadcrumbMenuProps;
+    onClick?: MouseEventHandler<HTMLElement>;
+    children?: BreadcrumbRoute[];
+}
+export interface BreadcrumbSeparatorType {
+    type: "separator";
+    key?: Key;
+    separator?: ReactNode;
+    className?: string;
+}
+export type BreadcrumbItemType = BreadcrumbRoute | BreadcrumbSeparatorType;
+export type BreadcrumbItemRender = (route: BreadcrumbRoute, params: BreadcrumbParams, routes: BreadcrumbRoute[], paths: string[]) => ReactNode;
+export interface BreadcrumbProps extends Omit<ComponentProps<"nav">, "children"> {
+    items?: BreadcrumbItemType[];
+    routes?: BreadcrumbRoute[];
+    params?: BreadcrumbParams;
+    separator?: ReactNode;
+    itemRender?: BreadcrumbItemRender;
+    children?: ReactNode;
+}
+export type BreadcrumbComponent = ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,2 @@
+export { Breadcrumb } from "./Breadcrumb";
+export type { BreadcrumbComponent, BreadcrumbItemRender, BreadcrumbItemType, BreadcrumbMenuClickInfo, BreadcrumbMenuItemType, BreadcrumbMenuProps, BreadcrumbParams, BreadcrumbProps, BreadcrumbRoute, BreadcrumbSeparatorType, } from "./Breadcrumb.types";

package/dist/components/breadcrumb/index.js

@@ -0,0 +1,313 @@
+"use client";
+
+// src/components/breadcrumb/Breadcrumb.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/breadcrumb.ts
+var breadcrumbBaseClass = "breadcrumbs";
+var breadcrumbItemClass = "breadcrumb-item";
+var breadcrumbItemActiveClass = "breadcrumb-item-active";
+var breadcrumbItemDisabledClass = "breadcrumb-item-disabled";
+var breadcrumbLinkClass = "breadcrumb-link";
+var breadcrumbSeparatorClass = "breadcrumb-separator";
+var breadcrumbIconClass = "breadcrumb-icon";
+var breadcrumbMenuClass = "breadcrumb-menu";
+var breadcrumbMenuListClass = "breadcrumb-menu-list";
+var breadcrumbMenuItemClass = "breadcrumb-menu-item";
+function getBreadcrumbClasses({ className }) {
+  return cn(breadcrumbBaseClass, className);
+}
+function getBreadcrumbItemClasses({
+  active,
+  disabled,
+  className
+}) {
+  return cn(breadcrumbItemClass, active && breadcrumbItemActiveClass, disabled && breadcrumbItemDisabledClass, className);
+}
+function getBreadcrumbLinkClasses({
+  disabled,
+  className
+}) {
+  return cn(breadcrumbLinkClass, disabled && breadcrumbItemDisabledClass, className);
+}
+
+// src/components/breadcrumb/Breadcrumb.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var defaultSeparator = "/";
+function isSeparatorItem(item) {
+  return "type" in item && item.type === "separator";
+}
+function hasNode(node) {
+  return node !== undefined && node !== null && node !== false;
+}
+function getItemTitle(item) {
+  if ("breadcrumbName" in item && hasNode(item.breadcrumbName)) {
+    return item.breadcrumbName;
+  }
+  return item.title ?? item.label;
+}
+function replacePathParams(path, params) {
+  return path.replace(/:([^/]+)/g, (token, key) => {
+    const value = params?.[key];
+    return value === undefined ? token : encodeURIComponent(String(value));
+  });
+}
+function normalizePathSegment(path) {
+  return path.replace(/^\/+|\/+$/g, "");
+}
+function buildPaths(routes, routeIndex, params) {
+  return routes.slice(0, routeIndex + 1).reduce((paths, route) => {
+    if (!route.path) {
+      return paths;
+    }
+    const path = normalizePathSegment(replacePathParams(route.path, params));
+    if (path) {
+      paths.push(path);
+    }
+    return paths;
+  }, []);
+}
+function getHref(item, paths) {
+  if (item.href) {
+    return item.href;
+  }
+  if (!item.path || paths.length === 0) {
+    return;
+  }
+  return `/${paths.join("/")}`;
+}
+function activateOnKeyboard(event) {
+  if (event.key !== "Enter" && event.key !== " ") {
+    return;
+  }
+  event.preventDefault();
+  event.currentTarget.click();
+}
+function renderItemBody(item) {
+  const title = getItemTitle(item);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      item.icon ? /* @__PURE__ */ jsx("span", {
+        className: breadcrumbIconClass,
+        "aria-hidden": "true",
+        children: item.icon
+      }) : null,
+      hasNode(title) ? title : null
+    ]
+  });
+}
+function routeChildrenToMenu(children) {
+  if (!children?.length) {
+    return;
+  }
+  return {
+    items: children.map((child, index) => ({
+      key: child.key ?? child.path ?? index,
+      label: getItemTitle(child),
+      href: child.href,
+      path: child.path,
+      icon: child.icon,
+      disabled: child.disabled,
+      onClick: child.onClick,
+      children: child.children?.map((nested, nestedIndex) => ({
+        key: nested.key ?? nested.path ?? nestedIndex,
+        label: getItemTitle(nested),
+        href: nested.href,
+        path: nested.path,
+        icon: nested.icon,
+        disabled: nested.disabled,
+        onClick: nested.onClick
+      }))
+    }))
+  };
+}
+function renderMenuItems(menu, items = []) {
+  return items.map((item, index) => {
+    const key = item.key ?? item.path ?? index;
+    const href = item.href ?? item.path;
+    const label = renderItemBody(item);
+    function handleClick(event) {
+      if (item.disabled) {
+        event.preventDefault();
+        return;
+      }
+      item.onClick?.(event);
+      menu.onClick?.({ key, item, domEvent: event });
+    }
+    const content = item.disabled ? /* @__PURE__ */ jsx("span", {
+      role: "menuitem",
+      "aria-disabled": "true",
+      className: getBreadcrumbLinkClasses({
+        disabled: true,
+        className: breadcrumbMenuItemClass
+      }),
+      children: label
+    }) : href ? /* @__PURE__ */ jsx("a", {
+      role: "menuitem",
+      className: cn(breadcrumbMenuItemClass, getBreadcrumbLinkClasses({})),
+      href,
+      onClick: handleClick,
+      children: label
+    }) : /* @__PURE__ */ jsx("button", {
+      type: "button",
+      role: "menuitem",
+      className: cn(breadcrumbMenuItemClass, getBreadcrumbLinkClasses({})),
+      onClick: handleClick,
+      children: label
+    });
+    return /* @__PURE__ */ jsxs("li", {
+      children: [
+        content,
+        item.children?.length ? /* @__PURE__ */ jsx("ul", {
+          className: breadcrumbMenuListClass,
+          role: "menu",
+          children: renderMenuItems(menu, item.children)
+        }) : null
+      ]
+    }, key);
+  });
+}
+function renderDefaultItemContent(item, paths, active) {
+  const body = renderItemBody(item);
+  if (item.disabled) {
+    return body;
+  }
+  const href = item.href ?? (!active ? getHref(item, paths) : undefined);
+  if (href) {
+    return /* @__PURE__ */ jsx("a", {
+      className: getBreadcrumbLinkClasses({}),
+      href,
+      onClick: item.onClick,
+      children: body
+    });
+  }
+  if (item.onClick) {
+    return /* @__PURE__ */ jsx("span", {
+      role: "button",
+      tabIndex: 0,
+      className: getBreadcrumbLinkClasses({}),
+      onClick: item.onClick,
+      onKeyDown: activateOnKeyboard,
+      children: body
+    });
+  }
+  return body;
+}
+function renderMenuItem(item, menu, children, disabled) {
+  return /* @__PURE__ */ jsxs("details", {
+    className: getBreadcrumbItemClasses({
+      disabled,
+      className: cn(breadcrumbMenuClass, item.className)
+    }),
+    "aria-disabled": disabled || undefined,
+    children: [
+      /* @__PURE__ */ jsx("summary", {
+        className: getBreadcrumbLinkClasses({ disabled }),
+        children
+      }),
+      /* @__PURE__ */ jsx("ul", {
+        className: breadcrumbMenuListClass,
+        role: "menu",
+        children: renderMenuItems(menu, menu.items)
+      })
+    ]
+  });
+}
+var Breadcrumb = forwardRef(({
+  items,
+  routes,
+  params = {},
+  separator = defaultSeparator,
+  itemRender,
+  className,
+  children,
+  "aria-label": ariaLabel = "Breadcrumb",
+  ...props
+}, ref) => {
+  const entries = items ?? routes;
+  if (!entries?.length) {
+    return /* @__PURE__ */ jsx("nav", {
+      ...props,
+      ref,
+      "aria-label": ariaLabel,
+      className: getBreadcrumbClasses({ className }),
+      children
+    });
+  }
+  const routeEntries = entries.filter((item) => !isSeparatorItem(item));
+  let routeIndex = -1;
+  let previousRenderedItemWasSeparator = true;
+  return /* @__PURE__ */ jsx("nav", {
+    ...props,
+    ref,
+    "aria-label": ariaLabel,
+    className: getBreadcrumbClasses({ className }),
+    children: entries.map((entry, index) => {
+      if (isSeparatorItem(entry)) {
+        previousRenderedItemWasSeparator = true;
+        return /* @__PURE__ */ jsx("span", {
+          className: cn(breadcrumbSeparatorClass, entry.className),
+          "aria-hidden": "true",
+          children: entry.separator ?? separator
+        }, entry.key ?? `separator-${index}`);
+      }
+      routeIndex += 1;
+      const currentRouteIndex = routeIndex;
+      const paths = buildPaths(routeEntries, currentRouteIndex, params);
+      const active = currentRouteIndex === routeEntries.length - 1;
+      const menu = entry.menu ?? routeChildrenToMenu(entry.children);
+      const content = itemRender?.(entry, params, routeEntries, paths) ?? renderDefaultItemContent(entry, paths, active);
+      const applyActiveClass = active && !itemRender && !entry.href && !entry.onClick;
+      const insertSeparator = !previousRenderedItemWasSeparator;
+      previousRenderedItemWasSeparator = false;
+      return /* @__PURE__ */ jsxs(React.Fragment, {
+        children: [
+          insertSeparator ? /* @__PURE__ */ jsx("span", {
+            className: breadcrumbSeparatorClass,
+            "aria-hidden": "true",
+            children: separator
+          }) : null,
+          menu?.items?.length ? renderMenuItem(entry, menu, content, entry.disabled) : /* @__PURE__ */ jsx("span", {
+            className: getBreadcrumbItemClasses({
+              active: applyActiveClass,
+              disabled: entry.disabled,
+              className: entry.className
+            }),
+            "aria-current": active ? "page" : undefined,
+            "aria-disabled": entry.disabled || undefined,
+            children: content
+          })
+        ]
+      }, entry.key ?? entry.href ?? entry.path ?? currentRouteIndex);
+    })
+  });
+});
+Breadcrumb.displayName = "Breadcrumb";
+export {
+  Breadcrumb
+};

package/dist/components/button/Button.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { ButtonProps } from "./Button.types";
+export declare function Button({ color, appearance, shape, size, block, isLoading, leftIcon, rightIcon, className, children, disabled, ref, ...props }: ButtonProps): React.JSX.Element;

package/dist/components/button/Button.types.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+export type ButtonColor = "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error";
+export type ButtonAppearance = "filled" | "outline" | "tonal" | "ghost" | "text";
+export type ButtonShape = "rect" | "circle" | "square";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
+export interface ButtonProps extends ComponentProps<"button"> {
+    color?: ButtonColor;
+    appearance?: ButtonAppearance;
+    shape?: ButtonShape;
+    size?: ButtonSize;
+    block?: boolean;
+    isLoading?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}

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

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

package/dist/components/button/index.js

@@ -0,0 +1,125 @@
+"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
+      })
+    ]
+  });
+}
+export {
+  Button
+};

package/dist/components/calendar/Calendar.d.ts

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

package/dist/components/calendar/Calendar.types.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type CalendarMode = "month" | "year";
+export type CalendarValue = string | Date;
+export type CalendarSelectSource = "date" | "month" | "year" | "customize";
+export interface CalendarInfo {
+    originNode: ReactNode;
+    today: string;
+    range?: "start" | "end";
+    type: CalendarMode;
+}
+export interface CalendarSelectInfo {
+    source: CalendarSelectSource;
+}
+export interface CalendarHeaderRenderProps {
+    value: string;
+    type: CalendarMode;
+    onChange: (value: CalendarValue) => void;
+    onTypeChange: (type: CalendarMode) => void;
+}
+export interface CalendarProps extends Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "onSelect"> {
+    value?: CalendarValue;
+    defaultValue?: CalendarValue;
+    mode?: CalendarMode;
+    defaultMode?: CalendarMode;
+    fullscreen?: boolean;
+    validRange?: [CalendarValue, CalendarValue];
+    disabledDate?: (date: string) => boolean;
+    dateCellRender?: (date: string) => ReactNode;
+    dateFullCellRender?: (date: string) => ReactNode;
+    monthCellRender?: (date: string) => ReactNode;
+    monthFullCellRender?: (date: string) => ReactNode;
+    cellRender?: (current: string, info: CalendarInfo) => ReactNode;
+    fullCellRender?: (current: string, info: CalendarInfo) => ReactNode;
+    headerRender?: (props: CalendarHeaderRenderProps) => ReactNode;
+    onChange?: (date: string) => void;
+    onSelect?: (date: string, selectInfo: CalendarSelectInfo) => void;
+    onPanelChange?: (date: string, mode: CalendarMode) => void;
+}
+export type CalendarComponent = ForwardRefExoticComponent<CalendarProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { Calendar } from "./Calendar";
+export type { CalendarComponent, CalendarHeaderRenderProps, CalendarInfo, CalendarMode, CalendarProps, CalendarSelectInfo, CalendarSelectSource, CalendarValue, } from "./Calendar.types";