@boxcustodia/library 2.0.0-alpha.32 → 2.0.0-alpha.34

package/dist/src/components/select/select.d.ts

@@ -1,5 +1,6 @@
 import { Select as SelectPrimitive } from '@base-ui/react/select';
 import { useRender } from '@base-ui/react/use-render';
+import { InferItemId, ItemId } from '../../utils/internal';
 import * as React from "react";
 export declare const selectTriggerClasses: string;
 export declare const selectTriggerIconClassName = "-me-1 size-4.5 opacity-80 sm:size-4";
@@ -29,21 +30,7 @@ export declare function SelectSeparator({ className, ...props }: SelectPrimitive
 export declare function SelectGroup(props: SelectPrimitive.Group.Props): React.ReactElement;
 export declare function SelectGroupLabel(props: SelectPrimitive.GroupLabel.Props): React.ReactElement;
 export declare function SelectLabel({ className, ...props }: SelectPrimitive.Label.Props): React.ReactElement;
-/** Identifier an item can be addressed by. */
-type SelectId = string | number;
-/**
- * Infers the id type from the shape of an item, mirroring `defaultGetId`'s
- * lookup order (`id` before `value`, then the primitive itself). Lets the
- * common case — `{ id, name }`, `{ label, value }`, or plain primitives — drive
- * `value` / `onValueChange` typing with no explicit `getId`. Falls back to
- * `string` for shapes `defaultGetId` can't address.
- */
-type InferId<TItem> = TItem extends {
-    id: infer I extends SelectId;
-} ? I : TItem extends {
-    value: infer V extends SelectId;
-} ? V : TItem extends SelectId ? TItem : string;
-type SelectBaseProps<TItem, TId extends SelectId> = Omit<SelectPrimitive.Root.Props<string, false>, "children" | "onValueChange" | "value" | "defaultValue" | "items" | "multiple"> & {
+type SelectBaseProps<TItem, TId extends ItemId> = Omit<SelectPrimitive.Root.Props<string, false>, "children" | "onValueChange" | "value" | "defaultValue" | "items" | "multiple"> & {
     items: readonly TItem[];
     /** Returns the display text for an item. Used for the trigger value and ARIA. Defaults to `item.label`, `item.name`, `item.title`, or the stringified primitive. */
     getLabel?: (item: TItem) => string;
@@ -64,7 +51,7 @@ type SelectBaseProps<TItem, TId extends SelectId> = Omit<SelectPrimitive.Root.Pr
         item?: string;
     };
 };
-export type SelectProps<TItem = unknown, TId extends SelectId = InferId<TItem>> = (SelectBaseProps<TItem, TId> & {
+export type SelectProps<TItem = unknown, TId extends ItemId = InferItemId<TItem>> = (SelectBaseProps<TItem, TId> & {
     multiple?: false;
     /** Controlled selection. The id (whatever `getId` returns — `string` or `number`), or `null` when cleared. */
     value?: TId | null;
@@ -99,6 +86,6 @@ export type SelectProps<TItem = unknown, TId extends SelectId = InferId<TItem>>
  * Use `SelectRoot` + primitives directly when you need full structural
  * control beyond what `className` + `classNames` slots offer.
  */
-export declare function Select<TItem = unknown, TId extends SelectId = InferId<TItem>>(allProps: SelectProps<TItem, TId>): React.ReactElement;
+export declare function Select<TItem = unknown, TId extends ItemId = InferItemId<TItem>>(allProps: SelectProps<TItem, TId>): React.ReactElement;
 export { SelectPrimitive };
 export { SelectPopup as SelectContent };

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

@@ -0,0 +1,2 @@
+export type { InferItemId, ItemId } from './item';
+export { defaultGetId, defaultGetLabel } from './item';

package/dist/src/utils/internal/item.d.ts

@@ -0,0 +1,27 @@
+/** Identifier an item can be addressed by. */
+export type ItemId = string | number;
+/**
+ * Infers the id type from the shape of an item, mirroring `defaultGetId`'s
+ * lookup order (`id` before `value`, then the primitive itself). Lets the
+ * common case — `{ id, name }`, `{ label, value }`, or plain primitives — drive
+ * `value` / `onValueChange` typing with no explicit `getId`. Falls back to
+ * `string` for shapes `defaultGetId` can't address.
+ */
+export type InferItemId<TItem> = TItem extends {
+    id: infer I extends ItemId;
+} ? I : TItem extends {
+    value: infer V extends ItemId;
+} ? V : TItem extends ItemId ? TItem : string;
+/**
+ * Resolves the display text for an item. Defaults to `item.label`, `item.name`,
+ * `item.title`, or the stringified primitive. Always returns a string — labels
+ * are display text.
+ */
+export declare function defaultGetLabel(item: unknown): string;
+/**
+ * Resolves the id for an item, preserving its native type. The internal Base UI
+ * layer keys options by string (callers wrap this in `String(...)`), so keeping
+ * the raw type here lets `onValueChange` hand back a numeric id as a number, not
+ * a string. Defaults to `item.id`, `item.value`, or the stringified primitive.
+ */
+export declare function defaultGetId(item: unknown): ItemId;

package/dist/utils/internal/item.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function t(r){if(r==null)return"";if(typeof r=="string"||typeof r=="number")return String(r);if(typeof r=="object"){const n=r;if("label"in n)return String(n.label);if("name"in n)return String(n.name);if("title"in n)return String(n.title)}return String(r)}function e(r){if(r==null)return"";if(typeof r=="string"||typeof r=="number")return r;if(typeof r=="object"){const n=r;if("id"in n)return n.id;if("value"in n)return n.value}return String(r)}exports.defaultGetId=e;exports.defaultGetLabel=t;

package/dist/utils/internal/item.es.js

@@ -0,0 +1,25 @@
+function t(r) {
+  if (r == null) return "";
+  if (typeof r == "string" || typeof r == "number") return String(r);
+  if (typeof r == "object") {
+    const n = r;
+    if ("label" in n) return String(n.label);
+    if ("name" in n) return String(n.name);
+    if ("title" in n) return String(n.title);
+  }
+  return String(r);
+}
+function e(r) {
+  if (r == null) return "";
+  if (typeof r == "string" || typeof r == "number") return r;
+  if (typeof r == "object") {
+    const n = r;
+    if ("id" in n) return n.id;
+    if ("value" in n) return n.value;
+  }
+  return String(r);
+}
+export {
+  e as defaultGetId,
+  t as defaultGetLabel
+};

package/package.json

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

package/src/components/button/button.tsx

@@ -8,11 +8,11 @@ import { BaseButton } from "./components/base-button";
 const buttonVariants = cva(
   [
     "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",
+    "text-sm font-medium whitespace-nowrap transition-[background-color,border-color,box-shadow,transform,opacity] 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",
+    "aria-invalid:border-error aria-invalid:ring-3 aria-invalid:ring-error/20 dark:aria-invalid:border-error/50 dark:aria-invalid:ring-error/40",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
     "[&[data-loading]]:text-transparent",
     "[&[data-loading]>*:not([data-loader])]:invisible",

package/src/components/combobox/combobox.test.tsx

@@ -217,6 +217,31 @@ describe("Combobox getId / getLabel defaults", () => {
     await userEvent.click(getInput());
     expect(screen.getAllByRole("option").length).toBe(2);
   });
+
+  it("returns a numeric id as a number without a custom getId", async () => {
+    const numeric = [
+      { id: 1, name: "Apple" },
+      { id: 2, name: "Banana" },
+    ];
+    const onValueChange = vi.fn();
+    render(
+      <Combobox
+        items={numeric}
+        placeholder="P"
+        onValueChange={onValueChange}
+      />,
+    );
+
+    const input = getInput();
+    await userEvent.click(input);
+    await userEvent.type(input, "Banana");
+    await userEvent.click(screen.getByRole("option"));
+
+    // defaultGetId preserves the native id type — number stays a number,
+    // not a stringified "2".
+    expect(onValueChange.mock.calls[0][0]).toBe(2);
+    expect(typeof onValueChange.mock.calls[0][0]).toBe("number");
+  });
 });
 
 describe("Combobox (multiple mode)", () => {

package/src/components/combobox/combobox.tsx

@@ -6,6 +6,12 @@ import { ChevronsUpDownIcon, XIcon } from "lucide-react";
 import * as React from "react";
 import { useIsomorphicLayoutEffect } from "../../hooks/internal";
 import { cn } from "../../lib";
+import {
+  defaultGetId,
+  defaultGetLabel,
+  type InferItemId,
+  type ItemId,
+} from "../../utils/internal";
 import { useIsInsideFieldRoot } from "../field";
 import { Input, inputBaseClasses } from "../input";
 import { ScrollArea } from "../scroll-area";
@@ -702,29 +708,6 @@ function ComboboxMultipleChipsContent({
 
 // ─── Composite ────────────────────────────────────────────────────────────────
 
-function defaultGetLabel(item: unknown): string {
-  if (item == null) return "";
-  if (typeof item === "string" || typeof item === "number") return String(item);
-  if (typeof item === "object") {
-    const record = item as Record<string, unknown>;
-    if ("label" in record) return String(record.label);
-    if ("name" in record) return String(record.name);
-    if ("title" in record) return String(record.title);
-  }
-  return String(item);
-}
-
-function defaultGetId(item: unknown): string {
-  if (item == null) return "";
-  if (typeof item === "string" || typeof item === "number") return String(item);
-  if (typeof item === "object") {
-    const record = item as Record<string, unknown>;
-    if ("id" in record) return String(record.id);
-    if ("value" in record) return String(record.value);
-  }
-  return String(item);
-}
-
 function ComboboxSingleTrigger({
   placeholder,
   showClear,
@@ -777,26 +760,9 @@ function ComboboxMultipleTrigger({
   );
 }
 
-type ComboboxId = string | number;
-
-/**
- * Infers the id type from the shape of an item, mirroring `defaultGetId`'s
- * lookup order (`id` before `value`, then the primitive itself). Lets the
- * common case — `{ id, name }`, `{ label, value }`, or plain primitives — drive
- * `value` / `onValueChange` typing with no explicit `getId`. Falls back to
- * `string` for shapes `defaultGetId` can't address.
- */
-type InferId<TItem> = TItem extends { id: infer I extends ComboboxId }
-  ? I
-  : TItem extends { value: infer V extends ComboboxId }
-    ? V
-    : TItem extends ComboboxId
-      ? TItem
-      : string;
-
 type ComboboxBaseProps<
   TItem = unknown,
-  TId extends ComboboxId = InferId<TItem>,
+  TId extends ItemId = InferItemId<TItem>,
 > = Omit<
   ComboboxPrimitive.Root.Props<TItem, boolean>,
   | "items"
@@ -843,7 +809,7 @@ type ComboboxBaseProps<
 
 export type ComboboxProps<
   TItem = unknown,
-  TId extends ComboboxId = InferId<TItem>,
+  TId extends ItemId = InferItemId<TItem>,
 > =
   | (ComboboxBaseProps<TItem, TId> & {
       multiple?: false;
@@ -881,7 +847,7 @@ export type ComboboxProps<
  */
 export function Combobox<
   TItem = unknown,
-  TId extends ComboboxId = InferId<TItem>,
+  TId extends ItemId = InferItemId<TItem>,
 >(allProps: ComboboxProps<TItem, TId>): React.ReactElement {
   // Cast internally — ComboboxProps discriminated union enforces correctness for consumers.
   // The union can't be spread directly into ComboboxRoot because TypeScript can't resolve

package/src/components/select/select.test.tsx

@@ -424,6 +424,24 @@ describe("Select controlled value (id-first)", () => {
     expect(onChange.mock.calls[0][1]).toEqual(numeric[0]);
   });
 
+  it("returns a numeric id as a number without a custom getId", async () => {
+    const numeric = [
+      { id: 1, name: "Aumentar retención" },
+      { id: 2, name: "Reducir churn" },
+    ];
+    const onChange = vi.fn();
+    render(<Select items={numeric} defaultOpen onValueChange={onChange} />);
+
+    await userEvent.click(
+      screen.getByRole("option", { name: "Aumentar retención" }),
+    );
+
+    // defaultGetId preserves the native id type — number stays a number,
+    // not a stringified "1".
+    expect(onChange.mock.calls[0][0]).toBe(1);
+    expect(typeof onChange.mock.calls[0][0]).toBe("number");
+  });
+
   it("rejects an item object as value at compile time", () => {
     // @ts-expect-error — value is id-first; passing the item must not compile.
     render(<Select items={fruits} value={fruits[1]} />);

package/src/components/select/select.tsx

@@ -10,6 +10,12 @@ import {
 } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../lib";
+import {
+  defaultGetId,
+  defaultGetLabel,
+  type InferItemId,
+  type ItemId,
+} from "../../utils/internal";
 import { inputBaseClasses } from "../input";
 
 // ─── Primitives ───────────────────────────────────────────────────────────────
@@ -266,54 +272,13 @@ export function SelectLabel({
 
 // ─── Composite ────────────────────────────────────────────────────────────────
 
-function defaultGetLabel(item: unknown): string {
-  if (item == null) return "";
-  if (typeof item === "string" || typeof item === "number") return String(item);
-  if (typeof item === "object") {
-    const record = item as Record<string, unknown>;
-    if ("label" in record) return String(record.label);
-    if ("name" in record) return String(record.name);
-    if ("title" in record) return String(record.title);
-  }
-  return String(item);
-}
-
-function defaultGetId(item: unknown): string {
-  if (item == null) return "";
-  if (typeof item === "string" || typeof item === "number") return String(item);
-  if (typeof item === "object") {
-    const record = item as Record<string, unknown>;
-    if ("id" in record) return String(record.id);
-    if ("value" in record) return String(record.value);
-  }
-  return String(item);
-}
-
 function defaultGetDisabled(item: unknown): boolean {
   if (item != null && typeof item === "object" && "disabled" in item)
     return Boolean((item as Record<string, unknown>).disabled);
   return false;
 }
 
-/** Identifier an item can be addressed by. */
-type SelectId = string | number;
-
-/**
- * Infers the id type from the shape of an item, mirroring `defaultGetId`'s
- * lookup order (`id` before `value`, then the primitive itself). Lets the
- * common case — `{ id, name }`, `{ label, value }`, or plain primitives — drive
- * `value` / `onValueChange` typing with no explicit `getId`. Falls back to
- * `string` for shapes `defaultGetId` can't address.
- */
-type InferId<TItem> = TItem extends { id: infer I extends SelectId }
-  ? I
-  : TItem extends { value: infer V extends SelectId }
-    ? V
-    : TItem extends SelectId
-      ? TItem
-      : string;
-
-type SelectBaseProps<TItem, TId extends SelectId> = Omit<
+type SelectBaseProps<TItem, TId extends ItemId> = Omit<
   SelectPrimitive.Root.Props<string, false>,
   "children" | "onValueChange" | "value" | "defaultValue" | "items" | "multiple"
 > & {
@@ -340,7 +305,7 @@ type SelectBaseProps<TItem, TId extends SelectId> = Omit<
 
 export type SelectProps<
   TItem = unknown,
-  TId extends SelectId = InferId<TItem>,
+  TId extends ItemId = InferItemId<TItem>,
 > =
   | (SelectBaseProps<TItem, TId> & {
       multiple?: false;
@@ -379,9 +344,10 @@ export type SelectProps<
  * Use `SelectRoot` + primitives directly when you need full structural
  * control beyond what `className` + `classNames` slots offer.
  */
-export function Select<TItem = unknown, TId extends SelectId = InferId<TItem>>(
-  allProps: SelectProps<TItem, TId>,
-): React.ReactElement {
+export function Select<
+  TItem = unknown,
+  TId extends ItemId = InferItemId<TItem>,
+>(allProps: SelectProps<TItem, TId>): React.ReactElement {
   const {
     items,
     getLabel: getLabelProp,

package/src/utils/internal/index.ts

@@ -0,0 +1,2 @@
+export type { InferItemId, ItemId } from "./item";
+export { defaultGetId, defaultGetLabel } from "./item";

package/src/utils/internal/item.ts

@@ -0,0 +1,51 @@
+/** Identifier an item can be addressed by. */
+export type ItemId = string | number;
+
+/**
+ * Infers the id type from the shape of an item, mirroring `defaultGetId`'s
+ * lookup order (`id` before `value`, then the primitive itself). Lets the
+ * common case — `{ id, name }`, `{ label, value }`, or plain primitives — drive
+ * `value` / `onValueChange` typing with no explicit `getId`. Falls back to
+ * `string` for shapes `defaultGetId` can't address.
+ */
+export type InferItemId<TItem> = TItem extends { id: infer I extends ItemId }
+  ? I
+  : TItem extends { value: infer V extends ItemId }
+    ? V
+    : TItem extends ItemId
+      ? TItem
+      : string;
+
+/**
+ * Resolves the display text for an item. Defaults to `item.label`, `item.name`,
+ * `item.title`, or the stringified primitive. Always returns a string — labels
+ * are display text.
+ */
+export function defaultGetLabel(item: unknown): string {
+  if (item == null) return "";
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  if (typeof item === "object") {
+    const record = item as Record<string, unknown>;
+    if ("label" in record) return String(record.label);
+    if ("name" in record) return String(record.name);
+    if ("title" in record) return String(record.title);
+  }
+  return String(item);
+}
+
+/**
+ * Resolves the id for an item, preserving its native type. The internal Base UI
+ * layer keys options by string (callers wrap this in `String(...)`), so keeping
+ * the raw type here lets `onValueChange` hand back a numeric id as a number, not
+ * a string. Defaults to `item.id`, `item.value`, or the stringified primitive.
+ */
+export function defaultGetId(item: unknown): ItemId {
+  if (item == null) return "";
+  if (typeof item === "string" || typeof item === "number") return item;
+  if (typeof item === "object") {
+    const record = item as Record<string, unknown>;
+    if ("id" in record) return record.id as ItemId;
+    if ("value" in record) return record.value as ItemId;
+  }
+  return String(item);
+}