@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/ToggleButton.tsx

@@ -0,0 +1,169 @@
+/**
+ * ToggleButton component for solidaria-components
+ *
+ * A pre-wired headless toggle button that combines pressed + selected state.
+ * Port direction: react-aria-components/src/ToggleButton.tsx
+ */
+
+import { type JSX, createContext, createMemo, splitProps, useContext } from "solid-js";
+import {
+  createToggleButton,
+  createToggleButtonGroupItem,
+  createFocusRing,
+  createHover,
+  mergeProps,
+  type AriaToggleButtonProps,
+} from "@proyecto-viviana/solidaria";
+import type { Key } from "@proyecto-viviana/solid-stately";
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from "./utils";
+import { useToggleButtonGroupStateContext } from "./ToggleButtonGroup";
+
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
+
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(el);
+  } else {
+    ref.current = el;
+  }
+}
+
+export interface ToggleButtonRenderProps {
+  isHovered: boolean;
+  isPressed: boolean;
+  isFocused: boolean;
+  isFocusVisible: boolean;
+  isDisabled: boolean;
+  isSelected: boolean;
+}
+
+export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, "children">, SlotProps {
+  /** Key used when inside ToggleButtonGroup selection state. */
+  toggleKey?: Key;
+  /** Preferred group key prop, parity with RAC item id usage. */
+  id?: Key;
+  children?: RenderChildren<ToggleButtonRenderProps>;
+  class?: ClassNameOrFunction<ToggleButtonRenderProps>;
+  style?: StyleOrFunction<ToggleButtonRenderProps>;
+  /** Ref for the underlying button element. */
+  ref?: RefLike<HTMLButtonElement>;
+}
+
+export const ToggleButtonContext = createContext<ToggleButtonProps | null>(null);
+
+function resolveDisabledValue(isDisabled: AriaToggleButtonProps["isDisabled"]): boolean {
+  if (typeof isDisabled === "function") {
+    return isDisabled();
+  }
+  return !!isDisabled;
+}
+
+export function ToggleButton(props: ToggleButtonProps): JSX.Element {
+  const contextProps = useContext(ToggleButtonContext);
+  const mergedProps = (contextProps ? mergeProps(contextProps, props) : props) as ToggleButtonProps;
+
+  const [local, ariaProps] = splitProps(mergedProps, [
+    "children",
+    "class",
+    "style",
+    "ref",
+    "slot",
+    "toggleKey",
+    "id",
+  ]);
+  const groupState = useToggleButtonGroupStateContext();
+  const groupKey = local.id ?? local.toggleKey;
+  const standaloneAriaProps = mergeProps<AriaToggleButtonProps>(ariaProps, {
+    get id() {
+      return local.id;
+    },
+  });
+
+  const toggleAria =
+    groupState && groupKey != null
+      ? createToggleButtonGroupItem(
+          {
+            ...ariaProps,
+            id: groupKey,
+          },
+          groupState,
+        )
+      : createToggleButton(standaloneAriaProps);
+
+  const isDisabled = () => resolveDisabledValue(ariaProps.isDisabled) || !!groupState?.isDisabled;
+
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() {
+      return isDisabled();
+    },
+  });
+
+  const renderValues = createMemo<ToggleButtonRenderProps>(() => ({
+    isHovered: isHovered(),
+    isPressed: toggleAria.isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: isDisabled(),
+    isSelected: toggleAria.isSelected(),
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-ToggleButton",
+    },
+    renderValues,
+  );
+
+  const domProps = createMemo(() => {
+    const filtered = filterDOMProps(ariaProps, { global: true });
+    delete (filtered as Record<string, unknown>).onClick;
+    delete (filtered as Record<string, unknown>).id;
+    return filtered;
+  });
+
+  const cleanButtonProps = () => {
+    const { ref: _ref1, ...rest } = toggleAria.buttonProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref2, ...rest } = focusProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref3, ...rest } = hoverProps as Record<string, unknown>;
+    return rest;
+  };
+
+  return (
+    <button
+      {...domProps()}
+      {...cleanButtonProps()}
+      {...cleanFocusProps()}
+      {...cleanHoverProps()}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      ref={(el) => assignRef(local.ref, el)}
+      slot={local.slot}
+      data-pressed={toggleAria.isPressed() || undefined}
+      data-hovered={isHovered() || undefined}
+      data-focused={isFocused() || undefined}
+      data-focus-visible={isFocusVisible() || undefined}
+      data-disabled={isDisabled() || undefined}
+      data-selected={toggleAria.isSelected() || undefined}
+    >
+      {renderProps.renderChildren()}
+    </button>
+  );
+}

package/src/ToggleButtonGroup.tsx

@@ -0,0 +1,141 @@
+/**
+ * ToggleButtonGroup component for solidaria-components.
+ *
+ * Groups toggle buttons with single/multiple selection state.
+ * Parity target: react-aria-components/src/ToggleButtonGroup.tsx
+ */
+
+import { type JSX, createContext, createMemo, splitProps, useContext } from "solid-js";
+import { createToggleButtonGroup, mergeProps } from "@proyecto-viviana/solidaria";
+import {
+  createToggleGroupState,
+  type Key,
+  type ToggleGroupState,
+} from "@proyecto-viviana/solid-stately";
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type RenderChildren,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from "./utils";
+
+export interface ToggleButtonGroupRenderProps {
+  orientation: "horizontal" | "vertical";
+  isDisabled: boolean;
+  state: ToggleGroupState;
+}
+
+export interface ToggleButtonGroupProps
+  extends
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "class" | "style" | "onSelectionChange">,
+    SlotProps {
+  selectionMode?: "single" | "multiple";
+  disallowEmptySelection?: boolean;
+  selectedKeys?: Iterable<Key>;
+  defaultSelectedKeys?: Iterable<Key>;
+  onSelectionChange?: (keys: Set<Key>) => void;
+  orientation?: "horizontal" | "vertical";
+  isDisabled?: boolean;
+  children?: RenderChildren<ToggleButtonGroupRenderProps>;
+  class?: ClassNameOrFunction<ToggleButtonGroupRenderProps>;
+  style?: StyleOrFunction<ToggleButtonGroupRenderProps>;
+}
+
+export const ToggleButtonGroupContext = createContext<ToggleButtonGroupProps | null>(null);
+export const ToggleButtonGroupStateContext = createContext<ToggleGroupState | null>(null);
+export const ToggleGroupStateContext = ToggleButtonGroupStateContext;
+export type ToggleButtonGroupStateContextValue = ToggleGroupState;
+
+export function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element {
+  const [local, domProps] = splitProps(props, [
+    "selectionMode",
+    "disallowEmptySelection",
+    "selectedKeys",
+    "defaultSelectedKeys",
+    "onSelectionChange",
+    "orientation",
+    "isDisabled",
+    "children",
+    "class",
+    "style",
+    "ref",
+    "slot",
+    "aria-label",
+    "aria-labelledby",
+  ]);
+
+  const state = createToggleGroupState(() => ({
+    selectionMode: local.selectionMode,
+    disallowEmptySelection: local.disallowEmptySelection,
+    selectedKeys: local.selectedKeys,
+    defaultSelectedKeys: local.defaultSelectedKeys,
+    onSelectionChange: local.onSelectionChange,
+    isDisabled: !!local.isDisabled,
+  }));
+
+  const { groupProps } = createToggleButtonGroup(
+    {
+      get orientation() {
+        return local.orientation;
+      },
+      get isDisabled() {
+        return !!local.isDisabled;
+      },
+      get "aria-label"() {
+        return local["aria-label"];
+      },
+      get "aria-labelledby"() {
+        return local["aria-labelledby"];
+      },
+    },
+    state,
+  );
+
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-ToggleButtonGroup",
+    },
+    () => ({
+      orientation: local.orientation ?? "horizontal",
+      isDisabled: !!local.isDisabled,
+      state,
+    }),
+  );
+
+  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+  const mergedGroupProps = createMemo(() =>
+    mergeProps(filteredDomProps(), groupProps as Record<string, unknown>),
+  );
+
+  return (
+    <div
+      {...(mergedGroupProps() as JSX.HTMLAttributes<HTMLDivElement>)}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={local.slot}
+      data-orientation={local.orientation ?? "horizontal"}
+      data-disabled={local.isDisabled || undefined}
+      ref={(el) => {
+        if (!local.ref) return;
+        if (typeof local.ref === "function") {
+          local.ref(el);
+        }
+      }}
+    >
+      <ToggleButtonGroupContext.Provider value={props}>
+        <ToggleButtonGroupStateContext.Provider value={state}>
+          {renderProps.renderChildren()}
+        </ToggleButtonGroupStateContext.Provider>
+      </ToggleButtonGroupContext.Provider>
+    </div>
+  );
+}
+
+export function useToggleButtonGroupStateContext(): ToggleGroupState | null {
+  return useContext(ToggleButtonGroupStateContext);
+}

package/src/Toolbar.tsx

@@ -12,53 +12,37 @@ import {
   createMemo,
   splitProps,
   useContext,
-} from 'solid-js'
+} from "solid-js";
 import {
   createToolbar,
   type AriaToolbarProps,
   type Orientation,
-} from '@proyecto-viviana/solidaria'
-import {
-  type SlotProps,
-  filterDOMProps,
-} from './utils'
-
-// ============================================
-// TYPES
-// ============================================
+} from "@proyecto-viviana/solidaria";
+import { type SlotProps, filterDOMProps } from "./utils";
 
 export interface ToolbarRenderProps {
   /** The orientation of the toolbar. */
-  orientation: Orientation
+  orientation: Orientation;
 }
 
-export interface ToolbarProps
-  extends AriaToolbarProps,
-    ParentProps,
-    SlotProps {
+export interface ToolbarProps extends AriaToolbarProps, ParentProps, SlotProps {
   /** The CSS className for the element. A function may be provided to receive render props. */
-  class?: string | ((renderProps: ToolbarRenderProps) => string)
+  class?: string | ((renderProps: ToolbarRenderProps) => string);
   /** The inline style for the element. A function may be provided to receive render props. */
-  style?: JSX.CSSProperties | ((renderProps: ToolbarRenderProps) => JSX.CSSProperties)
+  style?: JSX.CSSProperties | ((renderProps: ToolbarRenderProps) => JSX.CSSProperties);
   /** Additional data-* attributes. */
-  [key: `data-${string}`]: string | undefined
+  [key: `data-${string}`]: string | undefined;
+  /** Ref for the toolbar element. */
+  ref?: ((el: HTMLDivElement) => void) | { current?: HTMLDivElement | null };
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export interface ToolbarContextValue {
   slots?: {
-    [name: string]: Record<string, unknown>
-  }
+    [name: string]: Record<string, unknown>;
+  };
 }
 
-export const ToolbarContext = createContext<ToolbarContextValue | null>(null)
-
-// ============================================
-// TOOLBAR COMPONENT
-// ============================================
+export const ToolbarContext = createContext<ToolbarContextValue | null>(null);
 
 /**
  * A toolbar is a container for a set of interactive controls,
@@ -87,63 +71,62 @@ export const ToolbarContext = createContext<ToolbarContextValue | null>(null)
 export function Toolbar(props: ToolbarProps): JSX.Element {
   const [local, ariaProps, domProps] = splitProps(
     props,
-    ['class', 'style', 'slot', 'children'],
-    ['orientation', 'aria-label', 'aria-labelledby']
-  )
+    ["class", "style", "slot", "children", "ref"],
+    ["orientation", "aria-label", "aria-labelledby"],
+  );
 
-  // Get slot props from context if available
-  const ctx = useContext(ToolbarContext)
+  const ctx = useContext(ToolbarContext);
   const slotProps = () => {
     if (ctx?.slots && local.slot) {
-      return ctx.slots[local.slot] || {}
+      return ctx.slots[local.slot] || {};
     }
-    return {}
-  }
-
-  // Merge slot props with explicit props
-  const mergedAriaProps = createMemo(() => ({
-    orientation: ariaProps.orientation,
-    'aria-label': ariaProps['aria-label'] ?? slotProps()['aria-label'] as string | undefined,
-    'aria-labelledby': ariaProps['aria-labelledby'],
-  }))
-
-  // Create toolbar aria props
-  const { toolbarProps, orientation } = createToolbar(mergedAriaProps())
+    return {};
+  };
+
+  const { toolbarProps, orientation } = createToolbar({
+    get orientation() {
+      return ariaProps.orientation;
+    },
+    get "aria-label"() {
+      return (
+        (ariaProps["aria-label"] as string | undefined) ??
+        (slotProps()["aria-label"] as string | undefined)
+      );
+    },
+    get "aria-labelledby"() {
+      return ariaProps["aria-labelledby"] as string | undefined;
+    },
+  });
 
-  // Render props values
   const renderValues = createMemo<ToolbarRenderProps>(() => ({
     orientation: orientation(),
-  }))
+  }));
 
-  // Resolve class
   const resolvedClass = createMemo(() => {
-    const cls = local.class
-    if (typeof cls === 'function') {
-      return cls(renderValues())
+    const cls = local.class;
+    if (typeof cls === "function") {
+      return cls(renderValues());
     }
-    return cls ?? 'solidaria-Toolbar'
-  })
+    return cls ?? "solidaria-Toolbar";
+  });
 
-  // Resolve style
   const resolvedStyle = createMemo(() => {
-    const style = local.style
-    if (typeof style === 'function') {
-      return style(renderValues())
+    const style = local.style;
+    if (typeof style === "function") {
+      return style(renderValues());
     }
-    return style
-  })
+    return style;
+  });
 
-  // Resolve children (support render props)
   const resolvedChildren = createMemo(() => {
-    const children = props.children
-    if (typeof children === 'function') {
-      return (children as (props: ToolbarRenderProps) => JSX.Element)(renderValues())
+    const children = props.children;
+    if (typeof children === "function") {
+      return (children as (props: ToolbarRenderProps) => JSX.Element)(renderValues());
     }
-    return children
-  })
+    return children;
+  });
 
-  // Filter remaining DOM props
-  const filteredDOMProps = createMemo(() => filterDOMProps(domProps, { global: true }))
+  const filteredDOMProps = createMemo(() => filterDOMProps(domProps, { global: true }));
 
   return (
     <div
@@ -153,8 +136,16 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
       style={resolvedStyle()}
       slot={local.slot}
       data-orientation={orientation()}
+      ref={(el) => {
+        if (!local.ref) return;
+        if (typeof local.ref === "function") {
+          local.ref(el);
+        } else {
+          local.ref.current = el;
+        }
+      }}
     >
       {resolvedChildren()}
     </div>
-  )
+  );
 }