@page-speed/forms 0.1.1 → 0.1.3

package/README.md

@@ -1,4 +1,6 @@
-# OpenSite Page Speed Forms
+<img width="1200" height="330" alt="page-speed-forms-npm-module" src="https://github.com/user-attachments/assets/4dd21311-9de6-4c42-be75-bbc8fe5a0192" />
+
+# @page-speed/forms
 
 Type-safe form state management and validation for React applications.
 
@@ -6,7 +8,7 @@ Type-safe form state management and validation for React applications.
 
 OpenSite Page Speed Forms is a high-performance library designed to streamline form state management, validation, and submission handling in React applications. This library is part of OpenSite AI's open-source ecosystem, built for performance and open collaboration. By emphasizing type safety and modularity, it aligns with OpenSite's goal to create scalable, open, and developer-friendly performance tooling.
 
-Learn more at [opensite.ai](https://opensite.ai).
+Learn more at [OpenSite.ai Developers](https://opensite.ai/developers).
 
 ## Key Features
 
@@ -91,4 +93,4 @@ Licensed under the BSD 3-Clause License. See the [LICENSE](./LICENSE) file for d
 
 - [Domain Extractor](https://github.com/opensite-ai/domain_extractor)
 - [Page Speed Hooks](https://github.com/opensite-ai/page-speed-hooks)
-- Visit [opensite.ai](https://opensite.ai) for more tools and information.
+- Visit [opensite.ai](https://opensite.ai) for more tools and information.

package/dist/inputs.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React5 = require('react');
+var React6 = require('react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -20,7 +20,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 
 function TextInput({
   name,
@@ -44,7 +44,7 @@ function TextInput({
   const baseClassName = "text-input";
   const errorClassName = error ? "text-input--error" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  return /* @__PURE__ */ React5__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     "input",
     {
       type,
@@ -90,7 +90,7 @@ function TextArea({
   const baseClassName = "textarea";
   const errorClassName = error ? "textarea--error" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  return /* @__PURE__ */ React5__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     "textarea",
     {
       name,
@@ -127,8 +127,8 @@ function Checkbox({
   label,
   ...props
 }) {
-  const inputRef = React5__namespace.useRef(null);
-  React5__namespace.useEffect(() => {
+  const inputRef = React6__namespace.useRef(null);
+  React6__namespace.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
@@ -142,7 +142,7 @@ function Checkbox({
   const baseClassName = "checkbox";
   const errorClassName = error ? "checkbox--error" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  const checkbox = /* @__PURE__ */ React5__namespace.createElement(
+  const checkbox = /* @__PURE__ */ React6__namespace.createElement(
     "input",
     {
       ref: inputRef,
@@ -161,11 +161,134 @@ function Checkbox({
     }
   );
   if (label) {
-    return /* @__PURE__ */ React5__namespace.createElement("label", { className: "checkbox-label" }, checkbox, /* @__PURE__ */ React5__namespace.createElement("span", { className: "checkbox-label-text" }, label));
+    return /* @__PURE__ */ React6__namespace.createElement("label", { className: "checkbox-label" }, checkbox, /* @__PURE__ */ React6__namespace.createElement("span", { className: "checkbox-label-text" }, label));
   }
   return checkbox;
 }
 Checkbox.displayName = "Checkbox";
+function CheckboxGroup({
+  name,
+  value = [],
+  onChange,
+  onBlur,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  layout = "stacked",
+  label,
+  description,
+  options,
+  showSelectAll = false,
+  selectAllLabel = "Select all",
+  minSelections,
+  maxSelections,
+  renderOption,
+  gridColumns = 2,
+  ...props
+}) {
+  const enabledOptions = options.filter((opt) => !opt.disabled);
+  const enabledValues = enabledOptions.map((opt) => opt.value);
+  const selectedEnabledCount = value.filter(
+    (v) => enabledValues.includes(v)
+  ).length;
+  const allSelected = selectedEnabledCount === enabledOptions.length;
+  const someSelected = selectedEnabledCount > 0 && !allSelected;
+  const handleChange = (optionValue, checked) => {
+    const newValues = checked ? [...value, optionValue] : value.filter((v) => v !== optionValue);
+    if (maxSelections && checked && newValues.length > maxSelections) {
+      return;
+    }
+    onChange(newValues);
+  };
+  const handleSelectAll = (checked) => {
+    if (checked) {
+      const allValues = enabledOptions.map((opt) => opt.value);
+      onChange(allValues);
+    } else {
+      onChange([]);
+    }
+  };
+  const handleBlur = () => {
+    onBlur?.();
+  };
+  const baseClassName = "checkbox-group";
+  const errorClassName = error ? "checkbox-group--error" : "";
+  const layoutClassName = `checkbox-group--${layout}`;
+  const combinedClassName = `${baseClassName} ${errorClassName} ${layoutClassName} ${className}`.trim();
+  const maxReached = Boolean(maxSelections && value.length >= maxSelections);
+  return /* @__PURE__ */ React6__namespace.createElement(
+    "div",
+    {
+      className: combinedClassName,
+      role: "group",
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      "aria-label": typeof label === "string" ? label : props["aria-label"],
+      style: layout === "grid" ? {
+        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`
+      } : void 0
+    },
+    label && /* @__PURE__ */ React6__namespace.createElement("div", { className: "checkbox-group-label" }, label),
+    description && /* @__PURE__ */ React6__namespace.createElement("div", { className: "checkbox-group-description" }, description),
+    /* @__PURE__ */ React6__namespace.createElement("div", { className: "checkbox-options" }, showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React6__namespace.createElement("label", { className: "checkbox-option checkbox-option--select-all" }, /* @__PURE__ */ React6__namespace.createElement(
+      "input",
+      {
+        type: "checkbox",
+        checked: allSelected,
+        ref: (input) => {
+          if (input) {
+            input.indeterminate = someSelected;
+          }
+        },
+        onChange: (e) => handleSelectAll(e.target.checked),
+        onBlur: handleBlur,
+        disabled,
+        className: "checkbox-input",
+        "aria-label": selectAllLabel
+      }
+    ), /* @__PURE__ */ React6__namespace.createElement("div", { className: "checkbox-content" }, /* @__PURE__ */ React6__namespace.createElement("span", { className: "checkbox-label" }, selectAllLabel))), options.map((option) => {
+      const isChecked = value.includes(option.value);
+      const isDisabled = disabled || option.disabled || maxReached && !isChecked;
+      const checkboxId = `${name}-${option.value}`;
+      return /* @__PURE__ */ React6__namespace.createElement(
+        "label",
+        {
+          key: option.value,
+          className: `checkbox-option ${isDisabled ? "checkbox-option--disabled" : ""}`,
+          htmlFor: checkboxId
+        },
+        /* @__PURE__ */ React6__namespace.createElement(
+          "input",
+          {
+            type: "checkbox",
+            id: checkboxId,
+            name,
+            value: option.value,
+            checked: isChecked,
+            onChange: (e) => handleChange(option.value, e.target.checked),
+            onBlur: handleBlur,
+            disabled: isDisabled,
+            required: required && minSelections ? value.length < minSelections : false,
+            className: "checkbox-input",
+            "aria-describedby": option.description ? `${checkboxId}-description` : props["aria-describedby"]
+          }
+        ),
+        /* @__PURE__ */ React6__namespace.createElement("div", { className: "checkbox-content" }, renderOption ? renderOption(option) : /* @__PURE__ */ React6__namespace.createElement(React6__namespace.Fragment, null, /* @__PURE__ */ React6__namespace.createElement("span", { className: "checkbox-label" }, option.label), option.description && /* @__PURE__ */ React6__namespace.createElement(
+          "span",
+          {
+            className: "checkbox-description",
+            id: `${checkboxId}-description`
+          },
+          option.description
+        )))
+      );
+    })),
+    (minSelections || maxSelections) && /* @__PURE__ */ React6__namespace.createElement("div", { className: "checkbox-group-feedback", "aria-live": "polite" }, minSelections && value.length < minSelections && /* @__PURE__ */ React6__namespace.createElement("span", { className: "checkbox-group-feedback-min" }, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""), maxSelections && /* @__PURE__ */ React6__namespace.createElement("span", { className: "checkbox-group-feedback-max" }, value.length, "/", maxSelections, " selected"))
+  );
+}
+CheckboxGroup.displayName = "CheckboxGroup";
 function Radio({
   name,
   value,
@@ -215,7 +338,7 @@ function Radio({
   const errorClassName = error ? "radio-group--error" : "";
   const layoutClassName = `radio-group--${layout}`;
   const combinedClassName = `${baseClassName} ${errorClassName} ${layoutClassName} ${className}`.trim();
-  return /* @__PURE__ */ React5__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     "div",
     {
       className: combinedClassName,
@@ -225,19 +348,19 @@ function Radio({
       "aria-required": required || props["aria-required"],
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    label && /* @__PURE__ */ React5__namespace.createElement("div", { className: "radio-group-label" }, label),
-    /* @__PURE__ */ React5__namespace.createElement("div", { className: "radio-options" }, options.map((option, index) => {
+    label && /* @__PURE__ */ React6__namespace.createElement("div", { className: "radio-group-label" }, label),
+    /* @__PURE__ */ React6__namespace.createElement("div", { className: "radio-options" }, options.map((option, index) => {
       const isChecked = value === option.value;
       const isDisabled = disabled || option.disabled;
       const radioId = `${name}-${option.value}`;
-      return /* @__PURE__ */ React5__namespace.createElement(
+      return /* @__PURE__ */ React6__namespace.createElement(
         "label",
         {
           key: option.value,
           className: `radio-option ${isDisabled ? "radio-option--disabled" : ""}`,
           htmlFor: radioId
         },
-        /* @__PURE__ */ React5__namespace.createElement(
+        /* @__PURE__ */ React6__namespace.createElement(
           "input",
           {
             type: "radio",
@@ -254,7 +377,7 @@ function Radio({
             "aria-describedby": option.description ? `${radioId}-description` : props["aria-describedby"]
           }
         ),
-        /* @__PURE__ */ React5__namespace.createElement("div", { className: "radio-content" }, /* @__PURE__ */ React5__namespace.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React5__namespace.createElement(
+        /* @__PURE__ */ React6__namespace.createElement("div", { className: "radio-content" }, /* @__PURE__ */ React6__namespace.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React6__namespace.createElement(
           "span",
           {
             className: "radio-description",
@@ -286,19 +409,19 @@ function Select({
   renderOption,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React5__namespace.useState(false);
-  const [searchQuery, setSearchQuery] = React5__namespace.useState("");
-  const [focusedIndex, setFocusedIndex] = React5__namespace.useState(-1);
-  const selectRef = React5__namespace.useRef(null);
-  const searchInputRef = React5__namespace.useRef(null);
+  const [isOpen, setIsOpen] = React6__namespace.useState(false);
+  const [searchQuery, setSearchQuery] = React6__namespace.useState("");
+  const [focusedIndex, setFocusedIndex] = React6__namespace.useState(-1);
+  const selectRef = React6__namespace.useRef(null);
+  const searchInputRef = React6__namespace.useRef(null);
   const dropdownId = `${name}-dropdown`;
-  const allOptions = React5__namespace.useMemo(() => {
+  const allOptions = React6__namespace.useMemo(() => {
     if (optionGroups.length > 0) {
       return optionGroups.flatMap((group) => group.options);
     }
     return options;
   }, [options, optionGroups]);
-  const filteredOptions = React5__namespace.useMemo(() => {
+  const filteredOptions = React6__namespace.useMemo(() => {
     if (!searchQuery.trim()) {
       return allOptions;
     }
@@ -308,7 +431,7 @@ function Select({
       return label.toLowerCase().includes(query);
     });
   }, [allOptions, searchQuery]);
-  const selectedOption = React5__namespace.useMemo(() => {
+  const selectedOption = React6__namespace.useMemo(() => {
     return allOptions.find((opt) => opt.value === value);
   }, [allOptions, value]);
   const handleSelect = (optionValue) => {
@@ -412,7 +535,7 @@ function Select({
   const handleBlur = () => {
     onBlur?.();
   };
-  React5__namespace.useEffect(() => {
+  React6__namespace.useEffect(() => {
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -433,7 +556,7 @@ function Select({
   const disabledClassName = disabled ? "select--disabled" : "";
   const openClassName = isOpen ? "select--open" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${openClassName} ${className}`.trim();
-  return /* @__PURE__ */ React5__namespace.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     "div",
     {
       ref: selectRef,
@@ -441,7 +564,7 @@ function Select({
       onKeyDown: handleKeyDown,
       onBlur: handleBlur
     },
-    /* @__PURE__ */ React5__namespace.createElement(
+    /* @__PURE__ */ React6__namespace.createElement(
       "select",
       {
         name,
@@ -454,10 +577,10 @@ function Select({
         tabIndex: -1,
         style: { display: "none" }
       },
-      /* @__PURE__ */ React5__namespace.createElement("option", { value: "" }, "Select..."),
-      allOptions.map((option) => /* @__PURE__ */ React5__namespace.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
+      /* @__PURE__ */ React6__namespace.createElement("option", { value: "" }, "Select..."),
+      allOptions.map((option) => /* @__PURE__ */ React6__namespace.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
     ),
-    /* @__PURE__ */ React5__namespace.createElement(
+    /* @__PURE__ */ React6__namespace.createElement(
       "div",
       {
         className: "select-trigger",
@@ -471,8 +594,8 @@ function Select({
         "aria-disabled": disabled,
         tabIndex: disabled ? -1 : 0
       },
-      /* @__PURE__ */ React5__namespace.createElement("span", { className: "select-value" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React5__namespace.createElement("span", { className: "select-placeholder" }, placeholder)),
-      /* @__PURE__ */ React5__namespace.createElement("div", { className: "select-icons" }, loading && /* @__PURE__ */ React5__namespace.createElement("span", { className: "select-loading" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React5__namespace.createElement(
+      /* @__PURE__ */ React6__namespace.createElement("span", { className: "select-value" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React6__namespace.createElement("span", { className: "select-placeholder" }, placeholder)),
+      /* @__PURE__ */ React6__namespace.createElement("div", { className: "select-icons" }, loading && /* @__PURE__ */ React6__namespace.createElement("span", { className: "select-loading" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React6__namespace.createElement(
         "button",
         {
           type: "button",
@@ -482,9 +605,9 @@ function Select({
           tabIndex: -1
         },
         "\u2715"
-      ), /* @__PURE__ */ React5__namespace.createElement("span", { className: "select-arrow", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+      ), /* @__PURE__ */ React6__namespace.createElement("span", { className: "select-arrow", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
     ),
-    isOpen && /* @__PURE__ */ React5__namespace.createElement("div", { id: dropdownId, className: "select-dropdown", role: "listbox" }, searchable && /* @__PURE__ */ React5__namespace.createElement("div", { className: "select-search" }, /* @__PURE__ */ React5__namespace.createElement(
+    isOpen && /* @__PURE__ */ React6__namespace.createElement("div", { id: dropdownId, className: "select-dropdown", role: "listbox" }, searchable && /* @__PURE__ */ React6__namespace.createElement("div", { className: "select-search" }, /* @__PURE__ */ React6__namespace.createElement(
       "input",
       {
         ref: searchInputRef,
@@ -496,19 +619,19 @@ function Select({
         onClick: (e) => e.stopPropagation(),
         "aria-label": "Search options"
       }
-    )), /* @__PURE__ */ React5__namespace.createElement("div", { className: "select-options" }, filteredOptions.length === 0 ? /* @__PURE__ */ React5__namespace.createElement("div", { className: "select-no-options" }, "No options found") : optionGroups.length > 0 ? (
+    )), /* @__PURE__ */ React6__namespace.createElement("div", { className: "select-options" }, filteredOptions.length === 0 ? /* @__PURE__ */ React6__namespace.createElement("div", { className: "select-no-options" }, "No options found") : optionGroups.length > 0 ? (
       // Render grouped options
       optionGroups.map((group, groupIndex) => {
         const groupOptions = group.options.filter(
           (opt) => filteredOptions.includes(opt)
         );
         if (groupOptions.length === 0) return null;
-        return /* @__PURE__ */ React5__namespace.createElement("div", { key: groupIndex, className: "select-optgroup" }, /* @__PURE__ */ React5__namespace.createElement("div", { className: "select-optgroup-label" }, group.label), groupOptions.map((option) => {
+        return /* @__PURE__ */ React6__namespace.createElement("div", { key: groupIndex, className: "select-optgroup" }, /* @__PURE__ */ React6__namespace.createElement("div", { className: "select-optgroup-label" }, group.label), groupOptions.map((option) => {
           const globalIndex = filteredOptions.indexOf(option);
           const isSelected = value === option.value;
           const isFocused = globalIndex === focusedIndex;
           const isDisabled = option.disabled;
-          return /* @__PURE__ */ React5__namespace.createElement(
+          return /* @__PURE__ */ React6__namespace.createElement(
             "div",
             {
               key: option.value,
@@ -528,7 +651,7 @@ function Select({
         const isSelected = value === option.value;
         const isFocused = index === focusedIndex;
         const isDisabled = option.disabled;
-        return /* @__PURE__ */ React5__namespace.createElement(
+        return /* @__PURE__ */ React6__namespace.createElement(
           "div",
           {
             key: option.value,
@@ -547,6 +670,7 @@ function Select({
 Select.displayName = "Select";
 
 exports.Checkbox = Checkbox;
+exports.CheckboxGroup = CheckboxGroup;
 exports.Radio = Radio;
 exports.Select = Select;
 exports.TextArea = TextArea;