@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/shell/topbar/topbar.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Menu, Search } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Menu, Search } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 function isApplePlatform() {
   if (typeof navigator === "undefined") return false;
@@ -18,7 +18,8 @@ function Topbar({
   searchPlaceholder,
   actions,
   end,
-  className
+  className,
+  classNames
 }) {
   const [shortcut, setShortcut] = useState("Ctrl+K");
   useEffect(() => {
@@ -40,51 +41,96 @@ function Topbar({
     {
       className: cn(
         "@container/topbar sticky top-0 z-30 h-top-height border-b-divider bg-bg",
+        classNames?.root,
         className
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-w-0 items-center gap-2.5 px-4 @min-[640px]/topbar:px-7", children: [
-        onOpenMenu ? /* @__PURE__ */ jsx(
-          "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",
-            children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })
-          }
-        ) : null,
-        /* @__PURE__ */ jsxs(
-          "nav",
-          {
-            "aria-label": breadcrumbsLabel,
-            className: "flex min-w-0 shrink items-center gap-2 whitespace-nowrap text-ink-3 text-meta",
-            children: [
-              previous.map((crumb) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 @max-[560px]/topbar:hidden", children: [
-                /* @__PURE__ */ jsx("span", { children: crumb }),
-                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-line-control", children: "/" })
-              ] }, crumb)),
-              /* @__PURE__ */ jsx("strong", { "aria-current": "page", className: "min-w-0 truncate font-semibold text-ink", children: current })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            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",
-            children: [
-              /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0", "aria-hidden": "true" }),
-              /* @__PURE__ */ jsx("span", { className: "truncate @max-[700px]/topbar:hidden", children: searchPlaceholder }),
-              /* @__PURE__ */ jsx("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", children: shortcut })
-            ]
-          }
-        ),
-        actions,
-        end
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex h-full min-w-0 items-center gap-2.5 px-4 @min-[640px]/topbar:px-7",
+            classNames?.inner
+          ),
+          children: [
+            onOpenMenu ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: menuButtonRef,
+                type: "button",
+                "aria-label": menuLabel,
+                onClick: onOpenMenu,
+                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
+                ),
+                children: /* @__PURE__ */ jsx(Menu, { className: "size-5", "aria-hidden": "true" })
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs(
+              "nav",
+              {
+                "aria-label": breadcrumbsLabel,
+                className: cn(
+                  "flex min-w-0 shrink items-center gap-2 whitespace-nowrap text-ink-3 text-meta",
+                  classNames?.breadcrumbs
+                ),
+                children: [
+                  previous.map((crumb) => /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "flex items-center gap-2 @max-[560px]/topbar:hidden",
+                        classNames?.crumb
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { children: crumb }),
+                        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("text-line-control", classNames?.separator), children: "/" })
+                      ]
+                    },
+                    crumb
+                  )),
+                  /* @__PURE__ */ jsx(
+                    "strong",
+                    {
+                      "aria-current": "page",
+                      className: cn("min-w-0 truncate font-semibold text-ink", classNames?.current),
+                      children: current
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-label": searchLabel,
+                onClick: onSearch,
+                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
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Search, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { className: cn("truncate @max-[700px]/topbar:hidden", classNames?.searchText), children: searchPlaceholder }),
+                  /* @__PURE__ */ jsx(
+                    "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
+                      ),
+                      children: shortcut
+                    }
+                  )
+                ]
+              }
+            ),
+            actions,
+            end
+          ]
+        }
+      )
     }
   );
 }

package/dist/showcase/controls-bento.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-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";
@@ -17,6 +16,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,
@@ -222,7 +222,7 @@ function ControlsBento() {
       /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "danger", children: "Anular cita" }) }),
       /* @__PURE__ */ jsxs(DialogContent, { closeLabel: "Cerrar", container, children: [
         /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Anular cita" }) }),
-        /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx("p", { className: "m-0 text-[13px] text-ink-2", children: "Vas a anular la cita de Luis Ram\xEDrez (Corte + barba, s\xE1bado 11:30 con Diego Quispe). El horario quedar\xE1 libre." }) }),
+        /* @__PURE__ */ jsx(DialogBody, { children: /* @__PURE__ */ jsx("p", { className: "m-0 text-fs-130 text-ink-2", children: "Vas a anular la cita de Luis Ram\xEDrez (Corte + barba, s\xE1bado 11:30 con Diego Quispe). El horario quedar\xE1 libre." }) }),
         /* @__PURE__ */ jsxs(DialogFooter, { children: [
           /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", children: "Volver" }) }),
           /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "danger", className: "ml-auto", children: "Anular cita" }) })

package/dist/showcase/kit-tiles.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-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";
@@ -14,6 +13,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";
 const servicios = [

package/dist/showcase/operations-bento.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-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 } from "../containers/data-grid/index.js";
 import { Kanban } from "../containers/kanban/index.js";
 import { Timeline } 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 = [
   {

package/dist/showcase/shell.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Moon, Sun } from "lucide-react";
 import { 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";
 const ACCENTS = [

package/dist/states/empty-state/empty-state.js

@@ -10,8 +10,8 @@ function EmptyState({ icon, title, description, action, className }) {
       ),
       children: [
         icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-ink-3", children: icon }) : null,
-        /* @__PURE__ */ jsx("p", { className: "max-w-full font-semibold text-[14px] text-ink [overflow-wrap:anywhere]", children: title }),
-        description ? /* @__PURE__ */ jsx("p", { className: "max-w-[42ch] text-[13px] text-ink-3 [overflow-wrap:anywhere]", children: description }) : null,
+        /* @__PURE__ */ jsx("p", { className: "max-w-full font-semibold text-fs-140 text-ink [overflow-wrap:anywhere]", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "max-w-[42ch] text-fs-130 text-ink-3 [overflow-wrap:anywhere]", children: description }) : null,
         action ? /* @__PURE__ */ jsx("div", { className: "mt-2 flex max-w-full flex-wrap justify-center gap-2", children: action }) : null
       ]
     }

package/dist/states/error-state/error-state.js

@@ -25,9 +25,9 @@ function ErrorState({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("p", { className: "max-w-full font-semibold text-[14px] text-ink [overflow-wrap:anywhere]", children: headline }),
-        detail ? /* @__PURE__ */ jsx("p", { className: "max-w-[42ch] text-[13px] text-ink-3 [overflow-wrap:anywhere]", children: detail }) : null,
-        correlationId ? /* @__PURE__ */ jsxs("p", { className: "max-w-full text-[11.5px] text-ink-3 tabular-nums [overflow-wrap:anywhere]", children: [
+        /* @__PURE__ */ jsx("p", { className: "max-w-full font-semibold text-fs-140 text-ink [overflow-wrap:anywhere]", children: headline }),
+        detail ? /* @__PURE__ */ jsx("p", { className: "max-w-[42ch] text-fs-130 text-ink-3 [overflow-wrap:anywhere]", children: detail }) : null,
+        correlationId ? /* @__PURE__ */ jsxs("p", { className: "max-w-full text-fs-115 text-ink-3 tabular-nums [overflow-wrap:anywhere]", children: [
           correlationLabel ?? strings.correlationPrefix,
           " ",
           correlationId
@@ -37,7 +37,7 @@ function ErrorState({
           {
             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",
             children: retryLabel ?? strings.retry
           }
         ) : null

package/dist/states/forbidden-state/forbidden-state.js

@@ -10,8 +10,8 @@ function ForbiddenState({ title, reason, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("p", { className: "max-w-full font-semibold text-[14px] text-ink [overflow-wrap:anywhere]", children: title }),
-        reason ? /* @__PURE__ */ jsx("p", { className: "max-w-[42ch] text-[13px] text-ink-3 [overflow-wrap:anywhere]", children: reason }) : null
+        /* @__PURE__ */ jsx("p", { className: "max-w-full font-semibold text-fs-140 text-ink [overflow-wrap:anywhere]", children: title }),
+        reason ? /* @__PURE__ */ jsx("p", { className: "max-w-[42ch] text-fs-130 text-ink-3 [overflow-wrap:anywhere]", children: reason }) : null
       ]
     }
   );

package/dist/states/offline-banner/offline-banner.js

@@ -11,7 +11,7 @@ function OfflineBanner({
     {
       tone: "warning",
       className,
-      action: queuedChanges > 0 ? /* @__PURE__ */ jsxs("span", { className: "font-semibold text-[12px] tabular-nums", children: [
+      action: queuedChanges > 0 ? /* @__PURE__ */ jsxs("span", { className: "font-semibold text-fs-120 tabular-nums", children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: queuedChanges }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: queuedLabel ?? String(queuedChanges) })
       ] }) : void 0,

package/dist/utils/class-groups.d.ts

@@ -0,0 +1,20 @@
+import { type Validator } from "./class-validators.js";
+/** A class group value: a literal, a validator, a theme scale reference, or a nested `{ part: values }` branch. */
+export type Def = string | Validator | ThemeRef | {
+    [part: string]: Def[];
+};
+/** `[groupId, prefix, values]`: `prefix-value` joins to `groupId`; an empty prefix means a bare class. */
+export type GroupEntry = [id: string, prefix: string, values: Def[]];
+/** Theme namespaces consumers can extend with their own tokens. */
+export type ThemeKey = "text" | "spacing" | "radius" | "shadow" | "color";
+/** Placeholder for a theme scale; resolved per merger so each instance sees its own tokens. */
+export interface ThemeRef {
+    $theme: ThemeKey;
+}
+export { RADII, SHADOWS, SPACINGS, TEXT_SIZES } from "./class-tokens.generated.js";
+/** Registration order matters: validators on the same prefix are tried in this order. */
+export declare const GROUPS: GroupEntry[];
+/** A class in the key group also clears every listed group that came earlier. */
+export declare const CONFLICTS: Record<string, string[]>;
+/** Variants whose relative order changes the generated CSS, so they are never sorted. */
+export declare const ORDER_SENSITIVE: Set<string>;