@duskmoon-dev/components 0.1.2

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

@@ -0,0 +1,323 @@
+"use client";
+
+// src/components/time-picker/TimePicker.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/time-picker.ts
+var timePickerBaseClass = "time-input time-picker";
+var timePickerInputClass = "time-picker-input";
+var timePickerIconClass = "time-picker-icon";
+var timePickerClearClass = "time-picker-clear";
+var timePickerPanelClass = "time-input-picker time-picker-panel";
+var timePickerFooterClass = "time-picker-footer";
+var timePickerNowClass = "time-picker-now";
+var timePickerRangeClass = "time-picker-range";
+var timePickerSeparatorClass = "time-picker-range-separator";
+var timePickerSizeClasses = {
+  sm: "time-picker-sm",
+  md: "",
+  lg: "time-picker-lg"
+};
+var timePickerStatusClasses = {
+  error: "time-picker-error",
+  success: "time-picker-success"
+};
+function getTimePickerClasses({
+  size = "md",
+  status,
+  disabled,
+  open,
+  range,
+  className
+}) {
+  return cn(timePickerBaseClass, timePickerSizeClasses[size], status && timePickerStatusClasses[status], disabled && "time-picker-disabled", open && "time-picker-open", range && timePickerRangeClass, className);
+}
+function getTimePickerPanelClasses({
+  open,
+  className
+}) {
+  return cn(timePickerPanelClass, open && "time-picker-panel-open", className);
+}
+
+// src/components/time-picker/TimePicker.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TIME_PARTS_PATTERN = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*([AaPp][Mm])?$/;
+function padTimePart(value) {
+  return String(value).padStart(2, "0");
+}
+function readDateTime(value) {
+  return {
+    hour: value.getHours(),
+    minute: value.getMinutes(),
+    second: value.getSeconds()
+  };
+}
+function parseTimeParts(value) {
+  const match = value.trim().match(TIME_PARTS_PATTERN);
+  if (!match) {
+    return;
+  }
+  let hour = Number(match[1]);
+  const minute = Number(match[2]);
+  const second = match[3] === undefined ? 0 : Number(match[3]);
+  const meridiem = match[4]?.toLowerCase();
+  if (meridiem) {
+    if (hour < 1 || hour > 12)
+      return;
+    if (meridiem === "pm" && hour < 12)
+      hour += 12;
+    if (meridiem === "am" && hour === 12)
+      hour = 0;
+  }
+  if (hour > 23 || minute > 59 || second > 59) {
+    return;
+  }
+  return { hour, minute, second };
+}
+function valueToParts(value) {
+  if (value === undefined)
+    return;
+  if (value instanceof Date)
+    return readDateTime(value);
+  return parseTimeParts(value);
+}
+function formatParts(parts, format, use12Hours) {
+  const twelveHour = parts.hour % 12 || 12;
+  const meridiem = parts.hour >= 12 ? "PM" : "AM";
+  return format.replace(/HH/g, padTimePart(parts.hour)).replace(/H/g, String(parts.hour)).replace(/hh/g, padTimePart(twelveHour)).replace(/h/g, String(twelveHour)).replace(/mm/g, padTimePart(parts.minute)).replace(/m/g, String(parts.minute)).replace(/ss/g, padTimePart(parts.second)).replace(/s/g, String(parts.second)).replace(/A/g, meridiem).replace(/a/g, use12Hours ? meridiem.toLowerCase() : "");
+}
+function displayValue(value, format, use12Hours) {
+  const parts = valueToParts(value);
+  return parts ? formatParts(parts, format, use12Hours) : "";
+}
+function normalizedTimeString(value, format, use12Hours) {
+  return displayValue(value, format, use12Hours);
+}
+function isDisabledTime(value, props) {
+  if (!value || !props.disabledTime) {
+    return false;
+  }
+  const parts = valueToParts(value);
+  if (!parts) {
+    return false;
+  }
+  const config = props.disabledTime(value);
+  return config.disabledHours?.().includes(parts.hour) || config.disabledMinutes?.(parts.hour).includes(parts.minute) || config.disabledSeconds?.(parts.hour, parts.minute).includes(parts.second) || false;
+}
+function nowValue() {
+  const now = new Date;
+  return `${padTimePart(now.getHours())}:${padTimePart(now.getMinutes())}:${padTimePart(now.getSeconds())}`;
+}
+var TimePickerRoot = forwardRef(({
+  allowClear,
+  className,
+  defaultOpen,
+  defaultValue,
+  disabled,
+  disabledTime,
+  format,
+  onBlur,
+  onChange,
+  onFocus,
+  onOpenChange,
+  open,
+  placeholder = "Select time",
+  showNow = true,
+  size = "md",
+  status,
+  use12Hours,
+  value,
+  ...props
+}, ref) => {
+  const timeFormat = format ?? (use12Hours ? "h:mm:ss A" : "HH:mm:ss");
+  const isValueControlled = value !== undefined;
+  const isOpenControlled = open !== undefined;
+  const [innerValue, setInnerValue] = useState(defaultValue);
+  const [innerOpen, setInnerOpen] = useState(Boolean(defaultOpen));
+  const currentValue = isValueControlled ? value : innerValue;
+  const visible = isOpenControlled ? Boolean(open) : innerOpen;
+  function setVisible(nextOpen) {
+    if (!isOpenControlled) {
+      setInnerOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  function emitChange(nextValue) {
+    if (isDisabledTime(nextValue, { disabledTime, use12Hours })) {
+      return;
+    }
+    if (!isValueControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, normalizedTimeString(nextValue, timeFormat, use12Hours));
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getTimePickerClasses({
+      size,
+      status,
+      disabled,
+      open: visible,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        className: timePickerInputClass,
+        disabled,
+        value: displayValue(currentValue, timeFormat, use12Hours),
+        placeholder,
+        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: timePickerClearClass,
+        "aria-label": "Clear time",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => emitChange(undefined),
+        children: "x"
+      }) : null,
+      /* @__PURE__ */ jsx("span", {
+        className: timePickerIconClass,
+        "aria-hidden": "true",
+        children: "clock"
+      }),
+      showNow && visible ? /* @__PURE__ */ jsx("div", {
+        className: getTimePickerPanelClasses({ open: visible }),
+        children: /* @__PURE__ */ jsx("div", {
+          className: timePickerFooterClass,
+          children: /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: timePickerNowClass,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => emitChange(nowValue()),
+            children: "Now"
+          })
+        })
+      }) : null
+    ]
+  });
+});
+TimePickerRoot.displayName = "TimePicker";
+var RangePicker = forwardRef(({
+  allowClear,
+  className,
+  defaultValue,
+  disabled,
+  disabledTime,
+  format,
+  onChange,
+  placeholder,
+  separator = "-",
+  showNow,
+  size = "md",
+  status,
+  use12Hours,
+  value,
+  ...props
+}, ref) => {
+  const timeFormat = format ?? (use12Hours ? "h:mm:ss A" : "HH:mm:ss");
+  const isControlled = value !== undefined;
+  const [innerValue, setInnerValue] = useState(defaultValue ?? [undefined, undefined]);
+  const currentValue = isControlled ? value : innerValue;
+  function emitChange(nextValue) {
+    if (nextValue.some((item) => isDisabledTime(item, { disabledTime, use12Hours }))) {
+      return;
+    }
+    if (!isControlled) {
+      setInnerValue(nextValue);
+    }
+    onChange?.(nextValue, [
+      normalizedTimeString(nextValue[0], timeFormat, use12Hours),
+      normalizedTimeString(nextValue[1], timeFormat, use12Hours)
+    ]);
+  }
+  function updateIndex(index, nextItem) {
+    emitChange(index === 0 ? [nextItem, currentValue?.[1]] : [currentValue?.[0], nextItem]);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getTimePickerClasses({
+      size,
+      status,
+      disabled,
+      range: true,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        className: timePickerInputClass,
+        disabled,
+        value: displayValue(currentValue?.[0], timeFormat, use12Hours),
+        placeholder: placeholder?.[0] ?? "Start time",
+        onChange: (event) => updateIndex(0, event.currentTarget.value || undefined)
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: timePickerSeparatorClass,
+        children: separator
+      }),
+      /* @__PURE__ */ jsx("input", {
+        className: timePickerInputClass,
+        disabled,
+        value: displayValue(currentValue?.[1], timeFormat, use12Hours),
+        placeholder: placeholder?.[1] ?? "End time",
+        onChange: (event) => updateIndex(1, event.currentTarget.value || undefined)
+      }),
+      showNow ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: timePickerNowClass,
+        disabled,
+        onClick: () => emitChange([nowValue(), nowValue()]),
+        children: "Now"
+      }) : null,
+      allowClear && (currentValue?.[0] || currentValue?.[1]) && !disabled ? /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: timePickerClearClass,
+        "aria-label": "Clear time range",
+        onClick: () => emitChange([undefined, undefined]),
+        children: "x"
+      }) : null
+    ]
+  });
+});
+RangePicker.displayName = "TimePicker.RangePicker";
+var TimePicker = Object.assign(TimePickerRoot, {
+  RangePicker
+});
+export {
+  TimePicker
+};

package/dist/components/timeline/Timeline.d.ts

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

package/dist/components/timeline/Timeline.types.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactNode } from "react";
+export type TimelineMode = "left" | "right" | "alternate";
+export type TimelineColor = "primary" | "secondary" | "tertiary" | "success" | "error";
+export type TimelineSize = "sm" | "md" | "lg";
+export interface TimelineItem {
+    children?: ReactNode;
+    label?: ReactNode;
+    color?: TimelineColor;
+    dot?: ReactNode;
+    pending?: boolean;
+    className?: string;
+}
+export interface TimelineProps extends Omit<ComponentProps<"div">, "children"> {
+    items?: TimelineItem[];
+    children?: ReactNode;
+    mode?: TimelineMode;
+    pending?: ReactNode | boolean;
+    reverse?: boolean;
+    size?: TimelineSize;
+}

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

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

package/dist/components/timeline/index.js

@@ -0,0 +1,130 @@
+"use client";
+
+// src/components/timeline/Timeline.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/timeline.ts
+var timelineBaseClass = "timeline";
+var timelineItemClass = "timeline-item";
+var timelineMarkerBaseClass = "timeline-marker";
+var timelineMarkerIconClass = "timeline-marker-icon";
+var timelineContentClass = "timeline-content";
+var timelineTimeClass = "timeline-time";
+var timelinePendingClass = "timeline-item-pending";
+var timelineModeClasses = {
+  left: "",
+  right: "timeline-right",
+  alternate: "timeline-alternate"
+};
+var timelineSizeClasses = {
+  sm: "timeline-sm",
+  md: "",
+  lg: "timeline-lg"
+};
+var timelineMarkerColorClasses = {
+  primary: "",
+  secondary: "timeline-marker-secondary",
+  tertiary: "timeline-marker-tertiary",
+  success: "timeline-marker-success",
+  error: "timeline-marker-error"
+};
+function getTimelineClasses({
+  mode = "left",
+  size = "md",
+  className
+}) {
+  return cn(timelineBaseClass, timelineModeClasses[mode], timelineSizeClasses[size], className);
+}
+function getTimelineMarkerClasses({
+  color = "primary",
+  hasIcon
+}) {
+  return cn(timelineMarkerBaseClass, timelineMarkerColorClasses[color], hasIcon && timelineMarkerIconClass);
+}
+
+// src/components/timeline/Timeline.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function buildItems({
+  items,
+  children,
+  pending,
+  reverse
+}) {
+  const timelineItems = items ? [...items] : [{ children }];
+  if (pending) {
+    timelineItems.push({
+      children: pending === true ? "Loading..." : pending,
+      pending: true
+    });
+  }
+  return reverse ? timelineItems.reverse() : timelineItems;
+}
+var Timeline = forwardRef(({
+  items,
+  children,
+  mode = "left",
+  pending,
+  reverse,
+  size = "md",
+  className,
+  ...props
+}, ref) => {
+  const timelineItems = buildItems({ items, children, pending, reverse });
+  return /* @__PURE__ */ jsx("div", {
+    ...props,
+    ref,
+    className: getTimelineClasses({ mode, size, className }),
+    children: timelineItems.map((item, index) => /* @__PURE__ */ jsxs("div", {
+      className: cn(timelineItemClass, item.pending && timelinePendingClass, item.className),
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          className: getTimelineMarkerClasses({
+            color: item.color,
+            hasIcon: Boolean(item.dot)
+          }),
+          "aria-hidden": "true",
+          children: item.dot
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          className: timelineContentClass,
+          children: [
+            item.label ? /* @__PURE__ */ jsx("span", {
+              className: timelineTimeClass,
+              children: item.label
+            }) : null,
+            item.children
+          ]
+        })
+      ]
+    }, index))
+  });
+});
+Timeline.displayName = "Timeline";
+export {
+  Timeline
+};

package/dist/components/tooltip/Tooltip.d.ts

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

package/dist/components/tooltip/Tooltip.types.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentProps, ReactNode } from "react";
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+export type TooltipSize = "sm" | "md" | "lg";
+export interface TooltipProps extends Omit<ComponentProps<"span">, "title"> {
+    title?: ReactNode;
+    placement?: TooltipPlacement;
+    open?: boolean;
+    defaultOpen?: boolean;
+    arrow?: boolean;
+    size?: TooltipSize;
+    children: ReactNode;
+}

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

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

package/dist/components/tooltip/index.js

@@ -0,0 +1,133 @@
+"use client";
+
+// src/components/tooltip/Tooltip.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/tooltip.ts
+var tooltipWrapperClass = "tooltip-wrapper";
+var tooltipBaseClass = "tooltip";
+var tooltipShowClass = "tooltip-show";
+var tooltipArrowClass = "tooltip-arrow";
+var tooltipNoArrowClass = "tooltip-no-arrow";
+var tooltipPlacementClasses = {
+  top: "tooltip-top",
+  bottom: "tooltip-bottom",
+  left: "tooltip-left",
+  right: "tooltip-right"
+};
+var tooltipSizeClasses = {
+  sm: "tooltip-sm",
+  md: "",
+  lg: "tooltip-lg"
+};
+function getTooltipClasses({
+  placement = "top",
+  size = "md",
+  open,
+  arrow = true,
+  className
+}) {
+  return cn(tooltipBaseClass, tooltipPlacementClasses[placement], tooltipSizeClasses[size], open && tooltipShowClass, !arrow && tooltipNoArrowClass, className);
+}
+
+// src/components/tooltip/Tooltip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Tooltip = forwardRef(({
+  title,
+  placement = "top",
+  open,
+  defaultOpen,
+  arrow = true,
+  size = "md",
+  className,
+  children,
+  onBlur,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  ...props
+}, ref) => {
+  const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
+  const isControlled = open !== undefined;
+  const visible = isControlled ? open : internalOpen;
+  const tooltipId = props.id !== undefined ? `${props.id}-tooltip` : undefined;
+  function showTooltip(event) {
+    onMouseEnter?.(event);
+    if (!isControlled)
+      setInternalOpen(true);
+  }
+  function hideTooltip(event) {
+    onMouseLeave?.(event);
+    if (!isControlled)
+      setInternalOpen(false);
+  }
+  function focusTooltip(event) {
+    onFocus?.(event);
+    if (!isControlled)
+      setInternalOpen(true);
+  }
+  function blurTooltip(event) {
+    onBlur?.(event);
+    if (!isControlled)
+      setInternalOpen(false);
+  }
+  return /* @__PURE__ */ jsxs("span", {
+    ...props,
+    ref,
+    className: tooltipWrapperClass,
+    "aria-describedby": visible && title ? tooltipId : undefined,
+    onMouseEnter: showTooltip,
+    onMouseLeave: hideTooltip,
+    onFocus: focusTooltip,
+    onBlur: blurTooltip,
+    children: [
+      children,
+      title ? /* @__PURE__ */ jsxs("span", {
+        id: tooltipId,
+        role: "tooltip",
+        className: getTooltipClasses({
+          placement,
+          size,
+          open: visible,
+          arrow,
+          className
+        }),
+        children: [
+          title,
+          arrow ? /* @__PURE__ */ jsx("span", {
+            className: tooltipArrowClass
+          }) : null
+        ]
+      }) : null
+    ]
+  });
+});
+Tooltip.displayName = "Tooltip";
+export {
+  Tooltip
+};

package/dist/components/tour/Tour.d.ts

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

package/dist/components/tour/Tour.types.d.ts

@@ -0,0 +1,50 @@
+import type { ComponentProps, CSSProperties, MouseEvent, ReactNode } from "react";
+import type { ButtonProps } from "../button/Button.types";
+export type TourPlacement = "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+export type TourTarget = HTMLElement | null | string | (() => HTMLElement | null);
+export interface TourMaskConfig {
+    className?: string;
+    style?: CSSProperties;
+    color?: string;
+}
+export interface TourStep {
+    title?: ReactNode;
+    description?: ReactNode;
+    target?: TourTarget;
+    placement?: TourPlacement;
+    cover?: ReactNode;
+    mask?: boolean | TourMaskConfig;
+    nextButtonProps?: ButtonProps;
+    prevButtonProps?: ButtonProps;
+    closeIcon?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    onClose?: (current: number) => void;
+}
+export interface TourProps extends Omit<ComponentProps<"div">, "children" | "title" | "onChange"> {
+    steps?: TourStep[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    current?: number;
+    defaultCurrent?: number;
+    placement?: TourPlacement;
+    mask?: boolean | TourMaskConfig;
+    indicators?: boolean | ((current: number, total: number) => ReactNode);
+    indicatorsRender?: (current: number, total: number) => ReactNode;
+    closeIcon?: ReactNode;
+    disabledInteraction?: boolean;
+    zIndex?: number;
+    gap?: number;
+    nextButtonProps?: ButtonProps;
+    prevButtonProps?: ButtonProps;
+    onClose?: (current: number) => void;
+    onChange?: (current: number) => void;
+    onFinish?: () => void;
+}
+export interface TourTargetRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export type TourActionEvent = MouseEvent<HTMLButtonElement>;

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

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