@cognite/aura 0.1.0

package/dist/components/ui/core/hover-card/hover-card.metadata.js

@@ -0,0 +1,8 @@
+const a = {
+  name: "HoverCard",
+  status: "draft",
+  description: "A card that appears on hover built on Base UI Hover Card."
+};
+export {
+  a as HoverCardMetadata
+};

package/dist/components/ui/core/inline-citation/inline-citation.d.ts

@@ -0,0 +1,33 @@
+import { ComponentProps, ComponentType } from 'react';
+import { Badge } from '../badge/badge';
+import { HoverCard } from '../hover-card/hover-card';
+declare const InlineCitation: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+declare const InlineCitationGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const InlineCitationText: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
+declare const InlineCitationCard: (props: InlineCitationCardProps) => import("react/jsx-runtime").JSX.Element;
+type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
+    sources: string[];
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+};
+declare const InlineCitationCardTrigger: ({ sources, icon: Icon, className, ...props }: InlineCitationCardTriggerProps) => import("react/jsx-runtime").JSX.Element;
+type InlineCitationCardBodyProps = ComponentProps<'div'>;
+declare const InlineCitationCardBody: ({ className, ...props }: InlineCitationCardBodyProps) => import("react/jsx-runtime").JSX.Element;
+type InlineCitationSourceProps = ComponentProps<'div'> & {
+    title?: string;
+    url?: string;
+    description?: string;
+};
+declare const InlineCitationSource: import('react').ForwardRefExoticComponent<Omit<InlineCitationSourceProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const InlineCitationQuote: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref"> & import('react').RefAttributes<HTMLQuoteElement>>;
+type InlineCitationLinkProps = Omit<ComponentProps<'a'>, 'target'> & {
+    target?: '_blank' | '_self';
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    variant?: 'mountain' | 'nordic' | 'fjord';
+};
+declare const InlineCitationLink: import('react').ForwardRefExoticComponent<Omit<InlineCitationLinkProps, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
+export { InlineCitation, InlineCitationGroup, InlineCitationText, InlineCitationCard, InlineCitationCardTrigger, InlineCitationCardBody, InlineCitationSource, InlineCitationQuote, InlineCitationLink, };

package/dist/components/ui/core/inline-citation/inline-citation.js

@@ -0,0 +1,170 @@
+import { jsx as i, jsxs as d, Fragment as v } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { cn as o, getHostname as m } from "../../../../lib/utils.js";
+import { Badge as g } from "../badge/badge.js";
+import { HoverCard as f, HoverCardTrigger as x, HoverCardContent as b } from "../hover-card/hover-card.js";
+const h = r(
+  ({ className: e, ...n }, t) => /* @__PURE__ */ i(
+    "span",
+    {
+      ref: t,
+      "data-slot": "inline-citation",
+      className: o("group inline-flex items-center gap-1", e),
+      ...n
+    }
+  )
+);
+h.displayName = "InlineCitation";
+const C = r(({ className: e, ...n }, t) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: t,
+    "data-slot": "inline-citation-group",
+    className: o("flex flex-wrap gap-2", e),
+    ...n
+  }
+));
+C.displayName = "InlineCitationGroup";
+const N = r(({ className: e, ...n }, t) => /* @__PURE__ */ i(
+  "span",
+  {
+    ref: t,
+    "data-slot": "inline-citation-text",
+    className: o("transition-colors group-hover:bg-accent", e),
+    ...n
+  }
+));
+N.displayName = "InlineCitationText";
+const q = (e) => /* @__PURE__ */ i(
+  f,
+  {
+    "data-slot": "inline-citation-card",
+    closeDelay: 0,
+    openDelay: 0,
+    ...e
+  }
+), B = ({
+  sources: e,
+  icon: n,
+  className: t,
+  ...a
+}) => /* @__PURE__ */ i(
+  x,
+  {
+    render: /* @__PURE__ */ d(
+      g,
+      {
+        "data-slot": "inline-citation-card-trigger",
+        className: o(
+          "ml-1 inline-flex items-center justify-center rounded-md border border-transparent bg-decorative-background-fjord px-1 text-sm leading-4.5 font-medium text-decorative-foreground-fjord whitespace-nowrap gap-1 transition-[color,box-shadow]",
+          "[&>svg]:size-3 [&>svg]:pointer-events-none",
+          t
+        ),
+        ...a,
+        children: [
+          n && /* @__PURE__ */ i(n, { className: "size-3" }),
+          e[0] ? /* @__PURE__ */ d(v, { children: [
+            m(e[0]),
+            " ",
+            e.length > 1 && `+${e.length - 1}`
+          ] }) : "unknown"
+        ]
+      }
+    )
+  }
+), D = ({
+  className: e,
+  ...n
+}) => /* @__PURE__ */ i(
+  b,
+  {
+    "data-slot": "inline-citation-card-body",
+    className: o("relative w-80 p-0", e),
+    ...n
+  }
+), y = r(({ title: e, url: n, description: t, className: a, children: l, ...s }, c) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: c,
+    "data-slot": "inline-citation-source",
+    className: o("space-y-1", a),
+    ...s,
+    children: [
+      e && /* @__PURE__ */ i("h4", { className: "truncate font-medium text-sm leading-tight", children: e }),
+      n && /* @__PURE__ */ i("p", { className: "truncate break-all text-muted-foreground text-xs", children: n }),
+      t && /* @__PURE__ */ i("p", { className: "line-clamp-3 text-muted-foreground text-sm leading-relaxed", children: t }),
+      l
+    ]
+  }
+));
+y.displayName = "InlineCitationSource";
+const k = r(({ children: e, className: n, ...t }, a) => /* @__PURE__ */ i(
+  "blockquote",
+  {
+    ref: a,
+    "data-slot": "inline-citation-quote",
+    className: o(
+      "border-muted border-l-2 pl-3 text-muted-foreground text-sm italic",
+      n
+    ),
+    ...t,
+    children: e
+  }
+));
+k.displayName = "InlineCitationQuote";
+const I = r(
+  ({
+    href: e,
+    target: n = "_self",
+    icon: t,
+    variant: a = "mountain",
+    className: l,
+    children: s,
+    ...c
+  }, u) => {
+    const p = m(e);
+    return /* @__PURE__ */ i(
+      "a",
+      {
+        ref: u,
+        href: e,
+        target: n,
+        rel: n === "_blank" ? "noopener noreferrer" : void 0,
+        className: "inline-flex items-stretch",
+        ...c,
+        children: /* @__PURE__ */ d(
+          g,
+          {
+            "data-slot": "inline-citation-link",
+            className: o(
+              "inline-flex items-center justify-center rounded-md border border-transparent px-1 text-sm leading-4.5 font-medium whitespace-nowrap gap-1 transition-colors",
+              "[&>svg]:size-3 [&>svg]:pointer-events-none",
+              {
+                mountain: "bg-decorative-background-mountain hover:bg-decorative-background-hover-mountain text-decorative-foreground-mountain",
+                nordic: "bg-decorative-background-nordic hover:bg-decorative-background-hover-nordic text-decorative-foreground-nordic",
+                fjord: "bg-decorative-background-fjord hover:bg-decorative-background-hover-fjord text-decorative-foreground-fjord"
+              }[a],
+              l
+            ),
+            children: [
+              t && /* @__PURE__ */ i(t, { className: "size-3" }),
+              s ?? p
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+I.displayName = "InlineCitationLink";
+export {
+  h as InlineCitation,
+  q as InlineCitationCard,
+  D as InlineCitationCardBody,
+  B as InlineCitationCardTrigger,
+  C as InlineCitationGroup,
+  I as InlineCitationLink,
+  k as InlineCitationQuote,
+  y as InlineCitationSource,
+  N as InlineCitationText
+};

package/dist/components/ui/core/inline-citation/inline-citation.metadata.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../../../lib/types';
+export declare const InlineCitationMetadata: ComponentMeta;

package/dist/components/ui/core/inline-citation/inline-citation.metadata.js

@@ -0,0 +1,8 @@
+const n = {
+  name: "InlineCitation",
+  status: "in-progress-code-review",
+  description: "Components for displaying inline citations and source references."
+};
+export {
+  n as InlineCitationMetadata
+};

package/dist/components/ui/core/input/input.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps, ReactNode } from 'react';
+interface InputProps extends ComponentProps<'input'> {
+    errorMessage?: ReactNode;
+}
+declare const Input: import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/ui/core/input/input.js

@@ -0,0 +1,34 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { cn as s, readOnlyState as m, disabledState as u, invalidState as d, focusState as p, filledState as f, hoverState as c, formElementBase as S } from "../../../../lib/utils.js";
+import { HelperText as v } from "../helper-text/helper-text.js";
+const x = ({ errorMessage: t }) => t ? /* @__PURE__ */ r(v, { className: "pt-1", isError: !0, children: t }) : null, N = o(
+  ({ className: t, type: a, errorMessage: e, ...l }, i) => /* @__PURE__ */ n("div", { className: "w-full", children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: i,
+        type: a,
+        "data-slot": "input",
+        "aria-invalid": e ? !0 : void 0,
+        className: s(
+          "w-full",
+          S,
+          c,
+          f,
+          p,
+          d,
+          u,
+          m,
+          t
+        ),
+        ...l
+      }
+    ),
+    /* @__PURE__ */ r(x, { errorMessage: e })
+  ] })
+);
+N.displayName = "Input";
+export {
+  N as Input
+};

package/dist/components/ui/core/input/input.metadata.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../../../lib/types';
+export declare const InputMetadata: ComponentMeta;

package/dist/components/ui/core/input/input.metadata.js

@@ -0,0 +1,9 @@
+const t = {
+  name: "Input",
+  status: "in-progress-code-review",
+  description: "A styled text input component with focus and validation states.",
+  llmUsage: "Use `<Input>` for single-line text input fields."
+};
+export {
+  t as InputMetadata
+};

package/dist/components/ui/core/input-group/input-group.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+declare const InputGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const InputGroupAddon: import('react').ForwardRefExoticComponent<Omit<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const InputGroupButton: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('@base-ui/react').ButtonProps & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLElement>, "size"> & VariantProps<(props?: ({
+    size?: "sm" | "icon-sm" | "xs" | "icon-xs" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+declare const InputGroupText: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+declare const InputGroupInput: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+declare const InputGroupTextarea: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/dist/components/ui/core/input-group/input-group.js

@@ -0,0 +1,144 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { cva as u } from "class-variance-authority";
+import { cn as e } from "../../../../lib/utils.js";
+import { Button as d } from "../button/button.js";
+import { Input as l } from "../input/input.js";
+import { Textarea as c } from "../textarea/textarea.js";
+const g = o(
+  ({ className: a, ...t }, n) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: n,
+      "data-slot": "input-group",
+      role: "group",
+      className: e(
+        "group/input-group bg-background border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-sm transition-colors transition-shadow outline-none",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2 has-[>[data-align=inline-start]]:[&>input]:rounded-l-none has-[>[data-align=inline-start]]:[&>textarea]:rounded-l-none",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2 has-[>[data-align=inline-end]]:[&>input]:rounded-r-none has-[>[data-align=inline-end]]:[&>textarea]:rounded-r-none",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        "has-[[data-slot=input-group-control]:focus-visible]:shadow-focus-ring has-[[data-slot=input-group-control]:focus-visible]:border-transparent",
+        "has-[[data-slot=input-group-control][aria-invalid=true]]:shadow-focus-ring-destructive has-[[data-slot=input-group-control][aria-invalid=true]]:border-transparent",
+        "has-[[data-slot=input-group-control]:read-only]:border-transparent has-[[data-slot=input-group-control]:read-only]:shadow-none",
+        "hover:has-[[data-slot=input-group-control]:read-only]:border-transparent hover:has-[[data-slot=input-group-control]:read-only]:bg-accent hover:has-[[data-slot=input-group-control]:read-only]:text-accent-foreground",
+        a
+      ),
+      ...t
+    }
+  )
+);
+g.displayName = "InputGroup";
+const h = u(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-sm group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:-ml-2 has-[>kbd]:-ml-1.5",
+        "inline-end": "order-last pr-3 has-[>button]:-mr-2 has-[>kbd]:-mr-1.5",
+        "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+), b = o(({ className: a, align: t = "inline-start", ...n }, i) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: i,
+    role: "group",
+    "data-slot": "input-group-addon",
+    "data-align": t,
+    className: e(h({ align: t }), a),
+    onClick: (s) => {
+      s.target instanceof HTMLElement && s.target.closest("button") || s.currentTarget.parentElement?.querySelector('[data-slot="input-group-control"]')?.focus();
+    },
+    ...n
+  }
+));
+b.displayName = "InputGroupAddon";
+const m = u(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-sm [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-7 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-xs p-0 has-[>svg]:p-0",
+        "icon-sm": "size-7 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+), f = o(
+  ({ className: a, type: t = "button", variant: n = "ghost", size: i = "xs", ...s }, p) => /* @__PURE__ */ r(
+    d,
+    {
+      ref: p,
+      type: t,
+      "data-size": i,
+      variant: n,
+      className: e(m({ size: i }), a),
+      ...s
+    }
+  )
+);
+f.displayName = "InputGroupButton";
+const v = o(
+  ({ className: a, ...t }, n) => /* @__PURE__ */ r(
+    "span",
+    {
+      ref: n,
+      "data-slot": "input-group-text",
+      className: e(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        a
+      ),
+      ...t
+    }
+  )
+);
+v.displayName = "InputGroupText";
+const x = o(
+  ({ className: a, ...t }, n) => /* @__PURE__ */ r(
+    l,
+    {
+      ref: n,
+      "data-slot": "input-group-control",
+      className: e(
+        "flex-1 rounded-md border-0 bg-transparent shadow-none hover:bg-transparent hover:text-current dark:bg-transparent",
+        "focus-visible:shadow-none focus-visible:border-transparent",
+        "aria-invalid:focus-visible:shadow-none aria-invalid:focus-visible:border-transparent",
+        a
+      ),
+      ...t
+    }
+  )
+);
+x.displayName = "InputGroupInput";
+const y = o(({ className: a, ...t }, n) => /* @__PURE__ */ r(
+  c,
+  {
+    ref: n,
+    "data-slot": "input-group-control",
+    className: e(
+      "flex-1 resize-none rounded-md border-0 bg-transparent py-3 shadow-none focus-visible:shadow-none focus-visible:border-transparent aria-invalid:focus-visible:shadow-none aria-invalid:focus-visible:border-transparent dark:bg-transparent hover:bg-transparent hover:text-current",
+      a
+    ),
+    ...t
+  }
+));
+y.displayName = "InputGroupTextarea";
+export {
+  g as InputGroup,
+  b as InputGroupAddon,
+  f as InputGroupButton,
+  x as InputGroupInput,
+  v as InputGroupText,
+  y as InputGroupTextarea
+};

package/dist/components/ui/core/input-group/input-group.metadata.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../../../lib/types';
+export declare const InputGroupMetadata: ComponentMeta;

package/dist/components/ui/core/input-group/input-group.metadata.js

@@ -0,0 +1,9 @@
+const t = {
+  name: "InputGroup",
+  status: "in-progress-code-review",
+  description: "A container that combines an input or textarea with inline addons such as icons, labels, or action buttons.",
+  llmUsage: "Use `<InputGroup>` with `<InputGroupInput>` and `<InputGroupAddon>` to build inputs with prefix/suffix decorations. Use `<InputGroupTextarea>` instead of `<InputGroupInput>` for multi-line inputs."
+};
+export {
+  t as InputGroupMetadata
+};

package/dist/components/ui/core/label/label.d.ts

@@ -0,0 +1,2 @@
+declare const Label: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/components/ui/core/label/label.js

@@ -0,0 +1,20 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { cn as l } from "../../../../lib/utils.js";
+const n = d(({ className: e, children: t, ...r }, a) => /* @__PURE__ */ o(
+  "label",
+  {
+    ref: a,
+    "data-slot": "label",
+    className: l(
+      "flex items-center text-muted-foreground dark:text-muted-foreground text-sm font-medium leading-4.5 pb-1 select-none group-data-[disabled=true]:disabled-foreground group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:cursor-not-allowed group-data-[disabled=true]:opacity-50",
+      e
+    ),
+    ...r,
+    children: t
+  }
+));
+n.displayName = "Label";
+export {
+  n as Label
+};

package/dist/components/ui/core/label/label.metadata.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../../../lib/types';
+export declare const LabelMetadata: ComponentMeta;

package/dist/components/ui/core/label/label.metadata.js

@@ -0,0 +1,9 @@
+const e = {
+  name: "Label",
+  status: "in-progress-code-review",
+  description: "An accessible text label for form controls, built on top of Base UI Label. Supports association via `htmlFor` and integrates with disabled states.",
+  llmUsage: 'Use `<Label htmlFor="field-id">Text</Label>` together with an input that has `id="field-id"` so clicking the label focuses the field. For required fields, include a visual indicator such as the asterisk icon from `/asterisk.svg`.'
+};
+export {
+  e as LabelMetadata
+};

package/dist/components/ui/core/loader/loader.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+}
+declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Loader };
+export type { LoaderProps };

package/dist/components/ui/core/loader/loader.js

@@ -0,0 +1,119 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { cn as a } from "../../../../lib/utils.js";
+const h = ({ size: r = 16 }) => /* @__PURE__ */ o(
+  "svg",
+  {
+    height: r,
+    strokeLinejoin: "round",
+    style: { color: "currentcolor" },
+    viewBox: "0 0 16 16",
+    width: r,
+    children: [
+      /* @__PURE__ */ t("title", { children: "Loading" }),
+      /* @__PURE__ */ o("g", { clipPath: "url(#clip0_2393_1490)", children: [
+        /* @__PURE__ */ t("path", { d: "M8 0V4", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M8 16V12",
+            opacity: "0.5",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M3.29773 1.52783L5.64887 4.7639",
+            opacity: "0.9",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M12.7023 1.52783L10.3511 4.7639",
+            opacity: "0.1",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M12.7023 14.472L10.3511 11.236",
+            opacity: "0.4",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M3.29773 14.472L5.64887 11.236",
+            opacity: "0.6",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M15.6085 5.52783L11.8043 6.7639",
+            opacity: "0.2",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M0.391602 10.472L4.19583 9.23598",
+            opacity: "0.7",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M15.6085 10.4722L11.8043 9.2361",
+            opacity: "0.3",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "path",
+          {
+            d: "M0.391602 5.52783L4.19583 6.7639",
+            opacity: "0.8",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "clip0_2393_1490", children: /* @__PURE__ */ t("rect", { fill: "white", height: "16", width: "16" }) }) })
+    ]
+  }
+), s = d(
+  ({ className: r, size: e = 16, ...i }, c) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: c,
+      "data-slot": "loader",
+      className: a(
+        "inline-flex animate-spin items-center justify-center",
+        r
+      ),
+      ...i,
+      children: /* @__PURE__ */ t(h, { size: e })
+    }
+  )
+);
+s.displayName = "Loader";
+export {
+  s as Loader
+};

package/dist/components/ui/core/loader/loader.metadata.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../../../lib/types';
+export declare const LoaderMetadata: ComponentMeta;

package/dist/components/ui/core/loader/loader.metadata.js

@@ -0,0 +1,9 @@
+const e = {
+  name: "Loader",
+  status: "in-progress-code-review",
+  description: "A spinning loader indicator for loading states.",
+  llmUsage: "Use `<Loader>` to indicate loading. Adjust `size` prop for different contexts. Inherits text color from parent."
+};
+export {
+  e as LoaderMetadata
+};