@axzydev/axzy_ui_system 1.8.1 → 1.8.2

package/src/index.css

@@ -583,4 +583,265 @@
     background: rgb(37 99 235 / 0.2);
     color: var(--color-primary-300);
   }
-}
+}
+/* ── Bento tiles (organismo `ITBento*`) ─────────────────────────────────────
+   Superficies del tablero: mosaico de 12 columnas con filas de 84 px, tarjetas
+   de radio 20 px que se colapsan a 3/6 columnas en pantallas chicas. Los tonos
+   salen de la paleta de marca, no de colores sueltos por pantalla. */
+@keyframes it-bento-draw {
+  to {
+    stroke-dashoffset: var(--it-bento-off, 0);
+  }
+}
+
+@keyframes it-bento-wave {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes it-bento-rise {
+  from {
+    transform: scaleY(0.25);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes it-bento-tick {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes it-bento-pulse {
+  to {
+    box-shadow: 0 0 0 7px transparent;
+  }
+}
+
+@keyframes it-bento-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+.it-bento-grid {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-auto-rows: 84px;
+  gap: 10px;
+}
+
+.it-bento-tile {
+  --it-bento-bg: var(--it-card-bg, #ffffff);
+  --it-bento-ink: var(--color-text-default, #0f172a);
+  --it-bento-muted: var(--color-text-muted, #64748b);
+  --it-bento-line: rgb(15 23 42 / 0.08);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: 20px;
+  padding: 14px 16px;
+  background: var(--it-bento-bg);
+  color: var(--it-bento-ink);
+  box-shadow: inset 0 0 0 1px var(--it-bento-line);
+}
+
+.it-bento-tile--sea {
+  --it-bento-bg: #0c3b52;
+  --it-bento-ink: #eaf6f8;
+  --it-bento-muted: rgb(234 246 248 / 0.72);
+  --it-bento-line: transparent;
+  box-shadow: none;
+}
+
+.it-bento-tile--lavender {
+  --it-bento-bg: #ece7fa;
+  --it-bento-ink: #1c1340;
+  --it-bento-muted: rgb(28 19 64 / 0.66);
+  --it-bento-line: transparent;
+  box-shadow: none;
+}
+
+.it-bento-tile--mint {
+  --it-bento-bg: #e2f3ec;
+  --it-bento-ink: #0f2e25;
+  --it-bento-muted: rgb(15 46 37 / 0.62);
+  --it-bento-line: transparent;
+  box-shadow: none;
+}
+
+.it-bento-tile--sun {
+  --it-bento-bg: #fcf2d8;
+  --it-bento-ink: #3a2a05;
+  --it-bento-muted: rgb(58 42 5 / 0.66);
+  --it-bento-line: transparent;
+  box-shadow: none;
+}
+
+.dark .it-bento-tile--lavender {
+  --it-bento-bg: #241f3d;
+  --it-bento-ink: #f2eefc;
+  --it-bento-muted: rgb(242 238 252 / 0.7);
+}
+
+.dark .it-bento-tile--mint {
+  --it-bento-bg: #12302b;
+  --it-bento-ink: #e8f6f1;
+  --it-bento-muted: rgb(232 246 241 / 0.7);
+}
+
+.dark .it-bento-tile--sun {
+  --it-bento-bg: #352d17;
+  --it-bento-ink: #fbf0d4;
+  --it-bento-muted: rgb(251 240 212 / 0.7);
+}
+
+.dark .it-bento-tile {
+  --it-bento-line: rgb(229 240 243 / 0.09);
+}
+
+.it-bento-tile__label {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--it-bento-muted);
+  position: relative;
+  z-index: 1;
+}
+
+.it-bento-tile__value {
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.it-bento-tile--sea .it-bento-tile__value {
+  font-size: 44px;
+}
+
+.it-bento-tile__foot {
+  margin-top: auto;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px;
+  position: relative;
+  z-index: 1;
+}
+
+.it-bento-tile__caption {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--it-bento-muted);
+}
+
+.it-bento-wave {
+  position: absolute;
+  inset: auto 0 0 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.it-bento-wave svg {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 200%;
+  height: 100%;
+}
+
+.it-bento-wave__a {
+  animation: it-bento-wave 9s linear infinite;
+}
+
+.it-bento-wave__b {
+  animation: it-bento-wave 6s linear infinite reverse;
+}
+
+.it-bento-seg {
+  display: grid;
+  gap: 2px;
+  height: 100%;
+  max-height: 42px;
+  align-items: end;
+}
+
+.it-bento-seg i {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+  transform: scaleY(0.4);
+  transform-origin: bottom;
+}
+
+.it-bento-seg i.is-on {
+  transform: scaleY(1);
+  animation: it-bento-rise 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both;
+  animation-delay: calc(var(--it-bento-i, 0) * 26ms + 0.2s);
+}
+
+.it-bento-bars {
+  display: grid;
+  gap: 11px;
+}
+
+.it-bento-bar {
+  height: 5px;
+  border-radius: 9px;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  overflow: hidden;
+}
+
+.it-bento-bar > i {
+  display: block;
+  height: 100%;
+  border-radius: 9px;
+  width: var(--it-bento-w, 0%);
+  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
+}
+
+@media (max-width: 1000px) {
+  .it-bento-grid {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-auto-rows: auto;
+  }
+
+  .it-bento-tile {
+    grid-column: span 3 !important;
+    grid-row: auto !important;
+    min-height: 130px;
+  }
+
+  .it-bento-tile--wide {
+    grid-column: span 6 !important;
+  }
+}
+
+@media (max-width: 560px) {
+  .it-bento-tile {
+    grid-column: span 6 !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .it-bento-wave__a,
+  .it-bento-wave__b,
+  .it-bento-seg i,
+  .it-bento-bar > i {
+    animation: none !important;
+    transition: none !important;
+  }
+}

package/src/index.ts

@@ -10,6 +10,19 @@ import useJsonRender from "./hooks/useJsonRender";
 
 // COMPONENTES
 import ITAccordion from "./components/molecules/accordion/accordion";
+import {
+  ITBentoGrid,
+  ITBentoTile,
+  ITBentoGauge,
+  ITBentoWaves,
+  ITBentoSpark,
+  ITBentoSegments,
+  ITBentoWeekBars,
+  ITBentoDonut,
+  ITBentoFeed,
+  ITBentoLive,
+  useITBentoCountUp,
+} from "./components/organisms/bento/bento";
 import ITAlert from "./components/molecules/alert/alert";
 import ITAvatar from "./components/atoms/avatar/avatar";
 import ITBadget from "./components/atoms/badget/badget";
@@ -251,6 +264,8 @@ export {
   createValidationSchema,
   // Components
   ITAccordion,
+  ITBentoGrid, ITBentoTile, ITBentoGauge, ITBentoWaves, ITBentoSpark, ITBentoSegments,
+  ITBentoWeekBars, ITBentoDonut, ITBentoFeed, ITBentoLive, useITBentoCountUp,
   ITAlert, ITAvatar, ITBadget, ITBreadcrumbs, ITButton,
   ITCalendar,
   ITCard, ITCheckbox, ITChip, ITChipInput, ITConfirmDialog, ITDataTable, ITDatePicker,