@knkcs/anker 0.0.1 → 0.0.2

package/dist/forms/index.js

@@ -1,9 +1,9 @@
-import { LeavePageConfirmation, NumberInputRoot, NumberInputField, Radio } from '../chunk-4T32UC26.js';
+import { Popover, PopoverTrigger, PopoverContent, PopoverBody, LeavePageConfirmation, NumberInputRoot, NumberInputField, Radio, NativeSelect } from '../chunk-C4JI3JNA.js';
 import { Switch } from '../chunk-RJPEVNMJ.js';
 import { text_input_default } from '../chunk-PZCL4M6I.js';
 export { SearchInput } from '../chunk-PZCL4M6I.js';
-import { Stack, Grid, GridItem, Text, Input, IconButton, Box, ButtonGroup, Button, Field, HStack, Checkbox, Popover, Square, Editable, Flex, RadioGroup, Menu, Portal, NativeSelect, Textarea, useEditableContext } from '@chakra-ui/react';
-import { Trash2, Plus, Upload, ChevronDown, Pencil } from 'lucide-react';
+import { Stack, Grid, GridItem, Text, Input, IconButton, Box, ButtonGroup, Button, Field, HStack, Checkbox, Square, Editable, Flex, RadioGroup, Textarea, useEditableContext } from '@chakra-ui/react';
+import { Trash2, Plus, Upload, Pencil } from 'lucide-react';
 import React, { useId, useCallback, useEffect } from 'react';
 import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -74,7 +74,7 @@ function ArrayField(props) {
     emptyState,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx(FormField, { name, label, readOnly, ...rest, children: (_field) => /* @__PURE__ */ jsx(Box, { py: 4, px: 4, bg: "bg", rounded: "md", children: mode === "dynamic" ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FormField, { name, label, readOnly, ...rest, children: () => /* @__PURE__ */ jsx(Box, { py: 4, px: 4, bg: "bg", rounded: "md", children: mode === "dynamic" ? /* @__PURE__ */ jsx(
     DynamicArray,
     {
       name,
@@ -185,7 +185,7 @@ function CheckboxField({
   ref,
   ...props
 }) {
-  const { name, label, value, disabled, children } = props;
+  const { name, label, value, disabled, helperText, children } = props;
   const { control } = useFormContext();
   return /* @__PURE__ */ jsx(
     Controller,
@@ -212,28 +212,32 @@ function CheckboxField({
           }
         };
         const uniqueId = isArrayMode ? `${name}-${String(value)}` : name;
-        return /* @__PURE__ */ jsxs(
-          Checkbox.Root,
-          {
-            id: uniqueId,
-            name: field.name,
-            value: isArrayMode ? String(value) : void 0,
-            invalid: !!fieldState.error,
-            ref,
-            checked: isChecked,
-            onCheckedChange: handleCheckedChange,
-            onBlur: field.onBlur,
-            disabled,
-            children: [
-              /* @__PURE__ */ jsx(Checkbox.HiddenInput, {}),
-              /* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, {}) }),
-              (label || children) && /* @__PURE__ */ jsxs(Checkbox.Label, { children: [
-                label,
-                children
-              ] })
-            ]
-          }
-        );
+        return /* @__PURE__ */ jsxs(Field.Root, { invalid: !!fieldState.error, disabled, children: [
+          /* @__PURE__ */ jsxs(
+            Checkbox.Root,
+            {
+              id: uniqueId,
+              name: field.name,
+              value: isArrayMode ? String(value) : void 0,
+              invalid: !!fieldState.error,
+              ref,
+              checked: isChecked,
+              onCheckedChange: handleCheckedChange,
+              onBlur: field.onBlur,
+              disabled,
+              children: [
+                /* @__PURE__ */ jsx(Checkbox.HiddenInput, {}),
+                /* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, {}) }),
+                (label || children) && /* @__PURE__ */ jsxs(Checkbox.Label, { children: [
+                  label,
+                  children
+                ] })
+              ]
+            }
+          ),
+          helperText && /* @__PURE__ */ jsx(Field.HelperText, { children: helperText }),
+          fieldState.error && /* @__PURE__ */ jsx(Field.ErrorText, { "aria-live": "polite", children: fieldState.error.message })
+        ] });
       }
     }
   );
@@ -289,6 +293,7 @@ function CodeField({
       onChange: (e) => field.onChange(e.target.value),
       onBlur: field.onBlur,
       readOnly,
+      "aria-describedby": field["aria-describedby"],
       style: {
         fontFamily: "monospace",
         fontSize: "0.875rem",
@@ -308,8 +313,8 @@ function ColorPickerField({
   ...props
 }) {
   const { name, label, size = "md", readOnly, ColorPicker, ...rest } = props;
-  return /* @__PURE__ */ jsx(FormField, { name, label, readOnly, ...rest, children: (field) => /* @__PURE__ */ jsxs(Popover.Root, { children: [
-    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FormField, { name, label, readOnly, ...rest, children: (field) => /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       IconButton,
       {
         ref,
@@ -321,32 +326,30 @@ function ColorPickerField({
         variant: "outline",
         disabled: readOnly,
         "aria-label": `Color: ${field.value || "none"}`,
+        "aria-describedby": field["aria-describedby"],
         children: /* @__PURE__ */ jsx(Square, { rounded: "sm", bg: field.value, size: 6 })
       }
     ) }),
-    /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, { width: "auto", children: [
-      /* @__PURE__ */ jsx(Popover.Arrow, {}),
-      /* @__PURE__ */ jsx(Popover.Body, { children: ColorPicker ? /* @__PURE__ */ jsx(
-        ColorPicker,
-        {
-          color: field.value,
-          onChange: (color) => field.onChange(color)
-        }
-      ) : /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "color",
-          value: field.value || "#000000",
-          onChange: (e) => field.onChange(e.target.value),
-          style: {
-            width: 200,
-            height: 200,
-            border: "none",
-            cursor: "pointer"
-          }
+    /* @__PURE__ */ jsx(PopoverContent, { width: "auto", showArrow: true, children: /* @__PURE__ */ jsx(PopoverBody, { children: ColorPicker ? /* @__PURE__ */ jsx(
+      ColorPicker,
+      {
+        color: field.value,
+        onChange: (color) => field.onChange(color)
+      }
+    ) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "color",
+        value: field.value || "#000000",
+        onChange: (e) => field.onChange(e.target.value),
+        style: {
+          width: 200,
+          height: 200,
+          border: "none",
+          cursor: "pointer"
         }
-      ) })
-    ] }) })
+      }
+    ) }) })
   ] }) });
 }
 ColorPickerField.displayName = "ColorPickerField";
@@ -523,6 +526,7 @@ function FileField(props) {
           accept: accept ? Object.values(accept).flat().join(",") : void 0,
           multiple,
           disabled,
+          "aria-describedby": field["aria-describedby"],
           onChange: (e) => {
             const files = e.target.files;
             if (!files) return;
@@ -703,6 +707,7 @@ function MarkdownField(props) {
         onChange: (e) => field.onChange(e.target.value),
         onBlur: field.onBlur,
         readOnly,
+        "aria-describedby": field["aria-describedby"],
         style: {
           padding: "0.75rem",
           border: "1px solid var(--chakra-colors-border)",
@@ -758,7 +763,15 @@ function NumberInputField2({
           showStepper: showStepper && !readOnly,
           opacity: readOnly ? 0.8 : 1,
           ...numberInputProps,
-          children: /* @__PURE__ */ jsx(NumberInputField, { name: field.name, ref, onBlur: field.onBlur })
+          children: /* @__PURE__ */ jsx(
+            NumberInputField,
+            {
+              name: field.name,
+              ref,
+              onBlur: field.onBlur,
+              "aria-describedby": field["aria-describedby"]
+            }
+          )
         }
       )
     }
@@ -772,61 +785,13 @@ function RadioGroupField(props) {
     {
       value: String(field.value ?? ""),
       onValueChange: (e) => field.onChange(e.value),
+      "aria-describedby": field["aria-describedby"],
       ...radioGroupProps,
       children: /* @__PURE__ */ jsx(Stack, { direction: "row", ...stackProps, children: options.map((option) => /* @__PURE__ */ jsx(Radio, { value: option.value, children: option.label }, option.value)) })
     }
   ) });
 }
 RadioGroupField.displayName = "RadioGroupField";
-var SelectActionField = (props) => {
-  const { label, menuItems, onClick, ...rest } = props;
-  const hasMenuItems = menuItems && menuItems.length > 0;
-  return /* @__PURE__ */ jsxs(HStack, { gap: 0.5, children: [
-    onClick && /* @__PURE__ */ jsxs(
-      Button,
-      {
-        ...rest,
-        colorPalette: "blue",
-        onClick,
-        size: "lg",
-        roundedRight: hasMenuItems ? "none" : void 0,
-        children: [
-          /* @__PURE__ */ jsx(Plus, { size: 16 }),
-          label
-        ]
-      }
-    ),
-    hasMenuItems && /* @__PURE__ */ jsxs(Menu.Root, { children: [
-      /* @__PURE__ */ jsx(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          ...rest,
-          size: "lg",
-          colorPalette: "blue",
-          roundedLeft: onClick ? "none" : void 0,
-          children: [
-            /* @__PURE__ */ jsx(ChevronDown, { size: 16 }),
-            onClick ? null : label
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(Menu.Content, { children: menuItems.map((menuItem) => /* @__PURE__ */ jsxs(
-        Menu.Item,
-        {
-          value: menuItem.label,
-          onClick: menuItem.onClick,
-          color: menuItem.color,
-          children: [
-            menuItem.icon,
-            menuItem.label
-          ]
-        },
-        menuItem.label
-      )) }) }) })
-    ] })
-  ] });
-};
-SelectActionField.displayName = "SelectActionField";
 function SelectField({
   ref,
   ...props
@@ -849,23 +814,19 @@ function SelectField({
       readOnly,
       disabled,
       ...rest,
-      children: (field) => /* @__PURE__ */ jsxs(NativeSelect.Root, { disabled: readOnly || disabled, children: [
-        /* @__PURE__ */ jsxs(
-          NativeSelect.Field,
-          {
-            ...field,
-            value: String(field.value ?? ""),
-            id: name,
-            ref,
-            ...selectProps,
-            children: [
-              placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
-              children
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(NativeSelect.Indicator, {})
-      ] })
+      children: (field) => /* @__PURE__ */ jsx(
+        NativeSelect,
+        {
+          disabled: readOnly || disabled,
+          placeholder,
+          ...field,
+          value: String(field.value ?? ""),
+          id: name,
+          ref,
+          ...selectProps,
+          children
+        }
+      )
     }
   );
 }
@@ -894,6 +855,7 @@ function SwitchField({
           disabled,
           readOnly,
           opacity: readOnly ? 0.8 : 1,
+          "aria-describedby": field["aria-describedby"],
           ref,
           ...switchProps
         }
@@ -942,6 +904,6 @@ function TextareaField({
 }
 TextareaField.displayName = "TextareaField";
 
-export { ArrayField, CheckboxField, CodeField, ColorPickerField, ControlledFormField, DatePickerField, DirtyFormGuard, EditableHeading, FileField, FormField, InputField, MarkdownField, NumberInputField2 as NumberInputField, RadioGroupField, SelectActionField, SelectField, SwitchField, TextareaField };
+export { ArrayField, CheckboxField, CodeField, ColorPickerField, ControlledFormField, DatePickerField, DirtyFormGuard, EditableHeading, FileField, FormField, InputField, MarkdownField, NumberInputField2 as NumberInputField, RadioGroupField, SelectField, SwitchField, TextareaField };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map