@vuer-ai/vuer-uikit 0.0.11 → 0.0.13

package/src/styles/theme.css

@@ -0,0 +1,80 @@
+@import "./variables.css";
+
+@custom-variant liquid (&:is(.liquiddark *, .liquidlight *));
+
+@utility liquid-bg {
+  background: linear-gradient(
+    147.1deg,
+    rgba(172, 172, 172, 0.1) 0%,
+    rgba(74, 74, 74, 0.1) 105.28%
+  ) !important;
+  backdrop-filter: blur(20px) !important;
+}
+
+@utility scrollbar-hide {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@theme inline {
+  --font-sans: Inter;
+  --font-number-input: "Fira Mono";
+
+  /* color */
+  --color-brand-primary: var(--brand-primary);
+  --color-brand-secondary: var(--brand-secondary);
+  --color-brand-tertiary: var(--brand-tertiary);
+  --color-text-highlight: var(--text-highlight);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-text-withbg: var(--text-withbg);
+  --color-bg-primary: var(--bg-primary);
+  --color-bg-secondary: var(--bg-secondary);
+  --color-bg-tertiary: var(--bg-tertiary);
+  --color-bg-quaternary: var(--bg-quaternary);
+  --color-bg-mask: var(--bg-mask);
+  --color-icon-highlight: var(--icon-highlight);
+  --color-icon-primary: var(--icon-primary);
+  --color-icon-secondary: var(--icon-secondary);
+  --color-icon-tertiary: var(--icon-tertiary);
+  --color-icon-withbg: var(--icon-withbg);
+  --color-danger-primary: var(--danger-primary);
+  --color-danger-secondary: var(--danger-secondary);
+  --color-danger-tertiary: var(--danger-tertiary);
+  --color-accent-warning: var(--accent-warning);
+  --color-accent-success: var(--accent-success);
+  --color-line-primary: var(--line-primary);
+  --color-line-secondary: var(--line-secondary);
+  --color-shadow-primary: var(--shadow-primary);
+  --color-shadow-secondary: var(--shadow-secondary);
+  /* radius */
+  --radius-uk-xs: var(--radius); /* 4px */
+  --radius-uk-sm: calc(var(--radius) + 2px); /* 6px */
+  --radius-uk-md: calc(var(--radius) + 4px); /* 8px */
+  --radius-uk-lg: calc(var(--radius) + 8px); /* 12px */
+  --radius-uk-xl: calc(var(--radius) + 12px); /* 16px */
+  /* spacing */
+  --spacing-xxs: calc(var(--spacing) - 2px); /* 2px */
+  --spacing-xs: var(--spacing); /* 4px */
+  --spacing-sm: calc(var(--spacing) + 2px); /* 6px */
+  --spacing-md: calc(var(--spacing) + 4px); /* 8px */
+  --spacing-lg: calc(var(--spacing) + 8px); /* 12px */
+  --spacing-xl: calc(var(--spacing) + 12px); /* 16px */
+  /* font-size */
+  --text-uk-xs: 11px;
+  --text-uk-sm: 12px;
+  --text-uk-md: 14px;
+  --text-uk-lg: 16px;
+  --text-uk-xl: 18px;
+  --text-uk-xxl: 20px;
+  /* line-height */
+  --leading-uk-xs: 14px;
+  --leading-uk-sm: 16px;
+  --leading-uk-md: 20px;
+  --leading-uk-lg: 24px;
+  --leading-uk-xl: 28px;
+  --leading-uk-xxl: 32px;
+}

package/src/styles/toast.css

@@ -0,0 +1,64 @@
+.vk-toast,
+[data-sonner-toast].vk-toast {
+  background: var(--color-bg-primary) !important;
+  border: none !important;
+  border-radius: var(--radius-uk-md) !important;
+  padding: var(--spacing-lg) !important;
+  box-shadow: 0px 8px 24px 0px var(--color-shadow-primary) !important;
+  padding-right: 60px !important;
+}
+
+.vk-toast [data-title] {
+  color: var(--color-text-primary) !important;
+  font-size: var(--text-uk-md) !important;
+  line-height: var(--leading-uk-md) !important;
+  font-weight: 500 !important;
+  display: -webkit-box;
+  line-clamp: 1;
+  box-orient: vertical;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vk-toast-description {
+  color: var(--color-text-secondary) !important;
+  font-size: var(--text-uk-sm) !important;
+  line-height: var(--leading-uk-sm) !important;
+  font-weight: 400 !important;
+  display: -webkit-box;
+  line-clamp: 3;
+  box-orient: vertical;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vk-toast button[data-button] {
+  background: transparent !important;
+  color: var(--color-text-primary) !important;
+  border: none !important;
+  font-size: var(--text-uk-sm) !important;
+  line-height: var(--leading-uk-sm) !important;
+  font-weight: 400 !important;
+  text-decoration: none !important;
+  cursor: pointer !important;
+  position: absolute !important;
+  border-radius: 0 !important;
+  right: 0 !important;
+  top: 0 !important;
+  height: 100% !important;
+  width: 60px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  text-overflow: ellipsis !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+}
+
+.vk-toast button[data-button]:hover {
+  background: var(--color-bg-secondary) !important;
+}

package/src/styles/variables.css

@@ -0,0 +1,194 @@
+:root {
+  /* themes - light */
+  --brand-primary: var(--blue-6);
+  --brand-secondary: var(--blue-4);
+  --brand-tertiary: var(--blue-8);
+  --text-highlight: var(--black-1);
+  --text-primary: var(--gray-9);
+  --text-secondary: var(--gray-7);
+  --text-tertiary: var(--gray-5);
+  --text-withbg: var(--white-1);
+  --bg-primary: var(--white-1);
+  --bg-secondary: var(--gray-1);
+  --bg-tertiary: var(--gray-2);
+  --bg-quaternary: var(--gray-3);
+  --bg-mask: var(--black-alpha-5);
+  --icon-highlight: var(--black-1);
+  --icon-primary: var(--gray-8);
+  --icon-secondary: var(--gray-6);
+  --icon-tertiary: var(--gray-4);
+  --icon-withbg: var(--white-1);
+  --danger-primary: var(--red-6);
+  --danger-secondary: var(--red-4);
+  --danger-tertiary: var(--red-8);
+  --accent-warning: var(--yellow-6);
+  --accent-success: var(--green-6);
+  --line-primary: var(--gray-2);
+  --line-secondary: var(--gray-6);
+  --shadow-primary: var(--black-alpha-3);
+  --shadow-secondary: var(--black-alpha-4);
+  --shadow-tertiary: var(--black-alpha-4);
+
+  /* color - scheme */
+  --black-1: rgba(0, 0, 0, 1);
+  --black-alpha-1: rgba(0, 0, 0, 0.6);
+  --black-alpha-2: rgba(0, 0, 0, 0.2);
+  --black-alpha-3: rgba(0, 0, 0, 0.1);
+  --black-alpha-4: rgba(0, 0, 0, 0.06);
+  --black-alpha-5: rgba(56, 57, 59, 0.5);
+  --black-alpha-6: rgba(90, 93, 98, 0.3);
+  --black-alpha-7: rgba(75, 77, 83, 0.5);
+  --white-1: rgba(255, 255, 255, 1);
+  --white-alpha-1: rgba(227, 230, 235, 0.6);
+  --white-alpha-2: rgba(173, 176, 183, 0.6);
+  --white-alpha-3: rgba(246, 247, 248, 0.8);
+  --blue-1: rgba(230, 246, 255, 1);
+  --blue-2: rgba(163, 220, 255, 1);
+  --blue-3: rgba(122, 200, 255, 1);
+  --blue-4: rgba(82, 177, 255, 1);
+  --blue-5: rgba(41, 151, 255, 1);
+  --blue-6: rgba(0, 123, 255, 1);
+  --blue-7: rgba(0, 98, 217, 1);
+  --blue-8: rgba(0, 74, 179, 1);
+  --blue-9: rgba(0, 54, 140, 1);
+  --blue-10: rgba(0, 36, 102, 1);
+  --gray-1: rgba(245, 245, 245, 1);
+  --gray-2: rgba(220, 222, 229, 1);
+  --gray-3: rgba(202, 206, 217, 1);
+  --gray-4: rgba(181, 184, 196, 1);
+  --gray-5: rgba(147, 150, 159, 1);
+  --gray-6: rgba(121, 124, 131, 1);
+  --gray-7: rgba(87, 90, 96, 1);
+  --gray-8: rgba(75, 77, 83, 1);
+  --gray-9: rgba(52, 53, 56, 1);
+  --gray-10: rgba(29, 29, 30, 1);
+  --red-1: rgba(255, 240, 240, 1);
+  --red-2: rgba(255, 232, 232, 1);
+  --red-3: rgba(255, 191, 192, 1);
+  --red-4: rgba(255, 150, 156, 1);
+  --red-5: rgba(255, 110, 122, 1);
+  --red-6: rgba(255, 69, 91, 1);
+  --red-7: rgba(217, 48, 73, 1);
+  --red-8: rgba(179, 30, 58, 1);
+  --red-9: rgba(140, 17, 44, 1);
+  --red-10: rgba(102, 11, 34, 1);
+  --yellow-1: rgba(255, 253, 240, 1);
+  --yellow-2: rgba(255, 248, 214, 1);
+  --yellow-3: rgba(255, 237, 173, 1);
+  --yellow-4: rgba(255, 224, 133, 1);
+  --yellow-5: rgba(255, 209, 92, 1);
+  --yellow-6: rgba(251, 187, 49, 1);
+  --yellow-7: rgba(212, 149, 32, 1);
+  --yellow-8: rgba(173, 114, 17, 1);
+  --yellow-9: rgba(135, 82, 7, 1);
+  --yellow-10: rgba(97, 55, 4, 1);
+  --green-1: rgba(240, 255, 243, 1);
+  --green-2: rgba(228, 242, 231, 1);
+  --green-3: rgba(211, 230, 216, 1);
+  --green-4: rgba(165, 217, 181, 1);
+  --green-5: rgba(122, 204, 151, 1);
+  --green-6: rgba(84, 190, 125, 1);
+  --green-7: rgba(60, 153, 99, 1);
+  --green-8: rgba(39, 115, 73, 1);
+  --green-9: rgba(22, 77, 48, 1);
+  --green-10: rgba(11, 38, 25, 1);
+
+  --radius: 0.25rem; /* 4px */
+  --spacing: 0.25rem; /* 4px */
+}
+
+.dark {
+  color-scheme: dark;
+  --brand-primary: var(--blue-6);
+  --brand-secondary: var(--blue-4);
+  --brand-tertiary: var(--blue-8);
+  --text-highlight: var(--white-1);
+  --text-primary: var(--gray-2);
+  --text-secondary: var(--gray-5);
+  --text-tertiary: var(--gray-6);
+  --text-withbg: var(--white-1);
+  --bg-primary: var(--gray-10);
+  --bg-secondary: var(--gray-9);
+  --bg-tertiary: var(--gray-8);
+  --bg-quaternary: var(--gray-7);
+  --bg-mask: var(--black-alpha-5);
+  --icon-highlight: var(--white-1);
+  --icon-primary: var(--gray-2);
+  --icon-secondary: var(--gray-5);
+  --icon-tertiary: var(--gray-6);
+  --icon-withbg: var(--white-1);
+  --danger-primary: var(--red-6);
+  --danger-secondary: var(--red-4);
+  --danger-tertiary: var(--red-8);
+  --accent-warning: var(--yellow-6);
+  --accent-success: var(--green-6);
+  --line-primary: var(--gray-8);
+  --line-secondary: var(--gray-4);
+  --shadow-primary: var(--black-alpha-1);
+  --shadow-secondary: var(--black-alpha-2);
+  --shadow-tertiary: var(--black-alpha-6);
+}
+
+.liquidlight {
+  color-scheme: light;
+  --brand-primary: var(--blue-6);
+  --brand-secondary: var(--blue-4);
+  --brand-tertiary: var(--blue-8);
+  --text-highlight: var(--black-1);
+  --text-primary: var(--gray-9);
+  --text-secondary: var(--gray-7);
+  --text-tertiary: var(--gray-5);
+  --text-withbg: var(--white-1);
+  --bg-primary: var(--white-1);
+  --bg-secondary: var(--white-alpha-1);
+  --bg-tertiary: var(--gray-2);
+  --bg-quaternary: var(--gray-3);
+  --bg-mask: var(--white-alpha-3);
+  --icon-highlight: var(--black-1);
+  --icon-primary: var(--gray-8);
+  --icon-secondary: var(--gray-6);
+  --icon-tertiary: var(--gray-4);
+  --icon-withbg: var(--white-1);
+  --danger-primary: var(--red-6);
+  --danger-secondary: var(--red-4);
+  --danger-tertiary: var(--red-8);
+  --accent-warning: var(--yellow-6);
+  --accent-success: var(--green-6);
+  --line-primary: var(--white-alpha-2);
+  --line-secondary: var(--gray-6);
+  --shadow-primary: var(--black-alpha-3);
+  --shadow-secondary: var(--black-alpha-4);
+  --shadow-tertiary: var(--black-alpha-4);
+}
+
+.liquiddark {
+  color-scheme: dark;
+  --brand-primary: var(--blue-6);
+  --brand-secondary: var(--blue-4);
+  --brand-tertiary: var(--blue-8);
+  --text-highlight: var(--white-1);
+  --text-primary: var(--gray-2);
+  --text-secondary: var(--gray-5);
+  --text-tertiary: var(--gray-6);
+  --text-withbg: var(--white-1);
+  --bg-primary: var(--gray-10);
+  --bg-secondary: var(--black-alpha-6);
+  --bg-tertiary: var(--gray-8);
+  --bg-quaternary: var(--gray-7);
+  --bg-mask: var(--black-alpha-5);
+  --icon-highlight: var(--white-1);
+  --icon-primary: var(--gray-2);
+  --icon-secondary: var(--gray-5);
+  --icon-tertiary: var(--gray-6);
+  --icon-withbg: var(--white-1);
+  --danger-primary: var(--red-6);
+  --danger-secondary: var(--red-4);
+  --danger-tertiary: var(--red-8);
+  --accent-warning: var(--yellow-6);
+  --accent-success: var(--green-6);
+  --line-primary: var(--black-alpha-7);
+  --line-secondary: var(--gray-4);
+  --shadow-primary: var(--black-alpha-1);
+  --shadow-secondary: var(--black-alpha-2);
+  --shadow-tertiary: var(--black-alpha-6);
+}

package/src/ui/avatar.tsx

@@ -0,0 +1,92 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import React, { ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+function Avatar({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+interface AvatarGroupProps {
+  children: React.ReactNode;
+  className?: string;
+  spacing?: "tight" | "normal" | "loose";
+  max?: number;
+}
+
+function AvatarGroup({ children, className, spacing = "normal", max }: AvatarGroupProps) {
+  const spacingClasses = {
+    tight: "-space-x-1.5",
+    normal: "-space-x-1",
+    loose: "-space-x-0.45",
+  };
+
+  const childrenArray = React.Children.toArray(children);
+  const displayChildren = max ? childrenArray.slice(0, max) : childrenArray;
+  const remainingCount = max && childrenArray.length > max ? childrenArray.length - max : 0;
+
+  return (
+    <div className={cn("flex", spacingClasses[spacing], className)}>
+      {displayChildren.map((child, index) => {
+        const zIndex = 30 - index;
+        if (React.isValidElement(child)) {
+          return React.cloneElement(
+            child as React.ReactElement<{
+              className?: string;
+              style?: React.CSSProperties;
+            }>,
+            {
+              key: index,
+              className: cn(
+                `ring-background relative ring-2 z-[${zIndex}] transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120`,
+                (child.props as { className?: string })?.className,
+              ),
+            },
+          );
+        }
+        return child;
+      })}
+      {remainingCount > 0 && (
+        <Avatar
+          className={cn(
+            "ring-background relative cursor-default ring-2 transition-all duration-200 ease-in-out hover:z-[100] hover:scale-120",
+            `z-[${30 - displayChildren.length}]`,
+          )}
+        >
+          <AvatarFallback>+{remainingCount}</AvatarFallback>
+        </Avatar>
+      )}
+    </div>
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup };

package/src/ui/badge.tsx

@@ -0,0 +1,68 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+const badgeVariants = cva(
+  [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "rounded-uk-xs",
+    "px-md",
+    "py-xxs",
+    "align-middle",
+    "text-uk-sm",
+    "leading-uk-sm",
+    "w-fit",
+    "whitespace-nowrap",
+    "shrink-0",
+    "[&>svg]:size-3",
+    "[&>svg]:pointer-events-none",
+    "transition-[color,box-shadow]",
+    "overflow-hidden",
+    "text-text-withbg",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-brand-primary text-text-primary",
+        secondary: "bg-bg-secondary",
+        destructive: "bg-danger-primary",
+        success: "bg-accent-success",
+        warning: "bg-accent-warning",
+        accent: "bg-accent-primary text-text-primary",
+      },
+      type: {
+        default: "",
+        circle: "size-[18px] !rounded-full",
+        dot: "size-[6px] rounded-full !px-0 !py-0 text-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      type: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  type,
+  asChild = false,
+  ...props
+}: ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant, type }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/ui/button.tsx

@@ -0,0 +1,100 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ComponentProps, forwardRef } from "react";
+
+import { cn } from "../utils";
+
+const buttonVariants = cva(
+  [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "shrink-0",
+    "whitespace-nowrap",
+    "rounded-uk-sm",
+    "font-medium",
+    "transition-all",
+    "[&_svg]:shrink-0 ",
+    "[&_svg]:pointer-events-none",
+    "outline-none",
+    "disabled:pointer-events-none",
+    "disabled:bg-bg-tertiary",
+    "disabled:text-text-tertiary",
+    "focus-visible:border-ring",
+    "focus-visible:ring-ring/50",
+    "focus-visible:ring-[3px]",
+    "focus-visible:bg-brand-tertiary",
+    "aria-invalid:ring-destructive/20",
+    "aria-invalid:border-destructive",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-brand-primary",
+          "text-text-withbg",
+          "hover:bg-brand-secondary",
+          "active:bg-brand-tertiary",
+        ],
+        secondary: [
+          "bg-bg-secondary",
+          "text-text-highlight",
+          "hover:bg-bg-quaternary",
+          "active:bg-bg-tertiary",
+        ],
+        destructive: [
+          "bg-danger-primary",
+          "text-text-withbg",
+          "hover:bg-danger-secondary",
+          "active:bg-danger-tertiary",
+        ],
+        ghost: [
+          "text-text-primary",
+          "hover:bg-bg-tertiary",
+          "hover:text-text-secondary",
+          "active:bg-bg-secondary",
+        ],
+        link: ["text-text-primary", "underline-offset-4", "hover:underline"],
+      },
+      size: {
+        sm: ["text-uk-sm", "h-5.5", "gap-xxs", "px-md", "[&_svg:not([class*='size-'])]:size-3"],
+        base: ["text-uk-md", "h-7 ", "gap-xs", " px-lg", "[&_svg:not([class*='size-'])]:size-3.5"],
+        lg: ["text-uk-lg", "h-8", " gap-xs", "px-xl", "[&_svg:not([class*='size-'])]:size-4"],
+      },
+      icon: { false: null, true: null },
+    },
+    compoundVariants: [
+      { size: "sm", icon: true, class: ["px-xs", "py-xs", " size-5.5"] },
+      { size: "base", icon: true, class: ["px-sm", "py-sm", "size-7"] },
+      { size: "lg", icon: true, class: ["px-md", "py-md", " size-8"] },
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+      icon: false,
+    },
+  },
+);
+
+interface ButtonProps extends ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, variant, size, icon, asChild = false, ...props },
+  ref,
+) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, icon, className }))}
+      {...props}
+    />
+  );
+});
+
+export { Button };
+export type { ButtonProps };

package/src/ui/card.tsx

@@ -0,0 +1,88 @@
+import { type ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+function Card({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex",
+        "flex-col",
+        "gap-md",
+        "min-w-[300px]",
+        "rounded-uk-lg",
+        "p-lg",
+        "bg-bg-primary",
+        "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+        "liquid:liquid-bg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex", "flex-row", "items-center", "justify-between", "gap-lg", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-text-highlight",
+        "text-uk-md",
+        "leading-uk-md",
+        "font-medium",
+        "vertical-align-middle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-text-secondary text-uk-sm leading-uk-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "text-text-secondary",
+        "text-uk-sm",
+        "leading-uk-sm",
+        "font-medium",
+        "vertical-align-middle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: ComponentProps<"div">) {
+  return <div data-slot="card-footer" className={cn("flex items-center", className)} {...props} />;
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };