@demokit-ui/demokit 0.1.0

package/dist/kit/components/composite/timeline/timeline.js

@@ -0,0 +1,176 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import * as b from "react";
+import { cn as p } from "../../../../lib/utils.js";
+import { Badge as N } from "../../data-display/badge/badge.js";
+const j = {
+  done: "primary",
+  current: "primary",
+  pending: "muted",
+  error: "destructive"
+}, z = {
+  primary: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  muted: "bg-muted-foreground",
+  destructive: "bg-destructive"
+};
+function P({
+  className: s,
+  density: i = "default",
+  tabs: a,
+  activeTab: t,
+  defaultActiveTab: r,
+  onTabChange: g,
+  items: d,
+  renderItem: o,
+  listClassName: c,
+  empty: m,
+  children: l,
+  ...x
+}) {
+  const [f, h] = b.useState(() => r ?? a?.[0]?.value), w = t ?? f;
+  function k(u) {
+    h(u), g?.(u);
+  }
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-slot": "timeline",
+      className: p(
+        "flex w-full flex-col bg-card text-card-foreground",
+        i === "compact" ? "gap-1 p-3" : "gap-2 p-[var(--dk-card-padding)]",
+        s
+      ),
+      ...x,
+      children: [
+        a && a.length > 0 && /* @__PURE__ */ e(B, { tabs: a, activeTab: w, onTabChange: k }),
+        /* @__PURE__ */ n(
+          "ol",
+          {
+            "data-slot": "timeline-list",
+            className: p(
+              "flex min-w-0 flex-col",
+              i === "compact" && "[&_[data-slot=timeline-item-content]]:pb-3",
+              c
+            ),
+            children: [
+              l,
+              !l && d?.map((u, y) => {
+                const { id: v, ...T } = u;
+                return o ? /* @__PURE__ */ e(b.Fragment, { children: o(u, y) }, v) : /* @__PURE__ */ e(C, { ...T }, v);
+              })
+            ]
+          }
+        ),
+        !l && (!d || d.length === 0) && /* @__PURE__ */ e("div", { className: "rounded-[var(--dk-radius-control)] bg-muted p-4 text-center text-sm text-muted-foreground", children: m ?? "暂无时间线记录" })
+      ]
+    }
+  );
+}
+function B({
+  tabs: s,
+  activeTab: i,
+  onTabChange: a
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": "时间线分类",
+      className: "flex min-h-12 w-full items-center gap-5 overflow-x-auto border-b border-border bg-card",
+      children: s.map((t) => {
+        const r = t.value === i;
+        return /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": r,
+            onClick: () => a(t.value),
+            className: p(
+              "relative flex h-12 shrink-0 items-center gap-1 text-sm leading-[22px] transition-colors",
+              r ? "font-medium text-foreground" : "font-normal text-muted-foreground hover:text-primary"
+            ),
+            children: [
+              /* @__PURE__ */ e("span", { children: t.label }),
+              t.count !== void 0 && /* @__PURE__ */ e(N, { variant: "primary", appearance: "light", size: "xs", shape: "circle", children: t.count }),
+              r && /* @__PURE__ */ e("span", { className: "absolute inset-x-0 bottom-0 h-0.5 bg-primary" })
+            ]
+          },
+          t.value
+        );
+      })
+    }
+  );
+}
+function C({
+  className: s,
+  title: i,
+  time: a,
+  actor: t,
+  description: r,
+  status: g = "pending",
+  tone: d,
+  tag: o,
+  meta: c,
+  actions: m,
+  children: l,
+  ...x
+}) {
+  const f = d ?? j[g], h = !!(r || c || l || m);
+  return /* @__PURE__ */ n(
+    "li",
+    {
+      "data-slot": "timeline-item",
+      className: p("group relative flex min-w-0 gap-3 last:[&_[data-slot=timeline-line]]:hidden", s),
+      ...x,
+      children: [
+        /* @__PURE__ */ n("div", { className: "relative flex w-3 shrink-0 justify-center self-stretch pt-4", children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              "data-slot": "timeline-line",
+              className: "absolute bottom-0 left-1/2 top-5 w-px -translate-x-1/2 bg-border"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              "data-slot": "timeline-marker",
+              className: p("relative z-10 mt-0.5 size-1.5 rounded-full ring-4 ring-card", z[f])
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("div", { "data-slot": "timeline-item-content", className: "min-w-0 flex-1 pb-[var(--dk-card-inner-gap)] pt-2", children: [
+          (a || t) && /* @__PURE__ */ n("div", { className: "flex min-w-0 items-center justify-between gap-3 text-xs leading-5 text-muted-foreground", children: [
+            a && /* @__PURE__ */ e("time", { className: "min-w-0 truncate", children: a }),
+            t && /* @__PURE__ */ e("span", { className: "shrink-0 truncate", children: t })
+          ] }),
+          /* @__PURE__ */ n("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ e("div", { className: "min-w-0 truncate text-sm font-medium leading-[22px] text-foreground", children: i }),
+            o && /* @__PURE__ */ e(
+              N,
+              {
+                variant: "primary",
+                appearance: "light",
+                size: "sm",
+                className: "h-5 shrink-0 rounded-[var(--dk-radius-control)] px-1.5 text-xs leading-5",
+                children: o
+              }
+            )
+          ] }),
+          h && /* @__PURE__ */ n("div", { className: "mt-1 min-w-0 rounded-[var(--dk-radius-control)] bg-muted p-2 text-[13px] leading-[22px] text-muted-foreground", children: [
+            r && /* @__PURE__ */ e("div", { className: "min-w-0", children: r }),
+            c && /* @__PURE__ */ e("div", { className: "min-w-0", children: c }),
+            l,
+            m && /* @__PURE__ */ e("div", { className: "mt-0.5 text-primary", children: m })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  P as Timeline,
+  C as TimelineItem
+};

package/dist/kit/components/composite/todo-card/todo-card.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export type TodoCardStatusTone = 'primary' | 'success' | 'warning' | 'info' | 'muted';
+export interface TodoCardTab {
+    value: string;
+    label: React.ReactNode;
+    count?: React.ReactNode;
+}
+export interface TodoCardItem {
+    id: React.Key;
+    title: React.ReactNode;
+    time?: React.ReactNode;
+    status?: React.ReactNode;
+    statusTone?: TodoCardStatusTone;
+    action?: React.ReactNode;
+}
+export interface TodoCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    tabs?: TodoCardTab[];
+    activeTab?: string;
+    onTabChange?: (value: string) => void;
+    items?: TodoCardItem[];
+    renderItem?: (item: TodoCardItem) => React.ReactNode;
+    footer?: React.ReactNode;
+    empty?: React.ReactNode;
+}
+declare function TodoCard({ className, tabs, activeTab, onTabChange, items, renderItem, footer, empty, children, ...props }: TodoCardProps): import("react/jsx-runtime").JSX.Element;
+export { TodoCard };

package/dist/kit/components/composite/todo-card/todo-card.js

@@ -0,0 +1,101 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import * as h from "react";
+import { ChevronRight as g } from "lucide-react";
+import { cn as c } from "../../../../lib/utils.js";
+import { Badge as d } from "../../data-display/badge/badge.js";
+import { Card as v, CardContent as N } from "../../data-display/card/card.js";
+import { Button as k } from "../../form/button/button.js";
+const y = {
+  primary: "primary",
+  success: "success",
+  warning: "warning",
+  info: "info",
+  muted: "secondary"
+}, w = [
+  { value: "todo", label: "待办" },
+  { value: "cc", label: "抄送我" },
+  { value: "started", label: "已发起" },
+  { value: "apply", label: "发起申请" }
+];
+function M({
+  className: r,
+  tabs: n = w,
+  activeTab: m = "cc",
+  onTabChange: p,
+  items: l = [],
+  renderItem: s,
+  footer: u,
+  empty: f,
+  children: o,
+  ...x
+}) {
+  return /* @__PURE__ */ e(v, { "data-slot": "todo-card", className: c("card-surface overflow-hidden", r), ...x, children: /* @__PURE__ */ t(N, { className: "flex flex-col gap-[var(--dk-card-inner-gap)] p-[var(--dk-card-padding)]", children: [
+    n.length > 0 && /* @__PURE__ */ e(
+      "div",
+      {
+        role: "tablist",
+        "aria-label": "待办分类",
+        className: "flex min-h-6 items-center gap-[calc(var(--dk-control-gap)*2.5)] overflow-x-auto",
+        children: n.map((a) => {
+          const i = a.value === m;
+          return /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": i,
+              onClick: () => p?.(a.value),
+              className: c(
+                "relative flex h-6 shrink-0 items-center gap-1 pb-0.5 text-sm leading-[22px] transition-colors",
+                i ? "font-medium text-primary" : "font-normal text-foreground hover:text-primary"
+              ),
+              children: [
+                /* @__PURE__ */ e("span", { children: a.label }),
+                a.count !== void 0 && /* @__PURE__ */ e(d, { variant: "primary", appearance: "light", size: "xs", shape: "circle", children: a.count }),
+                i && /* @__PURE__ */ e("span", { className: "absolute inset-x-0 bottom-0 h-0.5 bg-primary" })
+              ]
+            },
+            a.value
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "min-w-0", children: [
+      o,
+      !o && l.length === 0 && /* @__PURE__ */ e("div", { className: "p-[calc(var(--dk-card-padding)*2)] text-center text-sm text-muted-foreground", children: f ?? "暂无待办" }),
+      !o && l.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-col gap-[calc(var(--dk-card-inner-gap)-0.125rem)]", children: l.map(
+        (a) => s ? /* @__PURE__ */ e(h.Fragment, { children: s(a) }, a.id) : /* @__PURE__ */ e(b, { item: a }, a.id)
+      ) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "flex items-center justify-start", children: u ?? /* @__PURE__ */ e(C, {}) })
+  ] }) });
+}
+function b({ item: r }) {
+  const n = r.statusTone ?? "warning";
+  return /* @__PURE__ */ t("div", { className: "group flex min-w-0 flex-col gap-0.5", children: [
+    /* @__PURE__ */ t("div", { className: "flex min-h-[22px] min-w-0 items-center gap-[var(--dk-control-gap)]", children: [
+      /* @__PURE__ */ e("div", { className: "min-w-0 flex-1 truncate text-sm font-medium leading-[22px] text-foreground", children: r.title }),
+      r.status && /* @__PURE__ */ e(
+        d,
+        {
+          variant: y[n],
+          appearance: "light",
+          size: "sm",
+          className: "shrink-0 font-normal",
+          children: r.status
+        }
+      ),
+      r.action && /* @__PURE__ */ e("div", { className: "shrink-0 text-muted-foreground", children: r.action })
+    ] }),
+    r.time && /* @__PURE__ */ e("div", { className: "truncate text-[13px] font-normal leading-[22px] text-muted-foreground", children: r.time })
+  ] });
+}
+function C() {
+  return /* @__PURE__ */ t(k, { mode: "link", variant: "primary", size: "sm", className: "h-5 px-0 text-xs leading-5", children: [
+    "查看更多",
+    /* @__PURE__ */ e(g, { className: "size-3.5", strokeWidth: 1.8 })
+  ] });
+}
+export {
+  M as TodoCard
+};

package/dist/kit/components/data-display/avatar/avatar.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare const avatarStatusVariants: (props?: ({
+    variant?: "online" | "offline" | "busy" | "away" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarIndicator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarStatus({ className, variant, ...props }: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof avatarStatusVariants>): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarFallback, AvatarImage, AvatarIndicator, AvatarStatus, avatarStatusVariants };

package/dist/kit/components/data-display/avatar/avatar.js

@@ -0,0 +1,61 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as e } from "../../../../lib/utils.js";
+import { cva as o } from "class-variance-authority";
+import { Avatar as l } from "radix-ui";
+const s = o("flex items-center rounded-full size-2 border-2 border-background", {
+  variants: {
+    variant: {
+      online: "bg-green-600",
+      offline: "bg-zinc-600",
+      busy: "bg-yellow-600",
+      away: "bg-blue-600"
+    }
+  },
+  defaultVariants: {
+    variant: "online"
+  }
+});
+function d({ className: a, ...t }) {
+  return /* @__PURE__ */ r(l.Root, { "data-slot": "avatar", className: e("relative flex shrink-0 size-10", a), ...t });
+}
+function v({ className: a, ...t }) {
+  return /* @__PURE__ */ r("div", { className: e("relative overflow-hidden rounded-full", a), children: /* @__PURE__ */ r(l.Image, { "data-slot": "avatar-image", className: e("aspect-square h-full w-full"), ...t }) });
+}
+function m({ className: a, ...t }) {
+  return /* @__PURE__ */ r(
+    l.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: e(
+        "flex h-full w-full items-center justify-center rounded-full border border-border bg-accent text-accent-foreground text-xs",
+        a
+      ),
+      ...t
+    }
+  );
+}
+function b({ className: a, ...t }) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "avatar-indicator",
+      className: e("absolute flex size-6 items-center justify-center", a),
+      ...t
+    }
+  );
+}
+function g({
+  className: a,
+  variant: t,
+  ...n
+}) {
+  return /* @__PURE__ */ r("div", { "data-slot": "avatar-status", className: e(s({ variant: t }), a), ...n });
+}
+export {
+  d as Avatar,
+  m as AvatarFallback,
+  v as AvatarImage,
+  b as AvatarIndicator,
+  g as AvatarStatus,
+  s as avatarStatusVariants
+};

package/dist/kit/components/data-display/avatar-group/avatar-group.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+type AnimationType = 'default' | 'flip' | 'reveal';
+interface AvatarGroupProps {
+    children: React.ReactNode;
+    className?: string;
+    tooltipClassName?: string;
+    animation?: AnimationType;
+}
+interface AvatarGroupItemProps {
+    children: React.ReactNode;
+    className?: string;
+    tooltipClassName?: string;
+    animation?: AnimationType;
+}
+interface AvatarGroupTooltipProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function AvatarGroup({ children, className, tooltipClassName, animation }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarGroupItem({ children, className, tooltipClassName, animation: itemAnimation, }: AvatarGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarGroupTooltip({ children, className }: AvatarGroupTooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/kit/components/data-display/avatar-group/avatar-group.js

@@ -0,0 +1,184 @@
+import { jsx as t, jsxs as v } from "react/jsx-runtime";
+import * as a from "react";
+import { useMotionValue as z, useSpring as h, useTransform as g, AnimatePresence as E, motion as o } from "motion/react";
+import { cn as p } from "../../../../lib/utils.js";
+const b = a.createContext(null), O = ({ content: e }) => {
+  const n = a.Children.toArray(e);
+  return /* @__PURE__ */ t(
+    o.div,
+    {
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      variants: {
+        animate: { transition: { staggerChildren: 0.08 } }
+      },
+      children: n.map((r, s) => /* @__PURE__ */ t(
+        o.div,
+        {
+          variants: {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0, transition: { duration: 0.3, ease: "easeOut" } },
+            exit: { opacity: 0, y: -20, transition: { duration: 0.2, ease: "easeIn" } }
+          },
+          children: r
+        },
+        s
+      ))
+    }
+  );
+};
+function k({ children: e, className: n, tooltipClassName: r, animation: s = "default" }) {
+  const l = {
+    tooltipClassName: r,
+    animation: s
+  };
+  return /* @__PURE__ */ t(b.Provider, { value: l, children: /* @__PURE__ */ t("div", { className: p("flex -space-x-2.5", n), children: e }) });
+}
+function H({
+  children: e,
+  className: n,
+  tooltipClassName: r,
+  animation: s
+}) {
+  const l = a.useContext(b), [w, y] = a.useState(!1), x = { stiffness: 100, damping: 5 }, d = z(0), c = s || l?.animation || "default", N = r || l?.tooltipClassName, A = h(g(d, [-100, 100], [-45, 45]), x), I = h(g(d, [-100, 100], [-50, 50]), x), m = a.Children.toArray(e).find(
+    (i) => a.isValidElement(i) && i.type === C
+  ), V = a.Children.toArray(e).filter(
+    (i) => !(a.isValidElement(i) && i.type === C)
+  ), u = m && a.isValidElement(m) ? m.props.children : null, M = (i) => {
+    const X = i.target.offsetWidth / 2;
+    d.set(i.nativeEvent.offsetX - X);
+  }, f = {
+    default: {
+      initial: { opacity: 0, y: 20, scale: 0.6 },
+      animate: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+          type: "spring",
+          stiffness: 260,
+          damping: 10
+        }
+      },
+      exit: {
+        opacity: 0,
+        y: 20,
+        scale: 0.6,
+        transition: {
+          duration: 0.2,
+          ease: "easeInOut"
+        }
+      }
+    },
+    flip: {
+      initial: { opacity: 0, rotateX: -90 },
+      animate: {
+        opacity: 1,
+        rotateX: 0,
+        transition: {
+          type: "spring",
+          stiffness: 180,
+          damping: 25
+        }
+      },
+      exit: {
+        opacity: 0,
+        rotateX: -90,
+        transition: {
+          duration: 0.3,
+          ease: "easeInOut"
+        }
+      }
+    },
+    reveal: {
+      initial: { opacity: 0, scale: 0.95 },
+      animate: { opacity: 1, scale: 1, transition: { duration: 0.15, ease: "easeOut" } },
+      exit: { opacity: 0, scale: 0.95, transition: { duration: 0.1, ease: "easeIn" } }
+    }
+  }[c];
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: p("group relative", n),
+      onMouseEnter: () => y(!0),
+      onMouseLeave: () => y(!1),
+      children: [
+        /* @__PURE__ */ t(E, { mode: "wait", children: w && u && /* @__PURE__ */ v(
+          o.div,
+          {
+            initial: f.initial,
+            animate: f.animate,
+            exit: f.exit,
+            style: {
+              translateX: c === "reveal" ? 0 : I,
+              rotate: c === "reveal" ? 0 : A,
+              whiteSpace: "nowrap",
+              transformOrigin: "center"
+            },
+            className: p(
+              "absolute -top-16 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs font-medium text-white shadow-xl",
+              N
+            ),
+            children: [
+              /* @__PURE__ */ t(
+                o.div,
+                {
+                  className: "absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-gradient-to-r from-transparent via-emerald-500 to-transparent",
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition: { duration: 0.15 }
+                }
+              ),
+              /* @__PURE__ */ t(
+                o.div,
+                {
+                  className: "absolute -bottom-px left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 to-transparent",
+                  initial: { opacity: 0 },
+                  animate: { opacity: 1 },
+                  exit: { opacity: 0 },
+                  transition: { duration: 0.15 }
+                }
+              ),
+              c === "reveal" ? /* @__PURE__ */ t(O, { content: u }) : u
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          o.div,
+          {
+            className: "relative cursor-pointer",
+            whileHover: {
+              zIndex: 30
+            },
+            whileTap: { scale: 0.95 },
+            transition: {
+              duration: 0.5
+            },
+            onMouseMove: M,
+            children: V
+          }
+        )
+      ]
+    }
+  );
+}
+function C({ children: e, className: n }) {
+  return /* @__PURE__ */ t(
+    o.div,
+    {
+      initial: { opacity: 0, y: 20, scale: 0.6 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.15 },
+      className: p("hidden relative z-30", n),
+      children: e
+    }
+  );
+}
+export {
+  k as AvatarGroup,
+  H as AvatarGroupItem,
+  C as AvatarGroupTooltip
+};

package/dist/kit/components/data-display/badge/badge.d.ts

@@ -0,0 +1,29 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    asChild?: boolean;
+    dotClassName?: string;
+    disabled?: boolean;
+}
+export interface BadgeButtonProps extends React.ButtonHTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeButtonVariants> {
+    asChild?: boolean;
+}
+export type BadgeDotProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const badgeVariants: (props?: ({
+    variant?: "primary" | "destructive" | "secondary" | "outline" | "success" | "warning" | "info" | null | undefined;
+    appearance?: "default" | "light" | "outline" | "ghost" | null | undefined;
+    disabled?: boolean | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    shape?: "default" | "circle" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const badgeButtonVariants: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Badge({ className, variant, size, appearance, shape, asChild, disabled, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function BadgeButton({ className, variant, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof badgeButtonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function BadgeDot({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Badge, BadgeButton, BadgeDot, badgeVariants };