@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/Pressable.tsx

@@ -0,0 +1,108 @@
+/**
+ * Pressable component for solidaria-components
+ *
+ * A render-prop component that wraps createPress + createFocusable
+ * to make an element pressable. Port of React Aria's Pressable.
+ */
+
+import {
+  type JSX,
+  children as resolveChildren,
+  createEffect,
+  onCleanup,
+  splitProps,
+} from "solid-js";
+import {
+  createPress,
+  createFocusable,
+  type CreatePressProps,
+  type CreateFocusableProps,
+} from "@proyecto-viviana/solidaria";
+
+export interface PressableProps extends CreatePressProps {
+  /** A single child element to make pressable. */
+  children: JSX.Element;
+  /** Ref callback. */
+  ref?: HTMLElement | ((el: HTMLElement) => void);
+}
+
+/**
+ * Makes its child element pressable and focusable.
+ * Combines createPress and createFocusable for full interaction support.
+ *
+ * @example
+ * ```tsx
+ * <Pressable onPress={() => console.log('pressed')}>
+ *   <div role="button" tabIndex={0}>Click me</div>
+ * </Pressable>
+ * ```
+ */
+export function Pressable(props: PressableProps): JSX.Element {
+  const [local, pressProps] = splitProps(props, ["children", "ref"]);
+
+  let ref!: HTMLElement;
+  const { pressProps: domPressProps } = createPress(pressProps);
+  const { focusableProps: domFocusableProps } = createFocusable(
+    pressProps as CreateFocusableProps,
+    () => ref,
+  );
+
+  const resolved = resolveChildren(() => local.children);
+
+  createEffect(() => {
+    const child = resolved() as HTMLElement;
+    if (child instanceof HTMLElement) {
+      ref = child;
+      if (typeof local.ref === "function") {
+        local.ref(child);
+      }
+
+      // Apply press props
+      const allProps = { ...domFocusableProps, ...domPressProps };
+      const listeners: Array<[string, EventListener]> = [];
+      for (const [key, handler] of Object.entries(allProps)) {
+        if (key.startsWith("on") && typeof handler === "function") {
+          const eventName = key.slice(2).toLowerCase();
+          const listener = handler as EventListener;
+          child.addEventListener(eventName, listener);
+          listeners.push([eventName, listener]);
+        }
+      }
+
+      // 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 === "tabIndex") {
+          if (child.hasAttribute("tabindex")) continue;
+          if (value == null || value === false) {
+            child.removeAttribute("tabindex");
+          } else {
+            child.tabIndex = Number(value);
+          }
+          continue;
+        }
+
+        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, "");
+          } else {
+            child.setAttribute(key, String(value));
+          }
+        }
+      }
+
+      onCleanup(() => {
+        for (const [eventName, listener] of listeners) {
+          child.removeEventListener(eventName, listener);
+        }
+      });
+    }
+  });
+
+  return <>{resolved()}</>;
+}

package/src/ProgressBar.tsx

@@ -5,17 +5,8 @@
  * Port of react-aria-components/src/ProgressBar.tsx
  */
 
-import {
-  type JSX,
-  type ParentProps,
-  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,
@@ -23,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). */
@@ -38,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. */
@@ -49,23 +36,16 @@ 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);
 }
 
-// ============================================
-// PROGRESSBAR COMPONENT
-// ============================================
+function getSafeRange(min: number, max: number): number {
+  const range = max - min;
+  return Number.isFinite(range) && range > 0 ? range : 1;
+}
 
 /**
  * Progress bars show either determinate or indeterminate progress of an operation
@@ -84,68 +64,83 @@ function clamp(value: number, min: number, max: number): number {
  * </ProgressBar>
  * ```
  */
-export function ProgressBar(props: ParentProps<ProgressBarProps>): JSX.Element {
-  const [local, ariaProps] = splitProps(props, [
-    'children',
-    'class',
-    'style',
-    'slot',
-  ]);
+export function ProgressBar(props: ProgressBarProps): JSX.Element {
+  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;
     }
     const clampedValue = clamp(value(), minValue(), maxValue());
-    return ((clampedValue - minValue()) / (maxValue() - minValue())) * 100;
+    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 (