@cognite/aura 0.3.2 → 0.3.3

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

@@ -1,207 +1,159 @@
-import { jsx as a, jsxs as N } from "react/jsx-runtime";
-import { createContext as k, forwardRef as l, useMemo as C, useContext as g } from "react";
-import { IconX as S, IconInfoCircleFilled as I, IconAlertCircleFilled as V, IconAlertTriangleFilled as z } from "@tabler/icons-react";
-import { cva as v } from "class-variance-authority";
-import { useControllableState as _ } from "../../../../lib/use-controllable-state.js";
-import { cn as s } from "../../../../lib/utils.js";
-import { Button as b } from "../button/button.js";
-const i = k({
-  show: !0,
-  setShow: () => {
-  },
-  variant: "default",
-  alertStyle: "card"
-}), B = v(
-  [
-    "[&_svg]:shrink-0",
-    "[&_svg:not([class*='size-']):not([class*='w-'])]:w-4",
-    "[&_svg:not([class*='size-']):not([class*='h-'])]:h-4"
-  ].join(" ")
-), D = v(
-  "relative w-full rounded-md pt-2.5 pr-3 has-[>button[data-slot=alert-close]]:pr-12 pb-2 pl-3 text-sm grid has-[>[data-slot=alert-icon]]:grid-cols-[auto_1fr] grid-cols-[0_1fr] has-[>[data-slot=alert-icon]]:gap-x-2 has-[>[data-slot=alert-icon]]:gap-y-1 items-start",
-  {
-    variants: {
-      variant: {
-        default: "bg-neutral-muted-background text-foreground [&>[data-slot=alert-icon]]:text-muted-foreground",
-        info: "bg-info-muted-background text-foreground [&>[data-slot=alert-icon]]:text-info-foreground",
-        warning: "bg-warning-muted-background [&>[data-slot=alert-icon]]:text-warning-foreground",
-        error: "bg-destructive-muted-background text-foreground [&>[data-slot=alert-icon]]:text-destructive-foreground"
-      },
-      alertStyle: {
-        card: "pt-3 pr-5 pb-3 pl-3 [&>[data-slot=alert-title]+[data-slot=alert-description]]:mt-2 [&>[data-slot=alert-icon]]:mt-0.5",
-        strip: "flex min-h-11 items-center gap-2 py-2 pr-3 pl-3 [&>[data-slot=alert-title]]:hidden"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      alertStyle: "card"
-    }
-  }
-);
-function T(r) {
-  const t = { "aria-hidden": !0 };
-  switch (r) {
-    case "warning":
-      return /* @__PURE__ */ a(z, { ...t });
-    case "error":
-      return /* @__PURE__ */ a(V, { ...t });
-    default:
-      return /* @__PURE__ */ a(I, { ...t });
-  }
+import { cn as e } from "../../../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { useControllableState as n } from "../../../../lib/use-controllable-state.js";
+import { createContext as r, forwardRef as i, useContext as a, useMemo as o } from "react";
+import { IconAlertCircleFilled as s, IconAlertTriangleFilled as c, IconInfoCircleFilled as l, IconX as u } from "@tabler/icons-react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { cva as p } from "class-variance-authority";
+//#region libs/aura/src/components/ui/core/alert/alert.tsx
+var m = r({
+	show: !0,
+	setShow: () => {},
+	variant: "default",
+	alertStyle: "card"
+}), h = p([
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-']):not([class*='w-'])]:w-4",
+	"[&_svg:not([class*='size-']):not([class*='h-'])]:h-4"
+].join(" ")), g = p("relative w-full rounded-md pt-2.5 pr-3 has-[>button[data-slot=alert-close]]:pr-12 pb-2 pl-3 text-sm grid has-[>[data-slot=alert-icon]]:grid-cols-[auto_1fr] grid-cols-[0_1fr] has-[>[data-slot=alert-icon]]:gap-x-2 has-[>[data-slot=alert-icon]]:gap-y-1 items-start", {
+	variants: {
+		variant: {
+			default: "bg-neutral-muted-background text-foreground [&>[data-slot=alert-icon]]:text-muted-foreground",
+			info: "bg-info-muted-background text-foreground [&>[data-slot=alert-icon]]:text-info-foreground",
+			warning: "bg-warning-muted-background [&>[data-slot=alert-icon]]:text-warning-foreground",
+			error: "bg-destructive-muted-background text-foreground [&>[data-slot=alert-icon]]:text-destructive-foreground"
+		},
+		alertStyle: {
+			card: "pt-3 pr-5 pb-3 pl-3 [&>[data-slot=alert-title]+[data-slot=alert-description]]:mt-2 [&>[data-slot=alert-icon]]:mt-0.5",
+			strip: "flex min-h-11 items-center gap-2 py-2 pr-3 pl-3 [&>[data-slot=alert-title]]:hidden"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		alertStyle: "card"
+	}
+});
+function _(e) {
+	let t = { "aria-hidden": !0 };
+	switch (e) {
+		case "warning": return /* @__PURE__ */ d(c, { ...t });
+		case "error": return /* @__PURE__ */ d(s, { ...t });
+		default: return /* @__PURE__ */ d(l, { ...t });
+	}
 }
-const j = l(
-  ({
-    className: r,
-    variant: t = "default",
-    alertStyle: e = "card",
-    visible: o,
-    defaultVisible: n = !0,
-    onClose: d,
-    icon: c,
-    children: f,
-    ...m
-  }, w) => {
-    const [p, x] = _({
-      defaultProp: n,
-      prop: o,
-      onChange: d
-    }), u = t === "secondary" ? "info" : t ?? "default", A = C(() => ({ show: p, setShow: x, variant: u, alertStyle: e }), [p, x, u, e]);
-    if (!p)
-      return null;
-    const h = c !== void 0 ? c : T(u);
-    return /* @__PURE__ */ a(i.Provider, { value: A, children: /* @__PURE__ */ N(
-      "div",
-      {
-        ref: w,
-        "data-slot": "alert",
-        role: "alert",
-        className: s(
-          D({ variant: u, alertStyle: e }),
-          r
-        ),
-        ...m,
-        children: [
-          h && /* @__PURE__ */ a("span", { "data-slot": "alert-icon", className: B(), children: h }),
-          f,
-          d && /* @__PURE__ */ a(y, {})
-        ]
-      }
-    ) });
-  }
-);
-j.displayName = "Alert";
-const F = {
-  default: "text-foreground",
-  info: "text-foreground",
-  warning: "text-foreground",
-  error: "text-foreground"
-}, P = l(
-  ({ className: r, ...t }, e) => {
-    const { variant: o, alertStyle: n } = g(i);
-    return /* @__PURE__ */ a(
-      "div",
-      {
-        ref: e,
-        "data-slot": "alert-title",
-        className: s(
-          n === "strip" ? "text-sm font-medium leading-[18px] tracking-normal" : "col-start-2 text-base font-medium leading-5 tracking-tighter",
-          F[o],
-          r
-        ),
-        ...t
-      }
-    );
-  }
-);
-P.displayName = "AlertTitle";
-const L = {
-  default: "text-secondary-foreground",
-  info: "text-secondary-foreground",
-  warning: "text-secondary-foreground",
-  error: "text-secondary-foreground"
-}, M = l(
-  ({ className: r, ...t }, e) => {
-    const { variant: o, alertStyle: n } = g(i);
-    return /* @__PURE__ */ a(
-      "div",
-      {
-        ref: e,
-        "data-slot": "alert-description",
-        className: s(
-          n === "strip" ? "flex-1 min-w-0 pr-4 text-sm font-normal leading-[18px] tracking-tight" : "col-start-2 text-sm font-normal leading-[18px] tracking-tight",
-          L[o],
-          r
-        ),
-        ...t
-      }
-    );
-  }
-);
-M.displayName = "AlertDescription";
-const R = l(
-  ({ className: r, ...t }, e) => {
-    const { alertStyle: o } = g(i);
-    return /* @__PURE__ */ a(
-      "div",
-      {
-        ref: e,
-        "data-slot": "alert-actions",
-        className: s(
-          o === "strip" ? "ml-auto flex shrink-0 items-center gap-3" : "col-start-2 flex flex-wrap items-center gap-3 pt-2",
-          r
-        ),
-        ...t
-      }
-    );
-  }
-);
-R.displayName = "AlertActions";
-const X = {
-  default: "gap-2 rounded-md",
-  ghost: "h-auto p-0 hover:bg-transparent"
-}, q = l(({ className: r, variant: t = "default", ...e }, o) => /* @__PURE__ */ a(
-  b,
-  {
-    ref: o,
-    "data-slot": "alert-button",
-    variant: t === "ghost" ? "ghost" : void 0,
-    size: "sm",
-    className: s(X[t], r),
-    ...e
-  }
-));
-q.displayName = "AlertButton";
-const y = l(
-  ({ className: r, onClick: t, ...e }, o) => {
-    const { setShow: n, alertStyle: d } = g(i), c = e["aria-label"] ?? "Close alert", f = (m) => {
-      n(!1), t?.(m);
-    };
-    return /* @__PURE__ */ a(
-      b,
-      {
-        ref: o,
-        "data-slot": "alert-close",
-        variant: "ghost",
-        size: "sm",
-        className: s(
-          "shrink-0 size-7 rounded-md p-0 text-secondary-foreground hover:bg-transparent hover:text-foreground",
-          d === "card" && "absolute right-2 top-2",
-          r
-        ),
-        "aria-label": c,
-        onClick: f,
-        ...e,
-        children: /* @__PURE__ */ a(S, { "aria-hidden": "true", className: "size-4" })
-      }
-    );
-  }
-);
-y.displayName = "AlertClose";
-export {
-  j as Alert,
-  R as AlertActions,
-  q as AlertButton,
-  y as AlertClose,
-  M as AlertDescription,
-  P as AlertTitle
-};
+var v = i(({ className: t, variant: r = "default", alertStyle: i = "card", visible: a, defaultVisible: s = !0, onClose: c, icon: l, children: u, ...p }, v) => {
+	let [y, b] = n({
+		defaultProp: s,
+		prop: a,
+		onChange: c
+	}), x = r === "secondary" ? "info" : r ?? "default", S = o(() => ({
+		show: y,
+		setShow: b,
+		variant: x,
+		alertStyle: i
+	}), [
+		y,
+		b,
+		x,
+		i
+	]);
+	if (!y) return null;
+	let C = l === void 0 ? _(x) : l;
+	return /* @__PURE__ */ d(m.Provider, {
+		value: S,
+		children: /* @__PURE__ */ f("div", {
+			ref: v,
+			"data-slot": "alert",
+			role: "alert",
+			className: e(g({
+				variant: x,
+				alertStyle: i
+			}), t),
+			...p,
+			children: [
+				C && /* @__PURE__ */ d("span", {
+					"data-slot": "alert-icon",
+					className: h(),
+					children: C
+				}),
+				u,
+				c && /* @__PURE__ */ d(E, {})
+			]
+		})
+	});
+});
+v.displayName = "Alert";
+var y = {
+	default: "text-foreground",
+	info: "text-foreground",
+	warning: "text-foreground",
+	error: "text-foreground"
+}, b = i(({ className: t, ...n }, r) => {
+	let { variant: i, alertStyle: o } = a(m);
+	return /* @__PURE__ */ d("div", {
+		ref: r,
+		"data-slot": "alert-title",
+		className: e(o === "strip" ? "text-sm font-medium leading-[18px] tracking-normal" : "col-start-2 text-base font-medium leading-5 tracking-tighter", y[i], t),
+		...n
+	});
+});
+b.displayName = "AlertTitle";
+var x = {
+	default: "text-secondary-foreground",
+	info: "text-secondary-foreground",
+	warning: "text-secondary-foreground",
+	error: "text-secondary-foreground"
+}, S = i(({ className: t, ...n }, r) => {
+	let { variant: i, alertStyle: o } = a(m);
+	return /* @__PURE__ */ d("div", {
+		ref: r,
+		"data-slot": "alert-description",
+		className: e(o === "strip" ? "flex-1 min-w-0 pr-4 text-sm font-normal leading-[18px] tracking-tight" : "col-start-2 text-sm font-normal leading-[18px] tracking-tight", x[i], t),
+		...n
+	});
+});
+S.displayName = "AlertDescription";
+var C = i(({ className: t, ...n }, r) => {
+	let { alertStyle: i } = a(m);
+	return /* @__PURE__ */ d("div", {
+		ref: r,
+		"data-slot": "alert-actions",
+		className: e(i === "strip" ? "ml-auto flex shrink-0 items-center gap-3" : "col-start-2 flex flex-wrap items-center gap-3 pt-2", t),
+		...n
+	});
+});
+C.displayName = "AlertActions";
+var w = {
+	default: "gap-2 rounded-md",
+	ghost: "h-auto p-0 hover:bg-transparent"
+}, T = i(({ className: n, variant: r = "default", ...i }, a) => /* @__PURE__ */ d(t, {
+	ref: a,
+	"data-slot": "alert-button",
+	variant: r === "ghost" ? "ghost" : void 0,
+	size: "sm",
+	className: e(w[r], n),
+	...i
+}));
+T.displayName = "AlertButton";
+var E = i(({ className: n, onClick: r, ...i }, o) => {
+	let { setShow: s, alertStyle: c } = a(m), l = i["aria-label"] ?? "Close alert";
+	return /* @__PURE__ */ d(t, {
+		ref: o,
+		"data-slot": "alert-close",
+		variant: "ghost",
+		size: "sm",
+		className: e("shrink-0 size-7 rounded-md p-0 text-secondary-foreground hover:bg-transparent hover:text-foreground", c === "card" && "absolute right-2 top-2", n),
+		"aria-label": l,
+		onClick: (e) => {
+			s(!1), r?.(e);
+		},
+		...i,
+		children: /* @__PURE__ */ d(u, {
+			"aria-hidden": "true",
+			className: "size-4"
+		})
+	});
+});
+E.displayName = "AlertClose";
+//#endregion
+export { v as Alert, C as AlertActions, T as AlertButton, E as AlertClose, S as AlertDescription, b as AlertTitle };

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

@@ -1,91 +1,65 @@
-import { jsx as o, jsxs as i, Fragment as v } from "react/jsx-runtime";
+import { cn as e } from "../../../../lib/utils.js";
 import { forwardRef as t } from "react";
-import { Avatar as n } from "@base-ui/react/avatar";
-import { cva as g } from "class-variance-authority";
-import { cn as d } from "../../../../lib/utils.js";
-const u = g(
-  "group/avatar relative inline-flex text-base font-medium leading-5 shrink-0 overflow-hidden flex-col justify-center items-center box-border",
-  {
-    variants: {
-      variant: {
-        default: "bg-decorative-background-mountain text-decorative-foreground-mountain hover:bg-decorative-background-mountain-hover",
-        nordic: "bg-decorative-background-nordic text-decorative-foreground-nordic hover:bg-decorative-background-nordic-hover",
-        aurora: "bg-decorative-background-aurora text-decorative-foreground-aurora hover:bg-decorative-background-aurora-hover",
-        fjord: "bg-decorative-background-fjord text-decorative-foreground-fjord hover:bg-decorative-background-fjord-hover",
-        dusk: "bg-decorative-background-dusk text-decorative-foreground-dusk hover:bg-decorative-background-dusk-hover",
-        orange: "bg-decorative-background-orange text-decorative-foreground-orange hover:bg-decorative-background-orange-hover",
-        sky: "bg-decorative-background-sky text-decorative-foreground-sky hover:bg-decorative-background-sky-hover",
-        overflow: "bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover"
-      },
-      sizes: {
-        default: "size-9 rounded-lg text-sm [&_svg]:w-5 [&_svg]:h-5",
-        xsm: "size-7 rounded-md text-xs [&_svg]:w-4 [&_svg]:h-4",
-        xxsm: "size-5 rounded-sm text-2xs [&_svg]:w-3 [&_svg]:h-3"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      sizes: "default"
-    }
-  }
-), l = t(({ className: a, variant: e, sizes: r, ...c }, s) => /* @__PURE__ */ o(
-  n.Root,
-  {
-    ref: s,
-    "data-slot": "avatar",
-    className: d(u({ variant: e, sizes: r }), a),
-    ...c
-  }
-));
-l.displayName = "Avatar";
-const b = t(({ className: a, ...e }, r) => /* @__PURE__ */ i(v, { children: [
-  /* @__PURE__ */ o(
-    n.Image,
-    {
-      ref: r,
-      "data-slot": "avatar-image",
-      className: d(
-        "aspect-square size-full object-cover object-center",
-        a
-      ),
-      ...e
-    }
-  ),
-  /* @__PURE__ */ o(
-    "span",
-    {
-      "data-slot": "avatar-image-backdrop",
-      className: "absolute inset-0 bg-overlay-background opacity-0 transition-opacity group-hover/avatar:opacity-100 pointer-events-none",
-      "aria-hidden": "true"
-    }
-  )
-] }));
-b.displayName = "AvatarImage";
-const f = t(({ className: a, ...e }, r) => /* @__PURE__ */ o(
-  n.Fallback,
-  {
-    ref: r,
-    "data-slot": "avatar-fallback",
-    className: d(" flex size-full items-center justify-center", a),
-    ...e
-  }
-));
-f.displayName = "AvatarFallback";
-const m = t(
-  ({ className: a, ...e }, r) => /* @__PURE__ */ o(
-    "span",
-    {
-      ref: r,
-      "data-slot": "avatar-icon",
-      className: d("flex size-full items-center justify-center", a),
-      ...e
-    }
-  )
-);
-m.displayName = "AvatarIcon";
-export {
-  l as Avatar,
-  f as AvatarFallback,
-  m as AvatarIcon,
-  b as AvatarImage
-};
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { cva as a } from "class-variance-authority";
+import { Avatar as o } from "@base-ui/react/avatar";
+//#region libs/aura/src/components/ui/core/avatar/avatar.tsx
+var s = a("group/avatar relative inline-flex text-base font-medium leading-5 shrink-0 overflow-hidden flex-col justify-center items-center box-border", {
+	variants: {
+		variant: {
+			default: "bg-decorative-background-mountain text-decorative-foreground-mountain hover:bg-decorative-background-mountain-hover",
+			nordic: "bg-decorative-background-nordic text-decorative-foreground-nordic hover:bg-decorative-background-nordic-hover",
+			aurora: "bg-decorative-background-aurora text-decorative-foreground-aurora hover:bg-decorative-background-aurora-hover",
+			fjord: "bg-decorative-background-fjord text-decorative-foreground-fjord hover:bg-decorative-background-fjord-hover",
+			dusk: "bg-decorative-background-dusk text-decorative-foreground-dusk hover:bg-decorative-background-dusk-hover",
+			orange: "bg-decorative-background-orange text-decorative-foreground-orange hover:bg-decorative-background-orange-hover",
+			sky: "bg-decorative-background-sky text-decorative-foreground-sky hover:bg-decorative-background-sky-hover",
+			overflow: "bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover"
+		},
+		sizes: {
+			default: "size-9 rounded-lg text-sm [&_svg]:w-5 [&_svg]:h-5",
+			xsm: "size-7 rounded-md text-xs [&_svg]:w-4 [&_svg]:h-4",
+			xxsm: "size-5 rounded-sm text-2xs [&_svg]:w-3 [&_svg]:h-3"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		sizes: "default"
+	}
+}), c = t(({ className: t, variant: n, sizes: i, ...a }, c) => /* @__PURE__ */ r(o.Root, {
+	ref: c,
+	"data-slot": "avatar",
+	className: e(s({
+		variant: n,
+		sizes: i
+	}), t),
+	...a
+}));
+c.displayName = "Avatar";
+var l = t(({ className: t, ...a }, s) => /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(o.Image, {
+	ref: s,
+	"data-slot": "avatar-image",
+	className: e("aspect-square size-full object-cover object-center", t),
+	...a
+}), /* @__PURE__ */ r("span", {
+	"data-slot": "avatar-image-backdrop",
+	className: "absolute inset-0 bg-overlay-background opacity-0 transition-opacity group-hover/avatar:opacity-100 pointer-events-none",
+	"aria-hidden": "true"
+})] }));
+l.displayName = "AvatarImage";
+var u = t(({ className: t, ...n }, i) => /* @__PURE__ */ r(o.Fallback, {
+	ref: i,
+	"data-slot": "avatar-fallback",
+	className: e(" flex size-full items-center justify-center", t),
+	...n
+}));
+u.displayName = "AvatarFallback";
+var d = t(({ className: t, ...n }, i) => /* @__PURE__ */ r("span", {
+	ref: i,
+	"data-slot": "avatar-icon",
+	className: e("flex size-full items-center justify-center", t),
+	...n
+}));
+d.displayName = "AvatarIcon";
+//#endregion
+export { c as Avatar, u as AvatarFallback, d as AvatarIcon, l as AvatarImage };