@jcsoftdev/ui 0.1.4 → 0.1.6

package/src/states/skeleton/skeleton.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useUiStrings } from "../../i18n/index.js";
 import { cn } from "../../utils/cn.js";
 
 export type SkeletonVariant = "lines" | "table" | "card";
@@ -19,14 +22,15 @@ export function Skeleton({
   variant = "lines",
   lines = 3,
   rows = 4,
-  label = "Loading",
+  label,
   className,
 }: SkeletonProps) {
+  const strings = useUiStrings();
   return (
     <div
       role="status"
       aria-busy="true"
-      aria-label={label}
+      aria-label={label ?? strings.loading}
       className={cn("animate-pulse", className)}
     >
       {variant === "lines" ? (

package/styles/Theme.kt

@@ -36,6 +36,8 @@ class ThemeColors(
     val dangerSoft: Color,
     val warning: Color,
     val warningSoft: Color,
+    val info: Color,
+    val infoSoft: Color,
     val success: Color,
     val successSoft: Color,
     val hatch: Color,
@@ -85,6 +87,8 @@ object UiColors {
         dangerSoft = Color(0xFFFFEBE8),
         warning = Color(0xFF865900),
         warningSoft = Color(0xFFFEEFCF),
+        info = Color(0xFF0B5CAD),
+        infoSoft = Color(0xFFE8F2FC),
         success = Color(0xFF0B7643),
         successSoft = Color(0xFFDFF8E6),
         hatch = Color(0xFFE6E6EC),
@@ -132,6 +136,8 @@ object UiColors {
         dangerSoft = Color(0xFF300F0B),
         warning = Color(0xFFEBC166),
         warningSoft = Color(0xFF241900),
+        info = Color(0xFF8FC3F7),
+        infoSoft = Color(0xFF0A1A2B),
         success = Color(0xFF80DBA2),
         successSoft = Color(0xFF062111),
         hatch = Color(0xFF1B1B1F),
@@ -211,6 +217,7 @@ object UiSizes {
     val topHeight = 58.dp
     val controlHeight = 36.dp
     val controlHeightSm = 30.dp
+    val controlHeightLg = 52.dp
     val inputHeight = 38.dp
     val agendaHour = 48.dp
     val agendaCol = 148.dp

package/styles/theme.css

@@ -68,6 +68,8 @@
   --color-danger-soft: var(--danger-soft);
   --color-warning: var(--warning);
   --color-warning-soft: var(--warning-soft);
+  --color-info: var(--info);
+  --color-info-soft: var(--info-soft);
   --color-success: var(--success);
   --color-success-soft: var(--success-soft);
   --color-hatch: var(--hatch);
@@ -106,6 +108,7 @@
   --spacing-top-height: var(--top-height);
   --spacing-control-height: var(--control-height);
   --spacing-control-height-sm: var(--control-height-sm);
+  --spacing-control-height-lg: var(--control-height-lg);
   --spacing-input-height: var(--input-height);
   --spacing-agenda-hour: var(--agenda-hour);
   --spacing-agenda-col: var(--agenda-col);
@@ -205,6 +208,7 @@
   --ease-style: var(--motion-ease);
   --spacing-control: var(--control-height);
   --spacing-control-sm: var(--control-height-sm);
+  --spacing-control-lg: var(--control-height-lg);
   --spacing-input: var(--input-height);
   --spacing-control-x: var(--pad-control-x);
   --spacing-card: var(--pad-card);

package/styles/tokens.css

@@ -69,6 +69,8 @@
   --danger-soft: #ffebe8;
   --warning: #865900;
   --warning-soft: #feefcf;
+  --info: #0b5cad;
+  --info-soft: #e8f2fc;
   --success: #0b7643;
   --success-soft: #dff8e6;
   --hatch: #e6e6ec;
@@ -117,6 +119,7 @@
   --top-height: 58px;
   --control-height: 36px;
   --control-height-sm: 30px;
+  --control-height-lg: 52px;
   --input-height: 38px;
   --agenda-hour: 48px;
   --agenda-col: 148px;
@@ -240,6 +243,8 @@
     --danger-soft: #300f0b;
     --warning: #ebc166;
     --warning-soft: #241900;
+    --info: #8fc3f7;
+    --info-soft: #0a1a2b;
     --success: #80dba2;
     --success-soft: #062111;
     --hatch: #1b1b1f;
@@ -340,6 +345,8 @@
   --danger-soft: #300f0b;
   --warning: #ebc166;
   --warning-soft: #241900;
+  --info: #8fc3f7;
+  --info-soft: #0a1a2b;
   --success: #80dba2;
   --success-soft: #062111;
   --hatch: #1b1b1f;
@@ -913,6 +920,7 @@
 [data-density="compact"] {
   --control-height: calc(36px * var(--density));
   --control-height-sm: calc(30px * var(--density));
+  --control-height-lg: calc(52px * var(--density));
   --input-height: calc(38px * var(--density));
   --density: 0.875;
   --pad-control-x: calc(16px * var(--density));
@@ -926,6 +934,7 @@
 [data-density="normal"] {
   --control-height: calc(36px * var(--density));
   --control-height-sm: calc(30px * var(--density));
+  --control-height-lg: calc(52px * var(--density));
   --input-height: calc(38px * var(--density));
   --density: 1;
   --pad-control-x: calc(16px * var(--density));
@@ -939,6 +948,7 @@
 [data-density="comfortable"] {
   --control-height: calc(36px * var(--density));
   --control-height-sm: calc(30px * var(--density));
+  --control-height-lg: calc(52px * var(--density));
   --input-height: calc(38px * var(--density));
   --density: 1.125;
   --pad-control-x: calc(16px * var(--density));
@@ -948,6 +958,20 @@
   --gap-density-lg: calc(18px * var(--density));
 }
 
+:root[data-density="touch"],
+[data-density="touch"] {
+  --control-height: 44px;
+  --control-height-sm: 44px;
+  --control-height-lg: 52px;
+  --input-height: 48px;
+  --density: 1.125;
+  --pad-control-x: calc(16px * var(--density));
+  --pad-card: calc(16px * var(--density));
+  --gap-density-sm: calc(8px * var(--density));
+  --gap-density: calc(12px * var(--density));
+  --gap-density-lg: calc(18px * var(--density));
+}
+
 :root[data-radius="none"],
 [data-radius="none"] {
   --radius-xs-override: 0px;

package/tokens/default.json

@@ -557,6 +557,22 @@
     },
     "usage": "Fondo de la cita cuyo cliente ya llegó y del chip de aviso."
    },
+   {
+    "name": "info",
+    "value": {
+     "light": "#0b5cad",
+     "dark": "#8fc3f7"
+    },
+    "usage": "Aviso informativo que no pide acción: texto e icono sobre info-soft."
+   },
+   {
+    "name": "info-soft",
+    "value": {
+     "light": "#e8f2fc",
+     "dark": "#0a1a2b"
+    },
+    "usage": "Fondo del aviso informativo y del chip informativo."
+   },
    {
     "name": "success",
     "value": {
@@ -1089,6 +1105,11 @@
     "value": "30px",
     "usage": "Alto de botones dentro de filas."
    },
+   {
+    "name": "control-height-lg",
+    "value": "52px",
+    "usage": "Alto del botón grande: la acción principal de una pantalla pensada para el pulgar."
+   },
    {
     "name": "input-height",
     "value": "38px",
@@ -1587,6 +1608,7 @@
    "scaled": [
     "control-height",
     "control-height-sm",
+    "control-height-lg",
     "input-height",
     "pad-control-x",
     "pad-card",
@@ -1609,6 +1631,17 @@
      "id": "comfortable",
      "name": "Cómoda",
      "density": 1.125
+    },
+    {
+     "id": "touch",
+     "name": "Táctil",
+     "density": 1.125,
+     "values": {
+      "control-height": "44px",
+      "control-height-sm": "44px",
+      "control-height-lg": "52px",
+      "input-height": "48px"
+     }
     }
    ]
   },
@@ -1742,6 +1775,7 @@
    "--ease-style": "motion-ease",
    "--spacing-control": "control-height",
    "--spacing-control-sm": "control-height-sm",
+   "--spacing-control-lg": "control-height-lg",
    "--spacing-input": "input-height",
    "--spacing-control-x": "pad-control-x",
    "--spacing-card": "pad-card",