@proyecto-viviana/solidaria-components 0.0.2 → 0.0.3

package/dist/index.jsx

@@ -0,0 +1,1201 @@
+// src/utils.tsx
+import {
+  createContext,
+  useContext,
+  createMemo
+} from "solid-js";
+function useRenderProps(props, values) {
+  return createMemo(() => {
+    const currentValues = values();
+    const { children, class: className, style, defaultClassName = "" } = props;
+    const resolvedChildren = typeof children === "function" ? children(currentValues) : children;
+    const resolvedClass = typeof className === "function" ? className(currentValues) : className ?? defaultClassName;
+    const resolvedStyle = typeof style === "function" ? style(currentValues) : style;
+    return {
+      children: resolvedChildren,
+      class: resolvedClass,
+      style: resolvedStyle
+    };
+  });
+}
+function dataAttr(value) {
+  return value ? "" : void 0;
+}
+function createDataAttributes(values) {
+  const result = {};
+  for (const [key, value] of Object.entries(values)) {
+    if (typeof value === "boolean") {
+      result[`data-${camelToKebab(key)}`] = value ? "" : void 0;
+    } else if (value !== void 0) {
+      result[`data-${camelToKebab(key)}`] = value;
+    }
+  }
+  return result;
+}
+function camelToKebab(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function removeDataAttributes(props) {
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (!key.startsWith("data-")) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function filterDOMProps(props, options = {}) {
+  const { global = false } = options;
+  const result = {};
+  const globalAttrs = /* @__PURE__ */ new Set([
+    "id",
+    "class",
+    "style",
+    "tabIndex",
+    "role",
+    "title",
+    "lang",
+    "dir",
+    "hidden",
+    "draggable",
+    "accessKey",
+    "contentEditable",
+    "spellcheck"
+  ]);
+  const ariaAttrs = /^aria-/;
+  const dataAttrs = /^data-/;
+  const eventHandlers = /^on[A-Z]/;
+  for (const [key, value] of Object.entries(props)) {
+    if (global && globalAttrs.has(key) || ariaAttrs.test(key) || dataAttrs.test(key) || eventHandlers.test(key)) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+// src/VisuallyHidden.tsx
+import { splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+var visuallyHiddenStyles = {
+  border: "0",
+  clip: "rect(0 0 0 0)",
+  "clip-path": "inset(50%)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: "0",
+  position: "absolute",
+  width: "1px",
+  "white-space": "nowrap"
+};
+function VisuallyHidden(props) {
+  const [local, others] = splitProps(props, ["elementType", "children", "isFocusable"]);
+  const elementType = () => local.elementType ?? "span";
+  return <Dynamic
+    component={elementType()}
+    style={visuallyHiddenStyles}
+    {...others}
+  >
+      {local.children}
+    </Dynamic>;
+}
+
+// src/Button.tsx
+import {
+  createContext as createContext2,
+  createMemo as createMemo2,
+  splitProps as splitProps2
+} from "solid-js";
+import {
+  createButton,
+  createFocusRing,
+  createHover
+} from "@proyecto-viviana/solidaria";
+var ButtonContext = createContext2(null);
+function Button(props) {
+  const [local, ariaProps] = splitProps2(props, [
+    "children",
+    "class",
+    "style",
+    "slot"
+  ]);
+  const resolveDisabled = () => {
+    const disabled = ariaProps.isDisabled;
+    if (typeof disabled === "function") {
+      return disabled();
+    }
+    return !!disabled;
+  };
+  const buttonAria = createButton({
+    ...ariaProps,
+    get isDisabled() {
+      return resolveDisabled();
+    }
+  });
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() {
+      return resolveDisabled();
+    }
+  });
+  const renderValues = createMemo2(() => ({
+    isHovered: isHovered(),
+    isPressed: buttonAria.isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: resolveDisabled()
+  }));
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-Button"
+    },
+    renderValues
+  );
+  const domProps = createMemo2(() => {
+    const filtered = filterDOMProps(ariaProps, { global: true });
+    return filtered;
+  });
+  const cleanButtonProps = () => {
+    const { ref: _ref1, ...rest } = buttonAria.buttonProps;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref2, ...rest } = focusProps;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref3, ...rest } = hoverProps;
+    return rest;
+  };
+  return <button
+    {...domProps()}
+    {...cleanButtonProps()}
+    {...cleanFocusProps()}
+    {...cleanHoverProps()}
+    class={renderProps().class}
+    style={renderProps().style}
+    data-pressed={buttonAria.isPressed() || void 0}
+    data-hovered={isHovered() || void 0}
+    data-focused={isFocused() || void 0}
+    data-focus-visible={isFocusVisible() || void 0}
+    data-disabled={resolveDisabled() || void 0}
+  >
+      {renderProps().children}
+    </button>;
+}
+
+// src/Switch.tsx
+import {
+  createContext as createContext3,
+  createMemo as createMemo3,
+  splitProps as splitProps3
+} from "solid-js";
+import {
+  createSwitch,
+  createFocusRing as createFocusRing2,
+  createHover as createHover2
+} from "@proyecto-viviana/solidaria";
+import { createToggleState } from "@proyecto-viviana/solid-stately";
+var ToggleSwitchContext = createContext3(null);
+function ToggleSwitch(props) {
+  let inputRef = null;
+  const [local, ariaProps] = splitProps3(props, [
+    "children",
+    "class",
+    "style",
+    "slot"
+  ]);
+  const state = createToggleState({
+    get isSelected() {
+      return ariaProps.isSelected;
+    },
+    get defaultSelected() {
+      return ariaProps.defaultSelected;
+    },
+    get onChange() {
+      return ariaProps.onChange;
+    },
+    get isReadOnly() {
+      return ariaProps.isReadOnly;
+    }
+  });
+  const switchAria = createSwitch(
+    () => ({
+      ...ariaProps,
+      children: typeof local.children === "function" ? true : local.children
+    }),
+    state,
+    () => inputRef
+  );
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing2();
+  const { isHovered, hoverProps } = createHover2({
+    get isDisabled() {
+      return ariaProps.isDisabled || ariaProps.isReadOnly;
+    }
+  });
+  const renderValues = createMemo3(() => ({
+    isSelected: switchAria.isSelected(),
+    isHovered: isHovered(),
+    isPressed: switchAria.isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: switchAria.isDisabled,
+    isReadOnly: switchAria.isReadOnly,
+    state
+  }));
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-ToggleSwitch"
+    },
+    renderValues
+  );
+  const domProps = createMemo3(() => {
+    const filtered = filterDOMProps(ariaProps, { global: true });
+    delete filtered.id;
+    delete filtered.onClick;
+    return filtered;
+  });
+  const cleanLabelProps = () => {
+    const { ref: _ref1, ...rest } = switchAria.labelProps;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref2, ...rest } = hoverProps;
+    return rest;
+  };
+  const cleanInputProps = () => {
+    const { ref: _ref3, ...rest } = switchAria.inputProps;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref4, ...rest } = focusProps;
+    return rest;
+  };
+  return <label
+    {...domProps()}
+    {...cleanLabelProps()}
+    {...cleanHoverProps()}
+    class={renderProps().class}
+    style={renderProps().style}
+    data-selected={switchAria.isSelected() || void 0}
+    data-pressed={switchAria.isPressed() || void 0}
+    data-hovered={isHovered() || void 0}
+    data-focused={isFocused() || void 0}
+    data-focus-visible={isFocusVisible() || void 0}
+    data-disabled={switchAria.isDisabled || void 0}
+    data-readonly={switchAria.isReadOnly || void 0}
+  >
+      <VisuallyHidden>
+        <input
+    ref={(el) => inputRef = el}
+    {...cleanInputProps()}
+    {...cleanFocusProps()}
+  />
+      </VisuallyHidden>
+      {renderProps().children}
+    </label>;
+}
+
+// src/Checkbox.tsx
+import {
+  createContext as createContext4,
+  useContext as useContext2,
+  createMemo as createMemo4,
+  splitProps as splitProps4
+} from "solid-js";
+import {
+  createCheckbox,
+  createCheckboxGroup,
+  createCheckboxGroupItem,
+  createFocusRing as createFocusRing3,
+  createHover as createHover3
+} from "@proyecto-viviana/solidaria";
+import {
+  createToggleState as createToggleState2,
+  createCheckboxGroupState
+} from "@proyecto-viviana/solid-stately";
+var CheckboxGroupContext = createContext4(null);
+var CheckboxGroupStateContext = createContext4(null);
+var CheckboxContext = createContext4(null);
+function CheckboxGroup(props) {
+  const [local, ariaProps] = splitProps4(props, [
+    "children",
+    "class",
+    "style",
+    "slot"
+  ]);
+  const state = createCheckboxGroupState({
+    get value() {
+      return ariaProps.value;
+    },
+    get defaultValue() {
+      return ariaProps.defaultValue;
+    },
+    get onChange() {
+      return ariaProps.onChange;
+    },
+    get isDisabled() {
+      return ariaProps.isDisabled;
+    },
+    get isReadOnly() {
+      return ariaProps.isReadOnly;
+    },
+    get isRequired() {
+      return ariaProps.isRequired;
+    },
+    get isInvalid() {
+      return ariaProps.isInvalid;
+    }
+  });
+  const groupAria = createCheckboxGroup(() => ariaProps, state);
+  const renderValues = createMemo4(() => ({
+    isDisabled: state.isDisabled,
+    isReadOnly: state.isReadOnly,
+    isRequired: ariaProps.isRequired ?? false,
+    isInvalid: groupAria.isInvalid,
+    state
+  }));
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-CheckboxGroup"
+    },
+    renderValues
+  );
+  const domProps = createMemo4(() => filterDOMProps(ariaProps, { global: true }));
+  const cleanGroupProps = () => {
+    const { ref: _ref, ...rest } = groupAria.groupProps;
+    return rest;
+  };
+  return <CheckboxGroupStateContext.Provider value={state}>
+      <div
+    {...domProps()}
+    {...cleanGroupProps()}
+    class={renderProps().class}
+    style={renderProps().style}
+    data-disabled={state.isDisabled || void 0}
+    data-readonly={state.isReadOnly || void 0}
+    data-required={ariaProps.isRequired || void 0}
+    data-invalid={groupAria.isInvalid || void 0}
+  >
+        {renderProps().children}
+      </div>
+    </CheckboxGroupStateContext.Provider>;
+}
+function Checkbox(props) {
+  let inputRef = null;
+  const [local, ariaProps] = splitProps4(props, [
+    "children",
+    "class",
+    "style",
+    "slot",
+    "isIndeterminate"
+  ]);
+  const groupState = useContext2(CheckboxGroupStateContext);
+  let isSelected;
+  let isPressed;
+  let isDisabled;
+  let isReadOnly;
+  let isInvalid;
+  let labelProps;
+  let inputProps;
+  if (groupState) {
+    const itemAria = createCheckboxGroupItem(
+      () => ({
+        ...ariaProps,
+        value: ariaProps.value ?? "",
+        children: typeof local.children === "function" ? true : local.children
+      }),
+      groupState,
+      () => inputRef
+    );
+    isSelected = itemAria.isSelected;
+    isPressed = itemAria.isPressed;
+    isDisabled = itemAria.isDisabled;
+    isReadOnly = itemAria.isReadOnly;
+    isInvalid = itemAria.isInvalid;
+    labelProps = itemAria.labelProps;
+    inputProps = itemAria.inputProps;
+  } else {
+    const state = createToggleState2({
+      get isSelected() {
+        return ariaProps.isSelected;
+      },
+      get defaultSelected() {
+        return ariaProps.defaultSelected;
+      },
+      get onChange() {
+        return ariaProps.onChange;
+      },
+      get isReadOnly() {
+        return ariaProps.isReadOnly;
+      }
+    });
+    const checkboxAria = createCheckbox(
+      () => ({
+        ...ariaProps,
+        isIndeterminate: local.isIndeterminate,
+        children: typeof local.children === "function" ? true : local.children
+      }),
+      state,
+      () => inputRef
+    );
+    isSelected = checkboxAria.isSelected;
+    isPressed = checkboxAria.isPressed;
+    isDisabled = checkboxAria.isDisabled;
+    isReadOnly = checkboxAria.isReadOnly;
+    isInvalid = checkboxAria.isInvalid;
+    labelProps = checkboxAria.labelProps;
+    inputProps = checkboxAria.inputProps;
+  }
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing3();
+  const { isHovered, hoverProps } = createHover3({
+    get isDisabled() {
+      return isDisabled || isReadOnly;
+    }
+  });
+  const renderValues = createMemo4(() => ({
+    isSelected: isSelected(),
+    isIndeterminate: local.isIndeterminate ?? false,
+    isHovered: isHovered(),
+    isPressed: isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    isRequired: ariaProps.isRequired ?? false
+  }));
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-Checkbox"
+    },
+    renderValues
+  );
+  const domProps = createMemo4(() => {
+    const filtered = filterDOMProps(ariaProps, { global: true });
+    delete filtered.id;
+    delete filtered.onClick;
+    return filtered;
+  });
+  const cleanLabelProps = () => {
+    const { ref: _ref1, ...rest } = labelProps;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref2, ...rest } = hoverProps;
+    return rest;
+  };
+  const cleanInputProps = () => {
+    const { ref: _ref3, ...rest } = inputProps;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref4, ...rest } = focusProps;
+    return rest;
+  };
+  return <label
+    {...domProps()}
+    {...cleanLabelProps()}
+    {...cleanHoverProps()}
+    class={renderProps().class}
+    style={renderProps().style}
+    data-selected={isSelected() || void 0}
+    data-indeterminate={local.isIndeterminate || void 0}
+    data-pressed={isPressed() || void 0}
+    data-hovered={isHovered() || void 0}
+    data-focused={isFocused() || void 0}
+    data-focus-visible={isFocusVisible() || void 0}
+    data-disabled={isDisabled || void 0}
+    data-readonly={isReadOnly || void 0}
+    data-invalid={isInvalid || void 0}
+    data-required={ariaProps.isRequired || void 0}
+  >
+      <VisuallyHidden>
+        <input
+    ref={(el) => inputRef = el}
+    {...cleanInputProps()}
+    {...cleanFocusProps()}
+  />
+      </VisuallyHidden>
+      {renderProps().children}
+    </label>;
+}
+
+// src/RadioGroup.tsx
+import {
+  createContext as createContext5,
+  useContext as useContext3,
+  createMemo as createMemo5,
+  splitProps as splitProps5
+} from "solid-js";
+import {
+  createRadio,
+  createRadioGroup,
+  createFocusRing as createFocusRing4,
+  createHover as createHover4
+} from "@proyecto-viviana/solidaria";
+import {
+  createRadioGroupState
+} from "@proyecto-viviana/solid-stately";
+var RadioGroupContext = createContext5(null);
+var RadioGroupStateContext = createContext5(null);
+var RadioContext = createContext5(null);
+function RadioGroup(props) {
+  const [local, ariaProps] = splitProps5(props, [
+    "children",
+    "class",
+    "style",
+    "slot"
+  ]);
+  const state = createRadioGroupState({
+    get value() {
+      return props.value;
+    },
+    get defaultValue() {
+      return props.defaultValue;
+    },
+    get onChange() {
+      return props.onChange;
+    },
+    get isDisabled() {
+      return props.isDisabled;
+    },
+    get isReadOnly() {
+      return props.isReadOnly;
+    },
+    get isRequired() {
+      return props.isRequired;
+    },
+    get isInvalid() {
+      return props.isInvalid;
+    }
+  });
+  const groupAria = createRadioGroup(() => ariaProps, state);
+  const renderValues = createMemo5(() => ({
+    orientation: ariaProps.orientation ?? "vertical",
+    isDisabled: state.isDisabled,
+    isReadOnly: state.isReadOnly,
+    isRequired: state.isRequired,
+    isInvalid: groupAria.isInvalid,
+    state
+  }));
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-RadioGroup"
+    },
+    renderValues
+  );
+  const domProps = createMemo5(() => filterDOMProps(ariaProps, { global: true }));
+  const cleanGroupProps = () => {
+    const { ref: _ref, ...rest } = groupAria.radioGroupProps;
+    return rest;
+  };
+  return <RadioGroupStateContext.Provider value={state}>
+      <div
+    {...domProps()}
+    {...cleanGroupProps()}
+    class={renderProps().class}
+    style={renderProps().style}
+    data-orientation={ariaProps.orientation ?? "vertical"}
+    data-disabled={state.isDisabled || void 0}
+    data-readonly={state.isReadOnly || void 0}
+    data-required={state.isRequired || void 0}
+    data-invalid={groupAria.isInvalid || void 0}
+  >
+        {renderProps().children}
+      </div>
+    </RadioGroupStateContext.Provider>;
+}
+function RadioImpl(props) {
+  let inputRef = null;
+  const { radioProps, state } = props;
+  const [local, ariaProps] = splitProps5(radioProps, [
+    "children",
+    "class",
+    "style",
+    "slot"
+  ]);
+  const radioAria = createRadio(
+    () => ({
+      ...ariaProps,
+      children: typeof local.children === "function" ? true : local.children
+    }),
+    state,
+    () => inputRef
+  );
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing4();
+  const { isHovered, hoverProps } = createHover4({
+    get isDisabled() {
+      return radioAria.isDisabled || state.isReadOnly;
+    }
+  });
+  const renderValues = createMemo5(() => ({
+    isSelected: radioAria.isSelected(),
+    isHovered: isHovered(),
+    isPressed: radioAria.isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: radioAria.isDisabled,
+    isReadOnly: state.isReadOnly,
+    isInvalid: state.isInvalid,
+    isRequired: state.isRequired
+  }));
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-Radio"
+    },
+    renderValues
+  );
+  const domProps = createMemo5(() => {
+    const filtered = filterDOMProps(ariaProps, { global: true });
+    delete filtered.id;
+    delete filtered.onClick;
+    return filtered;
+  });
+  const cleanLabelProps = () => {
+    const { ref: _ref1, ...rest } = radioAria.labelProps;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref2, ...rest } = hoverProps;
+    return rest;
+  };
+  const cleanInputProps = () => {
+    const { ref: _ref3, ...rest } = radioAria.inputProps;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref4, ...rest } = focusProps;
+    return rest;
+  };
+  return <label
+    {...domProps()}
+    {...cleanLabelProps()}
+    {...cleanHoverProps()}
+    class={renderProps().class}
+    style={renderProps().style}
+    data-selected={radioAria.isSelected() || void 0}
+    data-pressed={radioAria.isPressed() || void 0}
+    data-hovered={isHovered() || void 0}
+    data-focused={isFocused() || void 0}
+    data-focus-visible={isFocusVisible() || void 0}
+    data-disabled={radioAria.isDisabled || void 0}
+    data-readonly={state.isReadOnly || void 0}
+    data-invalid={state.isInvalid || void 0}
+    data-required={state.isRequired || void 0}
+  >
+      <VisuallyHidden>
+        <input
+    ref={(el) => inputRef = el}
+    {...cleanInputProps()}
+    {...cleanFocusProps()}
+  />
+      </VisuallyHidden>
+      {renderProps().children}
+    </label>;
+}
+function Radio(props) {
+  return (() => {
+    const state = useContext3(RadioGroupStateContext);
+    if (!state) {
+      throw new Error("Radio must be used within a RadioGroup");
+    }
+    return <RadioImpl radioProps={props} state={state} />;
+  });
+}
+
+// src/TextField.tsx
+import {
+  createContext as createContext6,
+  useContext as useContext4,
+  createMemo as createMemo6,
+  splitProps as splitProps6
+} from "solid-js";
+import {
+  createTextField,
+  createFocusRing as createFocusRing5,
+  createHover as createHover5
+} from "@proyecto-viviana/solidaria";
+import { createTextFieldState } from "@proyecto-viviana/solid-stately";
+var TextFieldContext = createContext6(null);
+function Label(props) {
+  const context = useContext4(TextFieldContext);
+  const mergedProps = () => {
+    if (context) {
+      const { ref: _ref, ...contextLabelProps } = context.labelProps;
+      return { ...contextLabelProps, ...props };
+    }
+    return props;
+  };
+  return <label {...mergedProps()}>{props.children}</label>;
+}
+function Input(props) {
+  const context = useContext4(TextFieldContext);
+  const mergedProps = () => {
+    if (context) {
+      const { ref: _ref, ...contextInputProps } = context.inputProps;
+      return { ...contextInputProps, ...props };
+    }
+    return props;
+  };
+  return <input {...mergedProps()} />;
+}
+function TextArea(props) {
+  const context = useContext4(TextFieldContext);
+  const mergedProps = () => {
+    if (context) {
+      const { ref: _ref, type: _type, ...contextInputProps } = context.inputProps;
+      return { ...contextInputProps, ...props };
+    }
+    return props;
+  };
+  return <textarea {...mergedProps()} />;
+}
+function TextField(props) {
+  const [local, ariaProps] = splitProps6(props, [
+    "children",
+    "class",
+    "style",
+    "slot"
+  ]);
+  const state = createTextFieldState({
+    get value() {
+      return ariaProps.value;
+    },
+    get defaultValue() {
+      return ariaProps.defaultValue;
+    },
+    get onChange() {
+      return ariaProps.onChange;
+    }
+  });
+  const textFieldAria = createTextField(() => ({
+    ...ariaProps,
+    value: state.value(),
+    onChange: state.setValue
+  }));
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing5();
+  const { isHovered, hoverProps } = createHover5({
+    get isDisabled() {
+      return ariaProps.isDisabled;
+    }
+  });
+  const renderValues = createMemo6(() => ({
+    isDisabled: ariaProps.isDisabled || false,
+    isInvalid: textFieldAria.isInvalid,
+    isReadOnly: ariaProps.isReadOnly || false,
+    isRequired: ariaProps.isRequired || false,
+    isHovered: isHovered(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible()
+  }));
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-TextField"
+    },
+    renderValues
+  );
+  const domProps = createMemo6(() => {
+    const filtered = filterDOMProps(ariaProps, { global: true });
+    delete filtered.id;
+    return filtered;
+  });
+  const cleanHoverProps = () => {
+    const { ref: _ref, ...rest } = hoverProps;
+    return rest;
+  };
+  const contextValue = {
+    labelProps: textFieldAria.labelProps,
+    inputProps: { ...textFieldAria.inputProps, ...focusProps },
+    descriptionProps: textFieldAria.descriptionProps,
+    errorMessageProps: textFieldAria.errorMessageProps,
+    isInvalid: textFieldAria.isInvalid
+  };
+  return <TextFieldContext.Provider value={contextValue}>
+      <div
+    {...domProps()}
+    {...cleanHoverProps()}
+    class={renderProps().class}
+    style={renderProps().style}
+    data-disabled={ariaProps.isDisabled || void 0}
+    data-invalid={textFieldAria.isInvalid || void 0}
+    data-readonly={ariaProps.isReadOnly || void 0}
+    data-required={ariaProps.isRequired || void 0}
+    data-hovered={isHovered() || void 0}
+    data-focused={isFocused() || void 0}
+    data-focus-visible={isFocusVisible() || void 0}
+  >
+        {renderProps().children}
+      </div>
+    </TextFieldContext.Provider>;
+}
+
+// src/Link.tsx
+import {
+  createContext as createContext7,
+  createMemo as createMemo7,
+  splitProps as splitProps7
+} from "solid-js";
+import { Dynamic as Dynamic2 } from "solid-js/web";
+import {
+  createLink,
+  createFocusRing as createFocusRing6,
+  createHover as createHover6
+} from "@proyecto-viviana/solidaria";
+var LinkContext = createContext7(null);
+function Link(props) {
+  const [local, ariaProps] = splitProps7(props, [
+    "children",
+    "class",
+    "style",
+    "slot",
+    "onHoverStart",
+    "onHoverEnd",
+    "onHoverChange"
+  ]);
+  const elementType = () => {
+    if (ariaProps.href && !ariaProps.isDisabled) {
+      return "a";
+    }
+    return "span";
+  };
+  const linkAria = createLink({
+    get elementType() {
+      return elementType();
+    },
+    get isDisabled() {
+      return ariaProps.isDisabled;
+    },
+    get href() {
+      return ariaProps.href;
+    },
+    get target() {
+      return ariaProps.target;
+    },
+    get rel() {
+      return ariaProps.rel;
+    },
+    get onPress() {
+      return ariaProps.onPress;
+    },
+    get onPressStart() {
+      return ariaProps.onPressStart;
+    },
+    get onPressEnd() {
+      return ariaProps.onPressEnd;
+    },
+    get onClick() {
+      return ariaProps.onClick;
+    },
+    get onFocus() {
+      return ariaProps.onFocus;
+    },
+    get onBlur() {
+      return ariaProps.onBlur;
+    },
+    get onFocusChange() {
+      return ariaProps.onFocusChange;
+    },
+    get onKeyDown() {
+      return ariaProps.onKeyDown;
+    },
+    get onKeyUp() {
+      return ariaProps.onKeyUp;
+    },
+    get autoFocus() {
+      return ariaProps.autoFocus;
+    },
+    get "aria-current"() {
+      return ariaProps["aria-current"];
+    },
+    get "aria-label"() {
+      return ariaProps["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return ariaProps["aria-labelledby"];
+    },
+    get "aria-describedby"() {
+      return ariaProps["aria-describedby"];
+    }
+  });
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing6();
+  const { isHovered, hoverProps } = createHover6({
+    get isDisabled() {
+      return ariaProps.isDisabled ?? false;
+    },
+    get onHoverStart() {
+      return local.onHoverStart;
+    },
+    get onHoverEnd() {
+      return local.onHoverEnd;
+    },
+    get onHoverChange() {
+      return local.onHoverChange;
+    }
+  });
+  const renderValues = createMemo7(() => ({
+    isCurrent: !!ariaProps["aria-current"],
+    isHovered: isHovered(),
+    isPressed: linkAria.isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: ariaProps.isDisabled ?? false
+  }));
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-Link"
+    },
+    renderValues
+  );
+  const domProps = createMemo7(() => filterDOMProps(ariaProps, { global: true }));
+  const cleanLinkProps = () => {
+    const { ref: _ref1, ...rest } = linkAria.linkProps;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref2, ...rest } = hoverProps;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref3, ...rest } = focusProps;
+    return rest;
+  };
+  return <Dynamic2
+    component={elementType()}
+    {...domProps()}
+    {...cleanLinkProps()}
+    {...cleanHoverProps()}
+    {...cleanFocusProps()}
+    class={renderProps().class}
+    style={renderProps().style}
+    data-hovered={isHovered() || void 0}
+    data-pressed={linkAria.isPressed() || void 0}
+    data-focused={isFocused() || void 0}
+    data-focus-visible={isFocusVisible() || void 0}
+    data-current={!!ariaProps["aria-current"] || void 0}
+    data-disabled={ariaProps.isDisabled || void 0}
+  >
+      {renderProps().children}
+    </Dynamic2>;
+}
+
+// src/ProgressBar.tsx
+import {
+  createContext as createContext8,
+  createMemo as createMemo8,
+  splitProps as splitProps8
+} from "solid-js";
+import {
+  createProgressBar
+} from "@proyecto-viviana/solidaria";
+var ProgressBarContext = createContext8(null);
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function ProgressBar(props) {
+  const [local, ariaProps] = splitProps8(props, [
+    "children",
+    "class",
+    "style",
+    "slot"
+  ]);
+  const value = () => ariaProps.value ?? 0;
+  const minValue = () => ariaProps.minValue ?? 0;
+  const maxValue = () => ariaProps.maxValue ?? 100;
+  const isIndeterminate = () => ariaProps.isIndeterminate ?? false;
+  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"];
+    }
+  });
+  const percentage = createMemo8(() => {
+    if (isIndeterminate()) {
+      return void 0;
+    }
+    const clampedValue = clamp(value(), minValue(), maxValue());
+    return (clampedValue - minValue()) / (maxValue() - minValue()) * 100;
+  });
+  const valueText = createMemo8(() => {
+    return progressAria.progressBarProps["aria-valuetext"];
+  });
+  const renderValues = createMemo8(() => ({
+    percentage: percentage(),
+    valueText: valueText(),
+    isIndeterminate: isIndeterminate()
+  }));
+  const renderProps = useRenderProps(
+    {
+      children: local.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-ProgressBar"
+    },
+    renderValues
+  );
+  const domProps = createMemo8(() => filterDOMProps(ariaProps, { global: true }));
+  return <div
+    {...domProps()}
+    {...progressAria.progressBarProps}
+    class={renderProps().class}
+    style={renderProps().style}
+    slot={local.slot}
+  >
+      {renderProps().children}
+    </div>;
+}
+
+// src/Separator.tsx
+import {
+  createContext as createContext9,
+  createMemo as createMemo9,
+  splitProps as splitProps9
+} from "solid-js";
+import { Dynamic as Dynamic3 } from "solid-js/web";
+import {
+  createSeparator
+} from "@proyecto-viviana/solidaria";
+var SeparatorContext = createContext9(null);
+function Separator(props) {
+  const [local, ariaProps] = splitProps9(props, [
+    "class",
+    "style",
+    "slot"
+  ]);
+  const elementType = createMemo9(() => {
+    let element = ariaProps.elementType || "hr";
+    if (element === "hr" && ariaProps.orientation === "vertical") {
+      element = "div";
+    }
+    return element;
+  });
+  const separatorAria = createSeparator({
+    get orientation() {
+      return ariaProps.orientation;
+    },
+    get elementType() {
+      return elementType();
+    },
+    get "aria-label"() {
+      return ariaProps["aria-label"];
+    },
+    get "aria-labelledby"() {
+      return ariaProps["aria-labelledby"];
+    },
+    get id() {
+      return ariaProps.id;
+    }
+  });
+  const renderValues = createMemo9(() => ({
+    orientation: ariaProps.orientation ?? "horizontal"
+  }));
+  const resolvedClass = createMemo9(() => {
+    const cls = local.class;
+    if (typeof cls === "function") {
+      return cls(renderValues());
+    }
+    return cls ?? "solidaria-Separator";
+  });
+  const resolvedStyle = createMemo9(() => {
+    const style = local.style;
+    if (typeof style === "function") {
+      return style(renderValues());
+    }
+    return style;
+  });
+  const domProps = createMemo9(() => filterDOMProps(ariaProps, { global: true }));
+  return <Dynamic3
+    component={elementType()}
+    {...domProps()}
+    {...separatorAria.separatorProps}
+    class={resolvedClass()}
+    style={resolvedStyle()}
+    slot={local.slot}
+  />;
+}
+export {
+  Button,
+  ButtonContext,
+  Checkbox,
+  CheckboxContext,
+  CheckboxGroup,
+  CheckboxGroupContext,
+  CheckboxGroupStateContext,
+  Input,
+  Label,
+  Link,
+  LinkContext,
+  ProgressBar,
+  ProgressBarContext,
+  Radio,
+  RadioContext,
+  RadioGroup,
+  RadioGroupContext,
+  RadioGroupStateContext,
+  Separator,
+  SeparatorContext,
+  TextArea,
+  TextField,
+  TextFieldContext,
+  ToggleSwitch,
+  ToggleSwitchContext,
+  VisuallyHidden,
+  createDataAttributes,
+  dataAttr,
+  filterDOMProps,
+  removeDataAttributes,
+  useRenderProps
+};