@koobiq/react-components 0.0.1 → 0.1.0

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

@@ -1,17 +1,10 @@
 import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref, RefObject } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
 import type { ButtonOptions, AriaMenuProps } from '@koobiq/react-primitives';
-import type { PopoverBaseProps, PopoverPropPlacement } from '../Popover';
+import type { PopoverProps, PopoverPropPlacement } from '../Popover';
 export type MenuPropControl = (props: ButtonOptions & {
     ref?: Ref<HTMLButtonElement>;
 }) => ReactElement;
-export type MenuPropChildren<T extends object> = AriaMenuProps<T>['children'];
-export type MenuPropItems<T extends object> = AriaMenuProps<T>['items'];
-export declare const menuPropSelectionMode: readonly ["none", "single", "multiple"];
-export type MenuPropSelectionMode = (typeof menuPropSelectionMode)[number];
-export type MenuPropOnAction<T extends object> = AriaMenuProps<T>['onAction'];
-export type MenuPropSelected<T extends object> = AriaMenuProps<T>['selectedKeys'];
-export type MenuPropSelectionChange<T extends object> = AriaMenuProps<T>['onSelectionChange'];
-export type MenuPropDisabledKeys<T extends object> = AriaMenuProps<T>['disabledKeys'];
 export type MenuPropPlacement = PopoverPropPlacement;
 type MenuDeprecatedProps = {
     /**
@@ -21,37 +14,21 @@ type MenuDeprecatedProps = {
      */
     open?: boolean;
 };
-export type MenuProps<T extends object> = {
+export type MenuProps<T> = ExtendableProps<{
+    /** Whether the overlay is open by default (controlled). */
+    isOpen?: boolean;
+    /** Whether the overlay is open by default (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Handler that is called when the overlay's open state changes. */
+    onOpenChange?: (isOpen: boolean) => void;
     /** Additional CSS-classes. */
     className?: string;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** Inline styles. */
     style?: CSSProperties;
-    /** The contents of the collection. */
-    children?: MenuPropChildren<T>;
     /** The render function of the control for displaying the modal window. */
     control?: MenuPropControl;
-    /** Whether the overlay is open by default (controlled). */
-    isOpen?: boolean;
-    /** Whether the overlay is open by default (uncontrolled). */
-    defaultOpen?: boolean;
-    /** Handler that is called when the overlay's open state changes. */
-    onOpenChange?: (isOpen: boolean) => void;
-    /** Item objects in the collection. */
-    items?: MenuPropItems<T>;
-    /** The type of selection that is allowed in the collection. */
-    selectionMode?: MenuPropSelectionMode;
-    /**
-     * Handler that is called when a user performs an action on an item. The exact user event depends on
-     * the collection's `selectionBehavior` prop and the interaction modality.
-     */
-    onAction?: MenuPropOnAction<T>;
-    /** The currently selected keys in the collection (controlled). */
-    selectedKeys?: MenuPropSelected<T>;
-    /** Handler that is called when the selection changes. */
-    onSelectionChange?: MenuPropSelectionChange<T>;
-    disabledKeys?: MenuPropDisabledKeys<T>;
     /** The ref for the element which the popover positions itself with respect to. */
     anchorRef?: RefObject<HTMLElement | null>;
     /**
@@ -59,14 +36,14 @@ export type MenuProps<T extends object> = {
      * @default 'bottom start'
      */
     placement?: MenuPropPlacement;
-    /** Ref to the popover */
+    /** Ref to the popover. */
     ref?: Ref<HTMLDivElement>;
     /** The props used for each slot inside. */
     slotProps?: {
-        popover?: PopoverBaseProps;
+        popover?: PopoverProps;
         list?: ComponentPropsWithRef<'ul'>;
     };
-} & MenuDeprecatedProps;
-export type MenuComponent = <T extends object>(props: MenuProps<T>) => ReactElement | null;
+} & MenuDeprecatedProps, AriaMenuProps<T>>;
+export type MenuComponent = <T>(props: MenuProps<T>) => ReactElement | null;
 export type MenuRef = ComponentRef<'div'>;
 export {};

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

@@ -22,7 +22,7 @@ type PopoverDeprecatedProps = {
      */
     open?: boolean;
 };
-export type PopoverBaseProps = {
+export type PopoverProps = {
     /** If `true`, the component is shown. */
     isOpen?: boolean;
     /** The default open state. Use when the component is not controlled. */
@@ -132,6 +132,5 @@ export type PopoverBaseProps = {
 export type PopoverInnerProps = {
     state: OverlayTriggerState;
     popoverRef?: Ref<HTMLDivElement>;
-} & Omit<PopoverBaseProps, 'ref'>;
-export type PopoverProps = PopoverBaseProps;
+} & Omit<PopoverProps, 'ref'>;
 export {};

package/dist/components/ProgressBar/ProgressBar.js

@@ -16,9 +16,9 @@ const ProgressBar = forwardRef(
       style,
       ...other
     } = props;
-    const indeterminate = variant === "indeterminate" || !isNotNil(value);
+    const isIndeterminate = variant === "indeterminate" || !isNotNil(value);
     const setProgressTrackStyles = () => {
-      if (indeterminate) return void 0;
+      if (isIndeterminate) return void 0;
       const translateX = Math.max(
         -maxValue,
         Math.min(minValue, (value || minValue) - maxValue)
@@ -33,10 +33,10 @@ const ProgressBar = forwardRef(
         value,
         minValue,
         maxValue,
-        indeterminate,
-        "data-variant": indeterminate ? "indeterminate" : "determinate",
+        isIndeterminate,
+        "data-variant": isIndeterminate ? "indeterminate" : "determinate",
         style: { ...style, ...setProgressTrackStyles() },
-        className: clsx(s.base, indeterminate && s.indeterminate, className),
+        className: clsx(s.base, isIndeterminate && s.indeterminate, className),
         ...other,
         ref,
         children: /* @__PURE__ */ jsx(

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

@@ -1,26 +1,14 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { ComponentPropsWithRef, CSSProperties } from 'react';
+import type { ExtendableComponentPropsWithRef, ExtendableProps } from '@koobiq/react-core';
+import type { ProgressBarBaseProps as ProgressBarBasePrimitiveProps } from '@koobiq/react-primitives';
 export declare const progressBarPropVariant: readonly ["indeterminate", "determinate"];
 export type ProgressBarPropVariant = (typeof progressBarPropVariant)[number];
-export type ProgressBarBaseProps = {
+export type ProgressBarBaseProps = ExtendableComponentPropsWithRef<{
     children?: never;
-    /**
-     * The current value (controlled).
-     * @default 0
-     */
-    value?: number;
-    /**
-     * The smallest value allowed for the input.
-     * @default 0
-     */
-    minValue?: number;
-    /**
-     * The largest value allowed for the input.
-     * @default 100
-     */
-    maxValue?: number;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /**
      * The variant to use. Use indeterminate or query when there is no progress value.
      * @default 'determinate'
@@ -30,5 +18,5 @@ export type ProgressBarBaseProps = {
     slotProps?: {
         fill?: ComponentPropsWithRef<'span'>;
     };
-};
-export type ProgressBarProps = ExtendableComponentPropsWithRef<ProgressBarBaseProps, 'div'>;
+}, 'div'>;
+export type ProgressBarProps = ExtendableProps<ProgressBarBaseProps, Omit<ProgressBarBasePrimitiveProps, 'children' | 'isIndeterminate' | 'label' | 'formatOptions' | 'valueLabel'>>;

package/dist/components/ProgressSpinner/ProgressSpinner.js

@@ -16,7 +16,7 @@ const ProgressSpinner = forwardRef((props, ref) => {
     slotProps,
     ...other
   } = props;
-  const indeterminate = variant === "indeterminate" || !isNotNil(value);
+  const isIndeterminate = variant === "indeterminate" || !isNotNil(value);
   const [sizeOfPixels, strokeWidth, radius, strokeDasharray] = useMemo(
     () => getSvgParamsBySize(size),
     [size]
@@ -28,13 +28,13 @@ const ProgressSpinner = forwardRef((props, ref) => {
       "data-size": size,
       minValue,
       maxValue,
-      indeterminate,
-      "data-variant": indeterminate ? "indeterminate" : "determinate",
-      className: clsx(s.base, indeterminate && s.indeterminate, className),
+      isIndeterminate,
+      "data-variant": isIndeterminate ? "indeterminate" : "determinate",
+      className: clsx(s.base, isIndeterminate && s.indeterminate, className),
       ...other,
       ref,
       children: ({ percentage = 0 }) => {
-        const progress = indeterminate ? 75 : percentage;
+        const progress = isIndeterminate ? 75 : percentage;
         return /* @__PURE__ */ jsx(
           "svg",
           {

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

@@ -1,33 +1,21 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { ComponentPropsWithRef, CSSProperties } from 'react';
+import type { ExtendableComponentPropsWithRef, ExtendableProps } from '@koobiq/react-core';
+import type { ProgressBarBaseProps as ProgressBarBasePrimitiveProps } from '@koobiq/react-primitives';
 export declare const progressSpinnerPropSize: readonly ["compact", "big"];
 export type ProgressSpinnerPropSize = (typeof progressSpinnerPropSize)[number];
 export declare const progressSpinnerPropVariant: readonly ["indeterminate", "determinate"];
 export type ProgressSpinnerPropVariant = (typeof progressSpinnerPropVariant)[number];
-export type ProgressSpinnerBaseProps = {
+export type ProgressSpinnerBaseProps = ExtendableComponentPropsWithRef<{
     children?: never;
-    /**
-     * The current value (controlled).
-     * @default 0
-     */
-    value?: number;
     /**
      * Size.
      * @default 'compact'
      */
     size?: ProgressSpinnerPropSize;
-    /**
-     * The smallest value allowed for the input.
-     * @default 0
-     */
-    minValue?: number;
-    /**
-     * The largest value allowed for the input.
-     * @default 100
-     */
-    maxValue?: number;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /**
      * The variant to use. Use indeterminate or query when there is no progress value.
      * @default 'determinate'
@@ -37,5 +25,5 @@ export type ProgressSpinnerBaseProps = {
     slotProps?: {
         spin?: ComponentPropsWithRef<'svg'>;
     };
-};
-export type ProgressSpinnerProps = ExtendableComponentPropsWithRef<ProgressSpinnerBaseProps, 'div'>;
+}, 'div'>;
+export type ProgressSpinnerProps = ExtendableProps<ProgressSpinnerBaseProps, Omit<ProgressBarBasePrimitiveProps, 'children' | 'isIndeterminate' | 'label' | 'formatOptions' | 'valueLabel'>>;

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

@@ -1,11 +1,10 @@
 import type { ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
-import type { Node } from '@koobiq/react-core';
+import type { ExtendableProps, Node } from '@koobiq/react-core';
 import type { AriaSelectProps } from '@koobiq/react-primitives';
 import type { FieldErrorProps, FieldLabelProps, FieldSelectProps, FieldCaptionProps, FieldInputGroupProps } from '../FieldComponents';
-import type { ListPropItems, ListPropChildren, ListPropDisabledKeys } from '../List';
+import type { ListProps } from '../List';
 import type { PopoverProps } from '../Popover';
 export type SelectKey = string | number;
-export type SelectPropOnSelectionChange<T> = AriaSelectProps<T>['onSelectionChange'];
 type SelectDeprecatedProps = {
     /**
      * If `true`, the component is disabled.
@@ -42,29 +41,16 @@ type SelectDeprecatedProps = {
      */
     hiddenLabel?: boolean;
 };
-export type SelectProps<T extends object> = {
+export type SelectProps<T> = ExtendableProps<{
     /** Additional CSS-classes. */
     className?: string;
-    /** The content to display as the label. */
-    label?: ReactNode;
-    /** The contents of the collection. */
-    children?: ListPropChildren<T>;
-    /** Item objects in the collection. */
-    items?: ListPropItems<T>;
     /** Addon placed before the children. */
     startAddon?: ReactNode;
     /** Addon placed after the children. */
     endAddon?: ReactNode;
     /** Inline styles. */
     style?: CSSProperties;
-    /** The text appears in a control until the user puts focus on the field. */
-    placeholder?: string;
-    /**
-     * If `true`, the input will indicate an error.
-     * @default false
-     */
-    isInvalid?: boolean;
-    /** Message for the error state */
+    /** An error message for the field. */
     errorMessage?: ReactNode;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
@@ -78,48 +64,23 @@ export type SelectProps<T extends object> = {
      * @default false
      */
     fullWidth?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * If `true`, the label is displayed as required and the input element is required.
-     * @default false
-     */
-    isRequired?: boolean;
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** Ref to the control */
     ref?: Ref<HTMLButtonElement>;
-    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
-    disabledKeys?: ListPropDisabledKeys<T>;
-    /** The initial selected key in the collection (uncontrolled). */
-    defaultSelectedKey?: SelectKey;
-    /** The currently selected key in the collection (controlled). */
-    selectedKey?: SelectKey | null;
-    /** Handler that is called when the selection changes. */
-    onSelectionChange?: SelectPropOnSelectionChange<T>;
-    /** Sets the open state of the menu. */
-    isOpen?: boolean;
-    /** Sets the default open state of the menu. */
-    defaultOpen?: boolean;
-    /** Method that is called when the open state of the menu changes. */
-    onOpenChange?: (isOpen: boolean) => void;
     /** A render function for displaying the selected value. */
     renderValue?: (props: Node<T> | null) => ReactElement;
-    name?: string;
     /** The props used for each slot inside. */
     slotProps?: {
         popover?: PopoverProps;
         label?: FieldLabelProps;
-        list?: ListPropChildren<T>;
+        list?: ListProps<T>;
         control?: FieldSelectProps;
         caption?: FieldCaptionProps;
         group?: FieldInputGroupProps;
         errorMessage?: FieldErrorProps;
     };
-} & SelectDeprecatedProps;
-export type SelectComponent = <T extends object>(props: SelectProps<T>) => ReactElement | null;
+} & SelectDeprecatedProps, Omit<AriaSelectProps<T>, 'description' | 'validationState'>>;
+export type SelectComponent = <T>(props: SelectProps<T>) => ReactElement | null;
 export type SelectRef = ComponentRef<'button'>;
 export {};

package/dist/components/SkeletonBlock/SkeletonBlock.d.ts

@@ -1,2 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
 import type { SkeletonBlockBaseProps } from './index';
-export declare const SkeletonBlock: import("@koobiq/react-core").PolyForwardComponent<"span", SkeletonBlockBaseProps, import("react").ElementType>;
+export declare const SkeletonBlock: import("@koobiq/react-core").PolyForwardComponent<"span", SkeletonBlockBaseProps, ElementType>;
+export type SkeletonBlockProps<As extends ElementType = 'span'> = ComponentPropsWithRef<typeof SkeletonBlock<As>>;

package/dist/components/SkeletonTypography/SkeletonTypography.d.ts

@@ -1,2 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
 import type { SkeletonTypographyBaseProps } from './index';
-export declare const SkeletonTypography: import("@koobiq/react-core").PolyForwardComponent<"span", SkeletonTypographyBaseProps, import("react").ElementType>;
+export declare const SkeletonTypography: import("@koobiq/react-core").PolyForwardComponent<"span", SkeletonTypographyBaseProps, ElementType>;
+export type SkeletonTypographyProps<As extends ElementType = 'span'> = ComponentPropsWithRef<typeof SkeletonTypography<As>>;

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

@@ -1,35 +1,13 @@
 import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
-import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
 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 TablePropSelectionMode<T> = TableStateProps<T>['selectionMode'];
-export type TablePropSelectionBehavior<T> = TableStateProps<T>['selectionBehavior'];
-export type TablePropOnSelectionChange<T> = TableStateProps<T>['onSelectionChange'];
-export type TablePropSelectedKeys<T> = TableStateProps<T>['selectedKeys'];
-export type TablePropDefaultSelectedKeys<T> = TableStateProps<T>['defaultSelectedKeys'];
-export type TablePropDisabledBehavior<T> = TableStateProps<T>['disabledBehavior'];
-export type TablePropDisabledKeys<T> = TableStateProps<T>['disabledKeys'];
 export type TablePropBlockSize = CSSProperties['blockSize'];
 export type TablePropMinBlockSize = CSSProperties['minBlockSize'];
 export type TablePropMaxBlockSize = CSSProperties['maxInlineSize'];
-export type TableProps<T> = ExtendableComponentPropsWithRef<{
-    /** How multiple selection should behave in the collection. */
-    selectionBehavior?: TablePropSelectionBehavior<T>;
-    /** The type of selection that is allowed in the collection. */
-    selectionMode?: TablePropSelectionMode<T>;
-    /** The currently selected keys in the collection (controlled). */
-    selectedKeys?: TablePropSelectedKeys<T>;
-    /** The initial selected keys in the collection (uncontrolled). */
-    defaultSelectedKeys?: TablePropDefaultSelectedKeys<T>;
-    /** Handler that is called when the selection changes. */
-    onSelectionChange?: TablePropOnSelectionChange<T>;
-    /** A list of row keys to disable. */
-    disabledKeys?: TablePropDisabledKeys<T>;
-    /** Whether `disabledKeys` applies to all interactions, or only selection. */
-    disabledBehavior?: TablePropDisabledBehavior<T>;
+export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'disabledKeys' | 'disabledBehavior'> & {
     /** 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. */
@@ -66,6 +44,6 @@ export type TableProps<T> = ExtendableComponentPropsWithRef<{
         container?: ComponentPropsWithRef<'div'>;
         table?: ComponentPropsWithRef<'table'>;
     };
-}, 'div'>;
-export type TableComponent = <T extends object>(props: TableProps<T>) => ReactElement | null;
+};
+export type TableComponent = <T>(props: TableProps<T>) => ReactElement | null;
 export type TableRef = ComponentRef<'table'>;

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

@@ -1,25 +1,14 @@
 import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
 import type { AriaTagGroupProps } from '@koobiq/react-primitives';
-export type TagGroupPropChildren<T extends object> = AriaTagGroupProps<T>['children'];
-export type TagGroupPropItems<T extends object> = AriaTagGroupProps<T>['items'];
-export type TagGroupPropOnRemove<T extends object> = AriaTagGroupProps<T>['onRemove'];
-export type TagGroupPropDisabledKeys<T extends object> = AriaTagGroupProps<T>['disabledKeys'];
 export declare const tagGroupPropVariant: readonly ["theme-fade", "contrast-fade", "error-fade", "warning-fade"];
 export type TagGroupPropVariant = (typeof tagGroupPropVariant)[number];
-export type TagGroupProps<T extends object> = {
-    /** The contents of the collection. */
-    children?: TagGroupPropChildren<T>;
-    /** Item objects in the collection. */
-    items?: TagGroupPropItems<T>;
-    /** Handler that is called when a user deletes a tag.  */
-    onRemove?: TagGroupPropOnRemove<T>;
+export type TagGroupProps<T> = ExtendableProps<{
     /**
      * The variant to use.
      * @default 'theme-fade'
      */
     variant?: TagGroupPropVariant;
-    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
-    disabledKeys?: TagGroupPropDisabledKeys<T>;
     /** Ref to the HTML ul-element. */
     ref?: Ref<HTMLElement>;
     /** Additional CSS-classes. */
@@ -32,6 +21,6 @@ export type TagGroupProps<T extends object> = {
     slotProps?: {
         root?: ComponentPropsWithRef<'div'>;
     };
-};
-export type TagGroupComponent = <T extends object>(props: TagGroupProps<T>) => ReactElement | null;
+}, Omit<AriaTagGroupProps<T>, 'label' | 'errorMessage' | 'description' | 'onSelectionChange' | 'selectedKeys' | 'selectionMode' | 'selectionBehavior' | 'shouldSelectOnPressUp' | 'disallowEmptySelection' | 'defaultSelectedKeys'>>;
+export type TagGroupComponent = <T>(props: TagGroupProps<T>) => ReactElement | null;
 export type TagGroupRef = ComponentRef<'div'>;

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

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

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

@@ -44,8 +44,6 @@ type TextareaDeprecatedProps = {
     readonly?: boolean;
 };
 export type TextareaProps = ExtendableProps<{
-    /** The content to display as the label. */
-    label?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
     /**
@@ -53,28 +51,13 @@ export type TextareaProps = ExtendableProps<{
      * @default 'filled'
      */
     variant?: TextareaPropVariant;
-    /**
-     * If `true`, the input will indicate an error.
-     * @default false
-     */
-    isInvalid?: boolean;
-    /**
-     * If `true`, the input can be selected but not changed by the user.
-     * @default false
-     */
-    isReadOnly?: boolean;
-    /** Message for the error state */
+    /** An error message for the field. */
     errorMessage?: ReactNode;
     /**
      * If true, the input will take up the full width of its container.
      * @default false
      */
     fullWidth?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
     /**
      * If `true`, the label is hidden. Be sure to add aria-label to the input element.
      * @default false
@@ -82,11 +65,6 @@ export type TextareaProps = ExtendableProps<{
     isLabelHidden?: boolean;
     /** The helper text content. */
     caption?: ReactNode;
-    /**
-     * If `true`, the label is displayed as required and the input element is required.
-     * @default false
-     */
-    isRequired?: boolean;
     /** The rows property specifies the visible height of a text area, in lines. */
     rows?: number;
     /** The cols property specifies the visible width of a text area. */

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

@@ -0,0 +1,5 @@
+import { type Ref } from 'react';
+import type { TimeValue } from '@koobiq/react-primitives';
+import type { TimePickerComponent, TimePickerProps, TimePickerRef } from './types';
+export declare function TimePickerRender<T extends TimeValue>(props: Omit<TimePickerProps<T>, 'ref'>, ref: Ref<TimePickerRef>): import("react/jsx-runtime").JSX.Element;
+export declare const TimePicker: TimePickerComponent;

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,112 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLocale, useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { IconClock16 } from "@koobiq/react-icons";
+import { useTimeFieldState, removeDataAttributes, useTimeField } from "@koobiq/react-primitives";
+import s from "./TimePicker.module.css.js";
+import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
+import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
+import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate.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);
+  const {
+    isLabelHidden,
+    caption,
+    label,
+    slotProps,
+    style,
+    fullWidth,
+    variant,
+    className,
+    endAddon,
+    startAddon,
+    errorMessage,
+    "data-testid": testId
+  } = props;
+  const state = useTimeFieldState({
+    ...removeDataAttributes(props),
+    locale
+  });
+  const {
+    labelProps: labelPropReactAria,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps,
+    ...validation
+  } = useTimeField(removeDataAttributes(props), state, domRef);
+  const { isInvalid, isDisabled, isRequired, isReadOnly } = 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 groupProps = mergeProps(
+    {
+      startAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+        startAddon,
+        /* @__PURE__ */ jsx(IconClock16, {})
+      ] }),
+      isInvalid,
+      isDisabled,
+      endAddon
+    },
+    slotProps?.group
+  );
+  const controlProps = mergeProps(
+    {
+      variant,
+      isInvalid,
+      isDisabled,
+      ref: domRef
+    },
+    slotProps?.inputDate,
+    fieldProps
+  );
+  const labelProps = mergeProps(
+    { isHidden: isLabelHidden, children: label, isRequired },
+    labelPropReactAria,
+    slotProps?.label
+  );
+  const captionProps = mergeProps({ children: caption }, slotProps?.caption, descriptionProps);
+  const errorProps = mergeProps(
+    {
+      isInvalid,
+      children: typeof errorMessage === "function" ? errorMessage({ ...validation }) : errorMessage
+    },
+    slotProps?.errorMessage,
+    errorMessageProps
+  );
+  return /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
+    /* @__PURE__ */ jsx(
+      FieldInputGroup,
+      {
+        ...groupProps,
+        slotProps: { start: { className: s.startAddon } },
+        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 })
+  ] });
+}
+const TimePicker = forwardRef(TimePickerRender);
+export {
+  TimePicker,
+  TimePickerRender
+};

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

@@ -0,0 +1,11 @@
+const base = "kbq-timepicker-a6e9f3";
+const startAddon = "kbq-timepicker-startAddon-46c835";
+const s = {
+  base,
+  startAddon
+};
+export {
+  base,
+  s as default,
+  startAddon
+};

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

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