@cognite/aura 0.1.7 → 0.3.0

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

@@ -0,0 +1,200 @@
+import { jsx as a, jsxs as u, Fragment as c } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { mergeProps as m } from "@base-ui/react/merge-props";
+import { useRender as l } from "@base-ui/react/use-render";
+import { IconDots as i, IconSlash as p } from "@tabler/icons-react";
+import { cn as n } from "../../../../lib/utils.js";
+const b = o(
+  ({ ...e }, t) => /* @__PURE__ */ a(
+    "nav",
+    {
+      ref: t,
+      "aria-label": "breadcrumb",
+      "data-slot": "breadcrumb",
+      ...e
+    }
+  )
+);
+b.displayName = "Breadcrumb";
+const g = o(
+  ({ className: e, ...t }, r) => /* @__PURE__ */ a(
+    "ol",
+    {
+      ref: r,
+      "data-slot": "breadcrumb-list",
+      className: n(
+        "flex items-center text-sm tracking-tight flex-wrap wrap-break-word",
+        e
+      ),
+      ...t
+    }
+  )
+);
+g.displayName = "BreadcrumbList";
+const f = o(
+  ({ className: e, ...t }, r) => /* @__PURE__ */ a(
+    "li",
+    {
+      ref: r,
+      "data-slot": "breadcrumb-item",
+      className: n(
+        "inline-flex items-center text-muted-foreground text-sm tracking-tight",
+        "has-[button[data-popup-open]]:bg-accent-background has-[button[data-popup-open]]:text-foreground has-[button[data-popup-open]]:rounded-sm",
+        e
+      ),
+      ...t
+    }
+  )
+);
+f.displayName = "BreadcrumbItem";
+const x = o(
+  ({ className: e, render: t, children: r, ...s }, d) => l({
+    defaultTagName: "a",
+    ref: d,
+    props: m(
+      {
+        ...{
+          "data-slot": "breadcrumb-link"
+        },
+        className: n(
+          "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
+          "text-muted-foreground text-sm leading-[18px] tracking-tight font-normal",
+          "transition-colors hover:bg-accent-background hover:text-foreground",
+          "aria-[current=page]:font-medium aria-[current=page]:text-foreground",
+          e
+        )
+      },
+      { ...s, children: r }
+    ),
+    render: t,
+    state: {
+      slot: "breadcrumb-link"
+    }
+  })
+);
+x.displayName = "BreadcrumbLink";
+const h = o(
+  ({ className: e, ...t }, r) => /* @__PURE__ */ a(
+    "span",
+    {
+      ref: r,
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      tabIndex: -1,
+      className: n(
+        "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
+        "cursor-default hover:bg-transparent dark:hover:bg-transparent",
+        "text-sm leading-[18px] tracking-tight font-medium text-foreground",
+        e
+      ),
+      ...t
+    }
+  )
+);
+h.displayName = "BreadcrumbPage";
+const N = o(
+  ({ className: e, ...t }, r) => /* @__PURE__ */ a(
+    "button",
+    {
+      ref: r,
+      "data-slot": "breadcrumb-page-button",
+      type: "button",
+      "aria-current": "page",
+      className: n(
+        "inline-flex h-7 items-center justify-center gap-2 rounded-md px-[6px] py-1",
+        "text-sm leading-[18px] tracking-tight font-medium text-foreground",
+        "transition-colors hover:bg-accent-background",
+        e
+      ),
+      ...t
+    }
+  )
+);
+N.displayName = "BreadcrumbPageButton";
+const y = o(
+  ({ className: e, children: t, ...r }, s) => /* @__PURE__ */ a(
+    "button",
+    {
+      ref: s,
+      "data-slot": "breadcrumb-ellipsis-button",
+      type: "button",
+      className: n(
+        "flex size-7 items-center justify-center rounded-md",
+        "text-muted-foreground transition-colors hover:bg-accent-background hover:text-foreground",
+        "data-[popup-open]:bg-accent-background data-[popup-open]:text-foreground",
+        e
+      ),
+      ...r,
+      children: t ?? /* @__PURE__ */ u(c, { children: [
+        /* @__PURE__ */ a(i, { className: "size-3" }),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
+      ] })
+    }
+  )
+);
+y.displayName = "BreadcrumbEllipsisButton";
+const B = o(
+  ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a(
+    "li",
+    {
+      ref: s,
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: n(
+        "flex size-4 items-center justify-center [&>svg]:size-4",
+        t
+      ),
+      ...r,
+      children: e ?? /* @__PURE__ */ a(p, { className: "size-4 text-muted-foreground" })
+    }
+  )
+);
+B.displayName = "BreadcrumbSeparator";
+const k = o(
+  ({ children: e, className: t, ...r }, s) => {
+    const d = e != null;
+    return /* @__PURE__ */ a(
+      "li",
+      {
+        ref: s,
+        "data-slot": "breadcrumb-ellipsis",
+        role: d ? void 0 : "presentation",
+        "aria-hidden": d ? void 0 : !0,
+        className: n(
+          "inline-flex items-center",
+          "has-[button[data-popup-open]]:bg-accent-background has-[button[data-popup-open]]:text-foreground has-[button[data-popup-open]]:rounded-sm",
+          t
+        ),
+        ...r,
+        children: e ?? /* @__PURE__ */ u(
+          "span",
+          {
+            className: n(
+              "flex size-7 items-center justify-center rounded-md",
+              "cursor-default text-muted-foreground hover:bg-transparent dark:hover:bg-transparent"
+            ),
+            children: [
+              /* @__PURE__ */ a(i, { className: "size-3" }),
+              /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+k.displayName = "BreadcrumbEllipsis";
+export {
+  b as Breadcrumb,
+  k as BreadcrumbEllipsis,
+  y as BreadcrumbEllipsisButton,
+  f as BreadcrumbItem,
+  x as BreadcrumbLink,
+  g as BreadcrumbList,
+  h as BreadcrumbPage,
+  N as BreadcrumbPageButton,
+  B as BreadcrumbSeparator
+};

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

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

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

@@ -1,18 +1,21 @@
-import { jsx as d } from "react/jsx-runtime";
-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`,
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { Button as b } from "@base-ui/react/button";
+import { cva as c } from "class-variance-authority";
+import { cn as u, focusRing as f, focusRingDestructive as l } from "../../../../lib/utils.js";
+const v = c(
+  `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 ${f} aria-invalid:focus-visible:shadow-focus-ring-destructive`,
   {
     variants: {
       variant: {
         default: "bg-primary-background text-foreground-on-primary hover:bg-primary-background-hover",
+        defaultOnDark: "bg-primary-background-fixed-dark text-foreground-fixed-dark hover:bg-primary-background-fixed-dark-hover disabled:opacity-100 disabled:bg-disabled-background-fixed-dark disabled:text-disabled-foreground-fixed-dark",
         secondary: "bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover",
+        secondaryOnDark: "bg-secondary-background-fixed-dark text-foreground-fixed-light hover:bg-secondary-background-fixed-dark-hover disabled:opacity-100 disabled:bg-disabled-background-fixed-dark disabled:text-disabled-foreground-fixed-dark",
         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}`
+        ghostOnDark: "text-foreground-fixed-light hover:bg-secondary-background-fixed-dark disabled:opacity-100 disabled:text-disabled-foreground-fixed-dark",
+        destructive: `bg-destructive-background text-destructive-foreground-on-critical hover:bg-destructive-background-hover ${l}`
       },
       size: {
         default: "h-9 px-3 has-[>svg]:px-3",
@@ -28,22 +31,22 @@ const p = g(
       size: "default"
     }
   }
-), f = c(
-  ({ className: r, variant: o, size: t, children: a, render: e, nativeButton: n, ...s }, i) => /* @__PURE__ */ d(
-    u,
+), k = g(
+  ({ className: r, variant: d, size: a, children: o, render: e, nativeButton: t, ...i }, n) => /* @__PURE__ */ s(
+    b,
     {
-      ref: i,
+      ref: n,
       "data-slot": "button",
       render: e,
-      nativeButton: n ?? (e ? !1 : void 0),
-      className: l(p({ variant: o, size: t, className: r })),
-      ...s,
-      children: a
+      nativeButton: t ?? (e ? !1 : void 0),
+      className: u(v({ variant: d, size: a, className: r })),
+      ...i,
+      children: o
     }
   )
 );
-f.displayName = "Button";
+k.displayName = "Button";
 export {
-  f as Button,
-  p as buttonVariants
+  k as Button,
+  v as buttonVariants
 };

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

@@ -1,11 +1,12 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
+import { ClassProp } from 'class-variance-authority/types';
 import { Separator } from '../separator/separator';
 declare const buttonGroupVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function ButtonGroup({ className, orientation, ...props }: ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
-declare function ButtonGroupText({ className, render, children, ...props }: useRender.ComponentProps<'div'>): import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
-declare function ButtonGroupSeparator({ className, orientation, ...props }: ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+    orientation?: 'horizontal' | 'vertical' | null | undefined;
+} & ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>): ReactNode;
+declare function ButtonGroupText({ className, render, children, ...props }: useRender.ComponentProps<'div'>): ReactNode;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: ComponentProps<typeof Separator>): ReactNode;
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

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

@@ -1,17 +1,21 @@
-import { ReactNode } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, ComponentProps, ReactNode } from 'react';
+import { MenuRoot } from '@base-ui/react';
 type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-declare const Card: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardIcon: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardTitle: import('react').ForwardRefExoticComponent<Omit<import('react').ClassAttributes<HTMLHeadingElement> & import('react').HTMLAttributes<HTMLHeadingElement> & {
+declare const Card: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardHeaderStart: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardTitle: ForwardRefExoticComponent<Omit<ComponentProps<'h3'> & {
     as?: HeadingElement;
-}, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
-declare const CardDescription: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
-declare const CardHeaderRight: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardActions: import('react').ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuRoot.Props<unknown>, "children"> & {
+}, 'ref'> & RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: ForwardRefExoticComponent<ComponentProps<'p'> & RefAttributes<HTMLParagraphElement>>;
+declare const CardHeaderEnd: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardHeader: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardHeaderCenter: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardActions: ForwardRefExoticComponent<Omit<MenuRoot.Props<unknown>, 'children'> & {
     children?: ReactNode;
-    align?: "start" | "center" | "end";
-} & import('react').RefAttributes<HTMLElement>>;
-declare const CardContent: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-declare const CardFooter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export { Card, CardHeader, CardIcon, CardHeaderRight, CardFooter, CardTitle, CardActions, CardDescription, CardContent, };
+    align?: 'start' | 'center' | 'end';
+} & RefAttributes<HTMLElement>>;
+declare const CardContent: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardFooter: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardFooterStart: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+declare const CardFooterEnd: ForwardRefExoticComponent<ComponentProps<'div'> & RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardHeaderCenter, CardHeaderStart, CardHeaderEnd, CardFooter, CardFooterStart, CardFooterEnd, CardTitle, CardActions, CardDescription, CardContent, };

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

@@ -1,143 +1,187 @@
-import { jsx as d, jsxs as c } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import { IconDotsVertical as n } from "@tabler/icons-react";
-import { cn as o } from "../../../../lib/utils.js";
-import { Button as i } from "../button/button.js";
-import { DropdownMenu as l, DropdownMenuTrigger as m, DropdownMenuContent as p } from "../dropdown-menu/dropdown-menu.js";
-const u = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { IconDotsVertical as l } from "@tabler/icons-react";
+import { cn as s } from "../../../../lib/utils.js";
+import { Button as c } from "../button/button.js";
+import { DropdownMenu as i, DropdownMenuTrigger as m, DropdownMenuContent as f } from "../dropdown-menu/dropdown-menu.js";
+const p = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
+      ref: a,
       "data-slot": "card",
-      className: o(
-        "bg-card-background text-foreground flex flex-col rounded-lg",
-        a
+      className: s(
+        "bg-card-background text-foreground flex flex-col rounded-xl p-4 gap-4",
+        t
       ),
       ...r
     }
   )
 );
-u.displayName = "Card";
-const h = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+p.displayName = "Card";
+const u = d(
+  ({ className: t, children: r, ...a }, o) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
-      "data-slot": "card-header",
-      className: o(
-        "@container/card-header group/card-header grid auto-rows-min items-start gap-1.5 px-4 pt-4 [.border-b]:pb-6",
-        "grid-cols-[1fr]",
-        "has-data-[slot=card-icon]:grid-cols-[auto_1fr]",
-        "has-data-[slot=card-header-right]:grid-cols-[1fr_auto]",
-        "has-data-[slot=card-icon]:has-data-[slot=card-header-right]:grid-cols-[auto_1fr_auto]",
-        a
+      ref: o,
+      "data-slot": "card-header-start",
+      className: s(
+        "col-start-1 row-start-1 h-12 self-stretch pt-1.5",
+        t
       ),
-      ...r
+      ...a,
+      children: /* @__PURE__ */ e("div", { className: "flex items-start h-full", children: r })
     }
   )
 );
-h.displayName = "CardHeader";
-const f = e(
-  ({ className: a, children: r, ...t }, s) => /* @__PURE__ */ d(
-    "div",
-    {
-      ref: s,
-      "data-slot": "card-icon",
-      className: o("col-start-1 row-start-1 h-full", a),
-      ...t,
-      children: /* @__PURE__ */ d("div", { className: "flex items-center h-full", children: r })
-    }
-  )
-);
-f.displayName = "CardIcon";
-const g = e(({ className: a, as: r = "h3", ...t }, s) => /* @__PURE__ */ d(
+u.displayName = "CardHeaderStart";
+const C = d(({ className: t, as: r = "h3", ...a }, o) => /* @__PURE__ */ e(
   r,
   {
-    ref: s,
+    ref: o,
     "data-slot": "card-title",
-    className: o(
-      "tracking-tightest text-foreground font-medium text-lg row-start-1",
-      "group-has-data-[slot=card-icon]/card-header:col-start-2",
-      a
+    className: s(
+      "tracking-tightest text-foreground font-medium text-lg leading-6 line-clamp-2 overflow-hidden",
+      t
     ),
-    ...t
+    ...a
   }
 ));
-g.displayName = "CardTitle";
-const C = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+C.displayName = "CardTitle";
+const g = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
     "p",
     {
-      ref: t,
+      ref: a,
       "data-slot": "card-description",
-      className: o(
-        "text-muted-foreground text-sm row-start-2",
-        "group-has-data-[slot=card-icon]/card-header:col-start-2",
-        a
+      className: s(
+        "text-muted-foreground text-sm font-normal leading-5 tracking-tight line-clamp-2 overflow-hidden",
+        t
       ),
       ...r
     }
   )
 );
-C.displayName = "CardDescription";
-const N = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+g.displayName = "CardDescription";
+const x = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      "data-slot": "card-header-end",
+      className: s(
+        "col-start-3 row-start-1 self-start justify-self-end flex justify-end items-start gap-1",
+        t
+      ),
+      ...r
+    }
+  )
+);
+x.displayName = "CardHeaderEnd";
+const N = d(
+  ({ className: t, children: r, ...a }, o) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      "data-slot": "card-header",
+      className: s(
+        "group/card-header @container/card-header grid items-center gap-x-3 grid-cols-[auto_minmax(0,1fr)_auto]",
+        t
+      ),
+      ...a,
+      children: r
+    }
+  )
+);
+N.displayName = "CardHeader";
+const h = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
-      "data-slot": "card-header-right",
-      className: o(
-        "row-span-2 row-start-1 self-start justify-self-end",
-        a
+      ref: a,
+      "data-slot": "card-header-center",
+      className: s(
+        "col-start-1 row-start-1 min-w-0 flex flex-col justify-center",
+        "group-has-data-[slot=card-header-start]/card-header:col-start-2",
+        t
       ),
       ...r
     }
   )
 );
-N.displayName = "CardHeaderRight";
-const x = e(({ children: a, align: r = "end", ...t }, s) => /* @__PURE__ */ c(l, { ...t, children: [
-  /* @__PURE__ */ d(
+h.displayName = "CardHeaderCenter";
+const y = d(({ children: t, align: r = "end", ...a }, o) => /* @__PURE__ */ n(i, { ...a, children: [
+  /* @__PURE__ */ e(
     m,
     {
-      render: /* @__PURE__ */ d(i, { variant: "ghost", size: "icon-sm", ref: s, children: /* @__PURE__ */ d(n, {}) })
+      render: /* @__PURE__ */ e(c, { variant: "ghost", size: "icon-sm", ref: o, children: /* @__PURE__ */ e(l, {}) })
     }
   ),
-  /* @__PURE__ */ d(p, { align: r, children: a })
+  /* @__PURE__ */ e(f, { align: r, children: t })
 ] }));
-x.displayName = "CardActions";
-const w = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+y.displayName = "CardActions";
+const v = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
+      ref: a,
       "data-slot": "card-content",
-      className: o("p-4", a),
+      className: s(
+        "text-secondary-foreground flex flex-col items-start gap-4 self-stretch",
+        t
+      ),
       ...r
     }
   )
 );
-w.displayName = "CardContent";
-const y = e(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ d(
+v.displayName = "CardContent";
+const w = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
     "div",
     {
-      ref: t,
+      ref: a,
       "data-slot": "card-footer",
-      className: o("flex px-4 pb-4", a),
+      className: s("flex items-center gap-4 self-stretch", t),
+      ...r
+    }
+  )
+);
+w.displayName = "CardFooter";
+const H = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      "data-slot": "card-footer-start",
+      className: s("flex-1 flex items-start justify-start gap-2", t),
+      ...r
+    }
+  )
+);
+H.displayName = "CardFooterStart";
+const j = d(
+  ({ className: t, ...r }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      "data-slot": "card-footer-end",
+      className: s("flex items-center justify-end", t),
       ...r
     }
   )
 );
-y.displayName = "CardFooter";
+j.displayName = "CardFooterEnd";
 export {
-  u as Card,
-  x as CardActions,
-  w as CardContent,
-  C as CardDescription,
-  y as CardFooter,
-  h as CardHeader,
-  N as CardHeaderRight,
-  f as CardIcon,
-  g as CardTitle
+  p as Card,
+  y as CardActions,
+  v as CardContent,
+  g as CardDescription,
+  w as CardFooter,
+  j as CardFooterEnd,
+  H as CardFooterStart,
+  N as CardHeader,
+  h as CardHeaderCenter,
+  x as CardHeaderEnd,
+  u as CardHeaderStart,
+  C as CardTitle
 };