@rojaostudio/ds 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Rojão Studio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# @rojaostudio/ds
+
+React components, styles and a React Native target for [Rojão DS](https://ds.rojao.ai).
+
+> **Only want the theme?** The engine is [`@rojaostudio/ds-core`](https://www.npmjs.com/package/@rojaostudio/ds-core) —
+> tokens and theme derivation, with **zero peer dependencies**. It won't make you declare React
+> or Tailwind.
+
+```bash
+npm i @rojaostudio/ds
+```
+
+```css
+/* your root stylesheet */
+@import "tailwindcss";
+@import "@rojaostudio/ds/styles/base.css";
+@import "@rojaostudio/ds/styles/themes/rojao.css";   /* or your own generated theme */
+```
+
+```tsx
+import { Button } from '@rojaostudio/ds/components/button';
+
+<Button variant="primary">Save</Button>
+```
+
+Then put the theme class on `<html>` — add `dark` for dark mode:
+
+```html
+<html class="theme-rojao">
+<html class="theme-rojao dark">
+```
+
+## Import the component, not the barrel
+
+```tsx
+import { Button } from '@rojaostudio/ds/components/button';   // preferred
+import { Button } from '@rojaostudio/ds/components';          // works, pulls the barrel
+```
+
+Both work. The deep path keeps your bundler from walking 83 modules to find one. On Next.js you
+can keep the barrel and add:
+
+```js
+// next.config.js
+experimental: { optimizePackageImports: ['@rojaostudio/ds'] }
+```
+
+## Requirements
+
+Tailwind CSS 4 and React 19. `base.css` uses `@theme inline`, so Tailwind 4 isn't optional here —
+it's the layer the utilities come from. If that's not your stack, `@rojaostudio/ds-core` gives you
+the tokens without any of it.
+
+## React Native
+
+```tsx
+import { DSThemeProvider } from '@rojaostudio/ds/native/components';
+
+<DSThemeProvider theme={yourBrand}>{children}</DSThemeProvider>
+```
+
+`theme` is optional — without it you get the default theme. Generate your own map from a brand
+definition with `@rojaostudio/ds-core`.
+
+NativeWind:
+
+```js
+presets: [require('nativewind/preset'), require('@rojaostudio/ds/native/preset')]
+```
+
+```css
+@import '@rojaostudio/ds/native/theme.css';
+```
+
+## Accessibility is checked, not claimed
+
+Every text role is measured against every surface, in both modes, on every build. Text and
+surface pairs meet **WCAG AA (4.5:1)**; control borders meet **1.4.11 (3:1)**. A regression in the
+derivation fails CI — it doesn't ship and get found later in an audit.
+
+## Em português
+
+O site é em português e gera o tema da sua marca sem escrever código:
+**[ds.rojao.ai](https://ds.rojao.ai)**.
+
+## License
+
+MIT — see [LICENSE](./LICENSE). The **name and logo are not**: see
+[TRADEMARK.md](https://github.com/rojaostudio/ds/blob/main/TRADEMARK.md).

package/dist/chunk-ORMEWXMH.js

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest
+};

package/dist/compat/generate.d.ts

@@ -0,0 +1,6 @@
+export * from '@rojaostudio/ds-core/generate';
+import '@rojaostudio/ds-core/recipes';
+import '@rojaostudio/ds-core/themes';
+import '@rojaostudio/ds-core/tokens';
+import 'lucide-react';
+import 'lucide-react-native';

package/dist/compat/generate.js

@@ -0,0 +1 @@
+export * from "@rojaostudio/ds-core/generate";

package/dist/compat/recipes.d.ts

@@ -0,0 +1 @@
+export * from '@rojaostudio/ds-core/recipes';

package/dist/compat/recipes.js

@@ -0,0 +1 @@
+export * from "@rojaostudio/ds-core/recipes";

package/dist/compat/themes.d.ts

@@ -0,0 +1 @@
+export * from '@rojaostudio/ds-core/themes';

package/dist/compat/themes.js

@@ -0,0 +1 @@
+export * from "@rojaostudio/ds-core/themes";

package/dist/compat/tokens.d.ts

@@ -0,0 +1 @@
+export * from '@rojaostudio/ds-core/tokens';

package/dist/compat/tokens.js

@@ -0,0 +1 @@
+export * from "@rojaostudio/ds-core/tokens";

package/dist/components/accordion.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface AccordionSingleProps {
+    type?: 'single';
+    defaultValue?: string;
+    value?: string | null;
+    onChange?: (value: string | null) => void;
+    collapsible?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+interface AccordionMultiProps {
+    type: 'multi';
+    defaultValue?: string[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    children: ReactNode;
+    className?: string;
+}
+type AccordionProps = AccordionSingleProps | AccordionMultiProps;
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps {
+    value: string;
+    title: ReactNode;
+    /** Subtítulo opcional ao lado do título (ex: contagem, tag). */
+    meta?: ReactNode;
+    children: ReactNode;
+    /** Ícone leading no header. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+declare function AccordionItem({ value, title, meta, children, icon, disabled }: AccordionItemProps): react.JSX.Element;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps };

package/dist/components/accordion.js

@@ -0,0 +1,95 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { forwardRef, useState, useId, useImperativeHandle, useRef } from "react";
+import { ChevronDown } from "lucide-react";
+import { createContext, useContext } from "react";
+const Ctx = createContext(null);
+const Accordion = forwardRef(function Accordion2(props, ref) {
+  var _a, _b;
+  const rootRef = useRef(null);
+  useImperativeHandle(ref, () => rootRef.current);
+  const isMulti = props.type === "multi";
+  const [internalSingle, setInternalSingle] = useState(
+    isMulti ? null : (_a = props.defaultValue) != null ? _a : null
+  );
+  const [internalMulti, setInternalMulti] = useState(
+    isMulti ? (_b = props.defaultValue) != null ? _b : [] : []
+  );
+  const isControlled = props.value !== void 0;
+  const isOpen = (v) => {
+    if (isMulti) {
+      const value2 = isControlled ? props.value : internalMulti;
+      return value2.includes(v);
+    }
+    const value = isControlled ? props.value : internalSingle;
+    return value === v;
+  };
+  const toggle = (v) => {
+    var _a2, _b2;
+    if (isMulti) {
+      const current = isControlled ? props.value : internalMulti;
+      const next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];
+      if (!isControlled) setInternalMulti(next);
+      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, next);
+    } else {
+      const single = props;
+      const current = isControlled ? props.value : internalSingle;
+      const collapsible = single.collapsible !== false;
+      const next = current === v ? collapsible ? null : current : v;
+      if (!isControlled) setInternalSingle(next);
+      (_b2 = single.onChange) == null ? void 0 : _b2.call(single, next);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Ctx.Provider, { value: { isOpen, toggle } }, /* @__PURE__ */ React.createElement("div", { ref: rootRef, className: ["border-y border-stroke-default divide-y divide-stroke-subtle", props.className].filter(Boolean).join(" ") }, props.children));
+});
+function AccordionItem({ value, title, meta, children, icon, disabled = false }) {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error("AccordionItem must be used inside Accordion");
+  const open = ctx.isOpen(value);
+  const id = useId();
+  const headerId = `${id}-header`;
+  const panelId = `${id}-panel`;
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h3", null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      id: headerId,
+      "aria-expanded": open,
+      "aria-controls": panelId,
+      disabled,
+      onClick: () => ctx.toggle(value),
+      className: [
+        "w-full flex items-center gap-3 py-3 px-4 min-h-control-md text-left transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:ring-inset",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "hover:bg-surface-raised"
+      ].join(" ")
+    },
+    icon && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-fg-muted [&_svg]:size-4" }, icon),
+    /* @__PURE__ */ React.createElement("span", { className: "flex-1 font-medium text-fg-primary text-label" }, title),
+    meta && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-caption text-fg-muted" }, meta),
+    /* @__PURE__ */ React.createElement(
+      ChevronDown,
+      {
+        size: 16,
+        className: ["shrink-0 text-fg-muted transition-transform", open ? "rotate-180" : ""].join(" ")
+      }
+    )
+  )), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      id: panelId,
+      role: "region",
+      "aria-labelledby": headerId,
+      className: [
+        "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+        open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ].join(" ")
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-4 text-label text-fg-secondary leading-relaxed" }, children))
+  ));
+}
+export {
+  Accordion,
+  AccordionItem
+};

package/dist/components/alert.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type AlertVariant = 'success' | 'danger' | 'warning' | 'info' | 'neutral';
+interface AlertProps {
+    variant?: AlertVariant;
+    title?: ReactNode;
+    children?: ReactNode;
+    /** Botão close (X). */
+    onClose?: () => void;
+    /** Action button inline (label + onClick). */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Ícone customizado (substitui o default da variant). */
+    icon?: ReactNode;
+    /** Esconde o ícone. default = false. */
+    hideIcon?: boolean;
+    className?: string;
+}
+declare function Alert({ variant, title, children, onClose, action, icon, hideIcon, className, }: AlertProps): react.JSX.Element;
+
+export { Alert, type AlertProps, type AlertVariant };

package/dist/components/alert.js

@@ -0,0 +1,72 @@
+import "../chunk-ORMEWXMH.js";
+import { CheckCircle, AlertCircle, AlertTriangle, Info, X } from "lucide-react";
+const VARIANTS = {
+  success: {
+    container: "bg-success-soft border-success-border text-success-text",
+    icon: /* @__PURE__ */ React.createElement(CheckCircle, { size: 16, className: "shrink-0 mt-0.5" }),
+    actionColor: "text-success-text hover:bg-success-soft/60"
+  },
+  danger: {
+    container: "bg-danger-soft border-danger-border text-danger-text",
+    icon: /* @__PURE__ */ React.createElement(AlertCircle, { size: 16, className: "shrink-0 mt-0.5" }),
+    actionColor: "text-danger-text hover:bg-danger-soft/60"
+  },
+  warning: {
+    container: "bg-warning-soft border-warning-border text-warning-text",
+    icon: /* @__PURE__ */ React.createElement(AlertTriangle, { size: 16, className: "shrink-0 mt-0.5" }),
+    actionColor: "text-warning-text hover:bg-warning-soft/60"
+  },
+  info: {
+    container: "bg-info-soft border-info-border text-info-text",
+    icon: /* @__PURE__ */ React.createElement(Info, { size: 16, className: "shrink-0 mt-0.5" }),
+    actionColor: "text-info-text hover:bg-info-soft/60"
+  },
+  neutral: {
+    container: "bg-neutral-soft border-neutral-border text-neutral-text",
+    icon: /* @__PURE__ */ React.createElement(Info, { size: 16, className: "shrink-0 mt-0.5" }),
+    actionColor: "text-neutral-text hover:bg-neutral-soft/60"
+  }
+};
+function Alert({
+  variant = "info",
+  title,
+  children,
+  onClose,
+  action,
+  icon,
+  hideIcon = false,
+  className = ""
+}) {
+  const { container, icon: defaultIcon, actionColor } = VARIANTS[variant];
+  const iconEl = hideIcon ? null : icon != null ? icon : defaultIcon;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: variant === "danger" ? "alert" : "status",
+      className: ["flex items-start gap-3 px-4 py-3 rounded-(--radius-card) border text-label", container, className].join(" ")
+    },
+    iconEl,
+    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, title && /* @__PURE__ */ React.createElement("p", { className: "font-medium leading-snug" }, title), children && /* @__PURE__ */ React.createElement("div", { className: ["leading-snug", title ? "mt-0.5 opacity-80" : ""].join(" ") }, children), action && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: action.onClick,
+        className: ["mt-2 inline-flex text-caption font-semibold px-2 py-1 -mx-2 rounded transition-colors", actionColor].join(" ")
+      },
+      action.label
+    )),
+    onClose && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        className: "shrink-0 opacity-60 hover:opacity-100 transition-opacity p-0.5 -m-0.5 rounded",
+        "aria-label": "Fechar"
+      },
+      /* @__PURE__ */ React.createElement(X, { size: 14 })
+    )
+  );
+}
+export {
+  Alert
+};

package/dist/components/avatar.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+
+/**
+ * Avatar — representação visual de usuário/entidade.
+ *
+ * Uso:
+ *   <Avatar src="/u.jpg" alt="Marcos" />
+ *   <Avatar name="Marcos Silva" />          // gera iniciais
+ *   <Avatar name="A" size="lg" />
+ *   <Avatar name="J" status="active" />     // dot indicador
+ *
+ * AvatarGroup — empilha avatares com overlap.
+ *   <AvatarGroup max={3}>
+ *     <Avatar name="A" />
+ *     <Avatar name="B" />
+ *     ...
+ *   </AvatarGroup>
+ */
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type AvatarStatus = 'active' | 'inactive' | 'pending' | 'error';
+interface AvatarProps {
+    src?: string;
+    alt?: string;
+    /** Nome completo — gera iniciais (até 2 letras). */
+    name?: string;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    /** Cor de fundo. default = brand-primary. */
+    variant?: 'brand' | 'neutral';
+    className?: string;
+}
+declare function initials(name: string): string;
+declare function Avatar({ src, alt, name, size, status, variant, className, }: AvatarProps): react.JSX.Element;
+interface AvatarGroupProps {
+    /** Máximo de avatares visíveis; o resto vira `+N`. default = 3. */
+    max?: number;
+    /** Sobreposição em px. default depende do size. */
+    spacing?: 'tight' | 'normal' | 'loose';
+    size?: AvatarSize;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function AvatarGroup({ max, spacing, size, children, className, }: AvatarGroupProps): react.JSX.Element;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, initials };

package/dist/components/avatar.js

@@ -0,0 +1,97 @@
+import "../chunk-ORMEWXMH.js";
+import { Children, isValidElement, cloneElement } from "react";
+const SIZE_CLASSES = {
+  xs: "size-6 text-[10px]",
+  sm: "size-8 text-caption",
+  md: "size-10 text-label",
+  lg: "size-12 text-body",
+  xl: "size-16 text-heading-sm"
+};
+const STATUS_DOT_SIZE = {
+  xs: "size-1.5",
+  sm: "size-2",
+  md: "size-2.5",
+  lg: "size-3",
+  xl: "size-3.5"
+};
+const STATUS_COLOR = {
+  active: "bg-success",
+  inactive: "bg-state-disabled-text",
+  pending: "bg-warning",
+  error: "bg-danger"
+};
+function initials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function Avatar({
+  src,
+  alt,
+  name,
+  size = "md",
+  status,
+  variant = "brand",
+  className = ""
+}) {
+  var _a;
+  const showImage = !!src;
+  const label = (_a = alt != null ? alt : name) != null ? _a : "Avatar";
+  const bgClass = variant === "brand" ? "bg-brand-primary text-brand-on-primary" : "bg-surface-raised text-fg-secondary";
+  return /* @__PURE__ */ React.createElement("div", { className: ["relative inline-flex shrink-0", className].join(" ") }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: [
+        "inline-flex items-center justify-center rounded-full overflow-hidden font-semibold select-none",
+        SIZE_CLASSES[size],
+        showImage ? "" : bgClass
+      ].join(" "),
+      "aria-label": label,
+      role: "img"
+    },
+    showImage ? /* @__PURE__ */ React.createElement("img", { src, alt: label, className: "size-full object-cover" }) : /* @__PURE__ */ React.createElement("span", null, initials(name != null ? name : "?"))
+  ), status && /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: [
+        "absolute bottom-0 right-0 rounded-full ring-2 ring-surface-default",
+        STATUS_DOT_SIZE[size],
+        STATUS_COLOR[status]
+      ].join(" "),
+      "aria-label": `status: ${status}`
+    }
+  ));
+}
+const SPACING_CLASS = {
+  tight: "-ml-3",
+  normal: "-ml-2",
+  loose: "-ml-1"
+};
+function AvatarGroup({
+  max = 3,
+  spacing = "normal",
+  size = "md",
+  children,
+  className = ""
+}) {
+  const items = Children.toArray(children).filter(isValidElement);
+  const visible = items.slice(0, max);
+  const overflow = items.length - visible.length;
+  return /* @__PURE__ */ React.createElement("div", { className: ["inline-flex items-center", className].join(" "), role: "group" }, visible.map((child, idx) => {
+    var _a;
+    return /* @__PURE__ */ React.createElement("div", { key: idx, className: idx === 0 ? "" : SPACING_CLASS[spacing] }, cloneElement(child, { size: (_a = child.props.size) != null ? _a : size }));
+  }), overflow > 0 && /* @__PURE__ */ React.createElement("div", { className: SPACING_CLASS[spacing] }, /* @__PURE__ */ React.createElement(
+    Avatar,
+    {
+      name: `+${overflow}`,
+      variant: "neutral",
+      size
+    }
+  )));
+}
+export {
+  Avatar,
+  AvatarGroup,
+  initials
+};

package/dist/components/badge.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+
+declare const LABEL_VARIANTS: {
+    readonly default: "bg-surface-default text-fg-muted border border-stroke-default";
+    readonly primary: "bg-brand-primary text-brand-on-primary";
+    readonly success: "bg-success-soft text-success-text border border-success-border";
+    readonly warning: "bg-warning-soft text-warning-text border border-warning-border";
+    readonly danger: "bg-danger-soft  text-danger-text  border border-danger-border";
+    readonly info: "bg-info-soft    text-info-text    border border-info-border";
+    readonly neutral: "bg-neutral-soft text-neutral-text border border-neutral-border";
+};
+declare const STATUS_VARIANTS: {
+    readonly active: {
+        readonly dot: "bg-success";
+        readonly text: "text-success-text";
+    };
+    readonly inactive: {
+        readonly dot: "bg-state-disabled-text";
+        readonly text: "text-state-disabled-text";
+    };
+    readonly pending: {
+        readonly dot: "bg-warning";
+        readonly text: "text-warning-text";
+    };
+    readonly error: {
+        readonly dot: "bg-danger";
+        readonly text: "text-danger-text";
+    };
+};
+type BadgeVariant = keyof typeof LABEL_VARIANTS | keyof typeof STATUS_VARIANTS | 'count' | 'dot';
+type BadgeSize = 'sm' | 'md';
+interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Para variant="count": número exibido. Acima de `max` mostra "max+". */
+    count?: number;
+    /** Limite pra count overflow. default = 99. */
+    max?: number;
+    /** Para variant="dot": cor da bolinha (default = brand-primary). */
+    dotColor?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+    children?: React.ReactNode;
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant };