@koobiq/react-components 0.7.1 → 0.9.0

package/dist/components/Alert/Alert.js

@@ -12,7 +12,7 @@ const Alert = polymorphicForwardRef(
     const {
       status = "info",
       as: Tag = "div",
-      hideIcon = false,
+      hideIcon,
       colored,
       compact,
       isColored: isColoredProp,
@@ -26,8 +26,8 @@ const Alert = polymorphicForwardRef(
       children,
       ...other
     } = props;
-    const isColored = isColoredProp ?? colored ?? false;
-    const isCompact = isCompactProp ?? compact ?? false;
+    const isColored = isColoredProp ?? colored;
+    const isCompact = isCompactProp ?? compact;
     if (process.env.NODE_ENV !== "production" && "colored" in props) {
       deprecate(
         'Alert: the "colored" prop is deprecated. Use "isColored" prop to replace it.'
@@ -66,6 +66,8 @@ const Alert = polymorphicForwardRef(
       Tag,
       {
         role: "alert",
+        "data-colored": isColored || void 0,
+        "data-compact": isCompact || void 0,
         ...other,
         ref,
         className: clsx(

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

@@ -24,19 +24,16 @@ export type AlertBaseProps = {
     status?: AlertPropStatus;
     /**
      * If `true`, compact mode will be enabled in the alert.
-     * @default false
      */
     isCompact?: boolean;
     /**
      * If `true`, background color will be enabled in the alert.
-     * @default false
      */
     isColored?: boolean;
     /** Additional CSS-classes. */
     className?: string;
     /**
      * If `true`, the status icon will be hidden in the component.
-     * @default false
      */
     hideIcon?: boolean;
     /** Title content. */

package/dist/components/Backdrop/Backdrop.js

@@ -18,7 +18,7 @@ const Backdrop = polymorphicForwardRef(
       className,
       ...other
     } = props;
-    const isOpen = isOpenProp ?? open ?? false;
+    const isOpen = isOpenProp ?? open;
     const domRef = useDOMRef(ref);
     if (process.env.NODE_ENV !== "production" && "open" in props) {
       deprecate(

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

@@ -16,7 +16,10 @@ export type BackdropBaseProps = {
     children?: ReactNode;
     /** Inline styles. */
     style?: CSSProperties;
-    /** The duration of the transition, in milliseconds. */
+    /**
+     * The duration of the transition, in milliseconds.
+     * @default 300
+     */
     duration?: number;
     /** z-index. */
     zIndex?: CSSProperties['zIndex'];

package/dist/components/Button/Button.js

@@ -9,8 +9,8 @@ const Button = polymorphicForwardRef(
     const {
       as: Tag = "button",
       variant = "contrast-filled",
-      onlyIcon = false,
-      fullWidth = false,
+      onlyIcon,
+      fullWidth,
       isLoading: isLoadingProp,
       isDisabled: isDisabledProp,
       progress,
@@ -21,8 +21,8 @@ const Button = polymorphicForwardRef(
       className,
       ...other
     } = props;
-    const isLoading = isLoadingProp ?? progress ?? false;
-    const isDisabled = isDisabledProp ?? disabled ?? false;
+    const isLoading = isLoadingProp ?? progress;
+    const isDisabled = isDisabledProp ?? disabled;
     if (process.env.NODE_ENV !== "production" && "progress" in props) {
       deprecate(
         'Button: the "progress" prop is deprecated. Use "isLoading" prop to replace it.'
@@ -60,9 +60,9 @@ const Button = polymorphicForwardRef(
         isDisabled,
         className: classNameFn,
         "data-variant": variant,
-        "data-loading": isLoading,
-        "data-fullwidth": fullWidth,
-        "data-onlyicon": iconOnly,
+        "data-loading": isLoading || void 0,
+        "data-fullwidth": fullWidth || void 0,
+        "data-onlyicon": iconOnly || void 0,
         ...other,
         ref,
         children: [

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

@@ -6,14 +6,12 @@ export type ButtonPropVariant = (typeof buttonPropVariant)[number];
 type ButtonDeprecatedProps = {
     /**
      * If `true`, the progress indicator is shown and the button becomes disabled.
-     * @default false
      * @deprecated
      * The "progress" prop is deprecated. Use "isLoading" prop to replace it.
      */
     progress?: boolean;
     /**
      * If `true`, the component is disabled.
-     * @default false
      * @deprecated
      * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
      */
@@ -29,7 +27,6 @@ export type ButtonBaseProps = ExtendableProps<{
     variant?: ButtonPropVariant;
     /**
      * If `true`, only the icon is shown, and the button has same sides.
-     * @default false
      */
     onlyIcon?: boolean;
     /** Additional CSS-classes. */
@@ -38,7 +35,6 @@ export type ButtonBaseProps = ExtendableProps<{
     style?: CSSProperties;
     /**
      * If `true`, the button will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
     /** Icon placed before the children. */

package/dist/components/ButtonToggleGroup/ButtonToggleGroup.js

@@ -12,9 +12,9 @@ import { getSelectedToggleButton, getToggleButtonStyle } from "./utils.js";
 const MAX_ITEMS = 5;
 const ButtonToggleGroup = forwardRef((props, ref) => {
   const {
-    fullWidth = false,
-    isDisabled = false,
-    hasEqualItemSize = false,
+    fullWidth,
+    isDisabled,
+    hasEqualItemSize,
     style,
     className,
     slotProps,
@@ -81,9 +81,9 @@ const ButtonToggleGroup = forwardRef((props, ref) => {
         hasEqualItemSize && s.hasEqualItemSize,
         className
       ),
-      "data-fullwidth": fullWidth,
-      "data-animated": isAnimated,
-      "data-equal-item-size": hasEqualItemSize,
+      "data-fullwidth": fullWidth || void 0,
+      "data-animated": isAnimated || void 0,
+      "data-equal-item-size": hasEqualItemSize || void 0,
       ref: domRef,
       style
     },

package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js

@@ -11,7 +11,7 @@ const textNormalMedium = utilClasses.typography["text-normal-medium"];
 const ButtonToggle = forwardRef(
   (props, ref) => {
     const {
-      isDisabled: isDisabledProp = false,
+      isDisabled: isDisabledProp,
       children,
       id,
       icon,
@@ -53,11 +53,11 @@ const ButtonToggle = forwardRef(
                 isFocusVisible && s.focusVisible,
                 className
               ),
-              "data-hovered": isHovered,
-              "data-pressed": isPressed,
-              "data-selected": isSelected,
-              "data-disabled": isDisabled,
-              "data-focus-visible": isFocusVisible,
+              "data-hovered": isHovered || void 0,
+              "data-pressed": isPressed || void 0,
+              "data-selected": isSelected || void 0,
+              "data-disabled": isDisabled || void 0,
+              "data-focus-visible": isFocusVisible || void 0,
               ref: rootRef
             },
             controlProps,

package/dist/components/ButtonToggleGroup/components/ButtonToggle/types.d.ts

@@ -9,7 +9,6 @@ export type ButtonToggleProps = ExtendableComponentPropsWithRef<{
     icon?: ReactNode;
     /**
      * If `true`, the component is disabled.
-     * @default false
      */
     isDisabled?: boolean;
     /** Additional CSS-classes. */

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

@@ -5,19 +5,16 @@ export type ButtonToggleGroupKey = string | number;
 export type ButtonToggleGroupBaseProps = {
     /**
      * Whether all items are disabled.
-     * @default false
      */
     isDisabled?: boolean;
     /**
      * If `true`, the button will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
     /** The contents of the collection. */
     children?: Array<ReactElement<ButtonToggleProps>>;
     /**
      * If `true`, each item's width will be equal.
-     * @default false
      */
     hasEqualItemSize?: boolean;
     /** The currently selected key in the collection (controlled). */

package/dist/components/Checkbox/Checkbox.d.ts

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

package/dist/components/Checkbox/Checkbox.js

@@ -31,13 +31,13 @@ const Checkbox = forwardRef(
       slotProps,
       ...other
     } = props;
-    const isDisabled = isDisabledProp ?? disabled ?? false;
-    const isInvalid = isInvalidProp ?? error ?? false;
+    const isDisabled = isDisabledProp ?? disabled;
+    const isInvalid = isInvalidProp ?? error;
     const isSelected = isSelectedProp ?? checked;
     const defaultSelected = defaultSelectedProp ?? defaultChecked;
-    const isReadOnly = isReadOnlyProp ?? readonly ?? false;
-    const isRequired = isRequiredProp ?? required ?? false;
-    const isIndeterminate = isIndeterminateProp ?? indeterminate ?? false;
+    const isReadOnly = isReadOnlyProp ?? readonly;
+    const isRequired = isRequiredProp ?? required;
+    const isIndeterminate = isIndeterminateProp ?? indeterminate;
     const commonProps = {
       isIndeterminate,
       isDisabled,
@@ -108,7 +108,7 @@ const Checkbox = forwardRef(
       Checkbox$1,
       {
         "data-size": size,
-        "data-indeterminate": isIndeterminate,
+        "data-indeterminate": isIndeterminate || void 0,
         "data-label-placement": labelPlacement,
         ...commonProps,
         ref,

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

@@ -9,14 +9,12 @@ export type CheckboxPropOnChange = (selected: boolean) => void;
 type CheckboxDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
-     * @default false
      * @deprecated
      * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
      */
     disabled?: boolean;
     /**
      * If `true`, the component will indicate an error.
-     * @default false
      * @deprecated
      * The "error" prop is deprecated. Use "isInvalid" prop to replace it.
      */
@@ -29,21 +27,18 @@ type CheckboxDeprecatedProps = {
     checked?: boolean;
     /**
      * It prevents the user from changing the value of the checkbox.
-     * @default false
      * @deprecated
      * The "readonly" prop is deprecated. Use "isReadonly" prop to replace it.
      */
     readonly?: boolean;
     /**
      * If `true`, the input element is required.
-     * @default false
      * @deprecated
      * The "required" prop is deprecated. Use "isRequired" prop to replace it.
      */
     required?: boolean;
     /**
      * If `true`, the component appears indeterminate.
-     * @default false
      * @deprecated
      * The "indeterminate" prop is deprecated. Use "isIndeterminate" prop to replace it.
      */

package/dist/components/Container/Container.js

@@ -20,7 +20,7 @@ const Container = polymorphicForwardRef(
       style: styleProp,
       ...other
     } = props;
-    const isFixed = isFixedProp ?? fixed ?? false;
+    const isFixed = isFixedProp ?? fixed;
     if (process.env.NODE_ENV !== "production" && "fixed" in props) {
       deprecate(
         'Container: the "fixed" prop is deprecated. Use "isFixed" prop to replace it.'
@@ -39,7 +39,7 @@ const Container = polymorphicForwardRef(
     return /* @__PURE__ */ jsx(
       Tag,
       {
-        "data-fixed": isFixed,
+        "data-fixed": isFixed || void 0,
         "data-margins": margins,
         "data-position": position,
         className: clsx(s.base, className),

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

@@ -8,7 +8,6 @@ export type ContainerPositionProp = (typeof containerPositionProp)[number];
 type ContainerDeprecatedProps = {
     /**
      * If `true`, doesn't set the max-inline-size of the container.
-     * @default false
      * @deprecated
      * The "fixed" prop is deprecated. Use "isFixed" prop to replace it.
      */
@@ -29,7 +28,6 @@ export type ContainerBaseProps = {
     margins?: ContainerMarginsProp | ResponsiveValue<ContainerMarginsProp>;
     /**
      * If `true`, doesn't set the max-inline-size of the container.
-     * @default false
      */
     isFixed?: boolean;
     /** The content of the component. */

package/dist/components/DateInput/DateInput.js

@@ -3,25 +3,28 @@ 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 } from "@koobiq/react-primitives";
+import { useDateFieldState, removeDataAttributes, 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";
-import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
-import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.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 { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
 import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
 function DateInputRender(props, ref) {
-  const { errorMessage } = props;
   const { locale } = useLocale();
   const {
     variant = "filled",
     slotProps,
     caption,
     startAddon,
+    errorMessage,
     endAddon,
     isLabelHidden,
+    labelPlacement,
+    labelAlign,
     label,
     className,
     style,
@@ -40,20 +43,23 @@ function DateInputRender(props, ref) {
     fieldProps,
     descriptionProps,
     errorMessageProps,
+    inputProps,
     ...validation
   } = useDateField({ ...removeDataAttributes(props) }, state, domRef);
-  const { isInvalid, isRequired, isDisabled } = state;
+  const { isRequired, isDisabled } = state;
+  const { isInvalid } = validation;
   const rootProps = mergeProps(
     {
       style,
       fullWidth,
+      labelPlacement,
+      labelAlign,
       "data-testid": testId,
       "data-variant": variant,
-      "data-invalid": isInvalid,
-      "data-disabled": isDisabled,
-      "data-fullwidth": fullWidth,
-      "data-required": isRequired,
-      "data-readonly": isReadOnly,
+      "data-invalid": isInvalid || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-required": isRequired || void 0,
+      "data-readonly": isReadOnly || void 0,
       className: clsx(s.base, className)
     },
     slotProps?.root
@@ -76,8 +82,7 @@ function DateInputRender(props, ref) {
   const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
   const errorProps = mergeProps(
     {
-      isInvalid,
-      children: typeof errorMessage === "function" ? errorMessage({ ...validation }) : errorMessage
+      children: errorMessage
     },
     slotProps?.errorMessage,
     errorMessageProps
@@ -92,11 +97,16 @@ function DateInputRender(props, ref) {
     slotProps?.inputDate,
     fieldProps
   );
-  return /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
-    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
-    /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)) }) }),
-    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
-    /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+  return /* @__PURE__ */ jsxs(FormControl, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
+    /* @__PURE__ */ jsxs(Field, { children: [
+      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsxs(FieldInputDate, { ...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 }) })
+    ] })
   ] });
 }
 const DateInput = forwardRef(DateInputRender);

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

@@ -1,8 +1,14 @@
 import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaDateFieldProps, DateValue } from '@koobiq/react-primitives';
-import { type FieldCaptionProps, type FieldControlProps, type FieldErrorProps, type FieldInputDateProps, type FieldContentGroupProps, type FieldLabelProps, type FieldContentGroupPropVariant } from '../FieldComponents';
+import { type FieldCaptionProps, type FieldErrorProps, type FieldInputDateProps, type FieldContentGroupProps, type FieldContentGroupPropVariant } from '../FieldComponents';
+import { type FormControlProps, type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
+import type { FormControlLabelProps } from '../FormControlLabel';
 export declare const dateInputPropVariant: readonly ["filled", "transparent"];
 export type DateInputPropVariant = FieldContentGroupPropVariant;
+export declare const dateInputPropLabelPlacement: readonly ["top", "side"];
+export type DateInputPropLabelPlacement = FormControlPropLabelPlacement;
+export declare const dateInputPropLabelAlign: readonly ["start", "end"];
+export type DateInputPropLabelAlign = FormControlPropLabelAlign;
 export type DateInputProps<T extends DateValue> = {
     /** Inline styles. */
     style?: CSSProperties;
@@ -19,13 +25,12 @@ export type DateInputProps<T extends DateValue> = {
     variant?: DateInputPropVariant;
     /**
      * If true, the input will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
     /** The props used for each slot inside. */
     slotProps?: {
-        root?: FieldControlProps;
-        label?: FieldLabelProps;
+        root?: FormControlProps;
+        label?: FormControlLabelProps;
         group?: FieldContentGroupProps;
         caption?: FieldCaptionProps;
         inputDate?: FieldInputDateProps;
@@ -35,13 +40,22 @@ export type DateInputProps<T extends DateValue> = {
     ref?: Ref<HTMLDivElement>;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
-     * @default false
      */
     isLabelHidden?: boolean;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: DateInputPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: DateInputPropLabelAlign;
     /** Addon placed before the children. */
     startAddon?: ReactNode;
     /** Addon placed after the children. */
     endAddon?: ReactNode;
-} & Omit<AriaDateFieldProps<T>, 'description' | 'validationBehavior' | 'validate' | 'validationState'>;
+} & Omit<AriaDateFieldProps<T>, 'description' | 'validationState'>;
 export type DateInputComponent = <T extends DateValue>(props: DateInputProps<T>) => ReactElement | null;
 export type DateInputRef = ComponentRef<'div'>;

package/dist/components/DateInput/types.js

@@ -1,5 +1,10 @@
 import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
+import { formControlPropLabelPlacement, formControlPropLabelAlign } from "../FormControl/types.js";
 const dateInputPropVariant = fieldContentGroupPropVariant;
+const dateInputPropLabelPlacement = formControlPropLabelPlacement;
+const dateInputPropLabelAlign = formControlPropLabelAlign;
 export {
+  dateInputPropLabelAlign,
+  dateInputPropLabelPlacement,
   dateInputPropVariant
 };

package/dist/components/DatePicker/DatePicker.js

@@ -19,6 +19,8 @@ function DatePickerRender(props, ref) {
     slotProps,
     fullWidth,
     errorMessage,
+    labelPlacement,
+    labelAlign,
     startAddon,
     endAddon,
     "data-testid": testId
@@ -48,10 +50,12 @@ function DatePickerRender(props, ref) {
       fullWidth,
       className,
       startAddon,
+      labelPlacement,
+      labelAlign,
       errorMessage,
       "data-testid": testId,
       slotProps: {
-        label: labelProps,
+        label: mergeProps(labelProps, slotProps?.label),
         group: {
           endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
             endAddon,

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

@@ -1,12 +1,12 @@
 import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaDatePickerProps, DateValue } from '@koobiq/react-primitives';
 import type { CalendarProps } from '../Calendar';
-import type { DateInputProps, DateInputRef } from '../DateInput';
+import type { DateInputPropLabelAlign, DateInputPropLabelPlacement, DateInputProps, DateInputRef } from '../DateInput';
+import type { FormControlLabelProps } from '../FormControlLabel';
 import type { PopoverProps } from '../Popover';
 export type DatePickerProps<T extends DateValue> = {
     /**
      * If true, the input will take up the full width of its container.
-     * @default false
      */
     fullWidth?: boolean;
     /** The helper text content. */
@@ -21,14 +21,25 @@ export type DatePickerProps<T extends DateValue> = {
     style?: CSSProperties;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
+    /**
+     * The label's overall position relative to the element it is labeling.
+     * @default 'top'
+     */
+    labelPlacement?: DateInputPropLabelPlacement;
+    /**
+     * The label's horizontal alignment relative to the element it is labeling.
+     * @default 'start'
+     */
+    labelAlign?: DateInputPropLabelAlign;
     /** Ref to the DateInput. */
     ref?: Ref<DateInputRef>;
     /** The props used for each slot inside. */
     slotProps?: {
         root?: DateInputProps<T>;
+        label?: FormControlLabelProps;
         popover?: PopoverProps;
         calendar?: CalendarProps<T>;
     };
-} & Omit<AriaDatePickerProps<T>, 'description' | 'validate' | 'validationBehavior' | 'validationState'>;
+} & Omit<AriaDatePickerProps<T>, 'description' | 'validationState'>;
 export type DatePickerComponent = <T extends DateValue>(props: DatePickerProps<T>) => ReactElement | null;
 export type DatePickerRef = DateInputRef;

package/dist/components/Dialog/Dialog.js

@@ -19,7 +19,7 @@ const DialogComponent = forwardRef(
     const rootProps = mergeProps(
       {
         className: clsx(s.base, utilClasses.typography["text-normal"]),
-        "data-close-button": showCloseButton,
+        "data-close-button": showCloseButton || void 0,
         "data-top-overflow": topOverflow,
         "data-bottom-overflow": bottomOverflow
       },

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" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "variant" | "onlyIcon" | "fullWidth" | "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" | "fullWidth" | "isDisabled" | "onPress" | "onPressStart" | "onPressEnd" | "onPressChange" | "onPressUp" | "onFocusChange" | "preventFocusOnPress" | "excludeFromTabOrder" | keyof import("@react-types/shared").HoverEvents | "isLoading" | "variant" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
     progress?: boolean;
     disabled?: boolean;
-}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "variant" | "onlyIcon" | "fullWidth" | "startIcon" | "endIcon" | "data-testid" | keyof {
+}> & Omit<Omit<import("@koobiq/react-primitives").ButtonBaseProps, "slot">, "children" | "style" | "className" | "fullWidth" | "variant" | "onlyIcon" | "startIcon" | "endIcon" | "data-testid" | keyof {
     progress?: boolean;
     disabled?: boolean;
 }> & {

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

@@ -13,7 +13,6 @@ export type DialogBaseProps = {
     onClose?(): void;
     /**
      * If `true`, the close button isn't shown.
-     * @default false
      */
     hideCloseButton?: boolean;
     /** The props used for each slot inside. */

package/dist/components/Divider/Divider.js

@@ -8,8 +8,8 @@ const Divider = polymorphicForwardRef(
     const {
       as: Tag = "div",
       orientation = "horizontal",
-      disablePaddings = false,
-      flexItem = false,
+      disablePaddings,
+      flexItem,
       display,
       className,
       ...other
@@ -23,9 +23,10 @@ const Divider = polymorphicForwardRef(
     return /* @__PURE__ */ jsx(
       Tag,
       {
-        "data-flex-item": flexItem,
+        "data-display": display,
         "data-orientation": orientation,
-        "data-disable-paddings": disablePaddings,
+        "data-flex-item": flexItem || void 0,
+        "data-disable-paddings": disablePaddings || void 0,
         ...separatorProps,
         className: clsx(
           s.base,

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

@@ -11,12 +11,10 @@ export type DividerBaseProps = ExtendableProps<{
      * Indicates if the divider is a child of a flex container.
      * Mainly used for vertical layout.
      * Used when the block does not have a fixed height.
-     * @default false
      */
     flexItem?: boolean;
     /**
      * If `true`, it disables the default paddings.
-     * @default false
      */
     disablePaddings?: boolean;
 }, Omit<SeparatorProps, 'elementType'>>;

package/dist/components/FieldComponents/Field/Field.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { FieldBaseProps } from './types';
+export declare const Field: import("@koobiq/react-core").PolyForwardComponent<"div", FieldBaseProps, ElementType>;
+export type FieldProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof Field<As>>;