@axzydev/axzy_ui_system 1.7.3 → 1.8.0

package/src/components/molecules/tabs/tabs.tsx

@@ -2,10 +2,12 @@ import React, { useState } from 'react';
 import { ITTabsProps } from './tabs.props';
 import { clsx } from 'clsx';
 import ITText from "@/components/atoms/text/text";
+import { useITAppearance } from "@/theme/theme-context";
 
 /**
  * Tabbed navigation component with "line" and "pill" visual variants.
  * Manages its own active state internally via a defaultActiveId.
+ * With `appearance="bento"` the "pill" variant becomes a rounded track with an ink active pill.
  *
  * @example
  * <ITTabs
@@ -25,6 +27,7 @@ const ITTabs: React.FC<ITTabsProps> = ({
   className = '',
   containerClassName = ''
 }) => {
+  const bento = useITAppearance() === "bento" && variant === 'pill';
   const [activeId, setActiveId] = useState(defaultActiveId || items[0]?.id);
 
   const handleTabClick = (id: string, disabled?: boolean) => {
@@ -40,9 +43,10 @@ const ITTabs: React.FC<ITTabsProps> = ({
       {/* HEADER */}
       <div className={clsx(
         "flex border-secondary-200 mb-4",
-        variant === 'line' ? "border-b" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
+        variant === 'line' ? "border-b" : bento ? "gap-2 p-1 rounded-full w-fit" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
         className
-      )}>
+      )}
+      style={bento ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", borderColor: "transparent" } : undefined}>
         {items.map((item) => {
           const isActive = item.id === activeId;
           
@@ -61,14 +65,24 @@ const ITTabs: React.FC<ITTabsProps> = ({
                     : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300",
                 ],
                 // PILL VARIANT
-                variant === 'pill' && [
-                  "rounded-md",
-                  isActive 
-                    ? "bg-white text-primary-600 shadow-sm" 
-                    : "text-secondary-500 hover:text-secondary-700",
-                ],
+                variant === 'pill' && (bento
+                  ? "rounded-full"
+                  : [
+                      "rounded-md",
+                      isActive
+                        ? "bg-white text-primary-600 shadow-sm"
+                        : "text-secondary-500 hover:text-secondary-700",
+                    ]),
                 item.disabled && "opacity-50 cursor-not-allowed"
               )}
+              style={
+                bento
+                  ? {
+                      backgroundColor: isActive ? "var(--it-bento-ink-bg, #0f172a)" : "transparent",
+                      color: isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)",
+                    }
+                  : undefined
+              }
             >
               {item.icon && <span className="w-4 h-4">{item.icon}</span>}
               <ITText as="span">{item.label}</ITText>

package/src/components/organisms/dropfile/dropfile.props.ts

@@ -28,8 +28,14 @@ export interface ITDropfileProps {
   onFileSelect: (file: File | null) => void;
   /** Called when the user cancels the current selection. */
   onCancel?: () => void;
-  /** Called when the user confirms and submits the file. */
-  onSubmit?: (file: File) => void;
+  /** Called when the user confirms and submits the file. With `autoUpload`, it runs right after selection and may return a promise that drives the status. */
+  onSubmit?: (file: File) => void | Promise<void>;
+  /**
+   * Sube en cuanto se elige el archivo, sin paso de confirmar. Usa `onSubmit` como la subida:
+   * el estado pasa a subiendo y luego a subido, o a error si la promesa falla.
+   * @default false
+   */
+  autoUpload?: boolean;
   /** List of accepted MIME types. */
   acceptedFileTypes?: FileTypeEnum[];
   /** Additional classes for the preview/content area. */

package/src/components/organisms/dropfile/dropfile.tsx

@@ -43,6 +43,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   onFileSelect,
   onCancel,
   onSubmit,
+  autoUpload = false,
   contentClassName,
   containerClassName,
   acceptedFileTypes = [FileTypeEnum.PDF, FileTypeEnum.XLS, FileTypeEnum.XLSX, FileTypeEnum.JPG, FileTypeEnum.PNG, FileTypeEnum.JPEG],
@@ -207,6 +208,20 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
     );
   };
 
+  /** Subida automática: corre `onSubmit` al elegir el archivo y sigue su estado. */
+  const runAutoUpload = async (file: File) => {
+    setIsConfirmed(true);
+    setUploadStatus(UploadStatus.UPLOADING);
+    try {
+      onFileSelect(file);
+      await onSubmit?.(file);
+      setUploadStatus(UploadStatus.UPLOADED);
+    } catch (error) {
+      setUploadStatus(UploadStatus.ERROR);
+      console.error("Error al subir archivo:", error);
+    }
+  };
+
   const onDrop = (acceptedFiles: File[]) => {
     const file = acceptedFiles[0];
     if (file) {
@@ -224,6 +239,8 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
           const previewUrl = URL.createObjectURL(file);
           setImagePreview(previewUrl);
         }
+
+        if (autoUpload) void runAutoUpload(file);
       } else {
         alert(t("dropfile.fileTypeNotAllowed"));
         setSelectedFile(null);

package/src/components/organisms/page-header/page-header.tsx

@@ -2,7 +2,7 @@ import { FaChevronLeft } from "react-icons/fa";
 import { ITPageHeaderProps } from "./page-header.props";
 import ITBreadcrumbs from "@/components/molecules/breadcrumbs/breadcrumbs";
 import ITText from "@/components/atoms/text/text";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 import { useITTranslation } from "@/i18n";
 
 /**
@@ -33,7 +33,10 @@ export default function ITPageHeader({
   const { t } = useITTranslation();
   const showTopRow = breadcrumbs?.length || backAction;
   // Flat appearance: compact title, no decorative icon tile.
-  const flat = useITFlatAppearance();
+  // Bento: no icon tile either, but a larger tight title and a borderless round back button.
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat";
 
   return (
     <div className={`${className} space-y-3`}>
@@ -44,7 +47,16 @@ export default function ITPageHeader({
             {backAction && (
               <button
                 onClick={backAction}
-                className="flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0"
+                className={
+                  bento
+                    ? "flex items-center justify-center w-10 h-10 rounded-full hover:opacity-80 transition-opacity duration-200 flex-shrink-0"
+                    : "flex items-center justify-center w-9 h-9 rounded-full border border-slate-200 dark:border-slate-700 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-800/60 transition-all duration-200 flex-shrink-0"
+                }
+                style={
+                  bento
+                    ? { backgroundColor: "var(--it-bento-control-bg, #f1f5f9)", color: "var(--it-bento-control-text, #475569)" }
+                    : undefined
+                }
                 aria-label={t("pageHeader.back")}
               >
                 <FaChevronLeft size={14} />
@@ -65,7 +77,7 @@ export default function ITPageHeader({
       {/* Fila principal: icono + título + descripción + (acciones si no hay top row) */}
       <div className="flex items-start justify-between gap-6">
         <div className="flex items-start gap-4 min-w-0">
-          {icon && !flat && (
+          {icon && !flat && !bento && (
             <div
               className="flex items-center justify-center w-12 h-12 rounded-full border border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-slate-600 dark:text-slate-300 flex-shrink-0 transition-all duration-200 hover:border-slate-300 dark:hover:border-slate-500 hover:shadow-sm"
               style={iconColor ? { color: iconColor } : undefined}
@@ -77,7 +89,9 @@ export default function ITPageHeader({
             <ITText
               as="h1"
               className={
-                flat
+                bento
+                  ? "text-3xl font-bold text-slate-900 dark:text-white tracking-tighter leading-tight"
+                  : flat
                   ? "text-[1.625rem] font-bold text-slate-900 dark:text-white tracking-tight leading-tight"
                   : "text-3xl font-bold text-slate-800 dark:text-white tracking-tight leading-tight"
               }
@@ -88,7 +102,9 @@ export default function ITPageHeader({
               <ITText
                 as="p"
                 className={
-                  flat
+                  bento
+                    ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed"
+                    : flat
                     ? "text-sm font-normal text-slate-500 dark:text-slate-400 mt-0.5 leading-relaxed"
                     : "text-sm font-light text-slate-500 dark:text-slate-400 mt-1 leading-relaxed"
                 }

package/src/components/organisms/sidebar/sidebar.tsx

@@ -10,7 +10,7 @@ import {
 } from "./sidebar.props";
 import ITBadget from "@/components/atoms/badget/badget";
 import ITText from "@/components/atoms/text/text";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 import { useITTranslation } from "@/i18n";
 
 /** Narrows a submenu entry to a titled group. */
@@ -95,7 +95,10 @@ export default function ITSidebar({
   expandOnHover = true,
 }: ITSidebarProps) {
   // Flat appearance: plain surface, no glow/accent bar, narrower panel.
-  const flat = useITFlatAppearance();
+  // Bento shares that structure; its tokens make the active item a neutral pill with bold ink text.
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   const { t } = useITTranslation();
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
   const [isHovering, setIsHovering] = useState(false);
@@ -202,7 +205,7 @@ export default function ITSidebar({
           color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
           backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
           fontSize: flat ? '0.84rem' : '0.78rem',
-          fontWeight: subitem.isActive ? 600 : 500,
+          fontWeight: subitem.isActive ? (bento ? 700 : 600) : 500,
           letterSpacing: '0.01em',
           marginLeft: subitemConnector === '|' ? '-1px' : '0',
         }}
@@ -365,7 +368,7 @@ export default function ITSidebar({
       style={{
         zIndex: 50,
         backgroundColor: "var(--it-sidebar-bg, rgba(255, 255, 255, 0.90))",
-        borderRight: "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
+        borderRight: bento ? "none" : "1px solid var(--it-sidebar-border, var(--color-secondary-200))",
         ...(flat ? {} : { WebkitBackdropFilter: 'blur(12px)', backdropFilter: 'blur(12px)' }),
       }}
     >
@@ -480,7 +483,7 @@ export default function ITSidebar({
                       style={{
                         color: active ? "var(--it-sidebar-active-color, #ffffff)" : "var(--it-sidebar-label-color, var(--color-secondary-300))",
                         fontSize: flat ? '0.875rem' : '0.8rem',
-                        fontWeight: active ? '600' : '500'
+                        fontWeight: active ? (bento ? '700' : '600') : '500'
                       }}
                     >
                       {item.label}

package/src/components/organisms/topbar/topbar.props.ts

@@ -7,6 +7,8 @@ export interface ITTopBarNavItem {
   label: string;
   /** Optional icon element rendered beside the label. */
   icon?: any;
+  /** Marks the item as the current one. Sets `aria-current="page"`; with `appearance="bento"` it renders as the ink pill (dark fill, white text), in the other appearances as a subtle highlight. @default false */
+  isActive?: boolean;
   /** Click handler for this navigation item (legacy, prefer onNavItemClick). */
   action: () => void;
 }

package/src/components/organisms/topbar/topbar.tsx

@@ -3,7 +3,7 @@ import useClickOutside from "@/hooks/useClickOutside";
 import { useRef, useState } from "react";
 import { ITTopBarProps } from "./topbar.props";
 import ITText from "@/components/atoms/text/text";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 import { useITTranslation } from "@/i18n";
 
 /**
@@ -73,7 +73,10 @@ export default function ITTopBar({
   showDesktopMenuButton = false,
 }: ITTopBarProps) {
   // Flat appearance: plain bar (no shadow/blur), initials avatar, name before it.
-  const flat = useITFlatAppearance();
+  // Bento: same plain structure, blended with the canvas, pill nav and round icon buttons.
+  const appearance = useITAppearance();
+  const bento = appearance === "bento";
+  const flat = appearance === "flat" || bento;
   const { t } = useITTranslation();
   const initials = (userMenu?.userName ?? "")
     .trim()
@@ -81,6 +84,8 @@ export default function ITTopBar({
     .slice(0, 2)
     .map((word) => word.charAt(0).toUpperCase())
     .join("");
+  const userRestBg = bento ? "var(--it-bento-control-bg, #f1f5f9)" : "transparent";
+  const userHoverBg = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)";
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   const userMenuRef = useRef<HTMLDivElement>(null);
 
@@ -90,8 +95,10 @@ export default function ITTopBar({
     <header 
       className={`sticky top-0 z-40 transition-all duration-300 ${flat ? "" : "backdrop-blur-md"}`}
       style={{
-        backgroundColor: "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
-        borderBottom: "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
+        backgroundColor: bento
+          ? "var(--it-layout-bg, #f4f4f6)"
+          : "var(--it-topbar-bg, rgba(255, 255, 255, 0.9))",
+        borderBottom: bento ? "none" : "1px solid var(--it-topbar-border, rgba(15, 23, 42, 0.06))",
         boxShadow: flat ? "none" : "var(--shadow-xs)",
       }}
     >
@@ -105,12 +112,13 @@ export default function ITTopBar({
             <button
               type="button"
               aria-label={t("common.menu")}
-              className={`${showDesktopMenuButton ? "" : "lg:hidden"} p-2.5 -ml-2.5 rounded-xl transition-colors duration-200`}
+              className={`${showDesktopMenuButton ? "" : "lg:hidden"} ${bento ? "w-10 h-10 flex items-center justify-center rounded-full" : "p-2.5 -ml-2.5 rounded-xl"} transition-colors duration-200`}
               style={{
-                 color: "var(--it-topbar-icon, #64748b)",
+                 color: bento ? "var(--it-bento-control-text, #475569)" : "var(--it-topbar-icon, #64748b)",
+                 backgroundColor: bento ? "var(--it-bento-control-bg, #f1f5f9)" : undefined,
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)"}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = "transparent"}
+              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)"}
+              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg, #f1f5f9)" : "transparent"}
               onClick={onToggleMobileMenu}
             >
               <FaBars className="w-[1.125rem] h-[1.125rem]" />
@@ -137,28 +145,42 @@ export default function ITTopBar({
 
           {/* Top Navigation Items (Desktop) */}
           {navItems && navItems.length > 0 && (
-            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" }}>
-              {navItems.map((item) => (
-                <button
-                  key={item.id}
-                  onClick={() => onNavItemClick?.(item.id)}
-                  className="px-4 py-2 rounded-lg font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]"
-                  style={{ color: "var(--it-topbar-text, #475569)" }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.color = "var(--it-topbar-text, #0f172a)";
-                    e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.color = "var(--it-topbar-text, #475569)";
-                    e.currentTarget.style.backgroundColor = "transparent";
-                  }}
-                >
-                  <div className="flex items-center gap-2">
-                    {item.icon && <span className="opacity-70">{item.icon}</span>}
-                    <ITText as="span">{item.label}</ITText>
-                  </div>
-                </button>
-              ))}
+            <nav
+              className={bento ? "hidden md:flex ml-4 gap-2" : "hidden md:flex ml-8 space-x-1 border-l pl-8"}
+              style={bento ? undefined : { borderColor: "var(--it-topbar-border, rgba(15, 23, 42, 0.06))" }}
+            >
+              {navItems.map((item) => {
+                // Resting look per appearance; the active item is the ink pill in bento.
+                const restBg = bento
+                  ? item.isActive ? "var(--it-bento-ink-bg, #0f172a)" : "var(--it-bento-control-bg, #f1f5f9)"
+                  : item.isActive ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent";
+                const restColor = bento
+                  ? item.isActive ? "var(--it-bento-ink-text, #ffffff)" : "var(--it-bento-control-text, #475569)"
+                  : "var(--it-topbar-text, #475569)";
+                return (
+                  <button
+                    key={item.id}
+                    onClick={() => onNavItemClick?.(item.id)}
+                    aria-current={item.isActive ? "page" : undefined}
+                    className={`px-4 py-2 ${bento ? "rounded-full" : "rounded-lg"} font-medium text-[0.9rem] transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)]`}
+                    style={{ color: restColor, backgroundColor: restBg }}
+                    onMouseEnter={(e) => {
+                      if (bento && item.isActive) return;
+                      e.currentTarget.style.color = bento ? "var(--it-bento-control-text, #0f172a)" : "var(--it-topbar-text, #0f172a)";
+                      e.currentTarget.style.backgroundColor = bento ? "var(--it-bento-control-bg-hover, #e2e8f0)" : "var(--it-topbar-user-hover, #f1f5f9)";
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.color = restColor;
+                      e.currentTarget.style.backgroundColor = restBg;
+                    }}
+                  >
+                    <div className="flex items-center gap-2">
+                      {item.icon && <span className="opacity-70">{item.icon}</span>}
+                      <ITText as="span">{item.label}</ITText>
+                    </div>
+                  </button>
+                );
+              })}
             </nav>
           )}
         </div>
@@ -184,15 +206,15 @@ export default function ITTopBar({
               <div className="relative">
                 <button
                   type="button"
-                  className={`flex items-center gap-3 rounded-full py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200 ${flat ? "flex-row-reverse pl-4 pr-2" : "pl-2 pr-4"}`}
+                  className={`flex items-center gap-3 rounded-full py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent ${bento ? "" : "hover:border-secondary-200"} ${flat ? "flex-row-reverse pl-4 pr-2" : "pl-2 pr-4"}`}
                   style={{
-                    backgroundColor: isUserMenuOpen ? "var(--it-topbar-user-hover, #f1f5f9)" : "transparent",
+                    backgroundColor: isUserMenuOpen ? userHoverBg : userRestBg,
                   }}
                   onMouseEnter={(e) => {
-                    if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "var(--it-topbar-user-hover, #f1f5f9)";
+                    if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = userHoverBg;
                   }}
                   onMouseLeave={(e) => {
-                    if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = "transparent";
+                    if (!isUserMenuOpen) e.currentTarget.style.backgroundColor = userRestBg;
                   }}
                   onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
                 >

package/src/components/templates/layout/layout.tsx

@@ -4,7 +4,7 @@ import ITTopBar from "@/components/organisms/topbar/topbar";
 import ITSidebar from "@/components/organisms/sidebar/sidebar";
 import { ITLayoutProps } from "./layout.props";
 import { theme } from "@/theme/theme";
-import { useITFlatAppearance } from "@/theme/theme-context";
+import { useITAppearance } from "@/theme/theme-context";
 
 /**
  * Main application shell with sidebar, topbar, and content area.
@@ -49,7 +49,8 @@ export default function ITLayout({
 }: ITLayoutProps) {
   const [internalCollapsed, setInternalCollapsed] = useState(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-  const flat = useITFlatAppearance();
+  // Bento shares the flat sidebar structure (narrow panel, no drop shadow).
+  const flat = useITAppearance() !== "soft";
 
   const isControlled = sidebar.isCollapsed !== undefined;
   const desktopCollapsed = isControlled ? sidebar.isCollapsed : internalCollapsed;

package/src/components/theme-provider/themeProvider.props.ts

@@ -58,6 +58,6 @@ export interface ITThemeProviderProps {
   radius?: number;
   /** Global shadow strength level. `0` ⇒ no shadows, `1` ⇒ subtle, `2` ⇒ default current look, `3` ⇒ pronounced. Shadows are injected as `--shadow-*`/`.shadow-*` overrides so cards, dropdowns and dialogs follow the level. @default 2 (keeps current default when omitted) */
   shadow?: number;
-  /** Visual language of the whole system. `"soft"` keeps the current look (floating cards, tinted shadows, glass sidebar/top bar). `"flat"` switches the app shell and surfaces to flat ones: hairline borders instead of shadows on `ITCard`, a plain `ITSidebar` (no glow, no accent bar, narrower), a plain `ITTopBar` (no shadow, initials avatar) and a compact `ITPageHeader` without the icon tile. It also sets `data-it-appearance` on `<html>` so app CSS can follow it. Combine it with `shadow` and `radius` to finish the look. @default "soft" */
+  /** Visual language of the whole system. `"soft"` keeps the current look (floating cards, tinted shadows, glass sidebar/top bar). `"flat"` switches the app shell and surfaces to flat ones: hairline borders instead of shadows on `ITCard`, a plain `ITSidebar` (no glow, no accent bar, narrower), a plain `ITTopBar` (no shadow, initials avatar) and a compact `ITPageHeader` without the icon tile. It also sets `data-it-appearance` on `<html>` so app CSS can follow it. `"bento"` gives a modern pastel dashboard: light-gray canvas, borderless white cards with a diffuse shadow and 24px radius, pill buttons and inputs, an ink-pill active item in `ITTopBar` and a neutral-pill one in `ITSidebar`, a large `ITPageHeader` title and pastel tiles through `ITCard` `tone`; an explicit `radius`/`shadow` prop wins over the bento defaults. Combine it with `shadow` and `radius` to finish the look. @default "soft" */
   appearance?: ITThemeAppearance;
 }

package/src/components/theme-provider/themeProvider.tsx

@@ -83,7 +83,7 @@ const PRESET_I18N_KEY: Record<string, string> = {
 // Contexto y hooks (useITTheme / useITThemeSafe) viven en @/theme/theme-context.
 // Re-exportados desde aquí para mantener compatibilidad de la API pública.
 // eslint-disable-next-line react-refresh/only-export-components
-export { useITTheme, useITThemeSafe, useITFlatAppearance } from "@/theme/theme-context";
+export { useITTheme, useITThemeSafe, useITFlatAppearance, useITAppearance } from "@/theme/theme-context";
 
 const getNestedValue = (obj: any, path: string) => {
   return path.split(".").reduce((acc, part) => acc && acc[part], obj);
@@ -343,6 +343,59 @@ export default function ITThemeProvider({
     };
   }, [radius, shadow]);
 
+  // Tokens del lenguaje "bento": solo se inyectan con appearance="bento".
+  // Los componentes leen estos vars (con fallback al aspecto base), así que un
+  // `radius`/`shadow` explícito gana: en ese caso no se definen los vars de
+  // radio/sombra y los componentes caen a la escala global.
+  useLayoutEffect(() => {
+    const STYLE_ID = "it-theme-bento-tokens";
+    let tag = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+    if (appearance !== "bento") {
+      tag?.remove();
+      return;
+    }
+    if (!tag) {
+      tag = document.createElement("style");
+      tag.id = STYLE_ID;
+      document.head.appendChild(tag);
+    }
+    const hasRadius = typeof radius === "number" && isFinite(radius);
+    const hasShadow = shadowLevel(shadow) !== null;
+    const shapeLight = hasRadius
+      ? ""
+      : "--it-bento-card-radius:24px;--it-bento-pill-radius:9999px;--it-bento-field-radius:1rem;--it-input-radius:var(--it-bento-pill-radius);";
+    const shadowLight = hasShadow
+      ? ""
+      : "--it-bento-card-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -16px rgba(16,24,40,.10);--it-bento-card-shadow-hover:0 1px 2px rgba(16,24,40,.06),0 18px 40px -16px rgba(16,24,40,.18);";
+    const shadowDark = hasShadow
+      ? ""
+      : "--it-bento-card-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -16px rgba(0,0,0,.55);--it-bento-card-shadow-hover:0 1px 2px rgba(0,0,0,.5),0 18px 40px -16px rgba(0,0,0,.7);";
+    // El item activo del sidebar sigue los tokens bento (píldora neutra, texto tinta).
+    const navTokens =
+      "--it-sidebar-active-bg:var(--it-bento-nav-active-bg);--it-sidebar-active-color:var(--it-bento-nav-active-text);--it-sidebar-active-icon:var(--it-bento-nav-active-text);";
+    const light =
+      "--it-layout-bg:#f4f4f6;--it-card-bg:#ffffff;--it-bento-card-padding:1.5rem;" +
+      "--it-input-bg:#f1f5f9;--it-input-border:transparent;" +
+      "--it-input-focus-ring:0 0 0 2px color-mix(in srgb,var(--color-primary) 50%,transparent);" +
+      "--it-bento-control-bg:#f1f5f9;--it-bento-control-bg-hover:#e2e8f0;--it-bento-control-text:#475569;" +
+      "--it-bento-ink-bg:#0f172a;--it-bento-ink-text:#ffffff;" +
+      "--it-bento-nav-active-bg:#f1f5f9;--it-bento-nav-active-text:#0f172a;" + navTokens;
+    const dark =
+      "--it-layout-bg:#020617;--it-card-bg:#0f172a;" +
+      "--it-input-bg:#1e293b;--it-input-border:transparent;" +
+      "--it-bento-control-bg:#1e293b;--it-bento-control-bg-hover:#334155;--it-bento-control-text:#cbd5e1;" +
+      "--it-bento-ink-bg:#ffffff;--it-bento-ink-text:#0f172a;" +
+      "--it-bento-nav-active-bg:#1e293b;--it-bento-nav-active-text:#ffffff;" + navTokens;
+    const A = '[data-it-appearance="bento"]';
+    tag.textContent =
+      `:root${A}{${light}${shapeLight}${shadowLight}}` +
+      `:root${A}.dark,:root${A} .dark,:root${A} [data-theme="dark"]{${dark}${shadowDark}}` +
+      `:root${A} [data-theme="light"]{${light}${shadowLight}}`;
+    return () => {
+      tag?.remove();
+    };
+  }, [appearance, radius, shadow]);
+
   // Inyectar variables CSS en el :root al cambiar la paleta o tema resuelto
   useEffect(() => {
     const injectStyles = (obj: any, prefix = "") => {

package/src/i18n/locales/en.ts

@@ -212,6 +212,13 @@ const en: ITMessages = {
   "jsonEditor.kindNumber": "number",
   "jsonEditor.kindBoolean": "boolean",
   "jsonEditor.kindNull": "null",
+
+  // ---------------------------------------------------------------- jsonRenderer
+  "jsonRenderer.form.required": "Required field.",
+  "jsonRenderer.form.email": "Enter a valid email address.",
+  "jsonRenderer.form.minLength": "Enter at least {min} characters.",
+  "jsonRenderer.form.maxLength": "Enter at most {max} characters.",
+  "jsonRenderer.form.submit": "Submit",
 };
 
 export default en;

package/src/i18n/locales/es.ts

@@ -214,6 +214,13 @@ const es: ITMessages = {
   "jsonEditor.kindNumber": "número",
   "jsonEditor.kindBoolean": "booleano",
   "jsonEditor.kindNull": "nulo",
+
+  // ---------------------------------------------------------------- jsonRenderer
+  "jsonRenderer.form.required": "Campo obligatorio.",
+  "jsonRenderer.form.email": "Escribe un correo válido.",
+  "jsonRenderer.form.minLength": "Escribe al menos {min} caracteres.",
+  "jsonRenderer.form.maxLength": "Escribe como máximo {max} caracteres.",
+  "jsonRenderer.form.submit": "Enviar",
 };
 
 export default es;

package/src/index.ts

@@ -84,6 +84,7 @@ import {
   GLOBALLY_FORBIDDEN_PROPS,
   resolveNode,
   parsePartialSchema,
+  useSchemaStream,
   isNodePending,
   JsonEngineError,
   issue,
@@ -102,8 +103,30 @@ import {
   DEFAULT_MIGRATIONS,
   buildVocabularyContract,
   formatVocabularyForPrompt,
+  createBindingResolver,
+  validateRoutes,
+  flattenRoutes,
+  joinRoutePath,
+  matchRoute,
+  routeHref,
+  buildNavigationTree,
+  navContainsRoute,
 } from "./json-renderer";
 import type {
+  DataHandler,
+  DataLoader,
+  BindingScope,
+  BindingResolver,
+  SlotComponent,
+  SlotRegistry,
+  EffectRegistry,
+  ToastVariant,
+  RoutesSchema,
+  RouteSchema,
+  RouteNavSchema,
+  FlatRoute,
+  RouteMatch,
+  NavNode,
   ITJsonRenderEngineProps,
   ScreenSchema,
   NodeSchema,
@@ -122,6 +145,7 @@ import type {
   UnresolvedNode,
   PartialParseResult,
   StreamState,
+  StreamSource,
   JsonEngineIssue,
   JsonEngineCode,
   JsonEngineSeverity,
@@ -147,7 +171,7 @@ import type { ITBadgetProps } from "./components/atoms/badget/badget.props";
 import type { ITBreadcrumbsProps, ITBreadcrumbItem } from "./components/molecules/breadcrumbs/breadcrumbs.props";
 import type { ITButtonProps } from "./components/atoms/button/button.props";
 import type { ITCalendarProps } from "./components/molecules/calendar/calendar.props";
-import type { ITCardProps } from "./components/molecules/card/card.props";
+import type { ITCardProps, ITCardTone } from "./components/molecules/card/card.props";
 import type { ITCheckboxProps } from "./components/atoms/checkbox/checkbox.props";
 import type { ITChipProps } from "./components/atoms/chip/chip.props";
 import type { ITChipInputProps } from "./components/molecules/chip-input/chip-input.props";
@@ -208,7 +232,7 @@ import ITLoader from "./components/atoms/loader/loader";
 import type { LoaderProps as ITLoaderProps } from "./components/atoms/loader/loader.props";
 import ITStepper from "./components/molecules/stepper/stepper";
 import type { ITStepperProps } from "./components/molecules/stepper/stepper.props";
-import ITThemeProvider, { useITTheme, useITThemeSafe, useITFlatAppearance } from "./components/theme-provider/themeProvider";
+import ITThemeProvider, { useITTheme, useITThemeSafe, useITFlatAppearance, useITAppearance } from "./components/theme-provider/themeProvider";
 import type { ITThemeProviderProps, ITThemePalette, ITThemeAppearance } from "./components/theme-provider/themeProvider.props";
 import ITTimePicker from "./components/molecules/time-picker/timePicker";
 import type { ITTimePickerProps } from "./components/molecules/time-picker/timePicker.props";
@@ -238,7 +262,7 @@ export {
   ITSearchTable,
   ITSegmentedControl, ITSidebar, ITSkeleton, ITSlideToggle, ITSlider, ITStack, ITStatCard, ITStepper, ITLineBarChart,
   ITTable, ITTabs, ITText, ITTextarea, ITTripleFilter, ITThemeProvider,
-  useITTheme, useITThemeSafe, useITFlatAppearance, ITTimePicker, ITToast, ITWysiwyg,
+  useITTheme, useITThemeSafe, useITFlatAppearance, useITAppearance, ITTimePicker, ITToast, ITWysiwyg,
   UploadStatus, FileTypeEnum,
   getContrastTextColor, isLightColor, resolveCssColor,
   ITI18nProvider, useITTranslation, esMessages, enMessages,
@@ -247,11 +271,13 @@ export {
   ITSchemaRenderer, NodeBoundary, renderNode, auditTree, countPendingNodes,
   axzyCatalog, axzyCatalogTypes, AXZY_CATALOG_ENTRIES, AXZY_EXCLUDED_TYPES,
   createCatalog, getCatalogEntry, isExcludedType, getExclusionReason, GLOBALLY_FORBIDDEN_PROPS,
-  resolveNode, parsePartialSchema, isNodePending,
+  resolveNode, parsePartialSchema, isNodePending, useSchemaStream,
   JsonEngineError, issue, formatPath, parsePath, readPath, hasPath, pushPath, propPath,
   DEFAULT_LIMITS, resolveLimits, createLimitTracker,
   validateSchema, CURRENT_SCHEMA_VERSION, migrateSchema, DEFAULT_MIGRATIONS,
   buildVocabularyContract, formatVocabularyForPrompt,
+  createBindingResolver,
+  validateRoutes, flattenRoutes, joinRoutePath, matchRoute, routeHref, buildNavigationTree, navContainsRoute,
 };
 
   export type {
@@ -262,7 +288,7 @@ export {
     ITAlertProps, ITAvatarProps, ITBadgetProps,
     ITBreadcrumbItem, ITBreadcrumbsProps, ITButtonProps,
     ITCalendarProps,
-    ITCardProps, ITCheckboxProps, ITChipProps, ITChipInputProps, ITConfirmDialogProps,
+    ITCardProps, ITCardTone, ITCheckboxProps, ITChipProps, ITChipInputProps, ITConfirmDialogProps,
     ITDropdownMenuItem, ITDropdownMenuProps, ITFieldProps, ITMaskedInputProps, ITMultiSelectOption, ITMultiSelectProps,
     ITDataTableFetchParams, ITDataTableProps, ITDataTableResponse, ITDatePickerProps,
     ITDialogProps, ITDividerProps, ITDrawerProps,
@@ -286,9 +312,11 @@ export {
     ITWysiwygProps,
     ITJsonRendererProps, JsonComponentNode, JsonComponentType,
     ITJSONEditorProps,
-    ITJsonRenderEngineProps, ScreenSchema, NodeSchema, SchemaValue, SchemaReference, WhenSchema,
+    ITJsonRenderEngineProps, DataHandler, DataLoader, BindingScope, BindingResolver, SlotComponent, SlotRegistry, EffectRegistry, ToastVariant,
+    RoutesSchema, RouteSchema, RouteNavSchema, FlatRoute, RouteMatch, NavNode,
+    ScreenSchema, NodeSchema, SchemaValue, SchemaReference, WhenSchema,
     ActionSchema, EffectSchema, DataSourceSchema, NodeStatus, Catalog, CatalogEntry, PropSpec, PropKind,
-    ResolvedNode, UnresolvedNode, PartialParseResult, StreamState, JsonEngineIssue, JsonEngineCode,
+    ResolvedNode, UnresolvedNode, PartialParseResult, StreamState, StreamSource, JsonEngineIssue, JsonEngineCode,
     JsonEngineSeverity, SchemaPath, PathSegment, EngineLimits, LimitTracker,
     ValidationReport, ValidationVerdict, ValidateOptions, SchemaMigration, MigrationRegistry, MigrationResult,
     VocabularyContract, ComponentContract, PropContract,