@boxcustodia/library 2.0.0-alpha.18 → 2.0.0-alpha.19

package/dist/src/providers/theme/ThemeProvider.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { Theme } from './types';
+export declare const useTheme: () => {
+    theme: Theme;
+};
+type ThemeProviderProps = {
+    children: ReactNode;
+    theme?: Theme;
+};
+export declare const ThemeProvider: ({ children, theme, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/providers/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ThemeProvider';
+export * from './types';
+export * from './useThemeProps';

package/dist/src/providers/theme/types.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+import { Button } from '../../components/button/button';
+import { Input } from '../../components/input/input';
+type ThemeProps<T, TOverridden> = Partial<Omit<T, keyof TOverridden>>;
+type PropsWithoutValue<T> = Omit<T, "value" | "onChange" | "defaultValue">;
+export type Theme = {
+    Button?: ThemeProps<ComponentProps<typeof Button>, "asChild" | "loading">;
+    Input?: Partial<PropsWithoutValue<ComponentProps<typeof Input>>>;
+};
+export {};

package/dist/src/providers/theme/useThemeProps.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '../../providers/theme/types';
+/**
+ * Hook que permite obtener y combinar las propiedades de un componente con las del tema.
+ *
+ * El orden de prioridad de las propiedades es:
+ * 1. Props pasadas directamente al componente
+ * 2. Props definidas en el ThemeProvider
+ * 3. Props por defecto del componente
+ */
+export declare const useThemeProps: <TComponent extends keyof Theme, TProps>(componentName: TComponent, props: TProps, defaultProps?: Partial<TProps>) => TProps;

package/dist/src/stores/theme.store.d.ts

@@ -0,0 +1,10 @@
+import { StoreApi } from 'zustand';
+import { Theme } from '../providers/theme/types';
+interface ThemeStore {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    getComponentProps: <TComponent extends keyof Theme, TProps>(componentName: TComponent, props: TProps, defaultProps?: Partial<TProps>) => TProps;
+}
+export type ThemeStoreApi = StoreApi<ThemeStore>;
+declare const createThemeStore: (initTheme?: Theme) => StoreApi<ThemeStore>;
+export { createThemeStore };

package/dist/src/utils/dates/parseDateRange.utility.d.ts

@@ -0,0 +1,14 @@
+import { DateRange } from '../../components';
+/**
+ * @typedef {Object} DateRange
+ * @property {Date} start - The start date of the range.
+ * @property {Date} end - The end date of the range.
+ */
+/**
+ * Parses a date range string in the format "DD/MM/YYYY - DD/MM/YYYY" and returns an object with start and end dates.
+ *
+ * @param {string} dateRange - The date range string to parse.
+ * @returns {DateRange} An object containing the start and end dates.
+ * @throws Will throw an error if the input string is not in the expected format or the dates are invalid.
+ */
+export declare const parseDateRange: (dateRange: string) => DateRange;

package/dist/src/utils/form.d.ts

@@ -0,0 +1,32 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ControllerRenderProps, FieldPath, FieldValues, RegisterOptions, SubmitHandler, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+import { FieldProps, Form as LibraryForm } from '../components';
+/**
+ * Validates `formValues` from `Form.onFormSubmit` against a Zod schema and
+ * returns `{ data, errors }` ready to wire back into `Form`'s `errors` prop.
+ *
+ * - `data` is the typed, parsed value, or `null` when validation fails.
+ * - `errors` is the flattened `fieldErrors` object (empty on success).
+ */
+export declare function parseFormValues<T extends z.ZodType>(schema: T, values: Record<string, unknown>): {
+    data: z.infer<T> | null;
+    errors: Record<string, string[]>;
+};
+export declare function useHookForm<T extends FieldValues = FieldValues>(schema: z.ZodType<T>, options?: Partial<UseFormProps<T>>): UseFormReturn<T>;
+type HookFormProps<T extends FieldValues> = Omit<ComponentProps<typeof LibraryForm>, "onSubmit" | "onFormSubmit" | "children"> & {
+    form: UseFormReturn<T>;
+    onFormSubmit: SubmitHandler<T>;
+    children: ReactNode;
+};
+export declare function HookForm<T extends FieldValues>({ form, onFormSubmit, children, ...props }: HookFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export type HookFieldRenderProps<T extends FieldValues = FieldValues, TName extends FieldPath<T> = FieldPath<T>> = ControllerRenderProps<T, TName> & {
+    invalid: boolean;
+};
+type HookFieldProps<T extends FieldValues = FieldValues, TName extends FieldPath<T> = FieldPath<T>> = Omit<FieldProps, "children" | "error" | "render" | "name"> & {
+    name: TName;
+    rules?: RegisterOptions<T, TName>;
+    render: (field: HookFieldRenderProps<T, TName>) => ReactNode;
+};
+export declare function HookField<T extends FieldValues = FieldValues, TName extends FieldPath<T> = FieldPath<T>>({ name, rules, render, ...fieldProps }: HookFieldProps<T, TName>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/utils/form.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/functions/createSafeContext.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const createSafeContext: <T>() => readonly [() => T & ({} | undefined), React.Provider<T | null>];

package/dist/src/utils/functions/createSafeContext.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/functions/ensureReactElement.d.ts

@@ -0,0 +1,9 @@
+import { default as React, ReactElement } from 'react';
+import { Renderable } from '../../models';
+type EnsureReactElementProps<P = {}> = {
+    children: Renderable<P>;
+    as?: React.ElementType;
+    props?: P;
+};
+export declare const ensureReactElement: <P>({ children, as: Wrapper, props, }: EnsureReactElementProps<P>) => ReactElement;
+export {};

package/dist/src/utils/functions/ensureReactElement.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/functions/getFormData.d.ts

@@ -0,0 +1,2 @@
+import { FormEvent } from 'react';
+export declare const getFormData: (event: FormEvent<HTMLFormElement>) => Record<string, string>;

package/dist/src/utils/functions/getFormData.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/functions/index.d.ts

@@ -0,0 +1,4 @@
+export * from './createSafeContext';
+export * from './ensureReactElement';
+export * from './getFormData';
+export * from './mergeRefs';

package/dist/src/utils/functions/mergeRefs.d.ts

@@ -0,0 +1,2 @@
+import type * as React from "react";
+export declare function mergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>): React.RefCallback<T>;

package/dist/src/utils/functions/mergeRefs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './form';
+export * from './functions';
+export * from './strings';

package/dist/src/utils/strings/extractInitials.utility.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Extracts the initials from a string.
+ * @param {string} string - The input string.
+ * @returns {string} The initials extracted from the input string.
+ */
+export declare const extractInitials: (string: string) => string;

package/dist/src/utils/strings/index.d.ts

@@ -0,0 +1 @@
+export * from './extractInitials.utility';

package/dist/src/utils/tests/click.d.ts

@@ -0,0 +1 @@
+export declare const click: (element: HTMLElement) => void;

package/dist/src/utils/tests/index.d.ts

@@ -0,0 +1,2 @@
+export * from './click';
+export * from './type';

package/dist/src/utils/tests/keyboard.d.ts

@@ -0,0 +1,10 @@
+type KeyboardEventOptions = {
+    key?: string;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+    [key: string]: any;
+};
+export declare const keyboard: (element?: EventTarget, options?: KeyboardEventOptions, eventName?: "keydown" | "keypress" | "keyup") => void;
+export {};

package/dist/src/utils/tests/type.d.ts

@@ -0,0 +1 @@
+export declare const type: (element: HTMLElement, value: string) => void;

package/dist/utils/form.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),a=require("@hookform/resolvers/zod"),s=require("react-hook-form"),d=require("zod"),c=require("../components/form/form.cjs.js"),m=require("../components/field/field.cjs.js");function F(r,e){const o=r.safeParse(e);return o.success?{data:o.data,errors:{}}:{data:null,errors:d.z.flattenError(o.error).fieldErrors}}function f(r,e){return s.useForm({...e,resolver:a.zodResolver(r)})}function v({form:r,onFormSubmit:e,children:o,...t}){return n.jsx(s.FormProvider,{...r,children:n.jsx(c.Form,{onSubmit:i=>{i.preventDefault(),r.handleSubmit(e)()},...t,children:o})})}function k({name:r,rules:e,render:o,...t}){const{control:i}=s.useFormContext();return n.jsx(s.Controller,{name:r,control:i,rules:e,render:({field:l,fieldState:u})=>n.jsx(m.Field,{...t,invalid:u.invalid,error:u.error?.message,children:o({...l,invalid:u.invalid})})})}exports.HookField=k;exports.HookForm=v;exports.parseFormValues=F;exports.useHookForm=f;

package/dist/utils/form.es.js

@@ -0,0 +1,62 @@
+import { jsx as n } from "react/jsx-runtime";
+import { zodResolver as l } from "@hookform/resolvers/zod";
+import { useForm as u, FormProvider as a, useFormContext as d, Controller as f } from "react-hook-form";
+import { z as c } from "zod";
+import { Form as p } from "../components/form/form.es.js";
+import { Field as F } from "../components/field/field.es.js";
+function z(r, o) {
+  const e = r.safeParse(o);
+  return e.success ? { data: e.data, errors: {} } : {
+    data: null,
+    errors: c.flattenError(e.error).fieldErrors
+  };
+}
+function C(r, o) {
+  return u({
+    ...o,
+    resolver: l(r)
+  });
+}
+function E({
+  form: r,
+  onFormSubmit: o,
+  children: e,
+  ...t
+}) {
+  return /* @__PURE__ */ n(a, { ...r, children: /* @__PURE__ */ n(
+    p,
+    {
+      onSubmit: (i) => {
+        i.preventDefault(), r.handleSubmit(o)();
+      },
+      ...t,
+      children: e
+    }
+  ) });
+}
+function P({ name: r, rules: o, render: e, ...t }) {
+  const { control: i } = d();
+  return /* @__PURE__ */ n(
+    f,
+    {
+      name: r,
+      control: i,
+      rules: o,
+      render: ({ field: s, fieldState: m }) => /* @__PURE__ */ n(
+        F,
+        {
+          ...t,
+          invalid: m.invalid,
+          error: m.error?.message,
+          children: e({ ...s, invalid: m.invalid })
+        }
+      )
+    }
+  );
+}
+export {
+  P as HookField,
+  E as HookForm,
+  z as parseFormValues,
+  C as useHookForm
+};

package/dist/utils/functions/createSafeContext.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),o=()=>{const e=n.createContext(null);return[()=>{const t=n.useContext(e);if(t===null)throw new Error("Context value is null");return t},e.Provider]};exports.createSafeContext=o;

package/dist/utils/functions/createSafeContext.es.js

@@ -0,0 +1,13 @@
+import n from "react";
+const u = () => {
+  const t = n.createContext(null);
+  return [() => {
+    const e = n.useContext(t);
+    if (e === null)
+      throw new Error("Context value is null");
+    return e;
+  }, t.Provider];
+};
+export {
+  u as createSafeContext
+};

package/dist/utils/functions/ensureReactElement.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("react"),u=({children:e,as:s="div",props:o})=>{let t;return typeof e=="string"?t=i.jsx(s,{children:e}):n.isValidElement(e)?t=e:typeof e=="function"?t=e(o):t=i.jsx(s,{children:e}),n.isValidElement(t)?t:i.jsx(s,{children:t})};exports.ensureReactElement=u;

package/dist/utils/functions/ensureReactElement.es.js

@@ -0,0 +1,13 @@
+import { jsx as f } from "react/jsx-runtime";
+import { isValidElement as s } from "react";
+const u = ({
+  children: e,
+  as: o = "div",
+  props: i
+}) => {
+  let t;
+  return typeof e == "string" ? t = /* @__PURE__ */ f(o, { children: e }) : s(e) ? t = e : typeof e == "function" ? t = e(i) : t = /* @__PURE__ */ f(o, { children: e }), s(t) ? t : /* @__PURE__ */ f(o, { children: t });
+};
+export {
+  u as ensureReactElement
+};

package/dist/utils/functions/getFormData.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=e=>{e.preventDefault();const a=e.currentTarget.elements,r={};return Array.from(a).forEach(n=>{const t=n;t.name&&(r[t.name]=t.value)}),r};exports.getFormData=o;

package/dist/utils/functions/getFormData.es.js

@@ -0,0 +1,11 @@
+const o = (e) => {
+  e.preventDefault();
+  const a = e.currentTarget.elements, r = {};
+  return Array.from(a).forEach((n) => {
+    const t = n;
+    t.name && (r[t.name] = t.value);
+  }), r;
+};
+export {
+  o as getFormData
+};

package/dist/utils/functions/mergeRefs.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function o(n){return t=>{n.forEach(e=>{typeof e=="function"?e(t):e!=null&&(e.current=t)})}}exports.mergeRefs=o;

package/dist/utils/functions/mergeRefs.es.js

@@ -0,0 +1,10 @@
+function o(e) {
+  return (t) => {
+    e.forEach((n) => {
+      typeof n == "function" ? n(t) : n != null && (n.current = t);
+    });
+  };
+}
+export {
+  o as mergeRefs
+};

package/dist/utils/strings/extractInitials.utility.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=t=>t.split(" ").map(e=>e.charAt(0)).join("");exports.extractInitials=i;

package/dist/utils/strings/extractInitials.utility.es.js

@@ -0,0 +1,4 @@
+const i = (t) => t.split(" ").map((a) => a.charAt(0)).join("");
+export {
+  i as extractInitials
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.18",
+  "version": "2.0.0-alpha.19",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -18,7 +18,8 @@
   "sideEffects": false,
   "files": [
     "/dist",
-    "/src"
+    "/src",
+    "!/src/__doc__"
   ],
   "publishConfig": {
     "access": "public",
@@ -69,13 +70,11 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "lodash": "^4.17.21",
     "lucide-react": "0.561.0",
     "react-day-picker": "^9.14.0",
     "react-dropzone": "^15.0.0",
     "react-hook-form": "^7.68.0",
     "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "^3.2.2",
     "tw-animate-css": "^1.2.9",
     "zod": "^4.2.0",
     "zustand": "^5.0.9"
@@ -95,13 +94,11 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/lodash": "^4.17.21",
     "@types/node": "^25.0.2",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
-    "@types/react-transition-group": "^4.4.12",
     "@vitejs/plugin-react": "^5.1.2",
-    "autoprefixer": "^10.4.23",
+    "@vitest/coverage-v8": "^4.1.7",
     "chromatic": "^16.2.0",
     "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
@@ -109,9 +106,8 @@
     "jsdom": "^27.3.0",
     "lint-staged": "^16.2.7",
     "plop": "^4.0.4",
-    "react-arborist": "^3.4.3",
     "react-markdown": "^10.1.0",
-    "react-transition-group": "^4.4.5",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "standard-version": "^9.5.0",
     "storybook": "10.3.5",
     "storybook-addon-tag-badges": "^3.1.0",
@@ -120,7 +116,7 @@
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^6.0.1",
-    "vitest": "^4.0.15"
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/accordion/accordion.test.tsx

@@ -58,7 +58,7 @@ describe("Accordion component", () => {
     );
 
     const disabledTrigger = screen.getByRole("button", { name: /disabled/i });
-    expect(disabledTrigger).toBeDisabled();
+    expect(disabledTrigger).toHaveAttribute("aria-disabled", "true");
   });
 
   it("should be controlled", () => {

package/src/components/accordion/accordion.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { type ReactNode } from "react";

package/src/components/alert/alert.test.tsx

@@ -0,0 +1,185 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertRoot,
+  AlertTitle,
+} from "../../components";
+
+describe("Alert composite", () => {
+  it("renders with the alert role and data-slot", () => {
+    render(<Alert title="Title" />);
+
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveAttribute("data-slot", "alert");
+  });
+
+  it("renders the title when provided", () => {
+    render(<Alert title="Update available" />);
+
+    const title = screen.getByText("Update available");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveAttribute("data-slot", "alert-title");
+  });
+
+  it("renders the description when provided", () => {
+    render(<Alert description="A new version is ready to install." />);
+
+    const description = screen.getByText("A new version is ready to install.");
+    expect(description).toHaveAttribute("data-slot", "alert-description");
+  });
+
+  it("renders the icon as a child of the root", () => {
+    render(<Alert title="Title" icon={<svg data-testid="icon" />} />);
+
+    expect(screen.getByTestId("icon")).toBeInTheDocument();
+  });
+
+  it("renders the action area when provided", () => {
+    render(
+      <Alert title="Title" action={<button type="button">Dismiss</button>} />,
+    );
+
+    expect(
+      document.querySelector('[data-slot="alert-action"]'),
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Dismiss" })).toBeInTheDocument();
+  });
+
+  it("omits title, description, and action slots when not provided", () => {
+    render(<Alert />);
+
+    expect(document.querySelector('[data-slot="alert-title"]')).toBeNull();
+    expect(
+      document.querySelector('[data-slot="alert-description"]'),
+    ).toBeNull();
+    expect(document.querySelector('[data-slot="alert-action"]')).toBeNull();
+  });
+
+  it("renders children after the structured slots", () => {
+    render(
+      <Alert title="Title">
+        <span data-testid="extra">Extra content</span>
+      </Alert>,
+    );
+
+    expect(screen.getByTestId("extra")).toBeInTheDocument();
+  });
+
+  it("applies the default variant when none is specified", () => {
+    render(<Alert title="Default" />);
+
+    expect(screen.getByRole("alert")).toHaveClass("bg-transparent");
+  });
+
+  it.each([
+    ["error", "border-error/32"],
+    ["success", "border-success/32"],
+    ["warning", "border-warning/32"],
+    ["info", "border-info/32"],
+  ] as const)("applies the %s variant classes", (variant, expectedClass) => {
+    render(<Alert variant={variant} title="Variant" />);
+
+    expect(screen.getByRole("alert")).toHaveClass(expectedClass);
+  });
+
+  it("merges className on the root and classNames on each slot", () => {
+    render(
+      <Alert
+        title="Title"
+        description="Description"
+        action={<button type="button">Action</button>}
+        className="root-class"
+        classNames={{
+          title: "title-class",
+          description: "description-class",
+          action: "action-class",
+        }}
+      />,
+    );
+
+    expect(screen.getByRole("alert")).toHaveClass("root-class");
+    expect(document.querySelector('[data-slot="alert-title"]')).toHaveClass(
+      "title-class",
+    );
+    expect(
+      document.querySelector('[data-slot="alert-description"]'),
+    ).toHaveClass("description-class");
+    expect(document.querySelector('[data-slot="alert-action"]')).toHaveClass(
+      "action-class",
+    );
+  });
+
+  it("forwards arbitrary DOM props to the root", () => {
+    render(<Alert title="Title" data-testid="custom-alert" id="my-alert" />);
+
+    const alert = screen.getByTestId("custom-alert");
+    expect(alert).toHaveAttribute("id", "my-alert");
+  });
+});
+
+describe("Alert primitives", () => {
+  it("renders AlertRoot with the alert role and merges className", () => {
+    render(
+      <AlertRoot className="custom" data-testid="primitive-root">
+        <span>Body</span>
+      </AlertRoot>,
+    );
+
+    const root = screen.getByTestId("primitive-root");
+    expect(root).toHaveAttribute("role", "alert");
+    expect(root).toHaveClass("custom");
+  });
+
+  it("renders AlertTitle as a standalone primitive", () => {
+    render(<AlertTitle className="t-class">Primitive title</AlertTitle>);
+
+    const title = screen.getByText("Primitive title");
+    expect(title).toHaveAttribute("data-slot", "alert-title");
+    expect(title).toHaveClass("t-class");
+  });
+
+  it("renders AlertDescription as a standalone primitive", () => {
+    render(
+      <AlertDescription className="d-class">
+        Primitive description
+      </AlertDescription>,
+    );
+
+    const description = screen.getByText("Primitive description");
+    expect(description).toHaveAttribute("data-slot", "alert-description");
+    expect(description).toHaveClass("d-class");
+  });
+
+  it("renders AlertAction as a standalone primitive", () => {
+    render(
+      <AlertAction className="a-class">
+        <button type="button">Action</button>
+      </AlertAction>,
+    );
+
+    const action = document.querySelector('[data-slot="alert-action"]');
+    expect(action).toHaveClass("a-class");
+    expect(action).toContainElement(screen.getByRole("button"));
+  });
+
+  it("composes all primitives together", () => {
+    render(
+      <AlertRoot variant="error">
+        <AlertTitle>Title</AlertTitle>
+        <AlertDescription>Description</AlertDescription>
+        <AlertAction>
+          <button type="button">Retry</button>
+        </AlertAction>
+      </AlertRoot>,
+    );
+
+    const root = screen.getByRole("alert");
+    expect(root).toHaveClass("border-error/32");
+    expect(screen.getByText("Title")).toBeInTheDocument();
+    expect(screen.getByText("Description")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Retry" })).toBeInTheDocument();
+  });
+});

package/src/components/alert/alert.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cva, type VariantProps } from "class-variance-authority";
 import { type ComponentProps, type ReactNode } from "react";
 import { cn } from "../../lib";

package/src/components/alert-dialog/alert-dialog.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { AlertDialog as AlertDialogBase } from "@base-ui/react/alert-dialog";
 import type { VariantProps } from "class-variance-authority";
 import type { HTMLAttributes, ReactElement, ReactNode } from "react";