@knkcs/anker 2.3.2 → 2.5.1

package/dist/feedback/index.js

@@ -1,6 +1,6 @@
 import { Progress } from '../chunk-WEP2AIQ5.js';
-import { IconButton } from '../chunk-JS7ZEZV3.js';
 import { Spinner } from '../chunk-5YDCDC4B.js';
+import { IconButton } from '../chunk-JS7ZEZV3.js';
 import { Box, Flex, Text, Stack, HStack } from '../chunk-G4QMIXLC.js';
 import { Dialog, Portal, ButtonGroup, Button } from '@chakra-ui/react';
 import { createContext, useState, useRef, useCallback, useContext, useEffect } from 'react';

package/dist/forms/index.d.ts

@@ -16,12 +16,17 @@ interface FormFieldProps<T extends FieldValues> {
     disabled?: boolean;
     readOnly?: boolean;
     actions?: React__default.ReactNode;
+    /** When false, the dirty-marker on the label is suppressed and the
+     * children-callback's `meta.isDirty` is forced to false. @default true */
+    showDirtyState?: boolean;
     children: (field: ControllerRenderProps<T, Path<T>> & {
         /** Computed aria-describedby linking to helper/description/error elements. */
         "aria-describedby"?: string;
+    }, meta: {
+        isDirty: boolean;
     }) => React__default.ReactNode;
 }
-declare function FormField<T extends FieldValues>({ name, label, helperText, description, required, disabled, readOnly, actions, children, }: FormFieldProps<T>): react_jsx_runtime.JSX.Element;
+declare function FormField<T extends FieldValues>({ name, label, helperText, description, required, disabled, readOnly, actions, showDirtyState, children, }: FormFieldProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ArrayFieldProps<T extends FieldValues> extends Omit<FormFieldProps<T>, "children"> {
     /**
@@ -52,18 +57,13 @@ declare namespace ArrayField {
     var displayName: string;
 }
 
-interface CheckboxFieldProps<T extends FieldValues> {
-    name: Path<T>;
-    label?: string;
+interface CheckboxFieldProps<T extends FieldValues> extends Omit<FormFieldProps<T>, "children"> {
     /** When provided, the field is treated as an array of checked values. */
     value?: string | number;
-    disabled?: boolean;
-    helperText?: React__default.ReactNode;
+    /** Content to display after the checkbox. */
     children?: React__default.ReactNode;
 }
-declare function CheckboxField<T extends FieldValues>({ ref, ...props }: CheckboxFieldProps<T> & {
-    ref?: React__default.Ref<HTMLLabelElement>;
-}): react_jsx_runtime.JSX.Element;
+declare function CheckboxField<T extends FieldValues>({ ...props }: CheckboxFieldProps<T>): react_jsx_runtime.JSX.Element;
 
 type MonacoEditorProps = {
     value?: string;
@@ -123,6 +123,20 @@ declare function DatePickerField<T extends FieldValues>({ ref, ...props }: DateP
     ref?: React__default.Ref<HTMLInputElement>;
 }): react_jsx_runtime.JSX.Element;
 
+interface DirtyCounterProps {
+    /**
+     * Label template. The literal `{count}` is replaced with the dirty
+     * field count. @default "{count} ungespeicherte Änderungen"
+     */
+    label?: string;
+    /** Render nothing when no fields are dirty. @default true */
+    hideWhenClean?: boolean;
+}
+declare function DirtyCounter({ label, hideWhenClean, }: DirtyCounterProps): react_jsx_runtime.JSX.Element | null;
+declare namespace DirtyCounter {
+    var displayName: string;
+}
+
 interface DirtyFormGuardProps {
     /** Dialog title. @default "You have unsaved changes" */
     title?: string;
@@ -266,4 +280,15 @@ declare function TextareaField<T extends FieldValues>({ ref, ...props }: Textare
     ref?: React__default.Ref<HTMLTextAreaElement>;
 }): react_jsx_runtime.JSX.Element;
 
-export { ArrayField, type ArrayFieldProps, CheckboxField, type CheckboxFieldProps, CodeField, type CodeFieldProps, ColorPickerField, type ColorPickerFieldProps, ControlledFormField, type ControlledFormFieldProps, DatePickerField, type DatePickerFieldProps, DirtyFormGuard, type DirtyFormGuardProps, FileField, type FileFieldProps, FormField, type FormFieldProps, InlineEdit, type InlineEditProps, InputField, type InputFieldProps, MarkdownField, type MarkdownFieldProps, NumberInputField, type NumberInputFieldProps, RadioGroupField, type RadioGroupFieldProps, type RadioOption, SelectField, type SelectFieldProps, SwitchField, type SwitchFieldProps, TextareaField, type TextareaFieldProps };
+interface UseFieldDirtyOptions {
+    /** Set to false to never report dirty (opt-out per field). */
+    showDirtyState?: boolean;
+}
+/**
+ * useFieldDirty returns true when the field at `name` is dirty (changed
+ * from its react-hook-form default) AND visual marking isn't suppressed.
+ * Safe to call outside a FormProvider — returns false in that case.
+ */
+declare function useFieldDirty(name: string, opts?: UseFieldDirtyOptions): boolean;
+
+export { ArrayField, type ArrayFieldProps, CheckboxField, type CheckboxFieldProps, CodeField, type CodeFieldProps, ColorPickerField, type ColorPickerFieldProps, ControlledFormField, type ControlledFormFieldProps, DatePickerField, type DatePickerFieldProps, DirtyCounter, type DirtyCounterProps, DirtyFormGuard, type DirtyFormGuardProps, FileField, type FileFieldProps, FormField, type FormFieldProps, InlineEdit, type InlineEditProps, InputField, type InputFieldProps, MarkdownField, type MarkdownFieldProps, NumberInputField, type NumberInputFieldProps, RadioGroupField, type RadioGroupFieldProps, type RadioOption, SelectField, type SelectFieldProps, SwitchField, type SwitchFieldProps, TextareaField, type TextareaFieldProps, type UseFieldDirtyOptions, useFieldDirty };

package/dist/forms/index.js

@@ -20,6 +20,7 @@ function FormField({
   disabled,
   readOnly,
   actions,
+  showDirtyState = true,
   children
 }) {
   const { control } = useFormContext();
@@ -38,6 +39,7 @@ function FormField({
           helperText ? helperId : null,
           fieldState.error ? errorId : null
         ].filter(Boolean).join(" ") || void 0;
+        const isDirty = Boolean(showDirtyState && fieldState.isDirty);
         return /* @__PURE__ */ jsxs(
           Field.Root,
           {
@@ -45,12 +47,31 @@ function FormField({
             required,
             disabled,
             readOnly,
+            "data-dirty": isDirty ? "true" : void 0,
             children: [
               label && (typeof label === "string" ? /* @__PURE__ */ jsxs(HStack, { children: [
-                /* @__PURE__ */ jsx(Field.Label, { flex: "1", htmlFor: name, children: label }),
+                /* @__PURE__ */ jsxs(Field.Label, { flex: "1", htmlFor: name, children: [
+                  label,
+                  isDirty && /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      as: "span",
+                      display: "inline-block",
+                      width: "6px",
+                      height: "6px",
+                      borderRadius: "full",
+                      bg: "yellow.500",
+                      ml: "2",
+                      "aria-label": "ungespeicherte \xC4nderung"
+                    }
+                  )
+                ] }),
                 actions
               ] }) : label),
-              children({ ...field, "aria-describedby": describedBy }),
+              children(
+                { ...field, "aria-describedby": describedBy },
+                { isDirty }
+              ),
               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 })
@@ -73,30 +94,41 @@ function ArrayField(props) {
     addLabel = "Add Field",
     removeLabel = "Remove Item",
     readOnly,
+    showDirtyState,
     emptyState,
     ...rest
   } = props;
-  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,
+  return /* @__PURE__ */ jsx(
+    FormField,
     {
       name,
-      valueHeader,
-      keyHeader,
-      addLabel,
-      removeLabel,
+      label,
       readOnly,
-      emptyState
-    }
-  ) : /* @__PURE__ */ jsx(
-    KeyedArray,
-    {
-      name,
-      valueHeader,
-      keyHeader,
-      keys,
-      readOnly
+      showDirtyState,
+      ...rest,
+      children: () => /* @__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) => {
@@ -184,17 +216,28 @@ var KeyedArray = React.memo((props) => {
 });
 KeyedArray.displayName = "KeyedArray";
 function CheckboxField({
-  ref,
   ...props
 }) {
-  const { name, label, value, disabled, helperText, children } = props;
-  const { control } = useFormContext();
+  const {
+    name,
+    label,
+    value,
+    disabled,
+    showDirtyState,
+    helperText,
+    children,
+    ...rest
+  } = props;
   return /* @__PURE__ */ jsx(
-    Controller,
+    FormField,
     {
       name,
-      control,
-      render: ({ field, fieldState }) => {
+      label,
+      disabled,
+      showDirtyState,
+      helperText,
+      ...rest,
+      children: (field) => {
         const isArrayMode = value !== void 0;
         const isChecked = isArrayMode ? Array.isArray(field.value) && field.value.includes(value) : !!field.value;
         const handleCheckedChange = (details) => {
@@ -214,32 +257,24 @@ function CheckboxField({
           }
         };
         const uniqueId = isArrayMode ? `${name}-${String(value)}` : name;
-        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 })
-        ] });
+        return /* @__PURE__ */ jsxs(
+          Checkbox.Root,
+          {
+            id: uniqueId,
+            name: field.name,
+            value: isArrayMode ? String(value) : void 0,
+            checked: isChecked,
+            onCheckedChange: handleCheckedChange,
+            onBlur: field.onBlur,
+            disabled,
+            "aria-describedby": field["aria-describedby"],
+            children: [
+              /* @__PURE__ */ jsx(Checkbox.HiddenInput, {}),
+              /* @__PURE__ */ jsx(Checkbox.Control, { children: /* @__PURE__ */ jsx(Checkbox.Indicator, {}) }),
+              (label || children) && /* @__PURE__ */ jsx(Checkbox.Label, { children })
+            ]
+          }
+        );
       }
     }
   );
@@ -429,6 +464,29 @@ function DatePickerField({
   );
 }
 DatePickerField.displayName = "DatePickerField";
+function DirtyCounter({
+  label = "{count} ungespeicherte \xC4nderungen",
+  hideWhenClean = true
+}) {
+  const ctx = useFormContext();
+  const dirty = ctx ? ctx.formState.dirtyFields : {};
+  const count = Object.keys(dirty).length;
+  if (count === 0 && hideWhenClean) return null;
+  return /* @__PURE__ */ jsxs(HStack, { gap: "2", fontSize: "sm", color: "yellow.700", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        width: "6px",
+        height: "6px",
+        borderRadius: "full",
+        bg: "yellow.500",
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { children: label.replace("{count}", String(count)) })
+  ] });
+}
+DirtyCounter.displayName = "DirtyCounter";
 var DirtyFormGuard = ({
   title,
   message,
@@ -669,6 +727,7 @@ function InputField({
     inputProps,
     readOnly,
     disabled,
+    showDirtyState,
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(
@@ -678,8 +737,9 @@ function InputField({
       label,
       readOnly,
       disabled,
+      showDirtyState,
       ...rest,
-      children: (field) => /* @__PURE__ */ jsx(
+      children: (field, { isDirty }) => /* @__PURE__ */ jsx(
         text_input_default,
         {
           ...field,
@@ -692,6 +752,8 @@ function InputField({
           readOnly,
           disabled,
           opacity: readOnly ? 0.8 : 1,
+          borderColor: isDirty ? "yellow.400" : void 0,
+          bg: isDirty ? "yellow.50" : void 0,
           ref,
           ...inputProps
         }
@@ -805,17 +867,34 @@ function NumberInputField2({
 }
 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,
+  const {
+    name,
+    label,
+    options,
+    showDirtyState,
+    radioGroupProps,
+    stackProps,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    FormField,
     {
-      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)) })
+      name,
+      label,
+      showDirtyState,
+      ...rest,
+      children: (field) => /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          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";
 function SelectField({
@@ -830,6 +909,7 @@ function SelectField({
     children,
     readOnly,
     disabled,
+    showDirtyState,
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(
@@ -839,8 +919,9 @@ function SelectField({
       label,
       readOnly,
       disabled,
+      showDirtyState,
       ...rest,
-      children: (field) => /* @__PURE__ */ jsx(
+      children: (field, { isDirty }) => /* @__PURE__ */ jsx(
         NativeSelect,
         {
           disabled: readOnly || disabled,
@@ -849,6 +930,8 @@ function SelectField({
           value: String(field.value ?? ""),
           id: name,
           ref,
+          borderColor: isDirty ? "yellow.400" : void 0,
+          bg: isDirty ? "yellow.50" : void 0,
           ...selectProps,
           children
         }
@@ -861,7 +944,15 @@ function SwitchField({
   ref,
   ...props
 }) {
-  const { name, label, readOnly, disabled, switchProps, ...rest } = props;
+  const {
+    name,
+    label,
+    readOnly,
+    disabled,
+    showDirtyState,
+    switchProps,
+    ...rest
+  } = props;
   return /* @__PURE__ */ jsx(
     FormField,
     {
@@ -869,6 +960,7 @@ function SwitchField({
       label,
       readOnly,
       disabled,
+      showDirtyState,
       ...rest,
       children: (field) => /* @__PURE__ */ jsx(
         Switch,
@@ -901,6 +993,7 @@ function TextareaField({
     textareaProps,
     readOnly,
     disabled,
+    showDirtyState,
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(
@@ -910,8 +1003,9 @@ function TextareaField({
       label,
       readOnly,
       disabled,
+      showDirtyState,
       ...rest,
-      children: (field) => /* @__PURE__ */ jsx(
+      children: (field, { isDirty }) => /* @__PURE__ */ jsx(
         Textarea,
         {
           ...field,
@@ -921,6 +1015,8 @@ function TextareaField({
           readOnly,
           disabled,
           opacity: readOnly ? 0.8 : 1,
+          borderColor: isDirty ? "yellow.400" : void 0,
+          bg: isDirty ? "yellow.50" : void 0,
           ref,
           ...textareaProps
         }
@@ -929,7 +1025,14 @@ function TextareaField({
   );
 }
 TextareaField.displayName = "TextareaField";
+function useFieldDirty(name, opts = {}) {
+  const ctx = useFormContext();
+  const { showDirtyState = true } = opts;
+  if (!showDirtyState || !ctx) return false;
+  const dirty = ctx.formState.dirtyFields;
+  return Boolean(dirty[name]);
+}
 
-export { ArrayField, CheckboxField, CodeField, ColorPickerField, ControlledFormField, DatePickerField, DirtyFormGuard, FileField, FormField, InlineEdit, InputField, MarkdownField, NumberInputField2 as NumberInputField, RadioGroupField, SelectField, SwitchField, TextareaField };
+export { ArrayField, CheckboxField, CodeField, ColorPickerField, ControlledFormField, DatePickerField, DirtyCounter, DirtyFormGuard, FileField, FormField, InlineEdit, InputField, MarkdownField, NumberInputField2 as NumberInputField, RadioGroupField, SelectField, SwitchField, TextareaField, useFieldDirty };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map