@koobiq/react-components 0.0.1-beta.8 → 0.0.1

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

@@ -1,27 +1,112 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { UseCheckboxProps } from '@koobiq/react-primitives';
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
 export declare const checkboxPropSize: readonly ["normal", "big"];
 export type CheckboxPropSize = (typeof checkboxPropSize)[number];
 export declare const checkboxPropLabelPlacement: readonly ["start", "end"];
 export type CheckboxPropLabelPlacement = (typeof checkboxPropLabelPlacement)[number];
-export type CheckboxProps = UseCheckboxProps & {
+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.
+     */
+    error?: boolean;
+    /**
+     * If `true`, the component is checked.
+     * @deprecated
+     * The "checked" prop is deprecated. Use "isSelected" prop to replace it.
+     */
+    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.
+     */
+    indeterminate?: boolean;
+    /**
+     * The default checked state. Use when the component is not controlled.
+     * @deprecated
+     * The "defaultChecked" prop is deprecated. Use "defaultSelected" prop to replace it.
+     */
+    defaultChecked?: boolean;
+};
+export type CheckboxProps = {
+    /** The content of the component. */
+    children?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /**
      * Size.
-     * @default normal
-     * */
+     * @default 'normal'
+     */
     size?: CheckboxPropSize;
-    /** Unique identifier for testing purposes. */
-    'data-testid'?: string | number;
     /**
      * The position of the label.
-     * @default end
-     * */
+     * @default 'end'
+     */
     labelPlacement?: CheckboxPropLabelPlacement;
+    /**
+     * If `true`, the component will indicate an error.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /** If `true`, the component is checked. */
+    isSelected?: boolean;
+    /**
+     * It prevents the user from changing the value of the checkbox.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true`, the input element is required.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * If `true`, the component appears indeterminate.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /** The default checked state. Use when the component is not controlled. */
+    defaultSelected?: boolean;
+    /** Callback fired when the state is changed. */
+    onChange?: CheckboxPropOnChange;
     /** The props used for each slot inside. */
     slotProps?: {
         box?: ComponentPropsWithRef<'span'>;
         label?: ComponentPropsWithRef<'span'>;
     };
-};
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+} & CheckboxDeprecatedProps;
+export {};

package/dist/components/Collections/Cell.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'react';
+import type { CellProps as AriaCellProps } from '@koobiq/react-primitives';
+export declare const cellPropAlign: readonly ["left", "right", "center"];
+export declare const cellPropVerticalAlign: readonly ["baseline", "top", "middle", "bottom", "sub", "text-top"];
+export type CellPropAlign = (typeof cellPropAlign)[number];
+export type CellPropVerticalAlign = (typeof cellPropVerticalAlign)[number];
+export type CellProps = AriaCellProps & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /**
+     * Horizontal alignment of the cell content.
+     * @default left
+     */
+    align?: CellPropAlign;
+    /**
+     * Vertical alignment of the cell content.
+     * @default middle
+     */
+    valign?: CellPropVerticalAlign;
+};
+export declare function Cell(_props: CellProps): null;
+export declare namespace Cell {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/Cell.js

@@ -0,0 +1,10 @@
+"use client";
+import { Cell as Cell$1 } from "@koobiq/react-primitives";
+const CellInner = Cell$1;
+function Cell(_props) {
+  return null;
+}
+Cell.getCollectionNode = CellInner.getCollectionNode;
+export {
+  Cell
+};

package/dist/components/Collections/Column.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'react';
+import type { ColumnProps as AriaColumnProps } from '@koobiq/react-primitives';
+export declare const columnPropAlign: readonly ["left", "right", "center"];
+export declare const columnPropVerticalAlign: readonly ["baseline", "top", "middle", "bottom", "sub", "text-top"];
+export type ColumnPropAlign = (typeof columnPropAlign)[number];
+export type ColumnPropVerticalAlign = (typeof columnPropVerticalAlign)[number];
+export type ColumnProps<T> = Omit<AriaColumnProps<T>, 'allowsResizing' | 'allowsSorting' | 'width' | 'defaultWidth' | 'minWidth' | 'maxWidth'> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /**
+     * Horizontal alignment of the cell content.
+     * @default left
+     */
+    align?: ColumnPropAlign;
+    /**
+     * Vertical alignment of the cell content.
+     * @default middle
+     */
+    valign?: ColumnPropVerticalAlign;
+};
+export declare function Column<T>(_props: ColumnProps<T>): null;
+export declare namespace Column {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/Column.js

@@ -0,0 +1,10 @@
+"use client";
+import { Column as Column$1 } from "@koobiq/react-primitives";
+const ColumnInner = Column$1;
+function Column(_props) {
+  return null;
+}
+Column.getCollectionNode = ColumnInner.getCollectionNode;
+export {
+  Column
+};

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

@@ -0,0 +1,19 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type DividerProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    children?: ReactNode;
+    key?: string | number;
+};
+export declare function Divider(_props: DividerProps): null;
+export declare namespace Divider {
+    var getCollectionNode: (props: DividerProps) => Generator<{
+        type: string;
+        textValue: string;
+        props: DividerProps;
+    }, void, unknown>;
+}

package/dist/components/Collections/Divider.js

@@ -0,0 +1,14 @@
+"use client";
+function Divider(_props) {
+  return null;
+}
+Divider.getCollectionNode = function* getCollectionNode(props) {
+  yield {
+    type: "divider",
+    textValue: "divider",
+    props
+  };
+};
+export {
+  Divider
+};

package/dist/components/Collections/Header.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type HeaderProps = {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    children?: ReactNode;
+    key?: string | number;
+};
+export declare function Header(_props: HeaderProps): null;
+export declare namespace Header {
+    var getCollectionNode: (props: HeaderProps) => Generator<{
+        type: string;
+        textValue: string;
+        rendered: ReactNode;
+        props: HeaderProps;
+    }, void, unknown>;
+}

package/dist/components/Collections/Header.js

@@ -0,0 +1,16 @@
+"use client";
+function Header(_props) {
+  return null;
+}
+Header.getCollectionNode = function* getCollectionNode(props) {
+  const rendered = props.children;
+  yield {
+    type: "header",
+    textValue: "header",
+    rendered,
+    props
+  };
+};
+export {
+  Header
+};

package/dist/components/Collections/Item.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+import type { ItemProps as AriaItemProps } from '@koobiq/react-core';
+export type ItemProps<T> = AriaItemProps<T> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+};
+export declare function Item<T>(_props: ItemProps<T>): null;
+export declare namespace Item {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/Item.js

@@ -0,0 +1,10 @@
+"use client";
+import { Item as Item$1 } from "@koobiq/react-primitives";
+const ItemInner = Item$1;
+function Item(_props) {
+  return null;
+}
+Item.getCollectionNode = ItemInner.getCollectionNode;
+export {
+  Item
+};

package/dist/components/Collections/Row.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+import type { RowProps as AriaRowProps } from '@koobiq/react-primitives';
+export type RowProps<T> = AriaRowProps<T> & {
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+};
+export declare function Row<T>(_props: RowProps<T>): null;
+export declare namespace Row {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/Row.js

@@ -0,0 +1,10 @@
+"use client";
+import { Row as Row$1 } from "@koobiq/react-primitives";
+const RowInner = Row$1;
+function Row(_props) {
+  return null;
+}
+Row.getCollectionNode = RowInner.getCollectionNode;
+export {
+  Row
+};

package/dist/components/{List/ListSection.d.ts → Collections/Section.d.ts}

@@ -1,16 +1,16 @@
 import type { ReactNode } from 'react';
-import type { SectionProps } from '@koobiq/react-primitives';
-export type ListSectionProps<T> = {
+import type { SectionProps as AriaSectionProps } from '@koobiq/react-core';
+export type SectionProps<T> = {
     /** Rendered contents of the section, e.g. a header. */
     title?: ReactNode;
     /** An accessibility label for the section. */
     'aria-label'?: string;
     /** Static child items or a function to render children. */
-    children: SectionProps<T>['children'];
+    children: AriaSectionProps<T>['children'];
     /** Item objects in the section. */
-    items?: SectionProps<T>['items'];
+    items?: AriaSectionProps<T>['items'];
 };
-export declare function ListSection<T>(props: ListSectionProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace ListSection {
+export declare function Section<T>(_props: SectionProps<T>): null;
+export declare namespace Section {
     var getCollectionNode: unknown;
 }

package/dist/components/Collections/Section.js

@@ -0,0 +1,10 @@
+"use client";
+import { Section as Section$1 } from "@koobiq/react-primitives";
+const SectionInner = Section$1;
+function Section(_props) {
+  return null;
+}
+Section.getCollectionNode = SectionInner.getCollectionNode;
+export {
+  Section
+};

package/dist/components/Collections/TableBody.d.ts

@@ -0,0 +1,6 @@
+import type { TableBodyProps as AriaTableBodyProps } from '@koobiq/react-primitives';
+export type TableBodyProps<T> = AriaTableBodyProps<T>;
+export declare function TableBody<T>(_props: TableBodyProps<T>): null;
+export declare namespace TableBody {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/TableBody.js

@@ -0,0 +1,10 @@
+"use client";
+import { TableBody as TableBody$1 } from "@koobiq/react-primitives";
+const TableBodyInner = TableBody$1;
+function TableBody(_props) {
+  return null;
+}
+TableBody.getCollectionNode = TableBodyInner.getCollectionNode;
+export {
+  TableBody
+};

package/dist/components/Collections/TableHeader.d.ts

@@ -0,0 +1,6 @@
+import type { TableHeaderProps as AriaTableHeaderProps } from '@koobiq/react-primitives';
+export type TableHeaderProps<T> = AriaTableHeaderProps<T>;
+export declare function TableHeader<T>(_props: TableHeaderProps<T>): null;
+export declare namespace TableHeader {
+    var getCollectionNode: unknown;
+}

package/dist/components/Collections/TableHeader.js

@@ -0,0 +1,10 @@
+"use client";
+import { TableHeader as TableHeader$1 } from "@koobiq/react-primitives";
+const TableHeaderInner = TableHeader$1;
+function TableHeader(_props) {
+  return null;
+}
+TableHeader.getCollectionNode = TableHeaderInner.getCollectionNode;
+export {
+  TableHeader
+};

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

@@ -0,0 +1,9 @@
+export * from './Section';
+export * from './Item';
+export * from './Divider';
+export * from './Header';
+export * from './Cell';
+export * from './Row';
+export * from './Column';
+export * from './TableBody';
+export * from './TableHeader';

package/dist/components/Container/Container.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { deprecate } from "@koobiq/logger";
 import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./Container.module.css.js";
 import { normalizeMargins, normalizeMaxInlineSize, normalizePosition } from "./utils.js";
@@ -11,26 +12,36 @@ const Container = polymorphicForwardRef(
       as: Tag = "div",
       margins: marginsProp = 0,
       position: positionProp = "center",
-      fixed = false,
+      fixed,
+      isFixed: isFixedProp,
       children,
       className,
       maxInlineSize: maxInlineSizeProp,
       style: styleProp,
       ...other
     } = props;
+    const isFixed = isFixedProp ?? fixed ?? false;
+    if (process.env.NODE_ENV !== "production" && "fixed" in props) {
+      deprecate(
+        'Container: the "fixed" prop is deprecated. Use "isFixed" prop to replace it.'
+      );
+    }
     const breakpoints = useMatchedBreakpoints();
     const maxInlineSize = getResponsiveValue(maxInlineSizeProp, breakpoints);
     const position = getResponsiveValue(positionProp, breakpoints);
     const margins = getResponsiveValue(marginsProp, breakpoints);
     const style = {
       ...styleProp,
-      "--container-max-inline-size": fixed ? void 0 : normalizeMaxInlineSize(maxInlineSize),
+      "--container-max-inline-size": isFixed ? void 0 : normalizeMaxInlineSize(maxInlineSize),
       "--container-position": normalizePosition(position),
       "--container-margins": normalizeMargins(margins)
     };
     return /* @__PURE__ */ jsx(
       Tag,
       {
+        "data-fixed": isFixed,
+        "data-margins": margins,
+        "data-position": position,
         className: clsx(s.base, className),
         style,
         ...other,

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

@@ -5,28 +5,38 @@ export type ContainerMarginsProp = (typeof containerMarginsProp)[number];
 export type ContainerMaxInlineSizeProp = CSSProperties['maxInlineSize'];
 export declare const containerPositionProp: readonly ["start", "center", "end"];
 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.
+     */
+    fixed?: boolean;
+};
 export type ContainerBaseProps = {
     /**
      * Container position.
-     * @default center
-     * */
+     * @default 'center'
+     */
     position?: ContainerPositionProp | ResponsiveValue<ContainerPositionProp>;
     /** Determine the max-inline-size of the container. */
     maxInlineSize?: ContainerMaxInlineSizeProp | ResponsiveValue<ContainerMaxInlineSizeProp>;
     /**
      * Margins are the space between content and the left and right edges of the screen.
      * @default 0
-     * */
+     */
     margins?: ContainerMarginsProp | ResponsiveValue<ContainerMarginsProp>;
     /**
      * If `true`, doesn't set the max-inline-size of the container.
      * @default false
-     * */
-    fixed?: boolean;
+     */
+    isFixed?: boolean;
     /** The content of the component. */
     children?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
     /** Inline styles. */
     style?: CSSProperties;
-};
+} & ContainerDeprecatedProps;
+export {};

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, DateInputComponent } 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: DateInputComponent;

package/dist/components/DateInput/DateInput.js

@@ -0,0 +1,105 @@
+"use client";
+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 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,
+      isDisabled,
+      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
+};