@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/Pressable.tsx

@@ -5,17 +5,19 @@
  * to make an element pressable. Port of React Aria's Pressable.
  */
 
-import { type JSX, children as resolveChildren, createEffect, onCleanup, splitProps } from 'solid-js';
+import {
+  type JSX,
+  children as resolveChildren,
+  createEffect,
+  onCleanup,
+  splitProps,
+} from "solid-js";
 import {
   createPress,
   createFocusable,
   type CreatePressProps,
   type CreateFocusableProps,
-} from '@proyecto-viviana/solidaria';
-
-// ============================================
-// TYPES
-// ============================================
+} from "@proyecto-viviana/solidaria";
 
 export interface PressableProps extends CreatePressProps {
   /** A single child element to make pressable. */
@@ -24,10 +26,6 @@ export interface PressableProps extends CreatePressProps {
   ref?: HTMLElement | ((el: HTMLElement) => void);
 }
 
-// ============================================
-// COMPONENT
-// ============================================
-
 /**
  * Makes its child element pressable and focusable.
  * Combines createPress and createFocusable for full interaction support.
@@ -40,11 +38,14 @@ export interface PressableProps extends CreatePressProps {
  * ```
  */
 export function Pressable(props: PressableProps): JSX.Element {
-  const [local, pressProps] = splitProps(props, ['children', 'ref']);
+  const [local, pressProps] = splitProps(props, ["children", "ref"]);
 
   let ref!: HTMLElement;
   const { pressProps: domPressProps } = createPress(pressProps);
-  const { focusableProps: domFocusableProps } = createFocusable(pressProps as CreateFocusableProps, () => ref);
+  const { focusableProps: domFocusableProps } = createFocusable(
+    pressProps as CreateFocusableProps,
+    () => ref,
+  );
 
   const resolved = resolveChildren(() => local.children);
 
@@ -52,8 +53,7 @@ export function Pressable(props: PressableProps): JSX.Element {
     const child = resolved() as HTMLElement;
     if (child instanceof HTMLElement) {
       ref = child;
-      // Forward ref
-      if (typeof local.ref === 'function') {
+      if (typeof local.ref === "function") {
         local.ref(child);
       }
 
@@ -61,7 +61,7 @@ export function Pressable(props: PressableProps): JSX.Element {
       const allProps = { ...domFocusableProps, ...domPressProps };
       const listeners: Array<[string, EventListener]> = [];
       for (const [key, handler] of Object.entries(allProps)) {
-        if (key.startsWith('on') && typeof handler === 'function') {
+        if (key.startsWith("on") && typeof handler === "function") {
           const eventName = key.slice(2).toLowerCase();
           const listener = handler as EventListener;
           child.addEventListener(eventName, listener);
@@ -72,24 +72,24 @@ export function Pressable(props: PressableProps): JSX.Element {
       // Apply non-event press/focusable props (e.g. tabIndex/data attrs).
       // Keep explicit child tabIndex to mirror mergeProps(child.props precedence).
       for (const [key, value] of Object.entries(allProps)) {
-        if (key === 'ref' || (key.startsWith('on') && typeof value === 'function')) continue;
+        if (key === "ref" || (key.startsWith("on") && typeof value === "function")) continue;
 
-        if (key === 'tabIndex') {
-          if (child.hasAttribute('tabindex')) continue;
+        if (key === "tabIndex") {
+          if (child.hasAttribute("tabindex")) continue;
           if (value == null || value === false) {
-            child.removeAttribute('tabindex');
+            child.removeAttribute("tabindex");
           } else {
             child.tabIndex = Number(value);
           }
           continue;
         }
 
-        if (key.startsWith('aria-') || key.startsWith('data-') || key === 'id' || key === 'role') {
+        if (key.startsWith("aria-") || key.startsWith("data-") || key === "id" || key === "role") {
           if (child.hasAttribute(key)) continue;
           if (value == null || value === false) {
             child.removeAttribute(key);
           } else if (value === true) {
-            child.setAttribute(key, '');
+            child.setAttribute(key, "");
           } else {
             child.setAttribute(key, String(value));
           }

package/src/ProgressBar.tsx

@@ -5,16 +5,8 @@
  * Port of react-aria-components/src/ProgressBar.tsx
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  splitProps,
-} from 'solid-js';
-import {
-  createProgressBar,
-  type AriaProgressBarProps,
-} from '@proyecto-viviana/solidaria';
+import { type JSX, createContext, createMemo, mergeProps, splitProps, useContext } from "solid-js";
+import { createProgressBar, type AriaProgressBarProps } from "@proyecto-viviana/solidaria";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -22,11 +14,7 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
 
 export interface ProgressBarRenderProps {
   /** The value as a percentage between the minimum and maximum (0-100). */
@@ -37,9 +25,9 @@ export interface ProgressBarRenderProps {
   isIndeterminate: boolean;
 }
 
-export interface ProgressBarProps
-  extends AriaProgressBarProps,
-    SlotProps {
+export interface ProgressBarProps extends AriaProgressBarProps, SlotProps {
+  /** The element id. */
+  id?: string;
   /** The children of the component. A function may be provided to receive render props. */
   children?: RenderChildren<ProgressBarRenderProps>;
   /** The CSS className for the element. */
@@ -48,16 +36,8 @@ export interface ProgressBarProps
   style?: StyleOrFunction<ProgressBarRenderProps>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export const ProgressBarContext = createContext<ProgressBarProps | null>(null);
 
-// ============================================
-// UTILITIES
-// ============================================
-
 function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
@@ -67,10 +47,6 @@ function getSafeRange(min: number, max: number): number {
   return Number.isFinite(range) && range > 0 ? range : 1;
 }
 
-// ============================================
-// PROGRESSBAR COMPONENT
-// ============================================
-
 /**
  * Progress bars show either determinate or indeterminate progress of an operation
  * over time.
@@ -89,35 +65,54 @@ function getSafeRange(min: number, max: number): number {
  * ```
  */
 export function ProgressBar(props: ProgressBarProps): JSX.Element {
-  const [local, ariaProps] = splitProps(props, [
-    'children',
-    'class',
-    'style',
-    'slot',
-  ]);
+  const contextProps = useContext(ProgressBarContext);
+  const mergedProps = contextProps ? mergeProps(contextProps, props) : props;
+  const [local, ariaProps] = splitProps(mergedProps, ["children", "class", "style", "slot"]);
 
-  // Get values for calculations
   const value = () => ariaProps.value ?? 0;
   const minValue = () => ariaProps.minValue ?? 0;
   const maxValue = () => ariaProps.maxValue ?? 100;
   const isIndeterminate = () => ariaProps.isIndeterminate ?? false;
 
-  // Create progress bar aria props
   const progressAria = createProgressBar({
-    get value() { return ariaProps.value; },
-    get minValue() { return ariaProps.minValue; },
-    get maxValue() { return ariaProps.maxValue; },
-    get valueLabel() { return ariaProps.valueLabel; },
-    get isIndeterminate() { return ariaProps.isIndeterminate; },
-    get formatOptions() { return ariaProps.formatOptions; },
-    get label() { return ariaProps.label; },
-    get 'aria-label'() { return ariaProps['aria-label']; },
-    get 'aria-labelledby'() { return ariaProps['aria-labelledby']; },
-    get 'aria-describedby'() { return ariaProps['aria-describedby']; },
-    get 'aria-details'() { return ariaProps['aria-details']; },
+    get id() {
+      return ariaProps.id;
+    },
+    get value() {
+      return ariaProps.value;
+    },
+    get minValue() {
+      return ariaProps.minValue;
+    },
+    get maxValue() {
+      return ariaProps.maxValue;
+    },
+    get valueLabel() {
+      return ariaProps.valueLabel;
+    },
+    get isIndeterminate() {
+      return ariaProps.isIndeterminate;
+    },
+    get formatOptions() {
+      return ariaProps.formatOptions;
+    },
+    get label() {
+      return ariaProps.label;
+    },
+    get "aria-label"() {
+      return ariaProps["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return ariaProps["aria-labelledby"];
+    },
+    get "aria-describedby"() {
+      return ariaProps["aria-describedby"];
+    },
+    get "aria-details"() {
+      return ariaProps["aria-details"];
+    },
   });
 
-  // Calculate percentage
   const percentage = createMemo(() => {
     if (isIndeterminate()) {
       return undefined;
@@ -126,30 +121,26 @@ export function ProgressBar(props: ProgressBarProps): JSX.Element {
     return ((clampedValue - minValue()) / getSafeRange(minValue(), maxValue())) * 100;
   });
 
-  // Get value text from aria props
   const valueText = createMemo(() => {
-    return progressAria.progressBarProps['aria-valuetext'] as string | undefined;
+    return progressAria.progressBarProps["aria-valuetext"] as string | undefined;
   });
 
-  // Render props values
   const renderValues = createMemo<ProgressBarRenderProps>(() => ({
     percentage: percentage(),
     valueText: valueText(),
     isIndeterminate: isIndeterminate(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-ProgressBar',
+      defaultClassName: "solidaria-ProgressBar",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
   const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
 
   return (