@konstructio/ui 0.1.2-alpha.52 → 0.1.2-alpha.53

package/dist/assets/icons/index.js

@@ -1,7 +1,124 @@
-import { S as a } from "../../loader-juvMSJ9L.js";
-import * as e from "react";
-const L = (t) => /* @__PURE__ */ e.createElement("svg", { width: 9, height: 9, viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M8.16667 0.8225L7.34417 0L4.08333 3.26083L0.8225 0L0 0.8225L3.26083 4.08333L0 7.34417L0.8225 8.16667L4.08333 4.90583L7.34417 8.16667L8.16667 7.34417L4.90583 4.08333L8.16667 0.8225Z", fill: "#364153" }));
+import { AccountsIcon as e } from "./components/Accounts.js";
+import { AddChartIcon as n } from "./components/AddChart.js";
+import { AppRepoIcon as p } from "./components/AppRepo.js";
+import { AppsIcon as f } from "./components/Apps.js";
+import { ArchivesIcon as x } from "./components/Archives.js";
+import { ArrowDownIcon as a } from "./components/ArrowDown.js";
+import { ArrowLeftIcon as s } from "./components/ArrowLeft.js";
+import { ArrowRightIcon as w } from "./components/ArrowRight.js";
+import { ArrowUpIcon as d } from "./components/ArrowUp.js";
+import { BarChartIcon as A } from "./components/BarChart.js";
+import { CalendarMonthIcon as g } from "./components/CalendarMonth.js";
+import { CheckIcon as v } from "./components/Check.js";
+import { CheckCircleIcon as O } from "./components/CheckCircle.js";
+import { ClockAlertIcon as L } from "./components/ClockAlert.js";
+import { ClockOutlineIcon as R } from "./components/ClockOutline.js";
+import { CloseIcon as y } from "./components/Close.js";
+import { CloudIcon as H } from "./components/Cloud.js";
+import { ClustersIcon as T } from "./components/Clusters.js";
+import { CogOutlineIcon as K } from "./components/CogOutline.js";
+import { CopyIcon as U } from "./components/Copy.js";
+import { CpuIcon as W } from "./components/Cpu.js";
+import { CubeIcon as j } from "./components/Cube.js";
+import { DatacenterIcon as z } from "./components/Datacenter.js";
+import { DeleteIcon as J } from "./components/Delete.js";
+import { DownloadIcon as Y } from "./components/Download.js";
+import { EditIcon as _ } from "./components/Edit.js";
+import { EllipsesIcon as oo } from "./components/Ellipses.js";
+import { EnvironmentsIcon as eo } from "./components/Environments.js";
+import { ErrorIcon as no } from "./components/Error.js";
+import { ErrorOutlineIcon as po } from "./components/ErrorOutline.js";
+import { ExclamationIcon as fo } from "./components/Exclamation.js";
+import { GitIcon as xo } from "./components/Git.js";
+import { GitOpsCatalogIcon as ao } from "./components/GitOpsCatalog.js";
+import { GridViewIcon as so } from "./components/GridView.js";
+import { HelpIcon as wo } from "./components/Help.js";
+import { HideOutlineIcon as ho } from "./components/HideOutline.js";
+import { HomeIcon as Po } from "./components/Home.js";
+import { IdIcon as ko } from "./components/Id.js";
+import { InformationOutlineIcon as Eo } from "./components/InformationOutline.js";
+import { InvoiceListIcon as So } from "./components/InvoiceList.js";
+import { KeyIcon as Do } from "./components/Key.js";
+import { LoaderIcon as bo } from "./components/Loader.js";
+import { NetworkIcon as Go } from "./components/Network.js";
+import { PagesStackIcon as No } from "./components/PagesStack.js";
+import { PageviewIcon as Bo } from "./components/Pageview.js";
+import { PeopleIcon as Mo } from "./components/People.js";
+import { PhotoLibraryIcon as Vo } from "./components/PhotoLibrary.js";
+import { PipelineIcon as Xo } from "./components/Pipeline.js";
+import { PlusIcon as qo } from "./components/Plus.js";
+import { PowerSettingsIcon as Fo } from "./components/PowerSettings.js";
+import { PreviewIcon as Qo } from "./components/Preview.js";
+import { ReceiptLongIcon as Zo } from "./components/ReceiptLong.js";
+import { RefreshIcon as $o } from "./components/Refresh.js";
+import { ScatterPlotIcon as rr } from "./components/ScatterPlot.js";
+import { SearchIcon as tr } from "./components/Search.js";
+import { ServerIcon as cr } from "./components/Server.js";
+import { StartIcon as mr } from "./components/Start.js";
+import { TabNewIcon as Ir } from "./components/TabNew.js";
+import { TeamsIcon as ir } from "./components/Teams.js";
+import { WarningIcon as lr } from "./components/Warning.js";
+import { XIcon as Cr } from "./components/X.js";
 export {
-  a as Loader,
-  L as X
+  e as AccountsIcon,
+  n as AddChartIcon,
+  p as AppRepoIcon,
+  f as AppsIcon,
+  x as ArchivesIcon,
+  a as ArrowDownIcon,
+  s as ArrowLeftIcon,
+  w as ArrowRightIcon,
+  d as ArrowUpIcon,
+  A as BarChartIcon,
+  g as CalendarMonthIcon,
+  O as CheckCircleIcon,
+  v as CheckIcon,
+  L as ClockAlertIcon,
+  R as ClockOutlineIcon,
+  y as CloseIcon,
+  H as CloudIcon,
+  T as ClustersIcon,
+  K as CogOutlineIcon,
+  U as CopyIcon,
+  W as CpuIcon,
+  j as CubeIcon,
+  z as DatacenterIcon,
+  J as DeleteIcon,
+  Y as DownloadIcon,
+  _ as EditIcon,
+  oo as EllipsesIcon,
+  eo as EnvironmentsIcon,
+  no as ErrorIcon,
+  po as ErrorOutlineIcon,
+  fo as ExclamationIcon,
+  xo as GitIcon,
+  ao as GitOpsCatalogIcon,
+  so as GridViewIcon,
+  wo as HelpIcon,
+  ho as HideOutlineIcon,
+  Po as HomeIcon,
+  ko as IdIcon,
+  Eo as InformationOutlineIcon,
+  So as InvoiceListIcon,
+  Do as KeyIcon,
+  bo as LoaderIcon,
+  Go as NetworkIcon,
+  No as PagesStackIcon,
+  Bo as PageviewIcon,
+  Mo as PeopleIcon,
+  Vo as PhotoLibraryIcon,
+  Xo as PipelineIcon,
+  qo as PlusIcon,
+  Fo as PowerSettingsIcon,
+  Qo as PreviewIcon,
+  Zo as ReceiptLongIcon,
+  $o as RefreshIcon,
+  rr as ScatterPlotIcon,
+  tr as SearchIcon,
+  cr as ServerIcon,
+  mr as StartIcon,
+  Ir as TabNewIcon,
+  ir as TeamsIcon,
+  lr as WarningIcon,
+  Cr as XIcon
 };

package/dist/{chevron-down-DgT-uSF9.js → chevron-down-BBFYYzZq.js}

@@ -1,4 +1,4 @@
-import { c as o } from "./createLucideIcon-D4r5Phnh.js";
+import { c as o } from "./createLucideIcon-CP-mMPfa.js";
 const n = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], e = o("chevron-down", n);
 export {
   e as C

package/dist/{chevron-right-DYvXLeql.js → chevron-right-SUh6si0f.js}

@@ -1,4 +1,4 @@
-import { c as o } from "./createLucideIcon-D4r5Phnh.js";
+import { c as o } from "./createLucideIcon-CP-mMPfa.js";
 const e = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], n = o("chevron-left", e);
 const t = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], h = o("chevron-right", t);
 export {

package/dist/{chevron-up-DrQr2Fwd.js → chevron-up-IlDPxR7j.js}

@@ -1,4 +1,4 @@
-import { c as o } from "./createLucideIcon-D4r5Phnh.js";
+import { c as o } from "./createLucideIcon-CP-mMPfa.js";
 const c = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]], n = o("chevron-up", c);
 export {
   n as C

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { AlertProps } from './Alert.types';
+/**
+ * An alert component for displaying feedback messages.
+ * Supports success, error, warning, and info variants with optional dismiss button.
+ *
+ * @example
+ * ```tsx
+ * // Success alert
+ * <Alert type="success" content="Changes saved successfully!" />
+ *
+ * // Error alert with close button
+ * <Alert
+ *   type="error"
+ *   content="Failed to save changes. Please try again."
+ *   showCloseButton
+ * />
+ *
+ * // Warning alert with custom content
+ * <Alert
+ *   type="warning"
+ *   content={
+ *     <div>
+ *       <strong>Warning:</strong> This action cannot be undone.
+ *     </div>
+ *   }
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-alert--docs Storybook}
+ */
+export declare const Alert: FC<AlertProps>;

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

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+import { alertVariants } from './Alert.variants';
+import { Theme } from '../../domain/theme';
+/**
+ * Props for the Alert component.
+ *
+ * @example
+ * ```tsx
+ * <Alert type="success" content="Operation completed successfully!" />
+ * <Alert type="error" content="Something went wrong" showCloseButton />
+ * <Alert type="warning" content={<span>Warning: <strong>Action required</strong></span>} />
+ * ```
+ */
+export interface AlertProps extends VariantProps<typeof alertVariants> {
+    /** Whether the alert can be dismissed (deprecated, use showCloseButton) */
+    dismissible?: boolean;
+    /** Alert message content (string or ReactNode) */
+    content: string | ReactNode;
+    /** Whether the alert is visible */
+    isVisible?: boolean;
+    /** Show close button to dismiss alert */
+    showCloseButton?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+}

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

@@ -0,0 +1,7 @@
+export declare const alertVariants: (props?: ({
+    type?: "sucess" | "info" | "warning" | "danger" | null | undefined;
+    isVisible?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const closeButtonVariants: (props?: ({
+    type?: "sucess" | "info" | "warning" | "danger" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { AlertDialogProps } from './AlertDialog.types';
+/**
+ * A confirmation dialog component built on Radix UI AlertDialog.
+ * Includes a trigger button that opens a modal with title, description, and action buttons.
+ *
+ * @example
+ * ```tsx
+ * // Basic confirmation dialog
+ * <AlertDialog
+ *   buttonTriggerText="Delete Item"
+ *   title="Confirm Deletion"
+ *   description="This action cannot be undone."
+ *   onConfirm={() => deleteItem()}
+ * />
+ *
+ * // Danger variant with custom button text
+ * <AlertDialog
+ *   buttonTriggerText="Remove"
+ *   buttonTriggerVariant="danger"
+ *   title="Remove User"
+ *   description="Are you sure you want to remove this user?"
+ *   buttonConfirm={{ text: "Yes, Remove" }}
+ *   buttonCancel={{ text: "No, Keep" }}
+ *   onConfirm={() => removeUser()}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-alertdialog--docs Storybook}
+ */
+declare const AlertDialog: FC<AlertDialogProps>;
+export { AlertDialog };

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

@@ -0,0 +1,58 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { AlertDialogProps as AlertDialogPrimitiveProps } from '@radix-ui/react-alert-dialog';
+import { Theme } from '../../domain/theme';
+import { ButtonProps } from '../Button/Button.types';
+type ButtonBaseProps = Partial<ButtonProps> & {
+    className?: string;
+    text?: string;
+};
+type ButtonCancelProps = ButtonBaseProps;
+type ButtonConfirmProps = ButtonBaseProps;
+/**
+ * Props for the AlertDialog component.
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog
+ *   buttonTriggerText="Delete"
+ *   buttonTriggerVariant="danger"
+ *   title="Confirm Deletion"
+ *   description="Are you sure you want to delete this item?"
+ *   onConfirm={() => handleDelete()}
+ * />
+ * ```
+ */
+export interface AlertDialogProps extends PropsWithChildren, AlertDialogPrimitiveProps {
+    /** Cancel button props (className, text, etc.) */
+    buttonCancel?: ButtonCancelProps;
+    /** Confirm button props (className, text, etc.) */
+    buttonConfirm?: ButtonConfirmProps;
+    /** Text for the trigger button */
+    buttonTriggerText?: string;
+    /** CSS classes for the trigger button */
+    buttonTriggerClassName?: string;
+    /** Variant for the trigger button */
+    buttonTriggerVariant?: ButtonProps['variant'];
+    /** Additional CSS classes */
+    className?: string;
+    /** Description text shown in the dialog */
+    description?: string | ReactNode;
+    isDescriptionChild?: boolean;
+    /** Whether to show the cancel button (default: true) */
+    showCancelButton?: boolean;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Title text shown in the dialog */
+    title?: string | ReactNode;
+    isTitleChild?: boolean;
+    /** CSS classes for the dialog wrapper */
+    wrapperClassName?: string;
+    /** Callback when confirm button is clicked */
+    onConfirm?: VoidFunction;
+    /** Callback when the button is clicked */
+    onClick?: VoidFunction;
+}
+export type UseAlertiDialogProps = {
+    onConfirm: AlertDialogProps['onConfirm'];
+};
+export {};

package/dist/components/AlertDialog/components/AlertDialogTrigger.d.ts

@@ -0,0 +1,2 @@
+import { AlertDialogTriggerProps } from './AlertDialogTrigger.types';
+export declare const AlertDialogTrigger: import('react').ForwardRefExoticComponent<AlertDialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/AlertDialog/components/AlertDialogTrigger.types.d.ts

@@ -0,0 +1,10 @@
+import { ButtonProps } from '../../Button/Button.types';
+import { Theme } from '../../../domain/theme';
+export interface AlertDialogTriggerProps {
+    'data-theme'?: Theme;
+    variant?: ButtonProps['variant'];
+    className?: string;
+    text?: string;
+    onOpen: VoidFunction;
+    onClick?: VoidFunction;
+}

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

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

package/dist/components/AlertDialog/hooks/index.d.ts

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

package/dist/components/AlertDialog/hooks/useAlertDialog.d.ts

@@ -0,0 +1,7 @@
+import { UseAlertiDialogProps } from '../AlertDialog.types';
+export declare const useAlertDialog: ({ onConfirm }: UseAlertiDialogProps) => {
+    isOpen: boolean;
+    handleCancel: () => void;
+    handleConfirm: () => void;
+    handleOpen: () => void;
+};

package/dist/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,31 @@
+import { AutocompleteProps } from './Autocomplete.types';
+/**
+ * An autocomplete/typeahead input component that suggests options as you type.
+ *
+ * @example
+ * ```tsx
+ * // Basic autocomplete
+ * <Autocomplete
+ *   label="Programming Language"
+ *   options={[
+ *     { value: 'JavaScript' },
+ *     { value: 'TypeScript' },
+ *     { value: 'Python' },
+ *   ]}
+ *   placeholder="Type to search..."
+ *   onChange={(value) => setLanguage(value)}
+ * />
+ *
+ * // With custom empty state
+ * <Autocomplete
+ *   options={users}
+ *   placeholder="Search users..."
+ *   placeHolderEmptyValues="No users found"
+ *   onChange={handleUserSelect}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-autocomplete--docs Storybook}
+ */
+declare const Autocomplete: import('react').ForwardRefExoticComponent<AutocompleteProps & import('react').RefAttributes<HTMLInputElement>>;
+export { Autocomplete };

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

@@ -0,0 +1,48 @@
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { autocompleteVariants } from './Autocomplete.variants';
+/**
+ * Option type for Autocomplete suggestions.
+ */
+export type Option = {
+    /** The value to display and select */
+    value: string;
+};
+/**
+ * Props for the Autocomplete component.
+ *
+ * @example
+ * ```tsx
+ * <Autocomplete
+ *   label="Search"
+ *   options={[{ value: 'React' }, { value: 'Vue' }, { value: 'Angular' }]}
+ *   placeholder="Search frameworks..."
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+export interface AutocompleteProps extends VariantProps<typeof autocompleteVariants> {
+    /** Disable browser autocomplete (default: 'off') */
+    autoComplete?: 'off';
+    /** Additional CSS classes */
+    className?: string;
+    /** Label displayed above the input */
+    label?: string;
+    /** CSS classes for the label */
+    labelClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Array of options to suggest */
+    options: Option[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Text shown when no options match */
+    placeHolderEmptyValues?: string | ReactNode;
+    /** CSS classes for empty state text */
+    placeHolderEmptyValuesClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Callback when a value is selected */
+    onChange(value: string): void;
+}

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

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

package/dist/components/Autocomplete/components/List/List.d.ts

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

package/dist/components/Autocomplete/components/List/List.types.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentRef, ReactNode, RefObject } from 'react';
+import { Option } from '../../Autocomplete.types';
+import { autocompleteVariants } from '../../Autocomplete.variants';
+export interface Props extends VariantProps<typeof autocompleteVariants> {
+    className?: string;
+    inputRef: RefObject<ComponentRef<'input'> | null>;
+    wrapperRef: RefObject<ComponentRef<'div'> | null>;
+    options: Option[];
+    placeholder: string | ReactNode;
+    placeholderClassName?: string;
+    onClick(value: string): void;
+}

package/dist/components/Autocomplete/components/List/List.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const listVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const emptyListVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const listItemVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const buttonVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

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

package/dist/components/Autocomplete/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useAutocomplete';
+export * from './useNavigationList';

package/dist/components/Autocomplete/hooks/useAutocomplete.d.ts

@@ -0,0 +1,17 @@
+import { ChangeEvent, ComponentRef, RefObject } from 'react';
+import { Option } from '../Autocomplete.types';
+type UseAutocompleteProps = {
+    options: Option[];
+    inputRef: RefObject<ComponentRef<'input'> | null>;
+    wrapperRef: RefObject<ComponentRef<'div'> | null>;
+    onChange(value: string): void;
+};
+export declare const useAutocomplete: ({ options, inputRef, wrapperRef, onChange, }: UseAutocompleteProps) => {
+    inputRef: RefObject<HTMLInputElement | null>;
+    newOptions: Option[];
+    showOptions: boolean;
+    value: string;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleSelectValue: (value: string) => void;
+};
+export {};

package/dist/components/Autocomplete/hooks/useNavigationList.d.ts

@@ -0,0 +1,10 @@
+import { ComponentRef, RefObject } from 'react';
+import { Option } from '../Autocomplete.types';
+type UseNavigationListProps = {
+    ulRef: RefObject<ComponentRef<'ul'> | null>;
+    inputRef: RefObject<ComponentRef<'input'> | null>;
+    wrapperRef: RefObject<ComponentRef<'div'> | null>;
+    options: Option[];
+};
+export declare const useNavigationUlList: ({ ulRef, inputRef, wrapperRef, options, }: UseNavigationListProps) => void;
+export {};

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

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { BadgeProps } from './Badge.types';
+/**
+ * A badge/tag component for status indicators and labels.
+ * Supports multiple variants, icons, loading state, and dismissible mode.
+ *
+ * @example
+ * ```tsx
+ * // Basic badge
+ * <Badge label="Active" variant="success" />
+ *
+ * // Badge with icon
+ * <Badge label="Settings" leftIcon={<SettingsIcon />} />
+ *
+ * // Dismissible badge
+ * <Badge
+ *   label="Tag"
+ *   dismissible
+ *   onDismiss={() => removeTag()}
+ * />
+ *
+ * // Clickable badge
+ * <Badge
+ *   label="Filter"
+ *   onClick={() => applyFilter()}
+ * />
+ *
+ * // Loading badge
+ * <Badge label="Processing" loading />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-badge--docs Storybook}
+ */
+export declare const Badge: FC<BadgeProps>;

package/dist/components/Badge/Badge.js

@@ -1,11 +1,11 @@
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
-import { useRef as y, useState as w, useCallback as S, useEffect as x } from "react";
-import { S as V } from "../../loader-juvMSJ9L.js";
-import { cn as c } from "../../utils/index.js";
-import { buttonDismissVariants as D, badgeVariants as j } from "./Badge.variants.js";
+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 { X as E } from "../../x-BXShoIAM.js";
-const q = ({
+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,
@@ -16,15 +16,15 @@ const q = ({
   size: l,
   variant: m,
   onClick: e,
-  onDismiss: d
+  onDismiss: c
 }) => {
-  const a = y(null), [v, N] = w("visible"), g = S(
+  const a = g(null), [N, v] = w("visible"), y = x(
     (t) => {
-      t.stopPropagation(), d?.(), N("hidden");
+      t.stopPropagation(), c?.(), v("hidden");
     },
-    [d]
+    [c]
   );
-  return x(() => {
+  return V(() => {
     const t = new AbortController();
     return a.current?.addEventListener(
       "animationend",
@@ -33,11 +33,11 @@ const q = ({
       },
       { signal: t.signal }
     ), () => t.abort();
-  }, []), /* @__PURE__ */ u(
+  }, []), /* @__PURE__ */ d(
     "span",
     {
       ref: a,
-      className: c(j({ variant: m, size: l, className: b }), {
+      className: u(S({ variant: m, size: l, className: b }), {
         "select-none": !h,
         "cursor-pointer": e
       }),
@@ -47,17 +47,23 @@ const q = ({
       "aria-label": e ? `${r} badge` : void 0,
       "aria-busy": n,
       "aria-live": "polite",
-      "data-state": v,
+      "data-state": N,
       children: [
-        n && /* @__PURE__ */ s(V, { className: "h-3 w-3 animate-spin animate-duration-time-2" }),
+        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__ */ u(
+        f ? /* @__PURE__ */ d(
           "button",
           {
             type: "button",
-            className: c(D({ size: l, variant: m })),
-            onClick: g,
+            className: u(D({ size: l, variant: m })),
+            onClick: y,
             "aria-label": "Dismiss",
             children: [
               /* @__PURE__ */ s(E, { className: "h-full w-full" }),
@@ -70,5 +76,5 @@ const q = ({
   );
 };
 export {
-  q 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;
+};