@koobiq/react-components 0.0.1-beta.3 → 0.0.1-beta.31

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

@@ -1,27 +1,119 @@
-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
-     * */
+     */
     size?: CheckboxPropSize;
-    /** Unique identifier for testing purposes. */
-    'data-testid'?: string | number;
     /**
      * The position of the label.
      * @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-primitives';
+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-primitives';
+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,4 +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";
@@ -10,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,39 @@ 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
-     * */
+     */
     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/Container/utils.d.ts

@@ -1,4 +1,4 @@
 import type { ContainerMarginsProp, ContainerMaxInlineSizeProp, ContainerPositionProp } from './types';
 export declare const normalizeMargins: (value: ContainerMarginsProp | undefined) => string | 0 | undefined;
 export declare const normalizeMaxInlineSize: (value: ContainerMaxInlineSizeProp | undefined) => string | undefined;
-export declare const normalizePosition: (value: ContainerPositionProp | undefined) => "0 auto" | "auto 0" | "auto";
+export declare const normalizePosition: (value: ContainerPositionProp | undefined) => "auto" | "0 auto" | "auto 0";

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

@@ -1,2 +1,10 @@
+import { DialogBody, DialogFooter, DialogHeader } from './components';
 import type { DialogProps } from './types';
-export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare const DialogComponent: import("react").ForwardRefExoticComponent<Omit<DialogProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type CompoundedComponent = typeof DialogComponent & {
+    Header: typeof DialogHeader;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+};
+export declare const Dialog: CompoundedComponent;
+export {};

package/dist/components/Dialog/Dialog.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect } from "react";
-import { useBoolean, useDOMRef, mergeProps, clsx, useElementSize, useEventListener, useMultiRef } from "@koobiq/react-core";
-import { useDialog } from "@koobiq/react-primitives";
+import { forwardRef, useEffect } from "react";
+import { useBoolean, useDOMRef, mergeProps, clsx, useElementSize, useEventListener } from "@koobiq/react-core";
+import { useDialog, Provider, ButtonContext } from "@koobiq/react-primitives";
 import { utilClasses } from "../../styles/utility.js";
 import s from "./Dialog.module.css.js";
-import { DialogContext } from "./DialogContext.js";
+import { DialogBodyContext, DialogBody } from "./components/DialogBody.js";
 import { DialogCloseButton } from "./components/DialogCloseButton.js";
-const Dialog = forwardRef(
+import { DialogHeader } from "./components/DialoglHeader.js";
+import { DialogFooter } from "./components/DialogFooter.js";
+const DialogComponent = forwardRef(
   ({ onClose, children, slotProps, hideCloseButton, ...other }, ref) => {
     const [topOverflow, { set: setTopOverflow }] = useBoolean();
     const [bottomOverflow, { set: setBottomOverflow }] = useBoolean();
-    const contentRef = useRef(null);
     const domRef = useDOMRef(ref);
     const { dialogProps } = useDialog(other, domRef);
     const showCloseButton = !hideCloseButton;
@@ -35,24 +36,33 @@ const Dialog = forwardRef(
         element.scrollTop + element.clientHeight < element.scrollHeight
       );
     };
-    const { ref: innerRef, height } = useElementSize();
+    const { ref: bodyRef, height } = useElementSize();
     useEffect(() => {
-      if (contentRef.current) updateOverflow(contentRef.current);
-    }, [contentRef.current, height]);
+      if (bodyRef.current) updateOverflow(bodyRef.current);
+    }, [bodyRef.current, height]);
     useEventListener({
-      element: contentRef,
+      element: bodyRef,
       eventName: "scroll",
       handler: () => {
-        updateOverflow(contentRef.current);
+        updateOverflow(bodyRef.current);
       }
     });
     return /* @__PURE__ */ jsx(
-      DialogContext.Provider,
+      Provider,
       {
-        value: {
-          close: onClose,
-          slots: { content: { ref: useMultiRef([contentRef, innerRef]) } }
-        },
+        values: [
+          [DialogBodyContext, { ref: bodyRef }],
+          [
+            ButtonContext,
+            {
+              slots: {
+                close: {
+                  onPress: onClose
+                }
+              }
+            }
+          ]
+        ],
         children: /* @__PURE__ */ jsxs("section", { ...rootProps, ref: domRef, children: [
           showCloseButton && /* @__PURE__ */ jsx(DialogCloseButton, { ...slotProps?.["close-button"] }),
           /* @__PURE__ */ jsx("div", { ...containerProps, children })
@@ -61,7 +71,11 @@ const Dialog = forwardRef(
     );
   }
 );
-Dialog.displayName = "Dialog";
+DialogComponent.displayName = "Dialog";
+const Dialog = DialogComponent;
+Dialog.Header = DialogHeader;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
 export {
   Dialog
 };

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

@@ -0,0 +1,13 @@
+import type { ReactNode, ComponentRef } from 'react';
+import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+export type DialogBodyRef = ComponentRef<'div'>;
+export type DialogBodyProps = ExtendableComponentPropsWithRef<{
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string;
+}, 'div'>;
+export declare const DialogBodyContext: import("react").Context<DialogBodyProps>;
+export declare const DialogBody: import("react").ForwardRefExoticComponent<Omit<DialogBodyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;