@jcsoftdev/ui 0.1.6 → 0.2.0

package/src/shell/sidebar/sidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { type ReactNode, useEffect, useRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 import { useAppShell, useCompactContainer } from "../app-shell/app-shell.js";
 
@@ -33,6 +34,17 @@ export interface SidebarGroup {
   items: SidebarItem[];
 }
 
+export type SidebarPart =
+  | "root"
+  | "group"
+  | "groupLabel"
+  | "item"
+  | "link"
+  | "label"
+  | "badge"
+  | "footer"
+  | "scrim";
+
 export interface SidebarProps {
   groups: SidebarGroup[];
   /** Accessible name of the sidebar landmark. */
@@ -47,6 +59,8 @@ export interface SidebarProps {
   open?: boolean;
   onClose?: () => void;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<SidebarPart>;
 }
 
 const defaultRenderLink: SidebarRenderLink = ({ children, ...props }) => (
@@ -68,6 +82,7 @@ export function Sidebar({
   open = false,
   onClose,
   className,
+  classNames,
 }: SidebarProps) {
   const shell = useAppShell();
   const asideRef = useRef<HTMLElement>(null);
@@ -111,36 +126,47 @@ export function Sidebar({
                 closedOnMobile ? "-translate-x-full" : "translate-x-0",
               ),
           openOnMobile && "shadow-overlay",
+          classNames?.root,
           className,
         )}
       >
         {header}
         {groups.map((group) => (
-          <nav key={group.id} aria-label={group.label} className="flex flex-col gap-px">
-            <div className="px-2.5 pb-1.5 text-overline text-ink-3">{group.label}</div>
+          <nav
+            key={group.id}
+            aria-label={group.label}
+            className={cn("flex flex-col gap-px", classNames?.group)}
+          >
+            <div className={cn("px-2.5 pb-1.5 text-overline text-ink-3", classNames?.groupLabel)}>
+              {group.label}
+            </div>
             {group.items.map((item) => {
               const badgeTone =
                 item.badgeTone === "danger"
                   ? "bg-danger-soft text-danger"
                   : "bg-surface-2 text-ink-2";
               return (
-                <div key={item.id}>
+                <div key={item.id} className={classNames?.item}>
                   {renderLink({
                     href: item.href,
                     "aria-current": item.active ? "page" : undefined,
                     className: cn(
                       "flex items-center gap-2.5 rounded-control px-2.5 py-2 text-control text-ink-2 hover:bg-surface-2 hover:text-ink [&_svg]:size-4.25 [&_svg]:shrink-0",
                       item.active && "bg-accent-soft font-bold text-accent-ink",
+                      classNames?.link,
                     ),
                     children: (
                       <>
                         {item.icon}
-                        <span className="min-w-0 truncate">{item.label}</span>
+                        <span className={cn("min-w-0 truncate", classNames?.label)}>
+                          {item.label}
+                        </span>
                         {item.badge !== undefined ? (
                           <span
                             className={cn(
                               "ml-auto shrink-0 rounded-chip px-1.5 py-0.75 text-count",
                               badgeTone,
+                              classNames?.badge,
                             )}
                           >
                             {item.badge}
@@ -157,14 +183,14 @@ export function Sidebar({
             })}
           </nav>
         ))}
-        {footer ? <div className="mt-auto">{footer}</div> : null}
+        {footer ? <div className={cn("mt-auto", classNames?.footer)}>{footer}</div> : null}
       </aside>
       {openOnMobile ? (
         <div
           data-sidebar-scrim
           aria-hidden="true"
           onClick={onClose}
-          className="fixed inset-0 z-44 bg-scrim"
+          className={cn("fixed inset-0 z-44 bg-scrim", classNames?.scrim)}
         />
       ) : null}
     </>

package/src/shell/topbar/index.ts

@@ -1 +1 @@
-export { Topbar, type TopbarProps } from "./topbar.js";
+export { Topbar, type TopbarPart, type TopbarProps } from "./topbar.js";

package/src/shell/topbar/topbar.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { Menu, Search } from "lucide-react";
 import { type ReactNode, type Ref, useEffect, useState } from "react";
+import { Menu, Search } from "../../icons/index.js";
+import type { ClassNames } from "../../utils/class-names.js";
 import { cn } from "../../utils/cn.js";
 
 function isApplePlatform(): boolean {
@@ -9,6 +10,18 @@ function isApplePlatform(): boolean {
   return /Mac|iPhone|iPod|iPad/.test(navigator.platform || navigator.userAgent || "");
 }
 
+export type TopbarPart =
+  | "root"
+  | "inner"
+  | "menuButton"
+  | "breadcrumbs"
+  | "crumb"
+  | "separator"
+  | "current"
+  | "search"
+  | "searchText"
+  | "shortcut";
+
 export interface TopbarProps {
   /** Breadcrumb trail in order; the last entry is the current view. */
   breadcrumbs: string[];
@@ -28,6 +41,8 @@ export interface TopbarProps {
   /** Slot at the far end (e.g. the account menu). */
   end?: ReactNode;
   className?: string;
+  /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+  classNames?: ClassNames<TopbarPart>;
 }
 
 export function Topbar({
@@ -42,6 +57,7 @@ export function Topbar({
   actions,
   end,
   className,
+  classNames,
 }: TopbarProps) {
   const [shortcut, setShortcut] = useState("Ctrl+K");
 
@@ -66,17 +82,26 @@ export function Topbar({
     <header
       className={cn(
         "@container/topbar sticky top-0 z-30 h-top-height border-b-divider bg-bg",
+        classNames?.root,
         className,
       )}
     >
-      <div className="flex h-full min-w-0 items-center gap-2.5 px-4 @min-[640px]/topbar:px-7">
+      <div
+        className={cn(
+          "flex h-full min-w-0 items-center gap-2.5 px-4 @min-[640px]/topbar:px-7",
+          classNames?.inner,
+        )}
+      >
         {onOpenMenu ? (
           <button
             ref={menuButtonRef}
             type="button"
             aria-label={menuLabel}
             onClick={onOpenMenu}
-            className="hidden size-8.5 shrink-0 items-center justify-center rounded-control text-ink-2 hover:bg-surface-2 hover:text-ink @max-[900px]/app:inline-flex"
+            className={cn(
+              "hidden size-8.5 shrink-0 items-center justify-center rounded-control text-ink-2 hover:bg-surface-2 hover:text-ink @max-[900px]/app:inline-flex",
+              classNames?.menuButton,
+            )}
           >
             <Menu className="size-5" aria-hidden="true" />
           </button>
@@ -84,17 +109,29 @@ export function Topbar({
 
         <nav
           aria-label={breadcrumbsLabel}
-          className="flex min-w-0 shrink items-center gap-2 whitespace-nowrap text-ink-3 text-meta"
+          className={cn(
+            "flex min-w-0 shrink items-center gap-2 whitespace-nowrap text-ink-3 text-meta",
+            classNames?.breadcrumbs,
+          )}
         >
           {previous.map((crumb) => (
-            <span key={crumb} className="flex items-center gap-2 @max-[560px]/topbar:hidden">
+            <span
+              key={crumb}
+              className={cn(
+                "flex items-center gap-2 @max-[560px]/topbar:hidden",
+                classNames?.crumb,
+              )}
+            >
               <span>{crumb}</span>
-              <span aria-hidden="true" className="text-line-control">
+              <span aria-hidden="true" className={cn("text-line-control", classNames?.separator)}>
                 /
               </span>
             </span>
           ))}
-          <strong aria-current="page" className="min-w-0 truncate font-semibold text-ink">
+          <strong
+            aria-current="page"
+            className={cn("min-w-0 truncate font-semibold text-ink", classNames?.current)}
+          >
             {current}
           </strong>
         </nav>
@@ -103,11 +140,21 @@ export function Topbar({
           type="button"
           aria-label={searchLabel}
           onClick={onSearch}
-          className="ml-auto flex h-8.5 w-[min(320px,38cqw)] shrink-0 items-center gap-2 rounded-input border-control bg-surface-control pr-2 pl-2.5 text-ink-3 text-meta @max-[700px]/topbar:w-8.5 @max-[700px]/topbar:justify-center @max-[700px]/topbar:px-0"
+          className={cn(
+            "ml-auto flex h-8.5 w-[min(320px,38cqw)] shrink-0 items-center gap-2 rounded-input border-control bg-surface-control pr-2 pl-2.5 text-ink-3 text-meta @max-[700px]/topbar:w-8.5 @max-[700px]/topbar:justify-center @max-[700px]/topbar:px-0",
+            classNames?.search,
+          )}
         >
           <Search className="size-4 shrink-0" aria-hidden="true" />
-          <span className="truncate @max-[700px]/topbar:hidden">{searchPlaceholder}</span>
-          <span className="ml-auto rounded-xs border-divider bg-surface-2 px-1.25 py-0.5 font-mono text-count text-ink-2 @max-[700px]/topbar:hidden">
+          <span className={cn("truncate @max-[700px]/topbar:hidden", classNames?.searchText)}>
+            {searchPlaceholder}
+          </span>
+          <span
+            className={cn(
+              "ml-auto rounded-xs border-divider bg-surface-2 px-1.25 py-0.5 font-mono text-count text-ink-2 @max-[700px]/topbar:hidden",
+              classNames?.shortcut,
+            )}
+          >
             {shortcut}
           </span>
         </button>

package/src/showcase/controls-bento.tsx

@@ -1,4 +1,3 @@
-import { Plus, Scissors, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { Avatar } from "../atoms/avatar/index.js";
 import { Button } from "../atoms/button/index.js";
@@ -16,6 +15,7 @@ import { AccentPicker } from "../forms/accent-picker/index.js";
 import { Input } from "../forms/input/index.js";
 import { Select } from "../forms/select/index.js";
 import { Textarea } from "../forms/textarea/index.js";
+import { Plus, Scissors, Trash2 } from "../icons/index.js";
 import { Segmented, SegmentedItem } from "../navigation/segmented/index.js";
 import {
   Dialog,
@@ -256,7 +256,7 @@ export function ControlsBento() {
                 <DialogTitle>Anular cita</DialogTitle>
               </DialogHeader>
               <DialogBody>
-                <p className="m-0 text-[13px] text-ink-2">
+                <p className="m-0 text-fs-130 text-ink-2">
                   Vas a anular la cita de Luis Ramírez (Corte + barba, sábado 11:30 con Diego
                   Quispe). El horario quedará libre.
                 </p>

package/src/showcase/kit-tiles.tsx

@@ -1,4 +1,3 @@
-import { Banknote, CreditCard, Scissors, Smartphone, Smile, Sparkles } from "lucide-react";
 import { useState } from "react";
 import { ChatMessage } from "../ai/chat-message/index.js";
 import { Conversation } from "../ai/conversation/index.js";
@@ -13,6 +12,7 @@ import { NumberStepper } from "../forms/number-stepper/index.js";
 import { RadioButtonGroup } from "../forms/radio-button-group/index.js";
 import { Rating } from "../forms/rating/index.js";
 import { Slider } from "../forms/slider/index.js";
+import { Banknote, CreditCard, Scissors, Smartphone, Smile, Sparkles } from "../icons/index.js";
 import { RichTextEditor } from "../rich-text/index.js";
 import { Tile, useOverlayContainer } from "./bento.js";
 

package/src/showcase/operations-bento.tsx

@@ -1,4 +1,3 @@
-import { CalendarCheck, Package, Star, Wallet, XCircle } from "lucide-react";
 import { useState } from "react";
 import { Avatar } from "../atoms/avatar/index.js";
 import { AvatarGroup } from "../atoms/avatar-group/index.js";
@@ -13,6 +12,7 @@ import { DataGrid, type DataGridColumn } from "../containers/data-grid/index.js"
 import { Kanban, type KanbanColumnData } from "../containers/kanban/index.js";
 import { Timeline, type TimelineFeedItem } from "../containers/timeline/index.js";
 import { BARBEROS, CLIENTES, SERVICIOS } from "../dashboards/data.js";
+import { CalendarCheck, Package, Star, Wallet, XCircle } from "../icons/index.js";
 import { BentoGrid, Tile } from "./bento.js";
 
 const events: CalendarEvent[] = [

package/src/showcase/shell.tsx

@@ -1,8 +1,8 @@
-import { Moon, Sun } from "lucide-react";
 import { type ReactNode, useEffect, useState } from "react";
 import { Switch } from "../atoms/switch/index.js";
 import { AccentPicker } from "../forms/accent-picker/index.js";
 import { Select } from "../forms/select/index.js";
+import { Moon, Sun } from "../icons/index.js";
 import { Segmented, SegmentedItem } from "../navigation/segmented/index.js";
 import { OverlayContainer } from "./bento.js";
 

package/src/states/empty-state/empty-state.tsx

@@ -24,11 +24,11 @@ export function EmptyState({ icon, title, description, action, className }: Empt
           {icon}
         </span>
       ) : null}
-      <p className="max-w-full font-semibold text-[14px] text-ink [overflow-wrap:anywhere]">
+      <p className="max-w-full font-semibold text-fs-140 text-ink [overflow-wrap:anywhere]">
         {title}
       </p>
       {description ? (
-        <p className="max-w-[42ch] text-[13px] text-ink-3 [overflow-wrap:anywhere]">
+        <p className="max-w-[42ch] text-fs-130 text-ink-3 [overflow-wrap:anywhere]">
           {description}
         </p>
       ) : null}

package/src/states/error-state/error-state.tsx

@@ -42,14 +42,14 @@ export function ErrorState({
         className,
       )}
     >
-      <p className="max-w-full font-semibold text-[14px] text-ink [overflow-wrap:anywhere]">
+      <p className="max-w-full font-semibold text-fs-140 text-ink [overflow-wrap:anywhere]">
         {headline}
       </p>
       {detail ? (
-        <p className="max-w-[42ch] text-[13px] text-ink-3 [overflow-wrap:anywhere]">{detail}</p>
+        <p className="max-w-[42ch] text-fs-130 text-ink-3 [overflow-wrap:anywhere]">{detail}</p>
       ) : null}
       {correlationId ? (
-        <p className="max-w-full text-[11.5px] text-ink-3 tabular-nums [overflow-wrap:anywhere]">
+        <p className="max-w-full text-fs-115 text-ink-3 tabular-nums [overflow-wrap:anywhere]">
           {correlationLabel ?? strings.correlationPrefix} {correlationId}
         </p>
       ) : null}
@@ -57,7 +57,7 @@ export function ErrorState({
         <button
           type="button"
           onClick={onRetry}
-          className="mt-2 inline-flex h-control-sm cursor-pointer items-center rounded-input border-control bg-surface-control px-3 font-semibold text-[13px] text-ink hover:bg-surface-2"
+          className="mt-2 inline-flex h-control-sm cursor-pointer items-center rounded-input border-control bg-surface-control px-3 font-semibold text-fs-130 text-ink hover:bg-surface-2"
         >
           {retryLabel ?? strings.retry}
         </button>

package/src/states/forbidden-state/forbidden-state.tsx

@@ -17,11 +17,11 @@ export function ForbiddenState({ title, reason, className }: ForbiddenStateProps
         className,
       )}
     >
-      <p className="max-w-full font-semibold text-[14px] text-ink [overflow-wrap:anywhere]">
+      <p className="max-w-full font-semibold text-fs-140 text-ink [overflow-wrap:anywhere]">
         {title}
       </p>
       {reason ? (
-        <p className="max-w-[42ch] text-[13px] text-ink-3 [overflow-wrap:anywhere]">{reason}</p>
+        <p className="max-w-[42ch] text-fs-130 text-ink-3 [overflow-wrap:anywhere]">{reason}</p>
       ) : null}
     </div>
   );

package/src/states/offline-banner/offline-banner.tsx

@@ -22,7 +22,7 @@ export function OfflineBanner({
       className={className}
       action={
         queuedChanges > 0 ? (
-          <span className="font-semibold text-[12px] tabular-nums">
+          <span className="font-semibold text-fs-120 tabular-nums">
             <span aria-hidden="true">{queuedChanges}</span>
             <span className="sr-only">{queuedLabel ?? String(queuedChanges)}</span>
           </span>