@boxcustodia/library 2.0.0-alpha.14 → 2.0.0-alpha.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.16",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/__doc__/Changelog.mdx

@@ -1,6 +1,6 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-import { ChangelogViewer } from "./Examples";
-
-<Meta title="Documentation/Changelog" />
-
-<ChangelogViewer />
+import { Meta } from "@storybook/addon-docs/blocks";
+import { ChangelogViewer } from "./Examples";
+
+<Meta title="Documentation/Changelog" />
+
+<ChangelogViewer />

package/src/__doc__/V2.mdx

@@ -283,15 +283,16 @@ import { buttonVariants } from "@boxcustodia/library";
 + <Button onClick={() => { void save(); }}>Guardar</Button>
 ```
 
-**`iconPosition` eliminado.** La posición del ícono ahora se controla con el atributo `data-icon` en el elemento del ícono:
+**Props `icon` y `iconPosition` eliminadas.** Los íconos se componen directamente como `children` y la posición la define el orden en el JSX. Sin atributos extra ni configuración:
 
 ```diff
+- <Button icon={<TrashIcon />}>Borrar</Button>
++ <Button><TrashIcon />Borrar</Button>
+
 - <Button icon={<TrashIcon />} iconPosition="inline-end">Borrar</Button>
-+ <Button icon={<TrashIcon data-icon="inline-end" />}>Borrar</Button>
++ <Button>Borrar<TrashIcon /></Button>
 ```
 
-Valores aceptados: `inline-start` (default) o `inline-end`.
-
 **`shape` eliminado.** Para esquinas custom, override con `className="rounded-..."`.
 
 **`loaderReplace` y `append` eliminados.** El loader siempre **reemplaza** el contenido (efecto antes conocido como `loaderReplace`). El efecto `append` (loader al lado del contenido) ya no se soporta.
@@ -973,15 +974,13 @@ Para comportamientos que `classNames` no cubre (handlers en `<tr>`, refs, custom
 + <Tag className="bg-success/10 text-success">Done</Tag>
 ```
 
-**`icon` eliminado.** v1 tenía slot dedicado para ícono. v2 acepta el ícono como children, posicionado vía atributo `data-icon`:
+**`icon` eliminado.** v1 tenía slot dedicado para ícono. v2 acepta el ícono como children — la posición la define el orden en el JSX:
 
 ```diff
 - <Tag icon={<Check />}>Approved</Tag>
-+ <Tag><Check data-icon="inline-start" /> Approved</Tag>
++ <Tag><Check /> Approved</Tag>
 ```
 
-Valores aceptados: `inline-start` (antes del texto) o `inline-end` (después).
-
 **`rounded` eliminado.** v2 siempre renderea pill (rounded total). Para otros radios usá `className`:
 
 ```diff
@@ -1002,7 +1001,7 @@ Valores aceptados: `inline-start` (antes del texto) o `inline-end` (después).
 - <Tag closable onClose={handleRemove}>Item</Tag>
 + <Tag>
 +   Item
-+   <button data-icon="inline-end" onClick={handleRemove}>
++   <button onClick={handleRemove}>
 +     <XIcon />
 +   </button>
 + </Tag>

package/src/components/auto-complete/auto-complete.stories.tsx

@@ -74,7 +74,6 @@ const meta: Meta<typeof Autocomplete> = {
     startAddon: { control: false },
     classNames: { control: false },
   },
-  tags: ["beta"],
 };
 
 export default meta;

package/src/components/button/button.stories.tsx

@@ -24,7 +24,6 @@ const meta: Meta<typeof Button> = {
   args: {
     children: "Click me",
   },
-  tags: ["beta"],
   parameters: { layout: "centered" },
 };
 
@@ -87,30 +86,42 @@ export const Sizes: Story = {
 };
 
 /**
- * Pass any icon element to the `icon` prop. It renders before the label by default
- * (`inline-start`). Add `data-icon="inline-end"` to the icon element to move it after
- * the label. Use an icon-only size (`icon`, `icon-sm`, etc.) for square icon buttons.
+ * Compose icons directly as children. Position is determined by JSX order —
+ * place the icon before or after the label. Use an icon-only size (`icon`,
+ * `icon-sm`, etc.) for square icon buttons.
  */
 export const WithIcon: Story = {
   render: (args) => (
     <div className="flex flex-wrap items-center gap-4">
-      <Button {...args} icon={<SearchIcon />}>
+      <Button {...args}>
+        <SearchIcon />
         Search
       </Button>
-      <Button {...args} icon={<SearchIcon data-icon="inline-end" />}>
+      <Button {...args}>
         Search
+        <SearchIcon />
+      </Button>
+      <Button size="icon">
+        <SearchIcon />
       </Button>
-      <Button icon={<SearchIcon />} size="icon" />
     </div>
   ),
   parameters: {
     docs: {
       source: {
-        code: `<Button icon={<SearchIcon />}>Search</Button>
+        code: `<Button>
+  <SearchIcon />
+  Search
+</Button>
 
-<Button icon={<SearchIcon data-icon="inline-end" />}>Search</Button>
+<Button>
+  Search
+  <SearchIcon />
+</Button>
 
-<Button icon={<SearchIcon />} size="icon" />`,
+<Button size="icon">
+  <SearchIcon />
+</Button>`,
       },
     },
   },
@@ -139,10 +150,13 @@ export const Loading: Story = {
           </p>
           <div className="flex flex-wrap items-center gap-3">
             <Button onClick={sleep}>Save</Button>
-            <Button onClick={sleep} icon={<SearchIcon />}>
+            <Button onClick={sleep}>
+              <SearchIcon />
               Search
             </Button>
-            <Button onClick={sleep} icon={<SearchIcon />} size="icon" />
+            <Button onClick={sleep} size="icon">
+              <SearchIcon />
+            </Button>
           </div>
         </section>
 
@@ -154,10 +168,13 @@ export const Loading: Story = {
           </p>
           <div className="flex flex-wrap items-center gap-3">
             <Button loading>Save</Button>
-            <Button loading icon={<SearchIcon />}>
+            <Button loading>
+              <SearchIcon />
               Search
             </Button>
-            <Button loading icon={<SearchIcon />} size="icon" />
+            <Button loading size="icon">
+              <SearchIcon />
+            </Button>
           </div>
         </section>
 

package/src/components/button/button.tsx

@@ -1,18 +1,18 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import { type ComponentProps, cloneElement, type ReactElement } from "react";
+import { type ComponentProps } from "react";
 import { cn } from "../../lib";
 import { BaseButton } from "./components/base-button";
 
 const buttonVariants = cva(
   [
-    "group/button relative inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding",
+    "group/button relative inline-flex shrink-0 items-center justify-center gap-1 rounded-lg border border-transparent bg-clip-padding",
     "text-sm font-medium whitespace-nowrap transition-all outline-none select-none",
     "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
     "active:not-aria-[haspopup]:translate-y-px",
     "disabled:pointer-events-none disabled:opacity-50",
     "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    "[&[data-loading]>:not([data-loader])]:opacity-0",
+    "[&[data-loading]>[data-content]]:invisible",
     "[&[data-loading]]:pointer-events-none",
   ],
   {
@@ -31,11 +31,10 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default:
-          "h-8 [--btn-gap:0.375rem] px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 [--btn-gap:0.25rem] rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 [--btn-gap:0.25rem] rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 [--btn-gap:0.375rem] px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        default: "h-8 px-2.5",
+        xs: "h-6 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 px-2.5",
         icon: "size-8",
         "icon-xs":
           "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
@@ -52,38 +51,15 @@ const buttonVariants = cva(
 );
 
 type BaseButtonProps = ComponentProps<typeof BaseButton>;
-type Props = BaseButtonProps &
-  VariantProps<typeof buttonVariants> & {
-    icon?: ReactElement;
-  };
-
-const Button = ({
-  variant,
-  size,
-  className,
-  icon,
-  children,
-  ...rest
-}: Props) => {
-  const iconPosition =
-    (icon?.props as { "data-icon"?: string } | undefined)?.["data-icon"] ??
-    "inline-start";
-  const iconEl = icon
-    ? cloneElement(icon as ReactElement<{ "data-icon"?: string }>, {
-        "data-icon": iconPosition,
-      })
-    : null;
+type Props = BaseButtonProps & VariantProps<typeof buttonVariants>;
 
+const Button = ({ variant, size, className, ...rest }: Props) => {
   return (
     <BaseButton
       {...rest}
       className={cn(buttonVariants({ variant, size }), className)}
       data-variant={variant || "default"}
-    >
-      {iconEl && iconPosition !== "inline-end" && iconEl}
-      {children}
-      {iconEl && iconPosition === "inline-end" && iconEl}
-    </BaseButton>
+    />
   );
 };
 

package/src/components/button/components/base-button.tsx

@@ -2,7 +2,6 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { LoaderCircle } from "lucide-react";
 import { type ComponentProps } from "react";
-import { cn } from "../../../lib";
 
 interface Props extends ComponentProps<typeof ButtonPrimitive> {
   loading?: boolean;
@@ -44,20 +43,16 @@ export const BaseButton = ({
       onClick={handleClick}
       style={style}
     >
-      <span className="inline-flex items-center gap-(--btn-gap)">
+      <span data-content className="contents">
         {children}
       </span>
-      <LoaderCircle
-        data-loader
-        data-testid="btn-loader"
-        className={cn(
-          "hidden animate-spin",
-          "group-data-[loading]/button:absolute",
-          "group-data-[loading]/button:block",
-          "group-data-[loading]/button:inset-0",
-          "group-data-[loading]/button:m-auto",
-        )}
-      />
+      {loading && (
+        <LoaderCircle
+          data-loader
+          data-testid="btn-loader"
+          className="absolute inset-0 m-auto size-4 animate-spin"
+        />
+      )}
     </ButtonPrimitive>
   );
 };

package/src/components/calendar/calendar.tsx

@@ -33,7 +33,7 @@ function CalendarDropdown({
     <Select
       items={items}
       value={selected}
-      className="py-1 h-[32px]"
+      className="py-1 h-7"
       getLabel={(o) => o.label}
       getId={(o) => String(o.value)}
       onValueChange={(item) => {

package/src/components/card/card.stories.tsx

@@ -43,7 +43,6 @@ const meta: Meta<typeof Card> = {
   argTypes: {
     classNames: { control: false },
   },
-  tags: ["beta"],
   parameters: { layout: "centered" },
 };
 

package/src/components/combobox/combobox.tsx

@@ -530,7 +530,7 @@ export function ComboboxChip({
 }): React.ReactElement {
   return (
     <ComboboxPrimitive.Chip
-      className="flex items-center pl-1 rounded-[calc(var(--radius-md)-1px)] bg-accent font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
+      className="flex my-auto items-center pl-1 rounded-[calc(var(--radius-md)-1px)] bg-accent font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 h-6"
       data-slot="combobox-chip"
       {...props}
     >

package/src/components/date-picker/date-input.tsx

@@ -88,7 +88,7 @@ export const DateInput = (props: DateInputProps) => {
       <div
         className={cn(
           inputBaseClasses,
-          "flex items-center gap-2 h-10",
+          "flex items-center gap-2 h-8",
           "has-[:focus-visible]:border-ring",
           "aria-invalid:border-error has-[:focus-visible]:aria-invalid:ring-error/20",
           "has-aria-invalid:border-error has-[:focus-visible]:has-aria-invalid:ring-error/20",

package/src/components/date-picker/date-picker.tsx

@@ -75,7 +75,7 @@ const PickerShell = ({
             disabled={disabled}
             className={cn(
               inputBaseClasses,
-              "inline-flex items-center gap-2 h-10 cursor-pointer text-left",
+              "inline-flex items-center gap-2 h-8 cursor-pointer text-left",
               "focus-visible:border-ring",
               "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
               "group-data-[invalid]:border-error focus-visible:group-data-[invalid]:ring-error/20",

package/src/components/dropzone/dropzone.stories.tsx

@@ -37,7 +37,6 @@ const meta: Meta<typeof Dropzone> = {
   argTypes: {
     classNames: { control: false },
   },
-  tags: ["beta"],
 };
 
 export default meta;

package/src/components/empty/empty.stories.tsx

@@ -32,7 +32,6 @@ const meta: Meta<typeof Empty> = {
   argTypes: {
     classNames: { control: false },
   },
-  tags: ["beta"],
 };
 
 export default meta;

package/src/components/input/input.tsx

@@ -3,7 +3,7 @@ import { type ChangeEvent, type ComponentPropsWithoutRef } from "react";
 import { cn } from "../../lib";
 
 export const inputBaseClasses =
-  "h-10 w-full px-3 py-2 rounded-md border border-input bg-background text-sm outline-none transition-shadow placeholder:text-muted-foreground";
+  "h-8 w-full px-3 rounded-md border border-input bg-background text-sm outline-none transition-shadow placeholder:text-muted-foreground";
 
 // ── Composite ─────────────────────────────────────────────────────────────────
 

package/src/components/menu/menu.stories.tsx

@@ -40,7 +40,6 @@ const meta: Meta<typeof Menu> = {
   argTypes: {
     classNames: { control: false },
   },
-  tags: ["beta"],
 };
 
 export default meta;

package/src/components/menu/menu.tsx

@@ -22,19 +22,19 @@ type MenuItemItem = {
   type: "item";
   label: React.ReactNode;
   shortcut?: string;
-} & Omit<React.ComponentProps<typeof MenuItem>, "children">;
+} & Omit<React.ComponentProps<typeof MenuItem>, "children" | "label">;
 
 type MenuItemCheckbox = {
   type: "checkbox";
   label: React.ReactNode;
   shortcut?: string;
-} & Omit<React.ComponentProps<typeof MenuCheckboxItem>, "children">;
+} & Omit<React.ComponentProps<typeof MenuCheckboxItem>, "children" | "label">;
 
 type MenuItemRadio = {
   type: "radio";
   label: React.ReactNode;
   shortcut?: string;
-} & Omit<React.ComponentProps<typeof MenuRadioItem>, "children">;
+} & Omit<React.ComponentProps<typeof MenuRadioItem>, "children" | "label">;
 
 type MenuItemRadioGroup = {
   type: "radio-group";
@@ -62,7 +62,7 @@ type MenuItemSubmenu = {
   type: "submenu";
   label: React.ReactNode;
   items: MenuItemType[];
-} & Omit<React.ComponentProps<typeof MenuSubTrigger>, "children">;
+} & Omit<React.ComponentProps<typeof MenuSubTrigger>, "children" | "label">;
 
 export type MenuItemType =
   | MenuItemItem

package/src/components/number-input/number-input.tsx

@@ -32,7 +32,7 @@ export function NumberInputGroup({
   return (
     <NumberFieldPrimitive.Group
       className={cn(
-        "flex h-10 w-full items-center overflow-hidden rounded-md bg-background text-sm transition-shadow",
+        "flex h-8 w-full items-center overflow-hidden rounded-md bg-background text-sm transition-shadow",
         "outline outline-1 outline-input [outline-offset:-1px]",
         "focus-within:outline-ring",
         "aria-invalid:outline-error focus-within:aria-invalid:ring-error/20",
@@ -55,7 +55,7 @@ export function NumberInputInput({
   return (
     <NumberFieldPrimitive.Input
       className={cn(
-        "min-w-0 flex-1 bg-transparent px-3 py-2 text-left tabular-nums outline-none",
+        "min-w-0 flex-1 bg-transparent px-3 text-left tabular-nums outline-none",
         "placeholder:text-muted-foreground",
         className,
       )}
@@ -73,7 +73,7 @@ export function NumberInputDecrement({
   return (
     <NumberFieldPrimitive.Decrement
       className={cn(
-        "flex shrink-0 cursor-pointer items-center justify-center border-r border-input px-2 py-2 text-muted-foreground transition-colors",
+        "flex shrink-0 cursor-pointer items-center justify-center border-r border-input px-2 text-muted-foreground transition-colors",
         "hover:bg-accent hover:text-foreground",
         "disabled:pointer-events-none disabled:opacity-50",
         className,
@@ -94,7 +94,7 @@ export function NumberInputIncrement({
   return (
     <NumberFieldPrimitive.Increment
       className={cn(
-        "flex shrink-0 cursor-pointer items-center justify-center border-l border-input px-2 py-2 text-muted-foreground transition-colors",
+        "flex shrink-0 cursor-pointer items-center justify-center border-l border-input px-2 text-muted-foreground transition-colors",
         "hover:bg-accent hover:text-foreground",
         "disabled:pointer-events-none disabled:opacity-50",
         className,

package/src/components/pagination/pagination.stories.tsx

@@ -51,7 +51,6 @@ const meta: Meta<typeof Pagination> = {
   parameters: {
     layout: "centered",
   },
-  tags: ["beta"],
 };
 
 export default meta;

package/src/components/password/password.tsx

@@ -45,7 +45,7 @@ export function Password({
   return (
     <div
       className={cn(
-        "relative inline-flex h-10 w-full items-center text-sm",
+        "relative inline-flex h-8 w-full items-center text-sm",
         "rounded-md border border-input bg-background transition-shadow",
         "focus-within:border-ring",
         "aria-invalid:border-error focus-within:aria-invalid:ring-error/20",

package/src/components/stepper/stepper.stories.tsx

@@ -90,7 +90,6 @@ const meta: Meta<typeof Stepper> = {
     onValueChange: { control: false },
     classNames: { control: false },
   },
-  tags: ["beta"],
 };
 
 export default meta;

package/src/components/tabs/tabs.stories.tsx

@@ -31,7 +31,6 @@ const meta: Meta<typeof Tabs> = {
     TabsTab: TabsTab as React.ComponentType<unknown>,
     TabsPanel: TabsPanel as React.ComponentType<unknown>,
   },
-  tags: ["beta"],
 };
 
 export default meta;

package/src/components/tag/tag.stories.tsx

@@ -18,7 +18,6 @@ const meta: Meta<typeof Tag> = {
   args: {
     children: "Tag",
   },
-  tags: ["beta"],
 };
 
 export default meta;
@@ -35,6 +34,8 @@ export const Variants: Story = {
       <Tag>Default</Tag>
       <Tag variant="secondary">Secondary</Tag>
       <Tag variant="error">Error</Tag>
+      <Tag variant="success">Success</Tag>
+      <Tag variant="warning">Warning</Tag>
       <Tag variant="outline">Outline</Tag>
       <Tag variant="ghost">Ghost</Tag>
       <Tag variant="link">Link</Tag>
@@ -43,12 +44,11 @@ export const Variants: Story = {
 };
 
 /**
- * Add `data-icon="inline-start"` or `data-icon="inline-end"` to the icon element
- * to adjust the lateral padding automatically.
+ * Compose icons directly as children — JSX order determines position.
  *
  * ```tsx
  * <Tag>
- *   <BadgeCheck data-icon="inline-start" />
+ *   <BadgeCheck />
  *   Verified
  * </Tag>
  * ```
@@ -57,15 +57,15 @@ export const WithIcon: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-2">
       <Tag>
-        <BadgeCheck data-icon="inline-start" />
+        <BadgeCheck />
         Verified
       </Tag>
       <Tag variant="secondary">
         8.5
-        <CheckIcon data-icon="inline-end" />
+        <CheckIcon />
       </Tag>
       <Tag variant="error">
-        <X data-icon="inline-start" />
+        <X />
         Rejected
       </Tag>
     </div>
@@ -73,22 +73,18 @@ export const WithIcon: Story = {
 };
 
 /**
- * Pass `data-icon="inline-start"` or `data-icon="inline-end"` to the `Loader`
- * so its padding matches icon placement conventions.
+ * Drop a `Loader` as a child to indicate async state. Same composition
+ * rules as any other icon — JSX order determines position.
  */
 export const WithSpinner: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-2">
       <Tag>
-        <Loader
-          data-icon="inline-start"
-          size="xs"
-          className="text-primary-foreground"
-        />
+        <Loader size="xs" className="text-primary-foreground" />
         Processing
       </Tag>
       <Tag variant="secondary">
-        <Loader data-icon="inline-start" size="xs" variant="ghost" />
+        <Loader size="xs" variant="ghost" />
         Loading
       </Tag>
     </div>
@@ -125,14 +121,13 @@ export const Link: Story = {
 };
 
 /**
- * The `closable` and `onClose` props were removed in v2. Dismissal is now achieved
- * by composing a `<button>` child with `data-icon="inline-end"` — the variant handles
- * padding automatically via the `has-data-[icon]` selector.
+ * The `closable` and `onClose` props were removed in v2. Dismissal is now
+ * achieved by composing a `<button>` child with the close icon.
  *
  * ```tsx
  * <Tag>
  *   Closable tag
- *   <button type="button" data-icon="inline-end" onClick={onClose}>
+ *   <button type="button" onClick={onClose}>
  *     <X className="size-3" />
  *   </button>
  * </Tag>
@@ -158,7 +153,6 @@ export const Closable: Story = {
               {t.label}
               <button
                 type="button"
-                data-icon="inline-end"
                 className="cursor-pointer"
                 onClick={() =>
                   setVisible((prev) => prev.filter((id) => id !== t.id))
@@ -190,16 +184,15 @@ export const Closable: Story = {
 export const CustomColors: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-2">
-      <Tag className="bg-green-50 text-green-700 dark:bg-green-800/40 dark:text-green-200">
-        <BadgeCheck data-icon="inline-start" />
-        Success
-      </Tag>
-      <Tag className="bg-amber-50 text-amber-700 dark:bg-amber-800/40 dark:text-amber-200">
-        Pending
-      </Tag>
       <Tag className="bg-blue-50 text-blue-700 dark:bg-blue-800/40 dark:text-blue-200">
         Info
       </Tag>
+      <Tag className="bg-purple-50 text-purple-700 dark:bg-purple-800/40 dark:text-purple-200">
+        Beta
+      </Tag>
+      <Tag className="bg-fuchsia-50 text-fuchsia-700 dark:bg-fuchsia-800/40 dark:text-fuchsia-200">
+        New
+      </Tag>
     </div>
   ),
 };

package/src/components/tag/tag.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib";
 
 const tagVariants = cva(
-  "group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
@@ -13,6 +13,10 @@ const tagVariants = cva(
           "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         error:
           "bg-error/10 text-error focus-visible:ring-error/20 dark:bg-error/20 dark:focus-visible:ring-error/40 [a]:hover:bg-error/20",
+        success:
+          "bg-success/10 text-success focus-visible:ring-success/20 dark:bg-success/20 dark:focus-visible:ring-success/40 [a]:hover:bg-success/20",
+        warning:
+          "bg-warning/10 text-warning focus-visible:ring-warning/20 dark:bg-warning/20 dark:focus-visible:ring-warning/40 [a]:hover:bg-warning/20",
         outline:
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost:

package/src/components/timeline/timeline.stories.tsx

@@ -55,7 +55,6 @@ const meta: Meta<typeof Timeline> = {
       },
     ],
   },
-  tags: ["beta"],
   parameters: {
     layout: "centered",
   },

package/src/components/tree/tree.stories.tsx

@@ -145,7 +145,6 @@ const meta: Meta<typeof TreeRoot> = {
     tree: { control: false },
     render: { control: false },
   },
-  tags: ["beta"],
 };
 
 export default meta;