@knkcs/anker 0.0.1

package/dist/forms/index.js

@@ -0,0 +1,947 @@
+import { LeavePageConfirmation, NumberInputRoot, NumberInputField, Radio } from '../chunk-4T32UC26.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 React, { useId, useCallback, useEffect } from 'react';
+import { useFormContext, useFieldArray, Controller } from 'react-hook-form';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useBlocker } from 'react-router-dom';
+
+function FormField({
+  name,
+  label,
+  helperText,
+  description,
+  required,
+  disabled,
+  readOnly,
+  actions,
+  children
+}) {
+  const { control } = useFormContext();
+  const uid = useId();
+  const descriptionId = `${uid}-description`;
+  const helperId = `${uid}-helper`;
+  const errorId = `${uid}-error`;
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState }) => {
+        const describedBy = [
+          description ? descriptionId : null,
+          helperText ? helperId : null,
+          fieldState.error ? errorId : null
+        ].filter(Boolean).join(" ") || void 0;
+        return /* @__PURE__ */ jsxs(
+          Field.Root,
+          {
+            invalid: !!fieldState.error,
+            required,
+            disabled,
+            readOnly,
+            children: [
+              label && (typeof label === "string" ? /* @__PURE__ */ jsxs(HStack, { children: [
+                /* @__PURE__ */ jsx(Field.Label, { flex: "1", htmlFor: name, children: label }),
+                actions
+              ] }) : label),
+              children({ ...field, "aria-describedby": describedBy }),
+              description && /* @__PURE__ */ jsx(Text, { id: descriptionId, fontSize: "xs", color: "muted", children: description }),
+              helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx(Field.HelperText, { id: helperId, children: helperText }) : /* @__PURE__ */ jsx("span", { id: helperId, children: helperText })),
+              fieldState.error && /* @__PURE__ */ jsx(Field.ErrorText, { id: errorId, "aria-live": "polite", children: fieldState.error.message })
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+FormField.displayName = "FormField";
+function ArrayField(props) {
+  const {
+    name,
+    label,
+    mode = "dynamic",
+    valueHeader = "Value",
+    keyHeader = "Key",
+    keys = [],
+    addLabel = "Add Field",
+    removeLabel = "Remove Item",
+    readOnly,
+    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(
+    DynamicArray,
+    {
+      name,
+      valueHeader,
+      keyHeader,
+      addLabel,
+      removeLabel,
+      readOnly,
+      emptyState
+    }
+  ) : /* @__PURE__ */ jsx(
+    KeyedArray,
+    {
+      name,
+      valueHeader,
+      keyHeader,
+      keys,
+      readOnly
+    }
+  ) }) });
+}
+ArrayField.displayName = "ArrayField";
+var DynamicArray = React.memo((props) => {
+  const {
+    name,
+    valueHeader,
+    keyHeader,
+    addLabel,
+    removeLabel,
+    readOnly,
+    emptyState
+  } = props;
+  const { control, register } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name
+  });
+  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+    /* @__PURE__ */ jsxs(Grid, { templateColumns: "200px 1fr 50px", gap: 2, children: [
+      /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(Text, { fontWeight: 500, children: keyHeader }) }),
+      /* @__PURE__ */ jsx(GridItem, { colSpan: 2, children: /* @__PURE__ */ jsx(Text, { fontWeight: 500, children: valueHeader }) }),
+      fields.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...register(`${name}.${index}.key`),
+            readOnly
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ...register(`${name}.${index}.value`),
+            readOnly
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            variant: "ghost",
+            colorPalette: "red",
+            "aria-label": removeLabel,
+            onClick: () => remove(index),
+            disabled: readOnly,
+            children: /* @__PURE__ */ jsx(Trash2, { size: 16 })
+          }
+        )
+      ] }, item.id))
+    ] }),
+    fields.length === 0 && emptyState && /* @__PURE__ */ jsx(Box, { py: 4, textAlign: "center", children: emptyState }),
+    /* @__PURE__ */ jsx(ButtonGroup, { children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => append({ key: "", value: "" }),
+        disabled: readOnly,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { size: 16 }),
+          addLabel
+        ]
+      }
+    ) })
+  ] });
+});
+DynamicArray.displayName = "DynamicArray";
+var KeyedArray = React.memo((props) => {
+  const { name, valueHeader, keyHeader, keys, readOnly } = props;
+  const { register } = useFormContext();
+  return /* @__PURE__ */ jsx(Stack, { gap: 4, children: /* @__PURE__ */ jsxs(Grid, { templateColumns: "200px 1fr", gap: 2, children: [
+    /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(Text, { fontWeight: 500, children: keyHeader }) }),
+    /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(Text, { fontWeight: 500, children: valueHeader }) }),
+    keys.map((keyItem) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { py: 2, children: keyItem.value ?? keyItem.key }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...register(`${name}.${keyItem.key}`),
+          readOnly
+        }
+      )
+    ] }, keyItem.key))
+  ] }) });
+});
+KeyedArray.displayName = "KeyedArray";
+function CheckboxField({
+  ref,
+  ...props
+}) {
+  const { name, label, value, disabled, children } = props;
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    Controller,
+    {
+      name,
+      control,
+      render: ({ field, fieldState }) => {
+        const isArrayMode = value !== void 0;
+        const isChecked = isArrayMode ? Array.isArray(field.value) && field.value.includes(value) : !!field.value;
+        const handleCheckedChange = (details) => {
+          if (isArrayMode) {
+            const currentValue = Array.isArray(field.value) ? [...field.value] : [];
+            if (details.checked) {
+              if (!currentValue.includes(value)) {
+                currentValue.push(value);
+              }
+            } else {
+              const idx = currentValue.indexOf(value);
+              if (idx > -1) currentValue.splice(idx, 1);
+            }
+            field.onChange(currentValue);
+          } else {
+            field.onChange(!!details.checked);
+          }
+        };
+        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
+              ] })
+            ]
+          }
+        );
+      }
+    }
+  );
+}
+CheckboxField.displayName = "CheckboxField";
+function CodeField({
+  ref,
+  ...props
+}) {
+  const {
+    name,
+    label,
+    language = "typescript",
+    height = "400px",
+    indentWithTab = true,
+    readOnly,
+    Editor,
+    ...rest
+  } = props;
+  const onMount = useCallback(
+    (editorInstance, _monaco) => {
+      if (typeof ref === "function") {
+        ref(editorInstance);
+      } else if (ref && typeof ref === "object") {
+        ref.current = editorInstance;
+      }
+      editorInstance.updateOptions?.({
+        tabCompletion: indentWithTab ? "on" : "off"
+      });
+    },
+    [ref, indentWithTab]
+  );
+  return /* @__PURE__ */ jsx(FormField, { name, label, readOnly, ...rest, children: (field) => Editor ? /* @__PURE__ */ jsx(
+    Editor,
+    {
+      value: field.value,
+      language,
+      onChange: (value) => field.onChange(value ?? ""),
+      onMount,
+      height,
+      options: {
+        readOnly,
+        wordWrap: "on",
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        tabCompletion: indentWithTab ? "on" : "off"
+      }
+    }
+  ) : /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      value: field.value ?? "",
+      onChange: (e) => field.onChange(e.target.value),
+      onBlur: field.onBlur,
+      readOnly,
+      style: {
+        fontFamily: "monospace",
+        fontSize: "0.875rem",
+        padding: "0.75rem",
+        border: "1px solid var(--chakra-colors-border)",
+        borderRadius: "0.375rem",
+        width: "100%",
+        minHeight: height,
+        resize: "vertical"
+      }
+    }
+  ) });
+}
+CodeField.displayName = "CodeField";
+function ColorPickerField({
+  ref,
+  ...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(
+      IconButton,
+      {
+        ref,
+        size,
+        w: "fit-content",
+        borderWidth: "1px",
+        rounded: "md",
+        p: 1,
+        variant: "outline",
+        disabled: readOnly,
+        "aria-label": `Color: ${field.value || "none"}`,
+        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"
+          }
+        }
+      ) })
+    ] }) })
+  ] }) });
+}
+ColorPickerField.displayName = "ColorPickerField";
+var ControlledFormField = ({
+  name,
+  label,
+  helperText,
+  errorMessage,
+  required,
+  disabled,
+  readOnly,
+  actions,
+  children
+}) => {
+  const uid = useId();
+  const helperId = `${uid}-helper`;
+  const errorId = `${uid}-error`;
+  return /* @__PURE__ */ jsxs(
+    Field.Root,
+    {
+      invalid: !!errorMessage,
+      required,
+      disabled,
+      readOnly,
+      children: [
+        label && (typeof label === "string" ? /* @__PURE__ */ jsxs(HStack, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { flex: "1", htmlFor: name, children: label }),
+          actions
+        ] }) : label),
+        children,
+        helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx(Field.HelperText, { id: helperId, children: helperText }) : /* @__PURE__ */ jsx("span", { id: helperId, children: helperText })),
+        errorMessage && /* @__PURE__ */ jsx(Field.ErrorText, { id: errorId, "aria-live": "polite", children: errorMessage })
+      ]
+    }
+  );
+};
+ControlledFormField.displayName = "ControlledFormField";
+function DatePickerField({
+  ref,
+  ...props
+}) {
+  const {
+    name,
+    label,
+    min,
+    max,
+    type = "date",
+    readOnly,
+    disabled,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      name,
+      label,
+      readOnly,
+      disabled,
+      ...rest,
+      children: (field) => /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...field,
+          value: field.value ?? "",
+          type,
+          id: name,
+          min,
+          max,
+          readOnly,
+          disabled,
+          ref
+        }
+      )
+    }
+  );
+}
+DatePickerField.displayName = "DatePickerField";
+var DirtyFormGuard = ({
+  title,
+  message,
+  confirmLabel,
+  cancelLabel
+}) => {
+  const { formState } = useFormContext();
+  const blocker = useBlocker(formState.isDirty);
+  return /* @__PURE__ */ jsx(
+    LeavePageConfirmation,
+    {
+      blocked: blocker.state === "blocked",
+      onConfirmLeave: () => blocker.proceed?.(),
+      onCancelLeave: () => blocker.reset?.(),
+      title,
+      message,
+      confirmLabel,
+      cancelLabel
+    }
+  );
+};
+DirtyFormGuard.displayName = "DirtyFormGuard";
+var EditableControls = ({ editLabel }) => {
+  const { editing } = useEditableContext();
+  if (editing) return null;
+  return /* @__PURE__ */ jsx(ButtonGroup, { children: /* @__PURE__ */ jsx(Editable.EditTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      variant: "ghost",
+      marginInlineStart: 2,
+      "aria-label": editLabel,
+      children: /* @__PURE__ */ jsx(Pencil, { size: 20 })
+    }
+  ) }) });
+};
+var EditableHeading = ({
+  value,
+  onChange,
+  onCancel,
+  onSubmit,
+  editLabel = "Edit",
+  fontSize = "3xl",
+  maxW = "lg"
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Editable.Root,
+    {
+      fontSize,
+      maxW,
+      value: String(value ?? ""),
+      onValueChange: (details) => onChange?.(details.value),
+      onValueRevert: (details) => onCancel?.(details.value),
+      onValueCommit: (details) => onSubmit?.(details.value),
+      children: [
+        /* @__PURE__ */ jsx(Editable.Preview, {}),
+        /* @__PURE__ */ jsx(Editable.Input, {}),
+        /* @__PURE__ */ jsx(EditableControls, { editLabel })
+      ]
+    }
+  );
+};
+EditableHeading.displayName = "EditableHeading";
+function FileField(props) {
+  const {
+    name,
+    label,
+    accept,
+    multiple = false,
+    disabled,
+    dragActiveText = "Release to upload",
+    dropHintText = "Drag & drop a file to upload",
+    buttonLabel = "Choose File",
+    useDropzone,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(FormField, { name, label, disabled, ...rest, children: (field) => {
+    if (useDropzone) {
+      return /* @__PURE__ */ jsx(
+        DropzoneContent,
+        {
+          field,
+          accept,
+          multiple,
+          disabled,
+          dragActiveText,
+          dropHintText,
+          buttonLabel,
+          useDropzone
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "file",
+          accept: accept ? Object.values(accept).flat().join(",") : void 0,
+          multiple,
+          disabled,
+          onChange: (e) => {
+            const files = e.target.files;
+            if (!files) return;
+            if (multiple) {
+              field.onChange(Array.from(files));
+            } else {
+              field.onChange(files[0] || null);
+            }
+          }
+        }
+      ),
+      field.value && /* @__PURE__ */ jsx(Text, { mt: 2, fontSize: "sm", color: "fg.muted", children: field.value?.name ?? "File selected" })
+    ] });
+  } });
+}
+FileField.displayName = "FileField";
+var DropzoneContent = ({
+  field,
+  accept,
+  multiple,
+  disabled,
+  dragActiveText,
+  dropHintText,
+  buttonLabel,
+  useDropzone
+}) => {
+  const handleDrop = useCallback(
+    (files) => {
+      if (multiple) {
+        field.onChange(files);
+      } else {
+        const file = files[0];
+        if (file) {
+          field.onChange(
+            Object.assign(file, {
+              preview: URL.createObjectURL(file)
+            })
+          );
+        }
+      }
+    },
+    [field, multiple]
+  );
+  useEffect(() => {
+    return () => {
+      if (field.value?.preview) {
+        URL.revokeObjectURL(field.value.preview);
+      }
+    };
+  }, [field.value]);
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    noClick: true,
+    multiple,
+    disabled,
+    accept,
+    onDrop: handleDrop
+  });
+  return /* @__PURE__ */ jsxs(Box, { ...getRootProps(), children: [
+    /* @__PURE__ */ jsx(Box, { display: "none", ...getInputProps(), asChild: true, children: /* @__PURE__ */ jsx("input", {}) }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        bgColor: "bg.muted",
+        p: 4,
+        rounded: "md",
+        overflow: "hidden",
+        position: "relative",
+        textAlign: "center",
+        children: [
+          isDragActive && /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              pointerEvents: "none",
+              top: "0",
+              insetInlineStart: "0",
+              position: "absolute",
+              backgroundColor: "blackAlpha.400",
+              width: "100%",
+              height: "100%",
+              zIndex: 1,
+              alignItems: "center",
+              justifyContent: "center",
+              direction: "column",
+              color: "white",
+              gap: "3",
+              children: [
+                /* @__PURE__ */ jsx(Upload, { size: 48 }),
+                /* @__PURE__ */ jsx(Text, { fontSize: "lg", fontWeight: "bold", children: dragActiveText })
+              ]
+            }
+          ),
+          field.value?.name && /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "fg.muted", children: field.value.name }),
+          /* @__PURE__ */ jsx(Text, { color: "fg.muted", fontSize: "xs", mt: 2, children: dropHintText }),
+          /* @__PURE__ */ jsxs(Button, { mt: 2, size: "sm", variant: "outline", onClick: open, children: [
+            /* @__PURE__ */ jsx(Upload, { size: 14 }),
+            buttonLabel
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+function InputField({
+  ref,
+  ...props
+}) {
+  const {
+    name,
+    label,
+    placeholder,
+    type,
+    append,
+    prepend,
+    inputProps,
+    readOnly,
+    disabled,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      name,
+      label,
+      readOnly,
+      disabled,
+      ...rest,
+      children: (field) => /* @__PURE__ */ jsx(
+        text_input_default,
+        {
+          ...field,
+          value: field.value ?? "",
+          id: name,
+          placeholder,
+          type,
+          append,
+          prepend,
+          readOnly,
+          disabled,
+          opacity: readOnly ? 0.8 : 1,
+          ref,
+          ...inputProps
+        }
+      )
+    }
+  );
+}
+InputField.displayName = "InputField";
+function MarkdownField(props) {
+  const {
+    name,
+    label,
+    readOnly,
+    MDEditor,
+    minHeight = 200,
+    maxHeight = 600,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(FormField, { name, label, readOnly, ...rest, children: (field) => {
+    if (MDEditor) {
+      if (readOnly && MDEditor.Markdown) {
+        return /* @__PURE__ */ jsx(MDEditor.Markdown, { source: field.value });
+      }
+      return /* @__PURE__ */ jsx(
+        MDEditor,
+        {
+          value: field.value,
+          onChange: (value) => field.onChange(value ?? ""),
+          minHeight,
+          maxHeight,
+          visibleDragbar: true
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        value: field.value ?? "",
+        onChange: (e) => field.onChange(e.target.value),
+        onBlur: field.onBlur,
+        readOnly,
+        style: {
+          padding: "0.75rem",
+          border: "1px solid var(--chakra-colors-border)",
+          borderRadius: "0.375rem",
+          width: "100%",
+          minHeight: `${minHeight}px`,
+          resize: "vertical"
+        }
+      }
+    );
+  } });
+}
+MarkdownField.displayName = "MarkdownField";
+function NumberInputField2({
+  ref,
+  ...props
+}) {
+  const {
+    name,
+    label,
+    min,
+    max,
+    step,
+    showStepper = true,
+    numberInputProps,
+    readOnly,
+    disabled,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      name,
+      label,
+      readOnly,
+      disabled,
+      ...rest,
+      children: (field) => /* @__PURE__ */ jsx(
+        NumberInputRoot,
+        {
+          min,
+          max,
+          step,
+          value: String(field.value ?? 0),
+          onValueChange: (details) => {
+            field.onChange(
+              details.value === "" ? 0 : Number.parseFloat(details.value)
+            );
+          },
+          id: name,
+          readOnly,
+          disabled,
+          showStepper: showStepper && !readOnly,
+          opacity: readOnly ? 0.8 : 1,
+          ...numberInputProps,
+          children: /* @__PURE__ */ jsx(NumberInputField, { name: field.name, ref, onBlur: field.onBlur })
+        }
+      )
+    }
+  );
+}
+NumberInputField2.displayName = "NumberInputField";
+function RadioGroupField(props) {
+  const { name, label, options, radioGroupProps, stackProps, ...rest } = props;
+  return /* @__PURE__ */ jsx(FormField, { name, label, ...rest, children: (field) => /* @__PURE__ */ jsx(
+    RadioGroup.Root,
+    {
+      value: String(field.value ?? ""),
+      onValueChange: (e) => field.onChange(e.value),
+      ...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
+}) {
+  const {
+    name,
+    label,
+    placeholder,
+    selectProps,
+    children,
+    readOnly,
+    disabled,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      name,
+      label,
+      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, {})
+      ] })
+    }
+  );
+}
+SelectField.displayName = "SelectField";
+function SwitchField({
+  ref,
+  ...props
+}) {
+  const { name, label, readOnly, disabled, switchProps, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      name,
+      label,
+      readOnly,
+      disabled,
+      ...rest,
+      children: (field) => /* @__PURE__ */ jsx(
+        Switch,
+        {
+          id: name,
+          name: field.name,
+          checked: field.value || false,
+          onCheckedChange: (details) => field.onChange(!!details.checked),
+          onBlur: field.onBlur,
+          disabled,
+          readOnly,
+          opacity: readOnly ? 0.8 : 1,
+          ref,
+          ...switchProps
+        }
+      )
+    }
+  );
+}
+SwitchField.displayName = "SwitchField";
+function TextareaField({
+  ref,
+  ...props
+}) {
+  const {
+    name,
+    label,
+    placeholder,
+    textareaProps,
+    readOnly,
+    disabled,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      name,
+      label,
+      readOnly,
+      disabled,
+      ...rest,
+      children: (field) => /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ...field,
+          value: String(field.value ?? ""),
+          id: name,
+          placeholder,
+          readOnly,
+          disabled,
+          opacity: readOnly ? 0.8 : 1,
+          ref,
+          ...textareaProps
+        }
+      )
+    }
+  );
+}
+TextareaField.displayName = "TextareaField";
+
+export { ArrayField, CheckboxField, CodeField, ColorPickerField, ControlledFormField, DatePickerField, DirtyFormGuard, EditableHeading, FileField, FormField, InputField, MarkdownField, NumberInputField2 as NumberInputField, RadioGroupField, SelectActionField, SelectField, SwitchField, TextareaField };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map