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

package/src/components/tabs/tabs.tsx

@@ -1,175 +1,98 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { HTMLProps, ReactNode, useEffect, useRef, useState } from "react";
-import { cn } from "../../lib";
-import { TabsContextProvider, useTabsContext } from "./context/tabs-context";
+"use client";
 
-interface TabsExtendedProps extends TabsProps {
-  listClassName: TabListProps["className"];
-  listProps: TabListProps;
-  triggerClassName: TabTriggerProps["className"];
-  triggerProps: TabTriggerProps;
-  contentClassName: TabContentProps["className"];
-  contentProps: TabContentProps;
-}
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import type React from "react";
+import { cn } from "../../lib";
 
-interface TabsProps
-  extends Omit<
-    HTMLProps<HTMLDivElement>,
-    "value" | "defaultValue" | "onChange"
-  > {
-  value?: string;
-  onChange?: (tab: string) => void;
-  defaultValue?: string;
-  variant?: "default" | "background";
-}
+export type TabsVariant = "underline" | "background";
 
-const Tabs = ({
-  children,
-  value: prop,
-  onChange,
-  defaultValue,
-  variant = "default",
+export function Tabs({
+  className,
   ...props
-}: TabsProps) => {
-  const [activeTab = "", setActiveTab] = useControllableState<string>({
-    prop,
-    onChange,
-    defaultProp: defaultValue as string,
-  });
-  const [targetRef, setTargetRef] = useState<HTMLButtonElement | null>(null);
-
+}: TabsPrimitive.Root.Props): React.ReactElement {
   return (
-    <TabsContextProvider
-      value={{ activeTab, setActiveTab, setTargetRef, targetRef, variant }}
-    >
-      <div data-slot="tabs" {...props}>
-        {children}
-      </div>
-    </TabsContextProvider>
+    <TabsPrimitive.Root
+      className={cn(
+        "flex flex-col gap-2 data-[orientation=vertical]:flex-row",
+        className,
+      )}
+      data-slot="tabs"
+      {...props}
+    />
   );
-};
-
-interface TabListProps {
-  children: ReactNode;
-  className?: string;
-  indicatorClassName?: string;
 }
 
-const TabList = ({ children, className, indicatorClassName }: TabListProps) => {
-  const { targetRef } = useTabsContext();
-
+export function TabsList({
+  variant = "underline",
+  centered = false,
+  className,
+  children,
+  ...props
+}: TabsPrimitive.List.Props & {
+  variant?: TabsVariant;
+  centered?: boolean;
+}): React.ReactElement {
   return (
-    <div data-slot="tabs-list" className={cn("relative mb-4", className)}>
-      <div data-slot="tabs-content" className="flex">
-        {children}
-      </div>
-      <TabsIndicator
-        targetRef={targetRef}
-        indicatorClassName={indicatorClassName}
+    <TabsPrimitive.List
+      data-variant={variant}
+      className={cn(
+        "group/tabs-list relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground",
+        centered && "mx-auto",
+        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-start",
+        variant === "background"
+          ? "rounded-lg border border-border p-0.5"
+          : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-tab]:hover:bg-accent",
+        className,
+      )}
+      data-slot="tabs-list"
+      {...props}
+    >
+      {children}
+      <TabsPrimitive.Indicator
+        className={cn(
+          "absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-(--active-tab-bottom) transition-[width,translate] duration-200 ease-in-out",
+          variant === "background"
+            ? "-z-1 rounded-md bg-primary shadow-sm/5"
+            : "z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:-translate-x-px data-[orientation=horizontal]:translate-y-px",
+        )}
+        data-slot="tab-indicator"
       />
-    </div>
+    </TabsPrimitive.List>
   );
-};
-
-interface TabTriggerProps
-  extends Omit<HTMLProps<HTMLButtonElement>, "onClick" | "type"> {
-  value: string;
 }
 
-const TabTrigger = ({ value, className, ...props }: TabTriggerProps) => {
-  const { activeTab, setActiveTab, setTargetRef, variant } = useTabsContext();
-  const isActive = activeTab === value;
-
+export function TabsTab({
+  className,
+  ...props
+}: TabsPrimitive.Tab.Props): React.ReactElement {
   return (
-    <button
-      data-slot="tabs-trigger"
-      {...props}
-      type="button"
-      ref={(element) => {
-        if (isActive) setTargetRef(element);
-      }}
-      onClick={() => setActiveTab(value)}
-      data-tab={value}
-      data-selected={isActive}
-      aria-selected={isActive}
+    <TabsPrimitive.Tab
       className={cn(
-        "px-2 py-2 cursor-pointer w-full min-w-[100px] text-center rounded-t font-semibold select-none",
-        variant === "background"
-          ? "hover:bg-transparent aria-selected:text-primary-foreground rounded"
-          : "hover:bg-accent hover:text-accent-foreground",
+        "relative flex h-9 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-[calc(--spacing(2.5)-1px)] font-medium text-base outline-none transition-[color,background-color,box-shadow] hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:grow-0 data-[orientation=vertical]:justify-start data-active:text-foreground data-disabled:opacity-64 group-data-[variant=background]/tabs-list:data-active:text-primary-foreground sm:h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
         className,
       )}
+      data-slot="tabs-tab"
+      {...props}
     />
   );
-};
-
-interface TabContentProps extends HTMLProps<HTMLDivElement> {
-  value: string;
-}
-
-const TabContent = ({ value, ...props }: TabContentProps) => {
-  const { activeTab } = useTabsContext();
-  const isActiveTab = activeTab === value;
-  if (!isActiveTab) return null;
-  return <div data-slot="tabs-content" {...props} />;
-};
-
-interface TabsIndicatorProps {
-  targetRef: HTMLButtonElement | null;
-  indicatorClassName?: string;
 }
 
-const TabsIndicator = ({
-  targetRef,
-  indicatorClassName,
-}: TabsIndicatorProps) => {
-  const indicatorRef = useRef<HTMLDivElement>(null);
-  const indicator = indicatorRef?.current;
-  const targetResizeObserver = useRef<ResizeObserver>(null);
-  const { variant } = useTabsContext();
-
-  const updatePosition = (): void => {
-    if (!targetRef || !indicator) return;
-
-    const leftDistance = targetRef.offsetLeft;
-    const width = targetRef.offsetWidth;
-
-    indicator.style.width = width + "px";
-    indicator.style.left = leftDistance + "px";
-  };
-
-  useEffect(() => {
-    if (targetRef) {
-      updatePosition();
-      targetResizeObserver.current = new ResizeObserver(updatePosition);
-      targetResizeObserver.current.observe(targetRef);
-
-      return () => {
-        targetResizeObserver.current?.disconnect();
-      };
-    }
-  }, [targetRef]);
-
+export function TabsPanel({
+  className,
+  ...props
+}: TabsPrimitive.Panel.Props): React.ReactElement {
   return (
-    <div
-      data-slot="tabs-indicator"
-      ref={indicatorRef}
-      className={cn(
-        "transition-all duration-300 absolute rounded bg-primary",
-        variant === "background"
-          ? "inset-0 -z-10 h-full top-0"
-          : "top-full h-[3px]",
-        indicatorClassName,
-      )}
+    <TabsPrimitive.Panel
+      className={cn("flex-1 outline-none", className)}
+      data-slot="tabs-content"
+      {...props}
     />
   );
-};
+}
 
-export { TabContent, TabList, Tabs, TabTrigger };
-export type {
-  TabContentProps,
-  TabListProps,
-  TabsExtendedProps,
-  TabsProps,
-  TabTriggerProps,
+export {
+  TabsPrimitive,
+  TabsTab as TabsTrigger,
+  TabsPanel as TabsContent,
+  TabsList as TabList,
 };

package/src/components/tag/index.ts

@@ -1,2 +1 @@
 export * from "./tag";
-export * from "./tag.variants";

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

@@ -1,170 +1,205 @@
-import { Tag } from "../../components";
-import { createToastManager, ToastProvider } from "../toast";
-
-const toastManager = createToastManager();
-
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Settings, StarIcon, User } from "lucide-react";
-import { action } from "storybook/actions";
+import { BadgeCheck, CheckIcon, X } from "lucide-react";
+import { useState } from "react";
+import { Tag } from "../../components";
+import { Loader } from "../loader";
 
 /**
- * El componente Tag es una herramienta versátil para etiquetar, categorizar y organizar elementos con etiquetas visuales.
+ * Displays a tag or a component that looks like a tag.
+ * Supports the Base UI `render` prop to swap the root element (e.g. `<a>`, `<button>`)
+ * without losing styles or accessibility.
+ *
+ * See [Base UI useRender docs](https://base-ui.com/react/utils/use-render) for the full `render` prop API.
  */
 const meta: Meta<typeof Tag> = {
-  title: "Data display/Tag",
+  title: "Components/Tag",
   component: Tag,
+  parameters: { layout: "centered" },
   args: {
-    children: "Lorem ipsum",
+    children: "Tag",
   },
+  tags: ["beta"],
 };
 
 export default meta;
 type Story = StoryObj<typeof Tag>;
 
-/**
- * Variante principal del Tag.
- * Ideal para destacar información importante o etiquetas primarias.
- */
-export const Primary: Story = {
-  args: {
-    children: "Tag básico",
-    variant: "primary",
-  },
-};
-
-/**
- * Variante secundaria con un énfasis visual más sutil.
- * Perfecta para información complementaria o categorías secundarias.
- */
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    children: "Tag secundario",
-  },
-};
-
-/**
- * Variante de error para resaltar estados problemáticos o alertas.
- * Usar con moderación y solo cuando sea necesario indicar un error o advertencia.
- */
-export const ErrorVariant: Story = {
-  args: {
-    variant: "error",
-    children: "Tag de error",
-  },
-};
+export const Default: Story = {};
 
 /**
- * Variante outline con borde y fondo transparente.
- * Útil para interfaces minimalistas o cuando se necesita un contraste menor.
+ * Use the `variant` prop to change the visual style of the tag.
  */
-export const Outline: Story = {
-  args: {
-    variant: "outline",
-    children: "Tag outline",
-  },
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag>Default</Tag>
+      <Tag variant="secondary">Secondary</Tag>
+      <Tag variant="error">Error</Tag>
+      <Tag variant="outline">Outline</Tag>
+      <Tag variant="ghost">Ghost</Tag>
+      <Tag variant="link">Link</Tag>
+    </div>
+  ),
 };
 
 /**
- * Tipo redondo o cuadrado .
+ * Add `data-icon="inline-start"` or `data-icon="inline-end"` to the icon element
+ * to adjust the lateral padding automatically.
+ *
+ * ```tsx
+ * <Tag>
+ *   <BadgeCheck data-icon="inline-start" />
+ *   Verified
+ * </Tag>
+ * ```
  */
-export const Square: Story = {
+export const WithIcon: Story = {
   render: () => (
-    <div className="flex w-full gap-2">
-      <Tag rounded={"default"} color="blue">
-        Tag rounded default
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag>
+        <BadgeCheck data-icon="inline-start" />
+        Verified
       </Tag>
-
-      <Tag rounded={"full"} color="magenta">
-        Tag rounded full
+      <Tag variant="secondary">
+        8.5
+        <CheckIcon data-icon="inline-end" />
       </Tag>
-      <Tag rounded={"square"} color="blue">
-        Tag rounded square
+      <Tag variant="error">
+        <X data-icon="inline-start" />
+        Rejected
       </Tag>
     </div>
   ),
 };
 
 /**
- * Los estilos del Tag.
+ * Pass `data-icon="inline-start"` or `data-icon="inline-end"` to the `Loader`
+ * so its padding matches icon placement conventions.
  */
-export const Styles: Story = {
+export const WithSpinner: Story = {
   render: () => (
-    <div className="flex flex-col items-start justify-start gap-2">
-      <Tag variant={"outline"} color="var(--color-primary)">
-        Bordeado default
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag>
+        <Loader
+          data-icon="inline-start"
+          size="xs"
+          className="text-primary-foreground"
+        />
+        Processing
       </Tag>
-      <Tag rounded={"full"} variant={"outline"} color="red">
-        Bordeado redondo
-      </Tag>
-      <Tag rounded={"square"}>Solido cuadrado</Tag>
-      <Tag rounded={"full"} variant={"error"}>
-        Solido redondo
-      </Tag>
-      <Tag rounded={"full"} color="blue" icon={<User />}>
-        Solido redondo con icono bordeado
-      </Tag>
-      <Tag
-        rounded={"full"}
-        color="red"
-        variant={"borderless"}
-        icon={<Settings />}
-      >
-        Coloreado sin borde redondo con icono
-      </Tag>
-      <Tag
-        color="magenta"
-        variant={"borderless"}
-        closable
-        onClose={() => {
-          action("onClose")();
-          toastManager.add({ variant: "success", description: "Tag cerrado" });
-        }}
-      >
-        Coloreado sin borde redondo y cerrable
-      </Tag>
-      <Tag color="magenta" variant={"borderless"}>
-        Coloreado sin borde
+      <Tag variant="secondary">
+        <Loader data-icon="inline-start" size="xs" variant="ghost" />
+        Loading
       </Tag>
     </div>
   ),
 };
 
 /**
- * Tags con iconos para mejorar la comprensión visual.
- * Los iconos deben ser relevantes y mejorar la comunicación del tag.
+ * Use the `render` prop to render the tag as a link or any other element.
+ * Styles and accessibility semantics from the target element are preserved.
+ *
+ * ```tsx
+ * <Tag render={<a href="/docs" />}>Documentation</Tag>
+ * ```
  */
-export const WithIcon: Story = {
-  args: {
-    icon: <StarIcon className="w-4 h-4" />,
-    children: "Tag con icono",
+export const Link: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag render={<a href="#" />}>Default link</Tag>
+      <Tag variant="outline" render={<a href="#" />}>
+        Outline link
+      </Tag>
+      <Tag variant="link" render={<a href="#" />}>
+        Underline link
+      </Tag>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Tag render={<a href="/docs" />}>Documentation</Tag>`,
+      },
+    },
   },
 };
 
 /**
- * Variante cerrable que permite al usuario eliminar el tag.
- * Incluye callback personalizable y feedback visual mediante toast.
- *
- * Al pasar la propiedad `closable` a true, se debe pasar la propiedad `onClose` con una función que se ejecutará al cerrar el tag.
+ * 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.
  *
  * ```tsx
- * <Tag closable onClose={() => {}}>Tag cerrable</Tag>
+ * <Tag>
+ *   Closable tag
+ *   <button type="button" data-icon="inline-end" onClick={onClose}>
+ *     <X className="size-3" />
+ *   </button>
+ * </Tag>
  * ```
  */
+const CLOSABLE_TAGS = [
+  { id: 1, label: "Default", variant: "default" },
+  { id: 2, label: "Secondary", variant: "secondary" },
+  { id: 3, label: "Outline", variant: "outline" },
+  { id: 4, label: "Error", variant: "error" },
+  { id: 5, label: "Ghost", variant: "ghost" },
+] as const;
+
 export const Closable: Story = {
-  decorators: [
-    (Story) => (
-      <ToastProvider toastManager={toastManager}>
-        <Story />
-      </ToastProvider>
-    ),
-  ],
-  args: {
-    children: "Tag cerrable",
-    closable: true,
-    onClose: () => {
-      action("onClose")();
-      toastManager.add({ variant: "success", description: "Tag cerrado" });
-    },
+  render: () => {
+    const [visible, setVisible] = useState(CLOSABLE_TAGS.map((t) => t.id));
+
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-wrap items-center gap-2">
+          {CLOSABLE_TAGS.filter((t) => visible.includes(t.id)).map((t) => (
+            <Tag key={t.id} variant={t.variant}>
+              {t.label}
+              <button
+                type="button"
+                data-icon="inline-end"
+                className="cursor-pointer"
+                onClick={() =>
+                  setVisible((prev) => prev.filter((id) => id !== t.id))
+                }
+              >
+                <X className="size-3" />
+              </button>
+            </Tag>
+          ))}
+        </div>
+        {visible.length < CLOSABLE_TAGS.length && (
+          <button
+            type="button"
+            className="text-xs text-muted-foreground underline underline-offset-4 self-start cursor-pointer"
+            onClick={() => setVisible(CLOSABLE_TAGS.map((t) => t.id))}
+          >
+            Reset
+          </button>
+        )}
+      </div>
+    );
   },
 };
+
+/**
+ * Override colors with custom Tailwind classes via `className`.
+ * Classes merge with the variant defaults through `cn` (tailwind-merge).
+ */
+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>
+    </div>
+  ),
+};