@koobiq/react-components 0.10.0 → 0.11.1

package/dist/components/DateInput/DateInput.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createCalendar } from "@internationalized/date";
 import { useLocale, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
-import { useDateFieldState, removeDataAttributes, useDateField, FieldErrorContext } from "@koobiq/react-primitives";
+import { useDateFieldState, removeDataAttributes, useSlottedContext, FormContext, useDateField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./DateInput.module.css.js";
 import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate.js";
 import { DateSegment } from "../DateSegment/DateSegment.js";
@@ -38,6 +38,8 @@ function DateInputRender(props, ref) {
     createCalendar
   });
   const domRef = useDOMRef(ref);
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
   const {
     labelProps: labelPropReactAria,
     fieldProps,
@@ -45,7 +47,11 @@ function DateInputRender(props, ref) {
     errorMessageProps,
     inputProps,
     ...validation
-  } = useDateField({ ...removeDataAttributes(props) }, state, domRef);
+  } = useDateField(
+    { ...removeDataAttributes(props), validationBehavior },
+    state,
+    domRef
+  );
   const { isRequired, isDisabled } = state;
   const { isInvalid } = validation;
   const rootProps = mergeProps(

package/dist/components/Dialog/components/DialogCloseButton.d.ts

@@ -4,10 +4,10 @@ export type DialogCloseButtonRef = ComponentRef<'button'>;
 export type DialogCloseButtonProps = ButtonProps;
 export declare const DialogCloseButton: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "children" | "value" | "form" | "style" | "as" | "className" | "autoFocus" | "id" | "tabIndex" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "name" | "target" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "fullWidth" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "variant" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
+}, "children" | "value" | "form" | "style" | "as" | "className" | "autoFocus" | "id" | "tabIndex" | "rel" | "aria-controls" | "aria-describedby" | "aria-details" | "aria-expanded" | "aria-haspopup" | "aria-label" | "aria-labelledby" | "aria-pressed" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onClick" | "name" | "target" | "type" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "variant" | "fullWidth" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
     progress?: boolean;
     disabled?: boolean;
-}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "fullWidth" | "variant" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
+}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "variant" | "fullWidth" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
     progress?: boolean;
     disabled?: boolean;
 }> & {

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,19 @@
+export declare const FormComponent: import("react").ForwardRefExoticComponent<{
+    labelPlacement?: import("..").FormControlPropLabelPlacement | import("../../utils").ResponsiveValue<import("..").FormControlPropLabelPlacement>;
+    labelAlign?: import("..").FormControlPropLabelAlign | import("../../utils").ResponsiveValue<import("..").FormControlPropLabelAlign>;
+    labelInlineSize?: import("./types").FormPropLabelInlineSize | import("../../utils").ResponsiveValue<import("./types").FormPropLabelInlineSize>;
+} & import("@koobiq/react-primitives").FormProps & import("react").RefAttributes<HTMLFormElement>>;
+export declare const Fieldset: import("@koobiq/react-core").PolyForwardComponent<"div", {
+    className?: string;
+}, import("react").ElementType>;
+export declare const Legend: import("@koobiq/react-core").PolyForwardComponent<"p", Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+}, "as" | keyof import("..").TypographyBaseProps> & import("..").TypographyBaseProps & {
+    as?: "p" | undefined;
+}, import("react").ElementType>;
+type CompoundedComponent = typeof FormComponent & {
+    Fieldset: typeof Fieldset;
+    Legend: typeof Legend;
+};
+export declare const Form: CompoundedComponent;
+export {};

package/dist/components/Form/Form.js

@@ -0,0 +1,63 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { Form as Form$1 } from "@koobiq/react-primitives";
+import s from "./Form.module.css.js";
+import { FormContext } from "./FormContext.js";
+import { templatePresets } from "./utils.js";
+import { Typography } from "../Typography/Typography.js";
+import { useMatchedBreakpoints } from "../Provider/BreakpointsContext.js";
+import { getResponsiveValue } from "../../utils/getResponsiveValue/getResponsiveValue.js";
+const FormComponent = forwardRef((props, ref) => {
+  const {
+    labelPlacement: labelPlacementProp,
+    labelAlign: labelAlignProp,
+    labelInlineSize: labelInlineSizeProp,
+    className,
+    style,
+    ...other
+  } = props;
+  const breakpoints = useMatchedBreakpoints();
+  const labelPlacement = getResponsiveValue(labelPlacementProp, breakpoints);
+  const labelAlign = getResponsiveValue(labelAlignProp, breakpoints);
+  const labelInlineSize = getResponsiveValue(labelInlineSizeProp, breakpoints);
+  const orientation = labelPlacement === "side" ? "horizontal" : "vertical";
+  const formStyle = labelInlineSize ? {
+    "--template-columns": templatePresets[labelInlineSize]
+  } : void 0;
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: { labelPlacement, labelAlign }, children: /* @__PURE__ */ jsx(
+    Form$1,
+    {
+      "data-orientation": orientation,
+      className: clsx(s.base, s[orientation], className),
+      style: { ...style, ...formStyle },
+      ...other,
+      ref
+    }
+  ) });
+});
+const Fieldset = polymorphicForwardRef(
+  ({ className, as: Tag = "fieldset", ...other }, ref) => /* @__PURE__ */ jsx(Tag, { className: clsx(s.fieldset, className), ...other, ref })
+);
+const Legend = polymorphicForwardRef(
+  ({ className, as = "p", ...other }, ref) => /* @__PURE__ */ jsx(
+    Typography,
+    {
+      as,
+      variant: "text-big",
+      className: clsx(s.legend, className),
+      ...other,
+      ref
+    }
+  )
+);
+FormComponent.displayName = "Form";
+const Form = FormComponent;
+Form.Fieldset = Fieldset;
+Form.Legend = Legend;
+export {
+  Fieldset,
+  Form,
+  FormComponent,
+  Legend
+};

package/dist/components/Form/Form.module.css.js

@@ -0,0 +1,17 @@
+const base = "kbq-form-40d37e";
+const fieldset = "kbq-form-fieldset-b2924b";
+const legend = "kbq-form-legend-91e738";
+const horizontal = "kbq-form-horizontal-52dea8";
+const s = {
+  base,
+  fieldset,
+  legend,
+  horizontal
+};
+export {
+  base,
+  s as default,
+  fieldset,
+  horizontal,
+  legend
+};

package/dist/components/Form/FormContext.d.ts

@@ -0,0 +1,7 @@
+import type { FormControlPropLabelAlign, FormControlPropLabelPlacement } from '../FormControl';
+export type FormContextProps = {
+    labelPlacement?: FormControlPropLabelPlacement;
+    labelAlign?: FormControlPropLabelAlign;
+};
+export declare const FormContext: import("react").Context<FormContextProps>;
+export declare const useForm: () => FormContextProps;

package/dist/components/Form/FormContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+const FormContext = createContext({});
+const useForm = () => useContext(FormContext);
+export {
+  FormContext,
+  useForm
+};

package/dist/components/Form/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Form';
+export * from './FormContext';
+export * from './types';

package/dist/components/Form/types.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentRef } from 'react';
+import type { FormProps as FormPropsPrimitive } from '@koobiq/react-primitives';
+import type { ResponsiveValue } from '../../utils';
+import type { FormControlPropLabelAlign, FormControlPropLabelPlacement } from '../FormControl';
+export declare const formPropLabelInlineSize: readonly ["80", "128", "160", "200", "240", "280", "320", "360", "400", "1/4", "2/5", "1/2", "max-content"];
+export type FormPropLabelInlineSize = (typeof formPropLabelInlineSize)[number];
+export type FormProps = {
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * Responsive values allowed.
+     * @default 'top'
+     */
+    labelPlacement?: FormControlPropLabelPlacement | ResponsiveValue<FormControlPropLabelPlacement>;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * Responsive values allowed.
+     * @default 'start'
+     */
+    labelAlign?: FormControlPropLabelAlign | ResponsiveValue<FormControlPropLabelAlign>;
+    /**
+     * Size of the label column when `labelPlacement="side"`.
+     * Ignored for `"top"`.
+     *
+     * Supports px tokens (`'80'–'400'`), fractions (`'1/4'`, `'2/5'`, `'1/2'`),
+     * or `'max-content'`. Responsive values allowed.
+     * @default 'max-content'
+     */
+    labelInlineSize?: FormPropLabelInlineSize | ResponsiveValue<FormPropLabelInlineSize>;
+} & FormPropsPrimitive;
+export type FormRef = ComponentRef<'form'>;

package/dist/components/Form/types.js

@@ -0,0 +1,18 @@
+const formPropLabelInlineSize = [
+  "80",
+  "128",
+  "160",
+  "200",
+  "240",
+  "280",
+  "320",
+  "360",
+  "400",
+  "1/4",
+  "2/5",
+  "1/2",
+  "max-content"
+];
+export {
+  formPropLabelInlineSize
+};

package/dist/components/Form/utils.d.ts

@@ -0,0 +1,15 @@
+export declare const templatePresets: {
+    'max-content': undefined;
+    '1/4': string;
+    '2/5': string;
+    '1/2': string;
+    '80': string;
+    '128': string;
+    '160': string;
+    '200': string;
+    '240': string;
+    '280': string;
+    '320': string;
+    '360': string;
+    '400': string;
+};

package/dist/components/Form/utils.js

@@ -0,0 +1,18 @@
+const templatePresets = {
+  "max-content": void 0,
+  "1/4": "1fr 3fr",
+  "2/5": "2fr 3fr",
+  "1/2": "1fr 1fr",
+  "80": "80px 1fr",
+  "128": "128px 1fr",
+  "160": "160px 1fr",
+  "200": "200px 1fr",
+  "240": "240px 1fr",
+  "280": "280px 1fr",
+  "320": "320px 1fr",
+  "360": "360px 1fr",
+  "400": "400px 1fr"
+};
+export {
+  templatePresets
+};

package/dist/components/FormControl/FormControl.js

@@ -1,31 +1,39 @@
 import { jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./FormControl.module.css.js";
+import { useForm } from "../Form/FormContext.js";
 const FormControl = polymorphicForwardRef(
-  ({
-    labelPlacement = "top",
-    labelAlign = "start",
-    as: Tag = "div",
-    fullWidth,
-    className,
-    ...other
-  }, ref) => /* @__PURE__ */ jsx(
-    Tag,
-    {
-      className: clsx(
-        s.base,
-        className,
-        s[labelAlign],
-        s[labelPlacement],
-        fullWidth && s.fullWidth
-      ),
-      "data-label-align": labelAlign,
-      "data-label-placement": labelPlacement,
-      "data-fullwidth": fullWidth || void 0,
-      ...other,
-      ref
-    }
-  )
+  (props, ref) => {
+    const {
+      as: Tag = "div",
+      fullWidth,
+      className,
+      labelAlign: labelAlignProp,
+      labelPlacement: labelPlacementProp,
+      ...other
+    } = props;
+    const { labelPlacement: formLabelPlacement, labelAlign: formLabelAlign } = useForm();
+    const labelPlacement = labelPlacementProp ?? formLabelPlacement ?? "top";
+    const labelAlign = labelAlignProp ?? formLabelAlign ?? "start";
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        className: clsx(
+          s.base,
+          className,
+          s[labelAlign],
+          s[labelPlacement],
+          fullWidth && s.fullWidth
+        ),
+        "data-slot": "form-control",
+        "data-label-align": labelAlign,
+        "data-label-placement": labelPlacement,
+        "data-fullwidth": fullWidth || void 0,
+        ...other,
+        ref
+      }
+    );
+  }
 );
 FormControl.displayName = "FormControl";
 export {

package/dist/components/Input/Input.d.ts

@@ -2,7 +2,7 @@ import { TextField } from '@koobiq/react-primitives';
 import { type FieldContentGroupProps, type FieldCaptionProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
 import { type FormControlProps } from '../FormControl';
 import { type FormControlLabelProps } from '../FormControlLabel';
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "labelPlacement" | "labelAlign" | "fullWidth" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;

package/dist/components/InputNumber/InputNumber.d.ts

@@ -2,7 +2,7 @@ import { NumberField } from '@koobiq/react-primitives';
 import { type FieldCaptionProps, type FieldContentGroupProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
 import { type FormControlProps } from '../FormControl';
 import { type FormControlLabelProps } from '../FormControlLabel';
-export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "labelPlacement" | "labelAlign" | "fullWidth" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;

package/dist/components/List/components/ListSection/ListSection.js

@@ -2,8 +2,8 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useListBoxSection } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
-import { Typography } from "../../../Typography/Typography.js";
 import { ListOption } from "../ListOption/ListOption.js";
+import { Typography } from "../../../Typography/Typography.js";
 const { listHeading } = utilClasses;
 function ListSection({ section, state }) {
   const { itemProps, headingProps, groupProps } = useListBoxSection({

package/dist/components/SearchInput/SearchInput.d.ts

@@ -1,7 +1,7 @@
 import { type FieldCaptionProps, type FieldContentGroupProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
 import { type FormControlProps } from '../FormControl';
 import { type FormControlLabelProps } from '../FormControlLabel';
-export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "validationState" | "description">, "caption" | "style" | "className" | `data-${string}` | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "startAddon" | "endAddon" | "isLabelHidden"> & {
+export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/searchfield").AriaSearchFieldProps, "validationState" | "description">, "caption" | "style" | "className" | "variant" | "labelPlacement" | "labelAlign" | `data-${string}` | "fullWidth" | "slotProps" | "startAddon" | "endAddon" | "isLabelHidden"> & {
     className?: string;
     style?: import("react").CSSProperties;
     isLabelHidden?: boolean;

package/dist/components/SearchInput/SearchInput.js

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { IconMagnifyingGlass16, IconXmarkCircle16 } from "@koobiq/react-icons";
-import { useSearchFieldState, removeDataAttributes, useSearchField, FieldErrorContext } from "@koobiq/react-primitives";
+import { useSearchFieldState, removeDataAttributes, useSlottedContext, FormContext, useSearchField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./SearchInput.module.css.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { FormControl } from "../FormControl/FormControl.js";
@@ -36,6 +36,8 @@ const SearchInput = forwardRef(
     } = props;
     const state = useSearchFieldState(removeDataAttributes(props));
     const domRef = useDOMRef(ref);
+    const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+    const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
     const hasClearButton = state.value !== "" && !isDisabled && !isReadOnly;
     const {
       labelProps: labelPropsAria,
@@ -44,7 +46,11 @@ const SearchInput = forwardRef(
       errorMessageProps: errorMessagePropsAria,
       clearButtonProps: clearButtonPropsAria,
       ...validation
-    } = useSearchField(removeDataAttributes(props), state, domRef);
+    } = useSearchField(
+      { ...removeDataAttributes(props), validationBehavior },
+      state,
+      domRef
+    );
     const { isInvalid } = validation;
     const rootProps = mergeProps(
       {

package/dist/components/Select/Select.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import { useLocalizedStringFormatter, useDOMRef, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
 import { IconXmarkCircle16, IconChevronDownS16 } from "@koobiq/react-icons";
-import { useMultiSelectState, removeDataAttributes, useMultiSelect, FieldErrorContext } from "@koobiq/react-primitives";
+import { useSlottedContext, FormContext, useMultiSelectState, removeDataAttributes, useMultiSelect, FieldErrorContext } from "@koobiq/react-primitives";
 import { PopoverInner } from "../Popover/PopoverInner.js";
 import intlMessages from "./intl.js";
 import s from "./Select.module.css.js";
@@ -47,12 +47,14 @@ function SelectRender(props, ref) {
   } = props;
   const t = useLocalizedStringFormatter(intlMessages);
   const domRef = useDOMRef(ref);
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
   const state = useMultiSelectState(
     removeDataAttributes({ ...props, selectionMode })
   );
   const hasClearButton = isClearable && !isDisabled && state.selectedItems;
   const handleClear = useCallback(() => {
-    state.selectionManager.clearSelection();
+    state.selectionManager.setSelectedKeys(/* @__PURE__ */ new Set());
     onClear?.();
   }, [onClear, state]);
   const {
@@ -67,7 +69,8 @@ function SelectRender(props, ref) {
     removeDataAttributes({
       ...props,
       selectionMode,
-      disallowEmptySelection: true
+      disallowEmptySelection: true,
+      validationBehavior
     }),
     state,
     domRef

package/dist/components/Textarea/Textarea.d.ts

@@ -4,7 +4,7 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
     required?: boolean;
     hiddenLabel?: boolean;
     readonly?: boolean;
-} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "cols" | "rows" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "isLabelHidden" | "expand"> & {
+} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "cols" | "rows" | "variant" | "labelPlacement" | "labelAlign" | "fullWidth" | "slotProps" | "data-testid" | "isLabelHidden" | "expand"> & {
     className?: string;
     style?: import("react").CSSProperties;
     variant?: import("./types").TextareaPropVariant;

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.d.ts

@@ -3,4 +3,4 @@ export declare const TextareaContextConsumer: import("react").ForwardRefExoticCo
     isRequired?: boolean;
     isInvalid?: boolean;
     isDisabled?: boolean;
-} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "labelPlacement" | "variant" | "slotProps" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "labelPlacement" | "slotProps" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TimePicker/TimePicker.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useLocale, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { IconClock16 } from "@koobiq/react-icons";
-import { useTimeFieldState, removeDataAttributes, useTimeField, FieldErrorContext } from "@koobiq/react-primitives";
+import { useSlottedContext, FormContext, useTimeFieldState, removeDataAttributes, useTimeField, FieldErrorContext } from "@koobiq/react-primitives";
 import s from "./TimePicker.module.css.js";
 import { FormControl } from "../FormControl/FormControl.js";
 import { FormControlLabel } from "../FormControlLabel/FormControlLabel.js";
@@ -31,8 +31,11 @@ function TimePickerRender(props, ref) {
     startAddon,
     "data-testid": testId
   } = props;
+  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
+  const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
   const state = useTimeFieldState({
     ...removeDataAttributes(props),
+    validationBehavior,
     locale
   });
   const {

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<import("@react-types/tooltip").TooltipTriggerProps, "children" | "className" | "id" | "offset" | `data-${string}` | "variant" | "placement" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<import("@react-types/tooltip").TooltipTriggerProps, "children" | "className" | "id" | "offset" | "variant" | `data-${string}` | "placement" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
     open?: boolean;
     disabled?: boolean;
 }> & {

package/dist/components/index.d.ts

@@ -37,6 +37,7 @@ export * from './DateInput';
 export * from './DatePicker';
 export * from './TimePicker';
 export * from './SearchInput';
+export * from './Form';
 export * from './layout';
 export { useListData, type ListData, type ListOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
 export { useRouter, useLocale, type Locale, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -82,6 +82,9 @@ import { TimePicker, TimePickerRender } from "./components/TimePicker/TimePicker
 import { timePickerPropLabelAlign, timePickerPropLabelPlacement } from "./components/TimePicker/types.js";
 import { SearchInput } from "./components/SearchInput/SearchInput.js";
 import { searchInputPropLabelAlign, searchInputPropLabelPlacement, searchInputPropVariant } from "./components/SearchInput/types.js";
+import { Fieldset, Form, FormComponent, Legend } from "./components/Form/Form.js";
+import { FormContext, useForm } from "./components/Form/FormContext.js";
+import { formPropLabelInlineSize } from "./components/Form/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -101,7 +104,11 @@ export {
   DatePicker,
   DatePickerRender,
   Divider,
+  Fieldset,
   FlexBox,
+  Form,
+  FormComponent,
+  FormContext,
   FormControl,
   FormControlLabel,
   Grid,
@@ -109,6 +116,7 @@ export {
   IconButton,
   Input,
   InputNumber,
+  Legend,
   Link,
   List,
   ListInner,
@@ -173,6 +181,7 @@ export {
   flexPropWrap,
   formControlPropLabelAlign,
   formControlPropLabelPlacement,
+  formPropLabelInlineSize,
   gridPropGap,
   iconButtonPropSize,
   iconButtonPropVariant,
@@ -223,6 +232,7 @@ export {
   typographyPropVariant,
   useBreakpoints,
   useDateFormatter,
+  useForm,
   useListData,
   useLocale,
   useMatchedBreakpoints,

package/dist/style.css

@@ -4086,7 +4086,7 @@
 }
 
 .kbq-datesegment-3b7153:focus {
-  color: var(--date-input-segment-color);
+  color: highlighttext;
   background-color: highlight;
   outline: none;
 }
@@ -4159,6 +4159,54 @@
 .kbq-searchinput-clearButton-71f872 {
   margin-inline-end: calc(-1 * var(--kbq-size-xxs));
 }
+.kbq-form-40d37e, .kbq-form-fieldset-b2924b {
+  --gap-y: var(--kbq-size-xl);
+  --template-columns: max-content 1fr;
+  display: grid;
+}
+
+:is(.kbq-form-40d37e, .kbq-form-fieldset-b2924b) > [data-slot="form-control"] {
+  width: 100%;
+}
+
+:is(.kbq-form-40d37e, .kbq-form-fieldset-b2924b) > [data-slot="form-control"]:not(:last-child) {
+  margin-block-end: var(--gap-y);
+}
+
+:is(.kbq-form-40d37e, .kbq-form-fieldset-b2924b) > * {
+  grid-column: 1 / -1;
+  justify-self: start;
+}
+
+.kbq-form-fieldset-b2924b {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.kbq-form-fieldset-b2924b .kbq-form-legend-91e738 {
+  margin-block-end: var(--kbq-size-l);
+}
+
+.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b {
+  grid-template-columns: var(--template-columns);
+}
+
+:is(.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b) > [data-slot="form-control"] {
+  grid-template-columns: subgrid;
+  align-items: center;
+  display: grid;
+}
+
+:is(.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b) > [data-slot="form-control"] > :first-child {
+  grid-column: 1;
+  align-self: start;
+}
+
+:is(.kbq-form-horizontal-52dea8, .kbq-form-horizontal-52dea8 .kbq-form-fieldset-b2924b) > [data-slot="form-control"] > :last-child {
+  grid-column: 2;
+  justify-self: start;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-core": "0.10.0",
-    "@koobiq/logger": "0.10.0",
-    "@koobiq/react-icons": "0.10.0",
-    "@koobiq/react-primitives": "0.10.0"
+    "@koobiq/react-core": "0.11.1",
+    "@koobiq/logger": "0.11.1",
+    "@koobiq/react-primitives": "0.11.1",
+    "@koobiq/react-icons": "0.11.1"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",