@koobiq/react-components 0.11.1 → 0.13.0

package/dist/components/Table/components/TableColumnHeader/TableColumnHeader.js

@@ -1,14 +1,16 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useFocusRing, mergeProps, clsx } from "@koobiq/react-core";
+import { IconChevronUpS16, IconChevronDownS16 } from "@koobiq/react-icons";
 import { useTableColumnHeader } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
 import s from "./TableColumnHeader.module.css.js";
 const textNormal = utilClasses.typography["text-normal"];
 function TableColumnHeader({
   column,
-  state
+  state,
+  renderSortIcon
 }) {
   const ref = useRef(null);
   const { columnHeaderProps } = useTableColumnHeader(
@@ -23,6 +25,11 @@ function TableColumnHeader({
     valign = "middle"
   } = column.props;
   const { isFocusVisible, focusProps } = useFocusRing();
+  const isActive = state.sortDescriptor?.column === column.key;
+  const { allowsSorting } = column.props;
+  const direction = isActive ? state.sortDescriptor?.direction : void 0;
+  const defaultIcon = direction === "ascending" ? /* @__PURE__ */ jsx(IconChevronUpS16, {}) : /* @__PURE__ */ jsx(IconChevronDownS16, {});
+  const iconToRender = renderSortIcon?.({ direction, isActive }) ?? defaultIcon;
   return /* @__PURE__ */ jsx(
     "th",
     {
@@ -31,13 +38,24 @@ function TableColumnHeader({
         s.base,
         valign && s[valign],
         isFocusVisible && s.focusVisible,
+        allowsSorting && s.sortable,
         textNormal,
         className
       ),
       style,
       ...mergeProps(columnHeaderProps, focusProps),
       ref,
-      children: column.rendered
+      children: /* @__PURE__ */ jsxs("div", { className: s.content, children: [
+        /* @__PURE__ */ jsx("span", { children: column.rendered }),
+        allowsSorting && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: clsx(s.sortIcon, isActive && s.active),
+            children: iconToRender
+          }
+        )
+      ] })
     }
   );
 }

package/dist/components/Table/components/TableColumnHeader/TableColumnHeader.module.css.js

@@ -5,6 +5,10 @@ const middle = "kbq-tablecolumnheader-middle-22b85a";
 const bottom = "kbq-tablecolumnheader-bottom-1f6f2d";
 const sub = "kbq-tablecolumnheader-sub-c48ac7";
 const focusVisible = "kbq-tablecolumnheader-focusVisible-21814b";
+const sortable = "kbq-tablecolumnheader-sortable-038383";
+const content = "kbq-tablecolumnheader-content-2b6a20";
+const sortIcon = "kbq-tablecolumnheader-sortIcon-b98bf4";
+const active = "kbq-tablecolumnheader-active-f9b640";
 const s = {
   base,
   top,
@@ -13,15 +17,23 @@ const s = {
   bottom,
   sub,
   "text-top": "kbq-tablecolumnheader-text-top-7013fa",
-  focusVisible
+  focusVisible,
+  sortable,
+  content,
+  sortIcon,
+  active
 };
 export {
+  active,
   base,
   baseline,
   bottom,
+  content,
   s as default,
   focusVisible,
   middle,
+  sortIcon,
+  sortable,
   sub,
   top
 };

package/dist/components/Table/components/TableRowGroup/TableRowGroup.d.ts

@@ -1,6 +1,8 @@
-import { type ReactNode } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 export type TableRowGroupProps = {
     children: ReactNode;
     type: 'thead' | 'tbody';
+    theadProps?: ComponentPropsWithRef<'thead'>;
+    tbodyProps?: ComponentPropsWithRef<'tbody'>;
 };
 export declare const TableRowGroup: import("react").ForwardRefExoticComponent<TableRowGroupProps & import("react").RefAttributes<any>>;

package/dist/components/Table/components/TableRowGroup/TableRowGroup.js

@@ -1,12 +1,17 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { mergeProps } from "@koobiq/react-core";
 import { useTableRowGroup } from "@koobiq/react-primitives";
 const TableRowGroup = forwardRef(
-  ({ type = "thead", children }, ref) => {
+  ({ type = "thead", children, theadProps, tbodyProps }, ref) => {
     const Element = type;
     const { rowGroupProps } = useTableRowGroup();
-    return /* @__PURE__ */ jsx(Element, { ...rowGroupProps, ref, children });
+    const elementProps = mergeProps(
+      { ...rowGroupProps, ref },
+      type === "thead" ? theadProps : tbodyProps
+    );
+    return /* @__PURE__ */ jsx(Element, { ...elementProps, children });
   }
 );
 TableRowGroup.displayName = "TableRowGroup";

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

@@ -1,10 +1,14 @@
-import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { TableStateProps } from '@koobiq/react-primitives';
 import type { Key } from '@react-types/shared';
 export declare const tablePropDivider: readonly ["none", "row"];
 export type TablePropDivider = (typeof tablePropDivider)[number];
 export type TablePropChildren<T> = TableStateProps<T>['children'];
-export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'disabledKeys' | 'disabledBehavior'> & {
+type TablePropSortIconRender = (args: {
+    direction: 'ascending' | 'descending' | undefined;
+    isActive: boolean;
+}) => ReactNode;
+export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'disabledKeys' | 'disabledBehavior' | 'sortDescriptor' | 'onSortChange'> & {
     /** Handler that is called when a user performs an action on the row. */
     onRowAction?: (key: Key) => void;
     /** Handler that is called when a user performs an action on the cell. */
@@ -30,13 +34,18 @@ export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'sele
      * The elements that make up the table.
      * Includes the Table.Header, Table.Body, Table.Column, and Table.Row.
      */
+    /** Render function for a custom sort icon for the column */
+    renderSortIcon?: TablePropSortIconRender;
     children?: TablePropChildren<T>;
     /** Ref to the control. */
     ref?: Ref<HTMLTableElement>;
     /** The props used for each slot inside. */
     slotProps?: {
         root?: ComponentPropsWithRef<'table'>;
+        header?: ComponentPropsWithRef<'thead'>;
+        body?: ComponentPropsWithRef<'tbody'>;
     };
 };
 export type TableComponent = <T>(props: TableProps<T>) => ReactElement | null;
 export type TableRef = ComponentRef<'table'>;
+export {};

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" | "variant" | "labelPlacement" | "labelAlign" | "fullWidth" | "slotProps" | "data-testid" | "isLabelHidden" | "expand"> & {
+} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "description" | "validationState" | "inputElementType">, "caption" | "style" | "className" | "cols" | "rows" | "data-testid" | "variant" | "slotProps" | "labelPlacement" | "labelAlign" | "fullWidth" | "isLabelHidden" | "expand"> & {
     className?: string;
     style?: import("react").CSSProperties;
     variant?: import("./types").TextareaPropVariant;
@@ -18,9 +18,9 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<{
     expand?: import("./types").TextareaPropExpand;
     'data-testid'?: string | number;
     slotProps?: {
-        label?: import("..").FormControlLabelProps;
-        caption?: import("../FieldComponents").FieldCaptionProps;
-        textarea?: import("../FieldComponents").FieldInputProps<"textarea">;
-        errorMessage?: import("../FieldComponents").FieldErrorProps;
+        label?: import("..").FormFieldLabelProps;
+        caption?: import("..").FormFieldCaptionProps;
+        textarea?: import("..").FormFieldInputProps<"textarea">;
+        errorMessage?: import("..").FormFieldErrorProps;
     };
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -5,7 +5,8 @@ import { deprecate } from "@koobiq/logger";
 import { mergeProps } from "@koobiq/react-core";
 import { TextField } from "@koobiq/react-primitives";
 import { TextareaContextConsumer } from "./components/TextareaContextConsumer/TextareaContextConsumer.js";
-import { FormControl } from "../FormControl/FormControl.js";
+import { useForm } from "../Form/FormContext.js";
+import { FormField } from "../FormField/FormField.js";
 const Textarea = forwardRef((props, ref) => {
   const {
     variant = "filled",
@@ -31,9 +32,10 @@ const Textarea = forwardRef((props, ref) => {
     label,
     ...other
   } = props;
-  const isDisabled = isDisabledProp ?? disabled;
+  const { isDisabled: formIsDisabled, isReadOnly: formIsReadOnly } = useForm();
+  const isDisabled = isDisabledProp ?? disabled ?? formIsDisabled;
+  const isReadOnly = isReadOnlyProp ?? readonly ?? formIsReadOnly;
   const isRequired = isRequiredProp ?? required;
-  const isReadOnly = isReadOnlyProp ?? readonly;
   const isInvalid = isInvalidProp ?? error;
   const isLabelHidden = isLabelHiddenProp ?? hiddenLabel;
   if (process.env.NODE_ENV !== "production" && "disabled" in props) {
@@ -76,7 +78,7 @@ const Textarea = forwardRef((props, ref) => {
     },
     other
   );
-  return /* @__PURE__ */ jsx(FormControl, { as: TextField, inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FormField, { as: TextField, inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
     TextareaContextConsumer,
     {
       ...values,

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

@@ -1,7 +1,13 @@
+const body = "kbq-textarea-body-943a69";
+const group = "kbq-textarea-group-c8f6ff";
 const s = {
   "auto-size": "kbq-textarea-auto-size-566580",
-  "vertical-resize": "kbq-textarea-vertical-resize-bde131"
+  "vertical-resize": "kbq-textarea-vertical-resize-bde131",
+  body,
+  group
 };
 export {
-  s as default
+  body,
+  s as default,
+  group
 };

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" | "variant" | "labelPlacement" | "slotProps" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+} & Pick<TextareaProps, "caption" | "label" | "cols" | "rows" | "variant" | "slotProps" | "labelPlacement" | "errorMessage" | "isLabelHidden" | "expand"> & import("react").RefAttributes<HTMLTextAreaElement>>;

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';
@@ -39,5 +38,5 @@ 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';
+export { useListData, useAsyncList, type ListData, type ListOptions, type AsyncListData, type AsyncListOptions, type AsyncListLoadFunction, type AsyncListLoadOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
+export { useRouter, useLocale, type Locale, type SortDescriptor, type Selection, RouterProvider, useDateFormatter, } from '@koobiq/react-core';