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

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,175 @@
+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";
+
+interface TabsExtendedProps extends TabsProps {
+  listClassName: TabListProps["className"];
+  listProps: TabListProps;
+  triggerClassName: TabTriggerProps["className"];
+  triggerProps: TabTriggerProps;
+  contentClassName: TabContentProps["className"];
+  contentProps: TabContentProps;
+}
+
+interface TabsProps
+  extends Omit<
+    HTMLProps<HTMLDivElement>,
+    "value" | "defaultValue" | "onChange"
+  > {
+  value?: string;
+  onChange?: (tab: string) => void;
+  defaultValue?: string;
+  variant?: "default" | "background";
+}
+
+const Tabs = ({
+  children,
+  value: prop,
+  onChange,
+  defaultValue,
+  variant = "default",
+  ...props
+}: TabsProps) => {
+  const [activeTab = "", setActiveTab] = useControllableState<string>({
+    prop,
+    onChange,
+    defaultProp: defaultValue as string,
+  });
+  const [targetRef, setTargetRef] = useState<HTMLButtonElement | null>(null);
+
+  return (
+    <TabsContextProvider
+      value={{ activeTab, setActiveTab, setTargetRef, targetRef, variant }}
+    >
+      <div data-slot="tabs" {...props}>
+        {children}
+      </div>
+    </TabsContextProvider>
+  );
+};
+
+interface TabListProps {
+  children: ReactNode;
+  className?: string;
+  indicatorClassName?: string;
+}
+
+const TabList = ({ children, className, indicatorClassName }: TabListProps) => {
+  const { targetRef } = useTabsContext();
+
+  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}
+      />
+    </div>
+  );
+};
+
+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;
+
+  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}
+      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",
+        className,
+      )}
+    />
+  );
+};
+
+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]);
+
+  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,
+      )}
+    />
+  );
+};
+
+export { TabContent, TabList, Tabs, TabTrigger };
+export type {
+  TabContentProps,
+  TabListProps,
+  TabsExtendedProps,
+  TabsProps,
+  TabTriggerProps,
+};

package/src/components/tag/index.ts

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

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

@@ -0,0 +1,170 @@
+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";
+
+/**
+ * El componente Tag es una herramienta versátil para etiquetar, categorizar y organizar elementos con etiquetas visuales.
+ */
+const meta: Meta<typeof Tag> = {
+  title: "Data display/Tag",
+  component: Tag,
+  args: {
+    children: "Lorem ipsum",
+  },
+};
+
+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",
+  },
+};
+
+/**
+ * Variante outline con borde y fondo transparente.
+ * Útil para interfaces minimalistas o cuando se necesita un contraste menor.
+ */
+export const Outline: Story = {
+  args: {
+    variant: "outline",
+    children: "Tag outline",
+  },
+};
+
+/**
+ * Tipo redondo o cuadrado .
+ */
+export const Square: Story = {
+  render: () => (
+    <div className="flex w-full gap-2">
+      <Tag rounded={"default"} color="blue">
+        Tag rounded default
+      </Tag>
+
+      <Tag rounded={"full"} color="magenta">
+        Tag rounded full
+      </Tag>
+      <Tag rounded={"square"} color="blue">
+        Tag rounded square
+      </Tag>
+    </div>
+  ),
+};
+
+/**
+ * Los estilos del Tag.
+ */
+export const Styles: Story = {
+  render: () => (
+    <div className="flex flex-col items-start justify-start gap-2">
+      <Tag variant={"outline"} color="var(--color-primary)">
+        Bordeado default
+      </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>
+    </div>
+  ),
+};
+
+/**
+ * Tags con iconos para mejorar la comprensión visual.
+ * Los iconos deben ser relevantes y mejorar la comunicación del tag.
+ */
+export const WithIcon: Story = {
+  args: {
+    icon: <StarIcon className="w-4 h-4" />,
+    children: "Tag con icono",
+  },
+};
+
+/**
+ * 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.
+ *
+ * ```tsx
+ * <Tag closable onClose={() => {}}>Tag cerrable</Tag>
+ * ```
+ */
+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" });
+    },
+  },
+};

package/src/components/tag/tag.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Tag } from "../../components";
+
+describe("Badge component", () => {
+  it("should render children", () => {
+    render(<Tag>Lorem</Tag>);
+    const component = screen.getByText("Lorem");
+
+    expect(component).toBeInTheDocument();
+  });
+
+  it("should accept custom styles", () => {
+    render(<Tag className="custom-class">Lorem</Tag>);
+    const component = screen.getByText("Lorem");
+    expect(component).toHaveClass("custom-class");
+  });
+});

package/src/components/tag/tag.tsx

@@ -0,0 +1,99 @@
+import { X } from "lucide-react";
+import { cn } from "../../lib";
+import { TagVariant, tagVariants } from "./tag.variants";
+
+type VariantProps = {
+  color?: never;
+  variant?: TagVariant["variant"];
+};
+type ColorProps = {
+  color: string;
+  variant?: "outline" | "borderless";
+};
+type StyleProps = ColorProps | VariantProps;
+
+type BaseProps = {
+  icon?: React.ReactNode;
+  rounded?: TagVariant["rounded"];
+} & StyleProps &
+  React.HTMLAttributes<HTMLDivElement>;
+
+type ClosableProps = BaseProps & {
+  closable: true;
+  onClose: () => void;
+};
+
+type NonClosableProps = BaseProps & {
+  closable?: false;
+  onClose?: never;
+};
+
+type Props = ClosableProps | NonClosableProps;
+
+export const Tag = ({
+  className,
+  color,
+  variant,
+  rounded,
+  icon,
+  closable,
+  onClose,
+  children,
+  ...props
+}: Props) => {
+  const withTextColored =
+    !!color && (variant === "outline" || variant === "borderless");
+  const withBgColored = !!color && !variant;
+
+  return (
+    <div
+      data-slot="tag"
+      className={cn(
+        tagVariants({ variant, rounded }),
+        withTextColored && `bg-white`,
+        withBgColored && ` text-white`,
+        !!icon && "pl-1.5",
+        !!closable && "pr-1.5",
+        className,
+      )}
+      style={{
+        ...(withTextColored && {
+          color: color,
+          borderColor: color,
+        }),
+        ...(withBgColored && {
+          borderColor: color,
+          backgroundColor: color,
+        }),
+      }}
+      {...props}
+    >
+      {icon}
+      {children}
+      {closable && (
+        <button
+          type="button"
+          data-slot="tag-close"
+          className="z-10 h-4 w-4 cursor-pointer"
+          onClick={(e) => {
+            e.stopPropagation();
+            onClose();
+          }}
+        >
+          <X data-slot="tag-close-icon" />
+        </button>
+      )}
+
+      <span
+        data-slot="tag-overlay"
+        className="w-full h-full absolute top-0 left-0"
+        style={{
+          ...(withTextColored && {
+            opacity: 0.13,
+            backgroundColor: color,
+          }),
+        }}
+      />
+    </div>
+  );
+};

package/src/components/tag/tag.variants.ts

@@ -0,0 +1,31 @@
+import { cva, VariantProps } from "class-variance-authority";
+
+export const tagVariants = cva(
+  "inline-flex items-center  relative overflow-hidden bg-gray-100 gap-1 px-2.5 py-0.5 text-xs font-normal transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      rounded: {
+        default: "rounded-(--radius-tag)",
+        full: "rounded-full",
+        square: "rounded-sm",
+      },
+      variant: {
+        primary:
+          "bg-primary border-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "bg-secondary border-secondary !text-secondary-foreground hover:bg-secondary/80",
+        error: "bg-error border-error text-error-foreground hover:bg-error/80",
+        success:
+          "bg-success border-success text-success-foreground hover:bg-success/80",
+        outline: "border border-foreground text-foreground",
+        borderless: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      rounded: "default",
+      variant: "primary",
+    },
+  },
+);
+
+export type TagVariant = VariantProps<typeof tagVariants>;

package/src/components/textarea/index.ts

@@ -0,0 +1 @@
+export * from "./textarea";

package/src/components/textarea/textarea.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Textarea, TextareaControl, TextareaField } from "../../components";
+
+/**
+ * Multi-line text input built on Base UI's Field.Control.
+ * Shares the same border, focus, error, and disabled states as `Input`.
+ * Error state is driven by `aria-invalid` — pass it directly or wire via a `Field` context.
+ * Use `controlProps` to pass extra props to the outer wrapper `span`.
+ *
+ * `onChange` receives `(value: string, event: ChangeEvent<HTMLTextAreaElement>)` — not the
+ * native event directly. This matches the `Input` component API.
+ */
+const meta: Meta<typeof Textarea> = {
+  title: "Components/Textarea",
+  component: Textarea,
+  args: {
+    placeholder: "Type something...",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: "This field is disabled",
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+    defaultValue: "This field is read-only",
+  },
+};
+
+/**
+ * Error state is triggered by `aria-invalid`. In a full form, the `Field` component
+ * sets this automatically based on validation. You can also pass it directly.
+ */
+export const Error: Story = {
+  args: {
+    "aria-invalid": true,
+  },
+};
+
+/**
+ * `onChange` fires with `(value: string, event)` — the extracted string value comes first,
+ * matching the `Input` component signature. Use `value` + `onChange` for controlled usage;
+ * `defaultValue` for uncontrolled.
+ */
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>("");
+    return <Textarea value={value} onChange={setValue} />;
+  },
+};
+
+/**
+ * Use `TextareaControl` and `TextareaField` directly when you need to inject
+ * elements inside the wrapper (e.g., a character counter overlay).
+ */
+export const Primitive: Story = {
+  render: (args) => (
+    <TextareaControl>
+      <TextareaField {...args} />
+    </TextareaControl>
+  ),
+};

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import { mergeProps } from "@base-ui/react/merge-props";
+import {
+  type ChangeEvent,
+  type ComponentProps,
+  type ReactElement,
+} from "react";
+import { cn } from "../../lib";
+
+// ─── Primitives ───────────────────────────────────────────────────────────────
+
+export function TextareaControl({
+  className,
+  unstyled = false,
+  children,
+  ...props
+}: ComponentProps<"span"> & { unstyled?: boolean }): ReactElement {
+  return (
+    <span
+      className={
+        cn(
+          !unstyled &&
+            "relative inline-flex w-full rounded-md border border-input bg-background text-sm transition-shadow has-focus-visible:border-ring has-aria-invalid:border-error has-focus-visible:has-aria-invalid:ring-error/20 has-disabled:cursor-not-allowed has-disabled:opacity-50",
+          className,
+        ) || undefined
+      }
+      data-slot="textarea-control"
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+export type TextareaFieldProps = Omit<
+  ComponentProps<"textarea">,
+  "onChange"
+> & {
+  onChange?: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
+};
+
+export function TextareaField({
+  className,
+  ref,
+  onChange,
+  ...props
+}: TextareaFieldProps): ReactElement {
+  const handleChange = onChange
+    ? (event: ChangeEvent<HTMLTextAreaElement>) =>
+        onChange(event.target.value, event)
+    : undefined;
+
+  return (
+    <FieldPrimitive.Control
+      ref={ref}
+      value={props.value}
+      defaultValue={props.defaultValue}
+      disabled={props.disabled}
+      id={props.id}
+      name={props.name}
+      render={(defaultProps: ComponentProps<"textarea">) => (
+        <textarea
+          className={cn(
+            "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground max-sm:min-h-20.5",
+            className,
+          )}
+          data-slot="textarea"
+          {...mergeProps(defaultProps, props)}
+          onChange={handleChange}
+        />
+      )}
+    />
+  );
+}
+
+// ─── Composite ────────────────────────────────────────────────────────────────
+
+export type TextareaProps = TextareaFieldProps & {
+  unstyled?: boolean;
+  controlProps?: ComponentProps<typeof TextareaControl>;
+};
+
+export function Textarea({
+  className,
+  unstyled = false,
+  ref,
+  controlProps,
+  ...props
+}: TextareaProps): ReactElement {
+  return (
+    <TextareaControl
+      unstyled={unstyled}
+      className={className}
+      {...controlProps}
+    >
+      <TextareaField ref={ref} {...props} />
+    </TextareaControl>
+  );
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+export { FieldPrimitive };

package/src/components/timeline/index.ts

@@ -0,0 +1 @@
+export * from "./timeline";

package/src/components/timeline/timeline-status.ts

@@ -0,0 +1,5 @@
+export const TimelineStatus = {
+  done: "var(--color-primary)",
+  pending: "#cdcdcd",
+  error: "var(--color-error)",
+};