@demokit-ui/demokit 0.1.0

package/dist/kit/components/decorative/grid-background/grid-background.js

@@ -0,0 +1,46 @@
+import { jsx as c } from "react/jsx-runtime";
+import { cn as b } from "../../../../lib/utils.js";
+function g(t, r, a) {
+  switch (t) {
+    case "bottom":
+      return `linear-gradient(to bottom, black 0%, black ${r}%, transparent ${a}%)`;
+    case "top":
+      return `linear-gradient(to top, black 0%, black ${r}%, transparent ${a}%)`;
+    case "radial":
+      return `radial-gradient(ellipse at center, black ${r}%, transparent ${a}%)`;
+    case "none":
+      return;
+  }
+}
+function $({
+  size: t = 44,
+  color: r = "rgba(59,130,246,0.08)",
+  thickness: a = 1,
+  fade: n = "bottom",
+  fadeStart: o = 25,
+  fadeEnd: i = 92,
+  className: d,
+  style: p,
+  ...l
+}) {
+  const e = g(n, o, i);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "aria-hidden": !0,
+      "data-slot": "grid-background",
+      className: b("absolute inset-0 pointer-events-none", d),
+      style: {
+        backgroundImage: `linear-gradient(${r} ${a}px, transparent ${a}px), linear-gradient(90deg, ${r} ${a}px, transparent ${a}px)`,
+        backgroundSize: `${t}px ${t}px`,
+        maskImage: e,
+        WebkitMaskImage: e,
+        ...p
+      },
+      ...l
+    }
+  );
+}
+export {
+  $ as GridBackground
+};

package/dist/kit/components/decorative/shimmering-text/shimmering-text.d.ts

@@ -0,0 +1,29 @@
+import { UseInViewOptions } from 'motion/react';
+interface ShimmeringTextProps {
+    /** Text to display with shimmer effect */
+    text: string;
+    /** Animation duration in seconds */
+    duration?: number;
+    /** Delay before starting animation */
+    delay?: number;
+    /** Whether to repeat the animation */
+    repeat?: boolean;
+    /** Pause duration between repeats in seconds */
+    repeatDelay?: number;
+    /** Custom className */
+    className?: string;
+    /** Whether to start animation when component enters viewport */
+    startOnView?: boolean;
+    /** Whether to animate only once */
+    once?: boolean;
+    /** Margin for in-view detection (rootMargin) */
+    inViewMargin?: UseInViewOptions['margin'];
+    /** Shimmer spread multiplier */
+    spread?: number;
+    /** Base text color */
+    color?: string;
+    /** Shimmer gradient color */
+    shimmerColor?: string;
+}
+export declare function ShimmeringText({ text, duration, delay, repeat, repeatDelay, className, startOnView, once, inViewMargin, spread, color, shimmerColor, }: ShimmeringTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/kit/components/decorative/shimmering-text/shimmering-text.js

@@ -0,0 +1,64 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useRef as h, useMemo as v } from "react";
+import { useInView as k, motion as x } from "motion/react";
+import { cn as y } from "../../../../lib/utils.js";
+function z({
+  text: r,
+  duration: t = 2,
+  delay: e = 0,
+  repeat: c = !0,
+  repeatDelay: s = 0.5,
+  className: m,
+  startOnView: l = !0,
+  once: p = !1,
+  inViewMargin: g,
+  spread: a = 2,
+  color: n,
+  shimmerColor: o
+}) {
+  const i = h(null), u = k(i, { once: p, margin: g }), d = v(() => r.length * a, [r, a]), b = !l || u;
+  return /* @__PURE__ */ f(
+    x.span,
+    {
+      ref: i,
+      className: y(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--base-color:var(--color-zinc-400)] [--shimmer-color:var(--color-zinc-950)]",
+        "[background-repeat:no-repeat,padding-box]",
+        "[--shimmer-bg:linear-gradient(90deg,transparent_calc(50%-var(--spread)),var(--shimmer-color),transparent_calc(50%+var(--spread)))]",
+        m
+      ),
+      style: {
+        "--spread": `${d}px`,
+        ...n && { "--base-color": n },
+        ...o && { "--shimmer-color": o },
+        backgroundImage: "var(--shimmer-bg), linear-gradient(var(--base-color), var(--base-color))"
+      },
+      initial: {
+        backgroundPosition: "100% center",
+        opacity: 0
+      },
+      animate: b ? {
+        backgroundPosition: "0% center",
+        opacity: 1
+      } : {},
+      transition: {
+        backgroundPosition: {
+          repeat: c ? 1 / 0 : 0,
+          duration: t,
+          delay: e,
+          repeatDelay: s,
+          ease: "linear"
+        },
+        opacity: {
+          duration: 0.3,
+          delay: e
+        }
+      },
+      children: r
+    }
+  );
+}
+export {
+  z as ShimmeringText
+};

package/dist/kit/components/decorative/text-reveal/text-reveal.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+type RevealVariant = 'fade' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'scale' | 'blur' | 'typewriter' | 'wave' | 'stagger' | 'rotate' | 'elastic';
+interface TextRevealProps {
+    children: string;
+    variant?: RevealVariant;
+    className?: string;
+    style?: React.CSSProperties;
+    delay?: number;
+    duration?: number;
+    staggerDelay?: number;
+    once?: boolean;
+    startOnView?: boolean;
+    wordLevel?: boolean;
+    onComplete?: () => void;
+}
+export declare function TextReveal({ children, variant, className, style, delay, duration, staggerDelay, once, startOnView, wordLevel, }: TextRevealProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/kit/components/decorative/text-reveal/text-reveal.js

@@ -0,0 +1,277 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useRef as I, useState as O, useEffect as R } from "react";
+import { useInView as W, motion as a } from "motion/react";
+import { cn as b } from "../../../../lib/utils.js";
+const A = {
+  fade: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.02 }
+    }
+  },
+  slideUp: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.04 }
+    }
+  },
+  slideDown: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.04 }
+    }
+  },
+  slideLeft: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.04 }
+    }
+  },
+  slideRight: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.04 }
+    }
+  },
+  scale: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.06 }
+    }
+  },
+  blur: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.03 }
+    }
+  },
+  typewriter: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.15 }
+    }
+  },
+  wave: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.12 }
+    }
+  },
+  stagger: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.08 }
+    }
+  },
+  rotate: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.05 }
+    }
+  },
+  elastic: {
+    hidden: {},
+    visible: {
+      transition: { staggerChildren: 0.07 }
+    }
+  }
+}, N = {
+  fade: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { duration: 0.6, ease: "easeOut" }
+    }
+  },
+  slideUp: {
+    hidden: { opacity: 0, y: 50, scale: 0.95 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1] }
+    }
+  },
+  slideDown: {
+    hidden: { opacity: 0, y: -30, scale: 0.98 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.5, ease: [0.25, 0.46, 0.45, 0.94] }
+    }
+  },
+  slideLeft: {
+    hidden: { opacity: 0, x: 60, rotateY: 15 },
+    visible: {
+      opacity: 1,
+      x: 0,
+      rotateY: 0,
+      transition: { duration: 0.65, ease: [0.16, 1, 0.3, 1] }
+    }
+  },
+  slideRight: {
+    hidden: { opacity: 0, x: -60, rotateY: -15 },
+    visible: {
+      opacity: 1,
+      x: 0,
+      rotateY: 0,
+      transition: { duration: 0.65, ease: [0.16, 1, 0.3, 1] }
+    }
+  },
+  scale: {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: 0.4, ease: [0.34, 1.56, 0.64, 1] }
+    }
+  },
+  blur: {
+    hidden: { opacity: 0, filter: "blur(4px)" },
+    visible: {
+      opacity: 1,
+      filter: "blur(0px)",
+      transition: { duration: 0.6, ease: "easeOut" }
+    }
+  },
+  typewriter: {
+    hidden: { width: 0 },
+    visible: {
+      width: "auto",
+      transition: { duration: 0.3, ease: "easeInOut" }
+    }
+  },
+  wave: {
+    hidden: { opacity: 0, y: 20, rotateZ: -5 },
+    visible: {
+      opacity: 1,
+      y: [20, -10, 0],
+      rotateZ: [-5, 5, 0],
+      transition: {
+        duration: 0.8,
+        ease: [0.34, 1.56, 0.64, 1],
+        times: [0, 0.5, 1]
+      }
+    }
+  },
+  stagger: {
+    hidden: { opacity: 0, y: 30, scale: 0.9 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: { duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }
+    }
+  },
+  rotate: {
+    hidden: { opacity: 0, rotateY: -90 },
+    visible: {
+      opacity: 1,
+      rotateY: 0,
+      transition: { duration: 0.6, ease: [0.25, 0.46, 0.45, 0.94] }
+    }
+  },
+  elastic: {
+    hidden: { opacity: 0, scale: 0 },
+    visible: {
+      opacity: 1,
+      scale: [0, 1.2, 1],
+      transition: {
+        duration: 0.8,
+        ease: [0.68, -0.55, 0.265, 1.55],
+        times: [0, 0.6, 1]
+      }
+    }
+  }
+};
+function U({
+  children: n,
+  variant: i = "fade",
+  className: y,
+  style: g,
+  delay: u = 0,
+  duration: l = 0.6,
+  staggerDelay: v = 0.03,
+  once: m = !0,
+  startOnView: f = !0,
+  wordLevel: d = !1
+}) {
+  const c = I(null), w = W(c, { once: m, margin: "-10%" }), [h, C] = O(!1), s = f ? w : !0, k = d ? n.split(" ").map((e, r, Y) => r < Y.length - 1 ? `${e} ` : e) : n.split(""), V = {
+    ...A[i],
+    visible: {
+      transition: {
+        staggerChildren: v,
+        delayChildren: u
+      }
+    }
+  }, t = N[i], p = l === 0.6 ? t : {
+    hidden: t.hidden,
+    visible: {
+      ...t.visible,
+      transition: {
+        ...t.visible.transition,
+        duration: l
+      }
+    }
+  };
+  R(() => {
+    s && !h && C(!0);
+  }, [s, h]);
+  const x = i === "typewriter" ? a.div : a.span;
+  return /* @__PURE__ */ o(
+    a.div,
+    {
+      ref: c,
+      className: b("inline-block", y),
+      variants: V,
+      initial: "hidden",
+      animate: s ? "visible" : "hidden",
+      style: {
+        willChange: "transform, opacity",
+        WebkitBackfaceVisibility: "hidden",
+        backfaceVisibility: "hidden",
+        WebkitTransform: "translate3d(0,0,0)",
+        transform: "translate3d(0,0,0)",
+        isolation: "isolate",
+        contain: "layout style paint",
+        ...g
+      },
+      children: i === "typewriter" ? /* @__PURE__ */ o(
+        a.span,
+        {
+          className: "inline-block overflow-hidden whitespace-nowrap",
+          variants: p,
+          style: {
+            display: "inline-block",
+            whiteSpace: "nowrap"
+          },
+          children: n
+        }
+      ) : k.map((e, r) => /* @__PURE__ */ o(
+        x,
+        {
+          className: b("inline-block", {
+            "whitespace-pre": !d
+          }),
+          variants: p,
+          style: {
+            display: "inline-block",
+            transformOrigin: i === "rotate" ? "center center" : void 0,
+            willChange: "transform, opacity",
+            WebkitBackfaceVisibility: "hidden",
+            backfaceVisibility: "hidden",
+            WebkitTransform: "translate3d(0,0,0)",
+            transform: "translate3d(0,0,0)",
+            isolation: "isolate"
+          },
+          children: e === " " ? " " : e
+        },
+        r
+      ))
+    }
+  );
+}
+export {
+  U as TextReveal
+};

package/dist/kit/components/feedback/alert/alert.d.ts

@@ -0,0 +1,21 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const alertVariants: (props?: ({
+    variant?: "primary" | "mono" | "destructive" | "secondary" | "success" | "warning" | "info" | null | undefined;
+    icon?: "primary" | "destructive" | "success" | "warning" | "info" | null | undefined;
+    appearance?: "stroke" | "solid" | "light" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    close?: boolean;
+    onClose?: () => void;
+}
+interface AlertIconProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+}
+declare function Alert({ className, variant, size, icon, appearance, close, onClose, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): import("react/jsx-runtime").JSX.Element;
+declare function AlertIcon({ children, className, ...props }: AlertIconProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertToolbar({ children, className, ...props }: AlertIconProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+declare function AlertContent({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertContent, AlertDescription, AlertIcon, AlertTitle, AlertToolbar };

package/dist/kit/components/feedback/alert/alert.js

@@ -0,0 +1,236 @@
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import { cn as e } from "../../../../lib/utils.js";
+import { Button as g } from "../../form/button/button.js";
+import { cva as u } from "class-variance-authority";
+import { X as p } from "lucide-react";
+const m = u("flex items-stretch w-full gap-2 group-[.toaster]:w-(--width)", {
+  variants: {
+    variant: {
+      secondary: "",
+      primary: "",
+      destructive: "",
+      success: "",
+      info: "",
+      mono: "",
+      warning: ""
+    },
+    icon: {
+      primary: "",
+      destructive: "",
+      success: "",
+      info: "",
+      warning: ""
+    },
+    appearance: {
+      solid: "",
+      outline: "",
+      light: "",
+      stroke: "text-foreground"
+    },
+    size: {
+      lg: "rounded-lg p-4 gap-3 text-base [&>[data-slot=alert-icon]>svg]:size-6 *:data-slot=alert-icon:mt-0.5 [&_[data-slot=alert-close]]:mt-1",
+      md: "rounded-lg p-3.5 gap-2.5 text-sm [&>[data-slot=alert-icon]>svg]:size-5 *:data-slot=alert-icon:mt-0 [&_[data-slot=alert-close]]:mt-0.5",
+      sm: "rounded-md px-3 py-2.5 gap-2 text-xs [&>[data-slot=alert-icon]>svg]:size-4 *:data-alert-icon:mt-0.5 [&_[data-slot=alert-close]]:mt-0.25 [&_[data-slot=alert-close]_svg]:size-3.5"
+    }
+  },
+  compoundVariants: [
+    /* Solid */
+    {
+      variant: "secondary",
+      appearance: "solid",
+      className: "bg-muted text-foreground"
+    },
+    {
+      variant: "primary",
+      appearance: "solid",
+      className: "bg-primary text-primary-foreground"
+    },
+    {
+      variant: "destructive",
+      appearance: "solid",
+      className: "bg-destructive text-destructive-foreground"
+    },
+    {
+      variant: "success",
+      appearance: "solid",
+      className: "bg-[var(--color-success,var(--color-green-500))] text-[var(--color-success-foreground,var(--color-white))]"
+    },
+    {
+      variant: "info",
+      appearance: "solid",
+      className: "bg-[var(--color-info,var(--color-violet-600))] text-[var(--color-info-foreground,var(--color-white))]"
+    },
+    {
+      variant: "warning",
+      appearance: "solid",
+      className: "bg-[var(--color-warning,var(--color-yellow-500))] text-[var(--color-warning-foreground,var(--color-white))]"
+    },
+    {
+      variant: "mono",
+      appearance: "solid",
+      className: "bg-zinc-950 text-white *:data-slot-[alert=close]:text-white"
+    },
+    /* Outline */
+    {
+      variant: "secondary",
+      appearance: "outline",
+      className: "border border-border bg-background text-foreground [&_[data-slot=alert-close]]:text-foreground"
+    },
+    {
+      variant: "primary",
+      appearance: "outline",
+      className: "border border-border bg-background text-primary [&_[data-slot=alert-close]]:text-foreground"
+    },
+    {
+      variant: "destructive",
+      appearance: "outline",
+      className: "border border-border bg-background text-destructive [&_[data-slot=alert-close]]:text-foreground"
+    },
+    {
+      variant: "success",
+      appearance: "outline",
+      className: "border border-border bg-background text-[var(--color-success,var(--color-green-500))] [&_[data-slot=alert-close]]:text-foreground"
+    },
+    {
+      variant: "info",
+      appearance: "outline",
+      className: "border border-border bg-background text-[var(--color-info,var(--color-violet-600))] [&_[data-slot=alert-close]]:text-foreground"
+    },
+    {
+      variant: "warning",
+      appearance: "outline",
+      className: "border border-border bg-background text-[var(--color-warning,var(--color-yellow-500))] [&_[data-slot=alert-close]]:text-foreground"
+    },
+    {
+      variant: "mono",
+      appearance: "outline",
+      className: "border border-border bg-background text-foreground [&_[data-slot=alert-close]]:text-foreground"
+    },
+    /* Light */
+    {
+      variant: "secondary",
+      appearance: "light",
+      className: "bg-muted border border-border text-foreground"
+    },
+    {
+      variant: "primary",
+      appearance: "light",
+      className: "text-foreground bg-[var(--color-primary-soft,var(--color-blue-50))] border border-[var(--color-primary-alpha,var(--color-blue-100))] [&_[data-slot=alert-icon]]:text-primary"
+    },
+    {
+      variant: "destructive",
+      appearance: "light",
+      className: "bg-[var(--color-destructive-soft,var(--color-red-50))] border border-[var(--color-destructive-alpha,var(--color-red-100))] text-foreground [&_[data-slot=alert-icon]]:text-destructive"
+    },
+    {
+      variant: "success",
+      appearance: "light",
+      className: "bg-[var(--color-success-soft,var(--color-green-50))] border border-[var(--color-success-alpha,var(--color-green-100))] text-foreground [&_[data-slot=alert-icon]]:text-[var(--color-success-foreground,var(--color-green-600))]"
+    },
+    {
+      variant: "info",
+      appearance: "light",
+      className: "bg-[var(--color-info-soft,var(--color-violet-50))] border border-[var(--color-info-alpha,var(--color-violet-100))] text-foreground [&_[data-slot=alert-icon]]:text-[var(--color-info-foreground,var(--color-violet-600))]"
+    },
+    {
+      variant: "warning",
+      appearance: "light",
+      className: "bg-[var(--color-warning-soft,var(--color-yellow-50))] border border-[var(--color-warning-alpha,var(--color-yellow-100))] text-foreground [&_[data-slot=alert-icon]]:text-[var(--color-warning-foreground,var(--color-yellow-600))]"
+    },
+    /* Mono */
+    {
+      variant: "mono",
+      icon: "primary",
+      className: "[&_[data-slot=alert-icon]]:text-primary"
+    },
+    {
+      variant: "mono",
+      icon: "warning",
+      className: "[&_[data-slot=alert-icon]]:text-[var(--color-warning-foreground,var(--color-yellow-600))]"
+    },
+    {
+      variant: "mono",
+      icon: "success",
+      className: "[&_[data-slot=alert-icon]]:text-[var(--color-success-foreground,var(--color-green-600))]"
+    },
+    {
+      variant: "mono",
+      icon: "destructive",
+      className: "[&_[data-slot=alert-icon]]:text-destructive"
+    },
+    {
+      variant: "mono",
+      icon: "info",
+      className: "[&_[data-slot=alert-icon]]:text-[var(--color-info-foreground,var(--color-violet-600))]"
+    }
+  ],
+  defaultVariants: {
+    variant: "secondary",
+    appearance: "solid",
+    size: "md"
+  }
+});
+function y({ className: r, variant: a, size: t, icon: l, appearance: s, close: n = !1, onClose: c, children: i, ...d }) {
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: e(m({ variant: a, size: t, icon: l, appearance: s }), r),
+      ...d,
+      children: [
+        i,
+        n && /* @__PURE__ */ o(
+          g,
+          {
+            size: "sm",
+            variant: "inverse",
+            mode: "icon",
+            onClick: c,
+            "aria-label": "Dismiss",
+            "data-slot": "alert-close",
+            className: e("group shrink-0 size-4"),
+            children: /* @__PURE__ */ o(p, { className: "opacity-60 group-hover:opacity-100 size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function h({ className: r, ...a }) {
+  return /* @__PURE__ */ o("div", { "data-slot": "alert-title", className: e("grow tracking-tight", r), ...a });
+}
+function _({ children: r, className: a, ...t }) {
+  return /* @__PURE__ */ o("div", { "data-slot": "alert-icon", className: e("shrink-0", a), ...t, children: r });
+}
+function k({ children: r, className: a, ...t }) {
+  return /* @__PURE__ */ o("div", { "data-slot": "alert-toolbar", className: e(a), ...t, children: r });
+}
+function z({ className: r, ...a }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: e("text-sm [&_p]:leading-relaxed [&_p]:mb-2", r),
+      ...a
+    }
+  );
+}
+function A({ className: r, ...a }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "alert-content",
+      className: e("space-y-2 [&_[data-slot=alert-title]]:font-semibold", r),
+      ...a
+    }
+  );
+}
+export {
+  y as Alert,
+  A as AlertContent,
+  z as AlertDescription,
+  _ as AlertIcon,
+  h as AlertTitle,
+  k as AlertToolbar
+};