@santi020k/lumen-react 4.0.0 → 4.1.0

package/dist/server-components.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement } from 'react';
-import { composeClassName } from '@santi020k/lumen-core';
+import { composeClassName, normalizeLumenProgress, resolveLumenLoadingSemantics, resolveLumenSkeletonAnimation, resolveLumenSkeletonShape, resolveLumenSkeletonSize } from '@santi020k/lumen-core';
 const Primitive = ({ as, className, uiClassName, ...props }) => {
     const tag = as ?? 'div';
     const safeClassName = typeof className === 'string' ? className : undefined;
@@ -42,16 +42,24 @@ export const Grid = ({ as = 'div', className, columns = 'auto', gap = 'group', m
 export const Input = ({ className, ref, type = 'text', visualSize = 'default', ...props }) => (_jsx("input", { className: composeClassName('ui-input', visualSize === 'sm' && 'ui-input--sm', visualSize === 'lg' && 'ui-input--lg', className), ref: ref, type: type, ...props }));
 export const Label = ({ className, ...props }) => (_jsx("label", { className: composeClassName('ui-label', className), ...props }));
 export const Progress = ({ className, max = 100, value = 0, ...props }) => {
-    const safeMax = max > 0 ? max : 100;
-    const safeValue = Math.min(safeMax, Math.max(0, value));
-    const percentage = (safeValue / safeMax) * 100;
+    const { max: safeMax, percentage, value: safeValue } = normalizeLumenProgress(max, value);
     return (_jsx("div", { "aria-valuemax": safeMax, "aria-valuemin": 0, "aria-valuenow": safeValue, className: composeClassName('ui-progress', className), role: "progressbar", ...props, children: _jsx("span", { className: "ui-progress__bar", "data-slot": "progress-indicator", style: { width: `${percentage}%` } }) }));
 };
 export const Separator = ({ className, orientation = 'horizontal', ...props }) => (_jsx("hr", { "aria-orientation": orientation, className: composeClassName('ui-separator', `ui-separator--${orientation}`, className), "data-orientation": orientation, ...props }));
-export const Skeleton = ({ className, ...props }) => (_jsx("div", { className: composeClassName('ui-skeleton', className), ...props }));
+export const Skeleton = ({ animation, 'aria-hidden': ariaHidden, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, height, role, shape, style, width, ...props }) => {
+    const semantics = resolveLumenLoadingSemantics({ ariaHidden, ariaLabel, ariaLabelledby, role });
+    const resolvedShape = resolveLumenSkeletonShape(shape);
+    const resolvedAnimation = resolveLumenSkeletonAnimation(animation);
+    const skeletonStyle = {
+        '--ui-skeleton-height': resolveLumenSkeletonSize(height),
+        '--ui-skeleton-width': resolveLumenSkeletonSize(width),
+        ...style
+    };
+    return (_jsx("div", { "aria-hidden": ariaHidden ?? (semantics.ariaHidden ? true : undefined), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: composeClassName('ui-skeleton', resolvedShape !== 'rectangle' && `ui-skeleton--${resolvedShape}`, resolvedAnimation === 'pulse' && 'ui-skeleton--pulse', resolvedAnimation === 'none' && 'ui-skeleton--static', className), role: role ?? semantics.role, style: skeletonStyle, ...props }));
+};
 export const Spinner = ({ 'aria-hidden': ariaHidden, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, role, ...props }) => {
-    const isAccessible = Boolean(ariaLabel || ariaLabelledby);
-    return (_jsx("span", { "aria-hidden": ariaHidden ?? (isAccessible ? undefined : true), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: composeClassName('ui-spinner', className), role: role ?? (isAccessible ? 'status' : undefined), ...props }));
+    const semantics = resolveLumenLoadingSemantics({ ariaHidden, ariaLabel, ariaLabelledby, role });
+    return (_jsx("span", { "aria-hidden": ariaHidden ?? (semantics.ariaHidden ? true : undefined), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: composeClassName('ui-spinner', className), role: role ?? semantics.role, ...props }));
 };
 export const Stack = ({ align = 'stretch', as = 'div', className, direction = 'vertical', gap = 'group', justify = 'start', wrap = false, ...props }) => createElement(as, {
     className: composeClassName('ui-stack', `ui-stack--${direction}`, `ui-stack--gap-${gap}`, `ui-stack--align-${align}`, `ui-stack--justify-${justify}`, wrap && 'ui-stack--wrap', className),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-react",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -123,8 +123,8 @@
     "lumen": "./bin/lumen.mjs"
   },
   "dependencies": {
-    "@santi020k/lumen": "^4.0.0",
-    "@santi020k/lumen-core": "^4.0.0",
+    "@santi020k/lumen": "^4.1.0",
+    "@santi020k/lumen-core": "^4.1.0",
     "@tanstack/react-table": "9.2.4",
     "uqr": "^0.1.3"
   },

package/styles/critical.css

@@ -172,6 +172,17 @@
   }
 }
 
+@keyframes ui-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.55;
+  }
+}
+
 @keyframes ui-spin {
   to {
     transform: rotate(360deg);
@@ -790,15 +801,21 @@
   background-image:
     linear-gradient(45deg, transparent 50%, hsl(var(--ink-muted)) 50%),
     linear-gradient(135deg, hsl(var(--ink-muted)) 50%, transparent 50%);
-  background-position:
-    calc(100% - 1rem) 50%,
-    calc(100% - 0.72rem) 50%;
+  background-position: var(--_ui-select-chevron, calc(100% - 1rem) 50%, calc(100% - 0.72rem) 50%);
   background-size:
     0.32rem 0.32rem,
     0.32rem 0.32rem;
   background-repeat: no-repeat;
 }
 
+[dir="rtl"] {
+  --_ui-select-chevron: 0.72rem 50%, 1rem 50%;
+}
+
+[dir="ltr"] {
+  --_ui-select-chevron: calc(100% - 1rem) 50%, calc(100% - 0.72rem) 50%;
+}
+
 .ui-label {
   color: hsl(var(--ink));
   font-size: 0.875rem;
@@ -1007,7 +1024,9 @@
 }
 
 .ui-skeleton {
-  min-height: 1rem;
+  /* A default height, not a minimum, lets explicit styles and classes size placeholders below 1rem. */
+  width: var(--ui-skeleton-width, auto);
+  height: var(--ui-skeleton-height, 1rem);
   border-radius: var(--ui-radius-sm);
   background: linear-gradient(
     90deg,
@@ -1019,6 +1038,42 @@
   animation: ui-shimmer 2.2s linear infinite;
 }
 
+.ui-skeleton:where(:not(:empty)) {
+  height: var(--ui-skeleton-height, auto);
+  min-height: 1rem;
+}
+
+lumen-skeleton.ui-skeleton,
+lumen-progress.ui-progress {
+  display: block;
+}
+
+.ui-skeleton--text {
+  height: var(--ui-skeleton-height, 0.75rem);
+}
+
+.ui-skeleton--circle {
+  flex: 0 0 auto;
+  width: var(--ui-skeleton-width, var(--ui-skeleton-height, 2.5rem));
+  height: var(--ui-skeleton-height, var(--ui-skeleton-width, 2.5rem));
+  border-radius: 50%;
+}
+
+.ui-skeleton--pulse {
+  background: hsl(var(--surface-strong));
+  animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+.ui-skeleton--static {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+.ui-skeleton {
+    animation: none;
+  }
+}
+
 .ui-spinner {
   box-sizing: border-box;
   display: inline-block;
@@ -1586,7 +1641,9 @@ lumen-dialog.ui-dialog:not([hidden]):has(> [data-slot="dialog-body"]) {
 
 .ui-input-otp__native[data-ui-enhanced="true"] {
   position: absolute;
-  width: 1px;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 100%;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);