@sero-ai/ui 0.3.2 → 0.4.0

package/dist/components/dashboard/catalog.js

@@ -0,0 +1,322 @@
+const dashboardComponentCatalog = [
+  // ── Layout and structure ──────────────────────────────────────
+  {
+    name: "WidgetContent",
+    category: "layout",
+    kind: "composite",
+    summary: "Full-height widget frame with standard padding and a container-query boundary.",
+    useWhen: "As the outermost element of every dashboard widget.",
+    related: ["Stack", "Inline"],
+    status: "stable",
+    example: '<WidgetContent><Stack gap="sm">\u2026</Stack></WidgetContent>'
+  },
+  {
+    name: "Stack",
+    category: "layout",
+    kind: "composite",
+    summary: "Vertical layout with semantic spacing, alignment and optional scrolling.",
+    useWhen: "For the primary top-to-bottom content flow inside a widget.",
+    related: ["Inline", "WidgetContent"],
+    status: "stable",
+    example: '<Stack gap="sm" scroll>\u2026</Stack>'
+  },
+  {
+    name: "Inline",
+    category: "layout",
+    kind: "composite",
+    summary: "Horizontal layout with spacing, alignment, wrap and justify.",
+    useWhen: "For a row of items such as a header with a trailing action.",
+    related: ["Stack"],
+    status: "stable",
+    example: '<Inline justify="between" align="center">\u2026</Inline>'
+  },
+  {
+    name: "Grid",
+    category: "layout",
+    kind: "composite",
+    summary: "Responsive grid with bounded columns and gap.",
+    useWhen: "For metric and summary layouts that reflow by width.",
+    related: ["MetricGroup"],
+    status: "stable",
+    example: '<Grid columns="auto" minColumnWidth={120}>\u2026</Grid>'
+  },
+  {
+    name: "Section",
+    category: "layout",
+    kind: "composite",
+    summary: "Compact section with optional heading, description and trailing action.",
+    useWhen: "To group related content under a labelled heading.",
+    related: ["Divider", "Heading"],
+    status: "stable",
+    example: '<Section heading="Summary" action={\u2026}>\u2026</Section>'
+  },
+  {
+    name: "Divider",
+    category: "layout",
+    kind: "composite",
+    summary: "Compact horizontal or vertical divider built on Separator.",
+    useWhen: "To separate sections without a heavy border.",
+    related: ["Section"],
+    status: "stable",
+    example: '<Divider spacing="sm" />'
+  },
+  // ── Typography and media ──────────────────────────────────────
+  {
+    name: "Text",
+    category: "typography",
+    kind: "composite",
+    summary: "Semantic text variants (body, label, supporting, muted, numeric) with truncation.",
+    useWhen: "For any text, instead of ad-hoc font-size utilities.",
+    related: ["Heading"],
+    status: "stable",
+    example: '<Text variant="label">Jobs</Text>'
+  },
+  {
+    name: "Heading",
+    category: "typography",
+    kind: "composite",
+    summary: "Compact heading levels and sizes that keep correct HTML semantics.",
+    useWhen: "For section and view titles.",
+    related: ["Section", "Text"],
+    status: "stable",
+    example: '<Heading level={2} size="md">Overview</Heading>'
+  },
+  {
+    name: "Icon",
+    category: "typography",
+    kind: "composite",
+    summary: "Consistent icon wrapper for size, tone and accessibility.",
+    useWhen: "To render an icon component with a shared size and tone.",
+    related: ["IconButton"],
+    status: "stable",
+    example: '<Icon icon={Clock} size="sm" tone="warning" />'
+  },
+  // ── Data display ──────────────────────────────────────────────
+  {
+    name: "Metric",
+    category: "data-display",
+    kind: "composite",
+    summary: "Label + value with optional icon, supporting text and trend.",
+    useWhen: "To show a single number inline.",
+    related: ["MetricCard", "MetricGroup"],
+    status: "stable",
+    example: '<Metric label="Jobs" value={6} />'
+  },
+  {
+    name: "MetricCard",
+    category: "data-display",
+    kind: "composite",
+    summary: "A contained surface for a Metric or compact summary.",
+    useWhen: "To give a metric its own bounded card.",
+    related: ["Metric", "MetricGroup"],
+    status: "stable",
+    example: '<MetricCard><Metric label="Jobs" value={6} /></MetricCard>'
+  },
+  {
+    name: "MetricGroup",
+    category: "data-display",
+    kind: "composite",
+    summary: "Arranges multiple metrics responsively in a bounded grid.",
+    useWhen: "To show several metrics that reflow by width.",
+    related: ["Metric", "Grid"],
+    status: "stable",
+    example: "<MetricGroup><Metric \u2026 /><Metric \u2026 /></MetricGroup>"
+  },
+  {
+    name: "Status",
+    category: "data-display",
+    kind: "composite",
+    summary: "Semantic status dot, label or pill with neutral/success/warning/error/info tones.",
+    useWhen: "To show a health or state indicator. Map domain status onto a tone.",
+    related: ["Badge"],
+    status: "stable",
+    example: '<Status tone="success">Active</Status>'
+  },
+  {
+    name: "Badge",
+    category: "data-display",
+    kind: "primitive",
+    summary: "Existing badge primitive, extended with success/warning/info tones.",
+    useWhen: "For compact counts, tags and category labels.",
+    related: ["Status"],
+    status: "stable",
+    example: '<Badge variant="success">Passed</Badge>'
+  },
+  {
+    name: "KeyValue",
+    category: "data-display",
+    kind: "composite",
+    summary: "A single label/value row with predictable alignment and truncation.",
+    useWhen: "For metadata, totals and configuration summaries.",
+    related: ["KeyValueList"],
+    status: "stable",
+    example: '<KeyValue label="Region" value="eu-west-1" mono />'
+  },
+  {
+    name: "KeyValueList",
+    category: "data-display",
+    kind: "composite",
+    summary: "A vertical list of KeyValue rows.",
+    useWhen: "For a block of metadata pairs.",
+    related: ["KeyValue"],
+    status: "stable",
+    example: "<KeyValueList><KeyValue \u2026 /></KeyValueList>"
+  },
+  {
+    name: "ItemList",
+    category: "data-display",
+    kind: "composite",
+    summary: "Compact rows with leading media, text, trailing metadata, actions and overflow.",
+    useWhen: "For entity lists (files, notes, results).",
+    related: ["ItemListItem", "ActivityList"],
+    status: "stable",
+    example: "<ItemList overflowCount={3}><ItemListItem \u2026 /></ItemList>"
+  },
+  {
+    name: "ItemListItem",
+    category: "data-display",
+    kind: "composite",
+    summary: "A single compact list row with media, primary/secondary text and actions.",
+    useWhen: "As the row inside an ItemList.",
+    related: ["ItemList"],
+    status: "stable",
+    example: '<ItemListItem primary="Report.pdf" trailing="2h" />'
+  },
+  {
+    name: "ActivityList",
+    category: "data-display",
+    kind: "composite",
+    summary: "A chronological list for recent events with a shared overflow footer.",
+    useWhen: "For time-ordered activity or upcoming events.",
+    related: ["ActivityListItem", "ItemList"],
+    status: "stable",
+    example: "<ActivityList><ActivityListItem \u2026 /></ActivityList>"
+  },
+  {
+    name: "ActivityListItem",
+    category: "data-display",
+    kind: "composite",
+    summary: "An event row with a status marker or icon, label, timestamp and detail.",
+    useWhen: "As the row inside an ActivityList.",
+    related: ["ActivityList", "Status"],
+    status: "stable",
+    example: '<ActivityListItem label="Backup" timestamp="08:00" tone="success" />'
+  },
+  {
+    name: "ProgressRing",
+    category: "data-display",
+    kind: "composite",
+    summary: "Accessible circular progress / donut gauge, no charting dependency.",
+    useWhen: "For a bounded value such as a success rate or usage percentage.",
+    related: ["Metric"],
+    status: "stable",
+    example: '<ProgressRing value={75} label="Success rate" tone="success" />'
+  },
+  {
+    name: "StaleIndicator",
+    category: "data-display",
+    kind: "composite",
+    summary: "Compact hint that data may be out of date, with optional refresh action.",
+    useWhen: "When displayed data can lag its source.",
+    related: ["DataBoundary"],
+    status: "stable",
+    example: '<StaleIndicator lastUpdated="Updated 5m ago" onRefresh={\u2026} />'
+  },
+  // ── Runtime states and feedback ───────────────────────────────
+  {
+    name: "DataBoundary",
+    category: "state",
+    kind: "composite",
+    summary: "Selects presentation for loading / ready / empty / stale / error states.",
+    useWhen: "To switch a widget's content by data state without owning fetching.",
+    related: ["EmptyState", "MetricSkeleton", "StaleIndicator"],
+    status: "stable",
+    example: "<DataBoundary state={state} loading={\u2026} empty={\u2026} error={\u2026}>\u2026</DataBoundary>"
+  },
+  {
+    name: "EmptyState",
+    category: "state",
+    kind: "composite",
+    summary: "Compact empty state built on the Empty primitives.",
+    useWhen: "When there is nothing to show yet.",
+    related: ["DataBoundary"],
+    status: "stable",
+    example: '<EmptyState icon={Inbox} title="No activity yet" />'
+  },
+  {
+    name: "Alert",
+    category: "state",
+    kind: "primitive",
+    summary: "Existing alert primitive for inline warnings and errors.",
+    useWhen: "For a persistent inline message inside a widget or view.",
+    related: ["DataBoundary"],
+    status: "stable",
+    example: '<Alert variant="destructive">Failed to load</Alert>'
+  },
+  {
+    name: "MetricSkeleton",
+    category: "state",
+    kind: "composite",
+    summary: "Loading placeholder for a row of metrics.",
+    useWhen: "As the `loading` fallback for metric layouts.",
+    related: ["DataBoundary", "ListSkeleton"],
+    status: "stable",
+    example: "<MetricSkeleton count={3} />"
+  },
+  {
+    name: "ListSkeleton",
+    category: "state",
+    kind: "composite",
+    summary: "Loading placeholder for a list of rows.",
+    useWhen: "As the `loading` fallback for item lists.",
+    related: ["DataBoundary", "ItemList"],
+    status: "stable",
+    example: "<ListSkeleton count={4} />"
+  },
+  {
+    name: "ActivitySkeleton",
+    category: "state",
+    kind: "composite",
+    summary: "Loading placeholder for an activity list.",
+    useWhen: "As the `loading` fallback for activity feeds.",
+    related: ["DataBoundary", "ActivityList"],
+    status: "stable",
+    example: "<ActivitySkeleton count={4} />"
+  },
+  {
+    name: "Skeleton",
+    category: "state",
+    kind: "primitive",
+    summary: "Existing skeleton primitive for bespoke loading shapes.",
+    useWhen: "When the prebuilt skeleton patterns do not fit.",
+    related: ["MetricSkeleton", "ListSkeleton", "ActivitySkeleton"],
+    status: "stable",
+    example: '<Skeleton className="h-4 w-24" />'
+  },
+  // ── Actions ───────────────────────────────────────────────────
+  {
+    name: "Button",
+    category: "action",
+    kind: "primitive",
+    summary: "Existing button primitive, the standard text-action control.",
+    useWhen: "For a labelled action.",
+    related: ["IconButton"],
+    status: "stable",
+    example: '<Button size="sm">Open</Button>'
+  },
+  {
+    name: "IconButton",
+    category: "action",
+    kind: "composite",
+    summary: "Small icon-only button with a required accessible label.",
+    useWhen: "For a compact action such as refresh or dismiss.",
+    related: ["Button", "Icon"],
+    status: "stable",
+    example: '<IconButton icon={RotateCw} label="Refresh" size="xs" />'
+  }
+];
+var catalog_default = dashboardComponentCatalog;
+export {
+  dashboardComponentCatalog,
+  catalog_default as default
+};

package/dist/components/dashboard/data-boundary.cjs

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }var _jsxruntime = require('react/jsx-runtime');
+function DataBoundary({
+  state,
+  loading,
+  empty,
+  error,
+  stale,
+  children
+}) {
+  switch (state) {
+    case "loading":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: _nullishCoalesce(loading, () => ( null)) });
+    case "empty":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: _nullishCoalesce(empty, () => ( null)) });
+    case "error":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: _nullishCoalesce(error, () => ( null)) });
+    case "stale":
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        stale,
+        children
+      ] });
+    case "ready":
+    default:
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children });
+  }
+}
+
+
+exports.DataBoundary = DataBoundary;

package/dist/components/dashboard/data-boundary.d.cts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type DataState = "loading" | "ready" | "empty" | "stale" | "error";
+interface DataBoundaryProps {
+    state: DataState;
+    /** Shown while `state === "loading"`. */
+    loading?: React.ReactNode;
+    /** Shown while `state === "empty"`. */
+    empty?: React.ReactNode;
+    /** Shown while `state === "error"`. */
+    error?: React.ReactNode;
+    /** Banner rendered above children while `state === "stale"`. */
+    stale?: React.ReactNode;
+    /** Ready content, also shown (below `stale`) while `state === "stale"`. */
+    children?: React.ReactNode;
+}
+/** Selects presentation for the current data state. */
+declare function DataBoundary({ state, loading, empty, error, stale, children, }: DataBoundaryProps): react_jsx_runtime.JSX.Element;
+
+export { DataBoundary, type DataBoundaryProps, type DataState };

package/dist/components/dashboard/data-boundary.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type DataState = "loading" | "ready" | "empty" | "stale" | "error";
+interface DataBoundaryProps {
+    state: DataState;
+    /** Shown while `state === "loading"`. */
+    loading?: React.ReactNode;
+    /** Shown while `state === "empty"`. */
+    empty?: React.ReactNode;
+    /** Shown while `state === "error"`. */
+    error?: React.ReactNode;
+    /** Banner rendered above children while `state === "stale"`. */
+    stale?: React.ReactNode;
+    /** Ready content, also shown (below `stale`) while `state === "stale"`. */
+    children?: React.ReactNode;
+}
+/** Selects presentation for the current data state. */
+declare function DataBoundary({ state, loading, empty, error, stale, children, }: DataBoundaryProps): react_jsx_runtime.JSX.Element;
+
+export { DataBoundary, type DataBoundaryProps, type DataState };

package/dist/components/dashboard/data-boundary.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DataBoundary({
+  state,
+  loading,
+  empty,
+  error,
+  stale,
+  children
+}) {
+  switch (state) {
+    case "loading":
+      return /* @__PURE__ */ jsx(Fragment, { children: loading ?? null });
+    case "empty":
+      return /* @__PURE__ */ jsx(Fragment, { children: empty ?? null });
+    case "error":
+      return /* @__PURE__ */ jsx(Fragment, { children: error ?? null });
+    case "stale":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        stale,
+        children
+      ] });
+    case "ready":
+    default:
+      return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+}
+export {
+  DataBoundary
+};

package/dist/components/dashboard/empty-state.cjs

@@ -0,0 +1,49 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+
+
+
+
+
+
+
+var _empty = require('../ui/empty');
+var _typography = require('./typography');
+function EmptyState({
+  className,
+  icon,
+  title,
+  message,
+  action,
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _empty.Empty,
+    {
+      "data-slot": "empty-state",
+      className: _utils.cn.call(void 0, 
+        "flex-1 gap-3 border-0 p-4 md:p-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _empty.EmptyHeader, { className: "gap-1.5", children: [
+          icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _empty.EmptyMedia,
+            {
+              variant: "icon",
+              className: "size-9 border-[var(--surface-line)] bg-[var(--surface-flat)] text-[var(--text-muted)]",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _typography.Icon, { icon, size: "md", className: "text-current" })
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _empty.EmptyTitle, { className: "text-sm font-medium text-[var(--text-primary)]", children: title }),
+          message && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _empty.EmptyDescription, { className: "text-xs text-[var(--text-muted)]", children: message })
+        ] }),
+        action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _empty.EmptyContent, { className: "gap-2", children: action })
+      ]
+    }
+  );
+}
+
+
+exports.EmptyState = EmptyState;

package/dist/components/dashboard/empty-state.d.cts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Empty } from '../ui/empty.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface EmptyStateProps extends Omit<React.ComponentProps<typeof Empty>, "title"> {
+    /** Leading icon component (e.g. a lucide-react icon). */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    title: React.ReactNode;
+    message?: React.ReactNode;
+    /** Optional action (e.g. a Button). */
+    action?: React.ReactNode;
+}
+/** Compact empty state for widgets and plugin views. */
+declare function EmptyState({ className, icon, title, message, action, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+export { EmptyState, type EmptyStateProps };

package/dist/components/dashboard/empty-state.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Empty } from '../ui/empty.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface EmptyStateProps extends Omit<React.ComponentProps<typeof Empty>, "title"> {
+    /** Leading icon component (e.g. a lucide-react icon). */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    title: React.ReactNode;
+    message?: React.ReactNode;
+    /** Optional action (e.g. a Button). */
+    action?: React.ReactNode;
+}
+/** Compact empty state for widgets and plugin views. */
+declare function EmptyState({ className, icon, title, message, action, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+export { EmptyState, type EmptyStateProps };

package/dist/components/dashboard/empty-state.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle
+} from "../ui/empty";
+import { Icon } from "./typography";
+function EmptyState({
+  className,
+  icon,
+  title,
+  message,
+  action,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Empty,
+    {
+      "data-slot": "empty-state",
+      className: cn(
+        "flex-1 gap-3 border-0 p-4 md:p-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(EmptyHeader, { className: "gap-1.5", children: [
+          icon && /* @__PURE__ */ jsx(
+            EmptyMedia,
+            {
+              variant: "icon",
+              className: "size-9 border-[var(--surface-line)] bg-[var(--surface-flat)] text-[var(--text-muted)]",
+              children: /* @__PURE__ */ jsx(Icon, { icon, size: "md", className: "text-current" })
+            }
+          ),
+          /* @__PURE__ */ jsx(EmptyTitle, { className: "text-sm font-medium text-[var(--text-primary)]", children: title }),
+          message && /* @__PURE__ */ jsx(EmptyDescription, { className: "text-xs text-[var(--text-muted)]", children: message })
+        ] }),
+        action && /* @__PURE__ */ jsx(EmptyContent, { className: "gap-2", children: action })
+      ]
+    }
+  );
+}
+export {
+  EmptyState
+};

package/dist/components/dashboard/icon-button.cjs

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _utils = require('../../lib/utils');
+var _button = require('../ui/button');
+var _typography = require('./typography');
+const sizeMap = {
+  xs: "icon-xs",
+  sm: "icon-sm",
+  md: "icon"
+};
+const iconSizeMap = {
+  xs: "xs",
+  sm: "sm",
+  md: "md"
+};
+function IconButton({
+  className,
+  icon,
+  label,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _button.Button,
+    {
+      "data-slot": "icon-button",
+      type: "button",
+      variant,
+      size: sizeMap[size],
+      "aria-label": label,
+      title: label,
+      className: _utils.cn.call(void 0, "text-[var(--text-muted)]", className),
+      ...props,
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _typography.Icon, { icon, size: iconSizeMap[size], className: "text-current" })
+    }
+  );
+}
+
+
+exports.IconButton = IconButton;

package/dist/components/dashboard/icon-button.d.cts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Button } from '../ui/button.cjs';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+declare const sizeMap: {
+    readonly xs: "icon-xs";
+    readonly sm: "icon-sm";
+    readonly md: "icon";
+};
+interface IconButtonProps extends Omit<React.ComponentProps<typeof Button>, "size" | "children"> {
+    /** The icon component to render (e.g. a lucide-react icon). */
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Required accessible label — the control has no visible text. */
+    label: string;
+    size?: keyof typeof sizeMap;
+}
+/** A compact icon-only button with a required accessible label. */
+declare function IconButton({ className, icon, label, size, variant, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
+
+export { IconButton, type IconButtonProps };

package/dist/components/dashboard/icon-button.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { Button } from '../ui/button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+declare const sizeMap: {
+    readonly xs: "icon-xs";
+    readonly sm: "icon-sm";
+    readonly md: "icon";
+};
+interface IconButtonProps extends Omit<React.ComponentProps<typeof Button>, "size" | "children"> {
+    /** The icon component to render (e.g. a lucide-react icon). */
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Required accessible label — the control has no visible text. */
+    label: string;
+    size?: keyof typeof sizeMap;
+}
+/** A compact icon-only button with a required accessible label. */
+declare function IconButton({ className, icon, label, size, variant, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
+
+export { IconButton, type IconButtonProps };