@duskmoon-dev/components 0.1.2

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,10 @@
+import type { ForwardRefExoticComponent, ReactElement, RefAttributes } from "react";
+import type { TabPaneProps, TabsProps } from "./Tabs.types";
+export declare const TabPane: {
+    (props: TabPaneProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>> & {
+    TabPane: typeof TabPane;
+};
+export type TabsTabPaneElement = ReactElement<TabPaneProps, typeof TabPane>;

package/dist/components/tabs/Tabs.types.d.ts

@@ -0,0 +1,48 @@
+import type { ComponentProps, CSSProperties, KeyboardEvent, MouseEvent, ReactNode } from "react";
+export type TabsKey = string;
+export type TabsPosition = "top" | "right" | "bottom" | "left";
+export type TabsType = "line" | "card" | "editable-card";
+export type TabsSize = "small" | "middle" | "large" | "sm" | "md" | "lg";
+export type TabsEditAction = "add" | "remove";
+export type TabsEditEvent = MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;
+export type TabsOnEdit = (targetKey: TabsKey | TabsEditEvent, action: TabsEditAction) => void;
+export interface TabsItem {
+    key: TabsKey;
+    label?: ReactNode;
+    children?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    closable?: boolean;
+    closeIcon?: ReactNode;
+    forceRender?: boolean;
+    destroyInactiveTabPane?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface TabPaneProps extends Omit<ComponentProps<"div">, "tab"> {
+    tab?: ReactNode;
+    label?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    closable?: boolean;
+    closeIcon?: ReactNode;
+    forceRender?: boolean;
+    children?: ReactNode;
+}
+export interface TabsProps extends Omit<ComponentProps<"div">, "children" | "onChange"> {
+    items?: TabsItem[];
+    activeKey?: TabsKey;
+    defaultActiveKey?: TabsKey;
+    onChange?: (activeKey: TabsKey) => void;
+    onTabClick?: (activeKey: TabsKey, event: MouseEvent<HTMLElement>) => void;
+    tabPosition?: TabsPosition;
+    type?: TabsType;
+    size?: TabsSize;
+    hideAdd?: boolean;
+    addIcon?: ReactNode;
+    removeIcon?: ReactNode;
+    onEdit?: TabsOnEdit;
+    destroyInactiveTabPane?: boolean;
+    centered?: boolean;
+    children?: ReactNode;
+}

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

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

package/dist/components/tabs/index.js

@@ -0,0 +1,359 @@
+"use client";
+
+// src/components/tabs/Tabs.tsx
+import {
+  Children,
+  Fragment,
+  forwardRef,
+  isValidElement,
+  useId,
+  useRef,
+  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/tabs.ts
+var tabsRootClass = "tabs-root";
+var tabsRootVerticalClass = "tabs-root-vertical";
+var tabsRootBottomClass = "tabs-root-bottom";
+var tabsRootRightClass = "tabs-root-right";
+var tabsBarClass = "tabs-bar";
+var tabsBaseClass = "tabs";
+var tabsVerticalClass = "tabs-vertical";
+var tabsScrollableClass = "tabs-scrollable";
+var tabsCenteredClass = "tabs-center";
+var tabsBoxedClass = "tabs-boxed";
+var tabBaseClass = "tab";
+var tabActiveClass = "tab-active";
+var tabDisabledClass = "tab-disabled";
+var tabIconClass = "tab-icon";
+var tabIconOnlyClass = "tab-icon-only";
+var tabPanelClass = "tab-panel";
+var tabPanelShowClass = "tab-panel-show";
+var tabsAddClass = "tab tab-add";
+var tabsCloseClass = "tab-icon tab-close";
+var tabsSizeClasses = {
+  small: "tabs-sm",
+  middle: "tabs-md",
+  large: "tabs-lg",
+  sm: "tabs-sm",
+  md: "tabs-md",
+  lg: "tabs-lg"
+};
+var tabsTypeClasses = {
+  line: "",
+  card: tabsBoxedClass,
+  "editable-card": tabsBoxedClass
+};
+function getTabsRootClasses({
+  tabPosition = "top",
+  className
+}) {
+  return cn(tabsRootClass, (tabPosition === "left" || tabPosition === "right") && tabsRootVerticalClass, tabPosition === "bottom" && tabsRootBottomClass, tabPosition === "right" && tabsRootRightClass, className);
+}
+function getTabsListClasses({
+  tabPosition = "top",
+  type = "line",
+  size = "middle",
+  centered
+}) {
+  return cn(tabsBaseClass, tabsScrollableClass, (tabPosition === "left" || tabPosition === "right") && tabsVerticalClass, tabsSizeClasses[size], tabsTypeClasses[type], centered && tabsCenteredClass);
+}
+function getTabClasses({
+  active,
+  disabled,
+  iconOnly,
+  className
+}) {
+  return cn(tabBaseClass, active && tabActiveClass, disabled && tabDisabledClass, iconOnly && tabIconOnlyClass, className);
+}
+function getTabPanelClasses({
+  active,
+  className
+}) {
+  return cn(tabPanelClass, active && tabPanelShowClass, className);
+}
+
+// src/components/tabs/Tabs.tsx
+import { jsx, jsxs, Fragment as Fragment2 } from "react/jsx-runtime";
+function stringifyKey(key, index) {
+  return key == null ? String(index) : String(key);
+}
+function normalizeItems(items, children) {
+  if (items)
+    return items;
+  const paneItems = [];
+  Children.forEach(children, (child, index) => {
+    if (!isValidElement(child))
+      return;
+    paneItems.push({
+      key: stringifyKey(child.key, index),
+      label: child.props.tab ?? child.props.label,
+      icon: child.props.icon,
+      disabled: child.props.disabled,
+      closable: child.props.closable,
+      closeIcon: child.props.closeIcon,
+      forceRender: child.props.forceRender,
+      className: child.props.className,
+      style: child.props.style,
+      children: child.props.children
+    });
+  });
+  return paneItems;
+}
+function getInitialActiveKey(items, defaultActiveKey) {
+  if (defaultActiveKey !== undefined)
+    return defaultActiveKey;
+  return items.find((item) => !item.disabled)?.key ?? items[0]?.key;
+}
+function getCurrentActiveKey(items, activeKey) {
+  if (activeKey !== undefined && items.some((item) => item.key === activeKey)) {
+    return activeKey;
+  }
+  return items.find((item) => !item.disabled)?.key ?? items[0]?.key;
+}
+function isEditable(type) {
+  return type === "editable-card";
+}
+function getTabLabel(item) {
+  const label = item.label ?? item.key;
+  return /* @__PURE__ */ jsxs(Fragment2, {
+    children: [
+      item.icon ? /* @__PURE__ */ jsx("span", {
+        className: tabIconClass,
+        children: item.icon
+      }) : null,
+      label
+    ]
+  });
+}
+function shouldRenderPanel({
+  item,
+  active,
+  destroyInactiveTabPane
+}) {
+  if (active || item.forceRender)
+    return true;
+  return !(item.destroyInactiveTabPane ?? destroyInactiveTabPane);
+}
+var TabPane = (props) => /* @__PURE__ */ jsx(Fragment2, {
+  children: props.children
+});
+TabPane.displayName = "Tabs.TabPane";
+var TabsBase = forwardRef(({
+  items,
+  activeKey,
+  defaultActiveKey,
+  onChange,
+  onTabClick,
+  tabPosition = "top",
+  type = "line",
+  size = "middle",
+  hideAdd,
+  addIcon,
+  removeIcon,
+  onEdit,
+  destroyInactiveTabPane,
+  centered,
+  className,
+  children,
+  id,
+  ...props
+}, ref) => {
+  const reactId = useId();
+  const tabsId = id ?? `tabs-${reactId}`;
+  const finalItems = normalizeItems(items, children);
+  const [internalActiveKey, setInternalActiveKey] = useState(() => getInitialActiveKey(finalItems, defaultActiveKey));
+  const isControlled = activeKey !== undefined;
+  const selectedKey = getCurrentActiveKey(finalItems, isControlled ? activeKey : internalActiveKey);
+  const tabRefs = useRef([]);
+  const editable = isEditable(type);
+  function changeActive(nextKey) {
+    if (nextKey === selectedKey)
+      return;
+    if (!isControlled) {
+      setInternalActiveKey(nextKey);
+    }
+    onChange?.(nextKey);
+  }
+  function selectItem(item, event) {
+    if (item.disabled)
+      return;
+    if (event) {
+      onTabClick?.(item.key, event);
+    }
+    changeActive(item.key);
+  }
+  function closeItem(item) {
+    if (item.disabled)
+      return;
+    onEdit?.(item.key, "remove");
+  }
+  function addItem(event) {
+    onEdit?.(event, "add");
+  }
+  function focusByOffset(index, offset) {
+    if (finalItems.length === 0)
+      return;
+    for (let step = 1;step <= finalItems.length; step += 1) {
+      const nextIndex = (index + offset * step + finalItems.length) % finalItems.length;
+      const nextItem = finalItems[nextIndex];
+      if (!nextItem.disabled) {
+        tabRefs.current[nextIndex]?.focus();
+        changeActive(nextItem.key);
+        return;
+      }
+    }
+  }
+  function focusEdge(edge) {
+    const candidates = edge === "first" ? finalItems : [...finalItems].reverse();
+    const item = candidates.find((candidate) => !candidate.disabled);
+    if (!item)
+      return;
+    const index = finalItems.findIndex((candidate) => candidate.key === item.key);
+    tabRefs.current[index]?.focus();
+    changeActive(item.key);
+  }
+  function handleKeyDown(item, index, event) {
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      focusByOffset(index, 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      focusByOffset(index, -1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focusEdge("first");
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focusEdge("last");
+    } else if (event.key === "Delete" && editable && item.closable !== false) {
+      event.preventDefault();
+      onEdit?.(item.key, "remove");
+    }
+  }
+  const tabList = /* @__PURE__ */ jsx("div", {
+    className: tabsBarClass,
+    children: /* @__PURE__ */ jsxs("div", {
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
+      className: getTabsListClasses({
+        tabPosition,
+        type,
+        size,
+        centered
+      }),
+      children: [
+        finalItems.map((item, index) => {
+          const active = item.key === selectedKey;
+          const panelId = `${tabsId}-panel-${item.key}`;
+          const tabId = `${tabsId}-tab-${item.key}`;
+          const showClose = editable && item.closable !== false && !item.disabled;
+          return /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                ref: (element) => {
+                  tabRefs.current[index] = element;
+                },
+                id: tabId,
+                type: "button",
+                role: "tab",
+                "aria-selected": active,
+                "aria-controls": panelId,
+                tabIndex: active ? 0 : -1,
+                disabled: item.disabled,
+                className: getTabClasses({
+                  active,
+                  disabled: item.disabled,
+                  iconOnly: item.icon != null && item.label == null
+                }),
+                onClick: (event) => selectItem(item, event),
+                onKeyDown: (event) => handleKeyDown(item, index, event),
+                children: getTabLabel(item)
+              }),
+              showClose ? /* @__PURE__ */ jsx("button", {
+                type: "button",
+                className: tabsCloseClass,
+                "aria-label": `Close tab ${item.key}`,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  closeItem(item);
+                },
+                children: item.closeIcon ?? removeIcon ?? "x"
+              }) : null
+            ]
+          }, item.key);
+        }),
+        editable && !hideAdd ? /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: tabsAddClass,
+          "aria-label": "Add tab",
+          onClick: addItem,
+          children: addIcon ?? "+"
+        }) : null
+      ]
+    })
+  });
+  const panels = finalItems.map((item) => {
+    const active = item.key === selectedKey;
+    if (!shouldRenderPanel({ item, active, destroyInactiveTabPane })) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", {
+      id: `${tabsId}-panel-${item.key}`,
+      role: "tabpanel",
+      "aria-labelledby": `${tabsId}-tab-${item.key}`,
+      hidden: !active,
+      "data-active": active ? "true" : undefined,
+      className: getTabPanelClasses({
+        active,
+        className: item.className
+      }),
+      style: item.style,
+      children: item.children
+    }, item.key);
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    id,
+    className: getTabsRootClasses({ tabPosition, className }),
+    children: [
+      tabPosition === "bottom" || tabPosition === "right" ? panels : null,
+      tabList,
+      tabPosition === "bottom" || tabPosition === "right" ? null : panels
+    ]
+  });
+});
+TabsBase.displayName = "Tabs";
+var Tabs = Object.assign(TabsBase, {
+  TabPane
+});
+export {
+  Tabs,
+  TabPane
+};

package/dist/components/tag/Tag.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { CheckableTagProps, TagComponent } from "./Tag.types";
+declare const CheckableTag: React.ForwardRefExoticComponent<Omit<CheckableTagProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Tag: TagComponent;
+export { CheckableTag };

package/dist/components/tag/Tag.types.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, ForwardRefExoticComponent, MouseEvent, ReactNode, RefAttributes } from "react";
+export type TagColor = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+export type TagType = TagColor | (string & {});
+export interface TagProps extends Omit<ComponentProps<"span">, "color"> {
+    color?: TagType;
+    icon?: ReactNode;
+    closable?: boolean;
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    closeIcon?: ReactNode;
+    bordered?: boolean;
+}
+export interface CheckableTagProps extends Omit<ComponentProps<"span">, "color" | "onChange"> {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+}
+export type CheckableTagComponent = ForwardRefExoticComponent<CheckableTagProps & RefAttributes<HTMLSpanElement>>;
+export type TagComponent = ForwardRefExoticComponent<TagProps & RefAttributes<HTMLSpanElement>> & {
+    CheckableTag: CheckableTagComponent;
+};

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

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

package/dist/components/tag/index.js

@@ -0,0 +1,151 @@
+"use client";
+
+// src/components/tag/Tag.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/tag.ts
+var tagBaseClass = "chip";
+var tagIconClass = "chip-icon";
+var tagCloseClass = "chip-remove";
+var tagCheckableClass = "chip-selectable";
+var tagCheckedClass = "chip-selected";
+var tagDisabledClass = "chip-disabled";
+var tagBorderlessClass = "chip-borderless";
+var tagCustomColorClass = "chip-custom-color";
+var tagColorClasses = {
+  primary: "chip-primary",
+  secondary: "chip-secondary",
+  tertiary: "chip-tertiary",
+  success: "chip-success",
+  error: "chip-error",
+  warning: "chip-warning",
+  info: "chip-info"
+};
+function getTagClasses({
+  color,
+  bordered = true,
+  className
+}) {
+  const colorClass = color ? tagColorClasses[color] ?? tagCustomColorClass : undefined;
+  return cn(tagBaseClass, bordered && "chip-outlined", colorClass, !bordered && tagBorderlessClass, className);
+}
+function getCheckableTagClasses({
+  checked,
+  disabled,
+  className
+}) {
+  return cn(tagBaseClass, tagCheckableClass, checked && tagCheckedClass, disabled && tagDisabledClass, className);
+}
+
+// src/components/tag/Tag.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultCloseIcon = "x";
+var TagRoot = forwardRef(({
+  color,
+  icon,
+  closable,
+  onClose,
+  closeIcon = defaultCloseIcon,
+  bordered = true,
+  className,
+  children,
+  ...props
+}, ref) => /* @__PURE__ */ jsxs("span", {
+  ref,
+  className: getTagClasses({ color, bordered, className }),
+  ...props,
+  children: [
+    icon ? /* @__PURE__ */ jsx("span", {
+      className: tagIconClass,
+      "aria-hidden": "true",
+      children: icon
+    }) : null,
+    children,
+    closable ? /* @__PURE__ */ jsx("button", {
+      type: "button",
+      className: tagCloseClass,
+      "aria-label": "Close",
+      onClick: onClose,
+      children: closeIcon
+    }) : null
+  ]
+}));
+TagRoot.displayName = "Tag";
+var CheckableTag = forwardRef(({
+  checked = false,
+  onChange,
+  disabled,
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  tabIndex,
+  ...props
+}, ref) => {
+  function emitChange() {
+    if (disabled) {
+      return;
+    }
+    onChange?.(!checked);
+  }
+  function handleClick(event) {
+    onClick?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    emitChange();
+  }
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.key !== "Enter" && event.key !== " ") {
+      return;
+    }
+    event.preventDefault();
+    emitChange();
+  }
+  return /* @__PURE__ */ jsx("span", {
+    ...props,
+    ref,
+    role: "checkbox",
+    "aria-checked": checked,
+    "aria-disabled": disabled || undefined,
+    tabIndex: disabled ? -1 : tabIndex ?? 0,
+    className: cn(getCheckableTagClasses({ checked, disabled }), className),
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    children
+  });
+});
+CheckableTag.displayName = "Tag.CheckableTag";
+var Tag = Object.assign(TagRoot, {
+  CheckableTag
+});
+export {
+  Tag,
+  CheckableTag
+};

package/dist/components/time-picker/TimePicker.d.ts

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

package/dist/components/time-picker/TimePicker.types.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentProps, FocusEvent, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type TimePickerValue = string | Date;
+export type TimePickerRangeValue = [
+    TimePickerValue | undefined,
+    TimePickerValue | undefined
+];
+export type TimePickerSize = "sm" | "md" | "lg";
+export type TimePickerStatus = "error" | "success";
+export interface DisabledTimeConfig {
+    disabledHours?: () => number[];
+    disabledMinutes?: (selectedHour: number) => number[];
+    disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+}
+export interface TimePickerProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onBlur" | "onChange" | "onFocus"> {
+    value?: TimePickerValue;
+    defaultValue?: TimePickerValue;
+    format?: string;
+    disabled?: boolean;
+    disabledTime?: (value?: TimePickerValue) => DisabledTimeConfig;
+    use12Hours?: boolean;
+    showNow?: boolean;
+    allowClear?: boolean;
+    placeholder?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    size?: TimePickerSize;
+    status?: TimePickerStatus;
+    onChange?: (value: TimePickerValue | undefined, timeString: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    onBlur?: (event: TimePickerInputFocusEvent) => void;
+    onFocus?: (event: TimePickerInputFocusEvent) => void;
+}
+export interface RangePickerProps extends Omit<TimePickerProps, "placeholder" | "value" | "defaultValue" | "onChange"> {
+    value?: TimePickerRangeValue;
+    defaultValue?: TimePickerRangeValue;
+    onChange?: (value: TimePickerRangeValue, timeStrings: [string, string]) => void;
+    placeholder?: [string, string];
+    separator?: ReactNode;
+}
+export interface TimePickerComponent extends ForwardRefExoticComponent<TimePickerProps & RefAttributes<HTMLDivElement>> {
+    RangePicker: ForwardRefExoticComponent<RangePickerProps & RefAttributes<HTMLDivElement>>;
+}
+export type TimePickerInputFocusEvent = FocusEvent<HTMLInputElement>;

package/dist/components/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from "./TimePicker";
+export type { DisabledTimeConfig, RangePickerProps as TimeRangePickerProps, TimePickerComponent, TimePickerProps, TimePickerRangeValue, TimePickerSize, TimePickerStatus, TimePickerValue, } from "./TimePicker.types";