@koobiq/react-components 0.8.0 → 0.10.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.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,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 } 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";
@@ -14,13 +14,13 @@ import { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldCon
 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,
@@ -43,9 +43,11 @@ 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,
@@ -54,10 +56,10 @@ function DateInputRender(props, ref) {
       labelAlign,
       "data-testid": testId,
       "data-variant": variant,
-      "data-invalid": isInvalid,
-      "data-disabled": isDisabled,
-      "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
@@ -80,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
@@ -99,9 +100,12 @@ function DateInputRender(props, ref) {
   return /* @__PURE__ */ jsxs(FormControl, { ...rootProps, children: [
     /* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
     /* @__PURE__ */ jsxs(Field, { children: [
-      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)) }) }),
+      /* @__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(FieldError, { ...errorProps })
+      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FieldError, { ...errorProps }) })
     ] })
   ] });
 }

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

@@ -25,7 +25,6 @@ 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. */
@@ -41,7 +40,6 @@ 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;
     /**
@@ -58,6 +56,6 @@ export type DateInputProps<T extends DateValue> = {
     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/DatePicker/types.d.ts

@@ -7,7 +7,6 @@ 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. */
@@ -41,6 +40,6 @@ export type DatePickerProps<T extends DateValue> = {
         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/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/FieldAddon/FieldAddon.js

@@ -5,8 +5,8 @@ import s from "./FieldAddon.module.css.js";
 const FieldAddon = forwardRef(
   ({
     placement = "start",
-    isInvalid = false,
-    isDisabled = false,
+    isInvalid,
+    isDisabled,
     className,
     children,
     ...other
@@ -21,8 +21,8 @@ const FieldAddon = forwardRef(
         className
       ),
       "data-placement": placement,
-      "data-invalid": isInvalid,
-      "data-disabled": isDisabled,
+      "data-invalid": isInvalid || void 0,
+      "data-disabled": isDisabled || void 0,
       "data-testid": `field-addon-${placement}`,
       ...other,
       ref,

package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.js

@@ -7,8 +7,8 @@ import { FieldContentGroupContext } from "./FieldContentGroupContext.js";
 import { FieldAddon } from "../FieldAddon/FieldAddon.js";
 const FieldContentGroup = forwardRef(function FieldContentGroup2({
   variant = "filled",
-  isInvalid = false,
-  isDisabled = false,
+  isInvalid,
+  isDisabled,
   children,
   className,
   startAddon,

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

@@ -1,6 +1,8 @@
+import { type ReactNode } from 'react';
+import { type ValidationResult } from '@koobiq/react-core';
 import { type TextProps, type TextRef } from '@koobiq/react-primitives';
-export type FieldErrorProps = TextProps & {
-    isInvalid?: boolean;
+export type FieldErrorProps = Omit<TextProps, 'children'> & {
+    children?: ReactNode | ((v: ValidationResult) => ReactNode);
 };
 export type FieldErrorRef = TextRef;
 export declare const FieldError: import("react").ForwardRefExoticComponent<Omit<FieldErrorProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/FieldComponents/FieldError/FieldError.js

@@ -1,19 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { isNotNil, clsx } from "@koobiq/react-core";
-import { Text } from "@koobiq/react-primitives";
+import { clsx } from "@koobiq/react-core";
+import { FieldError as FieldError$1 } from "@koobiq/react-primitives";
 import s from "./FieldError.module.css.js";
 const FieldError = forwardRef(
-  ({ children, className, isInvalid = false, ...other }, ref) => isNotNil(children) && isInvalid ? /* @__PURE__ */ jsx(
-    Text,
+  ({ className, ...other }, ref) => /* @__PURE__ */ jsx(
+    FieldError$1,
     {
       className: clsx(s.base, className),
-      slot: "errorMessage",
       ...other,
-      ref,
-      children
+      ref
     }
-  ) : null
+  )
 );
 FieldError.displayName = "FieldError";
 export {

package/dist/components/FieldComponents/FieldInput/FieldInput.js

@@ -4,10 +4,10 @@ import { Input, Textarea } from "@koobiq/react-primitives";
 import s from "./FieldInput.module.css.js";
 const FieldInput = polymorphicForwardRef(
   ({
-    isInvalid = false,
-    as = "input",
-    isDisabled = false,
     variant = "filled",
+    as = "input",
+    isInvalid,
+    isDisabled,
     className,
     ...other
   }, ref) => {

package/dist/components/FieldComponents/FieldInputDate/FieldInputDate.js

@@ -4,9 +4,9 @@ import { clsx } from "@koobiq/react-core";
 import s from "./FieldInputDate.module.css.js";
 const FieldInputDate = forwardRef(
   ({
-    isInvalid = false,
-    isDisabled = false,
     variant = "filled",
+    isInvalid,
+    isDisabled,
     children,
     className,
     ...other

package/dist/components/FieldComponents/FieldSelect/FieldSelect.js

@@ -2,13 +2,13 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { polymorphicForwardRef, clsx, isNotNil } from "@koobiq/react-core";
 import { Button } from "@koobiq/react-primitives";
 import s from "./FieldSelect.module.css.js";
-import { isPrimitiveNode } from "./utils.js";
+import { isPrimitiveNode } from "../../../utils/isPrimitiveNode.js";
 const FieldSelect = polymorphicForwardRef(
   ({
-    as = "div",
-    isInvalid = false,
-    isDisabled = false,
     variant = "filled",
+    as = "div",
+    isInvalid,
+    isDisabled,
     placeholder,
     children,
     className,

package/dist/components/FormControl/FormControl.js

@@ -5,8 +5,8 @@ const FormControl = polymorphicForwardRef(
   ({
     labelPlacement = "top",
     labelAlign = "start",
-    fullWidth = false,
     as: Tag = "div",
+    fullWidth,
     className,
     ...other
   }, ref) => /* @__PURE__ */ jsx(
@@ -19,9 +19,9 @@ const FormControl = polymorphicForwardRef(
         s[labelPlacement],
         fullWidth && s.fullWidth
       ),
-      "data-fullwidth": fullWidth,
       "data-label-align": labelAlign,
       "data-label-placement": labelPlacement,
+      "data-fullwidth": fullWidth || void 0,
       ...other,
       ref
     }

package/dist/components/FormControlLabel/FormControlLabel.js

@@ -3,14 +3,7 @@ import { polymorphicForwardRef, isNotNil, clsx } from "@koobiq/react-core";
 import { Label } from "@koobiq/react-primitives";
 import s from "./FormControlLabel.module.css.js";
 const FormControlLabel = polymorphicForwardRef(
-  ({
-    children,
-    className,
-    isHidden = false,
-    isRequired = false,
-    as = "label",
-    ...other
-  }, ref) => isNotNil(children) ? /* @__PURE__ */ jsxs(
+  ({ children, className, isHidden, isRequired, as = "label", ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsxs(
     Label,
     {
       as,