@page-speed/forms 0.7.4 → 0.7.6

package/README.md

@@ -227,7 +227,7 @@ It is **not** a BEM-only unstyled package anymore.
 ### Base conventions
 
 - Inputs/triggers are transparent shells with semantic borders/rings
-- Fields with values (text-like controls) use `ring-2 ring-ring`
+- Fields with values (text-like controls) use `ring-2 ring-primary`
 - Error states use destructive border/ring
 - Dropdown selected rows use muted backgrounds
 

package/dist/{chunk-SF6NKDID.js → chunk-DSK3VLIV.js}

@@ -1,4 +1,4 @@
-import { cn, FieldLabel, FieldDescription, LabelGroup, Field, INPUT_AUTOFILL_RESET_CLASSES, Button, Input, buttonVariants } from './chunk-QHAQYOBT.js';
+import { cn, FieldLabel, FieldDescription, LabelGroup, Field, INPUT_AUTOFILL_RESET_CLASSES, Button, Input, buttonVariants } from './chunk-EQKN2OPX.js';
 import * as React19 from 'react';
 import { Dialog as Dialog$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Select as Select$1, Popover as Popover$1 } from 'radix-ui';
 import { Command as Command$1 } from 'cmdk';
@@ -67,7 +67,7 @@ function TextArea({
       required,
       className: cn(
         // Valid value indicator - ring-2 when has value and no error
-        !error && hasValue && "ring-2 ring-ring",
+        !error && hasValue && "ring-2 ring-primary",
         // Error state - handled by Textarea component via aria-invalid
         className
       ),
@@ -203,9 +203,9 @@ function Checkbox2({
       htmlFor: checkboxId,
       className: cn(
         "flex gap-3 p-3 duration-200 select-auto font-normal leading-normal",
-        showChoiceCard && "border rounded-lg hover:ring-2 hover:ring-ring/50",
-        showChoiceCard && value && "ring-2 ring-ring",
-        showChoiceCard && error && "border-destructive",
+        showChoiceCard && "border rounded-lg hover:ring-2 hover:ring-primary",
+        showChoiceCard && value && "ring-2 ring-primary",
+        showChoiceCard && error && "ring-2 ring-destructive",
         disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
         className
       )
@@ -291,12 +291,12 @@ function CheckboxGroup({
   const containerClass = React19.useMemo(() => {
     return cn(
       "w-full grid grid-cols-1 border-0 m-0 p-0 min-w-0",
-      (layout === "grid" || layout === "inline") && "md:grid-cols-2",
-      layout === "grid" && "gap-3",
-      layout === "inline" && "gap-0",
+      layout === "grid" && "grid grid-cols-1 md:grid-cols-2 ",
+      layout === "inline" && "flex flex-wrap",
+      useChoiceCard ? "gap-x-6 space-y-4" : "gap-0",
       className
     );
-  }, [layout, className]);
+  }, [layout, className, useChoiceCard]);
   const groupDescriptionId = description ? `${name}-description` : void 0;
   const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ React19.createElement(
@@ -470,9 +470,9 @@ function Radio({
       disabled,
       required,
       className: cn(
-        layout === "grid" && "grid grid-cols-1 md:grid-cols-2",
+        layout === "grid" && "grid grid-cols-1 md:grid-cols-2 ",
         layout === "inline" && "flex flex-wrap",
-        useChoiceCard ? "gap-3" : "gap-0"
+        useChoiceCard ? "gap-x-6 space-y-4" : "gap-0"
       ),
       "aria-invalid": error || props["aria-invalid"],
       "aria-describedby": groupDescriptionId || props["aria-describedby"],
@@ -491,10 +491,10 @@ function Radio({
           className: cn(
             "flex gap-3 duration-200",
             "select-auto font-normal leading-normal",
-            useChoiceCard && "hover:ring-2 hover:ring-ring",
+            useChoiceCard && "hover:ring-2 hover:ring-primary",
             useChoiceCard && "border rounded-lg p-3",
             !useChoiceCard && "p-1",
-            useChoiceCard && isSelected && "ring-2 ring-ring",
+            useChoiceCard && isSelected && "ring-2 ring-primary",
             useChoiceCard && error && "border-destructive",
             isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
           )
@@ -650,7 +650,14 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ React19.createElement(Select$1.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ React19.createElement(
+    Select$1.Value,
+    {
+      className: "font-normal",
+      "data-slot": "select-value",
+      ...props
+    }
+  );
 }
 function SelectTrigger({
   className,
@@ -931,7 +938,7 @@ function Select2({
       {
         className: cn(
           // Valid value indicator - ring-2 when has value and no error
-          !error && hasValue && "ring-2 ring-ring",
+          !error && hasValue && "ring-2 ring-primary",
           // Error state - handled by SelectTrigger via aria-invalid
           className
         ),
@@ -1365,7 +1372,9 @@ function MultiSelect({
             (option) => option === currentOption
           );
           const nextEnabledIndex = currentEnabledIndex === -1 ? 0 : (currentEnabledIndex + 1) % enabledOptions.length;
-          setFocusedIndex(filteredOptions.indexOf(enabledOptions[nextEnabledIndex]));
+          setFocusedIndex(
+            filteredOptions.indexOf(enabledOptions[nextEnabledIndex])
+          );
           break;
         }
         case "ArrowUp": {
@@ -1463,9 +1472,9 @@ function MultiSelect({
       className: cn(
         "flex min-h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm",
         "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        !error && hasValue && "ring-2 ring-ring",
+        !error && hasValue && "ring-2 ring-primary",
         disabled && "cursor-not-allowed opacity-50 pointer-events-none",
-        error && "border-destructive ring-1 ring-destructive"
+        error && "ring-2 ring-destructive"
       ),
       onKeyDown: handleKeyDown,
       onBlur: handleTriggerBlur,
@@ -1558,7 +1567,7 @@ function MultiSelect({
         },
         "Clear All"
       )),
-      isMaxReached && /* @__PURE__ */ React19.createElement("div", { className: "border-b border-destructive bg-destructive/80 px-2 py-1 text-xs font-medium text-destructive-foreground" }, "Maximum ", maxSelections, " selection", maxSelections !== 1 ? "s" : "", " ", "reached"),
+      isMaxReached && /* @__PURE__ */ React19.createElement("div", { className: "border-b border-destructive bg-destructive/80 px-2 py-1 text-xs font-medium text-destructive-foreground" }, "Maximum ", maxSelections, " selection", maxSelections !== 1 ? "s" : "", " reached"),
       /* @__PURE__ */ React19.createElement(CommandList, { role: "listbox", "aria-multiselectable": "true" }, /* @__PURE__ */ React19.createElement(CommandEmpty, null, "No options found"), optionGroups.length > 0 ? optionGroups.map((group, groupIndex) => {
         const groupOptions = group.options.filter(
           (option) => filteredOptions.includes(option)
@@ -2332,7 +2341,13 @@ function FileUploadDropzone(props) {
       tabIndex: context.disabled ? -1 : 0,
       ...dropzoneProps,
       className: cn(
-        "relative flex select-none flex-col items-center justify-center gap-2 rounded-lg border border-dashed p-6 outline-none transition-colors hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/20 data-disabled:pointer-events-none data-disabled:opacity-50 data-dragging:border-ring data-dragging:bg-accent/50 data-invalid:border-destructive data-invalid:ring-destructive/20",
+        "relative flex select-none flex-col items-center",
+        "justify-center gap-2 rounded-lg border border-dashed p-6",
+        "outline-none transition-colors hover:ring-2 hover:ring-primary",
+        "focus-visible:ring-2 focus-visible:ring-primary",
+        "data-disabled:pointer-events-none data-disabled:opacity-50 ",
+        "data-dragging:ring-2 data-dragging:ring-primary",
+        "data-invalid:ring-2 data-invalid:ring-destructive",
         className
       ),
       onClick,
@@ -2854,13 +2869,13 @@ function FileInput({
   const metadataElement = React19.useMemo(() => {
     const metaList = [];
     if (accept) {
-      metaList.push(`Accepted: ${accept}`);
+      metaList.push(`File type: ${accept}`);
     }
     if (maxSize) {
-      metaList.push(`Max size: ${formatFileSize(maxSize)}`);
+      metaList.push(`Max file size: ${formatFileSize(maxSize)}`);
     }
     if (metaList.length > 0) {
-      return /* @__PURE__ */ React19.createElement("div", { className: "flex text-center items-center justify-center gap-4" }, metaList.map((str) => /* @__PURE__ */ React19.createElement("span", { key: str, className: "font-sm opacity-75" }, str)));
+      return /* @__PURE__ */ React19.createElement("div", { className: "flex text-center items-center justify-center gap-1 opacity-75 text-xs" }, metaList.map((str) => /* @__PURE__ */ React19.createElement("span", { key: str, className: "relative" }, str)));
     } else {
       return null;
     }
@@ -3428,7 +3443,7 @@ function DatePicker({
   required = false,
   error = false,
   className = "",
-  placeholder = "Select date...",
+  placeholder = "Select date",
   format = "MM/dd/yyyy",
   minDate,
   maxDate,
@@ -3527,7 +3542,11 @@ function DatePicker({
   ), /* @__PURE__ */ React19.createElement(Popover, { open: isOpen, onOpenChange: handleOpenChange }, /* @__PURE__ */ React19.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React19.createElement(
     "span",
     {
-      className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
+      className: cn(
+        "absolute left-3 top-1/2 -translate-y-1/2",
+        "pointer-events-none flex items-center justify-center",
+        "pointer-events-none"
+      ),
       "aria-hidden": "true"
     },
     /* @__PURE__ */ React19.createElement(
@@ -3555,8 +3574,8 @@ function DatePicker({
         INPUT_AUTOFILL_RESET_CLASSES,
         showIcon ? "pl-10" : "pl-3",
         clearable && value ? "pr-10" : "pr-3",
-        !error && hasValue && "ring-2 ring-ring",
-        error && "border-destructive ring-1 ring-destructive"
+        !error && hasValue && "ring-2 ring-primary",
+        error && "ring-2 ring-destructive"
       ),
       value: displayValue,
       onClick: handleInputClick,
@@ -3725,8 +3744,8 @@ function TimePicker({
         INPUT_AUTOFILL_RESET_CLASSES,
         showIcon ? "pl-10" : "pl-3",
         clearable && value ? "pr-10" : "pr-3",
-        !error && hasValue && "ring-2 ring-ring",
-        error && "border-destructive ring-1 ring-destructive"
+        !error && hasValue && "ring-2 ring-primary",
+        error && "ring-2 ring-destructive"
       ),
       value: nativeValue,
       onChange: handleChange,
@@ -3779,7 +3798,11 @@ function formatDate2(date, format) {
   return format.replace("MM", month).replace("dd", day).replace("yyyy", String(year)).replace("yy", String(year).slice(2));
 }
 function toDayTimestamp(date) {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate()
+  ).getTime();
 }
 function isSameDay(date, target) {
   if (!target) return false;
@@ -4028,8 +4051,8 @@ function DateRangePicker({
         INPUT_AUTOFILL_RESET_CLASSES,
         showIcon ? "pl-10" : "pl-3",
         clearable && (rangeStart || rangeEnd) ? "pr-10" : "pr-3",
-        !error && hasValue && "ring-2 ring-ring",
-        error && "border-destructive ring-1 ring-destructive"
+        !error && hasValue && "ring-2 ring-primary",
+        error && "ring-2 ring-destructive"
       ),
       value: displayValue,
       onClick: handleInputClick,
@@ -4091,5 +4114,5 @@ function DateRangePicker({
 DateRangePicker.displayName = "DateRangePicker";
 
 export { Checkbox2 as Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select2 as Select, Switch2 as Switch, TextArea, TimePicker };
-//# sourceMappingURL=chunk-SF6NKDID.js.map
-//# sourceMappingURL=chunk-SF6NKDID.js.map
+//# sourceMappingURL=chunk-DSK3VLIV.js.map
+//# sourceMappingURL=chunk-DSK3VLIV.js.map