@proyecto-viviana/solidaria-components 0.0.2 → 0.0.3

package/dist/index.d.ts

@@ -1,20 +1,533 @@
+import * as solid_js from 'solid-js';
+import { JSX, Accessor, ParentProps } from 'solid-js';
+import { AriaButtonProps, AriaSwitchProps, AriaCheckboxProps, AriaCheckboxGroupProps, AriaRadioProps, AriaRadioGroupProps, AriaTextFieldProps, AriaLinkProps, HoverEvents, AriaProgressBarProps, AriaSeparatorProps, Orientation as Orientation$1 } from '@proyecto-viviana/solidaria';
+import { ToggleState, CheckboxGroupState, RadioGroupProps as RadioGroupProps$1, RadioGroupState } from '@proyecto-viviana/solid-stately';
+
 /**
- * solidaria-components
- *
- * Pre-wired headless components for SolidJS.
- * Port of react-aria-components.
- *
- * These components combine state management + accessibility hooks into
- * ready-to-style components using the render props pattern and data attributes.
- */
-export { type RenderChildren, type ClassNameOrFunction, type StyleOrFunction, type RenderPropsBase, type SlotProps, useRenderProps, filterDOMProps, removeDataAttributes, createDataAttributes, dataAttr, } from './utils';
-export { VisuallyHidden, type VisuallyHiddenProps, } from './VisuallyHidden';
-export { Button, ButtonContext, type ButtonProps, type ButtonRenderProps, } from './Button';
-export { ToggleSwitch, ToggleSwitchContext, type ToggleSwitchProps, type ToggleSwitchRenderProps, } from './Switch';
-export { Checkbox, CheckboxGroup, CheckboxContext, CheckboxGroupContext, CheckboxGroupStateContext, type CheckboxProps, type CheckboxRenderProps, type CheckboxGroupProps, type CheckboxGroupRenderProps, } from './Checkbox';
-export { Radio, RadioGroup, RadioContext, RadioGroupContext, RadioGroupStateContext, type RadioProps, type RadioRenderProps, type RadioGroupProps, type RadioGroupRenderProps, type Orientation, } from './RadioGroup';
-export { TextField, TextFieldContext, Label, Input, TextArea, type TextFieldProps, type TextFieldRenderProps, type TextFieldContextValue, type LabelProps, type InputProps, type TextAreaProps, } from './TextField';
-export { Link, LinkContext, type LinkProps, type LinkRenderProps, } from './Link';
-export { ProgressBar, ProgressBarContext, type ProgressBarProps, type ProgressBarRenderProps, } from './ProgressBar';
-export { Separator, SeparatorContext, type SeparatorProps, type SeparatorRenderProps, } from './Separator';
-//# sourceMappingURL=index.d.ts.map
+ * Render props pattern - children can be a function that receives state
+ */
+type RenderChildren<T> = JSX.Element | ((renderProps: T) => JSX.Element);
+/**
+ * Class name can be a string or a function that computes based on state
+ */
+type ClassNameOrFunction<T> = string | ((renderProps: T) => string);
+/**
+ * Style can be an object or a function that computes based on state
+ */
+type StyleOrFunction<T> = JSX.CSSProperties | ((renderProps: T) => JSX.CSSProperties);
+/**
+ * Common render props interface
+ */
+interface RenderPropsBase<T> {
+    /** The children of the component. A function may be provided to receive render props. */
+    children?: RenderChildren<T>;
+    /** The CSS className for the element. A function may be provided to compute the class based on state. */
+    class?: ClassNameOrFunction<T>;
+    /** The inline style for the element. A function may be provided to compute the style based on state. */
+    style?: StyleOrFunction<T>;
+}
+/**
+ * Slot props for named slots
+ */
+interface SlotProps {
+    /** A slot name for the component. */
+    slot?: string;
+}
+/**
+ * Resolves render props (children, class, style) based on component state
+ */
+declare function useRenderProps<T extends object>(props: RenderPropsBase<T> & {
+    defaultClassName?: string;
+}, values: Accessor<T>): Accessor<{
+    children: JSX.Element;
+    class: string;
+    style: JSX.CSSProperties | undefined;
+}>;
+/**
+ * Converts boolean state values to data attributes
+ */
+declare function dataAttr(value: boolean | undefined): '' | undefined;
+/**
+ * Creates data attributes from render props
+ */
+declare function createDataAttributes<T extends Record<string, boolean | string | undefined>>(values: T): Record<string, string | undefined>;
+/**
+ * Remove data attributes from props (for internal use)
+ */
+declare function removeDataAttributes<T extends Record<string, unknown>>(props: T): T;
+/**
+ * Filter DOM props - keep only valid DOM attributes
+ */
+declare function filterDOMProps<T extends Record<string, unknown>>(props: T, options?: {
+    global?: boolean;
+}): Record<string, unknown>;
+
+/**
+ * VisuallyHidden component for solidaria-components
+ *
+ * Hides content visually but keeps it accessible to screen readers.
+ * Port of react-aria's VisuallyHidden.
+ */
+
+interface VisuallyHiddenProps extends ParentProps {
+    /** The element type to render. @default 'span' */
+    elementType?: keyof JSX.IntrinsicElements;
+    /** Whether the element should be focusable when focused. */
+    isFocusable?: boolean;
+}
+/**
+ * VisuallyHidden hides its children visually, while keeping content visible to screen readers.
+ */
+declare function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element;
+
+interface ButtonRenderProps {
+    /** Whether the button is currently hovered with a mouse. */
+    isHovered: boolean;
+    /** Whether the button is currently in a pressed state. */
+    isPressed: boolean;
+    /** Whether the button is focused, either via a mouse or keyboard. */
+    isFocused: boolean;
+    /** Whether the button is keyboard focused. */
+    isFocusVisible: boolean;
+    /** Whether the button is disabled. */
+    isDisabled: boolean;
+}
+interface ButtonProps extends Omit<AriaButtonProps, 'children'>, SlotProps {
+    /** The children of the component. A function may be provided to receive render props. */
+    children?: RenderChildren<ButtonRenderProps>;
+    /** The CSS className for the element. */
+    class?: ClassNameOrFunction<ButtonRenderProps>;
+    /** The inline style for the element. */
+    style?: StyleOrFunction<ButtonRenderProps>;
+}
+declare const ButtonContext: solid_js.Context<ButtonProps | null>;
+/**
+ * A button allows a user to perform an action.
+ *
+ * This is a headless component that provides accessibility and state management.
+ * Style it using the render props pattern or data attributes.
+ *
+ * @example
+ * ```tsx
+ * <Button onPress={() => alert('Pressed!')}>
+ *   {({ isPressed, isHovered }) => (
+ *     <span class={isPressed ? 'bg-blue-700' : isHovered ? 'bg-blue-600' : 'bg-blue-500'}>
+ *       Click me
+ *     </span>
+ *   )}
+ * </Button>
+ * ```
+ */
+declare function Button(props: ButtonProps): JSX.Element;
+
+interface ToggleSwitchRenderProps {
+    /** Whether the switch is selected. */
+    isSelected: boolean;
+    /** Whether the switch is currently hovered with a mouse. */
+    isHovered: boolean;
+    /** Whether the switch is currently in a pressed state. */
+    isPressed: boolean;
+    /** Whether the switch is focused, either via a mouse or keyboard. */
+    isFocused: boolean;
+    /** Whether the switch is keyboard focused. */
+    isFocusVisible: boolean;
+    /** Whether the switch is disabled. */
+    isDisabled: boolean;
+    /** Whether the switch is read only. */
+    isReadOnly: boolean;
+    /** State of the switch. */
+    state: ToggleState;
+}
+interface ToggleSwitchProps extends Omit<AriaSwitchProps, 'children'>, SlotProps {
+    /** The children of the component. A function may be provided to receive render props. */
+    children?: RenderChildren<ToggleSwitchRenderProps>;
+    /** The CSS className for the element. */
+    class?: ClassNameOrFunction<ToggleSwitchRenderProps>;
+    /** The inline style for the element. */
+    style?: StyleOrFunction<ToggleSwitchRenderProps>;
+}
+declare const ToggleSwitchContext: solid_js.Context<ToggleSwitchProps | null>;
+/**
+ * A switch allows a user to turn a setting on or off.
+ *
+ * This is a headless component that provides accessibility and state management.
+ * Style it using the render props pattern or data attributes.
+ *
+ * Named "ToggleSwitch" to avoid conflict with SolidJS's built-in Switch component.
+ *
+ * @example
+ * ```tsx
+ * <ToggleSwitch>
+ *   {({ isSelected }) => (
+ *     <>
+ *       <span class={`switch-track ${isSelected ? 'bg-blue-500' : 'bg-gray-300'}`}>
+ *         <span class={`switch-thumb ${isSelected ? 'translate-x-5' : 'translate-x-0'}`} />
+ *       </span>
+ *       <span>Enable notifications</span>
+ *     </>
+ *   )}
+ * </ToggleSwitch>
+ * ```
+ */
+declare function ToggleSwitch(props: ToggleSwitchProps): JSX.Element;
+
+interface CheckboxGroupRenderProps {
+    /** Whether the checkbox group is disabled. */
+    isDisabled: boolean;
+    /** Whether the checkbox group is read only. */
+    isReadOnly: boolean;
+    /** Whether the checkbox group is required. */
+    isRequired: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid: boolean;
+    /** State of the checkbox group. */
+    state: CheckboxGroupState;
+}
+interface CheckboxRenderProps {
+    /** Whether the checkbox is selected. */
+    isSelected: boolean;
+    /** Whether the checkbox is indeterminate. */
+    isIndeterminate: boolean;
+    /** Whether the checkbox is currently hovered with a mouse. */
+    isHovered: boolean;
+    /** Whether the checkbox is currently in a pressed state. */
+    isPressed: boolean;
+    /** Whether the checkbox is focused, either via a mouse or keyboard. */
+    isFocused: boolean;
+    /** Whether the checkbox is keyboard focused. */
+    isFocusVisible: boolean;
+    /** Whether the checkbox is disabled. */
+    isDisabled: boolean;
+    /** Whether the checkbox is read only. */
+    isReadOnly: boolean;
+    /** Whether the checkbox is invalid. */
+    isInvalid: boolean;
+    /** Whether the checkbox is required. */
+    isRequired: boolean;
+}
+interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage'>, SlotProps {
+    /** The children of the component. A function may be provided to receive render props. */
+    children?: RenderChildren<CheckboxGroupRenderProps>;
+    /** The CSS className for the element. */
+    class?: ClassNameOrFunction<CheckboxGroupRenderProps>;
+    /** The inline style for the element. */
+    style?: StyleOrFunction<CheckboxGroupRenderProps>;
+}
+interface CheckboxProps extends Omit<AriaCheckboxProps, 'children'>, SlotProps {
+    /** The children of the component. A function may be provided to receive render props. */
+    children?: RenderChildren<CheckboxRenderProps>;
+    /** The CSS className for the element. */
+    class?: ClassNameOrFunction<CheckboxRenderProps>;
+    /** The inline style for the element. */
+    style?: StyleOrFunction<CheckboxRenderProps>;
+    /** Whether the checkbox is indeterminate. */
+    isIndeterminate?: boolean;
+}
+declare const CheckboxGroupContext: solid_js.Context<CheckboxGroupProps | null>;
+declare const CheckboxGroupStateContext: solid_js.Context<CheckboxGroupState | null>;
+declare const CheckboxContext: solid_js.Context<CheckboxProps | null>;
+/**
+ * A checkbox group allows a user to select multiple items from a list of options.
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup>
+ *   <Checkbox value="one">Option 1</Checkbox>
+ *   <Checkbox value="two">Option 2</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ */
+declare function CheckboxGroup(props: ParentProps<CheckboxGroupProps>): JSX.Element;
+/**
+ * A checkbox allows a user to select multiple items from a list of individual items,
+ * or to mark one individual item as selected.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox>
+ *   {({ isSelected }) => (
+ *     <>
+ *       <span class={`checkbox ${isSelected ? 'checked' : ''}`}>
+ *         {isSelected && '✓'}
+ *       </span>
+ *       <span>Accept terms</span>
+ *     </>
+ *   )}
+ * </Checkbox>
+ * ```
+ */
+declare function Checkbox(props: CheckboxProps): JSX.Element;
+
+type Orientation = 'horizontal' | 'vertical';
+interface RadioGroupRenderProps {
+    /** The orientation of the radio group. */
+    orientation: Orientation;
+    /** Whether the radio group is disabled. */
+    isDisabled: boolean;
+    /** Whether the radio group is read only. */
+    isReadOnly: boolean;
+    /** Whether the radio group is required. */
+    isRequired: boolean;
+    /** Whether the radio group is invalid. */
+    isInvalid: boolean;
+    /** State of the radio group. */
+    state: RadioGroupState;
+}
+interface RadioRenderProps {
+    /** Whether the radio is selected. */
+    isSelected: boolean;
+    /** Whether the radio is currently hovered with a mouse. */
+    isHovered: boolean;
+    /** Whether the radio is currently in a pressed state. */
+    isPressed: boolean;
+    /** Whether the radio is focused, either via a mouse or keyboard. */
+    isFocused: boolean;
+    /** Whether the radio is keyboard focused. */
+    isFocusVisible: boolean;
+    /** Whether the radio is disabled. */
+    isDisabled: boolean;
+    /** Whether the radio is read only. */
+    isReadOnly: boolean;
+    /** Whether the radio is invalid. */
+    isInvalid: boolean;
+    /** Whether the radio is required. */
+    isRequired: boolean;
+}
+interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage'>, Pick<RadioGroupProps$1, 'value' | 'defaultValue' | 'onChange'>, SlotProps {
+    /** The children of the component. A function may be provided to receive render props. */
+    children?: RenderChildren<RadioGroupRenderProps>;
+    /** The CSS className for the element. */
+    class?: ClassNameOrFunction<RadioGroupRenderProps>;
+    /** The inline style for the element. */
+    style?: StyleOrFunction<RadioGroupRenderProps>;
+}
+interface RadioProps extends Omit<AriaRadioProps, 'children'>, SlotProps {
+    /** The children of the component. A function may be provided to receive render props. */
+    children?: RenderChildren<RadioRenderProps>;
+    /** The CSS className for the element. */
+    class?: ClassNameOrFunction<RadioRenderProps>;
+    /** The inline style for the element. */
+    style?: StyleOrFunction<RadioRenderProps>;
+}
+declare const RadioGroupContext: solid_js.Context<RadioGroupProps | null>;
+declare const RadioGroupStateContext: solid_js.Context<RadioGroupState | null>;
+declare const RadioContext: solid_js.Context<RadioProps | null>;
+/**
+ * A radio group allows a user to select a single item from a list of mutually exclusive options.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup>
+ *   <Radio value="one">Option 1</Radio>
+ *   <Radio value="two">Option 2</Radio>
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroup(props: ParentProps<RadioGroupProps>): JSX.Element;
+/**
+ * A radio represents an individual option within a radio group.
+ *
+ * This component uses a deferred rendering pattern to work around SolidJS's
+ * JSX evaluation order. The actual implementation is rendered inside a function
+ * that checks for context availability at render time, not component creation time.
+ *
+ * @example
+ * ```tsx
+ * <Radio value="option1">
+ *   {({ isSelected }) => (
+ *     <>
+ *       <span class={`radio ${isSelected ? 'selected' : ''}`}>
+ *         {isSelected && '●'}
+ *       </span>
+ *       <span>Option 1</span>
+ *     </>
+ *   )}
+ * </Radio>
+ * ```
+ */
+declare function Radio(props: RadioProps): JSX.Element;
+
+interface TextFieldRenderProps {
+    /** Whether the text field is disabled. */
+    isDisabled: boolean;
+    /** Whether the value is invalid. */
+    isInvalid: boolean;
+    /** Whether the text field is read only. */
+    isReadOnly: boolean;
+    /** Whether the text field is required. */
+    isRequired: boolean;
+    /** Whether the text field is currently hovered with a mouse. */
+    isHovered: boolean;
+    /** Whether the text field is focused, either via a mouse or keyboard. */
+    isFocused: boolean;
+    /** Whether the text field is keyboard focused. */
+    isFocusVisible: boolean;
+}
+interface TextFieldProps extends Omit<AriaTextFieldProps, 'children'>, SlotProps {
+    /** The children of the component. A function may be provided to receive render props. */
+    children?: RenderChildren<TextFieldRenderProps>;
+    /** The CSS className for the element. */
+    class?: ClassNameOrFunction<TextFieldRenderProps>;
+    /** The inline style for the element. */
+    style?: StyleOrFunction<TextFieldRenderProps>;
+}
+interface TextFieldContextValue {
+    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
+    inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+    descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+    errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
+    isInvalid: boolean;
+}
+declare const TextFieldContext: solid_js.Context<TextFieldContextValue | null>;
+interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {
+    children?: JSX.Element;
+}
+/**
+ * A label element that automatically wires up to the parent TextField context.
+ * This enables the proper htmlFor/id relationship between label and input.
+ */
+declare function Label(props: LabelProps): JSX.Element;
+interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'children'> {
+}
+/**
+ * An input element that automatically wires up to the parent TextField context.
+ * This enables focus tracking, validation, and accessibility props to flow from
+ * the TextField to the actual input element.
+ */
+declare function Input(props: InputProps): JSX.Element;
+interface TextAreaProps extends Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+}
+/**
+ * A textarea element that automatically wires up to the parent TextField context.
+ * This enables focus tracking, validation, and accessibility props to flow from
+ * the TextField to the actual textarea element.
+ */
+declare function TextArea(props: TextAreaProps): JSX.Element;
+/**
+ * A text field allows a user to enter a plain text value with a keyboard.
+ *
+ * This is a headless component that provides accessibility and state management.
+ * Style it using the render props pattern or data attributes.
+ *
+ * @example
+ * ```tsx
+ * <TextField>
+ *   {({ isInvalid }) => (
+ *     <>
+ *       <Label>Email</Label>
+ *       <Input class={isInvalid ? 'border-red-500' : 'border-gray-300'} />
+ *     </>
+ *   )}
+ * </TextField>
+ * ```
+ */
+declare function TextField(props: TextFieldProps): JSX.Element;
+
+interface LinkRenderProps {
+    /** Whether the link is the current item within a list. */
+    isCurrent: boolean;
+    /** Whether the link is currently hovered with a mouse. */
+    isHovered: boolean;
+    /** Whether the link is currently in a pressed state. */
+    isPressed: boolean;
+    /** Whether the link is focused, either via a mouse or keyboard. */
+    isFocused: boolean;
+    /** Whether the link is keyboard focused. */
+    isFocusVisible: boolean;
+    /** Whether the link is disabled. */
+    isDisabled: boolean;
+}
+interface LinkProps extends Omit<AriaLinkProps, 'elementType'>, HoverEvents, SlotProps {
+    /** The children of the component. A function may be provided to receive render props. */
+    children?: RenderChildren<LinkRenderProps>;
+    /** The CSS className for the element. */
+    class?: ClassNameOrFunction<LinkRenderProps>;
+    /** The inline style for the element. */
+    style?: StyleOrFunction<LinkRenderProps>;
+}
+declare const LinkContext: solid_js.Context<LinkProps | null>;
+/**
+ * A link allows a user to navigate to another page or resource within a web page
+ * or application.
+ *
+ * @example
+ * ```tsx
+ * <Link href="https://example.com">Visit Example</Link>
+ *
+ * // With render props
+ * <Link href="/about">
+ *   {({ isHovered, isFocusVisible }) => (
+ *     <span class={isHovered ? 'underline' : ''}>
+ *       About Us
+ *     </span>
+ *   )}
+ * </Link>
+ * ```
+ */
+declare function Link(props: ParentProps<LinkProps>): JSX.Element;
+
+interface ProgressBarRenderProps {
+    /** The value as a percentage between the minimum and maximum (0-100). */
+    percentage: number | undefined;
+    /** A formatted version of the value. */
+    valueText: string | undefined;
+    /** Whether the progress bar is indeterminate. */
+    isIndeterminate: boolean;
+}
+interface ProgressBarProps extends AriaProgressBarProps, SlotProps {
+    /** The children of the component. A function may be provided to receive render props. */
+    children?: RenderChildren<ProgressBarRenderProps>;
+    /** The CSS className for the element. */
+    class?: ClassNameOrFunction<ProgressBarRenderProps>;
+    /** The inline style for the element. */
+    style?: StyleOrFunction<ProgressBarRenderProps>;
+}
+declare const ProgressBarContext: solid_js.Context<ProgressBarProps | null>;
+/**
+ * Progress bars show either determinate or indeterminate progress of an operation
+ * over time.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={50}>
+ *   {({ percentage, valueText }) => (
+ *     <>
+ *       <Label>Loading...</Label>
+ *       <span>{valueText}</span>
+ *       <div class="bar" style={{ width: `${percentage}%` }} />
+ *     </>
+ *   )}
+ * </ProgressBar>
+ * ```
+ */
+declare function ProgressBar(props: ParentProps<ProgressBarProps>): JSX.Element;
+
+interface SeparatorRenderProps {
+    /** The orientation of the separator. */
+    orientation: Orientation$1;
+}
+interface SeparatorProps extends AriaSeparatorProps, SlotProps {
+    /** The CSS className for the element. A function may be provided to receive render props. */
+    class?: string | ((renderProps: SeparatorRenderProps) => string);
+    /** The inline style for the element. A function may be provided to receive render props. */
+    style?: JSX.CSSProperties | ((renderProps: SeparatorRenderProps) => JSX.CSSProperties);
+}
+declare const SeparatorContext: solid_js.Context<SeparatorProps | null>;
+/**
+ * A separator is a visual divider between two groups of content,
+ * e.g. groups of menu items or sections of a page.
+ *
+ * @example
+ * ```tsx
+ * <Separator />
+ *
+ * // Vertical separator
+ * <Separator orientation="vertical" />
+ *
+ * // Custom element type
+ * <Separator elementType="div" />
+ * ```
+ */
+declare function Separator(props: SeparatorProps): JSX.Element;
+
+export { Button, ButtonContext, type ButtonProps, type ButtonRenderProps, Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext, type CheckboxGroupProps, type CheckboxGroupRenderProps, CheckboxGroupStateContext, type CheckboxProps, type CheckboxRenderProps, type ClassNameOrFunction, Input, type InputProps, Label, type LabelProps, Link, LinkContext, type LinkProps, type LinkRenderProps, type Orientation, ProgressBar, ProgressBarContext, type ProgressBarProps, type ProgressBarRenderProps, Radio, RadioContext, RadioGroup, RadioGroupContext, type RadioGroupProps, type RadioGroupRenderProps, RadioGroupStateContext, type RadioProps, type RadioRenderProps, type RenderChildren, type RenderPropsBase, Separator, SeparatorContext, type SeparatorProps, type SeparatorRenderProps, type SlotProps, type StyleOrFunction, TextArea, type TextAreaProps, TextField, TextFieldContext, type TextFieldContextValue, type TextFieldProps, type TextFieldRenderProps, ToggleSwitch, ToggleSwitchContext, type ToggleSwitchProps, type ToggleSwitchRenderProps, VisuallyHidden, type VisuallyHiddenProps, createDataAttributes, dataAttr, filterDOMProps, removeDataAttributes, useRenderProps };