@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/containers/settings-layout/settings-layout.tsx

@@ -55,7 +55,7 @@ export function SettingsLayoutNavItem({
       type={type}
       aria-current={active ? "true" : undefined}
       className={cn(
-        "flex shrink-0 items-center gap-2.5 rounded-control px-2.5 py-[7px] font-medium text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink",
+        "flex shrink-0 items-center gap-2.5 rounded-control px-2.5 py-1.75 font-medium text-fs-130 text-ink-2 hover:bg-surface-2 hover:text-ink",
         active && "bg-accent-soft font-semibold text-accent-ink",
         className,
       )}

package/src/containers/settings-row/settings-row.tsx

@@ -1,6 +1,9 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
+export type SettingsRowPart = "root" | "body" | "title" | "description" | "control";
+
 export interface SettingsRowProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
   title: ReactNode;
   description?: ReactNode;
@@ -8,6 +11,8 @@ export interface SettingsRowProps extends Omit<ComponentPropsWithoutRef<"div">,
   control?: ReactNode;
   /** Id for the title element, so the control can reference it with `aria-labelledby`. */
   titleId?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<SettingsRowPart>;
 }
 
 export function SettingsRow({
@@ -16,23 +21,33 @@ export function SettingsRow({
   control,
   titleId,
   className,
+  classNames,
   ...props
 }: SettingsRowProps) {
   return (
     <div
       className={cn(
-        "flex flex-wrap items-center justify-between gap-x-4 gap-y-2.5 border-t-divider px-4 py-[13px] first:border-t-0",
+        "flex flex-wrap items-center justify-between gap-x-4 gap-y-2.5 border-t-divider px-4 py-3.25 first:border-t-0",
+        classNames?.root,
         className,
       )}
       {...props}
     >
-      <div className="min-w-0 flex-[1_1_14rem] break-words">
-        <p id={titleId} className="font-semibold text-[13px]">
+      <div className={cn("min-w-0 flex-[1_1_14rem] break-words", classNames?.body)}>
+        <p id={titleId} className={cn("font-semibold text-fs-130", classNames?.title)}>
           {title}
         </p>
-        {description ? <p className="max-w-[60ch] text-[12px] text-ink-3">{description}</p> : null}
+        {description ? (
+          <p className={cn("max-w-[60ch] text-fs-120 text-ink-3", classNames?.description)}>
+            {description}
+          </p>
+        ) : null}
       </div>
-      {control ? <div className="flex max-w-full shrink-0 items-center">{control}</div> : null}
+      {control ? (
+        <div className={cn("flex max-w-full shrink-0 items-center", classNames?.control)}>
+          {control}
+        </div>
+      ) : null}
     </div>
   );
 }

package/src/containers/table/table.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { ArrowLeftToLine, ArrowRightToLine, PinOff } from "lucide-react";
 import {
   type ComponentPropsWithoutRef,
   type CSSProperties,
@@ -13,6 +12,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { ArrowLeftToLine, ArrowRightToLine, PinOff } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import {
   computePinOffsets,
@@ -197,7 +197,7 @@ export function Table({
       >
         <table
           ref={tableRef}
-          className={cn("w-full border-collapse text-[13px]", className)}
+          className={cn("w-full border-collapse text-fs-130", className)}
           {...props}
         />
       </div>
@@ -302,7 +302,7 @@ export function TableHeaderCell({
   return (
     <th
       className={cn(
-        "whitespace-nowrap border-b-divider px-4 py-2.5 text-left font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em] @max-sm/table:px-2.5",
+        "whitespace-nowrap border-b-divider px-4 py-2.5 text-left font-[650] text-fs-110 text-ink-3 uppercase tracking-[.07em] @max-sm/table:px-2.5",
         alignRight && "text-right",
         pinned.className,
         className,
@@ -343,7 +343,7 @@ export function TableCell({
   return (
     <td
       className={cn(
-        "px-4 py-[11px] align-middle @max-sm/table:px-2.5",
+        "px-4 py-2.75 align-middle @max-sm/table:px-2.5",
         alignRight && "text-right",
         pinned.className,
         className,
@@ -395,7 +395,7 @@ export function TableLinkRow({
       >
         <a
           href={href}
-          className="block px-4 py-[11px] font-[650] text-ink no-underline before:absolute before:inset-0 before:content-[''] @max-sm/table:px-2.5"
+          className="block px-4 py-2.75 font-[650] text-ink no-underline before:absolute before:inset-0 before:content-[''] @max-sm/table:px-2.5"
         >
           {primary}
         </a>

package/src/containers/timeline/index.ts

@@ -2,5 +2,6 @@ export {
   Timeline,
   type TimelineFeedItem,
   type TimelineFeedTone,
+  type TimelinePart,
   type TimelineProps,
 } from "./timeline.js";

package/src/containers/timeline/timeline.tsx

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
 export type TimelineFeedTone = "neutral" | "accent" | "success" | "warning" | "danger";
@@ -22,8 +23,25 @@ export interface TimelineFeedItem {
   group?: string;
 }
 
+export type TimelinePart =
+  | "root"
+  | "list"
+  | "item"
+  | "group"
+  | "rail"
+  | "marker"
+  | "connector"
+  | "content"
+  | "header"
+  | "title"
+  | "time"
+  | "actor"
+  | "description";
+
 export interface TimelineProps extends Omit<ComponentPropsWithoutRef<"ol">, "children"> {
   items: TimelineFeedItem[];
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<TimelinePart>;
 }
 
 const markerClasses: Record<TimelineFeedTone, string> = {
@@ -35,51 +53,89 @@ const markerClasses: Record<TimelineFeedTone, string> = {
 };
 
 /** Vertical activity feed: marker rail on the left, grouped by day, newest first by convention. */
-export function Timeline({ items, className, ...props }: TimelineProps) {
+export function Timeline({ items, className, classNames, ...props }: TimelineProps) {
   return (
-    <div className={cn("@container/timeline min-w-0", className)}>
-      <ol className="m-0 flex list-none flex-col p-0" {...props}>
+    <div className={cn("@container/timeline min-w-0", classNames?.root, className)}>
+      <ol {...props} className={cn("m-0 flex list-none flex-col p-0", classNames?.list)}>
         {items.map((item, index) => {
           const previous = items[index - 1];
           const last = index === items.length - 1;
           const tone = item.tone ?? "neutral";
           return (
-            <li key={item.id} className="flex min-w-0 flex-col">
+            <li key={item.id} className={cn("flex min-w-0 flex-col", classNames?.item)}>
               {item.group && item.group !== previous?.group ? (
-                <h4 className="pb-density-sm text-ink-3 text-overline uppercase">{item.group}</h4>
+                <h4
+                  className={cn(
+                    "pb-density-sm text-ink-3 text-overline uppercase",
+                    classNames?.group,
+                  )}
+                >
+                  {item.group}
+                </h4>
               ) : null}
               <div className="flex min-w-0 gap-density">
-                <div className="flex shrink-0 flex-col items-center">
+                <div className={cn("flex shrink-0 flex-col items-center", classNames?.rail)}>
                   <span
                     aria-hidden="true"
                     className={cn(
                       "flex size-7 shrink-0 items-center justify-center rounded-badge [&_svg]:size-3.5",
                       markerClasses[tone],
+                      classNames?.marker,
                     )}
                   >
                     {item.icon ?? <span className="size-2 rounded-full bg-current" />}
                   </span>
-                  {last ? null : <span aria-hidden="true" className="w-px flex-1 bg-divider" />}
+                  {last ? null : (
+                    <span
+                      aria-hidden="true"
+                      className={cn("w-px flex-1 bg-divider", classNames?.connector)}
+                    />
+                  )}
                 </div>
                 <div
                   className={cn(
                     "flex min-w-0 flex-1 flex-col gap-1",
                     last ? "pb-0" : "pb-density-lg",
+                    classNames?.content,
                   )}
                 >
-                  <div className="flex min-w-0 flex-wrap items-baseline gap-x-density-sm">
-                    <span className="min-w-0 break-words text-row-title text-ink">
+                  <div
+                    className={cn(
+                      "flex min-w-0 flex-wrap items-baseline gap-x-density-sm",
+                      classNames?.header,
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        "min-w-0 break-words text-row-title text-ink",
+                        classNames?.title,
+                      )}
+                    >
                       {item.title}
                     </span>
                     {item.time ? (
-                      <time dateTime={item.dateTime} className="shrink-0 text-ink-3 text-meta">
+                      <time
+                        dateTime={item.dateTime}
+                        className={cn("shrink-0 text-ink-3 text-meta", classNames?.time)}
+                      >
                         {item.time}
                       </time>
                     ) : null}
                   </div>
-                  {item.actor ? <span className="text-ink-3 text-meta">{item.actor}</span> : null}
+                  {item.actor ? (
+                    <span className={cn("text-ink-3 text-meta", classNames?.actor)}>
+                      {item.actor}
+                    </span>
+                  ) : null}
                   {item.description ? (
-                    <p className="m-0 break-words text-body text-ink-2">{item.description}</p>
+                    <p
+                      className={cn(
+                        "m-0 break-words text-body text-ink-2",
+                        classNames?.description,
+                      )}
+                    >
+                      {item.description}
+                    </p>
                   ) : null}
                   {item.children}
                 </div>

package/src/dashboards/layout.tsx

@@ -40,8 +40,8 @@ export interface ChartCardProps {
 function CardTitle({ title, subtitle }: { title: string; subtitle?: string }) {
   return (
     <div className="min-w-0 flex-1">
-      <h2 className="m-0 break-words font-semibold text-[14px] text-ink">{title}</h2>
-      {subtitle ? <p className="m-0 break-words text-[12px] text-ink-3">{subtitle}</p> : null}
+      <h2 className="m-0 break-words font-semibold text-fs-140 text-ink">{title}</h2>
+      {subtitle ? <p className="m-0 break-words text-fs-120 text-ink-3">{subtitle}</p> : null}
     </div>
   );
 }

package/src/forms/accent-picker/accent-picker.tsx

@@ -1,7 +1,12 @@
 "use client";
 
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { type ComponentPropsWithoutRef, useState } from "react";
+import { useState } from "react";
+import {
+  RadioGroupItem,
+  RadioGroupRoot,
+  type RadioGroupRootProps,
+} from "../../atoms/radio-group/radio-group-primitive.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
 export interface AccentOption {
@@ -11,15 +16,16 @@ export interface AccentOption {
   swatch: string;
 }
 
+export type AccentPickerPart = "root" | "option" | "swatch";
+
 export interface AccentPickerProps
-  extends Omit<
-    ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,
-    "value" | "defaultValue" | "onValueChange"
-  > {
+  extends Omit<RadioGroupRootProps, "value" | "defaultValue" | "onValueChange"> {
   options: AccentOption[];
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<AccentPickerPart>;
 }
 
 /**
@@ -33,36 +39,40 @@ export function AccentPicker({
   defaultValue,
   onValueChange,
   className,
+  classNames,
   ...props
 }: AccentPickerProps) {
   const [internal, setInternal] = useState(() => defaultValue ?? options[0]?.value);
   const current = value ?? internal;
 
   return (
-    <RadioGroupPrimitive.Root
+    <RadioGroupRoot
       data-accent={current}
       value={current}
       onValueChange={(next) => {
         setInternal(next);
         onValueChange?.(next);
       }}
-      className={cn("flex flex-wrap gap-2", className)}
+      className={cn("flex flex-wrap gap-2", classNames?.root, className)}
       {...props}
     >
       {options.map((option) => (
-        <RadioGroupPrimitive.Item
+        <RadioGroupItem
           key={option.value}
           value={option.value}
-          className="flex items-center gap-2 rounded-control border-divider px-2.5 py-1.75 font-semibold text-chip-text text-ink data-[state=checked]:border-accent-ink data-[state=checked]:shadow-selected"
+          className={cn(
+            "flex items-center gap-2 rounded-control border-divider px-2.5 py-1.75 font-semibold text-chip-text text-ink data-[state=checked]:border-accent-ink data-[state=checked]:shadow-selected",
+            classNames?.option,
+          )}
         >
           <span
             aria-hidden="true"
-            className="size-3.5 shrink-0 rounded-xs"
+            className={cn("size-3.5 shrink-0 rounded-xs", classNames?.swatch)}
             style={{ background: option.swatch }}
           />
           {option.label}
-        </RadioGroupPrimitive.Item>
+        </RadioGroupItem>
       ))}
-    </RadioGroupPrimitive.Root>
+    </RadioGroupRoot>
   );
 }

package/src/forms/accent-picker/index.ts

@@ -1,5 +1,6 @@
 export {
   type AccentOption,
   AccentPicker,
+  type AccentPickerPart,
   type AccentPickerProps,
 } from "./accent-picker.js";

package/src/forms/checkbox-button-group/checkbox-button-group.tsx

@@ -1,11 +1,19 @@
 "use client";
 
 import { useState } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
-import { type ButtonOption, OptionShell, optionGridClass } from "../internal/button-option.js";
+import {
+  type ButtonOption,
+  type ButtonOptionPart,
+  OptionShell,
+  optionGridClass,
+} from "../internal/button-option.js";
 
 export type CheckboxButtonOption = ButtonOption;
 
+export type CheckboxButtonGroupPart = "root" | ButtonOptionPart;
+
 export interface CheckboxButtonGroupProps {
   options: CheckboxButtonOption[];
   value?: string[];
@@ -17,6 +25,8 @@ export interface CheckboxButtonGroupProps {
   "aria-label"?: string;
   "aria-labelledby"?: string;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<CheckboxButtonGroupPart>;
 }
 
 /** Multi-select where each option is a button-like card; native checkboxes underneath. */
@@ -28,6 +38,7 @@ export function CheckboxButtonGroup({
   name,
   disabled,
   className,
+  classNames,
   ...aria
 }: CheckboxButtonGroupProps) {
   const [inner, setInner] = useState(defaultValue);
@@ -41,13 +52,19 @@ export function CheckboxButtonGroup({
 
   return (
     <fieldset
-      className={cn("@container/options m-0 min-w-0 border-0 p-0", optionGridClass, className)}
+      className={cn(
+        "@container/options m-0 min-w-0 border-0 p-0",
+        optionGridClass,
+        classNames?.root,
+        className,
+      )}
       {...aria}
     >
       {options.map((option) => (
         <OptionShell
           key={option.value}
           option={option}
+          classNames={classNames}
           input={
             <input
               type="checkbox"

package/src/forms/checkbox-button-group/index.ts

@@ -1,5 +1,6 @@
 export {
   CheckboxButtonGroup,
+  type CheckboxButtonGroupPart,
   type CheckboxButtonGroupProps,
   type CheckboxButtonOption,
 } from "./checkbox-button-group.js";

package/src/forms/dropzone/dropzone.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { Upload } from "lucide-react";
 import { type ChangeEvent, type DragEvent, useRef, useState } from "react";
+import { Upload } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
 export type DropzoneRejectionReason = "type" | "size";
@@ -11,6 +12,8 @@ export interface DropzoneRejection {
   reason: DropzoneRejectionReason;
 }
 
+export type DropzonePart = "root" | "icon" | "title" | "hint" | "browse";
+
 export interface DropzoneProps {
   onFiles: (files: File[]) => void;
   /** Called with the rejected files; the caller composes the user-facing message. */
@@ -23,6 +26,8 @@ export interface DropzoneProps {
   hint?: string;
   browseLabel: string;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<DropzonePart>;
 }
 
 function isTypeAllowed(file: File, acceptedTypes?: string[]) {
@@ -63,6 +68,7 @@ export function Dropzone({
   hint,
   browseLabel,
   className,
+  classNames,
 }: DropzoneProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [dragging, setDragging] = useState(false);
@@ -91,6 +97,7 @@ export function Dropzone({
       className={cn(
         "@container/dropzone flex min-w-0 flex-col items-center gap-1.5 rounded-tile border-[1.5px] border-line-control border-dashed bg-surface-2 p-3 text-center text-ink-2 @min-[360px]/dropzone:p-5.5",
         dragging && "border-accent-ink bg-accent-soft",
+        classNames?.root,
         className,
       )}
       onDragOver={(event) => {
@@ -100,14 +107,29 @@ export function Dropzone({
       onDragLeave={() => setDragging(false)}
       onDrop={handleDrop}
     >
-      <Upload aria-hidden="true" className="size-4.5 @min-[360px]/dropzone:size-5.5" />
-      <b className="max-w-full text-control [overflow-wrap:anywhere]">{title}</b>
+      <Upload
+        aria-hidden="true"
+        className={cn("size-4.5 @min-[360px]/dropzone:size-5.5", classNames?.icon)}
+      />
+      <b className={cn("max-w-full text-control [overflow-wrap:anywhere]", classNames?.title)}>
+        {title}
+      </b>
       {hint ? (
-        <span className="max-w-full text-meta text-ink-3 [overflow-wrap:anywhere]">{hint}</span>
+        <span
+          className={cn(
+            "max-w-full text-meta text-ink-3 [overflow-wrap:anywhere]",
+            classNames?.hint,
+          )}
+        >
+          {hint}
+        </span>
       ) : null}
       <button
         type="button"
-        className="mt-1 inline-flex h-control-sm max-w-full items-center justify-center rounded-input border-control bg-surface-control px-3 font-semibold text-chip-text hover:bg-surface-2"
+        className={cn(
+          "mt-1 inline-flex h-control-sm max-w-full items-center justify-center rounded-input border-control bg-surface-control px-3 font-semibold text-chip-text hover:bg-surface-2",
+          classNames?.browse,
+        )}
         onClick={() => inputRef.current?.click()}
       >
         {browseLabel}

package/src/forms/dropzone/index.ts

@@ -1,5 +1,6 @@
 export {
   Dropzone,
+  type DropzonePart,
   type DropzoneProps,
   type DropzoneRejection,
   type DropzoneRejectionReason,

package/src/forms/emoji-picker/emoji-picker.tsx

@@ -1,11 +1,24 @@
 "use client";
 
-import { Search } from "lucide-react";
 import { type KeyboardEvent, useId, useMemo, useRef, useState } from "react";
+import { Search } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry } from "./emoji-data.js";
 import { gridMove, searchEmojis } from "./model.js";
 
+export type EmojiPickerPart =
+  | "root"
+  | "search"
+  | "searchIcon"
+  | "searchInput"
+  | "categories"
+  | "category"
+  | "title"
+  | "grid"
+  | "emoji"
+  | "empty";
+
 export interface EmojiPickerProps {
   onSelect?: (emoji: string) => void;
   /** Replaces the built-in dataset (`EMOJI_CATEGORIES`). */
@@ -14,6 +27,8 @@ export interface EmojiPickerProps {
   defaultCategory?: string;
   searchPlaceholder?: string;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<EmojiPickerPart>;
 }
 
 /**
@@ -27,6 +42,7 @@ export function EmojiPicker({
   defaultCategory,
   searchPlaceholder = "Buscar emoji",
   className,
+  classNames,
 }: EmojiPickerProps) {
   const baseId = useId();
   const grid = useRef<HTMLDivElement>(null);
@@ -64,14 +80,18 @@ export function EmojiPicker({
     <div
       className={cn(
         "@container/emoji flex w-full max-w-xs min-w-0 flex-col gap-density-sm rounded-popover border-card bg-surface-overlay p-card text-ink",
+        classNames?.root,
         className,
       )}
     >
-      <label className="relative flex items-center">
+      <label className={cn("relative flex items-center", classNames?.search)}>
         <span className="sr-only">{searchPlaceholder}</span>
         <Search
           aria-hidden="true"
-          className="pointer-events-none absolute left-2.5 size-3.5 text-ink-3"
+          className={cn(
+            "pointer-events-none absolute left-2.5 size-3.5 text-ink-3",
+            classNames?.searchIcon,
+          )}
         />
         <input
           type="search"
@@ -81,12 +101,19 @@ export function EmojiPicker({
             setQuery(event.target.value);
             setActive(0);
           }}
-          className="h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control pr-2 pl-8 text-control text-ink placeholder:text-ink-3 focus:border-transparent focus:outline-2 focus:outline-accent-ink focus:-outline-offset-1"
+          className={cn(
+            "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control pr-2 pl-8 text-control text-ink placeholder:text-ink-3 focus:border-transparent focus:outline-2 focus:outline-accent-ink focus:-outline-offset-1",
+            classNames?.searchInput,
+          )}
         />
       </label>
 
       {searching ? null : (
-        <div role="toolbar" aria-label="Categorías" className="flex flex-wrap gap-0.5">
+        <div
+          role="toolbar"
+          aria-label="Categorías"
+          className={cn("flex flex-wrap gap-0.5", classNames?.categories)}
+        >
           {categories.map((c) => (
             <button
               key={c.id}
@@ -98,7 +125,10 @@ export function EmojiPicker({
                 setCategoryId(c.id);
                 setActive(0);
               }}
-              className="pressable grid size-8 place-items-center rounded-button text-base hover:bg-surface-sunken aria-pressed:bg-accent-soft focus-visible:focus-ring"
+              className={cn(
+                "pressable grid size-8 place-items-center rounded-button text-base hover:bg-surface-sunken aria-pressed:bg-accent-soft focus-visible:focus-ring",
+                classNames?.category,
+              )}
             >
               <span aria-hidden="true">{c.icon}</span>
             </button>
@@ -106,7 +136,7 @@ export function EmojiPicker({
         </div>
       )}
 
-      <p id={`${baseId}-title`} className="text-ink-3 text-overline">
+      <p id={`${baseId}-title`} className={cn("text-ink-3 text-overline", classNames?.title)}>
         {searching ? `Resultados (${entries.length})` : category?.label}
       </p>
 
@@ -116,7 +146,10 @@ export function EmojiPicker({
         role="group"
         aria-labelledby={`${baseId}-title`}
         onKeyDown={onKeyDown}
-        className="grid max-h-48 gap-0.5 overflow-y-auto [grid-template-columns:repeat(auto-fill,minmax(2rem,1fr))]"
+        className={cn(
+          "grid max-h-48 gap-0.5 overflow-y-auto [grid-template-columns:repeat(auto-fill,minmax(2rem,1fr))]",
+          classNames?.grid,
+        )}
       >
         {entries.map((entry, index) => (
           <button
@@ -128,13 +161,20 @@ export function EmojiPicker({
             title={entry.name.split(" ").slice(0, 3).join(" ")}
             onFocus={() => setActive(index)}
             onClick={() => onSelect?.(entry.emoji)}
-            className="pressable grid size-8 place-items-center rounded-button text-lg hover:bg-surface-sunken focus-visible:focus-ring"
+            className={cn(
+              "pressable grid size-8 place-items-center rounded-button text-lg hover:bg-surface-sunken focus-visible:focus-ring",
+              classNames?.emoji,
+            )}
           >
             <span aria-hidden="true">{entry.emoji}</span>
           </button>
         ))}
         {entries.length === 0 ? (
-          <p className="col-span-full py-3 text-center text-ink-3 text-meta">Sin resultados</p>
+          <p
+            className={cn("col-span-full py-3 text-center text-ink-3 text-meta", classNames?.empty)}
+          >
+            Sin resultados
+          </p>
         ) : null}
       </div>
     </div>

package/src/forms/emoji-picker/index.ts

@@ -1,3 +1,3 @@
 export { EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry } from "./emoji-data.js";
-export { EmojiPicker, type EmojiPickerProps } from "./emoji-picker.js";
+export { EmojiPicker, type EmojiPickerPart, type EmojiPickerProps } from "./emoji-picker.js";
 export { gridMove, searchEmojis } from "./model.js";