@koobiq/react-components 0.0.1-beta.32 → 0.0.1-beta.34

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

@@ -0,0 +1,5 @@
+import type { Ref } from 'react';
+import type { DateValue } from '@koobiq/react-primitives';
+import type { DateInputRef, DateInputProps, DateInputComponentProp } from './types';
+export declare function DateInputRender<T extends DateValue>(props: Omit<DateInputProps<T>, 'ref'>, ref: Ref<DateInputRef>): import("react/jsx-runtime").JSX.Element;
+export declare const DateInput: DateInputComponentProp;

package/dist/components/DateInput/DateInput.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { createCalendar } from "@internationalized/date";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useLocale, useDateFieldState, removeDataAttributes, useDateField } from "@koobiq/react-primitives";
+import s from "./DateInput.module.css.js";
+import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate.js";
+import { DateInputSegment } from "./components/DateInputSegment/DateInputSegment.js";
+import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
+import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.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,
+    endAddon,
+    isLabelHidden,
+    label,
+    className,
+    style,
+    fullWidth,
+    isReadOnly,
+    "data-testid": testId
+  } = props;
+  const state = useDateFieldState({
+    ...removeDataAttributes(props),
+    locale,
+    createCalendar
+  });
+  const domRef = useDOMRef(ref);
+  const {
+    labelProps: labelPropReactAria,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps,
+    ...validation
+  } = useDateField({ ...removeDataAttributes(props) }, state, domRef);
+  const { isInvalid, isRequired, isDisabled } = state;
+  const rootProps = mergeProps(
+    {
+      style,
+      fullWidth,
+      "data-testid": testId,
+      "data-variant": variant,
+      "data-invalid": isInvalid,
+      "data-disabled": isDisabled,
+      "data-fullwidth": fullWidth,
+      "data-required": isRequired,
+      "data-readonly": isReadOnly,
+      className: clsx(s.base, className)
+    },
+    slotProps?.root
+  );
+  const labelProps = mergeProps(
+    { isHidden: isLabelHidden, children: label, isRequired },
+    labelPropReactAria,
+    slotProps?.label
+  );
+  const groupProps = mergeProps(
+    {
+      endAddon,
+      isInvalid,
+      startAddon
+    },
+    slotProps?.group
+  );
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
+  const errorProps = mergeProps(
+    {
+      isInvalid,
+      children: typeof errorMessage === "function" ? errorMessage({ ...validation }) : errorMessage
+    },
+    slotProps?.errorMessage,
+    errorMessageProps
+  );
+  const controlProps = mergeProps(
+    {
+      variant,
+      isInvalid,
+      isDisabled,
+      ref: domRef
+    },
+    slotProps?.inputDate,
+    fieldProps
+  );
+  return /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
+    /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateInputSegment, { segment, state }, i)) }) }),
+    /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
+    /* @__PURE__ */ jsx(FieldError, { ...errorProps })
+  ] });
+}
+const DateInput = forwardRef(DateInputRender);
+export {
+  DateInput,
+  DateInputRender
+};

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

@@ -0,0 +1,8 @@
+const base = "kbq-dateinput-a4c39b";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

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

@@ -0,0 +1,7 @@
+import type { DateSegment, DateFieldState } from '@koobiq/react-primitives';
+type DateInputSegmentProps = {
+    segment: DateSegment;
+    state: DateFieldState;
+};
+export declare function DateInputSegment({ segment, state }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DateInput/components/DateInputSegment/DateInputSegment.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import { useDateSegment } from "@koobiq/react-primitives";
+import s from "./DateInputSegment.module.css.js";
+function DateInputSegment({ segment, state }) {
+  const ref = useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  const { text, isPlaceholder, type } = segment;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...segmentProps,
+      ref,
+      className: clsx(
+        s.base,
+        s[type],
+        state.value !== null && s.hasValue,
+        isPlaceholder && s.placeholder
+      ),
+      children: text
+    }
+  );
+}
+export {
+  DateInputSegment
+};

package/dist/components/DateInput/components/DateInputSegment/DateInputSegment.module.css.js

@@ -0,0 +1,17 @@
+const base = "kbq-dateinputsegment-996e10";
+const placeholder = "kbq-dateinputsegment-placeholder-be1df1";
+const literal = "kbq-dateinputsegment-literal-d722fc";
+const hasValue = "kbq-dateinputsegment-hasValue-886d0f";
+const s = {
+  base,
+  placeholder,
+  literal,
+  hasValue
+};
+export {
+  base,
+  s as default,
+  hasValue,
+  literal,
+  placeholder
+};

package/dist/components/DateInput/components/DateInputSegment/index.d.ts

@@ -0,0 +1 @@
+export * from './DateInputSegment';

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

@@ -0,0 +1 @@
+export * from './DateInputSegment';

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

@@ -0,0 +1,2 @@
+export * from './DateInput';
+export * from './types';

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

@@ -0,0 +1,47 @@
+import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { AriaDateFieldProps, DateValue } from '@koobiq/react-primitives';
+import type { FieldCaptionProps, FieldControlProps, FieldErrorProps, FieldInputDateProps, FieldInputGroupProps, FieldLabelProps } from '../FieldComponents';
+export declare const dateInputPropVariant: readonly ["filled", "transparent"];
+export type DateInputPropVariant = (typeof dateInputPropVariant)[number];
+export type DateInputProps<T extends DateValue> = {
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** The helper text content. */
+    caption?: string | number;
+    /**
+     * The variant to use.
+     * @default filled
+     */
+    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;
+        group?: FieldInputGroupProps;
+        caption?: FieldCaptionProps;
+        inputDate?: FieldInputDateProps;
+        errorMessage?: FieldErrorProps;
+    };
+    /** Ref to the control */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * If `true`, the label is hidden. Be sure to add aria-label to the input element.
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+} & Omit<AriaDateFieldProps<T>, 'description' | 'validationBehavior' | 'validate' | 'validationState'>;
+export type DateInputComponentProp = <T extends DateValue>(props: DateInputProps<T>) => ReactElement | null;
+export type DateInputRef = ComponentRef<'div'>;

package/dist/components/DateInput/types.js

@@ -0,0 +1,4 @@
+const dateInputPropVariant = ["filled", "transparent"];
+export {
+  dateInputPropVariant
+};

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

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { DatePicker } from './DatePicker';
+declare const meta: {
+    title: string;
+    component: typeof DatePicker;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;

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

@@ -0,0 +1,3 @@
+import type { AriaDatePickerProps, DateValue } from '@koobiq/react-primitives';
+export type DatePickerProps<T extends DateValue> = AriaDatePickerProps<T>;
+export declare function DatePicker<T extends DateValue>(props: DatePickerProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { type ReactNode, type Ref } from 'react';
+import type { InputPropVariant } from '../../Input';
+export type FieldInputDateProps = {
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    variant?: InputPropVariant;
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const FieldInputDate: import("react").ForwardRefExoticComponent<Omit<FieldInputDateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import s from "./FieldInputDate.module.css.js";
+const FieldInputDate = forwardRef(
+  ({
+    isInvalid = false,
+    isDisabled = false,
+    variant = "filled",
+    children,
+    className,
+    ...other
+  }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...other,
+      className: clsx(
+        s.base,
+        s[variant],
+        isInvalid && s.invalid,
+        isDisabled && s.disabled,
+        className
+      ),
+      ref,
+      children
+    }
+  )
+);
+FieldInputDate.displayName = "FieldSelect";
+export {
+  FieldInputDate
+};

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

@@ -0,0 +1,20 @@
+const base = "kbq-fieldinputdate-a54331";
+const transparent = "kbq-fieldinputdate-transparent-04d912";
+const filled = "kbq-fieldinputdate-filled-02db7d";
+const invalid = "kbq-fieldinputdate-invalid-d764c6";
+const disabled = "kbq-fieldinputdate-disabled-692832";
+const s = {
+  base,
+  transparent,
+  filled,
+  invalid,
+  disabled
+};
+export {
+  base,
+  s as default,
+  disabled,
+  filled,
+  invalid,
+  transparent
+};

package/dist/components/FieldComponents/FieldInputDate/index.d.ts

@@ -0,0 +1 @@
+export * from './FieldInputDate';

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

@@ -6,3 +6,4 @@ export * from './FieldAddon';
 export * from './FieldCaption';
 export * from './FieldError';
 export * from './FieldInputGroup';
+export * from './FieldInputDate';

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

@@ -1,6 +1,6 @@
 import { TextField } from '@koobiq/react-primitives';
 import { type FieldLabelProps, type FieldInputGroupProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputProps, type FieldControlProps } from '../FieldComponents';
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "style" | "className" | "validationBehavior" | "validate" | "description" | "inputElementType">, "value" | "caption" | "label" | "style" | "className" | "defaultValue" | "onChange" | "placeholder" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isReadOnly" | "isRequired" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationBehavior" | "validate" | "description" | "inputElementType">, "value" | "caption" | "label" | "style" | "className" | "defaultValue" | "onChange" | "placeholder" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isReadOnly" | "isRequired" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;

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

@@ -115,6 +115,6 @@ export type InputProps = ExtendableProps<{
         errorMessage?: FieldErrorProps;
         input?: FieldInputProps<'input'>;
     };
-} & InputDeprecatedProps, Omit<TextFieldProps<HTMLInputElement>, 'description' | 'validationBehavior' | 'validate' | 'children' | 'style' | 'className' | 'inputElementType'>>;
+} & InputDeprecatedProps, Omit<TextFieldProps<HTMLInputElement>, 'description' | 'validationBehavior' | 'validate' | 'children' | 'inputElementType'>>;
 export type InputRef = ComponentRef<'input'>;
 export {};

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

@@ -1,6 +1,6 @@
 import { NumberField } from '@koobiq/react-primitives';
 import { type FieldControlProps, type FieldLabelProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputGroupProps, type FieldInputProps } from '../FieldComponents';
-export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/numberfield").AriaNumberFieldProps, "inputElementType">, "caption" | "label" | "style" | "className" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isRequired" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/numberfield").AriaNumberFieldProps, "children" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "label" | "style" | "className" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isRequired" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;

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

@@ -102,6 +102,6 @@ export type InputNumberProps = ExtendableProps<{
         group?: FieldInputGroupProps;
         errorMessage?: FieldErrorProps;
     };
-} & InputNumberDeprecatedProps, Omit<UseNumberFieldProps, 'inputElementType'>>;
+} & InputNumberDeprecatedProps, Omit<UseNumberFieldProps, 'description' | 'validationBehavior' | 'validate' | 'children' | 'inputElementType'>>;
 export type InputNumberRef = ComponentRef<'input'>;
 export {};

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

@@ -57,5 +57,5 @@ export type LinkBaseProps = ExtendableProps<{
     className?: string;
     /** Inline styles */
     style?: CSSProperties;
-} & LinkDeprecatedProps, UseLinkProps>;
+} & LinkDeprecatedProps, Omit<UseLinkProps, 'elementType'>>;
 export {};

package/dist/components/Menu/Menu.js

@@ -3,11 +3,11 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { useDOMRef, mergeProps, clsx, Pressable } from "@koobiq/react-core";
 import { useMenuTriggerState, useMenuTrigger } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./Menu.module.css.js";
 import { MenuInner } from "./components/MenuInner/MenuInner.js";
 import { Header } from "../Collections/Header.js";
 import { Divider } from "../Collections/Divider.js";
-import { PopoverInner } from "../Popover/Popover.js";
 import { Item } from "../Collections/Item.js";
 import { Section } from "../Collections/Section.js";
 import { ListItemText } from "../List/components/ListItemText/ListItemText.js";

package/dist/components/Popover/Popover.d.ts

@@ -1,7 +1,4 @@
-import type { FC } from 'react';
 import { Dialog } from '../Dialog';
-import type { PopoverInnerProps } from './types';
-export declare const PopoverInner: FC<PopoverInnerProps>;
 declare const PopoverComponent: import("react").ForwardRefExoticComponent<import("./types").PopoverBaseProps & import("react").RefAttributes<HTMLDivElement>>;
 type CompoundedComponent = typeof PopoverComponent & {
     Header: typeof Dialog.Header;

package/dist/components/Popover/Popover.js

@@ -1,143 +1,9 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, cloneElement, isValidElement } from "react";
-import { useDOMRef, useBoolean, mergeProps, clsx } from "@koobiq/react-core";
-import { useOverlayTrigger, usePopover, Overlay, useOverlayTriggerState } from "@koobiq/react-primitives";
-import { Transition } from "react-transition-group";
-import s from "./Popover.module.css.js";
-import { normalizeInlineSize } from "./utils.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useOverlayTriggerState } from "@koobiq/react-primitives";
+import { PopoverInner } from "./PopoverInner.js";
 import { Dialog } from "../Dialog/Dialog.js";
-const PopoverInner = (props) => {
-  const {
-    offset = 0,
-    size = "medium",
-    crossOffset = 0,
-    hideArrow = false,
-    containerPadding = 12,
-    arrowBoundaryOffset = 20,
-    placement: placementProp = "top",
-    maxBlockSize = 480,
-    type = "dialog",
-    state,
-    control,
-    children,
-    anchorRef,
-    slotProps,
-    className,
-    isNonModal,
-    popoverRef,
-    portalContainer,
-    hideCloseButton,
-    disableFocusManagement,
-    disableExitOnEscapeKeyDown,
-    shouldCloseOnInteractOutside,
-    ...other
-  } = props;
-  const showArrow = !hideArrow;
-  const domRef = useDOMRef(popoverRef);
-  const controlRef = useRef(null);
-  const openState = state.isOpen;
-  const [opened, { on, off }] = useBoolean(openState);
-  const { triggerProps, overlayProps } = useOverlayTrigger(
-    { type },
-    { ...state, isOpen: openState }
-  );
-  const {
-    popoverProps,
-    underlayProps,
-    arrowProps: arrowPropsCommon,
-    placement
-  } = usePopover(
-    {
-      ...props,
-      offset,
-      isNonModal,
-      crossOffset,
-      containerPadding,
-      popoverRef: domRef,
-      arrowBoundaryOffset,
-      maxHeight: maxBlockSize,
-      placement: placementProp,
-      shouldCloseOnInteractOutside,
-      triggerRef: anchorRef || controlRef,
-      isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
-    },
-    { ...state, isOpen: openState || opened }
-  );
-  const resolvedChildren = () => {
-    if (typeof children === "function")
-      return cloneElement(children({ close: state.close }), overlayProps);
-    if (isValidElement(children)) return cloneElement(children, overlayProps);
-    return children;
-  };
-  const arrowProps = mergeProps(
-    { className: s.arrow },
-    arrowPropsCommon,
-    slotProps?.arrow
-  );
-  const dialogProps = mergeProps(
-    {
-      role: "dialog",
-      hideCloseButton,
-      className: s.dialog,
-      onClose: state.close
-    },
-    slotProps?.dialog
-  );
-  const backdropProps = mergeProps(
-    { className: s.underlay },
-    slotProps?.backdrop,
-    underlayProps
-  );
-  const transitionProps = mergeProps(
-    {
-      timeout: 120,
-      onEnter: on,
-      onExited: off,
-      appear: true,
-      in: openState,
-      nodeRef: domRef,
-      unmountOnExit: true
-    },
-    slotProps?.transition
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    control?.({
-      ref: controlRef,
-      ...triggerProps
-    }),
-    /* @__PURE__ */ jsx(Transition, { ...transitionProps, children: (transition) => /* @__PURE__ */ jsxs(
-      Overlay,
-      {
-        portalContainer,
-        disableFocusManagement,
-        children: [
-          /* @__PURE__ */ jsx("div", { ...backdropProps }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: domRef,
-              "data-size": size,
-              "data-arrow": showArrow,
-              "data-placement": placement,
-              "data-transition": transition,
-              className: clsx(s.base, s[size], className),
-              ...mergeProps(popoverProps, other),
-              style: {
-                ...popoverProps.style,
-                "--popover-inline-size": normalizeInlineSize(size)
-              },
-              children: [
-                showArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, "data-placement": placement }),
-                /* @__PURE__ */ jsx("div", { className: s.container, children: type === "dialog" ? /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: resolvedChildren() }) : resolvedChildren() })
-              ]
-            }
-          )
-        ]
-      }
-    ) })
-  ] });
-};
 const PopoverComponent = forwardRef(
   (props, ref) => {
     const { open, onOpenChange, defaultOpen, ...other } = props;
@@ -156,6 +22,5 @@ Popover.Header = Dialog.Header;
 Popover.Body = Dialog.Body;
 Popover.Footer = Dialog.Footer;
 export {
-  Popover,
-  PopoverInner
+  Popover
 };

package/dist/components/Popover/PopoverInner.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import type { PopoverInnerProps } from './types';
+export declare const PopoverInner: FC<PopoverInnerProps>;

package/dist/components/Popover/PopoverInner.js

@@ -0,0 +1,142 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, cloneElement, isValidElement } from "react";
+import { useDOMRef, useBoolean, mergeProps, clsx } from "@koobiq/react-core";
+import { useOverlayTrigger, usePopover, Overlay } from "@koobiq/react-primitives";
+import { Transition } from "react-transition-group";
+import s from "./Popover.module.css.js";
+import { normalizeInlineSize } from "./utils.js";
+import { Dialog } from "../Dialog/Dialog.js";
+const PopoverInner = (props) => {
+  const {
+    offset = 0,
+    size = "medium",
+    crossOffset = 0,
+    hideArrow = false,
+    containerPadding = 12,
+    arrowBoundaryOffset = 20,
+    placement: placementProp = "top",
+    maxBlockSize = 480,
+    type = "dialog",
+    state,
+    control,
+    children,
+    anchorRef,
+    slotProps,
+    className,
+    isNonModal,
+    popoverRef,
+    portalContainer,
+    hideCloseButton,
+    disableFocusManagement,
+    disableExitOnEscapeKeyDown,
+    shouldCloseOnInteractOutside,
+    ...other
+  } = props;
+  const showArrow = !hideArrow;
+  const domRef = useDOMRef(popoverRef);
+  const controlRef = useRef(null);
+  const openState = state.isOpen;
+  const [opened, { on, off }] = useBoolean(openState);
+  const { triggerProps, overlayProps } = useOverlayTrigger(
+    { type },
+    { ...state, isOpen: openState }
+  );
+  const {
+    popoverProps,
+    underlayProps,
+    arrowProps: arrowPropsCommon,
+    placement
+  } = usePopover(
+    {
+      ...props,
+      offset,
+      isNonModal,
+      crossOffset,
+      containerPadding,
+      popoverRef: domRef,
+      arrowBoundaryOffset,
+      maxHeight: maxBlockSize,
+      placement: placementProp,
+      shouldCloseOnInteractOutside,
+      triggerRef: anchorRef || controlRef,
+      isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
+    },
+    { ...state, isOpen: openState || opened }
+  );
+  const resolvedChildren = () => {
+    if (typeof children === "function")
+      return cloneElement(children({ close: state.close }), overlayProps);
+    if (isValidElement(children)) return cloneElement(children, overlayProps);
+    return children;
+  };
+  const arrowProps = mergeProps(
+    { className: s.arrow },
+    arrowPropsCommon,
+    slotProps?.arrow
+  );
+  const dialogProps = mergeProps(
+    {
+      role: "dialog",
+      hideCloseButton,
+      className: s.dialog,
+      onClose: state.close
+    },
+    slotProps?.dialog
+  );
+  const backdropProps = mergeProps(
+    { className: s.underlay },
+    slotProps?.backdrop,
+    underlayProps
+  );
+  const transitionProps = mergeProps(
+    {
+      timeout: 120,
+      onEnter: on,
+      onExited: off,
+      appear: true,
+      in: openState,
+      nodeRef: domRef,
+      unmountOnExit: true
+    },
+    slotProps?.transition
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    control?.({
+      ref: controlRef,
+      ...triggerProps
+    }),
+    /* @__PURE__ */ jsx(Transition, { ...transitionProps, children: (transition) => /* @__PURE__ */ jsxs(
+      Overlay,
+      {
+        portalContainer,
+        disableFocusManagement,
+        children: [
+          /* @__PURE__ */ jsx("div", { ...backdropProps }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: domRef,
+              "data-size": size,
+              "data-arrow": showArrow,
+              "data-placement": placement,
+              "data-transition": transition,
+              className: clsx(s.base, s[size], className),
+              ...mergeProps(popoverProps, other),
+              style: {
+                ...popoverProps.style,
+                "--popover-inline-size": normalizeInlineSize(size)
+              },
+              children: [
+                showArrow && /* @__PURE__ */ jsx("div", { ...arrowProps, "data-placement": placement }),
+                /* @__PURE__ */ jsx("div", { className: s.container, children: type === "dialog" ? /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: resolvedChildren() }) : resolvedChildren() })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  PopoverInner
+};

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

@@ -33,5 +33,5 @@ export type RadioGroupBaseProps = ExtendableProps<{
     defaultValue?: UseRadioGroupProps['defaultValue'];
     /** Handler that is called when the value changes. */
     onChange?: UseRadioGroupProps['onChange'];
-}, UseRadioGroupProps>;
+}, Omit<UseRadioGroupProps, 'validationBehavior' | 'validate' | 'validationState'>>;
 export type RadioGroupProps = ExtendableComponentPropsWithRef<RadioGroupBaseProps, 'div'>;

package/dist/components/Select/Select.js

@@ -4,9 +4,9 @@ import { deprecate } from "@koobiq/logger";
 import { useDOMRef, useBoolean, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
 import { IconChevronDownS16 } from "@koobiq/react-icons";
 import { useSelectState, removeDataAttributes, useSelect, HiddenSelect } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
 import s from "./Select.module.css.js";
 import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
-import { PopoverInner } from "../Popover/Popover.js";
 import { ListInner } from "../List/List.js";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";

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" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "label" | "className" | "cols" | "rows" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isReadOnly" | "isRequired" | "errorMessage" | "isLabelHidden" | "expand"> & {
+} & Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLTextAreaElement>, "children" | "style" | "className" | "validationState" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "label" | "className" | "cols" | "rows" | "isDisabled" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "isInvalid" | "isReadOnly" | "isRequired" | "errorMessage" | "isLabelHidden" | "expand"> & {
     label?: import("react").ReactNode;
     className?: string;
     variant?: import("./types").TextareaPropVariant;

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

@@ -112,6 +112,6 @@ export type TextareaProps = ExtendableProps<{
         textarea?: FieldInputProps<'textarea'>;
         errorMessage?: FieldErrorProps;
     };
-}, TextareaDeprecatedProps & Omit<TextFieldProps<HTMLTextAreaElement>, 'description' | 'validationBehavior' | 'validate' | 'children' | 'style' | 'className' | 'inputElementType'>>;
+}, TextareaDeprecatedProps & Omit<TextFieldProps<HTMLTextAreaElement>, 'description' | 'validationBehavior' | 'validationState' | 'validate' | 'children' | 'style' | 'className' | 'inputElementType'>>;
 export type TextareaRef = ComponentRef<'textarea'>;
 export {};

package/dist/components/index.d.ts

@@ -31,6 +31,7 @@ export * from './ButtonToggleGroup';
 export * from './TagGroup';
 export * from './Table';
 export * from './Calendar';
+export * from './DateInput';
 export * from './layout';
-export { useListData } from '@koobiq/react-primitives';
+export { useListData, useDateFormatter, type DateFormatterOptions, } from '@koobiq/react-primitives';
 export { useRouter, RouterProvider } from '@koobiq/react-primitives';

package/dist/index.js

@@ -1,5 +1,5 @@
 /* empty css           */
-import { RouterProvider, useListData, useLocale, useRouter } from "@koobiq/react-primitives";
+import { RouterProvider, useDateFormatter, useListData, useLocale, useRouter } from "@koobiq/react-primitives";
 import { Provider, defaultBreakpoints } from "./components/Provider/Provider.js";
 import { BreakpointsProvider } from "./components/Provider/BreakpointsProvider.js";
 import { ProviderContext, useProvider } from "./components/Provider/ProviderContext.js";
@@ -50,7 +50,7 @@ import { ModalContent, ModalFooter, ModalHeader } from "./components/Modal/index
 import { SidePanel } from "./components/SidePanel/SidePanel.js";
 import { sidePanelPropPosition, sidePanelPropSize } from "./components/SidePanel/types.js";
 import { SidePanelContent, SidePanelFooter, SidePanelHeader } from "./components/SidePanel/index.js";
-import { Popover, PopoverInner } from "./components/Popover/Popover.js";
+import { Popover } from "./components/Popover/Popover.js";
 import { popoverPropPlacement, popoverPropSize, popoverPropType } from "./components/Popover/types.js";
 import { PopoverContent, PopoverFooter, PopoverHeader } from "./components/Popover/index.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
@@ -73,6 +73,8 @@ import { Tag } from "./components/TagGroup/Tag.js";
 import { tagGroupPropVariant } from "./components/TagGroup/types.js";
 import { Table } from "./components/Table/Table.js";
 import { Calendar } from "./components/Calendar/Calendar.js";
+import { DateInput, DateInputRender } from "./components/DateInput/DateInput.js";
+import { dateInputPropVariant } from "./components/DateInput/types.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -87,6 +89,8 @@ export {
   Calendar,
   Checkbox,
   Container,
+  DateInput,
+  DateInputRender,
   Divider,
   FlexBox,
   Grid,
@@ -109,7 +113,6 @@ export {
   PopoverContent,
   PopoverFooter,
   PopoverHeader,
-  PopoverInner,
   ProgressBar,
   ProgressSpinner,
   Provider,
@@ -142,6 +145,7 @@ export {
   checkboxPropSize,
   containerMarginsProp,
   containerPositionProp,
+  dateInputPropVariant,
   defaultBreakpoints,
   dividerPropDisplay,
   dividerPropOrientation,
@@ -187,6 +191,7 @@ export {
   typographyPropDisplay,
   typographyPropVariant,
   useBreakpoints,
+  useDateFormatter,
   useListData,
   useLocale,
   useMatchedBreakpoints,

package/dist/style.css

@@ -3750,6 +3750,113 @@
   color: var(--kbq-states-foreground-disabled);
   cursor: not-allowed;
 }
+.kbq-dateinput-a4c39b {
+  min-inline-size: 150px;
+}
+.kbq-fieldinputdate-a54331 {
+  --field-input-outline-width: var(--kbq-size-3xs);
+  --field-input-color: var(--kbq-foreground-contrast);
+  --field-input-border-color: var(--kbq-line-contrast-fade);
+  --field-input-outline-color: var(--kbq-states-line-focus-theme);
+  --field-input-bg-color: var(--kbq-background-bg);
+  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
+  cursor: pointer;
+  outline-offset: -1px;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: var(--kbq-size-3xl);
+  border-radius: var(--kbq-size-s);
+  color: var(--field-input-color);
+  background: var(--field-input-bg-color);
+  border: 1px solid var(--field-input-border-color);
+  outline: var(--field-input-outline-width) solid transparent;
+  padding-block: var(--field-input-padding-block-start) var(--field-input-padding-block-end);
+  padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  transition: color var(--kbq-transition-default), outline-color var(--kbq-transition-default), background-color var(--kbq-transition-default), border-color var(--kbq-transition-default);
+  align-items: center;
+  display: flex;
+}
+
+.kbq-fieldinputdate-a54331:focus-within {
+  outline-color: var(--field-input-outline-color);
+}
+
+.kbq-fieldinputdate-transparent-04d912 {
+  --field-input-color: var(--kbq-foreground-contrast);
+  --field-input-border-color: transparent;
+  --field-input-outline-color: transparent;
+  --field-input-bg-color: transparent;
+  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
+}
+
+.kbq-fieldinputdate-filled-02db7d {
+  --field-input-color: var(--kbq-foreground-contrast);
+  --field-input-border-color: var(--kbq-line-contrast-fade);
+  --field-input-outline-color: var(--kbq-states-line-focus-theme);
+  --field-input-bg-color: var(--kbq-background-bg);
+  --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
+}
+
+.kbq-fieldinputdate-filled-02db7d:where(.kbq-fieldinputdate-invalid-d764c6) {
+  --field-input-color: var(--kbq-foreground-error);
+  --field-input-border-color: var(--kbq-line-error);
+  --field-input-outline-color: var(--kbq-states-line-focus-error);
+  --field-input-bg-color: var(--kbq-states-background-error-less);
+  --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
+}
+
+.kbq-fieldinputdate-transparent-04d912:where(.kbq-fieldinputdate-invalid-d764c6) {
+  --field-input-color: var(--kbq-foreground-error);
+  --field-input-border-color: transparent;
+  --field-input-outline-color: transparent;
+  --field-input-bg-color: transparent;
+  --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
+}
+
+.kbq-fieldinputdate-disabled-692832 {
+  cursor: not-allowed;
+}
+
+.kbq-fieldinputdate-filled-02db7d:where(.kbq-fieldinputdate-disabled-692832) {
+  --field-input-color: var(--kbq-states-foreground-disabled);
+  --field-input-border-color: var(--kbq-states-line-disabled);
+  --field-input-bg-color: var(--kbq-states-background-disabled);
+}
+
+.kbq-fieldinputdate-transparent-04d912:where(.kbq-fieldinputdate-disabled-692832) {
+  --field-input-color: var(--kbq-states-foreground-disabled);
+}
+.kbq-dateinputsegment-996e10 {
+  --date-input-segment-color: var(--field-input-color);
+  color: var(--date-input-segment-color);
+}
+
+.kbq-dateinputsegment-996e10:focus {
+  color: var(--date-input-segment-color);
+  background-color: highlight;
+  outline: none;
+}
+
+.kbq-dateinputsegment-placeholder-be1df1 {
+  color: var(--field-input-placeholder-color);
+}
+
+.kbq-dateinputsegment-literal-d722fc {
+  white-space: pre;
+}
+
+.kbq-dateinputsegment-literal-d722fc:not(.kbq-dateinputsegment-hasValue-886d0f) {
+  color: var(--field-input-placeholder-color);
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.32",
+  "version": "0.0.1-beta.34",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.32",
-    "@koobiq/react-core": "0.0.1-beta.32",
-    "@koobiq/react-primitives": "0.0.1-beta.32",
-    "@koobiq/react-icons": "0.0.1-beta.32"
+    "@koobiq/react-core": "0.0.1-beta.34",
+    "@koobiq/react-icons": "0.0.1-beta.34",
+    "@koobiq/react-primitives": "0.0.1-beta.34",
+    "@koobiq/logger": "0.0.1-beta.34"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",