1.2.2

dist/sigpro-ui.css

@@ -3228,6 +3228,62 @@
   .my-16 {
     margin-block: calc(var(--spacing) * 16);
   }
+  .breadcrumbs {
+    @layer daisyui.l1.l2.l3 {
+      max-width: 100%;
+      overflow-x: auto;
+      padding-block: calc(0.25rem * 2);
+      > menu, > ul, > ol {
+        display: flex;
+        min-height: min-content;
+        align-items: center;
+        white-space: nowrap;
+        > li {
+          display: flex;
+          align-items: center;
+          > * {
+            display: flex;
+            cursor: pointer;
+            align-items: center;
+            gap: calc(0.25rem * 2);
+            &:hover {
+              @media (hover: hover) {
+                text-decoration-line: underline;
+              }
+            }
+            &:focus {
+              --tw-outline-style: none;
+              outline-style: none;
+              @media (forced-colors: active) {
+                outline: 2px solid transparent;
+                outline-offset: 2px;
+              }
+            }
+            &:focus-visible {
+              outline: 2px solid currentColor;
+              outline-offset: 2px;
+            }
+          }
+          & + *:before {
+            content: "";
+            margin-inline-start: calc(0.25rem * 2);
+            margin-inline-end: calc(0.25rem * 3);
+            display: block;
+            height: calc(0.25rem * 1.5);
+            width: calc(0.25rem * 1.5);
+            opacity: 40%;
+            rotate: 45deg;
+            border-top: 1px solid;
+            border-right: 1px solid;
+            background-color: #0000;
+          }
+          [dir="rtl"] & + *:before {
+            rotate: -135deg;
+          }
+        }
+      }
+    }
+  }
   .label {
     @layer daisyui.l1.l2.l3 {
       display: inline-flex;
@@ -3977,6 +4033,17 @@
       font-weight: 600;
     }
   }
+  .avatar-group {
+    @layer daisyui.l1.l2.l3 {
+      display: flex;
+      overflow: hidden;
+      .avatar {
+        overflow: hidden;
+        border-radius: calc(infinity * 1px);
+        border: 4px solid var(--color-base-100);
+      }
+    }
+  }
   .mask {
     @layer daisyui.l1.l2.l3 {
       display: inline-block;
@@ -4283,6 +4350,13 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .-space-x-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * -6) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * -6) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -5190,72 +5264,6 @@
   color: oklch(28% 0.01 260);
   font-size: 1.1rem;
 }
-.tab-content-inner {
-  animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  transform-origin: top;
-}
-.input-container {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.input-container .input {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-.input-content {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 50;
-  background: oklch(var(--b1));
-  border: 1px solid oklch(var(--bc) / 0.2);
-  border-radius: var(--rounded-box, 1rem);
-  margin-top: 0.25rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
-.input-content .menu {
-  width: 100%;
-}
-@keyframes tabFadeIn {
-  from {
-    opacity: 0;
-    transform: scaleY(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-}
-@layer utilities {
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-      transform: translateY(-8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  @keyframes fade-out {
-    from {
-      opacity: 1;
-      transform: translateY(0);
-    }
-    to {
-      opacity: 0;
-      transform: translateY(-8px);
-    }
-  }
-  .animate-fade-in {
-    animation: fade-in 0.15s ease-out forwards;
-  }
-}
 @layer base {
   :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
     color-scheme: light;
@@ -5638,6 +5646,11 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -5834,6 +5847,7 @@
       --tw-scale-y: 1;
       --tw-scale-z: 1;
       --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;

docs/demo_forms.md

@@ -133,7 +133,7 @@ const rangeValue = $(50);
 
 mount(
   div({ class: 'flex flex-col gap-2' }, [
-    Range({ min: 0, max: 100, value: rangeValue, oninput: (e) => rangeValue(+e.target.value) }),
+    Range({ min: 0, max: 100, value: rangeValue }),
     span({}, () => `Value: ${rangeValue()}`)
   ]),
   '#demo-range'

index.js

@@ -9,4 +9,16 @@ export const Components = {
 
 export const Utils = {
   Locale, tt
-};
+};
+
+
+if (typeof window !== 'undefined') {
+  Object.entries({ ...Components, ...Utils }).forEach(([name, value]) => {
+    Object.defineProperty(window, name, {
+      value,
+      writable: false,
+      configurable: true,
+      enumerable: true
+    });
+  });
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sigpro-ui",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "type": "module",
   "license": "MIT",
   "main": "./dist/sigpro-ui.js",
@@ -40,15 +40,14 @@
     "del": "bun pm cache rm && rm -f bun.lockb $$ rm -f bun.lock",
     "clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css",
     "build:css": "tailwindcss -i ./sigpro-css.css -o ./dist/sigpro-ui.css --content './src/**/*.js' && du -h ./dist/sigpro-ui.css",
-    "build:cssmin": "tailwindcss -i ./sigpro-css.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.min.css",
+    "build:cssmin": "tailwindcss -i ./sigpro-css.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.css",
-    "build:js": "bun run build:js:iife && bun run build:js:iife:min && bun run build:js:esm && bun run build:js:esm:min",
+    "build:js": "bun run build:js:iife && bun run build:js:esm",
-    "build:js:iife": "bun build ./sigpro-ui-full.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI",
+    "build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI",
-    "build:js:iife:min": "bun build ./sigpro-ui-full.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
+    "build:js:iife:min": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
-    "build:js:esm": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.js --format=esm --external=sigpro",
+    "build:js:esm": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.js --format=esm",
-    "build:js:esm:min": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.min.js --format=esm --external=sigpro --minify",
+    "build:js:esm:min": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.min.js --format=esm --minify",
     "copy:docs": "cp dist/sigpro-ui.min.css dist/sigpro-ui.min.js docs/",
-    "build": "bun run clean && bun run build:css && bun run build:cssmin && bun run build:js",
+    "build": "bun run clean && bun run build:css && bun run build:cssmin && bun run build:js:iife && bun run build:js:iife:min && bun run build:js:esm && bun run build:js:esm:min && bun run copy:docs",
-    "postbuild": "bun run copy:docs",
     "prepublishOnly": "bun run build",
     "docs": "bun x serve docs"
   },

sigpro-css.css

@@ -94,97 +94,25 @@
   font-size: 1.1rem;
 }
 
-.tab-content-inner {
-  animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  transform-origin: top;
-}
 
-/* 1. El contenedor manda */
-.input-container {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 2. El label de DaisyUI debe ocupar todo el ancho */
-.input-container .input {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-/* 3. El panel flotante */
-.input-content {
-  position: absolute;
-  top: 100%;    /* Justo debajo */
-  left: 0;
-  right: 0;     /* Esto lo obliga a estirarse de izquierda a derecha */
-  z-index: 50;
-  background: oklch(var(--b1)); /* Fondo del tema */
-  border: 1px solid oklch(var(--bc) / 0.2);
-  border-radius: var(--rounded-box, 1rem);
-  margin-top: 0.25rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  overflow: hidden; /* Para que el 'menu' no se salga de los bordes redondeados */
-}
-
-/* 4. La lista interna */
-.input-content .menu {
-  width: 100%;
-}
-
-@keyframes tabFadeIn {
-  from {
-    opacity: 0;
-    transform: scaleY(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-}
-
-@layer utilities {
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-      transform: translateY(-8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes fade-out {
-    from {
-      opacity: 1;
-      transform: translateY(0);
-    }
-    to {
-      opacity: 0;
-      transform: translateY(-8px);
-    }
-  }
-
-  .animate-fade-in {
-    animation: fade-in 0.15s ease-out forwards;
-  }
-}
-
-
-
-/* sigpro-ui daisyUI classes - extracted from components */
 
 /* join join-vertical lg:join-horizontal divider divider-horizontal validator validator-hint glass */
 
+/* Icons */
+/* .icon-[lucide--calendar] .icon-[lucide--chevrons-left] .icon-[lucide--chevron-left] .icon-[lucide--chevron-right] .icon-[lucide--chevrons-right] .icon-[lucide--info] .icon-[lucide--check-circle] .icon-[lucide--alert-triangle] .icon-[lucide--alert-circle] .icon-[lucide--heart] */
+/* .icon-[lucide--upload], .icon-[lucide--x], .icon-[lucide--text], .icon-[lucide--lock], .icon-[lucide--calendar], .icon-[lucide--hash], .icon-[lucide--mail], .icon-[lucide--search], .icon-[lucide--phone], .icon-[lucide--link], .icon-[lucide--eye-off], .icon-[lucide--eye] */
+
 /* Accordion */
 /* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
 
 /* Alert */
 /* .alert, .alert-info, .alert-success, .alert-warning, .alert-error, .alert-soft, .alert-outline, .alert-dash, */
-/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */
+
+/* Avatar */
+/* .avatar .avatar-group .avatar-online .avatar-offline .avatar-placeholder */
+
+/* Breadcrumbs */
+/* .breadcrumbs */
 
 /* Autocomplete */
 /* .menu, .menu-dropdown, .menu-dropdown-show, */
@@ -203,9 +131,6 @@
 
 /* Colorpicker */
 
-/* Datepicker */
-/* .icon-[lucide--calendar], .icon-[lucide--chevrons-left], .icon-[lucide--chevron-left], .icon-[lucide--chevron-right], .icon-[lucide--chevrons-right], */
-
 /* Drawer */
 /* .drawer, .drawer-end .drawer-toggle, .drawer-content, .drawer-side, .drawer-overlay, */
 
@@ -218,15 +143,11 @@
 /* Fieldset */
 /* .fieldset, .fieldset-legend, */
 
-/* Fileinput */
-/* .icon-[lucide--upload], .icon-[lucide--x], */
-
 /* Indicator */
 /* .indicator, .indicator-item, */
 
 /* Input */
 /* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
-/* .icon-[lucide--text], .icon-[lucide--lock], .icon-[lucide--calendar], .icon-[lucide--hash], .icon-[lucide--mail], .icon-[lucide--search], .icon-[lucide--phone], .icon-[lucide--link], .icon-[lucide--eye-off], .icon-[lucide--eye], */
 
 /* List */
 /* .list, .list-row, .list-bullet, .list-image, .list-none, */
@@ -269,127 +190,12 @@
 
 /* Tabs */
 /* .tabs, .tabs-box, .tabs-lift, .tabs-border, .tab, .tab-content, */
-/* .icon-[lucide--x], */
 
 /* Timeline */
 /* .timeline, .timeline-vertical, .timeline-horizontal, .timeline-compact, .timeline-start, .timeline-middle, .timeline-end, .timeline-box, */
-/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */
 
 /* Toast */
 /* .icon-[lucide--x], */
 
 /* Tooltip */
 /* .tooltip, .tooltip-top, .tooltip-bottom, .tooltip-left, .tooltip-right, .tooltip-primary, .tooltip-secondary, .tooltip-accent, .tooltip-info, .tooltip-success, .tooltip-warning, .tooltip-error, .tooltip-open, */
-
-/* ===== Tailwind ===== */
-
-/* Background */
-/* .bg-base-100, .bg-base-200, .bg-base-content, .bg-primary, .bg-primary/10, .bg-secondary, */
-
-/* Border */
-/* .border, .border-2, .border-base-300, .border-base-content/20, .border-dashed, .border-primary, */
-
-/* Bottom */
-/* .bottom-6, */
-
-/* Cursor */
-/* .cursor-pointer, */
-
-/* Duration */
-/* .duration-200, .duration-300, */
-
-/* Flex */
-/* .flex, .flex-1, .flex-col, .flex-col-reverse, */
-
-/* Font */
-/* .font-black, .font-bold, .font-medium, */
-
-/* Grid */
-/* .grid, .grid-cols-7, .grid-cols-8, */
-
-/* Height */
-/* .h-12, .min-h-full, */
-
-/* Inset */
-/* .inset-0, */
-
-/* Items */
-/* .items-center, .items-end, */
-
-/* Justify */
-/* .justify-between, .justify-start, */
-
-/* Left */
-/* .left-0, */
-
-/* Loading */
-/* .loading, .loading-spinner, */
-
-/* Max Height */
-/* .max-h-60, */
-
-/* Opacity */
-/* .opacity-0, .opacity-40, .opacity-50, .opacity-60, .opacity-70, */
-
-/* Overflow */
-/* .overflow-x-auto, .overflow-y-auto, */
-
-/* Padding */
-/* .p-2, .p-3, .p-4, .p-6, */
-
-/* Pointer events */
-/* .pointer-events-auto, .pointer-events-none, */
-
-/* Position */
-/* .absolute, .fixed, .relative, */
-
-/* Right */
-/* .right-0, */
-
-/* Rounded */
-/* .rounded-box, .rounded-lg, */
-
-/* Shadow */
-/* .shadow-2xl, .shadow-lg, .shadow-sm, .shadow-xl, */
-
-/* Shrink */
-/* .shrink-0, */
-
-/* Space */
-/* .space-y-1, */
-
-/* Spacing */
-/* .gap-1, .gap-2, .gap-3, */
-
-/* Text */
-/* .text-center, .text-error, .text-left, .text-lg, .text-primary-content, .text-right, .text-secondary, .text-sm, .text-xl, .text-xs, */
-
-/* Text custom */
-/* .text-[10px], */
-
-/* Top */
-/* .top-0, */
-
-/* Transform */
-/* .translate-x-10, */
-
-/* Transition */
-/* .transition-all, */
-
-/* Truncate */
-/* .truncate, */
-
-/* Width */
-/* .w-full, .w-52, .w-64, .w-80, */
-
-/* Z-index */
-/* .z-100, .z-50, .z-90, .z-[100], .z-[9999], */
-
-/* Tailwind variants */
-/* .hover:bg-base-200, */
-
-/* Misc */
-/* .active, .hr, .label, .label-text, */
-
-/* Icons */
-/* .icon-[lucide--heart] */

sigpro-editor.js

@@ -92,7 +92,7 @@ export const Editor = (p) => {
 
   const toolbar = h("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
     h("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
-      // GRUPO 1: ESTILOS
+
       h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('bold') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("bold") }, h("span", { class: "icon-[lucide--bold]" })),
       h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('italic') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("italic") }, h("span", { class: "icon-[lucide--italic]" })),
       h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('underline') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("underline") }, h("span", { class: "icon-[lucide--underline]" })),
@@ -106,14 +106,12 @@ export const Editor = (p) => {
         onclick: () => exec("justifyLeft")
       }, h("span", { class: "icon-[lucide--align-left]" })),
 
-      // --- Botón Alineación Centro ---
       h("button", {
         type: "button",
         class: "btn btn-ghost btn-xs",
         onclick: () => exec("justifyCenter")
       }, h("span", { class: "icon-[lucide--align-center]" })),
 
-      // --- Botón Alineación Derecha ---
       h("button", {
         type: "button",
         class: "btn btn-ghost btn-xs",
@@ -122,7 +120,6 @@ export const Editor = (p) => {
 
       h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
 
-      // GRUPO 2: LISTAS Y PÁRRAFO
       h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h("span", { class: "icon-[lucide--list]" })),
       h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h("span", { class: "icon-[lucide--list-ordered]" })),
       h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent") }, h("span", { class: "icon-[lucide--indent-decrease]" })),
@@ -131,11 +128,9 @@ export const Editor = (p) => {
 
       h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
 
-      // GRUPO 3: INSERTAR
       h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const url = window.prompt('URL:'); if (url) exec("createLink", url) } }, h("span", { class: "icon-[lucide--link]" })),
       h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const input = document.createElement('input'); input.type = 'file'; input.onchange = (e) => handleUpload(e.target.files[0]); input.click(); } }, h("span", { class: "icon-[lucide--paperclip]" })),
 
-      // EMOJIS
       h("div", { class: "relative" }, [
         h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => { e.stopPropagation(); saveSelection(); showEmojis(!showEmojis()); } }, h("span", { class: "icon-[lucide--smile]" })),
         h("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map(emo => h("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => { e.stopPropagation(); exec("insertText", emo); showEmojis(false); } }, emo)))
@@ -143,7 +138,6 @@ export const Editor = (p) => {
 
       h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
 
-      // GRUPO 4: UTILIDADES
       h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h("span", { class: "icon-[lucide--undo-2]" })),
       h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h("span", { class: "icon-[lucide--redo-2]" })),
     ]),

sigpro-ui-full.js

@@ -1,36 +0,0 @@
-import { $, $$, watch, h, each, when, mount, batch } from 'sigpro';
-import 'sigpro/xss.js';
-import 'sigpro/tags.js';
-import * as All from './sigpro-ui.js';
-import * as Editor from './sigpro-editor.js';
-import { Locale, tt } from './sigpro-locale.js';
-
-const Components = { ...All, ...Editor };
-const Utils = { Locale, tt };
-
-if (typeof window !== 'undefined') {
-  const fns = { $, $$, watch, h, each, when, mount, batch };
-  Object.entries(fns).forEach(([name, fn]) => {
-    Object.defineProperty(window, name, {
-      value: fn,
-      writable: true,
-      configurable: true,
-      enumerable: true
-    });
-  });
-
-  Object.entries({ ...Components, ...Utils }).forEach(([name, value]) => {
-    Object.defineProperty(window, name, {
-      value,
-      writable: false,
-      configurable: true,
-      enumerable: true
-    });
-  });
-
-  console.log("SigProUI DX installed");
-}
-
-export { Components, Utils };
-export * from './sigpro-ui.js';
-export * from './sigpro-editor.js';

sigpro-ui.js

@@ -13,6 +13,8 @@ export const Accordion = (p) => {
   });
 }
 export const Alert = (p, c) => h("div", { ...p, class: cls("alert", p.class) }, c);
+export const Avatar = (p, c) => h("div", { ...p, class: cls("avatar", p.class) }, c);
+export const AvatarGroup = (p, c) => h("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c);
 export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...props }) => {
   const query = $(get(value) || '')
   const filtered = $(() => filterBy(items, query()))
@@ -58,6 +60,7 @@ export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...p
   ])
 }
 export const Badge = (p, c) => h("span", { ...p, class: cls("badge", p.class) }, c);
+export const Breadcrumbs = (p, c) => h("div", { ...p, class: cls("breadcrumbs", p.class) }, c);
 export const Button = (p, c) => h("button", { ...p, class: cls("btn", p.class) }, c);
 export const Calendar = (p) => {
   const internalDate = $(new Date())