@cognite/aura 0.2.0 → 0.3.0

package/dist/components/ui/core/pagination/pagination-teleport.js

@@ -0,0 +1,108 @@
+import { jsx as P } from "react/jsx-runtime";
+import { forwardRef as T, useRef as v, useLayoutEffect as k, useState as x } from "react";
+import { cva as N } from "class-variance-authority";
+import { cn as S } from "../../../../lib/utils.js";
+import { Input as V } from "../input/input.js";
+import { usePaginationSize as I } from "./pagination-size-context.js";
+import { getPaginationTeleportWidth as R } from "./pagination-teleport.utils.js";
+const C = N(
+  [
+    "tabular-nums text-center font-normal",
+    "bg-background text-secondary-foreground border-border-emphasized",
+    "[&:not(:placeholder-shown):not(:focus)]:bg-background [&:not(:placeholder-shown)]:text-secondary-foreground",
+    "hover:bg-accent-background [&:not(:placeholder-shown):not(:focus):hover]:bg-accent-background hover:border-border-emphasized",
+    "focus-visible:bg-background focus-visible:text-secondary-foreground focus-visible:border-border-emphasized focus-visible:shadow-focus-ring"
+  ],
+  {
+    variants: {
+      size: {
+        default: "h-9 rounded-lg px-3 py-0 text-base leading-5 tracking-tightest",
+        small: "h-7 rounded-md px-2 py-0 text-sm leading-4.5 tracking-tight"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), W = {
+  small: {
+    minWidthPx: 43,
+    paddingPx: 16
+  },
+  default: {
+    minWidthPx: 55,
+    paddingPx: 24
+  }
+};
+function B({
+  currentPage: o,
+  totalPages: c,
+  onPageChange: i
+}) {
+  const s = Math.max(1, c), [d, r] = x(""), [u, t] = x(!1), n = v(!1);
+  return {
+    displayValue: u ? d : `${o}/${s}`,
+    isEditing: u,
+    onChange: (e) => {
+      const a = e.target.value;
+      (a === "" || /^\d+$/.test(a)) && r(a);
+    },
+    onFocus: () => {
+      n.current = !1, t(!0), r(o.toString());
+    },
+    onBlur: () => {
+      if (t(!1), n.current) {
+        n.current = !1;
+        return;
+      }
+      const e = Number.parseInt(d, 10);
+      !Number.isNaN(e) && e >= 1 && e <= s && i(e);
+    },
+    onKeyDown: (e) => {
+      e.key === "Enter" ? e.currentTarget.blur() : e.key === "Escape" && (n.current = !0, r(o.toString()), e.currentTarget.blur());
+    }
+  };
+}
+const D = T(
+  ({ className: o, currentPage: c, totalPages: i, onPageChange: s, size: d, style: r, ...u }, t) => {
+    const n = I(), l = d ?? n, { displayValue: h, isEditing: g, onChange: m, onFocus: b, onBlur: e, onKeyDown: a } = B({
+      currentPage: c,
+      totalPages: i,
+      onPageChange: s
+    }), f = v(null), w = (p) => {
+      f.current = p, typeof t == "function" ? t(p) : t && (t.current = p);
+    };
+    k(() => {
+      g && f.current && f.current.select();
+    }, [g]);
+    const y = W[l], z = R(
+      i,
+      y.minWidthPx,
+      y.paddingPx
+    ), E = S(
+      C({ size: l }),
+      o
+    );
+    return /* @__PURE__ */ P(
+      V,
+      {
+        ref: w,
+        type: "text",
+        inputMode: "numeric",
+        value: h,
+        onChange: m,
+        onFocus: b,
+        onBlur: e,
+        onKeyDown: a,
+        "data-slot": "pagination-teleport",
+        className: E,
+        style: { width: z, ...r },
+        ...u
+      }
+    );
+  }
+);
+D.displayName = "PaginationTeleport";
+export {
+  D as PaginationTeleport
+};

package/dist/components/ui/core/pagination/pagination-teleport.utils.d.ts

@@ -0,0 +1 @@
+export declare function getPaginationTeleportWidth(totalPages: number, minWidthPx: number, paddingPx: number): string;

package/dist/components/ui/core/pagination/pagination-teleport.utils.js

@@ -0,0 +1,7 @@
+function c(a, e, n) {
+  const t = Math.max(1, a), o = `${t}/${t}`.length;
+  return `max(${e}px, calc(${o}ch + ${n}px))`;
+}
+export {
+  c as getPaginationTeleportWidth
+};

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

@@ -0,0 +1,41 @@
+import { ForwardRefExoticComponent, RefAttributes, ComponentProps } from 'react';
+import { SelectTriggerProps } from '@base-ui/react';
+import { PaginationSize } from './pagination-size-context';
+import { PaginationTeleport } from './pagination-teleport';
+declare const Pagination: ForwardRefExoticComponent<Omit<ComponentProps<'nav'> & {
+    size?: PaginationSize;
+}, 'ref'> & RefAttributes<HTMLElement>>;
+declare const PaginationContent: ForwardRefExoticComponent<Omit<ComponentProps<'ul'> & {
+    size?: PaginationSize;
+}, 'ref'> & RefAttributes<HTMLUListElement>>;
+declare const PaginationItem: ForwardRefExoticComponent<ComponentProps<'li'> & RefAttributes<HTMLLIElement>>;
+declare const PaginationStatus: ForwardRefExoticComponent<ComponentProps<'output'> & RefAttributes<HTMLOutputElement>>;
+declare const PaginationSelectTrigger: ForwardRefExoticComponent<Omit<SelectTriggerProps & {
+    size?: 'sm' | 'default';
+    errorMessage?: string;
+}, 'ref'> & RefAttributes<HTMLButtonElement>>;
+type PaginationLinkProps = {
+    isActive?: boolean;
+    isDisabled?: boolean;
+    size?: PaginationSize;
+} & ComponentProps<'a'>;
+declare const PaginationLink: ForwardRefExoticComponent<Omit<PaginationLinkProps, 'ref'> & RefAttributes<HTMLAnchorElement>>;
+declare const PaginationFirst: ForwardRefExoticComponent<Omit<Omit<PaginationLinkProps, 'isActive'> & {
+    label?: string;
+}, 'ref'> & RefAttributes<HTMLAnchorElement>>;
+declare const PaginationPrevious: ForwardRefExoticComponent<Omit<Omit<PaginationLinkProps, 'isActive'> & {
+    label?: string;
+}, 'ref'> & RefAttributes<HTMLAnchorElement>>;
+declare const PaginationNext: ForwardRefExoticComponent<Omit<Omit<PaginationLinkProps, 'isActive'> & {
+    label?: string;
+}, 'ref'> & RefAttributes<HTMLAnchorElement>>;
+declare const PaginationLast: ForwardRefExoticComponent<Omit<Omit<PaginationLinkProps, 'isActive'> & {
+    label?: string;
+}, 'ref'> & RefAttributes<HTMLAnchorElement>>;
+declare const PaginationEllipsis: ForwardRefExoticComponent<Omit<ComponentProps<'span'> & {
+    size?: PaginationSize;
+    label?: string;
+}, 'ref'> & RefAttributes<HTMLSpanElement>>;
+declare const PaginationResultsPerPage: ForwardRefExoticComponent<ComponentProps<'li'> & RefAttributes<HTMLLIElement>>;
+declare const PaginationResultsPerPageLabel: ForwardRefExoticComponent<ComponentProps<'span'> & RefAttributes<HTMLSpanElement>>;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, PaginationResultsPerPage, PaginationResultsPerPageLabel, PaginationSelectTrigger, PaginationStatus, PaginationTeleport, };

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

@@ -0,0 +1,335 @@
+import { jsx as i, jsxs as L } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { IconDots as I, IconChevronsLeft as w, IconChevronsRight as C, IconChevronRight as T, IconChevronLeft as B } from "@tabler/icons-react";
+import { cva as x } from "class-variance-authority";
+import { cn as l } from "../../../../lib/utils.js";
+import { Button as z } from "../button/button.js";
+import { SelectTrigger as _ } from "../select/select.js";
+import { PaginationSizeContext as k, usePaginationSize as g } from "./pagination-size-context.js";
+const y = x(
+  "text-base font-normal leading-5 tracking-tightest text-secondary-foreground hover:bg-active-muted-background-hover hover:text-active-foreground focus-visible:bg-active-muted-background focus-visible:text-active-foreground focus-visible:shadow-focus-ring",
+  {
+    variants: {
+      size: {
+        default: "",
+        small: "text-sm leading-4.5 tracking-tight"
+      },
+      active: {
+        true: "bg-active-muted-background text-active-foreground",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      active: !1
+    }
+  }
+), R = x(
+  "flex items-center justify-center text-secondary-foreground",
+  {
+    variants: {
+      size: {
+        default: "h-9 w-9",
+        small: "h-7 w-7"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), W = x(
+  [
+    "w-auto whitespace-nowrap min-h-0 py-1.75 text-sm leading-4.5 tracking-normal font-medium",
+    "bg-background text-foreground border-border-emphasized",
+    "hover:bg-accent-background hover:border-border-emphasized",
+    "focus-visible:bg-background focus-visible:text-foreground focus-visible:border-border-emphasized",
+    "dark:bg-background dark:hover:bg-accent-background"
+  ],
+  {
+    variants: {
+      size: {
+        default: "h-9 gap-2 rounded-lg px-3 min-w-19",
+        sm: "h-7 gap-1.5 rounded-md px-2 min-w-16"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), E = {
+  small: "max-w-7",
+  default: "max-w-9"
+}, V = {
+  small: "min-w-7",
+  default: "min-w-9"
+}, N = (a = "default") => {
+  const t = a === "small" ? "sm" : "default", e = a === "small" ? "rounded-md" : "rounded-lg", n = E[a], o = V[a];
+  return {
+    buttonSize: t,
+    radiusClass: e,
+    iconButtonWidth: n,
+    textLinkWidth: o
+  };
+}, j = r(({ className: a, size: t = "default", ...e }, n) => /* @__PURE__ */ i(k.Provider, { value: t, children: /* @__PURE__ */ i(
+  "nav",
+  {
+    ref: n,
+    "aria-label": "pagination",
+    "data-slot": "pagination",
+    className: l("mx-auto flex w-full justify-center gap-2", a),
+    ...e
+  }
+) }));
+j.displayName = "Pagination";
+const G = r(({ className: a, size: t, ...e }, n) => {
+  const o = g(), s = t ?? o;
+  return /* @__PURE__ */ i(k.Provider, { value: s, children: /* @__PURE__ */ i(
+    "ul",
+    {
+      ref: n,
+      "data-slot": "pagination-content",
+      "data-size": s,
+      className: l("flex flex-row items-center gap-1", a),
+      ...e
+    }
+  ) });
+});
+G.displayName = "PaginationContent";
+const F = r((a, t) => /* @__PURE__ */ i("li", { ref: t, "data-slot": "pagination-item", ...a }));
+F.displayName = "PaginationItem";
+const H = r(
+  ({ className: a, ...t }, e) => /* @__PURE__ */ i(
+    "output",
+    {
+      ref: e,
+      "data-slot": "pagination-status",
+      className: l(
+        "flex items-center text-sm leading-4.5 tracking-tight font-normal text-muted-foreground",
+        a
+      ),
+      ...t
+    }
+  )
+);
+H.displayName = "PaginationStatus";
+const O = r(({ className: a, size: t, style: e, ...n }, o) => {
+  const d = g() === "small" && t === void 0, c = t ?? (d ? "sm" : "default");
+  return /* @__PURE__ */ i(
+    _,
+    {
+      ref: o,
+      size: c,
+      "data-slot": "pagination-select-trigger",
+      style: e,
+      className: l(
+        W({ size: c }),
+        a
+      ),
+      ...n
+    }
+  );
+});
+O.displayName = "PaginationSelectTrigger";
+const Y = r(
+  ({ children: a, className: t, isActive: e, isDisabled: n, onClick: o, size: s, ...d }, c) => {
+    const v = g(), m = s ?? v, { buttonSize: p, radiusClass: h, textLinkWidth: P } = N(m), b = (f) => {
+      if (n) {
+        f.preventDefault();
+        return;
+      }
+      o?.(f);
+    };
+    return /* @__PURE__ */ i(
+      z,
+      {
+        variant: "ghost",
+        size: p,
+        "data-slot": "pagination-link",
+        "data-active": e,
+        className: l(
+          h,
+          P,
+          y({ size: m, active: e }),
+          n && "pointer-events-none opacity-50",
+          t
+        ),
+        render: /* @__PURE__ */ i(
+          "a",
+          {
+            ref: c,
+            "aria-current": e ? "page" : void 0,
+            "aria-disabled": n || void 0,
+            onClick: b,
+            tabIndex: n ? -1 : void 0,
+            ...d,
+            children: a
+          }
+        )
+      }
+    );
+  }
+);
+Y.displayName = "PaginationLink";
+const u = r(
+  ({
+    ariaLabel: a,
+    className: t,
+    dataSlot: e,
+    icon: n,
+    isDisabled: o,
+    onClick: s,
+    size: d,
+    ...c
+  }, v) => {
+    const m = g(), p = d ?? m, { buttonSize: h, radiusClass: P, iconButtonWidth: b } = N(p), f = (S) => {
+      if (o) {
+        S.preventDefault();
+        return;
+      }
+      s?.(S);
+    };
+    return /* @__PURE__ */ i(
+      z,
+      {
+        variant: "ghost",
+        size: h,
+        "data-slot": e,
+        className: l(
+          P,
+          b,
+          y({ size: p, active: !1 }),
+          o && "pointer-events-none opacity-50",
+          t
+        ),
+        render: /* @__PURE__ */ i(
+          "a",
+          {
+            ref: v,
+            "aria-label": a,
+            "aria-disabled": o || void 0,
+            onClick: f,
+            tabIndex: o ? -1 : void 0,
+            ...c,
+            children: n
+          }
+        )
+      }
+    );
+  }
+);
+u.displayName = "PaginationIconLink";
+const Z = r(({ className: a, size: t, label: e = "Go to first page", ...n }, o) => /* @__PURE__ */ i(
+  u,
+  {
+    ref: o,
+    dataSlot: "pagination-first",
+    ariaLabel: e,
+    icon: /* @__PURE__ */ i(w, {}),
+    className: a,
+    size: t,
+    ...n
+  }
+));
+Z.displayName = "PaginationFirst";
+const K = r(({ className: a, size: t, label: e = "Go to previous page", ...n }, o) => /* @__PURE__ */ i(
+  u,
+  {
+    ref: o,
+    dataSlot: "pagination-previous",
+    ariaLabel: e,
+    icon: /* @__PURE__ */ i(B, {}),
+    className: a,
+    size: t,
+    ...n
+  }
+));
+K.displayName = "PaginationPrevious";
+const M = r(({ className: a, size: t, label: e = "Go to next page", ...n }, o) => /* @__PURE__ */ i(
+  u,
+  {
+    ref: o,
+    dataSlot: "pagination-next",
+    ariaLabel: e,
+    icon: /* @__PURE__ */ i(T, {}),
+    className: a,
+    size: t,
+    ...n
+  }
+));
+M.displayName = "PaginationNext";
+const U = r(({ className: a, size: t, label: e = "Go to last page", ...n }, o) => /* @__PURE__ */ i(
+  u,
+  {
+    ref: o,
+    dataSlot: "pagination-last",
+    ariaLabel: e,
+    icon: /* @__PURE__ */ i(C, {}),
+    className: a,
+    size: t,
+    ...n
+  }
+));
+U.displayName = "PaginationLast";
+const X = r(({ className: a, size: t, label: e = "More pages", ...n }, o) => {
+  const s = g(), d = t ?? s, { iconButtonWidth: c } = N(d);
+  return /* @__PURE__ */ L(
+    "span",
+    {
+      ref: o,
+      "data-slot": "pagination-ellipsis",
+      className: l(
+        c,
+        R({ size: d }),
+        a
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ i(I, { "aria-hidden": "true", className: "h-4 w-4" }),
+        /* @__PURE__ */ i("span", { className: "sr-only", children: e })
+      ]
+    }
+  );
+});
+X.displayName = "PaginationEllipsis";
+const q = r(
+  ({ className: a, ...t }, e) => /* @__PURE__ */ i(
+    "li",
+    {
+      ref: e,
+      "data-slot": "pagination-results-per-page",
+      className: l("flex items-center gap-2 pl-3", a),
+      ...t
+    }
+  )
+);
+q.displayName = "PaginationResultsPerPage";
+const J = r(
+  ({ className: a, ...t }, e) => /* @__PURE__ */ i(
+    "span",
+    {
+      ref: e,
+      "data-slot": "pagination-results-per-page-label",
+      className: l(
+        "text-sm leading-4.5 tracking-tight font-normal text-muted-foreground",
+        a
+      ),
+      ...t
+    }
+  )
+);
+J.displayName = "PaginationResultsPerPageLabel";
+export {
+  j as Pagination,
+  G as PaginationContent,
+  X as PaginationEllipsis,
+  Z as PaginationFirst,
+  F as PaginationItem,
+  U as PaginationLast,
+  Y as PaginationLink,
+  M as PaginationNext,
+  K as PaginationPrevious,
+  q as PaginationResultsPerPage,
+  J as PaginationResultsPerPageLabel,
+  O as PaginationSelectTrigger,
+  H as PaginationStatus
+};

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

@@ -1,17 +1,13 @@
-import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
-declare function Popover(props: PopoverPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
-declare namespace Popover {
-    var displayName: string;
-}
-declare function PopoverTrigger({ children, ...props }: PopoverPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
-declare const PopoverHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const PopoverHeaderContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const PopoverTitle: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
-declare const PopoverDescription: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
-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?: "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>>;
+import { ForwardRefExoticComponent, RefAttributes, ComponentProps, ReactNode } from 'react';
+import { PopoverPopupProps, PopoverPositionerProps, Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { Button } from '../button/button';
+declare function Popover(props: PopoverPrimitive.Root.Props): ReactNode;
+declare function PopoverTrigger({ children, ...props }: PopoverPrimitive.Trigger.Props): ReactNode;
+declare const PopoverHeader: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const PopoverHeaderContent: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const PopoverTitle: ForwardRefExoticComponent<ComponentProps<'h3'> & RefAttributes<HTMLHeadingElement>>;
+declare const PopoverDescription: ForwardRefExoticComponent<ComponentProps<'p'> & RefAttributes<HTMLParagraphElement>>;
+declare const PopoverSlot: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const PopoverClose: ForwardRefExoticComponent<Omit<ComponentProps<typeof Button>, 'ref'> & RefAttributes<HTMLElement>>;
+declare const PopoverContent: ForwardRefExoticComponent<Omit<PopoverPopupProps & Pick<PopoverPositionerProps, 'align' | 'alignOffset' | 'side' | 'sideOffset'>, 'ref'> & RefAttributes<HTMLDivElement>>;
 export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverHeaderContent, PopoverSlot, PopoverTitle, PopoverTrigger, };