@proyecto-viviana/ui 0.6.3 → 0.8.0-rc.0

package/src/button/ActionButton.tsx

@@ -1,13 +1,21 @@
-import {
-  children as resolveChildren,
-  createEffect,
-  createSignal,
-  type JSX,
-  mergeProps,
-  onCleanup,
-  splitProps,
-  useContext,
-} from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionButton.tsx
+
+// Port of packages/@react-spectrum/s2/src/ActionButton.tsx.
+
+import { children as resolveChildren, createEffect, createSignal, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Button as HeadlessButton,
   type ButtonProps as HeadlessButtonProps,
@@ -16,9 +24,10 @@ import {
   MenuTriggerContext,
   PopoverTriggerContext,
 } from "@proyecto-viviana/solidaria-components";
-import { createStringFormatter } from "@proyecto-viviana/solidaria";
-import { fontRelative, style } from "../style" with { type: "macro" };
-import { useProviderProps } from "../provider";
+import { createStringFormatter, mergeProps, useLocale } from "@proyecto-viviana/solidaria";
+import { fontRelative, space, style } from "../style" with { type: "macro" };
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
+import { useFormProps } from "../form";
 import { centerBaseline } from "../icon/center-baseline";
 import type { StaticColor } from "./types";
 import type { StyleString } from "../style";
@@ -55,6 +64,8 @@ import {
   type RefLike,
 } from "./spectrum-context";
 import { getSingleTextChild } from "./text-child";
+import CornerTriangle from "../icon/ui-icons/CornerTriangle";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type { ActionButtonSize } from "./group-context";
 
@@ -78,14 +89,13 @@ type StyledActionButtonBaseProps = Omit<
 
 type RuntimeActionButtonProps = ActionButtonProps & {
   onHoverChange?: (isHovered: boolean) => void;
+  holdAffordance?: boolean;
 };
 
-const avatarSize: Record<ActionButtonSize, number> = {
-  XS: 14,
-  S: 16,
-  M: 20,
-  L: 22,
-  XL: 26,
+type ActionButtonLayeredProps = RuntimeActionButtonProps & {
+  density?: ActionButtonDensity;
+  orientation?: ActionButtonOrientation;
+  isJustified?: boolean;
 };
 
 export interface ActionButtonProps extends StyledActionButtonBaseProps {
@@ -112,12 +122,18 @@ export interface ActionButtonProps extends StyledActionButtonBaseProps {
  */
 export function ActionButton(props: ActionButtonProps): JSX.Element {
   const runtimeProps = props as RuntimeActionButtonProps;
-  const providerProps = useProviderProps(runtimeProps);
+  const providerProps = useProviderProps(runtimeProps) as RuntimeActionButtonProps &
+    ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useActionButtonContext(), runtimeProps.slot);
   const groupContext = getSlottedContextProps(useActionButtonGroupContext(), undefined);
-  const defaultProps: Partial<ActionButtonProps> = {
-    size: "M",
-  };
   const groupProps: Partial<ActionButtonProps> & {
     density?: ActionButtonDensity;
     orientation?: ActionButtonOrientation;
@@ -132,9 +148,6 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
     get isQuiet() {
       return groupContext?.isQuiet;
     },
-    get isDisabled() {
-      return groupContext?.isDisabled;
-    },
     get density() {
       return groupContext?.density;
     },
@@ -146,12 +159,9 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
     },
   };
 
-  const merged = mergeProps(
-    defaultProps,
-    providerProps,
-    contextProps ?? {},
-    runtimeProps,
-    groupProps,
+  // As Button: the Form fills what the layers leave unset; defaults are read-time.
+  const merged = useFormProps(
+    mergeProps<ActionButtonLayeredProps>(flags, contextProps ?? {}, runtimeProps, groupProps),
   );
   const [local, headlessProps] = splitProps(merged, [
     "size",
@@ -162,6 +172,7 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
     "UNSAFE_className",
     "UNSAFE_style",
     "children",
+    "holdAffordance",
     "ref",
     "onPress",
     "onPressChange",
@@ -171,11 +182,19 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
     "isJustified",
   ] as const);
 
+  // Upstream ends the chain on the Form proxy and keeps the group last:
+  // `isDisabled={props.isDisabled ?? isDisabled}` after `useFormProps`
+  // (`@react-spectrum/s2@1.7.0/src/ActionButton.tsx:334,358`). `headlessProps`
+  // is that proxy — own prop, context, provider, then the Form, with a Skeleton
+  // over all of them — so the group stays out of the merge for this one key,
+  // unlike size/staticColor/isQuiet, which upstream lets the group win.
+  const isDisabled = () => headlessProps.isDisabled ?? groupContext?.isDisabled;
   const { isProgressVisible } = createPendingState(() => local.isPending);
   const dialogTriggerContext = useContext(DialogTriggerContext);
   const menuTriggerContext = useContext(MenuTriggerContext);
   const popoverTriggerContext = useContext(PopoverTriggerContext);
   const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
+  const locale = useLocale();
   let buttonElement: HTMLButtonElement | undefined;
   const [resolvedButtonElement, setResolvedButtonElement] = createSignal<HTMLButtonElement | null>(
     null,
@@ -186,6 +205,10 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
   );
 
   const size = (): ActionButtonSize => local.size ?? "M";
+  const cornerTriangleSize = (): "S" | "M" | "L" | "XL" => {
+    const currentSize = size();
+    return currentSize === "XS" ? "S" : currentSize;
+  };
   const density = (): ActionButtonDensity => local.density ?? "regular";
   const orientation = (): ActionButtonOrientation => local.orientation ?? "horizontal";
   const isOverlayTriggerOpen = () =>
@@ -243,35 +266,16 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
 
   const getPressScaleStyle = (renderProps: ButtonRenderProps): JSX.CSSProperties =>
     pressScale(() => buttonElement, mergedUnsafeStyle())(renderProps);
-  const menuTriggerButtonProps = (): Partial<HeadlessButtonProps> => {
-    if (!menuTriggerContext) {
-      return {};
-    }
-
-    return {
-      get "aria-haspopup"() {
-        return (menuTriggerContext.triggerProps as Record<string, unknown>)["aria-haspopup"] as
-          | "menu"
-          | true
-          | undefined;
-      },
-      get "aria-expanded"() {
-        return (menuTriggerContext.triggerProps as Record<string, unknown>)["aria-expanded"] as
-          | boolean
-          | undefined;
-      },
-      get "aria-controls"() {
-        return (menuTriggerContext.triggerProps as Record<string, unknown>)["aria-controls"] as
-          | string
-          | undefined;
-      },
-      get "aria-disabled"() {
-        return (menuTriggerContext.triggerProps as Record<string, unknown>)["aria-disabled"] as
-          | boolean
-          | undefined;
-      },
-    };
-  };
+  const menuTriggerButtonProps: Partial<HeadlessButtonProps> = !menuTriggerContext
+    ? {}
+    : mergeProps<Partial<HeadlessButtonProps>>(
+        splitProps(menuTriggerContext.triggerProps as Record<string, unknown>, [
+          "onKeyDown",
+        ])[1] as Partial<HeadlessButtonProps>,
+        {
+          onPressStart: menuTriggerContext.onPressStart,
+        } as Partial<HeadlessButtonProps>,
+      );
   const syncMenuTriggerAttribute = (element: HTMLButtonElement, name: string, value: unknown) => {
     if (value == null) {
       element.removeAttribute(name);
@@ -281,49 +285,48 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
     element.setAttribute(name, String(value));
   };
 
-  createEffect(() => {
-    const element = resolvedButtonElement();
-    if (!element || !menuTriggerContext) {
-      return;
-    }
-
-    const triggerProps = menuTriggerContext.triggerProps as Record<string, unknown>;
-    syncMenuTriggerAttribute(element, "aria-haspopup", triggerProps["aria-haspopup"]);
-    syncMenuTriggerAttribute(element, "aria-expanded", triggerProps["aria-expanded"]);
-    syncMenuTriggerAttribute(element, "aria-controls", triggerProps["aria-controls"]);
-    syncMenuTriggerAttribute(element, "aria-disabled", triggerProps["aria-disabled"]);
-  });
-  createEffect(() => {
-    const element = resolvedButtonElement();
-    if (!element || !menuTriggerContext) {
-      return;
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
-        return;
+  createEffect(
+    () => {
+      const element = resolvedButtonElement();
+      if (!element || !menuTriggerContext || menuTriggerContext.triggerRef?.() !== element) {
+        return null;
       }
-
-      (menuTriggerContext.triggerProps as { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown?.(
-        event,
-      );
-    };
-
-    element.addEventListener("keydown", onKeyDown);
-    onCleanup(() => element.removeEventListener("keydown", onKeyDown));
-  });
-
-  const pendingAccessibleLabel = () => {
-    const existingLabel = (headlessProps as Record<string, unknown>)["aria-label"];
-    if (existingLabel != null) {
-      return existingLabel as string;
-    }
-
-    const resolvedChildren = resolveChildren(() => local.children);
-    const content = resolvedChildren();
-    return local.isPending && typeof content === "string" ? content : undefined;
-  };
-
+      const triggerProps = menuTriggerContext.triggerProps as Record<string, unknown>;
+      return {
+        element,
+        haspopup: triggerProps["aria-haspopup"],
+        expanded: triggerProps["aria-expanded"],
+        controls: triggerProps["aria-controls"],
+        disabled: triggerProps["aria-disabled"],
+      };
+    },
+    (snapshot) => {
+      if (!snapshot) return;
+      syncMenuTriggerAttribute(snapshot.element, "aria-haspopup", snapshot.haspopup);
+      syncMenuTriggerAttribute(snapshot.element, "aria-expanded", snapshot.expanded);
+      syncMenuTriggerAttribute(snapshot.element, "aria-controls", snapshot.controls);
+      syncMenuTriggerAttribute(snapshot.element, "aria-disabled", snapshot.disabled);
+    },
+  );
+  createEffect(
+    () => {
+      const element = resolvedButtonElement();
+      if (!element || !menuTriggerContext || menuTriggerContext.triggerRef?.() !== element) {
+        return null;
+      }
+      return element;
+    },
+    (element) => {
+      if (!element) return;
+      const onKeyDown = (event: KeyboardEvent) => {
+        (
+          menuTriggerContext?.triggerProps as { onKeyDown?: (e: KeyboardEvent) => void } | undefined
+        )?.onKeyDown?.(event);
+      };
+      element.addEventListener("keydown", onKeyDown);
+      return () => element.removeEventListener("keydown", onKeyDown);
+    },
+  );
   function ActionButtonContent() {
     const iconContextValue = {
       slot: "icon",
@@ -351,9 +354,7 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
       styles: () => s2ActionButtonText({ isProgressVisible: isProgressVisible() }),
     };
     const avatarContextValue = {
-      get size() {
-        return avatarSize[size()];
-      },
+      size: "1lh" as const,
       get styles() {
         return style({
           marginStart: "--iconMargin",
@@ -378,7 +379,14 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
         return currentSize === "XS" ? undefined : currentSize;
       },
       get isDisabled() {
-        return !!headlessProps.isDisabled;
+        // Upstream hands the badge RACButton's children render prop, not the
+        // group value: `:381` is `{({isDisabled}) =>`, which shadows the `ctx`
+        // destructuring at `:348`, so the `isDisabled` passed at `:436` is the
+        // resolved `props.isDisabled ?? ctx.isDisabled`
+        // (`@react-spectrum/s2@1.7.0/src/ActionButton.tsx:348,358,381,436`;
+        // `react-aria-components@1.21.0/dist/private/Button.mjs:51` coerces it).
+        // So the Form greys the badge too. The proxy alone misses the group.
+        return !!isDisabled();
       },
       styles: () =>
         style({
@@ -399,25 +407,29 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
       const content = () => resolvedChildren();
       const textChild = () => getSingleTextChild(content());
 
-      return textChild() !== undefined ? (
-        <span
-          class={s2ActionButtonText({ isProgressVisible: isProgressVisible() })}
-          data-rsp-slot="text"
-        >
-          {textChild()}
-        </span>
-      ) : (
-        content()
+      return (
+        <>
+          {textChild() !== undefined ? (
+            <span
+              class={s2ActionButtonText({ isProgressVisible: isProgressVisible() })}
+              data-rsp-slot="text"
+            >
+              {textChild()}
+            </span>
+          ) : (
+            content()
+          )}
+        </>
       );
     }
 
     return (
-      <SkeletonContext.Provider value={null}>
-        <TextContext.Provider value={textContextValue}>
-          <IconContext.Provider value={iconContextValue}>
-            <AvatarContext.Provider value={avatarContextValue}>
-              <ImageContext.Provider value={imageContextValue}>
-                <NotificationBadgeContext.Provider value={notificationBadgeContextValue}>
+      <SkeletonContext value={null}>
+        <TextContext value={textContextValue}>
+          <IconContext value={iconContextValue}>
+            <AvatarContext value={avatarContextValue}>
+              <ImageContext value={imageContextValue}>
+                <NotificationBadgeContext value={notificationBadgeContextValue}>
                   <ResolvedContent />
                   {local.isPending ? (
                     <div
@@ -432,20 +444,51 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
                       />
                     </div>
                   ) : null}
-                </NotificationBadgeContext.Provider>
-              </ImageContext.Provider>
-            </AvatarContext.Provider>
-          </IconContext.Provider>
-        </TextContext.Provider>
-      </SkeletonContext.Provider>
+                  {local.holdAffordance ? (
+                    <CornerTriangle
+                      size={cornerTriangleSize()}
+                      class={style({
+                        position: "absolute",
+                        insetEnd: {
+                          size: {
+                            XS: space(3),
+                            S: space(3),
+                            M: 4,
+                            L: space(5),
+                            XL: space(6),
+                          },
+                        },
+                        bottom: {
+                          size: {
+                            XS: space(3),
+                            S: space(3),
+                            M: 4,
+                            L: space(5),
+                            XL: space(6),
+                          },
+                        },
+                        scaleX: {
+                          direction: {
+                            rtl: -1,
+                          },
+                        },
+                      })({ direction: locale().direction, size: size() })}
+                    />
+                  ) : null}
+                </NotificationBadgeContext>
+              </ImageContext>
+            </AvatarContext>
+          </IconContext>
+        </TextContext>
+      </SkeletonContext>
     );
   }
 
   return (
     <HeadlessButton
       {...headlessProps}
-      {...menuTriggerButtonProps()}
-      aria-label={pendingAccessibleLabel()}
+      {...menuTriggerButtonProps}
+      isDisabled={isDisabled()}
       isPending={local.isPending}
       isPendingFocusable
       ref={(element: HTMLButtonElement) => {
@@ -460,9 +503,12 @@ export function ActionButton(props: ActionButtonProps): JSX.Element {
         local.onPressChange?.(pressed);
       }}
       onPress={(event) => {
-        if (!local.isPending) {
-          local.onPress?.(event);
+        if (menuTriggerContext?.triggerRef?.() === buttonElement) {
+          const menuOnPress = (menuTriggerContext!.triggerProps as Partial<HeadlessButtonProps>)
+            .onPress;
+          menuOnPress?.(event);
         }
+        local.onPress?.(event);
       }}
       class={getClassName}
       style={getPressScaleStyle}

package/src/button/Button.tsx

@@ -1,21 +1,32 @@
-import {
-  children as resolveChildren,
-  type JSX,
-  mergeProps,
-  splitProps,
-  useContext,
-} from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Button.tsx
+
+// Port of packages/@react-spectrum/s2/src/Button.tsx.
+
+import { createMemo, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Button as HeadlessButton,
   type ButtonRenderProps,
   DialogTriggerContext,
   PopoverTriggerContext,
 } from "@proyecto-viviana/solidaria-components";
-import { createStringFormatter } from "@proyecto-viviana/solidaria";
+import { mergeProps, createStringFormatter } from "@proyecto-viviana/solidaria";
 import type { ButtonFillStyle, ButtonProps, ButtonSize, ButtonVariant } from "./types";
 import { fontRelative, style } from "../style" with { type: "macro" };
 import { s2IntlStrings } from "../intl";
-import { useProviderProps } from "../provider";
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
 import { pressScale } from "../pressScale";
 import {
   s2Button,
@@ -39,6 +50,7 @@ import {
   type RefLike,
 } from "./spectrum-context";
 import { getSingleTextChild } from "./text-child";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 type RuntimeButtonProps = ButtonProps & {
   onHoverChange?: (isHovered: boolean) => void;
@@ -46,16 +58,21 @@ type RuntimeButtonProps = ButtonProps & {
 
 export function Button(props: ButtonProps): JSX.Element {
   const runtimeProps = props as RuntimeButtonProps;
-  const providerProps = useProviderProps(useFormProps(runtimeProps));
+  const providerProps = useProviderProps(useFormProps(runtimeProps)) as RuntimeButtonProps &
+    ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useButtonContext(), runtimeProps.slot);
-  const defaultProps: Partial<ButtonProps> = {
-    variant: "primary",
-    size: "M",
-    fillStyle: "fill",
-  };
-
+  // Upstream: context, then the Form fills what is still unset, then the
+  // defaults at read time. A default merged in first would hide the Form's size.
   const merged = useFormProps(
-    mergeProps(defaultProps, providerProps, contextProps ?? {}, runtimeProps),
+    mergeProps<RuntimeButtonProps>(flags, contextProps ?? {}, runtimeProps),
   );
 
   const [local, headlessProps] = splitProps(merged, [
@@ -137,23 +154,23 @@ export function Button(props: ButtonProps): JSX.Element {
         styles: () =>
           style({
             order: 0,
-          }),
+            visibility: {
+              isProgressVisible: "hidden",
+            },
+          })({ isProgressVisible: isProgressVisible() }),
       }),
       styles: () =>
         style({
           /* fontRelative(16), not Spectrum's fontRelative(20): S2's default sizes a
-           * button icon to its 20px workflow-icon grid, which on this register's 15px
+           * button icon to its 20px workflow-icon grid, which on this theme's 15px
            * control font renders ~21px — larger than the label and larger than anything
-           * the handoff draws. The register's own PixelIcon default is 17px
+           * the handoff draws. The theme's own PixelIcon default is 17px
            * (primitives.tsx:55); fontRelative(16) lands ~17px at the 15px control font,
            * matching that default. Scales with the size prop the same way 20 did. */
           size: fontRelative(16),
           marginStart: "--iconMargin",
           flexShrink: 0,
-          visibility: {
-            isProgressVisible: "hidden",
-          },
-        })({ isProgressVisible: isProgressVisible() }),
+        }),
     };
     const textContextValue = {
       styles: () => s2ButtonText({ isProgressVisible: isProgressVisible() }),
@@ -161,27 +178,33 @@ export function Button(props: ButtonProps): JSX.Element {
     };
 
     function ResolvedContent() {
-      const resolvedChildren = resolveChildren(() => local.children);
-      const content = () => resolvedChildren();
+      // Cache the authored child value without recursively resolving dynamic members.
+      // Solid's children() helper turns mixed text into a snapshot that goes stale
+      // when this branch is hydrated.
+      const content = createMemo(() => local.children);
       const textChild = () => getSingleTextChild(content());
 
-      return textChild() !== undefined ? (
-        <span
-          class={`${s2ButtonText({ isProgressVisible: isProgressVisible() })} ${style({ order: 1 })}`}
-          data-rsp-slot="text"
-        >
-          {textChild()}
-        </span>
-      ) : (
-        content()
+      return (
+        <>
+          {textChild() !== undefined ? (
+            <span
+              class={`${s2ButtonText({ isProgressVisible: isProgressVisible() })} ${style({ order: 1 })}`}
+              data-rsp-slot="text"
+            >
+              {textChild()}
+            </span>
+          ) : (
+            content()
+          )}
+        </>
       );
     }
 
     return (
       <>
-        <SkeletonContext.Provider value={null}>
-          <TextContext.Provider value={textContextValue}>
-            <IconContext.Provider value={iconContextValue}>
+        <SkeletonContext value={null}>
+          <TextContext value={textContextValue}>
+            <IconContext value={iconContextValue}>
               <ResolvedContent />
               {local.isPending ? (
                 <div
@@ -197,9 +220,9 @@ export function Button(props: ButtonProps): JSX.Element {
                   />
                 </div>
               ) : null}
-            </IconContext.Provider>
-          </TextContext.Provider>
-        </SkeletonContext.Provider>
+            </IconContext>
+          </TextContext>
+        </SkeletonContext>
       </>
     );
   }
@@ -219,11 +242,7 @@ export function Button(props: ButtonProps): JSX.Element {
       onPressChange={(pressed) => {
         local.onPressChange?.(pressed);
       }}
-      onPress={(event) => {
-        if (!local.isPending) {
-          local.onPress?.(event);
-        }
-      }}
+      onPress={local.onPress}
       class={getClassName}
       style={getPressScaleStyle}
     >

package/src/button/ClearButton.tsx

@@ -1,4 +1,19 @@
-import { type JSX, splitProps } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ClearButton.tsx
+
+// Port of packages/@react-spectrum/s2/src/ClearButton.tsx.
+import type { JSX } from "@solidjs/web";
 import {
   Button as HeadlessButton,
   type ButtonProps as HeadlessButtonProps,
@@ -9,6 +24,7 @@ import { IconContext } from "../icon/spectrum-icon";
 import { centerBaseline } from "../icon/center-baseline";
 import CrossIcon from "../icon/ui-icons/Cross";
 import { style, focusRing } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type ClearButtonSize = "sm" | "md" | "lg";
 
@@ -92,9 +108,9 @@ export function ClearButton(props: ClearButtonProps): JSX.Element {
       aria-label={headlessProps["aria-label"] ?? "Clear"}
       class={getClassName}
     >
-      <IconContext.Provider value={{ slot: "icon", render: centerBaseline({ slot: "icon" }) }}>
+      <IconContext value={{ slot: "icon", render: centerBaseline({ slot: "icon" }) }}>
         <CrossIcon style={iconSizes[size()]} />
-      </IconContext.Provider>
+      </IconContext>
     </HeadlessButton>
   );
 }