@cognite/aura 0.3.2 → 0.3.3

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

@@ -1,304 +1,179 @@
-import { jsxs as m, Fragment as N, jsx as t } from "react/jsx-runtime";
-import { createContext as C, forwardRef as y, useId as z, useContext as k, useMemo as I } from "react";
-import { Select as a } from "@base-ui/react/select";
-import { IconChevronDown as v, IconExclamationCircle as V, IconCheck as _, IconChevronUp as O } from "@tabler/icons-react";
-import { usePortalContainer as P } from "../../../../lib/portal-container-context.js";
-import { useControllableState as j } from "../../../../lib/use-controllable-state.js";
-import { cn as i, disabledState as T, invalidState as D, focusState as B, filledState as E, hoverState as G, formElementBase as L } from "../../../../lib/utils.js";
-const g = C(null), R = () => {
-  const e = k(g);
-  if (!e)
-    throw new Error("Select components must be used within Select");
-  return e;
+import { cn as e, disabledState as t, filledState as n, focusState as r, formElementBase as i, hoverState as a, invalidState as o } from "../../../../lib/utils.js";
+import { usePortalContainer as s } from "../../../../lib/portal-container-context.js";
+import { useControllableState as c } from "../../../../lib/use-controllable-state.js";
+import { createContext as l, forwardRef as u, useContext as d, useId as f, useMemo as p } from "react";
+import { IconCheck as m, IconChevronDown as h, IconChevronUp as g, IconExclamationCircle as _ } from "@tabler/icons-react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { Select as x } from "@base-ui/react/select";
+//#region libs/aura/src/components/ui/core/select/select.tsx
+var S = l(null), C = () => {
+	let e = d(S);
+	if (!e) throw Error("Select components must be used within Select");
+	return e;
 };
-function Y(e) {
-  const [o, r] = j({
-    prop: e.open,
-    defaultProp: e.defaultOpen ?? !1,
-    onChange: e.onOpenChange
-  }), n = I(() => ({ isOpen: o ?? !1 }), [o]);
-  if (e.multiple) {
-    const {
-      multiple: f,
-      value: h,
-      defaultValue: b,
-      onValueChange: w,
-      ...S
-    } = e;
-    return /* @__PURE__ */ t(g.Provider, { value: n, children: /* @__PURE__ */ t(
-      a.Root,
-      {
-        "data-slot": "select",
-        open: o,
-        onOpenChange: (p) => r(p),
-        value: h,
-        defaultValue: b,
-        onValueChange: (p, W) => {
-          w?.(p ?? []);
-        },
-        multiple: !0,
-        ...S
-      }
-    ) });
-  }
-  const { value: l, defaultValue: s, onValueChange: c, ...d } = e, u = l === void 0 ? void 0 : l === "" ? null : l, x = s === void 0 ? void 0 : s === "" ? null : s;
-  return /* @__PURE__ */ t(g.Provider, { value: n, children: /* @__PURE__ */ t(
-    a.Root,
-    {
-      "data-slot": "select",
-      open: o,
-      onOpenChange: (f) => r(f),
-      value: u,
-      defaultValue: x,
-      onValueChange: (f, h) => {
-        c?.(typeof f == "string" ? f : "");
-      },
-      ...d
-    }
-  ) });
+function w(e) {
+	let [t, n] = c({
+		prop: e.open,
+		defaultProp: e.defaultOpen ?? !1,
+		onChange: e.onOpenChange
+	}), r = p(() => ({ isOpen: t ?? !1 }), [t]);
+	if (e.multiple) {
+		let { multiple: i, value: a, defaultValue: o, onValueChange: s, ...c } = e;
+		return /* @__PURE__ */ y(S.Provider, {
+			value: r,
+			children: /* @__PURE__ */ y(x.Root, {
+				"data-slot": "select",
+				open: t,
+				onOpenChange: (e) => n(e),
+				value: a,
+				defaultValue: o,
+				onValueChange: (e, t) => {
+					s?.(e ?? []);
+				},
+				multiple: !0,
+				...c
+			})
+		});
+	}
+	let { value: i, defaultValue: a, onValueChange: o, ...s } = e, l = i === void 0 ? void 0 : i === "" ? null : i, u = a === void 0 ? void 0 : a === "" ? null : a;
+	return /* @__PURE__ */ y(S.Provider, {
+		value: r,
+		children: /* @__PURE__ */ y(x.Root, {
+			"data-slot": "select",
+			open: t,
+			onOpenChange: (e) => n(e),
+			value: l,
+			defaultValue: u,
+			onValueChange: (e, t) => {
+				o?.(typeof e == "string" ? e : "");
+			},
+			...s
+		})
+	});
 }
-function Z({
-  className: e,
-  ...o
-}) {
-  return /* @__PURE__ */ t(
-    a.Group,
-    {
-      "data-slot": "select-group",
-      className: i("scroll-my-1 p-1", e),
-      ...o
-    }
-  );
+function T({ className: t, ...n }) {
+	return /* @__PURE__ */ y(x.Group, {
+		"data-slot": "select-group",
+		className: e("scroll-my-1 p-1", t),
+		...n
+	});
 }
-function M({
-  icon: e,
-  ...o
-}) {
-  return e ? /* @__PURE__ */ m("span", { className: "flex flex-1 items-center gap-2 min-w-0 overflow-hidden", children: [
-    e,
-    /* @__PURE__ */ t(
-      a.Value,
-      {
-        "data-slot": "select-value",
-        className: "flex-1 truncate min-w-0",
-        ...o
-      }
-    )
-  ] }) : /* @__PURE__ */ t(
-    a.Value,
-    {
-      "data-slot": "select-value",
-      className: "flex-1 truncate min-w-0",
-      ...o
-    }
-  );
+function E({ icon: e, ...t }) {
+	return e ? /* @__PURE__ */ b("span", {
+		className: "flex flex-1 items-center gap-2 min-w-0 overflow-hidden",
+		children: [e, /* @__PURE__ */ y(x.Value, {
+			"data-slot": "select-value",
+			className: "flex-1 truncate min-w-0",
+			...t
+		})]
+	}) : /* @__PURE__ */ y(x.Value, {
+		"data-slot": "select-value",
+		className: "flex-1 truncate min-w-0",
+		...t
+	});
 }
-const U = y(({ className: e, size: o = "default", children: r, errorMessage: n, ...l }, s) => {
-  const { isOpen: c } = R(), d = !!n, u = z();
-  return /* @__PURE__ */ m(N, { children: [
-    /* @__PURE__ */ m(
-      a.Trigger,
-      {
-        ref: s,
-        "data-slot": "select-trigger",
-        "data-size": o,
-        "aria-invalid": d ? !0 : void 0,
-        "aria-describedby": d ? u : void 0,
-        className: i(
-          "w-full min-w-50 h-9 max-w-[min(100%,420px)] flex items-center justify-between gap-2 text-left overflow-hidden transition-[color,box-shadow] cursor-pointer",
-          L,
-          G,
-          E,
-          B,
-          c && "shadow-focus-ring bg-background border-transparent focus:border-transparent hover:border-transparent text-foreground",
-          D,
-          T,
-          "dark:bg-muted-background/30 dark:text-muted-foreground dark:hover:bg-accent-background",
-          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-          e
-        ),
-        ...l,
-        children: [
-          r,
-          /* @__PURE__ */ t(
-            a.Icon,
-            {
-              render: /* @__PURE__ */ t(
-                v,
-                {
-                  className: i(
-                    "size-4 opacity-50 transition-transform",
-                    c ? "rotate-180" : "rotate-0"
-                  )
-                }
-              )
-            }
-          )
-        ]
-      }
-    ),
-    n && /* @__PURE__ */ m(
-      "div",
-      {
-        id: u,
-        className: "flex flex-row gap-1 justify-start items-center p-1",
-        children: [
-          /* @__PURE__ */ t(V, { className: "text-destructive-foreground text-sm size-4" }),
-          /* @__PURE__ */ t("span", { className: "text-destructive-foreground text-sm", children: n })
-        ]
-      }
-    )
-  ] });
+var D = u(({ className: s, size: c = "default", children: l, errorMessage: u, ...d }, p) => {
+	let { isOpen: m } = C(), g = !!u, S = f();
+	return /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ b(x.Trigger, {
+		ref: p,
+		"data-slot": "select-trigger",
+		"data-size": c,
+		"aria-invalid": g ? !0 : void 0,
+		"aria-describedby": g ? S : void 0,
+		className: e("w-full min-w-50 h-9 max-w-[min(100%,420px)] flex items-center justify-between gap-2 text-left overflow-hidden transition-[color,box-shadow] cursor-pointer", i, a, n, r, m && "shadow-focus-ring bg-background border-transparent focus:border-transparent hover:border-transparent text-foreground", o, t, "dark:bg-muted-background/30 dark:text-muted-foreground dark:hover:bg-accent-background", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", s),
+		...d,
+		children: [l, /* @__PURE__ */ y(x.Icon, { render: /* @__PURE__ */ y(h, { className: e("size-4 opacity-50 transition-transform", m ? "rotate-180" : "rotate-0") }) })]
+	}), u && /* @__PURE__ */ b("div", {
+		id: S,
+		className: "flex flex-row gap-1 justify-start items-center p-1",
+		children: [/* @__PURE__ */ y(_, { className: "text-destructive-foreground text-sm size-4" }), /* @__PURE__ */ y("span", {
+			className: "text-destructive-foreground text-sm",
+			children: u
+		})]
+	})] });
 });
-U.displayName = "SelectTrigger";
-function ee({
-  className: e,
-  children: o,
-  position: r = "popper",
-  align: n = "start",
-  alignOffset: l = 0,
-  side: s = "bottom",
-  sideOffset: c = 4,
-  ...d
-}) {
-  const u = P();
-  return /* @__PURE__ */ t(a.Portal, { container: u, children: /* @__PURE__ */ t(
-    a.Positioner,
-    {
-      alignItemWithTrigger: !1,
-      align: n,
-      alignOffset: l,
-      side: s,
-      sideOffset: c,
-      collisionPadding: 10,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ m(
-        a.Popup,
-        {
-          "data-slot": "select-content",
-          className: i(
-            "bg-popover-background text-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--available-height) max-w-[min(100%,420px)] min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md outline-none",
-            r === "popper" && "data-[side=bottom]:translate-y-1",
-            e
-          ),
-          ...d,
-          children: [
-            /* @__PURE__ */ t(A, {}),
-            /* @__PURE__ */ t(a.List, { children: o }),
-            /* @__PURE__ */ t(F, {})
-          ]
-        }
-      )
-    }
-  ) });
+D.displayName = "SelectTrigger";
+function O({ className: t, children: n, position: r = "popper", align: i = "start", alignOffset: a = 0, side: o = "bottom", sideOffset: c = 4, ...l }) {
+	let u = s();
+	return /* @__PURE__ */ y(x.Portal, {
+		container: u,
+		children: /* @__PURE__ */ y(x.Positioner, {
+			alignItemWithTrigger: !1,
+			align: i,
+			alignOffset: a,
+			side: o,
+			sideOffset: c,
+			collisionPadding: 10,
+			className: "isolate z-50",
+			children: /* @__PURE__ */ b(x.Popup, {
+				"data-slot": "select-content",
+				className: e("bg-popover-background text-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--available-height) max-w-[min(100%,420px)] min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md outline-none", r === "popper" && "data-[side=bottom]:translate-y-1", t),
+				...l,
+				children: [
+					/* @__PURE__ */ y(M, {}),
+					/* @__PURE__ */ y(x.List, { children: n }),
+					/* @__PURE__ */ y(N, {})
+				]
+			})
+		})
+	});
 }
-function te({
-  className: e,
-  ...o
-}) {
-  return /* @__PURE__ */ t(
-    a.GroupLabel,
-    {
-      "data-slot": "select-label",
-      className: i("text-muted-foreground px-2 py-1.5 text-xs", e),
-      ...o
-    }
-  );
+function k({ className: t, ...n }) {
+	return /* @__PURE__ */ y(x.GroupLabel, {
+		"data-slot": "select-label",
+		className: e("text-muted-foreground px-2 py-1.5 text-xs", t),
+		...n
+	});
 }
-function oe({
-  className: e,
-  children: o,
-  icon: r,
-  suffix: n,
-  ...l
-}) {
-  const s = typeof o == "string" ? o : void 0;
-  return /* @__PURE__ */ m(
-    a.Item,
-    {
-      "data-slot": "select-item",
-      className: i(
-        "relative flex w-full min-h-9 cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-base leading-5 tracking-tightest outline-hidden select-none focus:bg-accent-background focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-        e
-      ),
-      ...l,
-      children: [
-        /* @__PURE__ */ t(
-          a.ItemIndicator,
-          {
-            render: /* @__PURE__ */ t("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ t(_, { className: "size-4 text-foreground" }) })
-          }
-        ),
-        r && /* @__PURE__ */ t("span", { className: "flex items-center gap-2 mr-1", children: r }),
-        /* @__PURE__ */ t(
-          a.ItemText,
-          {
-            className: "flex-1 truncate min-w-0",
-            title: s,
-            children: o
-          }
-        ),
-        n && /* @__PURE__ */ t("span", { className: "shrink-0 ml-auto", children: n })
-      ]
-    }
-  );
+function A({ className: t, children: n, icon: r, suffix: i, ...a }) {
+	let o = typeof n == "string" ? n : void 0;
+	return /* @__PURE__ */ b(x.Item, {
+		"data-slot": "select-item",
+		className: e("relative flex w-full min-h-9 cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-base leading-5 tracking-tightest outline-hidden select-none focus:bg-accent-background focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", t),
+		...a,
+		children: [
+			/* @__PURE__ */ y(x.ItemIndicator, { render: /* @__PURE__ */ y("span", {
+				className: "absolute right-2 flex size-3.5 items-center justify-center",
+				children: /* @__PURE__ */ y(m, { className: "size-4 text-foreground" })
+			}) }),
+			r && /* @__PURE__ */ y("span", {
+				className: "flex items-center gap-2 mr-1",
+				children: r
+			}),
+			/* @__PURE__ */ y(x.ItemText, {
+				className: "flex-1 truncate min-w-0",
+				title: o,
+				children: n
+			}),
+			i && /* @__PURE__ */ y("span", {
+				className: "shrink-0 ml-auto",
+				children: i
+			})
+		]
+	});
 }
-function ae({
-  className: e,
-  ...o
-}) {
-  return /* @__PURE__ */ t(
-    a.Separator,
-    {
-      "data-slot": "select-separator",
-      className: i("bg-border pointer-events-none -mx-1 my-1 h-px", e),
-      ...o
-    }
-  );
+function j({ className: t, ...n }) {
+	return /* @__PURE__ */ y(x.Separator, {
+		"data-slot": "select-separator",
+		className: e("bg-border pointer-events-none -mx-1 my-1 h-px", t),
+		...n
+	});
 }
-function A({
-  className: e,
-  ...o
-}) {
-  return /* @__PURE__ */ t(
-    a.ScrollUpArrow,
-    {
-      "data-slot": "select-scroll-up-button",
-      className: i(
-        "bg-popover-background z-10 flex cursor-default items-center justify-center py-1 top-0 w-full",
-        e
-      ),
-      ...o,
-      children: /* @__PURE__ */ t(O, { className: "size-4" })
-    }
-  );
+function M({ className: t, ...n }) {
+	return /* @__PURE__ */ y(x.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: e("bg-popover-background z-10 flex cursor-default items-center justify-center py-1 top-0 w-full", t),
+		...n,
+		children: /* @__PURE__ */ y(g, { className: "size-4" })
+	});
 }
-function F({
-  className: e,
-  ...o
-}) {
-  return /* @__PURE__ */ t(
-    a.ScrollDownArrow,
-    {
-      "data-slot": "select-scroll-down-button",
-      className: i(
-        "bg-popover-background z-10 flex cursor-default items-center justify-center py-1 bottom-0 w-full",
-        e
-      ),
-      ...o,
-      children: /* @__PURE__ */ t(v, { className: "size-4" })
-    }
-  );
+function N({ className: t, ...n }) {
+	return /* @__PURE__ */ y(x.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: e("bg-popover-background z-10 flex cursor-default items-center justify-center py-1 bottom-0 w-full", t),
+		...n,
+		children: /* @__PURE__ */ y(h, { className: "size-4" })
+	});
 }
-export {
-  Y as Select,
-  ee as SelectContent,
-  Z as SelectGroup,
-  oe as SelectItem,
-  te as SelectLabel,
-  F as SelectScrollDownButton,
-  A as SelectScrollUpButton,
-  ae as SelectSeparator,
-  U as SelectTrigger,
-  M as SelectValue
-};
+//#endregion
+export { w as Select, O as SelectContent, T as SelectGroup, A as SelectItem, k as SelectLabel, N as SelectScrollDownButton, M as SelectScrollUpButton, j as SelectSeparator, D as SelectTrigger, E as SelectValue };

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

@@ -1,24 +1,14 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Separator as i } from "@base-ui/react/separator";
-import { cn as n } from "../../../../lib/utils.js";
-function m({
-  className: a,
-  orientation: r = "horizontal",
-  ...t
-}) {
-  return /* @__PURE__ */ o(
-    i,
-    {
-      "data-slot": "separator",
-      orientation: r,
-      className: n(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        a
-      ),
-      ...t
-    }
-  );
+import { cn as e } from "../../../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Separator as n } from "@base-ui/react/separator";
+//#region libs/aura/src/components/ui/core/separator/separator.tsx
+function r({ className: r, orientation: i = "horizontal", ...a }) {
+	return /* @__PURE__ */ t(n, {
+		"data-slot": "separator",
+		orientation: i,
+		className: e("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", r),
+		...a
+	});
 }
-export {
-  m as Separator
-};
+//#endregion
+export { r as Separator };

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

@@ -1,14 +1,12 @@
 import { MemoExoticComponent, ReactNode } from 'react';
 type TextShimmerProps = {
     children: string;
-    /** SVG URL or data URI used as a CSS mask. Not a React component which would require runtime SVG serialization. */
-    iconUrl?: string;
     as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3';
     className?: string;
     duration?: number;
     spread?: number;
-    variant?: 'default' | 'nordic' | 'aurora' | 'dusk' | 'equinox' | 'summer' | 'spring' | 'fall';
+    variant?: 'default' | 'nordic' | 'aurora' | 'dusk' | 'equinox' | 'summer' | 'spring' | 'fall' | 'active';
 };
-declare function ShimmerComponent({ children, iconUrl, as: Tag, className, duration, spread, variant, }: TextShimmerProps): ReactNode;
+declare function ShimmerComponent({ children, as: Tag, className, duration, spread, variant, }: TextShimmerProps): ReactNode;
 declare const MemoizedShimmer: MemoExoticComponent<typeof ShimmerComponent>;
 export { MemoizedShimmer as Shimmer };