@duskmoon-dev/components 0.1.2

package/dist/components/calendar/index.js

@@ -0,0 +1,352 @@
+"use client";
+
+// src/components/calendar/Calendar.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/calendar.ts
+var calendarBaseClass = "datepicker calendar";
+var calendarHeaderClass = "calendar-header";
+var calendarTitleClass = "calendar-title";
+var calendarControlsClass = "calendar-controls";
+var calendarNavClass = "calendar-nav";
+var calendarModeClass = "calendar-mode";
+var calendarWeekdaysClass = "calendar-weekdays";
+var calendarWeekdayClass = "calendar-weekday";
+var calendarBodyClass = "calendar-body";
+var calendarDateGridClass = "calendar-date-grid";
+var calendarMonthGridClass = "calendar-month-grid";
+var calendarCellContentClass = "calendar-cell-content";
+function getCalendarClasses({
+  fullscreen = true,
+  mode = "month",
+  className
+}) {
+  return cn(calendarBaseClass, fullscreen ? "calendar-fullscreen" : "calendar-card", mode === "year" && "calendar-year-mode", className);
+}
+function getCalendarCellClasses({
+  selected,
+  today,
+  outside,
+  disabled,
+  className
+}) {
+  return cn("calendar-cell", selected && "calendar-cell-selected", today && "calendar-cell-today", outside && "calendar-cell-outside", disabled && "calendar-cell-disabled", className);
+}
+
+// src/components/calendar/Calendar.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function formatDate(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function formatMonth(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-01`;
+}
+function parseDate(value) {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) {
+    return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+  }
+  if (typeof value === "string" && value.length > 0) {
+    const [year, month = "1", day = "1"] = value.split("-");
+    const parsed = new Date(Number(year), Number(month) - 1, Number(day));
+    if (!Number.isNaN(parsed.getTime())) {
+      return parsed;
+    }
+  }
+  const today = new Date;
+  return new Date(today.getFullYear(), today.getMonth(), today.getDate());
+}
+function addMonths(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function addYears(date, amount) {
+  return new Date(date.getFullYear() + amount, date.getMonth(), 1);
+}
+function startOfCalendarGrid(panelDate) {
+  const firstOfMonth = new Date(panelDate.getFullYear(), panelDate.getMonth(), 1);
+  const start = new Date(firstOfMonth);
+  start.setDate(firstOfMonth.getDate() - firstOfMonth.getDay());
+  return start;
+}
+function buildDateGrid(panelDate) {
+  const start = startOfCalendarGrid(panelDate);
+  return Array.from({ length: 42 }, (_, index) => {
+    const date = new Date(start);
+    date.setDate(start.getDate() + index);
+    return date;
+  });
+}
+function isSameMonth(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+}
+function isOutsideRange(date, validRange) {
+  if (!validRange) {
+    return false;
+  }
+  const current = formatDate(date);
+  const start = formatDate(parseDate(validRange[0]));
+  const end = formatDate(parseDate(validRange[1]));
+  return current < start || current > end;
+}
+function Header({
+  panelDate,
+  mode,
+  setPanelDate,
+  setMode
+}) {
+  const title = mode === "year" ? String(panelDate.getFullYear()) : `${MONTHS[panelDate.getMonth()]} ${panelDate.getFullYear()}`;
+  return /* @__PURE__ */ jsxs("div", {
+    className: calendarHeaderClass,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: calendarTitleClass,
+        children: title
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: calendarControlsClass,
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            className: calendarNavClass,
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-label": "Previous panel",
+                onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, -1) : addMonths(panelDate, -1), mode),
+                children: "Previous"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-label": "Next panel",
+                onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, 1) : addMonths(panelDate, 1), mode),
+                children: "Next"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: calendarModeClass,
+            children: [
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-pressed": mode === "month",
+                onClick: () => setMode("month"),
+                children: "Month"
+              }),
+              /* @__PURE__ */ jsx("button", {
+                type: "button",
+                "aria-pressed": mode === "year",
+                onClick: () => setMode("year"),
+                children: "Year"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+var Calendar = forwardRef(({
+  className,
+  value,
+  defaultValue,
+  mode,
+  defaultMode = "month",
+  fullscreen = true,
+  validRange,
+  disabledDate,
+  dateCellRender,
+  dateFullCellRender,
+  monthCellRender,
+  monthFullCellRender,
+  cellRender,
+  fullCellRender,
+  headerRender,
+  onChange,
+  onSelect,
+  onPanelChange,
+  ...props
+}, ref) => {
+  const selectedDate = parseDate(value ?? defaultValue);
+  const [innerValue, setInnerValue] = useState(() => formatDate(selectedDate));
+  const [panelDate, setInnerPanelDate] = useState(selectedDate);
+  const [innerMode, setInnerMode] = useState(mode ?? defaultMode);
+  const currentMode = mode ?? innerMode;
+  const currentValue = value === undefined ? innerValue : formatDate(parseDate(value));
+  const today = useMemo(() => formatDate(new Date), []);
+  const dateGrid = useMemo(() => buildDateGrid(panelDate), [panelDate]);
+  function emitPanelChange(nextDate, nextMode = currentMode) {
+    setInnerPanelDate(nextDate);
+    onPanelChange?.(formatDate(nextDate), nextMode);
+  }
+  function setCalendarMode(nextMode) {
+    if (mode === undefined) {
+      setInnerMode(nextMode);
+    }
+    onPanelChange?.(formatDate(panelDate), nextMode);
+  }
+  function commitValue(nextDate, source) {
+    const nextValue = source === "month" ? formatMonth(nextDate) : formatDate(nextDate);
+    if (disabledDate?.(nextValue) || isOutsideRange(nextDate, validRange)) {
+      return;
+    }
+    if (value === undefined) {
+      setInnerValue(nextValue);
+    }
+    setInnerPanelDate(nextDate);
+    onSelect?.(nextValue, { source });
+    onChange?.(nextValue);
+  }
+  function renderDateCell(date) {
+    const dateValue = formatDate(date);
+    const originNode = /* @__PURE__ */ jsxs("div", {
+      className: calendarCellContentClass,
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          children: date.getDate()
+        }),
+        dateCellRender?.(dateValue)
+      ]
+    });
+    const info = {
+      originNode,
+      today,
+      type: "month"
+    };
+    const content = fullCellRender?.(dateValue, info) ?? dateFullCellRender?.(dateValue) ?? cellRender?.(dateValue, info) ?? originNode;
+    const disabled = disabledDate?.(dateValue) || isOutsideRange(date, validRange);
+    return /* @__PURE__ */ jsx("button", {
+      type: "button",
+      "aria-label": dateValue,
+      disabled,
+      className: getCalendarCellClasses({
+        selected: dateValue === currentValue,
+        today: dateValue === today,
+        outside: !isSameMonth(date, panelDate),
+        disabled
+      }),
+      onClick: () => commitValue(date, "date"),
+      children: content
+    }, dateValue);
+  }
+  function renderMonthCell(month) {
+    const date = new Date(panelDate.getFullYear(), month, 1);
+    const dateValue = formatMonth(date);
+    const originNode = /* @__PURE__ */ jsxs("div", {
+      className: calendarCellContentClass,
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          children: MONTHS[month]
+        }),
+        monthCellRender?.(dateValue)
+      ]
+    });
+    const info = {
+      originNode,
+      today,
+      type: "year"
+    };
+    const content = fullCellRender?.(dateValue, info) ?? monthFullCellRender?.(dateValue) ?? cellRender?.(dateValue, info) ?? originNode;
+    const disabled = disabledDate?.(dateValue) || isOutsideRange(date, validRange);
+    return /* @__PURE__ */ jsx("button", {
+      type: "button",
+      "aria-label": dateValue,
+      disabled,
+      className: getCalendarCellClasses({
+        selected: dateValue === formatMonth(parseDate(currentValue)),
+        today: dateValue === formatMonth(new Date),
+        disabled
+      }),
+      onClick: () => commitValue(date, "month"),
+      children: content
+    }, dateValue);
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getCalendarClasses({
+      fullscreen,
+      mode: currentMode,
+      className
+    }),
+    children: [
+      headerRender ? headerRender({
+        value: formatDate(panelDate),
+        type: currentMode,
+        onChange: (nextValue) => emitPanelChange(parseDate(nextValue)),
+        onTypeChange: setCalendarMode
+      }) : /* @__PURE__ */ jsx(Header, {
+        panelDate,
+        mode: currentMode,
+        setPanelDate: emitPanelChange,
+        setMode: setCalendarMode
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: calendarBodyClass,
+        children: currentMode === "month" ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              className: calendarWeekdaysClass,
+              "aria-hidden": "true",
+              children: WEEKDAYS.map((weekday) => /* @__PURE__ */ jsx("span", {
+                className: calendarWeekdayClass,
+                children: weekday
+              }, weekday))
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: calendarDateGridClass,
+              children: dateGrid.map(renderDateCell)
+            })
+          ]
+        }) : /* @__PURE__ */ jsx("div", {
+          className: calendarMonthGridClass,
+          children: MONTHS.map((_, month) => renderMonthCell(month))
+        })
+      })
+    ]
+  });
+});
+Calendar.displayName = "Calendar";
+export {
+  Calendar
+};

package/dist/components/card/Card.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { CardProps } from "./Card.types";
+export declare function Card({ appearance, padding, className, children, ref, ...props }: CardProps): React.JSX.Element;

package/dist/components/card/Card.types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+export type CardAppearance = "elevated" | "outline" | "filled";
+export type CardPadding = "none" | "sm" | "md" | "lg";
+export interface CardProps extends ComponentProps<"div"> {
+    appearance?: CardAppearance;
+    padding?: CardPadding;
+}

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

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

package/dist/components/card/index.js

@@ -0,0 +1,73 @@
+"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/card.ts
+var cardBaseClass = "card";
+var cardAppearanceClasses = {
+  elevated: "card-elevated",
+  outline: "card-outline",
+  filled: "card-filled"
+};
+var cardPaddingClasses = {
+  none: "card-padding-none",
+  sm: "card-padding-sm",
+  md: "card-padding-md",
+  lg: "card-padding-lg"
+};
+function getCardClasses({
+  appearance = "elevated",
+  padding = "md",
+  className
+}) {
+  return cn(cardBaseClass, cardAppearanceClasses[appearance], cardPaddingClasses[padding], className);
+}
+
+// src/components/card/Card.tsx
+import { jsx } from "react/jsx-runtime";
+function Card({
+  appearance = "elevated",
+  padding = "md",
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const classes = getCardClasses({
+    appearance,
+    padding,
+    className
+  });
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: classes,
+    ...props,
+    children
+  });
+}
+export {
+  Card
+};

package/dist/components/carousel/Carousel.d.ts

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

package/dist/components/carousel/Carousel.types.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type CarouselEffect = "scrollx" | "fade";
+export type CarouselDotPosition = "top" | "bottom" | "left" | "right";
+export interface CarouselProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    children?: ReactNode;
+    activeIndex?: number;
+    defaultActiveIndex?: number;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+    arrows?: boolean;
+    dots?: boolean | {
+        className?: string;
+    };
+    dotPosition?: CarouselDotPosition;
+    effect?: CarouselEffect;
+    speed?: number;
+    beforeChange?: (from: number, to: number) => void;
+    afterChange?: (current: number) => void;
+    onChange?: (current: number, previous: number) => void;
+}
+export interface CarouselRef {
+    goTo: (index: number) => void;
+    next: () => void;
+    prev: () => void;
+}
+export type CarouselComponent = ForwardRefExoticComponent<CarouselProps & RefAttributes<CarouselRef>>;

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

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

package/dist/components/carousel/index.js

@@ -0,0 +1,193 @@
+"use client";
+
+// src/components/carousel/Carousel.tsx
+import {
+  Children,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useCallback,
+  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/carousel.ts
+var carouselBaseClass = "carousel";
+var carouselTrackClass = "carousel-track";
+var carouselSlideClass = "carousel-slide";
+var carouselSlideActiveClass = "carousel-slide-active";
+var carouselArrowClass = "carousel-arrow";
+var carouselPrevClass = "carousel-prev";
+var carouselNextClass = "carousel-next";
+var carouselDotsClass = "carousel-dots";
+var carouselDotClass = "carousel-dot";
+var carouselDotActiveClass = "carousel-dot-active";
+var carouselEffectClasses = {
+  scrollx: "carousel-scrollx",
+  fade: "carousel-fade"
+};
+var carouselDotPositionClasses = {
+  top: "carousel-dots-top",
+  bottom: "carousel-dots-bottom",
+  left: "carousel-dots-left",
+  right: "carousel-dots-right"
+};
+function getCarouselClasses({
+  effect,
+  dotPosition,
+  className
+}) {
+  return cn(carouselBaseClass, carouselEffectClasses[effect], carouselDotPositionClasses[dotPosition], className);
+}
+function getCarouselSlideClasses({
+  active,
+  className
+}) {
+  return cn(carouselSlideClass, active && carouselSlideActiveClass, className);
+}
+function getCarouselDotClasses({ active }) {
+  return cn(carouselDotClass, active && carouselDotActiveClass);
+}
+
+// src/components/carousel/Carousel.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function clampIndex(index, count) {
+  if (count <= 0)
+    return 0;
+  return (index % count + count) % count;
+}
+var Carousel = forwardRef(({
+  activeIndex,
+  afterChange,
+  arrows = false,
+  autoplay = false,
+  autoplaySpeed = 3000,
+  beforeChange,
+  children,
+  className,
+  defaultActiveIndex = 0,
+  dots = true,
+  dotPosition = "bottom",
+  effect = "scrollx",
+  onChange,
+  speed = 500,
+  ...props
+}, ref) => {
+  const slides = useMemo(() => Children.toArray(children), [children]);
+  const count = slides.length;
+  const controlled = activeIndex !== undefined;
+  const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultActiveIndex, count));
+  const currentIndex = clampIndex(controlled ? activeIndex : internalIndex, count);
+  const goTo = useCallback((nextIndex) => {
+    if (count === 0)
+      return;
+    const normalizedNext = clampIndex(nextIndex, count);
+    if (normalizedNext === currentIndex)
+      return;
+    beforeChange?.(currentIndex, normalizedNext);
+    if (!controlled) {
+      setInternalIndex(normalizedNext);
+    }
+    onChange?.(normalizedNext, currentIndex);
+    afterChange?.(normalizedNext);
+  }, [afterChange, beforeChange, controlled, count, currentIndex, onChange]);
+  const next = useCallback(() => {
+    goTo(currentIndex + 1);
+  }, [currentIndex, goTo]);
+  const prev = useCallback(() => {
+    goTo(currentIndex - 1);
+  }, [currentIndex, goTo]);
+  useImperativeHandle(ref, () => ({ goTo, next, prev }));
+  useEffect(() => {
+    if (!autoplay || count <= 1)
+      return;
+    const timer = window.setInterval(next, autoplaySpeed);
+    return () => window.clearInterval(timer);
+  }, [autoplay, autoplaySpeed, count, next]);
+  const dotsConfig = typeof dots === "object" ? dots : {};
+  const shouldRenderDots = Boolean(dots) && count > 1;
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    className: getCarouselClasses({ effect, dotPosition, className }),
+    "data-active-index": currentIndex,
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: carouselTrackClass,
+        style: {
+          transform: effect === "scrollx" ? `translateX(-${currentIndex * 100}%)` : undefined,
+          transitionDuration: `${speed}ms`
+        },
+        children: slides.map((slide, index) => /* @__PURE__ */ jsx("div", {
+          className: getCarouselSlideClasses({
+            active: index === currentIndex
+          }),
+          "aria-hidden": index === currentIndex ? undefined : true,
+          style: effect === "fade" ? {
+            opacity: index === currentIndex ? 1 : 0,
+            transitionDuration: `${speed}ms`
+          } : undefined,
+          children: slide
+        }, index))
+      }),
+      arrows && count > 1 ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: cn(carouselArrowClass, carouselPrevClass),
+            "aria-label": "Previous slide",
+            onClick: prev,
+            children: "‹"
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            className: cn(carouselArrowClass, carouselNextClass),
+            "aria-label": "Next slide",
+            onClick: next,
+            children: "›"
+          })
+        ]
+      }) : null,
+      shouldRenderDots ? /* @__PURE__ */ jsx("div", {
+        className: cn(carouselDotsClass, dotsConfig.className),
+        children: slides.map((_slide, index) => /* @__PURE__ */ jsx("button", {
+          type: "button",
+          className: getCarouselDotClasses({
+            active: index === currentIndex
+          }),
+          "aria-label": `Go to slide ${index + 1}`,
+          "aria-current": index === currentIndex ? "true" : undefined,
+          onClick: () => goTo(index)
+        }, index))
+      }) : null
+    ]
+  });
+});
+Carousel.displayName = "Carousel";
+export {
+  Carousel
+};

package/dist/components/cascader/Cascader.d.ts

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