@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/Badge/Badge.js

@@ -1,77 +1,80 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { useRef as f, useState as h, useCallback as g, useEffect as v } from "react";
-import { cn as c } from "../../utils/index.js";
-import { buttonDismissVariants as w, badgeVariants as x } from "./Badge.variants.js";
-import { c as y } from "../../createLucideIcon-D2CN7Ma9.js";
-/**
-* @license lucide-react v0.545.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const M = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], Z = y("x", M), N = "data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='currentColor'%20xmlns='http://www.w3.org/2000/svg'%20%3e%3cpath%20d='M7.05002%201.45002C7.05002%201.17155%206.9394%200.904476%206.74249%200.707562C6.54557%200.510649%206.2785%200.400024%206.00002%200.400024C5.72155%200.400024%205.45448%200.510649%205.25756%200.707562C5.06065%200.904476%204.95002%201.17155%204.95002%201.45002C4.95002%201.7285%205.06065%201.99557%205.25756%202.19249C5.45448%202.3894%205.72155%202.50002%206.00002%202.50002C6.2785%202.50002%206.54557%202.3894%206.74249%202.19249C6.9394%201.99557%207.05002%201.7285%207.05002%201.45002ZM7.05002%2010.55C7.05002%2010.2715%206.9394%2010.0045%206.74249%209.80756C6.54557%209.61065%206.2785%209.50002%206.00002%209.50002C5.72155%209.50002%205.45448%209.61065%205.25756%209.80756C5.06065%2010.0045%204.95002%2010.2715%204.95002%2010.55C4.95002%2010.8285%205.06065%2011.0956%205.25756%2011.2925C5.45448%2011.4894%205.72155%2011.6%206.00002%2011.6C6.2785%2011.6%206.54557%2011.4894%206.74249%2011.2925C6.9394%2011.0956%207.05002%2010.8285%207.05002%2010.55ZM1.45002%207.05002C1.7285%207.05002%201.99557%206.9394%202.19249%206.74249C2.3894%206.54557%202.50002%206.2785%202.50002%206.00002C2.50002%205.72155%202.3894%205.45448%202.19249%205.25756C1.99557%205.06065%201.7285%204.95002%201.45002%204.95002C1.17155%204.95002%200.904476%205.06065%200.707562%205.25756C0.510649%205.45448%200.400024%205.72155%200.400024%206.00002C0.400024%206.2785%200.510649%206.54557%200.707562%206.74249C0.904476%206.9394%201.17155%207.05002%201.45002%207.05002ZM11.6%206.00002C11.6%205.72155%2011.4894%205.45448%2011.2925%205.25756C11.0956%205.06065%2010.8285%204.95002%2010.55%204.95002C10.2715%204.95002%2010.0045%205.06065%209.80756%205.25756C9.61065%205.45448%209.50002%205.72155%209.50002%206.00002C9.50002%206.2785%209.61065%206.54557%209.80756%206.74249C10.0045%206.9394%2010.2715%207.05002%2010.55%207.05002C10.8285%207.05002%2011.0956%206.9394%2011.2925%206.74249C11.4894%206.54557%2011.6%206.2785%2011.6%206.00002ZM3.52596%209.9594C3.62349%209.86187%203.70085%209.74609%203.75363%209.61867C3.80641%209.49124%203.83358%209.35467%203.83358%209.21674C3.83358%209.07882%203.80641%208.94225%203.75363%208.81482C3.70085%208.6874%203.62349%208.57161%203.52596%208.47409C3.42844%208.37656%203.31265%208.2992%203.18523%208.24642C3.0578%208.19364%202.92123%208.16647%202.78331%208.16647C2.50476%208.16647%202.23761%208.27712%202.04065%208.47409C1.84368%208.67105%201.73303%208.93819%201.73303%209.21674C1.73303%209.49529%201.84368%209.76243%202.04065%209.9594C2.23761%2010.1564%202.50476%2010.267%202.78331%2010.267C3.06186%2010.267%203.329%2010.1564%203.52596%209.9594ZM3.52596%203.52377C3.62833%203.42738%203.7103%203.31141%203.76701%203.18274C3.82371%203.05407%203.85399%202.91532%203.85605%202.77472C3.85812%202.63413%203.83192%202.49455%203.77902%202.36427C3.72611%202.23399%203.64758%202.11566%203.54808%202.01631C3.44858%201.91695%203.33014%201.8386%203.19978%201.78589C3.06942%201.73318%202.92981%201.70718%202.78921%201.70945C2.64862%201.71172%202.50992%201.74221%202.38133%201.7991C2.25274%201.85599%202.13689%201.93814%202.04065%202.04065C1.84368%202.23761%201.73303%202.50476%201.73303%202.78331C1.73303%203.06186%201.84368%203.329%202.04065%203.52596C2.23761%203.72293%202.50476%203.83358%202.78331%203.83358C3.06186%203.83358%203.329%203.72293%203.52596%203.52596V3.52377ZM8.47409%209.9594C8.57161%2010.0569%208.6874%2010.1343%208.81482%2010.1871C8.94225%2010.2399%209.07882%2010.267%209.21674%2010.267C9.35467%2010.267%209.49124%2010.2399%209.61867%2010.1871C9.74609%2010.1343%209.86187%2010.0569%209.9594%209.9594C10.0569%209.86187%2010.1343%209.74609%2010.1871%209.61867C10.2399%209.49124%2010.267%209.35467%2010.267%209.21674C10.267%209.07882%2010.2399%208.94225%2010.1871%208.81482C10.1343%208.6874%2010.0569%208.57161%209.9594%208.47409C9.86187%208.37656%209.74609%208.2992%209.61867%208.24642C9.49124%208.19364%209.35467%208.16647%209.21674%208.16647C9.07882%208.16647%208.94225%208.19364%208.81482%208.24642C8.6874%208.2992%208.57161%208.37656%208.47409%208.47409C8.37656%208.57161%208.2992%208.6874%208.24642%208.81482C8.19364%208.94225%208.16647%209.07882%208.16647%209.21674C8.16647%209.35467%208.19364%209.49124%208.24642%209.61867C8.2992%209.74609%208.37656%209.86187%208.47409%209.9594Z'%20fill='currentColor'%20/%3e%3c/svg%3e", B = ({
-  className: d,
-  dismissible: m = !1,
-  label: a,
-  loading: r = !1,
-  size: o,
-  variant: i,
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { useRef as g, useState as w, useCallback as x, useEffect as V } from "react";
+import { cn as u } from "../../utils/index.js";
+import { buttonDismissVariants as D, badgeVariants as S } from "./Badge.variants.js";
+import { S as p } from "../../index-BvoZGpli.js";
+import { LoaderIcon as j } from "../../assets/icons/components/Loader.js";
+import { X as E } from "../../x-B9bYxG31.js";
+const $ = ({
+  className: b,
+  dismissible: f = !1,
+  isSelectable: h = !0,
+  label: r,
+  leftIcon: i,
+  loading: n = !1,
+  rightIcon: o,
+  size: l,
+  variant: m,
   onClick: e,
-  onDismiss: n
+  onDismiss: c
 }) => {
-  const C = f(null), [u, p] = h("visible"), b = g(
+  const a = g(null), [N, v] = w("visible"), y = x(
     (t) => {
-      t.stopPropagation(), n?.(), p("hidden");
+      t.stopPropagation(), c?.(), v("hidden");
     },
-    [n]
+    [c]
   );
-  return v(() => {
+  return V(() => {
     const t = new AbortController();
-    return C.current?.addEventListener(
+    return a.current?.addEventListener(
       "animationend",
       () => {
-        C.current?.style.setProperty("display", "none"), C.current?.remove();
+        a.current?.style.setProperty("display", "none"), a.current?.remove();
       },
       { signal: t.signal }
     ), () => t.abort();
-  }, []), /* @__PURE__ */ l(
+  }, []), /* @__PURE__ */ d(
     "span",
     {
-      ref: C,
-      className: c(
-        x({ variant: i, size: o, className: d }),
-        e && "cursor-pointer"
-      ),
+      ref: a,
+      className: u(S({ variant: m, size: l, className: b }), {
+        "select-none": !h,
+        "cursor-pointer": e
+      }),
       role: e ? "button" : void 0,
       onClick: e,
       tabIndex: e ? 0 : void 0,
-      "aria-label": e ? `${a} badge` : void 0,
-      "aria-busy": r,
+      "aria-label": e ? `${r} badge` : void 0,
+      "aria-busy": n,
       "aria-live": "polite",
-      "data-state": u,
+      "data-state": N,
       children: [
-        r && /* @__PURE__ */ s(N, { className: "h-3 w-3 animate-spin animate-duration-time-2" }),
-        a,
-        m && /* @__PURE__ */ l(
+        n && /* @__PURE__ */ s(
+          j,
+          {
+            size: 12,
+            className: "animate-spin animate-duration-time-2"
+          }
+        ),
+        i ? /* @__PURE__ */ s(p, { className: "h-3 w-3", children: i }) : null,
+        r,
+        f ? /* @__PURE__ */ d(
           "button",
           {
             type: "button",
-            className: c(w({ size: o, variant: i })),
-            onClick: b,
+            className: u(D({ size: l, variant: m })),
+            onClick: y,
             "aria-label": "Dismiss",
             children: [
-              /* @__PURE__ */ s(Z, { className: "h-full w-full" }),
+              /* @__PURE__ */ s(E, { className: "h-full w-full" }),
               /* @__PURE__ */ s("span", { className: "sr-only", children: "Dismiss" })
             ]
           }
-        )
+        ) : o ? /* @__PURE__ */ s(p, { className: "h-3 w-3", children: o }) : null
       ]
     }
   );
 };
 export {
-  B as Badge
+  $ as Badge
 };

package/dist/components/Badge/Badge.types.d.ts

@@ -0,0 +1,34 @@
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+import { badgeVariants } from './Badge.variants';
+/**
+ * Props for the Badge component.
+ *
+ * @example
+ * ```tsx
+ * <Badge label="New" variant="success" />
+ * <Badge label="Pending" variant="warning" />
+ * <Badge label="Error" variant="error" dismissible onDismiss={() => {}} />
+ * <Badge label="With Icon" leftIcon={<Icon />} />
+ * ```
+ */
+export type BadgeProps = VariantProps<typeof badgeVariants> & {
+    /** Additional CSS classes */
+    className?: string;
+    /** Show dismiss button */
+    dismissible?: true;
+    /** Allow text selection (default: true) */
+    isSelectable?: boolean;
+    /** Badge text content */
+    label: string;
+    /** Icon displayed on the left */
+    leftIcon?: ReactNode;
+    /** Show loading spinner */
+    loading?: boolean;
+    /** Icon displayed on the right (when not dismissible) */
+    rightIcon?: ReactNode;
+    /** Click handler (makes badge interactive) */
+    onClick?: VoidFunction;
+    /** Callback when dismiss button clicked */
+    onDismiss?: VoidFunction;
+};

package/dist/components/Badge/Badge.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const badgeVariants: (props?: ({
+    variant?: "info" | "warning" | "danger" | "default" | "success" | "violet" | "orange" | null | undefined;
+    size?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const buttonDismissVariants: (props?: ({
+    variant?: "info" | "warning" | "danger" | "default" | "success" | "violet" | "orange" | null | undefined;
+    size?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Badge/Badge.variants.js

@@ -17,14 +17,51 @@ const a = e(
   {
     variants: {
       variant: {
-        default: ["bg-gray-100", "text-gray-800"],
-        danger: ["bg-red-100", "text-red-800"],
-        info: ["bg-blue-100", "text-blue-800"],
-        success: ["bg-green-100", "text-green-800"],
-        warning: ["bg-yellow-100", "text-yellow-800"]
+        default: [
+          "bg-gray-100",
+          "text-gray-800",
+          "dark:text-gray-300",
+          "dark:bg-gray-300/15"
+        ],
+        danger: [
+          "bg-red-100",
+          "text-red-800",
+          "dark:text-red-400",
+          "dark:bg-red-400/10"
+        ],
+        info: [
+          "bg-blue-100",
+          "text-blue-800",
+          "dark:text-sky-400",
+          "dark:bg-sky-400/10"
+        ],
+        success: [
+          "bg-green-100",
+          "text-green-800",
+          "dark:text-green-400",
+          "dark:bg-green-400/10"
+        ],
+        warning: [
+          "bg-yellow-100",
+          "text-yellow-800",
+          "dark:text-amber-300",
+          "dark:bg-amber-300/10"
+        ],
+        violet: [
+          "bg-violet-50",
+          "text-violet-800",
+          "dark:text-purple-400",
+          "dark:bg-purple-400/8"
+        ],
+        orange: [
+          "bg-orange-50",
+          "text-orange-800",
+          "dark:text-orange-400",
+          "dark:bg-orange-400/10"
+        ]
       },
       size: {
-        default: "text-sm leading-[16px]"
+        default: "text-xs leading-4"
       }
     },
     defaultVariants: {
@@ -32,7 +69,7 @@ const a = e(
       size: "default"
     }
   }
-), n = e(
+), r = e(
   [
     "rounded-full",
     "inline-flex",
@@ -46,11 +83,13 @@ const a = e(
   {
     variants: {
       variant: {
-        default: ["text-gray-700"],
-        danger: ["text-red-700"],
-        info: ["text-blue-700"],
-        success: ["text-green-700"],
-        warning: ["text-yellow-700"]
+        default: ["text-gray-700", "dark:text-gray-300"],
+        danger: ["text-red-700", "dark:text-red-400"],
+        info: ["text-blue-700", "dark:text-sky-400"],
+        success: ["text-green-700", "dark:text-green-400"],
+        warning: ["text-yellow-700", "dark:text-amber-300"],
+        violet: ["text-violet-700", "dark:text-purple-400"],
+        orange: ["text-orange-800", "dark:text-orange-400"]
       },
       size: {
         default: ["h-3.5", "w-3.5"]
@@ -64,5 +103,5 @@ const a = e(
 );
 export {
   a as badgeVariants,
-  n as buttonDismissVariants
+  r as buttonDismissVariants
 };

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { BreadcrumbProps } from './Breadcrumb.types';
+/**
+ * A breadcrumb navigation component showing the current location in a hierarchy.
+ *
+ * @example
+ * ```tsx
+ * // Basic breadcrumb
+ * <Breadcrumb
+ *   steps={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Settings', to: '/settings' },
+ *     { label: 'Profile', isActive: true },
+ *   ]}
+ * />
+ *
+ * // With custom Link component (e.g., react-router)
+ * <Breadcrumb
+ *   steps={[
+ *     { label: 'Dashboard', to: '/dashboard', component: Link },
+ *     { label: 'Users', to: '/users', component: Link },
+ *     { label: 'Edit User', isActive: true },
+ *   ]}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-breadcrumb--docs Storybook}
+ */
+export declare const Breadcrumb: FC<BreadcrumbProps>;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -3,7 +3,7 @@ import u, { forwardRef as b, useId as v, Fragment as y } from "react";
 import { cn as h } from "../../utils/index.js";
 import { breadcrumbVariants as O, breadcrumbWrapperVariants as j } from "./Breadcrumb.variants.js";
 import { Item as w } from "./components/Item/Item.js";
-import { P as l } from "../../index-N2OStZoU.js";
+import { P as l } from "../../index-BOE_3f_Z.js";
 function m() {
   return m = Object.assign || function(r) {
     for (var o = 1; o < arguments.length; o++) {

package/dist/components/Breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,41 @@
+import { VariantProps } from 'class-variance-authority';
+import { FC, HTMLAttributes } from 'react';
+import { Theme } from '../../domain/theme';
+import { breadcrumbVariants } from './Breadcrumb.variants';
+/**
+ * A single step in the breadcrumb navigation.
+ */
+export type Step = {
+    /** Display text for the breadcrumb item */
+    label: string;
+    /** URL to navigate to when clicked */
+    to?: string;
+    /** Link target (_self or _blank) */
+    target?: '_self' | '_blank';
+    /** Whether this step is the current/active page */
+    isActive?: boolean;
+    /** Custom component to render (e.g., Link from react-router) */
+    component?: FC<any>;
+};
+/**
+ * Props for the Breadcrumb component.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   steps={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Products', to: '/products' },
+ *     { label: 'Current Page', isActive: true },
+ *   ]}
+ * />
+ * ```
+ */
+export interface BreadcrumbProps extends VariantProps<typeof breadcrumbVariants>, HTMLAttributes<HTMLOListElement> {
+    /** Array of breadcrumb steps */
+    steps: Step[];
+    /** CSS classes for the nav wrapper */
+    wrapperClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+}

package/dist/components/Breadcrumb/Breadcrumb.variants.d.ts

@@ -0,0 +1,2 @@
+export declare const breadcrumbWrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const breadcrumbVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Breadcrumb/Breadcrumb.variants.js

@@ -1,6 +1,6 @@
 import { c as e } from "../../index-D29mdTf5.js";
-const r = e([
-  "text-slate-500",
+const t = e([
+  "text-gray-600",
   "text-md",
   "flex",
   "gap-2",
@@ -8,5 +8,5 @@ const r = e([
 ]), a = e(["flex", "gap-1", "items-center"]);
 export {
   a as breadcrumbVariants,
-  r as breadcrumbWrapperVariants
+  t as breadcrumbWrapperVariants
 };

package/dist/components/Breadcrumb/components/Item/Item.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ItemProps } from './Item.types';
+export declare const Item: FC<ItemProps>;

package/dist/components/Breadcrumb/components/Item/Item.js

@@ -1,6 +1,6 @@
 import { jsx as e, Fragment as p } from "react/jsx-runtime";
 import { cn as m } from "../../../../utils/index.js";
-import { u as h, L as b } from "../../../../useBreadcrumb-B8DnuqkR.js";
+import { u as h, L as b } from "../../../../useBreadcrumb-C_Wb2cXs.js";
 import { breadcrumbLinkVariants as d, breadcrumbLabelVariants as k } from "./Item.variants.js";
 const g = ({
   isActive: r,

package/dist/components/Breadcrumb/components/Item/Item.types.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from '../../../../domain/theme';
+import { Step } from '../../Breadcrumb.types';
+export interface ItemProps extends Step {
+    isLast: boolean;
+    theme?: Theme;
+}

package/dist/components/Breadcrumb/components/Item/Item.variants.d.ts

@@ -0,0 +1,6 @@
+export declare const breadcrumbLinkVariants: (props?: ({
+    isActive?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const breadcrumbLabelVariants: (props?: ({
+    isActive?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Breadcrumb/components/Item/Item.variants.js

@@ -1,6 +1,12 @@
 import { c as e } from "../../../../index-D29mdTf5.js";
-const r = e(
-  ["text-sm", "leading-5", "text-gray-400"],
+const s = e(
+  [
+    "text-sm",
+    "leading-5",
+    "text-gray-400",
+    "font-semibold",
+    "dark:text-gray-400"
+  ],
   {
     variants: {
       isActive: {
@@ -23,7 +29,8 @@ const r = e(
           "group-[&:has(:focus-visible)]:rounded-xs",
           "group-hover:rounded-xs",
           "hover:no-underline",
-          "hover:text-gray-500"
+          "hover:text-gray-500",
+          "dark:hover:text-gray-300"
         ]
       },
       {
@@ -37,23 +44,27 @@ const r = e(
           "group-[&:has(:focus-visible)]:rounded-xs",
           "group-hover:rounded-xs",
           "hover:no-underline",
-          "hover:text-gray-500"
+          "hover:text-gray-500",
+          "dark:hover:text-gray-300"
         ]
       }
     ]
   }
-), o = e(["text-sm", "leading-5"], {
-  variants: {
-    isActive: {
-      true: "text-gray-500",
-      false: ["text-gray-400", "cursor-default"]
+), o = e(
+  ["text-sm", "leading-5", "font-semibold"],
+  {
+    variants: {
+      isActive: {
+        true: ["text-gray-600", "dark:text-gray-300"],
+        false: ["text-gray-400", "cursor-default"]
+      }
+    },
+    defaultVariants: {
+      isActive: !0
     }
-  },
-  defaultVariants: {
-    isActive: !0
   }
-});
+);
 export {
   o as breadcrumbLabelVariants,
-  r as breadcrumbLinkVariants
+  s as breadcrumbLinkVariants
 };

package/dist/components/Breadcrumb/components/index.d.ts

@@ -0,0 +1 @@
+export * from './Item/Item';

package/dist/components/Breadcrumb/hooks/useBreadcrumb.d.ts

@@ -0,0 +1,3 @@
+export declare const useBreadcrumb: () => {
+    isInsideRouter: boolean;
+};

package/dist/components/Breadcrumb/hooks/useBreadcrumb.js

@@ -1,4 +1,4 @@
-import { u } from "../../../useBreadcrumb-B8DnuqkR.js";
+import { u } from "../../../useBreadcrumb-C_Wb2cXs.js";
 export {
   u as useBreadcrumb
 };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { ButtonProps } from './Button.types';
+/**
+ * A customizable button component with multiple variants and styles.
+ *
+ * @example
+ * ```tsx
+ * // Primary button (default)
+ * <Button>Click me</Button>
+ *
+ * // Secondary button
+ * <Button variant="secondary">Secondary</Button>
+ *
+ * // Danger button
+ * <Button variant="danger">Delete</Button>
+ *
+ * // Link style button
+ * <Button variant="link">Learn more</Button>
+ *
+ * // Circle icon button
+ * <Button shape="circle" size="large"><Icon /></Button>
+ *
+ * // Compact button
+ * <Button appearance="compact">Compact</Button>
+ *
+ * // As child (renders child element with button styles)
+ * <Button asChild><a href="/page">Link</a></Button>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-button--docs Storybook}
+ */
+declare const Button: FC<ButtonProps>;
+export { Button };

package/dist/components/Button/Button.js

@@ -1,6 +1,6 @@
 import { jsx as u } from "react/jsx-runtime";
 import { forwardRef as c } from "react";
-import { S as l } from "../../index-DQH6odE9.js";
+import { S as l } from "../../index-BvoZGpli.js";
 import { cn as x } from "../../utils/index.js";
 import { buttonVariants as B } from "./Button.variants.js";
 const C = c(

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,24 @@
+import { VariantProps } from 'class-variance-authority';
+import { ButtonHTMLAttributes, Ref } from 'react';
+import { Theme } from '../../domain/theme';
+import { buttonVariants } from './Button.variants';
+/**
+ * Props for the Button component.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary">Click me</Button>
+ * <Button variant="secondary" disabled>Disabled</Button>
+ * <Button variant="danger" shape="circle"><TrashIcon /></Button>
+ * ```
+ */
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, VariantProps<typeof buttonVariants> {
+    /** Ref to the underlying button element */
+    ref?: Ref<HTMLButtonElement>;
+    /** Merge props onto child element instead of rendering a button */
+    asChild?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+}

package/dist/components/Button/Button.variants.d.ts

@@ -0,0 +1,8 @@
+export declare const buttonVariants: (props?: ({
+    variant?: "danger" | "link" | "primary" | "secondary" | "tertiary" | null | undefined;
+    shape?: "circle" | null | undefined;
+    version?: "default" | "alternate" | null | undefined;
+    disabled?: boolean | null | undefined;
+    size?: "medium" | "large" | null | undefined;
+    appearance?: "compact" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;