@koobiq/react-components 0.11.0 → 0.12.0

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -4,12 +4,7 @@ import { useDOMRef, mergeProps } from "@koobiq/react-core";
 import { useTextareaContext } from "@koobiq/react-primitives";
 import s from "../../Textarea.module.css.js";
 import { useTextareaAutosize } from "../../utils/useTextareaAutosize.js";
-import { FormControlLabel } from "../../../FormControlLabel/FormControlLabel.js";
-import { Field } from "../../../FieldComponents/Field/Field.js";
-import { FieldContentGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroup.js";
-import { FieldInput } from "../../../FieldComponents/FieldInput/FieldInput.js";
-import { FieldCaption } from "../../../FieldComponents/FieldCaption/FieldCaption.js";
-import { FieldError } from "../../../FieldComponents/FieldError/FieldError.js";
+import { FormField } from "../../../FormField/FormField.js";
 const TextareaContextConsumer = forwardRef((props, ref) => {
   const {
     rows,
@@ -26,38 +21,47 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
     errorMessage
   } = props;
   const { value } = useTextareaContext();
-  const domRef = useDOMRef(ref);
-  useTextareaAutosize(domRef, value, expand === "auto-size");
+  const textareaRef = useDOMRef(ref);
+  useTextareaAutosize(textareaRef, value, expand === "auto-size");
   const textareaProps = mergeProps(
     {
-      isInvalid,
       rows,
       cols,
-      variant,
       value,
-      isDisabled,
       ...expand && { className: s[expand] },
-      ref: domRef
+      ref: textareaRef
     },
     slotProps?.textarea
   );
-  const captionProps = mergeProps({ children: caption }, slotProps?.caption);
+  const captionProps = mergeProps(
+    { children: caption },
+    slotProps?.caption
+  );
   const errorProps = mergeProps(
-    { children: errorMessage, className: s.error },
+    { children: errorMessage },
     slotProps?.errorMessage
   );
   const groupProps = {
     variant,
     isInvalid,
+    className: s.group,
+    onMouseDown: (e) => {
+      if (e.currentTarget !== e.target) return;
+      e.preventDefault();
+      textareaRef.current?.focus();
+    },
     isDisabled
   };
-  const labelProps = mergeProps({ isHidden: isLabelHidden, children: label, isRequired }, slotProps?.label);
+  const labelProps = mergeProps(
+    { isHidden: isLabelHidden, children: label, isRequired },
+    slotProps?.label
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
-    /* @__PURE__ */ jsxs(Field, { children: [
-      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { as: "textarea", ...textareaProps }) }),
-      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+    /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+    /* @__PURE__ */ jsxs("div", { className: s.body, children: [
+      /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { as: "textarea", ...textareaProps }) }),
+      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
+      /* @__PURE__ */ jsx(FormField.Error, { ...errorProps })
     ] })
   ] });
 });

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

@@ -1,17 +1,15 @@
 import type { ComponentRef, CSSProperties, ReactNode } from 'react';
 import type { ExtendableProps } from '@koobiq/react-core';
 import type { TextFieldProps } from '@koobiq/react-primitives';
-import { type FieldCaptionProps, type FieldContentGroupPropVariant, type FieldErrorProps, type FieldInputProps } from '../FieldComponents';
-import { type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
-import type { FormControlLabelProps } from '../FormControlLabel';
+import type { FormFieldLabelProps, FormFieldInputProps, FormFieldErrorProps, FormFieldCaptionProps, FormFieldPropLabelAlign, FormFieldPropLabelPlacement, FormFieldControlGroupPropVariant } from '../FormField';
 export declare const textareaPropVariant: readonly ["filled", "transparent"];
-export type TextareaPropVariant = FieldContentGroupPropVariant;
+export type TextareaPropVariant = FormFieldControlGroupPropVariant;
 export declare const textareaPropExpand: readonly ["auto-size", "vertical-resize"];
 export type TextareaPropExpand = (typeof textareaPropExpand)[number];
 export declare const textareaPropLabelPlacement: readonly ["top", "side"];
-export type TextareaPropLabelPlacement = FormControlPropLabelPlacement;
+export type TextareaPropLabelPlacement = FormFieldPropLabelPlacement;
 export declare const textareaPropLabelAlign: readonly ["start", "end"];
-export type TextareaPropLabelAlign = FormControlPropLabelAlign;
+export type TextareaPropLabelAlign = FormFieldPropLabelAlign;
 type TextareaDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
@@ -89,10 +87,10 @@ export type TextareaProps = ExtendableProps<{
     'data-testid'?: string | number;
     /** The props used for each slot inside. */
     slotProps?: {
-        label?: FormControlLabelProps;
-        caption?: FieldCaptionProps;
-        textarea?: FieldInputProps<'textarea'>;
-        errorMessage?: FieldErrorProps;
+        label?: FormFieldLabelProps;
+        caption?: FormFieldCaptionProps;
+        textarea?: FormFieldInputProps<'textarea'>;
+        errorMessage?: FormFieldErrorProps;
     };
 }, TextareaDeprecatedProps & Omit<TextFieldProps<HTMLTextAreaElement>, 'description' | 'validationState' | 'children' | 'style' | 'className' | 'inputElementType'>>;
 export type TextareaRef = ComponentRef<'textarea'>;

package/dist/components/Textarea/types.js

@@ -1,9 +1,9 @@
-import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
-import { formControlPropLabelPlacement, formControlPropLabelAlign } from "../FormControl/types.js";
-const textareaPropVariant = fieldContentGroupPropVariant;
+import { formFieldControlGroupPropVariant } from "../FormField/FormFieldControlGroup/types.js";
+import { formFieldPropLabelPlacement, formFieldPropLabelAlign } from "../FormField/types.js";
+const textareaPropVariant = formFieldControlGroupPropVariant;
 const textareaPropExpand = ["auto-size", "vertical-resize"];
-const textareaPropLabelPlacement = formControlPropLabelPlacement;
-const textareaPropLabelAlign = formControlPropLabelAlign;
+const textareaPropLabelPlacement = formFieldPropLabelPlacement;
+const textareaPropLabelAlign = formFieldPropLabelAlign;
 export {
   textareaPropExpand,
   textareaPropLabelAlign,

package/dist/components/TimePicker/TimePicker.js

@@ -4,14 +4,9 @@ import { useLocale, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { IconClock16 } from "@koobiq/react-icons";
 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";
-import { Field } from "../FieldComponents/Field/Field.js";
-import { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
-import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate.js";
+import { useForm } from "../Form/FormContext.js";
+import { FormField } from "../FormField/FormField.js";
 import { DateSegment } from "../DateSegment/DateSegment.js";
-import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
-import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
 function TimePickerRender(props, ref) {
   const { locale } = useLocale();
   const domRef = useDOMRef(ref);
@@ -23,6 +18,9 @@ function TimePickerRender(props, ref) {
     caption,
     label,
     slotProps,
+    isDisabled: isDisabledProp,
+    isReadOnly: isReadOnlyProp,
+    isRequired,
     style,
     fullWidth,
     variant,
@@ -31,10 +29,13 @@ function TimePickerRender(props, ref) {
     startAddon,
     "data-testid": testId
   } = props;
+  const { isDisabled: formIsDisabled, isReadOnly: formIsReadOnly } = useForm();
+  const isDisabled = isDisabledProp ?? formIsDisabled;
+  const isReadOnly = isReadOnlyProp ?? formIsReadOnly;
   const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
   const validationBehavior = props.validationBehavior ?? formValidationBehavior ?? "aria";
   const state = useTimeFieldState({
-    ...removeDataAttributes(props),
+    ...removeDataAttributes({ ...props, isDisabled, isReadOnly }),
     validationBehavior,
     locale
   });
@@ -45,8 +46,11 @@ function TimePickerRender(props, ref) {
     errorMessageProps,
     inputProps,
     ...validation
-  } = useTimeField(removeDataAttributes(props), state, domRef);
-  const { isDisabled, isRequired, isReadOnly } = state;
+  } = useTimeField(
+    removeDataAttributes({ ...props, isDisabled, isReadOnly }),
+    state,
+    domRef
+  );
   const { isInvalid } = validation;
   const rootProps = mergeProps(
     {
@@ -70,6 +74,11 @@ function TimePickerRender(props, ref) {
         startAddon,
         /* @__PURE__ */ jsx(IconClock16, { className: s.clock })
       ] }),
+      onMouseDown: (e) => {
+        if (e.currentTarget !== e.target) return;
+        e.preventDefault();
+        labelPropReactAria?.onClick?.(e);
+      },
       variant,
       isInvalid,
       isDisabled,
@@ -78,44 +87,41 @@ function TimePickerRender(props, ref) {
     slotProps?.group
   );
   const controlProps = mergeProps(
-    {
-      variant,
-      isInvalid,
-      isDisabled,
-      ref: domRef
-    },
-    slotProps?.inputDate,
-    fieldProps
+    { ref: domRef },
+    fieldProps,
+    slotProps?.inputDate
   );
   const labelProps = mergeProps(
     { isHidden: isLabelHidden, children: label, isRequired },
     labelPropReactAria,
     slotProps?.label
   );
-  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
+  const captionProps = mergeProps(
+    { children: caption },
+    descriptionProps,
+    slotProps?.caption
+  );
   const errorProps = mergeProps(
-    {
-      children: errorMessage
-    },
-    slotProps?.errorMessage,
-    errorMessageProps
+    { children: errorMessage },
+    errorMessageProps,
+    slotProps?.errorMessage
   );
-  return /* @__PURE__ */ jsxs(FormControl, { ...rootProps, children: [
-    /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
-    /* @__PURE__ */ jsxs(Field, { children: [
+  return /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
+    /* @__PURE__ */ jsxs("div", { className: s.body, children: [
       /* @__PURE__ */ jsx(
-        FieldContentGroup,
+        FormField.ControlGroup,
         {
           ...groupProps,
           slotProps: { startAddon: { className: s.startAddon } },
-          children: /* @__PURE__ */ jsxs(FieldInputDate, { ...controlProps, children: [
+          children: /* @__PURE__ */ jsxs(FormField.InputDate, { ...controlProps, children: [
             state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)),
             /* @__PURE__ */ jsx("input", { ...inputProps })
           ] })
         }
       ),
-      /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FieldError, { ...errorProps }) })
+      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
+      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
     ] })
   ] });
 }

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

@@ -1,13 +1,16 @@
 const base = "kbq-timepicker-a6e9f3";
 const startAddon = "kbq-timepicker-startAddon-46c835";
 const clock = "kbq-timepicker-clock-920ed0";
+const body = "kbq-timepicker-body-15a987";
 const s = {
   base,
   startAddon,
-  clock
+  clock,
+  body
 };
 export {
   base,
+  body,
   clock,
   s as default,
   startAddon

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

@@ -1,13 +1,11 @@
 import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaTimeFieldProps, TimeValue } from '@koobiq/react-primitives';
 import type { DateInputPropVariant } from '../DateInput';
-import { type FieldCaptionProps, type FieldErrorProps, type FieldInputDateProps, type FieldContentGroupProps } from '../FieldComponents';
-import { type FormControlProps, type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
-import type { FormControlLabelProps } from '../FormControlLabel';
+import { type FormFieldLabelProps, type FormFieldCaptionProps, type FormFieldErrorProps, type FormFieldInputDateProps, type FormFieldControlGroupProps, type FormFieldProps, type FormFieldPropLabelAlign, type FormFieldPropLabelPlacement } from '../FormField';
 export declare const timePickerPropLabelPlacement: readonly ["top", "side"];
-export type TimePickerPropLabelPlacement = FormControlPropLabelPlacement;
+export type TimePickerPropLabelPlacement = FormFieldPropLabelPlacement;
 export declare const timePickerPropLabelAlign: readonly ["start", "end"];
-export type TimePickerPropLabelAlign = FormControlPropLabelAlign;
+export type TimePickerPropLabelAlign = FormFieldPropLabelAlign;
 export type TimePickerProps<T extends TimeValue> = {
     /** Inline styles. */
     style?: CSSProperties;
@@ -28,12 +26,12 @@ export type TimePickerProps<T extends TimeValue> = {
     fullWidth?: boolean;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FormControlProps;
-        label?: FormControlLabelProps;
-        group?: FieldContentGroupProps;
-        caption?: FieldCaptionProps;
-        inputDate?: FieldInputDateProps;
-        errorMessage?: FieldErrorProps;
+        root?: FormFieldProps;
+        label?: FormFieldLabelProps;
+        group?: FormFieldControlGroupProps;
+        caption?: FormFieldCaptionProps;
+        inputDate?: FormFieldInputDateProps;
+        errorMessage?: FormFieldErrorProps;
     };
     /** Ref to the control */
     ref?: Ref<HTMLDivElement>;

package/dist/components/TimePicker/types.js

@@ -1,6 +1,6 @@
-import { formControlPropLabelPlacement, formControlPropLabelAlign } from "../FormControl/types.js";
-const timePickerPropLabelPlacement = formControlPropLabelPlacement;
-const timePickerPropLabelAlign = formControlPropLabelAlign;
+import { formFieldPropLabelPlacement, formFieldPropLabelAlign } from "../FormField/types.js";
+const timePickerPropLabelPlacement = formFieldPropLabelPlacement;
+const timePickerPropLabelAlign = formFieldPropLabelAlign;
 export {
   timePickerPropLabelAlign,
   timePickerPropLabelPlacement

package/dist/components/Toggle/Toggle.d.ts

@@ -1,5 +1,5 @@
 import { type SwitchProps } from '@koobiq/react-primitives';
-export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<Omit<SwitchProps, "inputRef">, "children" | "style" | "className" | "size" | "labelPlacement" | "slotProps" | keyof {
+export declare const Toggle: import("react").ForwardRefExoticComponent<Omit<Omit<SwitchProps, "inputRef">, "children" | "style" | "className" | "size" | "slotProps" | "labelPlacement" | keyof {
     disabled?: boolean;
     error?: boolean;
     checked?: boolean;

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" | "variant" | `data-${string}` | "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" | "placement" | `data-${string}` | "variant" | "control" | "portalContainer" | "anchorRef" | "hideArrow" | "arrowBoundaryOffset" | "crossOffset" | "delay" | "closeDelay" | keyof {
     open?: boolean;
     disabled?: boolean;
 }> & {

package/dist/components/index.d.ts

@@ -1,8 +1,7 @@
 export * from './Provider';
 export * from './FlexBox';
 export * from './Container';
-export * from './FormControl';
-export * from './FormControlLabel';
+export * from './FormField';
 export * from './Alert';
 export * from './Button';
 export * from './IconButton';

package/dist/index.js

@@ -7,10 +7,18 @@ import { ProviderContext, useProvider } from "./components/Provider/ProviderCont
 import { BreakpointsContext, useBreakpoints, useMatchedBreakpoints } from "./components/Provider/BreakpointsContext.js";
 import { FlexBox } from "./components/FlexBox/FlexBox.js";
 import { Container } from "./components/Container/Container.js";
-import { containerMarginsProp, containerPositionProp } from "./components/Container/types.js";
-import { FormControl } from "./components/FormControl/FormControl.js";
-import { formControlPropLabelAlign, formControlPropLabelPlacement } from "./components/FormControl/types.js";
-import { FormControlLabel } from "./components/FormControlLabel/FormControlLabel.js";
+import { containerMarginsProp, containerPlacementProp, containerPositionProp } from "./components/Container/types.js";
+import { FormFieldInput } from "./components/FormField/FormFieldInput/FormFieldInput.js";
+import { FormFieldSelect } from "./components/FormField/FormFieldSelect/FormFieldSelect.js";
+import { FormFieldCaption } from "./components/FormField/FormFieldCaption/FormFieldCaption.js";
+import { FormFieldLabel } from "./components/FormField/FormFieldLabel/FormFieldLabel.js";
+import { FormFieldError } from "./components/FormField/FormFieldError/FormFieldError.js";
+import { FormFieldControlGroup } from "./components/FormField/FormFieldControlGroup/FormFieldControlGroup.js";
+import { FormFieldControlGroupContext, useFormFieldControlGroup } from "./components/FormField/FormFieldControlGroup/FormFieldControlGroupContext.js";
+import { formFieldControlGroupPropVariant } from "./components/FormField/FormFieldControlGroup/types.js";
+import { FormFieldInputDate } from "./components/FormField/FormFieldInputDate/FormFieldInputDate.js";
+import { FormField, FormFieldComponent } from "./components/FormField/FormField.js";
+import { formFieldPropLabelAlign, formFieldPropLabelPlacement } from "./components/FormField/types.js";
 import { Alert } from "./components/Alert/Alert.js";
 import { alertPropStatus } from "./components/Alert/types.js";
 import { Button } from "./components/Button/Button.js";
@@ -82,7 +90,7 @@ 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 { Form } 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";
@@ -104,19 +112,24 @@ export {
   DatePicker,
   DatePickerRender,
   Divider,
-  Fieldset,
   FlexBox,
   Form,
-  FormComponent,
   FormContext,
-  FormControl,
-  FormControlLabel,
+  FormField,
+  FormFieldCaption,
+  FormFieldComponent,
+  FormFieldControlGroup,
+  FormFieldControlGroupContext,
+  FormFieldError,
+  FormFieldInput,
+  FormFieldInputDate,
+  FormFieldLabel,
+  FormFieldSelect,
   Grid,
   GridItem,
   IconButton,
   Input,
   InputNumber,
-  Legend,
   Link,
   List,
   ListInner,
@@ -165,6 +178,7 @@ export {
   checkboxPropLabelPlacement,
   checkboxPropSize,
   containerMarginsProp,
+  containerPlacementProp,
   containerPositionProp,
   dateInputPropLabelAlign,
   dateInputPropLabelPlacement,
@@ -179,8 +193,9 @@ export {
   flexPropJustifyContent,
   flexPropOrder,
   flexPropWrap,
-  formControlPropLabelAlign,
-  formControlPropLabelPlacement,
+  formFieldControlGroupPropVariant,
+  formFieldPropLabelAlign,
+  formFieldPropLabelPlacement,
   formPropLabelInlineSize,
   gridPropGap,
   iconButtonPropSize,
@@ -233,6 +248,7 @@ export {
   useBreakpoints,
   useDateFormatter,
   useForm,
+  useFormFieldControlGroup,
   useListData,
   useLocale,
   useMatchedBreakpoints,