@cognite/aura 0.1.7 → 0.2.0

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

@@ -1,119 +1,118 @@
-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(
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { cn as s } from "../../../../lib/utils.js";
+const n = ({
+  size: e = 16,
+  className: r,
+  strokeClassName: t
+}) => /* @__PURE__ */ l(
   "svg",
   {
-    height: r,
-    strokeLinejoin: "round",
-    style: { color: "currentcolor" },
-    viewBox: "0 0 16 16",
-    width: r,
+    "aria-hidden": "true",
+    focusable: "false",
+    className: s("overflow-visible", t, r),
+    height: e,
+    viewBox: "0 0 167 216",
+    width: e,
+    xmlns: "http://www.w3.org/2000/svg",
     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" }) }) })
+      /* @__PURE__ */ a(
+        "rect",
+        {
+          className: "aura-loader-rect aura-loader-rect-1",
+          "data-slot": "loader-rect",
+          x: "10",
+          y: "10",
+          width: "98",
+          height: "196",
+          rx: "49",
+          fill: "transparent",
+          stroke: "currentColor",
+          strokeWidth: "20",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "rect",
+        {
+          className: "aura-loader-rect aura-loader-rect-2",
+          "data-slot": "loader-rect",
+          x: "59",
+          y: "10",
+          width: "98",
+          height: "196",
+          rx: "49",
+          fill: "transparent",
+          stroke: "currentColor",
+          strokeWidth: "20",
+          strokeLinecap: "round"
+        }
+      )
     ]
   }
-), s = d(
-  ({ className: r, size: e = 16, ...i }, c) => /* @__PURE__ */ t(
+), x = (e) => e.variant === "page", g = h((e, r) => {
+  const t = e.className, i = e.role ?? "status", o = e["aria-label"] ?? "Loading";
+  if (!x(e)) {
+    const {
+      size: u = 16,
+      variant: b,
+      className: k,
+      role: L,
+      "aria-label": y,
+      ...f
+    } = e;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: r,
+        "data-slot": "loader",
+        role: i,
+        "aria-label": o,
+        className: s("inline-flex items-center justify-center", t),
+        ...f,
+        children: /* @__PURE__ */ a(n, { size: u, strokeClassName: "text-current" })
+      }
+    );
+  }
+  const {
+    variant: N,
+    className: v,
+    role: w,
+    "aria-label": p,
+    header: d,
+    description: c,
+    ...m
+  } = e;
+  return /* @__PURE__ */ l(
     "div",
     {
-      ref: c,
+      ref: r,
       "data-slot": "loader",
-      className: a(
-        "inline-flex animate-spin items-center justify-center",
-        r
+      role: i,
+      "aria-label": o,
+      className: s(
+        "text-foreground flex h-[11.5rem] w-80 flex-col items-center justify-center gap-2",
+        t
       ),
-      ...i,
-      children: /* @__PURE__ */ t(h, { size: e })
+      ...m,
+      children: [
+        /* @__PURE__ */ a(
+          n,
+          {
+            size: 112,
+            className: "size-28",
+            strokeClassName: "text-current"
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "flex w-full flex-col items-center justify-center gap-1 text-center", children: [
+          /* @__PURE__ */ a("p", { className: "text-lg font-medium leading-6 tracking-tightest text-foreground", children: d }),
+          c && /* @__PURE__ */ a("p", { className: "w-full text-sm leading-[18px] tracking-tight text-secondary-foreground", children: c })
+        ] })
+      ]
     }
-  )
-);
-s.displayName = "Loader";
+  );
+});
+g.displayName = "Loader";
 export {
-  s as Loader
+  g as Loader
 };

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

@@ -1,8 +1,8 @@
 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."
+  description: "A four-line loading indicator with inline and page variants.",
+  llmUsage: "Use `<Loader />` for inline loading, or set `variant='page'` for page-level loading copy. Use `size` for inline bars and `className` to style the loader color; page variant copy is configured with `header` and optional `description`."
 };
 export {
   e as LoaderMetadata

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

@@ -11,7 +11,7 @@ declare const PopoverDescription: import('react').ForwardRefExoticComponent<Omit
 declare const PopoverSlot: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 declare const PopoverClose: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ButtonProps & import('class-variance-authority').VariantProps<(props?: ({
     variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
-    size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | 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>, "ref"> & import('react').RefAttributes<HTMLElement>>;
 declare const PopoverContent: import('react').ForwardRefExoticComponent<Omit<import('@base-ui/react').PopoverPopupProps & Pick<import('@base-ui/react').PopoverPositionerProps, "align" | "alignOffset" | "side" | "sideOffset">, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverHeaderContent, PopoverSlot, PopoverTitle, PopoverTrigger, };

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

@@ -45,7 +45,7 @@ declare const PromptInputTools: import('react').ForwardRefExoticComponent<Prompt
 type PromptInputButtonProps = ComponentProps<typeof InputGroupButton>;
 declare const PromptInputButton: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('@base-ui/react').ButtonProps & import('class-variance-authority').VariantProps<(props?: ({
     variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
-    size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | 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"> & import('class-variance-authority').VariantProps<(props?: ({
     size?: "sm" | "icon-sm" | "xs" | "icon-xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+import { Radio as RadioPrimitive } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { VariantProps } from 'class-variance-authority';
+type Orientation = 'horizontal' | 'vertical';
+type RadioGroupProps = RadioGroupPrimitive.Props & {
+    orientation?: Orientation;
+};
+declare const RadioGroup: import('react').ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLLabelElement> & VariantProps<(props?: ({
+    variant?: "default" | "card" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLLabelElement>>;
+declare const RadioGroupItemControl: import('react').ForwardRefExoticComponent<Omit<RadioPrimitive.Root.Props<any>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+declare const RadioGroupItemLabel: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import('react').RefAttributes<HTMLSpanElement>>;
+declare const RadioGroupItemDescription: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import('react').RefAttributes<HTMLSpanElement>>;
+export { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemDescription, RadioGroupItemLabel, };

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

@@ -0,0 +1,110 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { Radio as s } from "@base-ui/react/radio";
+import { RadioGroup as n } from "@base-ui/react/radio-group";
+import { cva as u } from "class-variance-authority";
+import { cn as d, selectionItemBase as b, selectionItemCard as l, selectionItemDefault as c, focusState as p, selectionItemLabel as f, selectionItemDescription as g } from "../../../../lib/utils.js";
+const m = t(({ className: r, orientation: e = "vertical", ...o }, i) => /* @__PURE__ */ a(
+  n,
+  {
+    ref: i,
+    "data-slot": "radio-group",
+    "data-orientation": e,
+    "aria-orientation": e,
+    className: d(
+      e === "horizontal" ? "flex items-center gap-2" : "grid has-[[data-variant=card]]:gap-2",
+      r
+    ),
+    ...o
+  }
+));
+m.displayName = "RadioGroup";
+const h = u(
+  d("group/radio-group-item", b),
+  {
+    variants: {
+      variant: {
+        default: c,
+        card: l
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), v = t(
+  ({ className: r, variant: e, ...o }, i) => /* @__PURE__ */ a(
+    "label",
+    {
+      ref: i,
+      "data-slot": "radio-group-item",
+      "data-variant": e ?? "default",
+      className: d(h({ variant: e }), r),
+      ...o
+    }
+  )
+);
+v.displayName = "RadioGroupItem";
+const I = t(({ className: r, ...e }, o) => /* @__PURE__ */ a(
+  s.Root,
+  {
+    ref: o,
+    "data-slot": "radio-group-item-control",
+    className: d(
+      "group relative flex size-4 shrink-0 items-center justify-center rounded-full bg-transparent outline-none before:pointer-events-none before:absolute before:inset-0 before:z-0 before:box-border before:rounded-full before:border-[1.5px] before:border-muted-foreground before:bg-transparent before:transition-[background-color,border-color,box-shadow] before:content-['']",
+      "data-[checked]:before:border-border-active",
+      "hover:before:border-secondary-foreground group-hover/radio-group-item:before:border-secondary-foreground",
+      "data-[checked]:hover:before:border-border-active data-[checked]:hover:before:bg-accent-background",
+      "data-[checked]:group-hover/radio-group-item:before:border-border-active data-[checked]:group-hover/radio-group-item:before:bg-accent-background",
+      "data-[disabled]:before:border-disabled-foreground data-[disabled]:before:bg-disabled-background data-[disabled]:hover:before:border-disabled-foreground data-[disabled]:group-hover/radio-group-item:before:border-disabled-foreground data-[disabled]:group-hover/radio-group-item:before:bg-disabled-background",
+      p,
+      r
+    ),
+    ...e,
+    children: /* @__PURE__ */ a(
+      s.Indicator,
+      {
+        "data-slot": "radio-group-item-indicator",
+        className: "relative z-10 flex items-center justify-center size-full",
+        children: /* @__PURE__ */ a("span", { className: "size-2.5 rounded-full bg-active-background group-hover:bg-active-background-hover group-data-[disabled]:bg-disabled-foreground" })
+      }
+    )
+  }
+));
+I.displayName = "RadioGroupItemControl";
+const R = t(({ className: r, ...e }, o) => /* @__PURE__ */ a(
+  "span",
+  {
+    ref: o,
+    "data-slot": "radio-group-item-label",
+    className: d(
+      f,
+      "group-has-[[data-checked]]/radio-group-item:text-foreground",
+      "group-has-[[data-disabled]]/radio-group-item:text-disabled-foreground",
+      r
+    ),
+    ...e
+  }
+));
+R.displayName = "RadioGroupItemLabel";
+const k = t(({ className: r, ...e }, o) => /* @__PURE__ */ a(
+  "span",
+  {
+    ref: o,
+    "data-slot": "radio-group-item-description",
+    className: d(
+      g,
+      "group-has-[[data-disabled]]/radio-group-item:text-disabled-foreground",
+      r
+    ),
+    ...e
+  }
+));
+k.displayName = "RadioGroupItemDescription";
+export {
+  m as RadioGroup,
+  v as RadioGroupItem,
+  I as RadioGroupItemControl,
+  k as RadioGroupItemDescription,
+  R as RadioGroupItemLabel
+};

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

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

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

@@ -0,0 +1,9 @@
+const e = {
+  name: "RadioGroup",
+  status: "in-progress-code-review",
+  description: "A composable radio group with optional label and description slots, including a card-style item variant.",
+  llmUsage: 'Use `<RadioGroup>` with `<RadioGroupItem>` wrapping `<RadioGroupItemControl value="..." />`, plus optional `<RadioGroupItemLabel>` and `<RadioGroupItemDescription>`. Always pass an accessible name on `<RadioGroupItemControl>` via `aria-label` (or `aria-labelledby` pointing to the label\'s id) — the wrapping `<label>` element names the underlying hidden form input, but does not name the visible `role="radio"` element that screen readers focus on. `<RadioGroupItemDescription>` is a visual slot at this primitive layer; if you need it announced by screen readers, give it an `id` and pass `aria-describedby` to `<RadioGroupItemControl>`. Use `variant="card"` on `<RadioGroupItem>` for card-style options. Pass `name`, `value`/`defaultValue`, `onValueChange`, `disabled`, `required`, and `orientation` on `<RadioGroup>` for form integration and layout.'
+};
+export {
+  e as RadioGroupMetadata
+};

package/dist/components/ui/core/segmented-control/segmented-control.d.ts

@@ -0,0 +1,16 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+import { VariantProps } from 'class-variance-authority';
+declare function SegmentedControl({ className, ...props }: TabsPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare const segmentedControlListVariants: (props?: ({
+    size?: "default" | "small" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type SegmentedControlListProps = TabsPrimitive.List.Props & VariantProps<typeof segmentedControlListVariants>;
+declare function SegmentedControlList({ className, size, children, ...props }: SegmentedControlListProps): import("react/jsx-runtime").JSX.Element;
+declare const segmentedControlButtonVariants: (props?: ({
+    size?: "default" | "small" | null | undefined;
+    tabContent?: "icon-label" | "label-only" | "icon-only" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type SegmentedControlButtonProps = TabsPrimitive.Tab.Props & VariantProps<typeof segmentedControlButtonVariants>;
+declare function SegmentedControlButton({ className, size, tabContent, ...props }: SegmentedControlButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControlContent({ className, ...props }: TabsPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
+export { SegmentedControl, SegmentedControlButton, SegmentedControlContent, SegmentedControlList, segmentedControlButtonVariants, segmentedControlListVariants, };

package/dist/components/ui/core/segmented-control/segmented-control.js

@@ -0,0 +1,169 @@
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { createContext as m, useContext as f } from "react";
+import { Tabs as a } from "@base-ui/react/tabs";
+import { cva as l } from "class-variance-authority";
+import { cn as i } from "../../../../lib/utils.js";
+function N({ className: t, ...e }) {
+  return /* @__PURE__ */ n(
+    a.Root,
+    {
+      "data-slot": "segmented-control",
+      className: i("flex flex-col gap-2", t),
+      ...e
+    }
+  );
+}
+const g = l(
+  "bg-muted-background text-muted-foreground relative isolate inline-flex w-fit items-center justify-center gap-2 p-0.5",
+  {
+    variants: {
+      size: {
+        default: "h-9 rounded-lg",
+        small: "h-7 rounded-md"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), d = m(void 0);
+function S({
+  className: t,
+  size: e,
+  children: o,
+  ...r
+}) {
+  const s = e ?? "default";
+  return /* @__PURE__ */ n(
+    a.List,
+    {
+      "data-slot": "segmented-control-list",
+      className: i(g({ size: e }), t),
+      ...r,
+      children: /* @__PURE__ */ u(d.Provider, { value: s, children: [
+        /* @__PURE__ */ n(p, { size: s }),
+        o
+      ] })
+    }
+  );
+}
+const b = l(
+  "bg-background pointer-events-none absolute top-(--active-tab-top) left-(--active-tab-left) -z-0 h-(--active-tab-height) w-(--active-tab-width) motion-safe:transition-[top,left,width,height] motion-safe:duration-200 motion-safe:ease-out data-[activation-direction=none]:transition-none",
+  {
+    variants: {
+      size: {
+        default: "rounded-md",
+        small: "rounded-sm"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function p({
+  className: t,
+  size: e,
+  ...o
+}) {
+  return /* @__PURE__ */ n(
+    a.Indicator,
+    {
+      "data-slot": "segmented-control-indicator",
+      className: i(b({ size: e }), t),
+      ...o
+    }
+  );
+}
+const v = l(
+  "text-sm leading-4.5 tracking-normal font-medium relative z-10 inline-flex flex-1 items-center justify-center whitespace-nowrap text-muted-foreground dark:text-muted-foreground border border-transparent transition-[color,box-shadow] duration-200 ease-out focus-visible:border-ring focus-visible:ring focus-visible:ring-ring-shadow focus-visible:outline-1 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 data-disabled:pointer-events-none data-disabled:opacity-50 hover:text-foreground data-active:text-foreground data-active:hover:text-foreground",
+  {
+    variants: {
+      size: {
+        default: "rounded-md",
+        small: "rounded-sm"
+      },
+      tabContent: {
+        "icon-label": "",
+        "label-only": "",
+        "icon-only": "px-0"
+      }
+    },
+    compoundVariants: [
+      {
+        size: "default",
+        tabContent: "icon-label",
+        className: "h-8 gap-2 px-2 py-0"
+      },
+      {
+        size: "default",
+        tabContent: "label-only",
+        className: "h-8 gap-0 px-2 py-0"
+      },
+      {
+        size: "default",
+        tabContent: "icon-only",
+        className: "size-8 gap-0 py-0"
+      },
+      {
+        size: "small",
+        tabContent: "icon-label",
+        className: "h-6 gap-2 px-2 py-0"
+      },
+      {
+        size: "small",
+        tabContent: "label-only",
+        className: "h-6 gap-0 px-2 py-0"
+      },
+      {
+        size: "small",
+        tabContent: "icon-only",
+        className: "size-6 gap-0 py-0"
+      }
+    ],
+    defaultVariants: {
+      size: "default",
+      tabContent: "icon-label"
+    }
+  }
+);
+function w({
+  className: t,
+  size: e,
+  tabContent: o,
+  ...r
+}) {
+  const s = f(d), c = e ?? s;
+  return /* @__PURE__ */ n(
+    a.Tab,
+    {
+      "data-slot": "segmented-control-trigger",
+      className: i(
+        v({ size: c, tabContent: o }),
+        t
+      ),
+      ...r
+    }
+  );
+}
+function V({
+  className: t,
+  ...e
+}) {
+  return /* @__PURE__ */ n(
+    a.Panel,
+    {
+      "data-slot": "segmented-control-content",
+      className: i("flex-1 outline-none", t),
+      ...e
+    }
+  );
+}
+export {
+  N as SegmentedControl,
+  w as SegmentedControlButton,
+  V as SegmentedControlContent,
+  S as SegmentedControlList,
+  v as segmentedControlButtonVariants,
+  g as segmentedControlListVariants
+};

package/dist/components/ui/core/sonner-toast/sonner-toast.d.ts

@@ -0,0 +1,3 @@
+import { ToasterProps, toast } from 'sonner';
+declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+export { Toaster, toast };

package/dist/components/ui/core/sonner-toast/sonner-toast.js

@@ -0,0 +1,48 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IconLoader2 as o, IconAlertOctagonFilled as s, IconAlertTriangleFilled as a, IconInfoCircleFilled as i, IconCircleCheckFilled as l, IconX as d } from "@tabler/icons-react";
+import { Toaster as c } from "sonner";
+import { toast as k } from "sonner";
+import { cn as r } from "../../../../lib/utils.js";
+const g = {
+  "--normal-bg": "var(--raised-background)",
+  "--normal-text": "var(--foreground-fixed-light)",
+  "--normal-border": "transparent",
+  "--border-radius": "var(--radius-lg)"
+}, p = ({ ...n }) => {
+  const t = "flex h-5 min-w-5 items-center justify-center rounded-md px-1";
+  return /* @__PURE__ */ e(
+    c,
+    {
+      "data-slot": "sonner-toast",
+      theme: "system",
+      className: "toaster group",
+      icons: {
+        close: /* @__PURE__ */ e(d, { className: "size-4 text-foreground-fixed-light" }),
+        success: /* @__PURE__ */ e("span", { className: r(t, "bg-success-background"), children: /* @__PURE__ */ e(l, { className: "size-3 text-success-foreground-on-success" }) }),
+        info: /* @__PURE__ */ e("span", { className: r(t, "bg-info-background"), children: /* @__PURE__ */ e(i, { className: "size-3 text-info-foreground-on-info" }) }),
+        warning: /* @__PURE__ */ e("span", { className: r(t, "bg-warning-background"), children: /* @__PURE__ */ e(a, { className: "size-3 text-warning-foreground-on-warning" }) }),
+        error: /* @__PURE__ */ e("span", { className: r(t, "bg-destructive-background"), children: /* @__PURE__ */ e(s, { className: "size-3 text-destructive-foreground-on-critical" }) }),
+        loading: /* @__PURE__ */ e(o, { className: "size-4 animate-spin" })
+      },
+      style: g,
+      toastOptions: {
+        unstyled: !0,
+        classNames: {
+          toast: "flex w-[384px] min-h-11 items-center gap-2 rounded-lg bg-raised-background p-3 shadow-md has-[[data-description]]:[&_[data-icon]]:hidden",
+          icon: "order-1 m-0 shrink-0 flex items-start",
+          content: "order-2 flex flex-1 basis-0 flex-col items-start gap-0.5",
+          title: "w-full self-stretch text-sm font-medium leading-[18px] tracking-normal text-foreground-fixed-light",
+          description: "w-full self-stretch text-sm font-normal leading-[18px] tracking-tight text-muted-foreground-fixed-light",
+          actionButton: "order-3 ml-auto inline-flex h-7 items-center justify-center gap-1.5 rounded-md bg-transparent px-2 text-sm font-medium leading-[18px] tracking-normal text-foreground-fixed-light transition-all hover:cursor-pointer",
+          cancelButton: "order-3 ml-auto inline-flex h-7 items-center justify-center gap-1.5 rounded-md bg-transparent px-2 text-sm font-medium leading-[18px] tracking-normal text-foreground-fixed-light transition-all hover:cursor-pointer",
+          closeButton: "order-4 inline-flex size-7 items-center justify-center rounded-md text-foreground-fixed-light transition-all hover:cursor-pointer hover:text-foreground-fixed-light hover:!bg-transparent"
+        }
+      },
+      ...n
+    }
+  );
+};
+export {
+  p as Toaster,
+  k as toast
+};

package/dist/components/ui/core/sonner-toast/sonner-toast.metadata.d.ts

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

package/dist/components/ui/core/sonner-toast/sonner-toast.metadata.js

@@ -0,0 +1,9 @@
+const t = {
+  name: "SonnerToast",
+  status: "draft",
+  description: "A Sonner-based toast primitive with fully custom Aura/Figma slot styling (unstyled mode), status badges for all semantic variants, and right-aligned action/cancel/close controls.",
+  llmUsage: "Mount `<Toaster />` once near app root, then call `toast(...)`, `toast.success(...)`, `toast.error(...)`, `toast.warning(...)`, or `toast.info(...)`. Use toast options for `description`, `action`, and `cancel`; use Toaster props (for example `position` and `closeButton`) to control placement and close-button visibility."
+};
+export {
+  t as SonnerToastMetadata
+};