@boxcustodia/library 2.0.0-alpha.17 → 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.17",
+  "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

@@ -0,0 +1,117 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+} from "../../components";
+import { click } from "../../utils/tests";
+
+const items = [
+  { value: "item-1", trigger: "First question", content: "First answer" },
+  { value: "item-2", trigger: "Second question", content: "Second answer" },
+];
+
+describe("Accordion component", () => {
+  it("should render correctly", () => {
+    render(<Accordion data-testid="Accordion" items={items} />);
+    const component = screen.getByTestId("Accordion");
+    expect(component).toBeInTheDocument();
+  });
+
+  it("should show all triggers", () => {
+    render(<Accordion items={items} />);
+
+    expect(screen.getByText(/first question/i)).toBeInTheDocument();
+    expect(screen.getByText(/second question/i)).toBeInTheDocument();
+  });
+
+  it("should open a panel when its trigger is clicked", () => {
+    render(<Accordion items={items} />);
+
+    const trigger = screen.getByRole("button", { name: /first question/i });
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    click(trigger);
+
+    waitFor(() => {
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+      expect(screen.getByText("First answer")).toBeVisible();
+    });
+  });
+
+  it("should render disabled items as disabled", () => {
+    render(
+      <Accordion
+        items={[
+          { value: "item-1", trigger: "Available", content: "Open me" },
+          {
+            value: "item-2",
+            trigger: "Disabled",
+            content: "Cannot open",
+            disabled: true,
+          },
+        ]}
+      />,
+    );
+
+    const disabledTrigger = screen.getByRole("button", { name: /disabled/i });
+    expect(disabledTrigger).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("should be controlled", () => {
+    const mock = vi.fn();
+    render(<Accordion items={items} value={["item-1"]} onValueChange={mock} />);
+
+    const secondTrigger = screen.getByRole("button", {
+      name: /second question/i,
+    });
+    click(secondTrigger);
+
+    waitFor(() => {
+      expect(mock).toHaveBeenCalled();
+    });
+  });
+
+  it("should apply classNames to each slot", () => {
+    render(
+      <Accordion
+        items={items}
+        className="root-class"
+        classNames={{
+          item: "item-class",
+          trigger: "trigger-class",
+          content: "content-class",
+        }}
+      />,
+    );
+
+    expect(document.querySelector('[data-slot="accordion"]')).toHaveClass(
+      "root-class",
+    );
+    expect(document.querySelector('[data-slot="accordion-item"]')).toHaveClass(
+      "item-class",
+    );
+    expect(
+      document.querySelector('[data-slot="accordion-trigger"]'),
+    ).toHaveClass("trigger-class");
+  });
+
+  it("should render correctly using primitives", () => {
+    render(
+      <AccordionRoot defaultValue={["item-1"]}>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Primitive trigger</AccordionTrigger>
+          <AccordionContent>Primitive content</AccordionContent>
+        </AccordionItem>
+      </AccordionRoot>,
+    );
+
+    expect(screen.getByText(/primitive trigger/i)).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /primitive trigger/i }),
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+});

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";