@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/Icon.tsx

@@ -0,0 +1,154 @@
+/**
+ * Icon component for solidaria-components
+ *
+ * Minimal headless Icon that owns ARIA semantics:
+ * - Decorative (no label): aria-hidden="true"
+ * - Informative (aria-label): role="img" + aria-label
+ * - Interactive (onPress): wraps content in headless Button
+ *
+ * The UI layer consumes this for styling/composition only.
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  Show,
+  splitProps,
+} from 'solid-js';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+import { Button } from './Button';
+import type { PressEvent } from '@proyecto-viviana/solidaria';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface IconRenderProps {
+  /** Whether the icon is purely decorative (no label). */
+  isDecorative: boolean;
+  /** Whether the icon is interactive (has onPress). */
+  isInteractive: boolean;
+}
+
+export interface IconProps extends SlotProps {
+  /** Handler called when the icon is pressed (makes it interactive). */
+  onPress?: (e: PressEvent) => void;
+  /** Accessible label for the icon. When provided, the icon is informative (role="img"). */
+  'aria-label'?: string;
+  /** ID of an element that labels this icon. */
+  'aria-labelledby'?: string;
+  /** The children of the component. A function may be provided to receive render props. */
+  children?: RenderChildren<IconRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<IconRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<IconRenderProps>;
+  /** The id of the element. */
+  id?: string;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+export const IconContext = createContext<IconProps | null>(null);
+
+// ============================================
+// ICON COMPONENT
+// ============================================
+
+/**
+ * An icon wrapper that provides correct ARIA semantics.
+ *
+ * - **Decorative** (no `aria-label`): renders `<span aria-hidden="true">`
+ * - **Informative** (`aria-label` provided): renders `<span role="img" aria-label="...">`
+ * - **Interactive** (`onPress` provided): wraps in headless `Button`
+ *
+ * @example
+ * ```tsx
+ * // Decorative
+ * <Icon><SearchSvg /></Icon>
+ *
+ * // Informative
+ * <Icon aria-label="Search"><SearchSvg /></Icon>
+ *
+ * // Interactive
+ * <Icon onPress={handleSearch} aria-label="Search"><SearchSvg /></Icon>
+ * ```
+ */
+export function Icon(props: IconProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'children',
+    'class',
+    'style',
+    'slot',
+    'onPress',
+    'aria-label',
+    'aria-labelledby',
+  ]);
+
+  const hasLabel = () => !!(local['aria-label'] || local['aria-labelledby']);
+  const isInteractive = () => !!local.onPress;
+  const isDecorative = () => !hasLabel();
+
+  // Render props values
+  const renderValues = createMemo<IconRenderProps>(() => ({
+    isDecorative: isDecorative(),
+    isInteractive: isInteractive(),
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-Icon',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+
+  return (
+    <Show
+      when={isInteractive()}
+      fallback={
+        <span
+          {...domProps()}
+          role={hasLabel() ? 'img' : undefined}
+          aria-hidden={isDecorative() ? 'true' : undefined}
+          aria-label={local['aria-label']}
+          aria-labelledby={local['aria-labelledby']}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-interactive={undefined}
+          data-decorative={isDecorative() || undefined}
+        >
+          {renderProps.renderChildren()}
+        </span>
+      }
+    >
+      <Button
+        {...domProps()}
+        onPress={local.onPress}
+        aria-label={local['aria-label']}
+        aria-labelledby={local['aria-labelledby']}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-interactive=""
+      >
+        {renderProps.renderChildren()}
+      </Button>
+    </Show>
+  );
+}

package/src/Keyboard.tsx

@@ -0,0 +1,26 @@
+/**
+ * Keyboard primitive for solidaria-components.
+ *
+ * Displays keyboard key hints with semantic <kbd> markup.
+ * Port direction: react-aria-components/src/Keyboard.tsx
+ */
+
+import { type JSX, createContext, splitProps, useContext } from 'solid-js';
+
+export interface KeyboardProps extends JSX.HTMLAttributes<HTMLElement> {
+  children?: JSX.Element;
+}
+
+export const KeyboardContext = createContext<KeyboardProps | null>(null);
+
+export function Keyboard(props: KeyboardProps): JSX.Element {
+  const context = useContext(KeyboardContext);
+  const merged = () => ({ ...(context ?? {}), ...props });
+  const [local, domProps] = splitProps(merged(), ['children']);
+
+  return (
+    <kbd dir="ltr" {...domProps}>
+      {local.children}
+    </kbd>
+  );
+}

package/src/Link.tsx

@@ -28,6 +28,7 @@ import {
   useRenderProps,
   filterDOMProps,
 } from './utils';
+import { handleLinkClick, useRouter } from './RouterProvider';
 
 // ============================================
 // TYPES
@@ -98,6 +99,8 @@ export function Link(props: ParentProps<LinkProps>): JSX.Element {
     'onHoverEnd',
     'onHoverChange',
   ]);
+  const router = useRouter();
+  const resolvedHref = createMemo(() => ariaProps.href ? router.useHref(ariaProps.href) : undefined);
 
   // Determine element type - use 'a' if href is provided and not disabled
   const elementType = () => {
@@ -111,9 +114,13 @@ export function Link(props: ParentProps<LinkProps>): JSX.Element {
   const linkAria = createLink({
     get elementType() { return elementType(); },
     get isDisabled() { return ariaProps.isDisabled; },
-    get href() { return ariaProps.href; },
+    get href() { return resolvedHref(); },
+    get hrefLang() { return ariaProps.hrefLang; },
     get target() { return ariaProps.target; },
     get rel() { return ariaProps.rel; },
+    get download() { return ariaProps.download; },
+    get ping() { return ariaProps.ping; },
+    get referrerPolicy() { return ariaProps.referrerPolicy; },
     get onPress() { return ariaProps.onPress; },
     get onPressStart() { return ariaProps.onPressStart; },
     get onPressEnd() { return ariaProps.onPressEnd; },
@@ -178,6 +185,11 @@ export function Link(props: ParentProps<LinkProps>): JSX.Element {
     const { ref: _ref3, ...rest } = focusProps as Record<string, unknown>;
     return rest;
   };
+  const onLinkClick = (event: MouseEvent) => {
+    const onClick = cleanLinkProps().onClick as ((event: MouseEvent) => void) | undefined;
+    onClick?.(event);
+    handleLinkClick(event, router, ariaProps.href, ariaProps.routerOptions);
+  };
 
   return (
     <Dynamic
@@ -186,6 +198,7 @@ export function Link(props: ParentProps<LinkProps>): JSX.Element {
       {...cleanLinkProps()}
       {...cleanHoverProps()}
       {...cleanFocusProps()}
+      onClick={onLinkClick}
       class={renderProps.class()}
       style={renderProps.style()}
       data-hovered={isHovered() || undefined}