@mbao01/common 0.8.0 → 0.9.0

package/src/components/Confetti/Confetti.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { ConfettiProps } from "./types";
+
+const DEFAULT_COLORS = [
+  "oklch(0.7 0.25 250)",
+  "oklch(0.7 0.2 330)",
+  "oklch(0.75 0.2 150)",
+  "oklch(0.8 0.15 60)",
+  "oklch(0.7 0.25 25)",
+  "oklch(0.7 0.15 200)",
+];
+
+const Confetti = ({
+  active = false,
+  count = 50,
+  duration = 3,
+  colors = DEFAULT_COLORS,
+}: ConfettiProps) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (active) {
+      setVisible(true);
+      const timer = setTimeout(() => setVisible(false), duration * 1000);
+      return () => clearTimeout(timer);
+    }
+    setVisible(false);
+  }, [active, duration]);
+
+  const pieces = useMemo(
+    () =>
+      Array.from({ length: count }, (_, i) => ({
+        id: i,
+        x: Math.random() * 100,
+        delay: Math.random() * 0.5,
+        duration: duration * 0.6 + Math.random() * duration * 0.4,
+        color: colors[i % colors.length],
+        size: 4 + Math.random() * 6,
+        rotation: Math.random() * 360,
+      })),
+    [count, duration, colors]
+  );
+
+  if (!visible) return null;
+
+  return (
+    <div className="pointer-events-none fixed inset-0 z-[100] overflow-hidden" aria-hidden="true">
+      {pieces.map((piece) => (
+        <div
+          key={piece.id}
+          className="absolute animate-confetti"
+          style={{
+            left: `${piece.x}%`,
+            top: "-5%",
+            width: piece.size,
+            height: piece.size * 0.6,
+            backgroundColor: piece.color,
+            borderRadius: "1px",
+            transform: `rotate(${piece.rotation}deg)`,
+            animationDelay: `${piece.delay}s`,
+            animationDuration: `${piece.duration}s`,
+          }}
+        />
+      ))}
+      <style>{`
+        @keyframes confetti-fall {
+          0% { transform: translateY(0) rotate(0deg); opacity: 1; }
+          100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
+        }
+        .animate-confetti {
+          animation: confetti-fall var(--tw-duration, 3s) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+Confetti.displayName = "Confetti";
+
+export { Confetti };

package/src/components/Confetti/index.ts

@@ -0,0 +1,2 @@
+export { Confetti } from "./Confetti";
+export type { ConfettiProps } from "./types";

package/src/components/Confetti/types.ts

@@ -0,0 +1,20 @@
+export type ConfettiPiece = {
+  id: number;
+  x: number;
+  delay: number;
+  duration: number;
+  color: string;
+  size: number;
+  rotation: number;
+};
+
+export type ConfettiProps = {
+  /** Whether to show confetti */
+  active?: boolean;
+  /** Number of confetti pieces */
+  count?: number;
+  /** Duration in seconds */
+  duration?: number;
+  /** Custom colors */
+  colors?: string[];
+};

package/src/components/CountdownTimer/CountdownTimer.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { CountdownTimerProps } from "./types";
+import { cn } from "../../utilities";
+
+type TimeLeft = { days: number; hours: number; minutes: number; seconds: number };
+
+const unitClasses = {
+  sm: "text-[10px]",
+  md: "text-xs",
+  lg: "text-sm",
+} as const;
+
+const Unit = ({ value, unit, size }: { value: number; unit: string; size: "sm" | "md" | "lg" }) => (
+  <div className="flex flex-col items-center">
+    <span className="font-bold tabular-nums">{String(value).padStart(2, "0")}</span>
+    <span className={cn("text-base-content/50 uppercase tracking-wider", unitClasses[size])}>
+      {unit}
+    </span>
+  </div>
+);
+
+const Separator = () => <span className="self-start font-bold text-base-content/30 pt-0.5">:</span>;
+
+const CountdownTimer = ({
+  targetDate,
+  className,
+  label,
+  onComplete,
+  showSeconds = true,
+  size = "md",
+  ...props
+}: CountdownTimerProps) => {
+  const calcTimeLeft = useCallback((): TimeLeft => {
+    const diff = Math.max(0, targetDate.getTime() - Date.now());
+    return {
+      days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+      hours: Math.floor((diff / (1000 * 60 * 60)) % 24),
+      minutes: Math.floor((diff / (1000 * 60)) % 60),
+      seconds: Math.floor((diff / 1000) % 60),
+    };
+  }, [targetDate]);
+
+  const [timeLeft, setTimeLeft] = useState<TimeLeft>(calcTimeLeft);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const tl = calcTimeLeft();
+      setTimeLeft(tl);
+      if (tl.days === 0 && tl.hours === 0 && tl.minutes === 0 && tl.seconds === 0) {
+        clearInterval(timer);
+        onComplete?.();
+      }
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [calcTimeLeft, onComplete]);
+
+  const sizeClasses = {
+    sm: "text-lg gap-1",
+    md: "text-2xl gap-2",
+    lg: "text-4xl gap-3",
+  };
+
+  return (
+    <div className={cn("flex flex-col items-center gap-1", className)} {...props}>
+      {label && <span className="text-sm text-base-content/60">{label}</span>}
+      <div className={cn("flex items-center", sizeClasses[size])}>
+        {timeLeft.days > 0 && (
+          <>
+            <Unit size={size} value={timeLeft.days} unit="days" />
+            <Separator />
+          </>
+        )}
+        <Unit size={size} value={timeLeft.hours} unit="hrs" />
+        <Separator />
+        <Unit size={size} value={timeLeft.minutes} unit="min" />
+        {showSeconds && (
+          <>
+            <Separator />
+            <Unit size={size} value={timeLeft.seconds} unit="sec" />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+CountdownTimer.displayName = "CountdownTimer";
+
+export { CountdownTimer };

package/src/components/CountdownTimer/index.ts

@@ -0,0 +1,2 @@
+export { CountdownTimer } from "./CountdownTimer";
+export type { CountdownTimerProps } from "./types";

package/src/components/CountdownTimer/types.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+
+export type CountdownTimerProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** Target date/time to count down to */
+  targetDate: Date;
+  /** Label to show above the timer */
+  label?: string;
+  /** Callback when countdown reaches zero */
+  onComplete?: () => void;
+  /** Whether to show seconds */
+  showSeconds?: boolean;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+};

package/src/components/DataList/DataList.tsx

@@ -0,0 +1,32 @@
+import { cn } from "../../utilities";
+import {
+  getDataListClasses,
+  getDataListItemClasses,
+  getDataListLabelClasses,
+  getDataListValueClasses,
+} from "./constants";
+import type { DataListProps } from "./types";
+
+const DataList = ({
+  items,
+  className,
+  size = "md",
+  dividers = true,
+  horizontal = false,
+  ...props
+}: DataListProps) => {
+  return (
+    <dl className={cn(getDataListClasses({ horizontal }), className)} {...props}>
+      {items.map((item, index) => (
+        <div key={index} className={getDataListItemClasses({ size, dividers, horizontal })}>
+          <dt className={getDataListLabelClasses()}>{item.label}</dt>
+          <dd className={getDataListValueClasses({ horizontal })}>{item.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+};
+
+DataList.displayName = "DataList";
+
+export { DataList };

package/src/components/DataList/constants.ts

@@ -0,0 +1,47 @@
+import { cva } from "../../libs";
+import { createVariants } from "../../utilities";
+
+export const getDataListClasses = cva("", {
+  variants: createVariants({
+    horizontal: {
+      true: "flex flex-wrap gap-x-6 gap-y-2",
+      false: "flex flex-col",
+    },
+  }),
+  defaultVariants: {
+    horizontal: false,
+  },
+});
+
+export const getDataListItemClasses = cva(
+  "flex justify-between gap-4 transition-colors duration-150",
+  {
+    variants: createVariants({
+      size: {
+        sm: "py-1.5 text-xs",
+        md: "py-2.5 text-sm",
+        lg: "py-3 text-base",
+      },
+      dividers: {
+        true: "border-b border-base-200 last:border-0",
+      },
+      horizontal: {
+        true: "flex-col gap-0.5",
+      },
+    }),
+    defaultVariants: {
+      size: "md",
+      dividers: true,
+    },
+  }
+);
+
+export const getDataListLabelClasses = cva("text-base-content/60 shrink-0");
+
+export const getDataListValueClasses = cva("font-medium text-right tabular-nums", {
+  variants: createVariants({
+    horizontal: {
+      true: "text-left",
+    },
+  }),
+});

package/src/components/DataList/index.ts

@@ -0,0 +1,2 @@
+export { DataList } from "./DataList";
+export type { DataListProps, DataListItem } from "./types";

package/src/components/DataList/types.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type DataListItem = {
+  label: ReactNode;
+  value: ReactNode;
+};
+
+export type DataListProps = Omit<HTMLAttributes<HTMLDListElement>, "children"> & {
+  /** Key-value items to display */
+  items: DataListItem[];
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Whether to show dividers between items */
+  dividers?: boolean;
+  /** Whether to show items in a horizontal layout */
+  horizontal?: boolean;
+};

package/src/components/DatePicker/DateRangePresetPicker.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import { type DateRange } from "react-day-picker";
+import { format, subDays, startOfMonth, startOfYear } from "date-fns";
+import { CalendarDaysIcon } from "lucide-react";
+import { cn } from "../../utilities";
+import { Button } from "../Button";
+import { Calendar } from "../Calendar";
+import { Popover } from "../Popover";
+import { type DateRangePresetPickerProps, type DateRangePreset } from "./types";
+
+const DEFAULT_PRESETS: DateRangePreset[] = [
+  { label: "Today", range: () => ({ from: new Date(), to: new Date() }) },
+  { label: "Last 7 days", range: () => ({ from: subDays(new Date(), 7), to: new Date() }) },
+  { label: "Last 30 days", range: () => ({ from: subDays(new Date(), 30), to: new Date() }) },
+  { label: "Last 90 days", range: () => ({ from: subDays(new Date(), 90), to: new Date() }) },
+  { label: "This month", range: () => ({ from: startOfMonth(new Date()), to: new Date() }) },
+  { label: "This year", range: () => ({ from: startOfYear(new Date()), to: new Date() }) },
+];
+
+export const DateRangePresetPicker = ({
+  name,
+  size,
+  wide,
+  label,
+  outline,
+  variant,
+  disabled,
+  disabledDates,
+  defaultRange,
+  presets = DEFAULT_PRESETS,
+  onRangeChange,
+  getRangeValue = (range) => ({
+    from: range?.from?.toUTCString(),
+    to: range?.to?.toUTCString(),
+  }),
+  getRangeLabel = (range) =>
+    range?.from
+      ? range.to
+        ? `${format(range.from, "LLL dd, y")} - ${format(range.to, "LLL dd, y")}`
+        : format(range.from, "LLL dd, y")
+      : undefined,
+  triggerClassName,
+  ...props
+}: DateRangePresetPickerProps) => {
+  const [range, setRange] = useState<DateRange | undefined>(defaultRange);
+  const [activePreset, setActivePreset] = useState<string | null>(null);
+
+  const handlePresetClick = (preset: DateRangePreset) => {
+    const newRange = preset.range();
+    setRange(newRange);
+    setActivePreset(preset.label);
+    onRangeChange?.(newRange, preset.label);
+  };
+
+  const handleCalendarSelect = (newRange: DateRange | undefined) => {
+    setRange(newRange);
+    setActivePreset(null);
+    onRangeChange?.(newRange, undefined);
+  };
+
+  const rangeLabel = getRangeLabel(range);
+  const rangeValue = getRangeValue(range);
+
+  return (
+    <Popover>
+      {name && (
+        <>
+          <input hidden className="hidden" aria-hidden="true" name={`${name}.from`} defaultValue={rangeValue.from} />
+          <input hidden className="hidden" aria-hidden="true" name={`${name}.to`} defaultValue={rangeValue.to} />
+        </>
+      )}
+      <Popover.Trigger asChild>
+        <Button
+          name={name}
+          size={size}
+          wide={wide}
+          outline={outline}
+          variant={variant}
+          disabled={disabled}
+          className={cn("justify-start flex-nowrap", !range && "font-normal", triggerClassName)}
+        >
+          <span className="text-left text-ellipsis overflow-hidden text-nowrap">
+            {activePreset ?? rangeLabel ?? label ?? "Select period"}
+          </span>
+          <CalendarDaysIcon className="ml-auto h-4 w-4 opacity-50" />
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content className="w-auto p-0" align="start">
+        <div className="flex">
+          <div className="flex flex-col border-r p-2 gap-0.5">
+            {presets.map((preset) => (
+              <button
+                key={preset.label}
+                type="button"
+                onClick={() => handlePresetClick(preset)}
+                className={cn(
+                  "rounded-md px-3 py-1.5 text-left text-sm transition-colors duration-150 hover:bg-base-200",
+                  activePreset === preset.label && "bg-primary text-primary-content hover:bg-primary"
+                )}
+              >
+                {preset.label}
+              </button>
+            ))}
+          </div>
+          <div className="p-2">
+            <Calendar
+              autoFocus
+              mode="range"
+              selected={range}
+              disabled={disabledDates}
+              onSelect={handleCalendarSelect}
+              captionLayout="label"
+              {...props}
+            />
+          </div>
+        </div>
+      </Popover.Content>
+    </Popover>
+  );
+};

package/src/components/DatePicker/index.ts

@@ -1,3 +1,4 @@
 export { DatePicker } from "./DatePicker";
 export { DateRangePicker } from "./DateRangePicker";
+export { DateRangePresetPicker } from "./DateRangePresetPicker";
 export { MultipleDatesPicker } from "./MultipleDatesPicker";

package/src/components/DatePicker/types.ts

@@ -33,6 +33,28 @@ export type DateRangePickerProps = BaseDatePickerProps &
     getRangeLabel?: (range: DateRange | undefined) => string | React.JSX.Element | undefined;
   };
 
+export type DateRangePreset = {
+  /** Display label for the preset */
+  label: string;
+  /** Function that returns the date range for this preset */
+  range: () => DateRange;
+};
+
+export type DateRangePresetPickerProps = BaseDatePickerProps &
+  Omit<PropsRange, "mode" | "disabled"> & {
+    defaultRange?: DateRange;
+    disabledDates?: PropsRange["disabled"];
+    /** Preset period options. Defaults to Today, Last 7/30/90 days, This month, This year */
+    presets?: DateRangePreset[];
+    /** Called when range changes, with optional preset label */
+    onRangeChange?: (range: DateRange | undefined, presetLabel?: string) => void;
+    getRangeValue?: (range: DateRange | undefined) => {
+      from: string | undefined;
+      to: string | undefined;
+    };
+    getRangeLabel?: (range: DateRange | undefined) => string | undefined;
+  };
+
 export type MultipleDatesPickerProps = BaseDatePickerProps &
   Omit<PropsMulti, "mode"> & {
     defaultDates?: Date[];

package/src/components/Description/Description.tsx

@@ -1,19 +1,81 @@
-import type { DescriptionDetailProps, DescriptionProps, DescriptionTermProps } from "./types";
+import { createContext, useContext } from "react";
 import { cn } from "../../utilities";
+import {
+  getDescriptionClasses,
+  getDescriptionDetailClasses,
+  getDescriptionPairClasses,
+  getDescriptionTermClasses,
+} from "./constants";
+import type {
+  DescriptionDetailProps,
+  DescriptionLayout,
+  DescriptionProps,
+  DescriptionSize,
+  DescriptionTermProps,
+} from "./types";
 
-const Description = (props: DescriptionProps) => {
-  return <dl {...props} />;
+type DescriptionContextValue = {
+  size: DescriptionSize;
+  layout: DescriptionLayout;
+  dividers: boolean;
+  striped: boolean;
+};
+
+const DescriptionContext = createContext<DescriptionContextValue>({
+  size: "md",
+  layout: "vertical",
+  dividers: false,
+  striped: false,
+});
+
+const useDescriptionContext = () => useContext(DescriptionContext);
+
+const Description = ({
+  className,
+  variant = "default",
+  layout = "vertical",
+  size = "md",
+  dividers = false,
+  striped = false,
+  ...props
+}: DescriptionProps) => {
+  return (
+    <DescriptionContext.Provider value={{ size, layout, dividers, striped }}>
+      <dl
+        className={cn(getDescriptionClasses({ variant, layout, size }), className)}
+        {...props}
+      />
+    </DescriptionContext.Provider>
+  );
 };
 
 const DescriptionTerm = ({ className, ...props }: DescriptionTermProps) => {
-  return <dt className={cn("py-2 text-sm font-semibold", className)} {...props} />;
+  const { size, layout } = useDescriptionContext();
+  return (
+    <dt className={cn(getDescriptionTermClasses({ size, layout }), className)} {...props} />
+  );
 };
 
 const DescriptionDetail = ({ className, ...props }: DescriptionDetailProps) => {
-  return <dd className={cn("text-base not-last:mb-1", className)} {...props} />;
+  const { size, layout, dividers } = useDescriptionContext();
+  return (
+    <dd
+      className={cn(getDescriptionDetailClasses({ size, layout, dividers }), className)}
+      {...props}
+    />
+  );
+};
+
+const DescriptionPair = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const { layout, striped } = useDescriptionContext();
+  return <div className={cn(getDescriptionPairClasses({ layout, striped }), className)} {...props} />;
 };
 
 Description.Term = DescriptionTerm;
 Description.Detail = DescriptionDetail;
+Description.Pair = DescriptionPair;
 
 export { Description };

package/src/components/Description/DescriptionGroup.tsx

@@ -0,0 +1,39 @@
+import { cn } from "../../utilities";
+import { getDescriptionGroupClasses, getDescriptionGroupItemClasses } from "./constants";
+import type { DescriptionGroupProps } from "./types";
+
+const DescriptionGroup = ({
+  className,
+  children,
+  direction = "column",
+  dividers = false,
+  title,
+  description,
+  ...props
+}: DescriptionGroupProps) => {
+  return (
+    <div className={cn("flex flex-col", className)} {...props}>
+      {(title || description) && (
+        <div className="mb-4">
+          {title && <h3 className="text-base font-semibold text-base-content">{title}</h3>}
+          {description && (
+            <p className="mt-0.5 text-sm text-base-content/60">{description}</p>
+          )}
+        </div>
+      )}
+      <div className={getDescriptionGroupClasses({ direction, dividers })}>
+        {Array.isArray(children)
+          ? children.map((child, i) => (
+              <div key={i} className={getDescriptionGroupItemClasses()}>
+                {child}
+              </div>
+            ))
+          : children}
+      </div>
+    </div>
+  );
+};
+
+DescriptionGroup.displayName = "DescriptionGroup";
+
+export { DescriptionGroup };