@arcote.tech/arc-ds 0.7.26 → 0.7.28

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.7.26",
+  "version": "0.7.28",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Design System for Arc framework — CVA-based components with display modes and variant overrides",
@@ -30,7 +30,7 @@
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.7.26",
+    "@arcote.tech/arc": "^0.7.28",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

package/src/ds/form/fields/index.ts

@@ -1,5 +1,7 @@
 export { TextField } from "./text-field";
 export type { TextFieldProps } from "./text-field";
+export { NumberField } from "./number-field";
+export type { NumberFieldProps } from "./number-field";
 export { TextareaField } from "./textarea-field";
 export type { TextareaFieldProps } from "./textarea-field";
 export { TagField } from "./tag-field";

package/src/ds/form/fields/number-field.tsx

@@ -0,0 +1,63 @@
+import { useContext } from "react";
+import type { ReactNode } from "react";
+import { Input } from "../../input/input";
+import { FormFieldContext } from "../field";
+
+export interface NumberFieldProps {
+  label?: ReactNode;
+  placeholder?: string;
+  /** Wartość liczbowa pola; `undefined` = puste. */
+  value?: number;
+  /** Emituje `number` dla poprawnej liczby albo `undefined` dla pustego/niepełnego wejścia. */
+  onChange?: (value: number | undefined) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  className?: string;
+}
+
+/**
+ * Pole liczbowe formularza. Bliźniak `TextField`, ale binduje wprost do pola
+ * `number()` schematu — emituje `number | undefined`, więc nie trzeba ręcznej
+ * koercji `Number(...)` na onSubmit (wcześniejszy wzorzec obejścia).
+ */
+export function NumberField({
+  label,
+  placeholder,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  className,
+}: NumberFieldProps) {
+  const fieldCtx = useContext(FormFieldContext);
+  const hasError = fieldCtx?.errors && fieldCtx.messages?.length > 0;
+
+  return (
+    <div className={className}>
+      {label && (
+        <label className="block text-sm font-medium text-muted-foreground mb-1.5">
+          {label}
+        </label>
+      )}
+      <Input
+        type="number"
+        inputMode="decimal"
+        value={value ?? ""}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          // valueAsNumber daje NaN dla pustego/niepełnego wejścia ("", "-") → undefined.
+          const next = e.target.valueAsNumber;
+          onChange?.(Number.isNaN(next) ? undefined : next);
+        }}
+        placeholder={placeholder}
+      />
+      {hasError && (
+        <p className="mt-1 text-xs text-destructive">{fieldCtx.messages[0]}</p>
+      )}
+    </div>
+  );
+}

package/src/ds/form/form.tsx

@@ -4,6 +4,8 @@ import {
   type ArcObjectAny,
   type ArcObjectKeys,
   type ArcObjectValueByKey,
+  type ArcOr,
+  type ArcOrAny,
   ArcOptional,
   deepMerge,
 } from "@arcote.tech/arc";
@@ -18,52 +20,83 @@ import React, {
 } from "react";
 import { FormField } from "./field";
 
-export type FormContextValue<T extends ArcObjectAny> = {
-  values: Partial<Record<ArcObjectKeys<T>, any>>;
-  errors: Partial<Record<ArcObjectKeys<T>, Record<string, any>>>;
-  dirty: Set<ArcObjectKeys<T>>;
+// Schema akceptowane przez Form: pojedynczy obiekt LUB union obiektów (`or()`).
+// Dla unionu pola = suma pól wariantów, walidacja = wariant dopasowany do
+// bieżącej wartości (dyskryminowany union — patrz ArcOr.validate).
+export type FormSchemaAny = ArcObjectAny | ArcOrAny;
+
+// Warianty schematu: dla `or(...)` obiektowe człony, w przeciwnym razie sam typ.
+type SchemaVariant<T> = T extends ArcOr<infer Els>
+  ? Extract<Els[number], ArcObjectAny>
+  : T;
+
+// Klucze pól = suma kluczy wszystkich wariantów (dystrybucja po unionie).
+type SchemaKeys<T> = SchemaVariant<T> extends infer V
+  ? V extends ArcObjectAny
+    ? ArcObjectKeys<V>
+    : never
+  : never;
+
+// Element pola pod kluczem K — z wariantu(ów), które ten klucz posiadają.
+type SchemaValueByKey<T, K extends PropertyKey> = SchemaVariant<T> extends infer V
+  ? V extends ArcObjectAny
+    ? K extends ArcObjectKeys<V>
+      ? ArcObjectValueByKey<V, K>
+      : never
+    : never
+  : never;
+
+export type FormContextValue<T extends FormSchemaAny> = {
+  values: Partial<Record<SchemaKeys<T>, any>>;
+  errors: Partial<Record<SchemaKeys<T>, Record<string, any>>>;
+  dirty: Set<SchemaKeys<T>>;
   isSubmitted: boolean;
-  setFieldValue: (field: ArcObjectKeys<T>, value: any) => void;
-  setFieldDirty: (field: ArcObjectKeys<T>) => void;
-  validatePartial: (keys: ArcObjectKeys<T>[]) => boolean;
+  setFieldValue: (field: SchemaKeys<T>, value: any) => void;
+  setFieldDirty: (field: SchemaKeys<T>) => void;
+  validatePartial: (keys: SchemaKeys<T>[]) => boolean;
 };
 
-export type FormRef<T extends ArcObjectAny> = {
+export type FormRef<T extends FormSchemaAny> = {
   submit: () => Promise<void>;
   getValues: () => Partial<$type<T>>;
   validate: () => boolean;
-  setFieldValue: (field: ArcObjectKeys<T>, value: any) => void;
+  setFieldValue: (field: SchemaKeys<T>, value: any) => void;
 };
 
-export type FormFields<T extends ArcObjectAny> = {
-  [K in ArcObjectKeys<T> as Capitalize<`${K}`>]: ArcObjectValueByKey<
+export type FormFields<T extends FormSchemaAny> = {
+  [K in SchemaKeys<T> as Capitalize<`${K}`>]: SchemaValueByKey<
     T,
     K
   > extends ArcObjectAny
     ? ReturnType<
         typeof FormField<
-          ArcObjectValueByKey<T, K>,
-          FormFields<ArcObjectValueByKey<T, K>>
+          SchemaValueByKey<T, K>,
+          FormFields<SchemaValueByKey<T, K>>
         >
       >
-    : ArcObjectValueByKey<T, K> extends ArcOptional<
-          infer U extends ArcObjectAny
-        >
-      ? ReturnType<typeof FormField<ArcObjectValueByKey<T, K>, FormFields<U>>>
-      : ReturnType<typeof FormField<ArcObjectValueByKey<T, K>>>;
+    : SchemaValueByKey<T, K> extends ArcOptional<infer U extends ArcObjectAny>
+      ? ReturnType<typeof FormField<SchemaValueByKey<T, K>, FormFields<U>>>
+      : ReturnType<typeof FormField<SchemaValueByKey<T, K>>>;
 };
 
-export type FormProps<T extends ArcObjectAny> = {
+export type FormProps<T extends FormSchemaAny> = {
   render: (props: FormFields<T>, values: Partial<$type<T>>) => React.ReactNode;
   schema: T;
   onSubmit: (values: $type<T>) => void | Promise<void>;
   onUnvalidatedSubmit?: (values: Partial<$type<T>>, errors: any) => void;
   defaults?: Partial<$type<T>> | null;
+  /**
+   * Wywoływane przy każdej zmianie wartości — `isValid` mówi, czy bieżące
+   * wartości przechodzą walidację schematu (dla `or()` — wariantu aktywnego).
+   * Pozwala stronie obserwować wartości i walidność bez własnego stanu pól
+   * (np. by gatować zewnętrzny przycisk lub zbudować snapshot z wartości).
+   */
+  onValuesChange?: (values: Partial<$type<T>>, isValid: boolean) => void;
 };
 
 export const FormContext = createContext<FormContextValue<any> | null>(null);
 
-export function useForm<T extends ArcObjectAny>(): FormContextValue<T> {
+export function useForm<T extends FormSchemaAny>(): FormContextValue<T> {
   const context = React.useContext(FormContext);
   if (!context) {
     throw new Error("useForm must be used within a Form component");
@@ -100,16 +133,17 @@ function getNestedValue(obj: any, path: string): any {
   return path.split(".").reduce((current, key) => current?.[key], obj);
 }
 
-export const Form = forwardRef(function Form<T extends ArcObjectAny>(
+export const Form = forwardRef(function Form<T extends FormSchemaAny>(
   props: FormProps<T>,
   ref: React.Ref<FormRef<T>>,
 ) {
-  const { render, schema, onSubmit, defaults, onUnvalidatedSubmit } = props;
+  const { render, schema, onSubmit, defaults, onUnvalidatedSubmit, onValuesChange } =
+    props;
   const [values, setValues] = useState<Partial<$type<T>>>({});
   const [errors, setErrors] = useState<
-    Partial<Record<ArcObjectKeys<T>, Record<string, any>>>
+    Partial<Record<SchemaKeys<T>, Record<string, any>>>
   >({});
-  const [dirty, setDirty] = useState<Set<ArcObjectKeys<T>>>(new Set());
+  const [dirty, setDirty] = useState<Set<SchemaKeys<T>>>(new Set());
   const [isSubmitted, setIsSubmitted] = useState(false);
 
   // Set initial values from defaults prop
@@ -125,12 +159,12 @@ export const Form = forwardRef(function Form<T extends ArcObjectAny>(
   const validate = useCallback(() => {
     const errors = schema.validate(values);
     setErrors(errors as any);
-    setDirty(new Set(schema.entries().map(([key]) => key as ArcObjectKeys<T>)));
-    return Object.values(errors).some((result) => result);
+    setDirty(new Set(schema.entries().map(([key]) => key as SchemaKeys<T>)));
+    return Object.values(errors as any).some((result) => result);
   }, [schema, values]);
 
   const validatePartial = useCallback(
-    (keys: ArcObjectKeys<T>[]) => {
+    (keys: SchemaKeys<T>[]) => {
       const partialValues = keys.reduce(
         (acc, key) => {
           const value = getNestedValue(values, key as string);
@@ -139,7 +173,7 @@ export const Form = forwardRef(function Form<T extends ArcObjectAny>(
           }
           return acc;
         },
-        {} as Partial<Record<ArcObjectKeys<T>, any>>,
+        {} as Partial<Record<SchemaKeys<T>, any>>,
       );
       const errors = schema.validatePartial(partialValues);
       if (errors) setErrors((prev) => deepMerge(prev, errors as any));
@@ -153,16 +187,16 @@ export const Form = forwardRef(function Form<T extends ArcObjectAny>(
         }
         return newSet;
       });
-      return Object.values(errors).some((result) => result);
+      return Object.values(errors as any).some((result) => result);
     },
     [schema, values, dirty],
   );
 
-  const setFieldValue = useCallback((field: ArcObjectKeys<T>, value: any) => {
+  const setFieldValue = useCallback((field: SchemaKeys<T>, value: any) => {
     setValues((prev) => setNestedValue(prev, field as string, value));
   }, []);
 
-  const setFieldDirty = useCallback((field: ArcObjectKeys<T>) => {
+  const setFieldDirty = useCallback((field: SchemaKeys<T>) => {
     setDirty((prev) => new Set([...prev, field]));
   }, []);
 
@@ -176,12 +210,19 @@ export const Form = forwardRef(function Form<T extends ArcObjectAny>(
         }
         return acc;
       },
-      {} as Partial<Record<ArcObjectKeys<T>, any>>,
+      {} as Partial<Record<SchemaKeys<T>, any>>,
     );
     const errors = schema.validatePartial(partialValues);
     setErrors(errors as any);
   }, [values, dirty]);
 
+  // Lift wartości + walidności do rodzica (obserwowalny formularz). Walidność =
+  // pełna walidacja schematu (dla `or()` wariantu aktywnego) bez efektów ubocznych.
+  useEffect(() => {
+    if (!onValuesChange) return;
+    onValuesChange(values, !schema.validate(values));
+  }, [values, schema, onValuesChange]);
+
   const handleSubmit = useCallback(
     async (e?: React.FormEvent) => {
       if (e) {
@@ -263,7 +304,7 @@ export const Form = forwardRef(function Form<T extends ArcObjectAny>(
         .entries()
         .map(([key, value]) => [
           key.charAt(0).toUpperCase() + key.slice(1),
-          buildFieldsStructure(value, key, defaults?.[key]),
+          buildFieldsStructure(value, key, (defaults as any)?.[key]),
         ]),
     );
   }, [schema, defaults, buildFieldsStructure]);
@@ -294,6 +335,6 @@ export const Form = forwardRef(function Form<T extends ArcObjectAny>(
       <form onSubmit={handleSubmit}>{render(Fields as any, values)}</form>
     </FormContext.Provider>
   );
-}) as <T extends ArcObjectAny>(
+}) as <T extends FormSchemaAny>(
   props: FormProps<T> & React.RefAttributes<FormRef<T>>,
 ) => React.JSX.Element;

package/src/index.ts

@@ -24,6 +24,7 @@ export {
   useFormField,
   useFormPart,
   TextField,
+  NumberField,
   TextareaField,
   TagField,
   SelectField,
@@ -37,6 +38,7 @@ export type {
   FormFields,
   FormFieldData,
   TextFieldProps,
+  NumberFieldProps,
   TextareaFieldProps,
   TagFieldProps,
   SelectFieldProps,

package/src/layout/layout.tsx

@@ -310,6 +310,8 @@ function MobileToolbar() {
   const toolbarRef = useRef<HTMLDivElement>(null);
   const collapseRef = useRef(collapse);
   collapseRef.current = collapse;
+  const isExpandedRef = useRef(isExpanded);
+  isExpandedRef.current = isExpanded;
 
   useEffect(() => {
     if (isExpanded) {
@@ -319,10 +321,27 @@ function MobileToolbar() {
     }
   }, [isExpanded, requestOverlay, releaseOverlay]);
 
+  // Blokada scrolla treści pod spodem gdy panel jest rozwinięty — panel nakłada
+  // się na stronę (overlay), więc scroll strony musi być zamrożony na miejscu.
+  useEffect(() => {
+    if (!isExpanded) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isExpanded]);
+
   useEffect(() => {
     const el = toolbarRef.current;
     if (!el) return;
-    const update = () => setTopHeight(el.offsetHeight);
+    // Mierzymy tylko wysokość ZWINIĘTEGO paska. Gdy panel jest rozwinięty,
+    // ignorujemy zmiany rozmiaru — rozwinięty panel ma się nakładać na treść,
+    // a nie wypychać jej w dół rosnącym spacerem.
+    const update = () => {
+      if (isExpandedRef.current) return;
+      setTopHeight(el.offsetHeight);
+    };
     update();
     const ro = new ResizeObserver(update);
     ro.observe(el);