impact-nova 2.0.9 → 2.1.0-alpha.2

package/dist/components/primitives/chips/chips.js

@@ -0,0 +1,114 @@
+import { jsxs as l, jsx as e, Fragment as b } from "react/jsx-runtime";
+import { Slot as y } from "@radix-ui/react-slot";
+import { Checkmark as j, Cross as I } from "impact-nova-icons";
+import { createComponent as w } from "../../../lib/primitives/create-component.js";
+import { cn as p } from "../../../lib/utils.js";
+import { useImpactNovaI18n as _ } from "../../../i18n/use-impact-nova-i18n.js";
+import { chipVariants as S } from "./chips.variants.js";
+function B({
+  selected: o,
+  disabled: s
+}) {
+  return s ? /* @__PURE__ */ e(
+    "span",
+    {
+      className: "relative flex size-5 shrink-0 items-center justify-center",
+      "aria-hidden": !0,
+      children: o ? /* @__PURE__ */ l(b, { children: [
+        /* @__PURE__ */ e("span", { className: "absolute size-5 rounded-full border-[1.25px] border-disabled-border" }),
+        /* @__PURE__ */ e("span", { className: "absolute size-[13px] rounded-full bg-disabled-foreground" })
+      ] }) : /* @__PURE__ */ e("span", { className: "absolute size-5 rounded-full border border-disabled-border bg-transparent" })
+    }
+  ) : /* @__PURE__ */ e(
+    "span",
+    {
+      className: "relative flex size-5 shrink-0 items-center justify-center",
+      "aria-hidden": !0,
+      children: o ? /* @__PURE__ */ l(b, { children: [
+        /* @__PURE__ */ e("span", { className: "absolute size-5 rounded-full border-[1.25px] border-brand" }),
+        /* @__PURE__ */ e("span", { className: "absolute size-[13px] rounded-full bg-brand" })
+      ] }) : /* @__PURE__ */ e("span", { className: "absolute size-5 rounded-full border border-border bg-transparent" })
+    }
+  );
+}
+const E = w(
+  "Chip",
+  ({
+    className: o,
+    variant: s,
+    size: c,
+    shape: u,
+    selected: r = !1,
+    selectionMode: t = "none",
+    trailing: i,
+    onRemove: f,
+    removable: h,
+    asChild: x = !1,
+    disabled: n,
+    children: d,
+    ...g
+  }, v) => {
+    const { t: N } = _(), k = x ? y : "div", a = s === "primary" ? "brand" : s ?? "default", m = !!(r && (a === "default" || a === "neutral" || a === "outline")), z = a === "brand" ? r ? "text-brand-foreground" : "text-brand-foreground/75" : a === "destructive" ? r ? "text-destructive-foreground" : "text-destructive-foreground/75" : a === "secondary" ? r ? "text-secondary-foreground" : "text-secondary-foreground/80" : r ? "text-brand" : "text-secondary-foreground";
+    return /* @__PURE__ */ l(
+      k,
+      {
+        ref: v,
+        className: p(
+          S({
+            variant: a,
+            size: c,
+            shape: u,
+            selected: m
+          }),
+          n && "!border-disabled-border !bg-disabled-surface !text-content-placeholder hover:!border-disabled-border hover:!bg-disabled-surface hover:!text-content-placeholder [&_.chip-trailing]:!text-content-placeholder hover:[&_.chip-trailing]:!text-content-placeholder [&_svg]:!text-content-placeholder",
+          n && m && "!border-disabled-border !text-disabled-foreground",
+          o
+        ),
+        "data-component": "chips",
+        "data-variant": a,
+        "data-size": c ?? "md",
+        "data-shape": u ?? "rounded",
+        "data-selected": r ? "true" : "false",
+        "data-selection-mode": t,
+        role: t === "multi" ? "checkbox" : t === "single" ? "radio" : void 0,
+        tabIndex: t !== "none" && !n ? 0 : void 0,
+        "aria-disabled": n || void 0,
+        "aria-checked": t !== "none" ? r : void 0,
+        ...g,
+        children: [
+          t === "single" && /* @__PURE__ */ e("span", { className: "chip-leading flex shrink-0", children: /* @__PURE__ */ e(B, { selected: r, disabled: n }) }),
+          t === "multi" && /* @__PURE__ */ e(
+            j,
+            {
+              className: p(
+                "chip-leading size-5 shrink-0 stroke-[1.75]",
+                z
+              ),
+              "aria-hidden": !0,
+              stroke: "currentColor"
+            }
+          ),
+          d != null && d !== !1 && /* @__PURE__ */ e("span", { className: "flex min-w-0 items-center gap-1 truncate [&>*]:min-w-0", children: d }),
+          i != null && i !== !1 && /* @__PURE__ */ e("span", { className: "chip-trailing shrink-0 font-medium tabular-nums text-current", children: i }),
+          h && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: (C) => {
+                C.stopPropagation(), f?.();
+              },
+              className: "-mr-0.5 ml-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-md text-current hover:bg-content/10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring/30",
+              "aria-label": N("aria.remove"),
+              "data-component": "chip-remove",
+              disabled: n,
+              children: /* @__PURE__ */ e(I, { size: 8 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  E as Chip
+};

package/dist/components/primitives/chips/chips.types.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+import { chipVariants } from './chips.variants';
+import type * as React from "react";
+export type ChipSelectionMode = "none" | "single" | "multi";
+export interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, Omit<VariantProps<typeof chipVariants>, "variant"> {
+    /**
+     * @deprecated Use `brand` for solid brand fill — `primary` is not a charter variant name.
+     */
+    variant?: VariantProps<typeof chipVariants>["variant"] | "primary";
+    onRemove?: () => void;
+    removable?: boolean;
+    asChild?: boolean;
+    /** Single- vs multi-select affordance (Figma columns). */
+    selectionMode?: ChipSelectionMode;
+    /** Selected / pressed state (border + label #4259EE). */
+    selected?: boolean;
+    /** e.g. count for “Multi select + Number” */
+    trailing?: React.ReactNode;
+    disabled?: boolean;
+}

package/dist/components/primitives/chips/chips.variants.d.ts

@@ -0,0 +1,6 @@
+export declare const chipVariants: (props?: ({
+    variant?: "default" | "secondary" | "tertiary" | "outline" | "destructive" | "neutral" | "brand" | null | undefined;
+    shape?: "rounded" | "pill" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    selected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/primitives/chips/chips.variants.js

@@ -0,0 +1,56 @@
+import { cva as e } from "class-variance-authority";
+const t = e(
+  "inline-flex min-h-8 max-w-full min-w-0 items-center gap-1 border text-sm font-medium leading-5 transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring/25 focus-visible:ring-offset-1 focus-visible:ring-offset-canvas disabled:pointer-events-none disabled:opacity-100",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-canvas-elevated text-content-secondary hover:bg-accent hover:border-primary-hover hover:text-primary-hover",
+        neutral: "border-border bg-canvas-elevated text-content-secondary hover:bg-accent hover:border-primary-hover hover:text-primary-hover",
+        outline: "border-border bg-canvas-elevated text-content-secondary hover:bg-accent hover:border-primary-hover hover:text-primary-hover",
+        brand: "border-transparent bg-brand text-brand-foreground hover:bg-brand-strong",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        tertiary: "border border-stroke-field bg-canvas text-content-tertiary hover:bg-accent hover:text-secondary-hover-foreground hover:border-secondary-hover-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive-hover"
+      },
+      shape: {
+        rounded: "rounded-xl",
+        pill: "rounded-full"
+      },
+      size: {
+        sm: "min-h-7 gap-1 px-2 py-1 text-xs leading-4",
+        md: "px-3 py-1.5",
+        lg: "min-h-9 gap-1.5 px-4 py-2 text-sm leading-5"
+      },
+      selected: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        selected: !0,
+        class: "border-brand bg-canvas-elevated text-brand hover:border-brand hover:bg-canvas-elevated hover:text-brand"
+      },
+      {
+        variant: "neutral",
+        selected: !0,
+        class: "border-brand bg-canvas-elevated text-brand hover:border-brand hover:bg-canvas-elevated hover:text-brand"
+      },
+      {
+        variant: "outline",
+        selected: !0,
+        class: "border-brand bg-canvas-elevated text-brand hover:border-brand hover:bg-canvas-elevated hover:text-brand"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      shape: "rounded",
+      size: "md",
+      selected: !1
+    }
+  }
+);
+export {
+  t as chipVariants
+};

package/dist/components/primitives/empty-container/empty-container.d.ts

@@ -0,0 +1,8 @@
+import { EmptyContainerProps, EmptyContainerImageProps, EmptyContainerTitleProps, EmptyContainerDescriptionProps, EmptyContainerActionProps } from './empty-container.types';
+import * as React from "react";
+declare const EmptyContainer: React.ForwardRefExoticComponent<EmptyContainerProps & React.RefAttributes<HTMLDivElement>>;
+declare const EmptyContainerImage: React.ForwardRefExoticComponent<EmptyContainerImageProps & React.RefAttributes<HTMLDivElement>>;
+declare const EmptyContainerTitle: React.ForwardRefExoticComponent<EmptyContainerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const EmptyContainerDescription: React.ForwardRefExoticComponent<EmptyContainerDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const EmptyContainerAction: React.ForwardRefExoticComponent<EmptyContainerActionProps & React.RefAttributes<HTMLDivElement>>;
+export { EmptyContainer, EmptyContainerImage, EmptyContainerTitle, EmptyContainerDescription, EmptyContainerAction, };

package/dist/components/primitives/empty-container/empty-container.js

@@ -0,0 +1,144 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as i from "react";
+import { Slot as d } from "@radix-ui/react-slot";
+import { createComponent as I } from "../../../lib/primitives/create-component.js";
+import { cn as p } from "../../../lib/utils.js";
+import { EMPTY_STATE_IMAGE_LOADERS as y } from "./empty-container.illustrations.js";
+const H = I(
+  "EmptyContainer",
+  ({ className: o, children: t, asChild: e = !1, ...a }, n) => /* @__PURE__ */ s(
+    e ? d : "div",
+    {
+      ref: n,
+      className: p(
+        "flex flex-col items-center justify-center py-16 px-5 text-center animate-in fade-in zoom-in duration-300 motion-reduce:animate-none motion-reduce:transition-none border border-stroke-subtle rounded-xl bg-canvas-elevated w-[884px] min-w-[884px] h-auto",
+        o
+      ),
+      "data-component": "empty-container",
+      ...a,
+      children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center max-w-[650px]", children: t })
+    }
+  )
+), A = i.forwardRef(
+  ({
+    className: o,
+    children: t,
+    src: e,
+    alt: a = "",
+    width: n,
+    height: m,
+    asChild: f = !1,
+    ...h
+  }, x) => {
+    const C = i.useId(), [g] = i.useState(() => t || e ? null : C.split("").reduce((u, S) => u + S.charCodeAt(0), 0) % y.length), [l, E] = i.useState(null), r = g !== null ? y[g] : null;
+    i.useEffect(() => {
+      if (t || e || !r)
+        return;
+      let c = !1;
+      return r.loadSrc().then((u) => {
+        c || E({
+          imageSource: u,
+          width: r.width,
+          height: r.height
+        });
+      }), () => {
+        c = !0;
+      };
+    }, [t, r, e]);
+    const w = n || (t ? "auto" : l?.width ?? r?.width ?? 225), N = m || (t ? "auto" : l?.height ?? r?.height ?? 150), b = () => {
+      if (t)
+        return t;
+      const c = e ?? l?.imageSource;
+      return c ? /* @__PURE__ */ s(
+        "img",
+        {
+          src: c,
+          alt: a,
+          className: "object-contain shrink-0 select-none",
+          style: {
+            width: n || l?.width || r?.width || "100%",
+            height: m || l?.height || r?.height || "100%"
+          }
+        }
+      ) : null;
+    };
+    return /* @__PURE__ */ s(
+      f ? d : "div",
+      {
+        ref: x,
+        className: p(
+          "mb-4 flex items-center justify-center relative",
+          "after:absolute after:inset-0 after:bg-brand/5 after:blur-3xl after:-z-10 after:rounded-full",
+          o
+        ),
+        style: {
+          width: w,
+          height: N,
+          ...h.style
+        },
+        "data-component": "empty-container-image",
+        ...h,
+        children: b()
+      }
+    );
+  }
+);
+A.displayName = "EmptyContainerImage";
+const T = {
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+}, v = i.forwardRef(({ className: o, children: t, asChild: e = !1, headingLevel: a = 2, ...n }, m) => {
+  const f = e ? d : T[a];
+  return /* @__PURE__ */ s(
+    f,
+    {
+      ref: m,
+      className: p(
+        "text-xl font-bold tracking-tight leading-[30px] text-content",
+        o
+      ),
+      "data-component": "empty-container-title",
+      ...n,
+      children: t
+    }
+  );
+});
+v.displayName = "EmptyContainerTitle";
+const R = i.forwardRef(({ className: o, children: t, asChild: e = !1, ...a }, n) => /* @__PURE__ */ s(
+  e ? d : "p",
+  {
+    ref: n,
+    className: p(
+      "text-base leading-[21px] mt-1 font-medium text-secondary-foreground",
+      o
+    ),
+    "data-component": "empty-container-description",
+    ...a,
+    children: t
+  }
+));
+R.displayName = "EmptyContainerDescription";
+const _ = i.forwardRef(({ className: o, children: t, asChild: e = !1, ...a }, n) => /* @__PURE__ */ s(
+  e ? d : "div",
+  {
+    ref: n,
+    className: p(
+      "mt-6 flex flex-wrap items-center justify-center gap-3",
+      o
+    ),
+    "data-component": "empty-container-action",
+    ...a,
+    children: t
+  }
+));
+_.displayName = "EmptyContainerAction";
+export {
+  H as EmptyContainer,
+  _ as EmptyContainerAction,
+  R as EmptyContainerDescription,
+  A as EmptyContainerImage,
+  v as EmptyContainerTitle
+};

package/dist/components/primitives/empty-container/empty-container.types.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface EmptyContainerProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    asChild?: boolean;
+}
+export interface EmptyContainerImageProps extends HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    alt?: string;
+    children?: ReactNode;
+    width?: number | string;
+    height?: number | string;
+    asChild?: boolean;
+}
+export interface EmptyContainerTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+    asChild?: boolean;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+export interface EmptyContainerDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+    asChild?: boolean;
+}
+export interface EmptyContainerActionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    asChild?: boolean;
+}

package/dist/components/primitives/empty-container/emptyStateIllustrations.d.ts

@@ -0,0 +1,2 @@
+export { EMPTY_STATE_IMAGE_LOADERS, EmptyState1Url, EmptyState2Url, EmptyState3Url, EmptyState4Url, EmptyState5Url, EmptyState6Url, } from './empty-container.illustrations';
+export type { EmptyStateImageEntry } from './empty-container.illustrations';

package/dist/components/primitives/empty-container/index.d.ts

@@ -0,0 +1,2 @@
+export * from './empty-container';
+export type { EmptyContainerProps, EmptyContainerImageProps, EmptyContainerTitleProps, EmptyContainerDescriptionProps, EmptyContainerActionProps, } from './empty-container.types';

package/dist/components/primitives/empty-container/index.js

@@ -0,0 +1,8 @@
+import { EmptyContainer as e, EmptyContainerAction as i, EmptyContainerDescription as o, EmptyContainerImage as r, EmptyContainerTitle as m } from "./empty-container.js";
+export {
+  e as EmptyContainer,
+  i as EmptyContainerAction,
+  o as EmptyContainerDescription,
+  r as EmptyContainerImage,
+  m as EmptyContainerTitle
+};

package/dist/components/primitives/kbd/index.d.ts

@@ -0,0 +1,3 @@
+export { Kbd } from './kbd';
+export type { KbdProps, KeyBinding } from './kbd.types';
+export { getKeySymbol, hasUsableShortcutKey, isMac, keybindingToString, keybindingToSymbols, } from './keybinding-display';

package/dist/components/primitives/kbd/index.js

@@ -0,0 +1,10 @@
+import { Kbd as b } from "./kbd.js";
+import { getKeySymbol as r, hasUsableShortcutKey as t, isMac as y, keybindingToString as n, keybindingToSymbols as g } from "./keybinding-display.js";
+export {
+  b as Kbd,
+  r as getKeySymbol,
+  t as hasUsableShortcutKey,
+  y as isMac,
+  n as keybindingToString,
+  g as keybindingToSymbols
+};

package/dist/components/primitives/kbd/kbd.d.ts

@@ -0,0 +1,4 @@
+import { KbdProps } from './kbd.types';
+import * as React from "react";
+declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+export { Kbd };

package/dist/components/primitives/kbd/kbd.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as f from "react";
+import { createComponent as d } from "../../../lib/primitives/create-component.js";
+import { cn as n } from "../../../lib/utils.js";
+import { keybindingToSymbols as u, getKeySymbol as b } from "./keybinding-display.js";
+import { kbdVariants as h } from "./kbd.variants.js";
+const $ = d(
+  "Kbd",
+  ({ className: a, keys: t, keybinding: o, size: i, variant: p, ...s }, c) => {
+    const e = f.useMemo(() => o ? u(o) : t ? t.map((r) => b(r)) : [], [t, o]);
+    return e.length === 0 ? null : /* @__PURE__ */ m(
+      "span",
+      {
+        ref: c,
+        className: n("inline-flex items-center gap-0.5", a),
+        "data-component": "kbd",
+        ...s,
+        children: e.map((r, l) => /* @__PURE__ */ m(
+          "kbd",
+          {
+            className: n(h({ size: i, variant: p })),
+            children: r
+          },
+          `${r}-${l}`
+        ))
+      }
+    );
+  }
+);
+export {
+  $ as Kbd
+};

package/dist/components/primitives/kbd/kbd.types.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import { KeyBinding } from './keybinding-display';
+import { kbdVariants } from './kbd.variants';
+import type * as React from "react";
+export interface KbdProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, VariantProps<typeof kbdVariants> {
+    keys?: string[];
+    keybinding?: KeyBinding;
+}
+export type { KeyBinding } from './keybinding-display';

package/dist/components/primitives/kbd/kbd.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const kbdVariants: (props?: ({
+    size?: "sm" | "lg" | "default" | null | undefined;
+    variant?: "default" | "muted" | "dark" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/primitives/kbd/kbd.variants.js

@@ -0,0 +1,25 @@
+import { cva as e } from "class-variance-authority";
+const n = e(
+  "inline-flex items-center justify-center rounded border font-mono leading-none select-none",
+  {
+    variants: {
+      size: {
+        sm: "min-w-[18px] h-[18px] px-1 text-[10px]",
+        default: "min-w-[22px] h-[22px] px-1.5 text-[11px]",
+        lg: "min-w-[26px] h-[26px] px-2 text-xs"
+      },
+      variant: {
+        default: "bg-canvas-muted border-stroke-hairline text-content-charcoal shadow-[0_1px_0_0_var(--color-border-hairline)]",
+        muted: "bg-stroke-hairline border-stroke-hairline text-content-muted",
+        dark: "bg-content text-canvas border-stroke shadow-[0_1px_0_0_hsl(0_0%_0%_/_0.25)]"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+export {
+  n as kbdVariants
+};

package/dist/components/primitives/kbd/keybinding-display.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Keybinding display primitives — shared by Kbd and command-palette.
+ */
+export interface KeyBinding {
+    key: string;
+    meta?: boolean;
+    ctrl?: boolean;
+    alt?: boolean;
+    shift?: boolean;
+}
+export declare function isMac(): boolean;
+export declare function getKeySymbol(key: string): string;
+export declare function hasUsableShortcutKey(kb: KeyBinding | undefined): kb is KeyBinding;
+export declare function keybindingToSymbols(kb: KeyBinding): string[];
+export declare function keybindingToString(kb: KeyBinding): string;

package/dist/components/primitives/kbd/keybinding-display.js

@@ -0,0 +1,60 @@
+let a = null;
+function n() {
+  return a !== null ? a : typeof navigator > "u" ? !1 : (a = /mac|ipod|iphone|ipad/i.test(
+    navigator.platform ?? navigator.userAgent ?? ""
+  ), a);
+}
+const s = {
+  meta: "⌘",
+  ctrl: "⌃",
+  alt: "⌥",
+  shift: "⇧",
+  enter: "↵",
+  backspace: "⌫",
+  delete: "⌦",
+  escape: "Esc",
+  arrowup: "↑",
+  arrowdown: "↓",
+  arrowleft: "←",
+  arrowright: "→",
+  tab: "⇥",
+  space: "␣"
+}, i = {
+  meta: "Ctrl",
+  ctrl: "Ctrl",
+  alt: "Alt",
+  shift: "Shift",
+  enter: "Enter",
+  backspace: "Backspace",
+  delete: "Delete",
+  escape: "Esc",
+  arrowup: "↑",
+  arrowdown: "↓",
+  arrowleft: "←",
+  arrowright: "→",
+  tab: "Tab",
+  space: "Space"
+};
+function r(t) {
+  return t ? (n() ? s : i)[t.toLowerCase()] ?? t.toUpperCase() : "";
+}
+function o(t) {
+  return typeof t?.key == "string" && t.key.length > 0;
+}
+function l(t) {
+  if (!o(t))
+    return [];
+  const e = [];
+  return n() ? (t.ctrl && e.push(r("ctrl")), t.alt && e.push(r("alt")), t.shift && e.push(r("shift")), t.meta && e.push(r("meta"))) : ((t.meta || t.ctrl) && e.push(r("ctrl")), t.alt && e.push(r("alt")), t.shift && e.push(r("shift"))), e.push(r(t.key)), e;
+}
+function c(t) {
+  const e = l(t);
+  return n() ? e.join("") : e.join("+");
+}
+export {
+  r as getKeySymbol,
+  o as hasUsableShortcutKey,
+  n as isMac,
+  c as keybindingToString,
+  l as keybindingToSymbols
+};

package/dist/components/primitives/loader/loader.d.ts

@@ -0,0 +1,3 @@
+import { LoaderProps } from './loader.types';
+declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Loader };

package/dist/components/primitives/loader/loader.js

@@ -0,0 +1,61 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import { createComponent as u } from "../../../lib/primitives/create-component.js";
+import { cn as f } from "../../../lib/utils.js";
+import { useImpactNovaI18n as p } from "../../../i18n/use-impact-nova-i18n.js";
+const v = u(
+  "Loader",
+  ({ className: a, size: n = "md", progress: i, text: r, ...m }, s) => {
+    const { t: d } = p(), l = {
+      sm: { outer: 24, inner: 20 },
+      md: { outer: 48, inner: 40 },
+      lg: { outer: 72, inner: 60 },
+      xl: { outer: 96, inner: 80 }
+    }, { outer: e, inner: t } = l[n ?? "md"];
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: s,
+        className: f("flex flex-col items-center justify-center", a),
+        role: "status",
+        "aria-label": r || d("aria.loading"),
+        "data-component": "loader",
+        "data-size": n ?? "md",
+        ...m,
+        children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: "relative animate-spin motion-reduce:animate-none rounded-full bg-[conic-gradient(from_180deg_at_50%_50%,transparent_0deg,var(--color-primary)_360deg)]",
+              style: { height: e, width: e },
+              children: /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "absolute bg-canvas rounded-full flex items-center justify-center font-medium animate-[spin_1s_linear_infinite_reverse] motion-reduce:animate-none",
+                  style: {
+                    height: t,
+                    width: t,
+                    top: (e - t) / 2,
+                    left: (e - t) / 2,
+                    fontSize: e / 6
+                  },
+                  children: n !== "sm" && i
+                }
+              )
+            }
+          ),
+          r ? /* @__PURE__ */ o(
+            "span",
+            {
+              className: "mt-2 text-[12px] font-medium text-content",
+              "data-component": "loader-text",
+              children: r
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  v as Loader
+};

package/dist/components/primitives/loader/loader.types.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+import { loaderVariants } from './loader.variants';
+import type * as React from "react";
+export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof loaderVariants> {
+    progress?: string | number;
+    text?: string;
+}

package/dist/components/primitives/loader/loader.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const loaderVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;