@page-speed/forms 0.1.0 → 0.1.2

package/dist/inputs.js

@@ -1,4 +1,4 @@
-import * as React5 from 'react';
+import * as React6 from 'react';
 
 function TextInput({
   name,
@@ -22,7 +22,7 @@ function TextInput({
   const baseClassName = "text-input";
   const errorClassName = error ? "text-input--error" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     "input",
     {
       type,
@@ -68,7 +68,7 @@ function TextArea({
   const baseClassName = "textarea";
   const errorClassName = error ? "textarea--error" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     "textarea",
     {
       name,
@@ -105,8 +105,8 @@ function Checkbox({
   label,
   ...props
 }) {
-  const inputRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const inputRef = React6.useRef(null);
+  React6.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
@@ -120,7 +120,7 @@ function Checkbox({
   const baseClassName = "checkbox";
   const errorClassName = error ? "checkbox--error" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${className}`.trim();
-  const checkbox = /* @__PURE__ */ React5.createElement(
+  const checkbox = /* @__PURE__ */ React6.createElement(
     "input",
     {
       ref: inputRef,
@@ -139,11 +139,134 @@ function Checkbox({
     }
   );
   if (label) {
-    return /* @__PURE__ */ React5.createElement("label", { className: "checkbox-label" }, checkbox, /* @__PURE__ */ React5.createElement("span", { className: "checkbox-label-text" }, label));
+    return /* @__PURE__ */ React6.createElement("label", { className: "checkbox-label" }, checkbox, /* @__PURE__ */ React6.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.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.createElement("div", { className: "checkbox-group-label" }, label),
+    description && /* @__PURE__ */ React6.createElement("div", { className: "checkbox-group-description" }, description),
+    /* @__PURE__ */ React6.createElement("div", { className: "checkbox-options" }, showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React6.createElement("label", { className: "checkbox-option checkbox-option--select-all" }, /* @__PURE__ */ React6.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.createElement("div", { className: "checkbox-content" }, /* @__PURE__ */ React6.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.createElement(
+        "label",
+        {
+          key: option.value,
+          className: `checkbox-option ${isDisabled ? "checkbox-option--disabled" : ""}`,
+          htmlFor: checkboxId
+        },
+        /* @__PURE__ */ React6.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.createElement("div", { className: "checkbox-content" }, renderOption ? renderOption(option) : /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("span", { className: "checkbox-label" }, option.label), option.description && /* @__PURE__ */ React6.createElement(
+          "span",
+          {
+            className: "checkbox-description",
+            id: `${checkboxId}-description`
+          },
+          option.description
+        )))
+      );
+    })),
+    (minSelections || maxSelections) && /* @__PURE__ */ React6.createElement("div", { className: "checkbox-group-feedback", "aria-live": "polite" }, minSelections && value.length < minSelections && /* @__PURE__ */ React6.createElement("span", { className: "checkbox-group-feedback-min" }, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""), maxSelections && /* @__PURE__ */ React6.createElement("span", { className: "checkbox-group-feedback-max" }, value.length, "/", maxSelections, " selected"))
+  );
+}
+CheckboxGroup.displayName = "CheckboxGroup";
 function Radio({
   name,
   value,
@@ -193,7 +316,7 @@ function Radio({
   const errorClassName = error ? "radio-group--error" : "";
   const layoutClassName = `radio-group--${layout}`;
   const combinedClassName = `${baseClassName} ${errorClassName} ${layoutClassName} ${className}`.trim();
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     "div",
     {
       className: combinedClassName,
@@ -203,19 +326,19 @@ function Radio({
       "aria-required": required || props["aria-required"],
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    label && /* @__PURE__ */ React5.createElement("div", { className: "radio-group-label" }, label),
-    /* @__PURE__ */ React5.createElement("div", { className: "radio-options" }, options.map((option, index) => {
+    label && /* @__PURE__ */ React6.createElement("div", { className: "radio-group-label" }, label),
+    /* @__PURE__ */ React6.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.createElement(
+      return /* @__PURE__ */ React6.createElement(
         "label",
         {
           key: option.value,
           className: `radio-option ${isDisabled ? "radio-option--disabled" : ""}`,
           htmlFor: radioId
         },
-        /* @__PURE__ */ React5.createElement(
+        /* @__PURE__ */ React6.createElement(
           "input",
           {
             type: "radio",
@@ -232,7 +355,7 @@ function Radio({
             "aria-describedby": option.description ? `${radioId}-description` : props["aria-describedby"]
           }
         ),
-        /* @__PURE__ */ React5.createElement("div", { className: "radio-content" }, /* @__PURE__ */ React5.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React5.createElement(
+        /* @__PURE__ */ React6.createElement("div", { className: "radio-content" }, /* @__PURE__ */ React6.createElement("span", { className: "radio-label" }, option.label), option.description && /* @__PURE__ */ React6.createElement(
           "span",
           {
             className: "radio-description",
@@ -264,19 +387,19 @@ function Select({
   renderOption,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const [searchQuery, setSearchQuery] = React5.useState("");
-  const [focusedIndex, setFocusedIndex] = React5.useState(-1);
-  const selectRef = React5.useRef(null);
-  const searchInputRef = React5.useRef(null);
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const [searchQuery, setSearchQuery] = React6.useState("");
+  const [focusedIndex, setFocusedIndex] = React6.useState(-1);
+  const selectRef = React6.useRef(null);
+  const searchInputRef = React6.useRef(null);
   const dropdownId = `${name}-dropdown`;
-  const allOptions = React5.useMemo(() => {
+  const allOptions = React6.useMemo(() => {
     if (optionGroups.length > 0) {
       return optionGroups.flatMap((group) => group.options);
     }
     return options;
   }, [options, optionGroups]);
-  const filteredOptions = React5.useMemo(() => {
+  const filteredOptions = React6.useMemo(() => {
     if (!searchQuery.trim()) {
       return allOptions;
     }
@@ -286,7 +409,7 @@ function Select({
       return label.toLowerCase().includes(query);
     });
   }, [allOptions, searchQuery]);
-  const selectedOption = React5.useMemo(() => {
+  const selectedOption = React6.useMemo(() => {
     return allOptions.find((opt) => opt.value === value);
   }, [allOptions, value]);
   const handleSelect = (optionValue) => {
@@ -390,7 +513,7 @@ function Select({
   const handleBlur = () => {
     onBlur?.();
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -411,7 +534,7 @@ function Select({
   const disabledClassName = disabled ? "select--disabled" : "";
   const openClassName = isOpen ? "select--open" : "";
   const combinedClassName = `${baseClassName} ${errorClassName} ${disabledClassName} ${openClassName} ${className}`.trim();
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     "div",
     {
       ref: selectRef,
@@ -419,7 +542,7 @@ function Select({
       onKeyDown: handleKeyDown,
       onBlur: handleBlur
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       "select",
       {
         name,
@@ -432,10 +555,10 @@ function Select({
         tabIndex: -1,
         style: { display: "none" }
       },
-      /* @__PURE__ */ React5.createElement("option", { value: "" }, "Select..."),
-      allOptions.map((option) => /* @__PURE__ */ React5.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
+      /* @__PURE__ */ React6.createElement("option", { value: "" }, "Select..."),
+      allOptions.map((option) => /* @__PURE__ */ React6.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
     ),
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       "div",
       {
         className: "select-trigger",
@@ -449,8 +572,8 @@ function Select({
         "aria-disabled": disabled,
         tabIndex: disabled ? -1 : 0
       },
-      /* @__PURE__ */ React5.createElement("span", { className: "select-value" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React5.createElement("span", { className: "select-placeholder" }, placeholder)),
-      /* @__PURE__ */ React5.createElement("div", { className: "select-icons" }, loading && /* @__PURE__ */ React5.createElement("span", { className: "select-loading" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React5.createElement(
+      /* @__PURE__ */ React6.createElement("span", { className: "select-value" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React6.createElement("span", { className: "select-placeholder" }, placeholder)),
+      /* @__PURE__ */ React6.createElement("div", { className: "select-icons" }, loading && /* @__PURE__ */ React6.createElement("span", { className: "select-loading" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React6.createElement(
         "button",
         {
           type: "button",
@@ -460,9 +583,9 @@ function Select({
           tabIndex: -1
         },
         "\u2715"
-      ), /* @__PURE__ */ React5.createElement("span", { className: "select-arrow", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+      ), /* @__PURE__ */ React6.createElement("span", { className: "select-arrow", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
     ),
-    isOpen && /* @__PURE__ */ React5.createElement("div", { id: dropdownId, className: "select-dropdown", role: "listbox" }, searchable && /* @__PURE__ */ React5.createElement("div", { className: "select-search" }, /* @__PURE__ */ React5.createElement(
+    isOpen && /* @__PURE__ */ React6.createElement("div", { id: dropdownId, className: "select-dropdown", role: "listbox" }, searchable && /* @__PURE__ */ React6.createElement("div", { className: "select-search" }, /* @__PURE__ */ React6.createElement(
       "input",
       {
         ref: searchInputRef,
@@ -474,19 +597,19 @@ function Select({
         onClick: (e) => e.stopPropagation(),
         "aria-label": "Search options"
       }
-    )), /* @__PURE__ */ React5.createElement("div", { className: "select-options" }, filteredOptions.length === 0 ? /* @__PURE__ */ React5.createElement("div", { className: "select-no-options" }, "No options found") : optionGroups.length > 0 ? (
+    )), /* @__PURE__ */ React6.createElement("div", { className: "select-options" }, filteredOptions.length === 0 ? /* @__PURE__ */ React6.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.createElement("div", { key: groupIndex, className: "select-optgroup" }, /* @__PURE__ */ React5.createElement("div", { className: "select-optgroup-label" }, group.label), groupOptions.map((option) => {
+        return /* @__PURE__ */ React6.createElement("div", { key: groupIndex, className: "select-optgroup" }, /* @__PURE__ */ React6.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.createElement(
+          return /* @__PURE__ */ React6.createElement(
             "div",
             {
               key: option.value,
@@ -506,7 +629,7 @@ function Select({
         const isSelected = value === option.value;
         const isFocused = index === focusedIndex;
         const isDisabled = option.disabled;
-        return /* @__PURE__ */ React5.createElement(
+        return /* @__PURE__ */ React6.createElement(
           "div",
           {
             key: option.value,
@@ -524,6 +647,6 @@ function Select({
 }
 Select.displayName = "Select";
 
-export { Checkbox, Radio, Select, TextArea, TextInput };
+export { Checkbox, CheckboxGroup, Radio, Select, TextArea, TextInput };
 //# sourceMappingURL=inputs.js.map
 //# sourceMappingURL=inputs.js.map