@demokit-ui/demokit 0.1.0

package/dist/kit/components/data-display/progress/progress.js

@@ -0,0 +1,29 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as o } from "../../../../lib/utils.js";
+import { Progress as s } from "radix-ui";
+function d({
+  className: l,
+  indicatorClassName: t,
+  value: a,
+  ...e
+}) {
+  return /* @__PURE__ */ r(
+    s.Root,
+    {
+      "data-slot": "progress",
+      className: o("relative h-2 w-full overflow-hidden rounded-full bg-secondary", l),
+      ...e,
+      children: /* @__PURE__ */ r(
+        s.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: o("h-full w-full flex-1 bg-primary transition-all", t),
+          style: { transform: `translateX(-${100 - (a || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+export {
+  d as Progress
+};

package/dist/kit/components/data-display/skeleton/skeleton.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

package/dist/kit/components/data-display/skeleton/skeleton.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as n } from "../../../../lib/utils.js";
+function m({ className: e, ...t }) {
+  return /* @__PURE__ */ o("div", { "data-slot": "skeleton", className: n("animate-pulse rounded-md bg-accent", e), ...t });
+}
+export {
+  m as Skeleton
+};

package/dist/kit/components/data-display/sliding-number/sliding-number.d.ts

@@ -0,0 +1,7 @@
+interface SlidingNumberProps {
+    number: number;
+    className?: string;
+    padStart?: number;
+}
+export declare function SlidingNumber({ number, className, padStart }: SlidingNumberProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/kit/components/data-display/sliding-number/sliding-number.js

@@ -0,0 +1,41 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useEffect as m } from "react";
+import { useMotionValue as f, animate as u, useTransform as h, motion as p } from "motion/react";
+import { cn as d } from "../../../../lib/utils.js";
+function v({ number: o, className: r, padStart: n = 0 }) {
+  const t = Math.abs(Math.round(o)), s = Math.max(n, t === 0 ? 1 : Math.floor(Math.log10(t)) + 1), e = Array.from({ length: s }, (i, l) => Math.pow(10, s - l - 1));
+  return /* @__PURE__ */ c("span", { className: d("inline-flex items-center tabular-nums leading-none", r), children: [
+    o < 0 && /* @__PURE__ */ a("span", { className: "mr-[0.1em]", children: "-" }),
+    e.map((i) => /* @__PURE__ */ a(g, { place: i, value: t }, i))
+  ] });
+}
+function g({ place: o, value: r }) {
+  const n = Math.floor(r / o), t = f(n);
+  return m(() => {
+    const s = u(t, n, {
+      type: "spring",
+      mass: 0.8,
+      stiffness: 75,
+      damping: 15
+    });
+    return () => s.stop();
+  }, [t, n]), /* @__PURE__ */ a("span", { className: "relative inline-block w-[1ch] h-[1em] overflow-hidden", children: Array.from({ length: 10 }, (s, e) => /* @__PURE__ */ a(M, { mv: t, digit: e }, e)) });
+}
+function M({ mv: o, digit: r }) {
+  const n = h(o, (t) => {
+    const s = t % 10;
+    let e = (10 + r - s) % 10;
+    return e > 5 && (e -= 10), `${e * 100}%`;
+  });
+  return /* @__PURE__ */ a(
+    p.span,
+    {
+      style: { y: n },
+      className: "absolute inset-0 flex items-center justify-center",
+      children: r
+    }
+  );
+}
+export {
+  v as SlidingNumber
+};

package/dist/kit/components/data-display/stepper/stepper.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+type StepperOrientation = 'horizontal' | 'vertical';
+type StepState = 'active' | 'completed' | 'inactive' | 'loading';
+type StepIndicators = {
+    active?: React.ReactNode;
+    completed?: React.ReactNode;
+    inactive?: React.ReactNode;
+    loading?: React.ReactNode;
+};
+interface StepperContextValue {
+    activeStep: number;
+    setActiveStep: (step: number) => void;
+    stepsCount: number;
+    orientation: StepperOrientation;
+    registerTrigger: (node: HTMLButtonElement | null) => void;
+    triggerNodes: HTMLButtonElement[];
+    focusNext: (currentIdx: number) => void;
+    focusPrev: (currentIdx: number) => void;
+    focusFirst: () => void;
+    focusLast: () => void;
+    indicators: StepIndicators;
+}
+interface StepItemContextValue {
+    step: number;
+    state: StepState;
+    isDisabled: boolean;
+    isLoading: boolean;
+}
+declare function useStepper(): StepperContextValue;
+declare function useStepItem(): StepItemContextValue;
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    defaultValue?: number;
+    value?: number;
+    onValueChange?: (value: number) => void;
+    orientation?: StepperOrientation;
+    indicators?: StepIndicators;
+}
+declare function Stepper({ defaultValue, value, onValueChange, orientation, className, children, indicators, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element;
+interface StepperItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    step: number;
+    completed?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+}
+declare function StepperItem({ step, completed, disabled, loading, className, children, ...props }: StepperItemProps): import("react/jsx-runtime").JSX.Element;
+interface StepperTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare function StepperTrigger({ asChild, className, children, tabIndex, ...props }: StepperTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperIndicator({ children, className }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function StepperSeparator({ className }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function StepperTitle({ children, className }: React.ComponentProps<'h3'>): import("react/jsx-runtime").JSX.Element;
+declare function StepperDescription({ children, className }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function StepperNav({ children, className }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element;
+declare function StepperPanel({ children, className }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+interface StepperContentProps extends React.ComponentProps<'div'> {
+    value: number;
+    forceMount?: boolean;
+}
+declare function StepperContent({ value, forceMount, children, className }: StepperContentProps): import("react/jsx-runtime").JSX.Element | null;
+export { useStepper, useStepItem, Stepper, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription, StepperPanel, StepperContent, StepperNav, type StepperProps, type StepperItemProps, type StepperTriggerProps, type StepperContentProps, };

package/dist/kit/components/data-display/stepper/stepper.js

@@ -0,0 +1,230 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as p from "react";
+import { useContext as E, createContext as L } from "react";
+import { cn as d } from "../../../../lib/utils.js";
+const T = L(void 0), P = L(void 0);
+function x() {
+  const t = E(T);
+  if (!t) throw new Error("useStepper must be used within a Stepper");
+  return t;
+}
+function y() {
+  const t = E(P);
+  if (!t) throw new Error("useStepItem must be used within a StepperItem");
+  return t;
+}
+function K({
+  defaultValue: t = 1,
+  value: a,
+  onValueChange: r,
+  orientation: n = "horizontal",
+  className: s,
+  children: o,
+  indicators: b = {},
+  ...f
+}) {
+  const [m, S] = p.useState(t), [c, k] = p.useState([]), h = p.useCallback((e) => {
+    k((l) => e && !l.includes(e) ? [...l, e] : !e && l.includes(e) ? l.filter((z) => z !== e) : l);
+  }, []), w = p.useCallback(
+    (e) => {
+      a === void 0 && S(e), r?.(e);
+    },
+    [a, r]
+  ), N = a ?? m, g = (e) => {
+    c[e] && c[e].focus();
+  }, v = (e) => g((e + 1) % c.length), A = (e) => g((e - 1 + c.length) % c.length), D = () => g(0), C = () => g(c.length - 1), I = p.useMemo(
+    () => ({
+      activeStep: N,
+      setActiveStep: w,
+      stepsCount: p.Children.toArray(o).filter(
+        (e) => p.isValidElement(e) && e.type.displayName === "StepperItem"
+      ).length,
+      orientation: n,
+      registerTrigger: h,
+      focusNext: v,
+      focusPrev: A,
+      focusFirst: D,
+      focusLast: C,
+      triggerNodes: c,
+      indicators: b
+    }),
+    [N, w, o, n, h, c]
+  );
+  return /* @__PURE__ */ i(T.Provider, { value: I, children: /* @__PURE__ */ i(
+    "div",
+    {
+      role: "tablist",
+      "aria-orientation": n,
+      "data-slot": "stepper",
+      className: d(
+        "group/stepper flex w-full",
+        n === "horizontal" ? "flex-row items-center" : "flex-col items-start",
+        s
+      ),
+      "data-orientation": n,
+      ...f,
+      children: o
+    }
+  ) });
+}
+function $({
+  step: t,
+  completed: a = !1,
+  disabled: r = !1,
+  loading: n = !1,
+  className: s,
+  children: o,
+  ...b
+}) {
+  const { activeStep: f } = x(), m = a || t < f ? "completed" : f === t ? "active" : "inactive", S = n && t === f;
+  return /* @__PURE__ */ i(P.Provider, { value: { step: t, state: m, isDisabled: r, isLoading: S }, children: /* @__PURE__ */ i(
+    "div",
+    {
+      "data-slot": "stepper-item",
+      className: d(
+        "group/step flex items-center justify-center group-data-[orientation=vertical]/stepper:flex-col",
+        s
+      ),
+      "data-state": m,
+      ...S ? { "data-loading": !0 } : {},
+      ...b,
+      children: o
+    }
+  ) });
+}
+function H({ asChild: t = !1, className: a, children: r, tabIndex: n, ...s }) {
+  const { state: o, isLoading: b } = y(), f = x(), { setActiveStep: m, activeStep: S, registerTrigger: c, triggerNodes: k, focusNext: h, focusPrev: w, focusFirst: N, focusLast: g } = f, { step: v, isDisabled: A } = y(), D = S === v, C = `stepper-tab-${v}`, I = `stepper-panel-${v}`, e = p.useRef(null);
+  p.useEffect(() => {
+    e.current && c(e.current);
+  }, [e.current]);
+  const l = p.useMemo(
+    () => k.findIndex((u) => u === e.current),
+    [k, e.current]
+  ), z = (u) => {
+    switch (u.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        u.preventDefault(), l !== -1 && h && h(l);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        u.preventDefault(), l !== -1 && w && w(l);
+        break;
+      case "Home":
+        u.preventDefault(), N && N();
+        break;
+      case "End":
+        u.preventDefault(), g && g();
+        break;
+      case "Enter":
+      case " ":
+        u.preventDefault(), m(v);
+        break;
+    }
+  };
+  return t ? /* @__PURE__ */ i("span", { "data-slot": "stepper-trigger", "data-state": o, className: a, children: r }) : /* @__PURE__ */ i(
+    "button",
+    {
+      ref: e,
+      role: "tab",
+      id: C,
+      "aria-selected": D,
+      "aria-controls": I,
+      tabIndex: typeof n == "number" ? n : D ? 0 : -1,
+      "data-slot": "stepper-trigger",
+      "data-state": o,
+      "data-loading": b,
+      className: d(
+        "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center gap-3 rounded-full outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-60",
+        a
+      ),
+      onClick: () => m(v),
+      onKeyDown: z,
+      disabled: A,
+      ...s,
+      children: r
+    }
+  );
+}
+function U({ children: t, className: a }) {
+  const { state: r, isLoading: n } = y(), { indicators: s } = x();
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-slot": "stepper-indicator",
+      "data-state": r,
+      className: d(
+        "relative flex items-center overflow-hidden justify-center size-6 shrink-0 border-background bg-accent text-accent-foreground rounded-full text-xs data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+        a
+      ),
+      children: /* @__PURE__ */ i("div", { className: "absolute", children: s && (n && s.loading || r === "completed" && s.completed || r === "active" && s.active || r === "inactive" && s.inactive) ? n && s.loading || r === "completed" && s.completed || r === "active" && s.active || r === "inactive" && s.inactive : t })
+    }
+  );
+}
+function V({ className: t }) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-slot": "stepper-separator",
+      className: d(
+        "mx-2 rounded-full bg-muted group-data-[orientation=horizontal]/stepper:h-0.5 group-data-[orientation=horizontal]/stepper:flex-1 group-data-[orientation=vertical]/stepper:h-12 group-data-[orientation=vertical]/stepper:w-0.5",
+        t
+      )
+    }
+  );
+}
+function q({ children: t, className: a }) {
+  const { state: r } = y();
+  return /* @__PURE__ */ i("h3", { "data-slot": "stepper-title", "data-state": r, className: d("text-sm font-medium leading-none", a), children: t });
+}
+function B({ children: t, className: a }) {
+  const { state: r } = y();
+  return /* @__PURE__ */ i("div", { "data-slot": "stepper-description", "data-state": r, className: d("text-sm text-muted-foreground", a), children: t });
+}
+function G({ children: t, className: a }) {
+  const { activeStep: r, orientation: n } = x();
+  return /* @__PURE__ */ i(
+    "nav",
+    {
+      "data-slot": "stepper-nav",
+      "data-state": r,
+      "data-orientation": n,
+      className: d(
+        "group/stepper-nav inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+        a
+      ),
+      children: t
+    }
+  );
+}
+function J({ children: t, className: a }) {
+  const { activeStep: r } = x();
+  return /* @__PURE__ */ i("div", { "data-slot": "stepper-panel", "data-state": r, className: d("w-full", a), children: t });
+}
+function M({ value: t, forceMount: a, children: r, className: n }) {
+  const { activeStep: s } = x(), o = t === s;
+  return !a && !o ? null : /* @__PURE__ */ i(
+    "div",
+    {
+      "data-slot": "stepper-content",
+      "data-state": s,
+      className: d("w-full", n, !o && a && "hidden"),
+      hidden: !o && a,
+      children: r
+    }
+  );
+}
+export {
+  K as Stepper,
+  M as StepperContent,
+  B as StepperDescription,
+  U as StepperIndicator,
+  $ as StepperItem,
+  G as StepperNav,
+  J as StepperPanel,
+  V as StepperSeparator,
+  q as StepperTitle,
+  H as StepperTrigger,
+  y as useStepItem,
+  x as useStepper
+};

package/dist/kit/components/data-display/table/table.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+type TableSortDirection = 'asc' | 'desc' | null | undefined;
+type TableStickySide = 'left' | 'right';
+type TableSortableHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & {
+    direction?: TableSortDirection;
+    onSort?: React.MouseEventHandler<HTMLButtonElement>;
+    align?: 'left' | 'center' | 'right';
+    iconClassName?: string;
+};
+type TableStickyOptions = {
+    side?: TableStickySide;
+    offset?: number | string;
+    showDivider?: boolean;
+};
+type TableStickyHeadProps = React.ThHTMLAttributes<HTMLTableCellElement> & TableStickyOptions;
+type TableStickyCellProps = React.TdHTMLAttributes<HTMLTableCellElement> & TableStickyOptions;
+declare function Table({ className, ...props }: React.HTMLAttributes<HTMLTableElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+declare function TableSortableHead({ className, children, direction, onSort, align, iconClassName, ...props }: TableSortableHeadProps): import("react/jsx-runtime").JSX.Element;
+declare function TableStickyHead({ className, side, offset, showDivider, style, ...props }: TableStickyHeadProps): import("react/jsx-runtime").JSX.Element;
+declare function TableStickyCell({ className, side, offset, showDivider, style, ...props }: TableStickyCellProps): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSortableHead, TableStickyCell, TableStickyHead, type TableSortDirection, };

package/dist/kit/components/data-display/table/table.js

@@ -0,0 +1,156 @@
+import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import { cn as r } from "../../../../lib/utils.js";
+import { ArrowUp as m, ArrowDown as p, ArrowUpDown as g } from "lucide-react";
+function w({ className: t, ...e }) {
+  return /* @__PURE__ */ a("div", { "data-slot": "table-wrapper", className: "relative w-full overflow-auto", children: /* @__PURE__ */ a("table", { "data-slot": "table", className: r("w-full caption-bottom text-foreground text-sm", t), ...e }) });
+}
+function T({ className: t, ...e }) {
+  return /* @__PURE__ */ a("thead", { "data-slot": "table-header", className: r("[&_tr]:border-b", t), ...e });
+}
+function k({ className: t, ...e }) {
+  return /* @__PURE__ */ a("tbody", { "data-slot": "table-body", className: r("[&_tr:last-child]:border-0", t), ...e });
+}
+function v({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: r("border-t bg-muted/50 font-medium last:[&>tr]:border-b-0", t),
+      ...e
+    }
+  );
+}
+function S({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: r(
+        "border-b transition-colors [&:has(td):hover]:bg-muted/50 data-[state=selected]:bg-muted",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function c({ className: t, ...e }) {
+  return /* @__PURE__ */ a(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: r(
+        "h-12 px-4 text-left rtl:text-right align-middle font-normal text-muted-foreground [&:has([role=checkbox])]:pe-0",
+        t
+      ),
+      ...e
+    }
+  );
+}
+function h({ className: t, ...e }) {
+  return /* @__PURE__ */ a("td", { "data-slot": "table-cell", className: r("p-4 align-middle [&:has([role=checkbox])]:pe-0", t), ...e });
+}
+function C({
+  className: t,
+  children: e,
+  direction: o,
+  onSort: l,
+  align: n = "left",
+  iconClassName: s,
+  ...d
+}) {
+  const u = o === "asc" ? m : o === "desc" ? p : g;
+  return /* @__PURE__ */ a(
+    c,
+    {
+      "aria-sort": o === "asc" ? "ascending" : o === "desc" ? "descending" : "none",
+      className: r(
+        n === "center" && "text-center",
+        n === "right" && "text-right",
+        t
+      ),
+      ...d,
+      children: /* @__PURE__ */ f(
+        "button",
+        {
+          type: "button",
+          onClick: l,
+          disabled: !l,
+          className: r(
+            "inline-flex h-8 max-w-full items-center gap-1.5 rounded-sm text-inherit transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50",
+            n === "center" && "justify-center",
+            n === "right" && "justify-end"
+          ),
+          children: [
+            /* @__PURE__ */ a("span", { className: "min-w-0 truncate", children: e }),
+            /* @__PURE__ */ a(u, { className: r("size-3.5 shrink-0 text-muted-foreground", s), "aria-hidden": "true" })
+          ]
+        }
+      )
+    }
+  );
+}
+function i(t, e, o) {
+  return e === void 0 ? o : {
+    ...o,
+    [t]: typeof e == "number" ? `${e}px` : e
+  };
+}
+function b(t, e) {
+  return t === "left" ? r(
+    'sticky left-0 bg-card after:absolute after:inset-y-0 after:-right-px after:w-px after:content-[""]',
+    e ? "after:bg-border" : "after:bg-transparent"
+  ) : r(
+    'sticky right-0 bg-card before:absolute before:inset-y-0 before:-left-px before:w-px before:content-[""]',
+    e ? "before:bg-border" : "before:bg-transparent"
+  );
+}
+function j({
+  className: t,
+  side: e = "left",
+  offset: o,
+  showDivider: l = !1,
+  style: n,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    c,
+    {
+      className: r("z-30", b(e, l), t),
+      style: i(e, o, n),
+      ...s
+    }
+  );
+}
+function H({
+  className: t,
+  side: e = "left",
+  offset: o,
+  showDivider: l = !1,
+  style: n,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    h,
+    {
+      className: r("z-20", b(e, l), t),
+      style: i(e, o, n),
+      ...s
+    }
+  );
+}
+function z({ className: t, ...e }) {
+  return /* @__PURE__ */ a("caption", { "data-slot": "table-caption", className: r("mt-4 text-sm text-muted-foreground", t), ...e });
+}
+export {
+  w as Table,
+  k as TableBody,
+  z as TableCaption,
+  h as TableCell,
+  v as TableFooter,
+  c as TableHead,
+  T as TableHeader,
+  S as TableRow,
+  C as TableSortableHead,
+  H as TableStickyCell,
+  j as TableStickyHead
+};

package/dist/kit/components/decorative/aurora-background/aurora-background.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+/**
+ * Soft blue gradient blobs.
+ * Absolute-positioned, fills its nearest positioned ancestor.
+ * Use for glassmorphism pages where translucent cards need a light tint.
+ */
+export declare function AuroraBackground({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,60 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import { cn as l } from "../../../../lib/utils.js";
+function d({
+  className: r,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "aria-hidden": !0,
+      "data-slot": "aurora-background",
+      className: l(
+        "absolute inset-0 pointer-events-none overflow-hidden",
+        r
+      ),
+      ...e,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "absolute inset-0",
+            style: {
+              background: "linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(37,99,235,0.07) 44%, rgba(255,255,255,0) 78%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "absolute -top-44 -left-28 size-[520px] rounded-full blur-3xl",
+            style: {
+              background: "radial-gradient(circle at 30% 30%, rgba(0,158,247,0.18), transparent 72%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "absolute -top-48 right-[-8%] size-[600px] rounded-full blur-3xl",
+            style: {
+              background: "radial-gradient(circle at 70% 30%, rgba(37,99,235,0.14), transparent 72%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "absolute bottom-[-18%] left-[18%] size-[560px] rounded-full blur-3xl",
+            style: {
+              background: "radial-gradient(circle at 50% 50%, rgba(59,130,246,0.1), transparent 74%)"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  d as AuroraBackground
+};

package/dist/kit/components/decorative/grid-background/grid-background.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+type GridFade = 'bottom' | 'top' | 'radial' | 'none';
+interface GridBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Cell size in px. Default 44. */
+    size?: number;
+    /** Line color. Default blue-500 at ~8% opacity. */
+    color?: string;
+    /** Line thickness in px. Default 1. */
+    thickness?: number;
+    /** Mask direction. Default `bottom` — dense at top, fading out near the bottom. */
+    fade?: GridFade;
+    /** Position (0–100) where the fade starts (still fully opaque). Default 25. */
+    fadeStart?: number;
+    /** Position (0–100) where the fade reaches fully transparent. Default 92. */
+    fadeEnd?: number;
+}
+/**
+ * Fading grid lines — absolute-positioned, fills its nearest positioned ancestor.
+ * Drop into any `relative` container for a subtle engineering-paper backdrop.
+ */
+export declare function GridBackground({ size, color, thickness, fade, fadeStart, fadeEnd, className, style, ...props }: GridBackgroundProps): import("react/jsx-runtime").JSX.Element;
+export type { GridBackgroundProps, GridFade };