@cognite/aura 0.1.4 → 0.1.6

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

@@ -0,0 +1,40 @@
+import { ComponentProps, ComponentType, HTMLAttributes } from 'react';
+import { IconProps } from '@tabler/icons-react';
+import { VariantProps } from 'class-variance-authority';
+import { Button } from '../button/button';
+declare const Banner: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | "warning" | "info" | null | undefined;
+    inset?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onClose?: () => void;
+} & import('react').RefAttributes<HTMLDivElement>>;
+type TablerIconComponent = ComponentType<IconProps>;
+declare const BannerIcon: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    icon: TablerIconComponent;
+} & import('react').RefAttributes<HTMLDivElement>>;
+type BannerTitleProps = HTMLAttributes<HTMLParagraphElement>;
+declare const BannerTitle: import('react').ForwardRefExoticComponent<BannerTitleProps & import('react').RefAttributes<HTMLParagraphElement>>;
+declare const BannerStatus: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<import('react').DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
+} & {
+    render?: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> | import('@base-ui/react').ComponentRenderFn<import('@base-ui/react').HTMLProps, {}> | undefined;
+} & VariantProps<(props?: ({
+    variant?: "default" | "secondary" | "gray" | "orange" | "nordic" | "aurora" | "fjord" | "dusk" | "sky" | "mountain" | "error" | "warning" | "success" | "inProgress" | "archived" | "closable" | null | undefined;
+    size?: "icon" | "default" | null | undefined;
+    outline?: boolean | null | undefined;
+    background?: boolean | null | undefined;
+    dot?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
+    urgent?: boolean;
+}, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+type BannerActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const BannerActions: import('react').ForwardRefExoticComponent<BannerActionsProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const BannerAction: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ButtonProps & VariantProps<(props?: ({
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+type BannerCloseProps = Omit<ComponentProps<typeof Button>, 'size'>;
+declare const BannerClose: import('react').ForwardRefExoticComponent<Omit<BannerCloseProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export { Banner, BannerIcon, BannerTitle, BannerStatus, BannerActions, BannerAction, BannerClose, };

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

@@ -0,0 +1,218 @@
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as k, forwardRef as l, useMemo as w, useContext as b, useState as B, useRef as N, useEffect as y, useCallback as C } from "react";
+import { cva as V } from "class-variance-authority";
+import { cn as u } from "../../../../lib/utils.js";
+import { Badge as S } from "../badge/badge.js";
+import { Button as A } from "../button/button.js";
+const R = (e) => {
+}, m = k({
+  show: !0,
+  setShow: R,
+  variant: "default"
+});
+function p(e) {
+  return typeof e == "function";
+}
+function j({
+  visible: e,
+  defaultVisible: t,
+  onClose: n
+}) {
+  const [r, a] = B(t), i = e !== void 0, g = i ? e : r, d = N(n);
+  y(() => {
+    d.current = n;
+  }, [n]);
+  const x = C(
+    (o) => {
+      if (i) {
+        (p(o) ? o(e) : o) || d.current?.();
+        return;
+      }
+      a((c) => {
+        const f = p(o) ? o(c) : o;
+        return f || d.current?.(), f;
+      });
+    },
+    [i, e]
+  );
+  return [g, x];
+}
+const I = V(
+  "flex w-full h-11 flex-col items-start justify-center px-3 py-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-neutral-background text-foreground-fixed-dark",
+        info: "bg-info-background text-foreground-fixed-dark",
+        warning: "bg-warning-background text-foreground-fixed-dark",
+        destructive: "bg-destructive-background text-foreground-fixed-dark"
+      },
+      inset: {
+        true: "rounded-lg",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      inset: !1
+    }
+  }
+), M = l(
+  ({
+    children: e,
+    visible: t,
+    defaultVisible: n = !0,
+    onClose: r,
+    className: a,
+    inset: i = !1,
+    variant: g = "default",
+    ...d
+  }, x) => {
+    const o = g ?? "default", [c, f] = j({
+      defaultVisible: n,
+      visible: t,
+      onClose: r
+    }), h = w(
+      () => ({ show: c ?? !0, setShow: f, variant: o }),
+      [c, f, o]
+    );
+    return c ? /* @__PURE__ */ s(m.Provider, { value: h, children: /* @__PURE__ */ s(
+      "div",
+      {
+        ref: x,
+        "data-slot": "banner",
+        className: u(
+          I({ variant: o, inset: i }),
+          a
+        ),
+        ...d,
+        children: /* @__PURE__ */ s(
+          "div",
+          {
+            "data-slot": "banner-content",
+            className: "flex h-7 w-full items-center self-stretch gap-2",
+            children: e
+          }
+        )
+      }
+    ) }) : null;
+  }
+);
+M.displayName = "Banner";
+const O = {
+  default: "text-neutral-foreground-on-neutral",
+  info: "text-info-foreground-on-info",
+  warning: "text-warning-foreground-on-warning",
+  destructive: "text-destructive-foreground-on-critical"
+}, _ = l(
+  ({ icon: e, className: t, ...n }, r) => {
+    const { variant: a } = b(m);
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: r,
+        "data-slot": "banner-icon",
+        className: u(
+          "flex h-4 w-4 shrink-0 items-center justify-center",
+          O[a],
+          t
+        ),
+        ...n,
+        children: /* @__PURE__ */ s(e, { size: 16 })
+      }
+    );
+  }
+);
+_.displayName = "BannerIcon";
+const E = l(
+  ({ className: e, ...t }, n) => /* @__PURE__ */ s(
+    "p",
+    {
+      ref: n,
+      "data-slot": "banner-title",
+      className: u(
+        "flex min-w-0 flex-1 items-center text-base font-medium leading-5 tracking-tighter text-foreground-fixed-dark",
+        e
+      ),
+      ...t
+    }
+  )
+);
+E.displayName = "BannerTitle";
+const L = l(
+  ({ outline: e = !0, variant: t, className: n, ...r }, a) => {
+    const { variant: i } = b(m), d = t ?? {
+      default: "default",
+      info: "inProgress",
+      destructive: "error",
+      warning: "warning"
+    }[i];
+    return /* @__PURE__ */ s(
+      S,
+      {
+        ref: a,
+        "data-slot": "banner-status",
+        outline: e,
+        variant: d,
+        className: u("shrink-0", n),
+        ...r
+      }
+    );
+  }
+);
+L.displayName = "BannerStatus";
+const P = l(
+  ({ className: e, ...t }, n) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: n,
+      "data-slot": "banner-actions",
+      className: u("ml-auto flex h-7 shrink-0 items-center gap-2", e),
+      ...t
+    }
+  )
+);
+P.displayName = "BannerActions";
+const v = l(
+  ({ variant: e = "ghost", size: t = "sm", className: n, ...r }, a) => /* @__PURE__ */ s(
+    A,
+    {
+      ref: a,
+      "data-slot": "banner-action",
+      className: u(
+        "h-7 min-w-16 shrink-0 rounded px-2 text-sm font-medium leading-4.5 text-foreground-fixed-dark hover:bg-transparent dark:hover:bg-transparent hover:text-foreground-secondary-fixed-dark disabled:bg-transparent dark:disabled:bg-transparent disabled:text-disabled-foreground",
+        n
+      ),
+      size: t,
+      variant: e,
+      ...r
+    }
+  )
+);
+v.displayName = "BannerAction";
+const T = l(
+  ({ onClick: e, ...t }, n) => {
+    const { setShow: r } = b(m);
+    return /* @__PURE__ */ s(
+      v,
+      {
+        ref: n,
+        "data-slot": "banner-close",
+        onClick: (i) => {
+          r(!1), e?.(i);
+        },
+        ...t
+      }
+    );
+  }
+);
+T.displayName = "BannerClose";
+export {
+  M as Banner,
+  v as BannerAction,
+  P as BannerActions,
+  T as BannerClose,
+  _ as BannerIcon,
+  L as BannerStatus,
+  E as BannerTitle
+};

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

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

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

@@ -0,0 +1,9 @@
+const n = {
+  name: "Banner",
+  status: "in-progress-code-review",
+  description: "A configurable banner for important inline messages with variant styling, optional status badge, and action controls.",
+  llmUsage: "Use `<Banner>` with `<BannerIcon>`, `<BannerTitle>`, optional `<BannerStatus>`, and `<BannerActions>` containing `<BannerAction>` or `<BannerClose>`."
+};
+export {
+  n as BannerMetadata
+};

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

@@ -1,8 +1,8 @@
 import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants>;
 declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;

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

@@ -1,23 +1,22 @@
 import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { Button as c } from "@base-ui/react/button";
-import { cva as u } from "class-variance-authority";
-import { focusRing as g, focusRingDestructive as h, cn as b } from "../../../../lib/utils.js";
-const p = u(
-  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-transparent text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 ${g} aria-invalid:focus-visible:shadow-focus-ring-destructive`,
+import { forwardRef as c } from "react";
+import { Button as u } from "@base-ui/react/button";
+import { cva as g } from "class-variance-authority";
+import { focusRing as b, focusRingDestructive as v, cn as l } from "../../../../lib/utils.js";
+const p = g(
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm leading-4.5 tracking-normal font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 ${b} aria-invalid:focus-visible:shadow-focus-ring-destructive`,
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary-hover dark:hover:bg-primary-hover",
-        destructive: `bg-destructive text-destructive-foreground hover:bg-destructive-hover dark:hover:bg-destructive-hover ${h} dark:bg-destructive/60`,
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover dark:hover:bg-secondary-hover",
-        outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:border-border",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-foreground-link underline-offset-4 hover:underline"
+        default: "bg-primary-background text-foreground-on-primary hover:bg-primary-background-hover",
+        secondary: "bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover",
+        outline: "border border-border-emphasized bg-background text-foreground hover:bg-accent-background disabled:border-transparent disabled:bg-disabled-background",
+        ghost: "hover:bg-accent-background",
+        destructive: `bg-destructive-background text-destructive-foreground-on-critical hover:bg-destructive-background-hover ${v}`
       },
       size: {
-        default: "h-9 px-3 py-2 has-[>svg]:px-3",
-        sm: "h-7 rounded-sm gap-1.5 px-2 has-[>svg]:px-2",
+        default: "h-9 px-3 has-[>svg]:px-3",
+        sm: "h-7 rounded-md gap-1.5 px-2 has-[>svg]:px-2",
         lg: "h-10 px-4 has-[>svg]:px-4",
         icon: "size-9",
         "icon-sm": "size-7",
@@ -29,17 +28,17 @@ const p = u(
       size: "default"
     }
   }
-), f = v(
-  ({ className: r, variant: t, size: o, children: n, render: e, nativeButton: a, ...s }, i) => /* @__PURE__ */ d(
-    c,
+), f = c(
+  ({ className: r, variant: o, size: t, children: a, render: e, nativeButton: n, ...s }, i) => /* @__PURE__ */ d(
+    u,
     {
       ref: i,
       "data-slot": "button",
       render: e,
-      nativeButton: a ?? (e ? !1 : void 0),
-      className: b(p({ variant: t, size: o, className: r })),
+      nativeButton: n ?? (e ? !1 : void 0),
+      className: l(p({ variant: o, size: t, className: r })),
       ...s,
-      children: n
+      children: a
     }
   )
 );

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

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
-import { mergeProps as i } from "@base-ui/react/merge-props";
-import { useRender as s } from "@base-ui/react/use-render";
+import { mergeProps as s } from "@base-ui/react/merge-props";
+import { useRender as i } from "@base-ui/react/use-render";
 import { cva as l } from "class-variance-authority";
 import { cn as e } from "../../../../lib/utils.js";
 import { Separator as d } from "../separator/separator.js";
@@ -18,7 +18,7 @@ const u = l(
     }
   }
 );
-function v({
+function b({
   className: o,
   orientation: t,
   ...r
@@ -34,18 +34,18 @@ function v({
     }
   );
 }
-function b({
+function v({
   className: o,
   render: t,
   children: r,
   ...n
 }) {
-  return s({
+  return i({
     defaultTagName: "div",
-    props: i(
+    props: s(
       {
         className: e(
-          "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          "bg-muted-background flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
           o
         )
       },
@@ -68,7 +68,7 @@ function x({
       "data-slot": "button-group-separator",
       orientation: t,
       className: e(
-        "bg-input relative m-0 self-stretch data-[orientation=vertical]:h-auto",
+        "bg-muted-background relative m-0 self-stretch data-[orientation=vertical]:h-auto",
         o
       ),
       ...r
@@ -76,8 +76,8 @@ function x({
   );
 }
 export {
-  v as ButtonGroup,
+  b as ButtonGroup,
   x as ButtonGroupSeparator,
-  b as ButtonGroupText,
+  v as ButtonGroupText,
   u as buttonGroupVariants
 };

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

@@ -11,7 +11,7 @@ const u = e(
       ref: t,
       "data-slot": "card",
       className: o(
-        "bg-card text-card-foreground flex flex-col rounded-lg",
+        "bg-card-background text-foreground flex flex-col rounded-lg",
         a
       ),
       ...r

package/dist/components/ui/core/code-block/code-block.d.ts

@@ -15,7 +15,14 @@ type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
 };
 declare const CodeBlockCopyButton: import('react').ForwardRefExoticComponent<Omit<CodeBlockCopyButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
 declare const CodeBlockCollapseButton: import('react').ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').ButtonProps & import('class-variance-authority').VariantProps<(props?: ({
-    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string>, "ref"> & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export { CodeBlock, CodeBlockCollapseButton, CodeBlockCopyButton };
+type CodeBlockDownloadButtonProps = ComponentProps<typeof Button> & {
+    fileName?: string;
+    mimeType?: string;
+    onDownload?: () => void;
+    onError?: (error: Error) => void;
+};
+declare const CodeBlockDownloadButton: import('react').ForwardRefExoticComponent<Omit<CodeBlockDownloadButtonProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export { CodeBlock, CodeBlockCollapseButton, CodeBlockCopyButton, CodeBlockDownloadButton, };