@page-speed/forms 0.7.3 → 0.7.5

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-ZH6XDBWH.js → chunk-DSK3VLIV.js}

@@ -1,10 +1,11 @@
-import { cn, FieldLabel, FieldDescription, LabelGroup, Field, INPUT_AUTOFILL_RESET_CLASSES, Button, Input, buttonVariants } from './chunk-SUF7WJS6.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';
 import { useDirection } from '@radix-ui/react-direction';
 import { Slot } from '@radix-ui/react-slot';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
+import { Icon, DEFAULT_ICON_API_BASE_URL } from '@page-speed/icon';
 
 function Textarea({ className, ...props }) {
   return /* @__PURE__ */ React19.createElement(
@@ -13,7 +14,7 @@ function Textarea({ className, ...props }) {
       "data-slot": "textarea",
       className: cn(
         // Core structure - uses CSS variables only
-        "flex field-sizing-content min-h-16 w-full rounded-md border border-input",
+        "flex field-sizing-content min-h-32 w-full rounded-md border border-input",
         "bg-transparent px-3 py-2 text-base shadow-xs",
         "transition-[color,box-shadow] outline-none md:text-sm",
         // Focus state - uses ring-ring CSS variable
@@ -66,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
       ),
@@ -104,6 +105,7 @@ function Checkbox({
         "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
         // Disabled state
         "disabled:cursor-not-allowed disabled:opacity-50",
+        " mt-1",
         className
       ),
       ...props
@@ -201,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
       )
@@ -289,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(
@@ -448,7 +450,17 @@ function Radio({
     return options.some((option) => option.description);
   }, [options]);
   const groupDescriptionId = description ? `${name}-description` : void 0;
-  return /* @__PURE__ */ React19.createElement("div", { className: cn("w-full", className), "data-invalid": error || void 0 }, (label || description) && /* @__PURE__ */ React19.createElement("div", { className: "mb-3 space-y-1" }, label && /* @__PURE__ */ React19.createElement("div", { className: "text-base font-medium leading-none" }, label), description && /* @__PURE__ */ React19.createElement(FieldDescription, { id: groupDescriptionId, className: "leading-snug" }, description)), /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React19.createElement("div", { className: cn("w-full", className), "data-invalid": error || void 0 }, /* @__PURE__ */ React19.createElement(
+    LabelGroup,
+    {
+      labelHtmlFor: name,
+      required,
+      variant: "legend",
+      secondaryId: groupDescriptionId,
+      secondary: description,
+      primary: label
+    }
+  ), /* @__PURE__ */ React19.createElement(
     RadioGroup,
     {
       name,
@@ -458,8 +470,9 @@ function Radio({
       disabled,
       required,
       className: cn(
-        layout === "grid" && "grid grid-cols-1 md:grid-cols-2 gap-3",
-        layout === "inline" && "flex flex-wrap 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"
       ),
       "aria-invalid": error || props["aria-invalid"],
       "aria-describedby": groupDescriptionId || props["aria-describedby"],
@@ -476,9 +489,12 @@ function Radio({
           key: option.value,
           htmlFor: radioId,
           className: cn(
-            "flex gap-3 p-3 duration-200 select-auto font-normal leading-normal",
-            useChoiceCard && "border rounded-lg hover:ring-2 hover:ring-ring/50",
-            useChoiceCard && isSelected && "ring-2 ring-ring",
+            "flex gap-3 duration-200",
+            "select-auto font-normal leading-normal",
+            useChoiceCard && "hover:ring-2 hover:ring-primary",
+            useChoiceCard && "border rounded-lg p-3",
+            !useChoiceCard && "p-1",
+            useChoiceCard && isSelected && "ring-2 ring-primary",
             useChoiceCard && error && "border-destructive",
             isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
           )
@@ -634,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,
@@ -915,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
         ),
@@ -1349,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": {
@@ -1447,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,
@@ -1542,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)
@@ -2316,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,
@@ -2551,7 +2582,7 @@ function FileInput({
   value = [],
   onChange,
   onBlur,
-  placeholder = "Choose file...",
+  placeholder,
   disabled = false,
   required = false,
   error = false,
@@ -2829,7 +2860,26 @@ function FileInput({
       }
     };
   }, [imageToCrop]);
-  const fileCountLabel = normalizedValue.length > 0 ? `${normalizedValue.length} file(s) selected` : placeholder;
+  const dynamicPlaceholder = React19.useMemo(() => {
+    if (placeholder) {
+      return placeholder;
+    }
+    return `Drag & drop file${multiple ? "s" : ""} here`;
+  }, [multiple, placeholder]);
+  const metadataElement = React19.useMemo(() => {
+    const metaList = [];
+    if (accept) {
+      metaList.push(`File type: ${accept}`);
+    }
+    if (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-1 opacity-75 text-xs" }, metaList.map((str) => /* @__PURE__ */ React19.createElement("span", { key: str, className: "relative" }, str)));
+    } else {
+      return null;
+    }
+  }, [accept, maxSize]);
   return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     FileUpload,
     {
@@ -2860,33 +2910,33 @@ function FileInput({
       FileUploadDropzone,
       {
         role: "button",
-        "aria-label": placeholder,
+        "aria-label": dynamicPlaceholder,
         className: cn(
-          "flex min-h-32 w-full cursor-pointer items-center justify-center border-input bg-transparent p-6 transition-colors",
-          "hover:bg-accent/50",
-          "data-[dragging]:bg-accent/50",
+          "flex min-h-32 w-full cursor-pointer",
+          "items-center justify-center border-input",
+          "bg-transparent p-6 transition-colors",
+          "data-[dragging]:ring-2 hover:ring-2",
           disabled && "cursor-not-allowed opacity-50",
           error && "border-destructive"
         )
       },
-      /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col items-center gap-1 text-center" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-center rounded-full border p-2.5" }, /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-center rounded-full border p-2.5" }, /* @__PURE__ */ React19.createElement(
         "svg",
         {
-          width: "24",
-          height: "24",
+          width: "18",
+          height: "18",
           viewBox: "0 0 24 24",
           fill: "none",
           stroke: "currentColor",
           strokeWidth: "2",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          className: "text-muted-foreground",
           "aria-hidden": "true"
         },
         /* @__PURE__ */ React19.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
         /* @__PURE__ */ React19.createElement("polyline", { points: "17 8 12 3 7 8" }),
         /* @__PURE__ */ React19.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-      )), /* @__PURE__ */ React19.createElement("p", { className: "text-sm font-medium" }, fileCountLabel), accept && /* @__PURE__ */ React19.createElement("p", { className: "text-muted-foreground text-xs" }, "Accepted: ", accept), /* @__PURE__ */ React19.createElement("p", { className: "text-muted-foreground text-xs" }, "Max size: ", formatFileSize(maxSize)))
+      )), /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col items-center justify-center gap-1 text-center" }, /* @__PURE__ */ React19.createElement("p", { className: "text-sm font-medium" }, dynamicPlaceholder), metadataElement))
     ),
     /* @__PURE__ */ React19.createElement(FileUploadList, { className: "mt-4" }, normalizedValue.map((file, index) => {
       const progressValue = uploadProgress[file.name];
@@ -2896,9 +2946,12 @@ function FileInput({
         {
           key: `${file.name}-${index}`,
           value: file,
-          className: "flex items-center gap-3 border-border bg-card text-card-foreground hover:bg-accent/50 transition-colors"
+          className: cn(
+            "flex items-center gap-3",
+            "border-border bg-card text-card-foreground"
+          )
         },
-        showPreview ? /* @__PURE__ */ React19.createElement(FileUploadItemPreview, { className: "h-12 w-12 rounded [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>svg]:size-6" }) : null,
+        showPreview ? /* @__PURE__ */ React19.createElement(FileUploadItemPreview, { className: "size-12 rounded [&>img]:h-full [&>img]:w-full [&>img]:object-cover [&>svg]:size-6" }) : null,
         /* @__PURE__ */ React19.createElement("div", { className: "flex min-w-0 flex-1 flex-col" }, /* @__PURE__ */ React19.createElement(FileUploadItemMetadata, { className: "min-w-0" }), hasProgress && progressValue < 100 ? /* @__PURE__ */ React19.createElement("div", { className: "mt-1 flex items-center gap-2" }, /* @__PURE__ */ React19.createElement(
           "div",
           {
@@ -2916,7 +2969,7 @@ function FileInput({
               style: { width: `${progressValue}%` }
             }
           )
-        ), /* @__PURE__ */ React19.createElement("span", { className: "text-xs" }, progressValue, "%")) : null),
+        ), /* @__PURE__ */ React19.createElement("span", { className: "text-xs" }, progressValue, "%")) : /* @__PURE__ */ React19.createElement("span", { className: "text-xs" }, formatFileSize(file.size))),
         enableCropping && file.type.startsWith("image/") ? /* @__PURE__ */ React19.createElement(
           Button,
           {
@@ -2928,7 +2981,7 @@ function FileInput({
               handleCrop(file);
             },
             disabled,
-            className: "h-8 w-8 p-0",
+            className: "size-8 p-0",
             "aria-label": `Crop ${file.name}`
           },
           /* @__PURE__ */ React19.createElement(
@@ -2952,10 +3005,10 @@ function FileInput({
           Button,
           {
             type: "button",
-            variant: "ghost",
-            size: "icon",
+            variant: "outline",
+            size: "icon-sm",
             disabled,
-            className: "h-8 w-8 p-0",
+            className: "size-8 p-0",
             "aria-label": `Remove ${file.name}`
           },
           /* @__PURE__ */ React19.createElement(
@@ -3023,7 +3076,7 @@ function FileInput({
       /* @__PURE__ */ React19.createElement("div", { className: "p-4" }, /* @__PURE__ */ React19.createElement(
         "div",
         {
-          className: "relative h-96 w-full overflow-hidden rounded-md bg-accent/40",
+          className: "relative h-96 w-full overflow-hidden rounded-md",
           onMouseDown: (event) => {
             event.preventDefault();
             const startX = event.clientX - crop.x;
@@ -3107,7 +3160,7 @@ function FileInput({
           step: "0.1",
           value: zoom,
           onChange: (event) => onZoomChange(parseFloat(event.target.value)),
-          className: "h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-accent/60",
+          className: "h-2 flex-1 cursor-pointer appearance-none rounded-lg bg-primary",
           "aria-label": "Zoom level"
         }
       ))),
@@ -3349,8 +3402,6 @@ function CalendarDayButton({
     }
   );
 }
-
-// src/inputs/DatePicker.tsx
 function formatDate(date, format) {
   if (!date) return "";
   const d = new Date(date);
@@ -3392,7 +3443,7 @@ function DatePicker({
   required = false,
   error = false,
   className = "",
-  placeholder = "Select date...",
+  placeholder = "Select date",
   format = "MM/dd/yyyy",
   minDate,
   maxDate,
@@ -3491,23 +3542,20 @@ 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(
-      "svg",
+      Icon,
       {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "18",
-        height: "18",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeWidth: "2"
-      },
-      /* @__PURE__ */ React19.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+        name: "material-symbols/edit-calendar-outline",
+        apiKey: DEFAULT_ICON_API_BASE_URL,
+        size: 18
+      }
     )
   ), /* @__PURE__ */ React19.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React19.createElement(
     "input",
@@ -3516,14 +3564,18 @@ function DatePicker({
       id: props.id,
       type: "text",
       className: cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-base shadow-sm transition-colors",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        "disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex h-9 w-full rounded-md border",
+        "border-input bg-transparent py-1 text-base",
+        "shadow-sm transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1",
+        "focus-visible:ring-ring",
+        "disabled:cursor-not-allowed",
+        "disabled:opacity-50 md:text-sm",
         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,
@@ -3692,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,
@@ -3746,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;
@@ -3995,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,
@@ -4058,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-ZH6XDBWH.js.map
-//# sourceMappingURL=chunk-ZH6XDBWH.js.map
+//# sourceMappingURL=chunk-DSK3VLIV.js.map
+//# sourceMappingURL=chunk-DSK3VLIV.js.map