pejay-ui 1.4.2 → 1.5.0

package/templates/spinner/spinner.css

@@ -0,0 +1,58 @@
+/* ─────────────────────────────────────────────────────────────
+   SPINNER KEYFRAME ANIMATIONS
+   ───────────────────────────────────────────────────────────── */
+
+/* [1] ring — classic rotating arc */
+@keyframes spinner-ring {
+  to { transform: rotate(360deg); }
+}
+
+/* [2] dots — three dots fading in/out sequentially */
+@keyframes spinner-dot-fade {
+  0%, 80%, 100% { opacity: 0.15; transform: scale(0.75); }
+  40%           { opacity: 1;    transform: scale(1);    }
+}
+
+/* [3] pulse — single circle pulsing */
+@keyframes spinner-pulse {
+  0%, 100% { opacity: 0.15; transform: scale(0.6); }
+  50%      { opacity: 1;    transform: scale(1);   }
+}
+
+/* [4] bars — three vertical bars scaling */
+@keyframes spinner-bar {
+  0%, 80%, 100% { transform: scaleY(0.4); opacity: 0.3; }
+  40%           { transform: scaleY(1);   opacity: 1;   }
+}
+
+/* [5] orbit — a dot orbiting a static circle */
+@keyframes spinner-orbit {
+  to { transform: rotate(360deg); }
+}
+
+/* [6] ripple — rings expanding and fading */
+@keyframes spinner-ripple {
+  0%   { transform: scale(0); opacity: 0.8; }
+  100% { transform: scale(1); opacity: 0;   }
+}
+
+/* [7] dots-ring — circular dots fading sequentially */
+@keyframes spinner-dots-ring-fade {
+  0%, 100% { opacity: 0.2; transform: scale(0.8); }
+  50%      { opacity: 1;   transform: scale(1);   }
+}
+
+/* [8] dots-step — sequential building dots */
+@keyframes spinner-dots-step-one {
+  0%, 100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes spinner-dots-step-two {
+  0%, 15%, 85%, 100% { opacity: 0; transform: scale(0); }
+  20%, 80%            { opacity: 1; transform: scale(1); }
+}
+
+@keyframes spinner-dots-step-three {
+  0%, 35%, 65%, 100% { opacity: 0; transform: scale(0); }
+  40%, 60%            { opacity: 1; transform: scale(1); }
+}

package/templates/spinner/spinner.tsx

@@ -0,0 +1,263 @@
+// @ts-ignore
+import "./spinner.css";
+
+export type SpinnerVariant =
+  | "ring"
+  | "dots"
+  | "pulse"
+  | "bars"
+  | "orbit"
+  | "ripple"
+  | "dots-ring"
+  | "dots-step"
+  | "text-dots";
+
+export type SpinnerSize = "sm" | "md" | "lg";
+
+export interface SpinnerProps {
+  variant?: SpinnerVariant;
+  size?: SpinnerSize;
+  className?: string;
+}
+
+const sizeMap: Record<SpinnerSize, number> = {
+  sm: 16,
+  md: 24,
+  lg: 36,
+};
+
+export function Spinner({ variant = "ring", size = "md", className }: SpinnerProps) {
+  const px = sizeMap[size];
+
+  /* ── [1] Ring ──────────────────────────────────────────────── */
+  if (variant === "ring") {
+    return (
+      <svg
+        width={px}
+        height={px}
+        viewBox="0 0 24 24"
+        fill="none"
+        className={className}
+        style={{ animation: "spinner-ring 0.8s linear infinite" }}
+      >
+        <circle cx="12" cy="12" r="9" stroke="rgba(255,255,255,0.12)" strokeWidth="2.5" />
+        <circle
+          cx="12"
+          cy="12"
+          r="9"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeDasharray="30 57"
+        />
+      </svg>
+    );
+  }
+
+  /* ── [2] Dots ──────────────────────────────────────────────── */
+  if (variant === "dots") {
+    const dotPx = px * 0.22;
+    return (
+      <div
+        className={className}
+        style={{ display: "flex", gap: px * 0.22, alignItems: "center" }}
+      >
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            style={{
+              width: dotPx,
+              height: dotPx,
+              borderRadius: "50%",
+              background: "currentColor",
+              animation: `spinner-dot-fade 1.2s ease-in-out ${i * 0.2}s infinite`,
+            }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  /* ── [3] Pulse ─────────────────────────────────────────────── */
+  if (variant === "pulse") {
+    return (
+      <div
+        className={className}
+        style={{
+          width: px,
+          height: px,
+          borderRadius: "50%",
+          background: "currentColor",
+          animation: "spinner-pulse 1s ease-in-out infinite",
+        }}
+      />
+    );
+  }
+
+  /* ── [4] Bars ──────────────────────────────────────────────── */
+  if (variant === "bars") {
+    const barW = Math.max(2, px * 0.14);
+    const barH = px * 0.7;
+    return (
+      <div
+        className={className}
+        style={{ display: "flex", gap: barW * 0.9, alignItems: "center", height: px }}
+      >
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            style={{
+              width: barW,
+              height: barH,
+              borderRadius: barW,
+              background: "currentColor",
+              transformOrigin: "center",
+              animation: `spinner-bar 1s ease-in-out ${i * 0.15}s infinite`,
+            }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  /* ── [5] Orbit ─────────────────────────────────────────────── */
+  if (variant === "orbit") {
+    const r = px / 2;
+    const orbitR = r * 0.62;
+    const dotR = r * 0.18;
+    return (
+      <svg width={px} height={px} viewBox={`0 0 ${px} ${px}`} fill="none" className={className}>
+        <circle cx={r} cy={r} r={orbitR} stroke="rgba(255,255,255,0.12)" strokeWidth="1.5" />
+        <g
+          style={{
+            transformOrigin: `${r}px ${r}px`,
+            animation: "spinner-orbit 1s linear infinite",
+          }}
+        >
+          <circle cx={r} cy={r - orbitR} r={dotR} fill="currentColor" />
+        </g>
+      </svg>
+    );
+  }
+
+  /* ── [6] Ripple ────────────────────────────────────────────── */
+  if (variant === "ripple") {
+    const r = px / 2;
+    return (
+      <svg width={px} height={px} viewBox={`0 0 ${px} ${px}`} fill="none" className={className}>
+        {[0, 0.5].map((delay, i) => (
+          <circle
+            key={i}
+            cx={r}
+            cy={r}
+            r={r * 0.9}
+            stroke="currentColor"
+            strokeWidth="1.5"
+            style={{
+              transformOrigin: `${r}px ${r}px`,
+              animation: `spinner-ripple 1.4s ease-out ${delay}s infinite`,
+            }}
+          />
+        ))}
+      </svg>
+    );
+  }
+
+  /* ── [7] Dots Ring ─────────────────────────────────────────── */
+  if (variant === "dots-ring") {
+    const dots = [
+      { cx: 20, cy: 12 },
+      { cx: 17.66, cy: 17.66 },
+      { cx: 12, cy: 20 },
+      { cx: 6.34, cy: 17.66 },
+      { cx: 4, cy: 12 },
+      { cx: 6.34, cy: 6.34 },
+      { cx: 12, cy: 4 },
+      { cx: 17.66, cy: 6.34 },
+    ];
+    return (
+      <svg width={px} height={px} viewBox="0 0 24 24" fill="none" className={className}>
+        {dots.map((dot, i) => (
+          <circle
+            key={i}
+            cx={dot.cx}
+            cy={dot.cy}
+            r="2"
+            fill="currentColor"
+            style={{
+              transformOrigin: `${dot.cx}px ${dot.cy}px`,
+              animation: "spinner-dots-ring-fade 1.2s infinite ease-in-out",
+              animationDelay: `${i * 0.15 - 1.2}s`,
+            }}
+          />
+        ))}
+      </svg>
+    );
+  }
+
+  /* ── [8] Dots Step ─────────────────────────────────────────── */
+  if (variant === "dots-step") {
+    const dotPx = px * 0.22;
+    const anims = [
+      "spinner-dots-step-one",
+      "spinner-dots-step-two",
+      "spinner-dots-step-three",
+    ];
+    return (
+      <div
+        className={className}
+        style={{ display: "flex", gap: px * 0.22, alignItems: "center" }}
+      >
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            style={{
+              width: dotPx,
+              height: dotPx,
+              borderRadius: "50%",
+              background: "currentColor",
+              animation: `${anims[i]} 1.0s ease-in-out infinite`,
+            }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  /* ── [9] Text Dots ─────────────────────────────────────────── */
+  if (variant === "text-dots") {
+    const anims = [
+      "spinner-dots-step-one",
+      "spinner-dots-step-two",
+      "spinner-dots-step-three",
+    ];
+    return (
+      <span
+        className={className}
+        style={{
+          display: "inline-flex",
+          gap: "1px",
+          height: "fit-content",
+          verticalAlign: "baseline",
+          lineHeight: 1,
+        }}
+      >
+        {[0, 1, 2].map((i) => (
+          <span
+            key={i}
+            style={{
+              display: "inline-block",
+              color: "currentColor",
+              animation: `${anims[i]} 1.0s ease-in-out infinite`,
+              transformOrigin: "bottom center",
+            }}
+          >
+            .
+          </span>
+        ))}
+      </span>
+    );
+  }
+
+  return null;
+}

package/templates/toast/container.tsx

@@ -8,8 +8,8 @@ import {
   Info,
   X,
 } from "lucide-react";
-import { cn } from "@/utils/cn";
-import { Portal } from "../overlays";
+import { cn } from "@/pejay-ui/utils/cn";
+import { Portal } from "@/pejay-ui/components/overlays";
 
 // Dictionary mapping toast types to their respective Lucide icons and Tailwind styles
 const TOAST_STYLES = {

package/templates/utilities/formater.dateTime.md

@@ -0,0 +1,74 @@
+### Date Time Formatter (`date-time-formatter`)
+
+- **Description**: Validates, parses, formats, and compares dates/times using `dayjs`. All formatting and standard comparisons are normalized to the browser/app timezone detected via `dayjs.tz.guess()`.
+
+- **Exported Functions**:
+
+  - `setDateFormat({ input, mode, customformat })`
+    - Formats supported date inputs into:
+      - `DD/MM/YYYY` (`date`)
+      - `hh:mm A` (`time`)
+      - `DD/MM/YYYY hh:mm A` (`datetime`)
+      - Custom formats via `customformat`
+    - Returns `null` for invalid inputs.
+
+  - `compareDates({ input, compareTo, mode })`
+    - Compares two valid dates and returns:
+      ```ts
+      {
+        isSame: boolean;
+        isBefore: boolean;
+        isAfter: boolean;
+      }
+      ```
+    - Supported comparison modes:
+      - `timestamp`
+      - `time`
+      - `utc-time`
+      - `day`
+      - `week`
+      - `month`
+      - `year`
+    - Returns `null` if either date is invalid.
+
+- **Supported Inputs**
+  - `dayjs()`
+  - `new Date()`
+  - Unix timestamp (milliseconds)
+  - `YYYY-MM-DD`
+  - `YYYY-MM-DDTHH:mm`
+  - `YYYY-MM-DDTHH:mm:ss`
+  - `YYYY-MM-DDTHH:mm:ss.SSS`
+  - ISO strings with timezone offsets:
+    - `YYYY-MM-DDTHH:mm:ssZ`
+    - `YYYY-MM-DDTHH:mm:ss+05:30`
+    - `YYYY-MM-DDTHH:mm:ss-04:00`
+
+- **Comparison Modes**
+  - `timestamp`
+    - Compares exact timestamps (milliseconds since epoch).
+
+  - `time`
+    - Compares local wall-clock time after timezone conversion.
+    - Ignores date portion.
+
+  - `utc-time`
+    - Compares UTC clock time directly.
+    - Ignores date portion.
+
+  - `day`, `week`, `month`, `year`
+    - Uses Day.js unit-based comparisons.
+
+- **Timezone Behavior**
+  - Formatting is performed in the browser/app timezone (`dayjs.tz.guess()`).
+  - `time` compares local clock times after timezone normalization.
+  - `utc-time` compares UTC clock times without local timezone influence.
+  - ISO strings containing timezone offsets are automatically converted to the local timezone before formatting and standard comparisons.
+
+- **Features**
+  - Strict input validation.
+  - Browser timezone normalization.
+  - Local and UTC time-only comparison modes.
+  - Custom date formatting support.
+  - Supports Dayjs, Date, Unix timestamps, and ISO date strings.
+  - Safe null handling for invalid inputs.

package/templates/utilities/formater.dateTime.ts

@@ -0,0 +1,310 @@
+import dayjs, { Dayjs } from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+
+/* ------------------------------------------------
+ ? Types & Interfaces
+ ------------------------------------------------*/
+
+/**
+ * Accepted inputs:
+ * - `dayjs()`
+ * - `new Date()`
+ * - unix ms number
+ * - `YYYY-MM-DD`
+ * - `YYYY-MM-DDTHH:mm`
+ * - `YYYY-MM-DDTHH:mm:ss`
+ * - `YYYY-MM-DDTHH:mm:ss.SSS`
+ * - the same ISO shapes with `Z` or `+05:30` / `-04:00`
+ */
+type ISODateInput = `${string}Z` | `${string}${"+" | "-"}${string}:${string}`;
+type DateOnlyInput = `${number}-${number}-${number}`;
+type LocalDateTimeInput =
+  | `${number}-${number}-${number}T${number}:${number}`
+  | `${number}-${number}-${number}T${number}:${number}:${number}`
+  | `${number}-${number}-${number}T${number}:${number}:${number}.${number}`;
+
+type DateInput =
+  | Dayjs
+  | Date
+  | number
+  | ISODateInput
+  | DateOnlyInput
+  | LocalDateTimeInput;
+
+type FormatMode = "date" | "time" | "datetime";
+type CompareUnit =
+  | "timestamp"
+  | "time"
+  | "utc-time"
+  | "day"
+  | "week"
+  | "month"
+  | "year";
+
+type CompareResult = {
+  isSame: boolean;
+  isBefore: boolean;
+  isAfter: boolean;
+};
+
+/* ------------------------------------------------
+ ? Config — browser timezone (auto-detected at runtime)
+ ------------------------------------------------*/
+
+const LOCAL_TZ = dayjs.tz.guess();
+
+const ISO_WITH_TIMEZONE =
+  /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d{1,9})?(?:Z|[+-]\d{2}:\d{2})$/;
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+const LOCAL_DATE_TIME =
+  /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?$/;
+
+function toLocalZone(date: Dayjs) {
+  return date.tz(LOCAL_TZ);
+}
+
+/* ------------------------------------------------
+ ? Input validation & parsing
+ ------------------------------------------------*/
+
+export function isValidDateInput(input: unknown): input is DateInput {
+  if (input == null) return false;
+
+  if (dayjs.isDayjs(input)) {
+    return input.isValid();
+  }
+
+  if (input instanceof Date) {
+    return !Number.isNaN(input.getTime());
+  }
+
+  if (typeof input === "number") {
+    return Number.isFinite(input) && Number.isInteger(input);
+  }
+
+  if (typeof input === "string") {
+    const value = input.trim();
+    return (
+      ISO_WITH_TIMEZONE.test(value) ||
+      DATE_ONLY.test(value) ||
+      LOCAL_DATE_TIME.test(value)
+    );
+  }
+
+  return false;
+}
+
+/** Parse accepted input into dayjs, normalized to the browser's detected timezone. */
+function parseToLocal(input: DateInput): Dayjs | null {
+  if (!isValidDateInput(input)) return null;
+
+  if (dayjs.isDayjs(input)) {
+    return toLocalZone(input);
+  }
+
+  if (input instanceof Date) {
+    return toLocalZone(dayjs(input));
+  }
+
+  if (typeof input === "number") {
+    return toLocalZone(dayjs(input));
+  }
+
+  if (typeof input === "string") {
+    const value = input.trim();
+
+    if (ISO_WITH_TIMEZONE.test(value)) {
+      const parsed = dayjs(value);
+      return parsed.isValid() ? toLocalZone(parsed) : null;
+    }
+
+    if (DATE_ONLY.test(value)) {
+      const parsed = dayjs(value, "YYYY-MM-DD", true);
+      return parsed.isValid() ? toLocalZone(parsed) : null;
+    }
+
+    if (LOCAL_DATE_TIME.test(value)) {
+      const parsed = dayjs(
+        value,
+        ["YYYY-MM-DDTHH:mm", "YYYY-MM-DDTHH:mm:ss", "YYYY-MM-DDTHH:mm:ss.SSS"],
+        true,
+      );
+      return parsed.isValid() ? toLocalZone(parsed) : null;
+    }
+  }
+
+  return null;
+}
+
+/* ------------------------------------------------
+ ? Set date format
+  @param input - dayjs() | new Date() | ISO+Z/offset | unix ms
+  @param mode - Format mode (date, time, datetime)
+  @param customformat - Custom format string
+  @returns Formatted date string in the browser timezone
+ ------------------------------------------------*/
+
+export function setDateFormat({
+  input,
+  mode = "date",
+  customformat,
+}: {
+  input: DateInput;
+  mode?: FormatMode;
+  customformat?: string;
+}): string | null {
+  const date = parseToLocal(input);
+  if (!date) return null;
+
+  const formats = {
+    date: "DD/MM/YYYY",
+    time: "hh:mm A",
+    datetime: "DD/MM/YYYY hh:mm A",
+  };
+
+  return date.format(customformat ?? formats[mode]);
+}
+
+/* ------------------------------------------------
+ ? Compare dates
+  @param input - dayjs() | new Date() | ISO+Z/offset | unix ms
+  @param compareTo - dayjs() | new Date() | ISO+Z/offset | unix ms
+  @param mode - Comparison unit
+  @returns
+  {isSame: boolean;
+  isBefore: boolean;
+  isAfter: boolean;
+  }
+ ------------------------------------------------*/
+
+export function compareDates({
+  input,
+  compareTo,
+  mode,
+}: {
+  input: DateInput;
+  compareTo: DateInput;
+  mode: CompareUnit;
+}): CompareResult | null {
+  const left = parseToLocal(input);
+  const right = parseToLocal(compareTo);
+
+  if (!left || !right) {
+    return null;
+  }
+
+  if (mode === "timestamp") {
+    return {
+      isSame: left.valueOf() === right.valueOf(),
+      isBefore: left.valueOf() < right.valueOf(),
+      isAfter: left.valueOf() > right.valueOf(),
+    };
+  }
+
+  if (mode === "time") {
+    const leftTime = getTimeValue(left);
+    const rightTime = getTimeValue(right);
+
+    return {
+      isSame: leftTime === rightTime,
+      isBefore: leftTime < rightTime,
+      isAfter: leftTime > rightTime,
+    };
+  }
+
+  if (mode === "utc-time") {
+    const leftTime = getTimeValue(left.utc());
+    const rightTime = getTimeValue(right.utc());
+
+    return {
+      isSame: leftTime === rightTime,
+      isBefore: leftTime < rightTime,
+      isAfter: leftTime > rightTime,
+    };
+  }
+
+  return {
+    isSame: left.isSame(right, mode),
+    isBefore: left.isBefore(right, mode),
+    isAfter: left.isAfter(right, mode),
+  };
+}
+
+/* ------------------------------------------------
+ ? Helper Functions
+ ------------------------------------------------*/
+
+export function getTimeValue(date: Dayjs): number {
+  return (
+    date.hour() * 3600000 +
+    date.minute() * 60000 +
+    date.second() * 1000 +
+    date.millisecond()
+  );
+}
+
+/*
+ Accepted inputs only:
+   dayjs()
+   new Date()
+  1718600000000
+  "2026-06-17"
+  "2026-06-17T10:30"
+  "2026-06-17T10:30:00"
+  "2026-06-17T10:30:00.123"
+  "2026-06-17T10:30:00Z"
+  "2026-06-17T10:30:00+05:30"
+
+
+Timezone:
+  - formatting and normal compare use dayjs.tz.guess() (browser/app timezone)
+  - `time` compares local wall-clock time
+  - `utc-time` compares UTC clock time
+
+ ? Example Usage
+
+   setDateFormat({ input: dayjs() });
+   setDateFormat({ input: new Date(), mode: "datetime" });
+  setDateFormat({ input: "2026-06-17", mode: "date" });
+  setDateFormat({ input: "2026-06-17T10:30", mode: "datetime" });
+   setDateFormat({ input: "2026-06-17T10:30:00Z", mode: "time" });
+   setDateFormat({ input: 1718600000000, mode: "date" });
+
+   compareDates({
+     input: "2026-06-17T10:30:00Z",
+     compareTo: new Date(),
+     mode: "day",
+   });
+
+   compareDates({
+     input: "2026-06-17T10:30:00+05:30",
+     compareTo: "2026-06-17T10:30:00Z",
+     mode: "timestamp",
+   });
+
+  compareDates({
+    input: "2026-06-17T10:30:00Z",
+    compareTo: "2026-06-17T08:30:00Z",
+    mode: "utc-time",
+  });
+
+  // `time` compares local clock time after timezone conversion
+  compareDates({
+    input: "2026-06-17T10:30:00Z",
+    compareTo: "2026-06-17T10:30:00+05:30",
+    mode: "time",
+  });
+
+  // `utc-time` compares the UTC clock time directly
+  compareDates({
+    input: "2026-06-17T10:30:00Z",
+    compareTo: "2026-06-17T10:30:00+05:30",
+    mode: "utc-time",
+  });
+*/