@koobiq/react-components 0.0.1-beta.9 → 0.1.0

package/dist/components/Calendar/components/CalendarHeader/CalendarHeader.d.ts

@@ -0,0 +1,8 @@
+import type { CalendarState, CalendarAria } from '@koobiq/react-primitives';
+type CalendarHeaderProps = {
+    prevButtonProps: CalendarAria['prevButtonProps'];
+    nextButtonProps: CalendarAria['nextButtonProps'];
+    state: CalendarState;
+};
+export declare const CalendarHeader: (props: CalendarHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarHeader/CalendarHeader.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useLocalizedStringFormatter, today } from "@koobiq/react-core";
+import { IconChevronLeft16, IconCircleXs16, IconChevronRight16 } from "@koobiq/react-icons";
+import intlMessages from "../../intl.json.js";
+import s from "./CalendarHeader.module.css.js";
+import { CalendarMonthDropdown } from "../CalendarMonthDropdown/CalendarMonthDropdown.js";
+import { CalendarYearDropdown } from "../CalendarYearDropdown/CalendarYearDropdown.js";
+import { Button } from "../../../Button/Button.js";
+const CalendarHeader = (props) => {
+  const { prevButtonProps, nextButtonProps, state } = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  return /* @__PURE__ */ jsxs("div", { className: s.base, children: [
+    /* @__PURE__ */ jsx(CalendarMonthDropdown, { state }),
+    /* @__PURE__ */ jsx(CalendarYearDropdown, { state }),
+    /* @__PURE__ */ jsxs("div", { className: s.actions, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...prevButtonProps,
+          variant: "contrast-transparent",
+          startIcon: /* @__PURE__ */ jsx(IconChevronLeft16, {}),
+          onlyIcon: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": stringFormatter.format("today"),
+          onPress: () => {
+            const date = today(state.timeZone);
+            state.setFocusedDate(date);
+          },
+          isDisabled: state.isDisabled,
+          variant: "contrast-transparent",
+          startIcon: /* @__PURE__ */ jsx(IconCircleXs16, {}),
+          onlyIcon: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...nextButtonProps,
+          variant: "contrast-transparent",
+          startIcon: /* @__PURE__ */ jsx(IconChevronRight16, {}),
+          onlyIcon: true
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  CalendarHeader
+};

package/dist/components/Calendar/components/CalendarHeader/CalendarHeader.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-calendarheader-562d41";
+const actions = "kbq-calendarheader-actions-4e94a2";
+const s = {
+  base,
+  actions
+};
+export {
+  actions,
+  base,
+  s as default
+};

package/dist/components/Calendar/components/CalendarHeader/index.d.ts

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

package/dist/components/Calendar/components/CalendarMonthDropdown/CalendarMonthDropdown.d.ts

@@ -0,0 +1,6 @@
+import { type CalendarState } from '@koobiq/react-primitives';
+type CalendarMonthDropdownProps = {
+    state: CalendarState;
+};
+export declare function CalendarMonthDropdown({ state }: CalendarMonthDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarMonthDropdown/CalendarMonthDropdown.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useBoolean, useDateFormatter, clsx } from "@koobiq/react-core";
+import { IconChevronDown16 } from "@koobiq/react-icons";
+import "@koobiq/react-primitives";
+import s from "../../Calendar.module.css.js";
+import { Menu } from "../../../Menu/Menu.js";
+import { capitalizeFirstLetter } from "../../../../utils/capitalizeFirstLetter/capitalizeFirstLetter.js";
+import { Button } from "../../../Button/Button.js";
+function CalendarMonthDropdown({ state }) {
+  const months = [];
+  const disabledKeys = /* @__PURE__ */ new Set();
+  const [isOpen, { on, off }] = useBoolean();
+  const longFormatter = useDateFormatter({
+    month: "long",
+    timeZone: state.timeZone
+  });
+  const shortFormatter = useDateFormatter({
+    month: "short",
+    timeZone: state.timeZone
+  });
+  const selectedMonthName = shortFormatter.format(
+    state.focusedDate.toDate(state.timeZone)
+  );
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (!menuRef.current || !state.focusedDate.month) return;
+    const container = menuRef.current;
+    const selectedEl = container.querySelector(
+      `[data-key="${state.focusedDate.month}"]`
+    );
+    if (selectedEl instanceof HTMLElement) {
+      const containerHeight = container.offsetHeight;
+      const elementTop = selectedEl.offsetTop;
+      const elementHeight = selectedEl.offsetHeight;
+      container.scrollTop = elementTop - containerHeight / 2 + elementHeight / 2;
+    }
+  }, [state.focusedDate.month, isOpen]);
+  const numMonths = state.focusedDate.calendar.getMonthsInYear(
+    state.focusedDate
+  );
+  const minDate = state.minValue;
+  const maxDate = state.maxValue;
+  for (let i = 1; i <= numMonths; i++) {
+    const date = state.focusedDate.set({ month: i });
+    const isBeforeMin = minDate && date.compare(minDate) < 0;
+    const isAfterMax = maxDate && date.compare(maxDate) > 0;
+    if (isBeforeMin || isAfterMax) {
+      disabledKeys.add(i);
+    }
+    months.push({
+      id: i,
+      name: longFormatter.format(date.toDate(state.timeZone))
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      control: (props) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...props,
+          className: clsx(isOpen && s.open),
+          variant: "contrast-transparent",
+          isDisabled: state.isDisabled,
+          endIcon: /* @__PURE__ */ jsx(IconChevronDown16, {}),
+          children: capitalizeFirstLetter(selectedMonthName).replace(/\.$/, "")
+        }
+      ),
+      className: s.popover,
+      slotProps: {
+        list: {
+          ref: menuRef
+        },
+        popover: {
+          maxBlockSize: 265,
+          slotProps: {
+            transition: {
+              onEnter: on,
+              onExited: off
+            }
+          }
+        }
+      },
+      items: months,
+      disabledKeys,
+      selectionMode: "single",
+      selectedKeys: /* @__PURE__ */ new Set([state.focusedDate.month]),
+      onSelectionChange: (keys) => {
+        const value = Array.from(keys)[0];
+        const date = state.focusedDate.set({ month: +value });
+        state.setFocusedDate(date);
+      },
+      children: (item) => /* @__PURE__ */ jsx(Menu.Item, { children: capitalizeFirstLetter(item.name) })
+    }
+  );
+}
+export {
+  CalendarMonthDropdown
+};

package/dist/components/Calendar/components/CalendarMonthDropdown/index.d.ts

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

package/dist/components/Calendar/components/CalendarYearDropdown/CalendarYearDropdown.d.ts

@@ -0,0 +1,6 @@
+import { type CalendarState } from '@koobiq/react-primitives';
+type CalendarYearDropdownProps = {
+    state: CalendarState;
+};
+export declare function CalendarYearDropdown({ state }: CalendarYearDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarYearDropdown/CalendarYearDropdown.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useBoolean, clsx } from "@koobiq/react-core";
+import { IconChevronDown16 } from "@koobiq/react-icons";
+import "@koobiq/react-primitives";
+import s from "../../Calendar.module.css.js";
+import { Menu } from "../../../Menu/Menu.js";
+import { Button } from "../../../Button/Button.js";
+function CalendarYearDropdown({ state }) {
+  const years = [];
+  const [isOpen, { on, off }] = useBoolean();
+  const menuRef = useRef(null);
+  const minYear = state.minValue?.year ?? state.focusedDate.year - 20;
+  const maxYear = state.maxValue?.year ?? state.focusedDate.year + 20;
+  for (let y = minYear; y <= maxYear; y++) {
+    years.push({ id: y });
+  }
+  useEffect(() => {
+    if (!menuRef.current || !state.focusedDate.year) return;
+    const container = menuRef.current;
+    const selectedEl = container.querySelector(
+      `[data-key="${state.focusedDate.year}"]`
+    );
+    if (selectedEl instanceof HTMLElement) {
+      const containerHeight = container.offsetHeight;
+      const elementTop = selectedEl.offsetTop;
+      const elementHeight = selectedEl.offsetHeight;
+      container.scrollTop = elementTop - containerHeight / 2 + elementHeight / 2;
+    }
+  }, [state.focusedDate.year, isOpen]);
+  const selectedYearName = years.find(({ id }) => id === state.focusedDate.year)?.id ?? "";
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      slotProps: {
+        list: {
+          ref: menuRef
+        },
+        popover: {
+          maxBlockSize: 265,
+          slotProps: {
+            transition: {
+              onEnter: on,
+              onExited: off
+            }
+          }
+        }
+      },
+      control: (props) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...props,
+          className: clsx(isOpen && s.open),
+          variant: "contrast-transparent",
+          endIcon: /* @__PURE__ */ jsx(IconChevronDown16, {}),
+          isDisabled: state.isDisabled,
+          children: selectedYearName
+        }
+      ),
+      className: s.popover,
+      items: years,
+      selectionMode: "single",
+      selectedKeys: /* @__PURE__ */ new Set([state.focusedDate.year]),
+      onSelectionChange: (keys) => {
+        const value = Array.from(keys)[0];
+        const date = state.focusedDate.set({ year: +value });
+        state.setFocusedDate(date);
+      },
+      children: (item) => /* @__PURE__ */ jsx(Menu.Item, { textValue: String(item.id), children: item.id })
+    }
+  );
+}
+export {
+  CalendarYearDropdown
+};

package/dist/components/Calendar/components/CalendarYearDropdown/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './CalendarGrid';
+export * from './CalendarHeader';

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

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

package/dist/components/Calendar/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "today": "Сегодня" },
+  "en-US": { "today": "Today" }
+};
+export {
+  intlMessages as default
+};

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

@@ -0,0 +1,13 @@
+import type { ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import type { AriaCalendarProps, DateValue } from '@koobiq/react-primitives';
+export type CalendarProps<T extends DateValue> = ExtendableProps<{
+    /** Ref to the root container. */
+    ref?: Ref<HTMLDivElement>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+}, Omit<AriaCalendarProps<T>, 'validationState' | 'errorMessage'>>;
+export type CalendarComponent = <T extends DateValue>(props: CalendarProps<T>) => ReactElement | null;
+export type CalendarRef = ComponentRef<'div'>;

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

@@ -1,19 +1,29 @@
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/checkbox").AriaCheckboxProps, "onChange" | "isDisabled" | "isRequired" | "isInvalid" | "isReadOnly" | "isSelected" | "isIndeterminate" | "defaultSelected">, "defaultChecked" | "onChange" | "disabled" | "checked" | "required" | "error" | "readonly" | "indeterminate"> & {
+import { type CheckboxProps as CheckboxPropsPrimitive } from '@koobiq/react-primitives';
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<CheckboxPropsPrimitive, "validationState" | "inputRef">, "children" | "style" | "className" | "size" | "slotProps" | "data-testid" | "labelPlacement" | keyof {
+    disabled?: boolean;
     error?: boolean;
     checked?: boolean;
     readonly?: boolean;
-    disabled?: boolean;
     required?: boolean;
     indeterminate?: boolean;
     defaultChecked?: boolean;
-    onChange?: (checked: boolean) => void;
-} & {
+}> & {
+    children?: import("react").ReactNode;
     className?: string;
+    style?: import("react").CSSProperties;
     size?: import("./types").CheckboxPropSize;
-    'data-testid'?: string | number;
     labelPlacement?: import("./types").CheckboxPropLabelPlacement;
     slotProps?: {
         box?: import("react").ComponentPropsWithRef<"span">;
         label?: import("react").ComponentPropsWithRef<"span">;
     };
+    'data-testid'?: string | number;
+} & {
+    disabled?: boolean;
+    error?: boolean;
+    checked?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    indeterminate?: boolean;
+    defaultChecked?: boolean;
 } & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { mergeProps, clsx, isNotNil } from "@koobiq/react-core";
 import { IconCheckS16, IconMinusS16 } from "@koobiq/react-icons";
 import { Checkbox as Checkbox$1 } from "@koobiq/react-primitives";
@@ -11,45 +12,108 @@ const Checkbox = forwardRef(
     const {
       size = "normal",
       labelPlacement = "end",
+      disabled,
+      isDisabled: isDisabledProp,
+      checked,
+      isSelected: isSelectedProp,
+      error,
+      isInvalid: isInvalidProp,
+      defaultChecked,
+      defaultSelected: defaultSelectedProp,
+      readonly,
+      isReadOnly: isReadOnlyProp,
+      required,
+      isRequired: isRequiredProp,
+      indeterminate,
+      isIndeterminate: isIndeterminateProp,
       children,
       className,
       slotProps,
-      indeterminate,
       ...other
     } = props;
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    const isInvalid = isInvalidProp ?? error ?? false;
+    const isSelected = isSelectedProp ?? checked;
+    const defaultSelected = defaultSelectedProp ?? defaultChecked;
+    const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+    const isRequired = isRequiredProp ?? required ?? false;
+    const isIndeterminate = isIndeterminateProp ?? indeterminate ?? false;
     const commonProps = {
-      indeterminate,
+      isIndeterminate,
+      isDisabled,
+      isSelected,
+      isInvalid,
+      isRequired,
+      isReadOnly,
+      defaultSelected,
       className: ({
-        error,
-        checked,
-        hovered,
-        disabled,
-        focusVisible,
-        indeterminate: indeterminate2
+        isInvalid: isInvalid2,
+        isSelected: isSelected2,
+        isHovered,
+        isDisabled: isDisabled2,
+        isFocusVisible,
+        isIndeterminate: isIndeterminate2
       }) => clsx(
         s.base,
         s[size],
-        error && s.error,
         s[labelPlacement],
-        checked && s.checked,
-        hovered && s.hovered,
-        disabled && s.disabled,
-        focusVisible && s.focusVisible,
-        indeterminate2 && s.indeterminate,
+        isInvalid2 && s.invalid,
+        isHovered && s.hovered,
+        isDisabled2 && s.disabled,
+        isSelected2 && s.selected,
+        isFocusVisible && s.focusVisible,
+        isIndeterminate2 && s.indeterminate,
         className
       ),
       ...other
     };
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+      deprecate(
+        'Checkbox: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "checked" in props) {
+      deprecate(
+        'Checkbox: the "checked" prop is deprecated. Use "isSelected" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "error" in props) {
+      deprecate(
+        'Checkbox: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "defaultChecked" in props) {
+      deprecate(
+        'Checkbox: the "defaultChecked" prop is deprecated. Use "defaultSelected" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "readonly" in props) {
+      deprecate(
+        'Checkbox: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "required" in props) {
+      deprecate(
+        'Checkbox: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "indeterminate" in props) {
+      deprecate(
+        'Checkbox: the "indeterminate" prop is deprecated. Use "isIndeterminate" prop to replace it.'
+      );
+    }
     const boxProps = mergeProps({ className: s.checkbox }, slotProps?.box);
     const labelProps = slotProps?.label;
     return /* @__PURE__ */ jsx(
       Checkbox$1,
       {
-        "data-indeterminate": indeterminate,
+        "data-size": size,
+        "data-indeterminate": isIndeterminate,
+        "data-label-placement": labelPlacement,
         ...commonProps,
         ref,
-        children: ({ checked, indeterminate: indeterminate2 }) => {
-          const activeIndex = indeterminate2 ? 1 : Number(Boolean(checked)) - 1;
+        children: ({ isSelected: isSelected2, isIndeterminate: isIndeterminate2 }) => {
+          const activeIndex = isIndeterminate2 ? 1 : Number(Boolean(isSelected2)) - 1;
           return /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { ...boxProps, children: /* @__PURE__ */ jsx(
               AnimatedIcon,

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

@@ -3,8 +3,8 @@ const checkbox = "kbq-checkbox-checkbox-dbb3d9";
 const normal = "kbq-checkbox-normal-646719";
 const big = "kbq-checkbox-big-d7d5f1";
 const hovered = "kbq-checkbox-hovered-a8a95e";
-const checked = "kbq-checkbox-checked-e66779";
-const error = "kbq-checkbox-error-3cdabd";
+const selected = "kbq-checkbox-selected-ba10f0";
+const invalid = "kbq-checkbox-invalid-253c35";
 const focusVisible = "kbq-checkbox-focusVisible-c41061";
 const indeterminate = "kbq-checkbox-indeterminate-efed4f";
 const disabled = "kbq-checkbox-disabled-e359aa";
@@ -16,8 +16,8 @@ const s = {
   normal,
   big,
   hovered,
-  checked,
-  error,
+  selected,
+  invalid,
   focusVisible,
   indeterminate,
   disabled,
@@ -28,14 +28,14 @@ export {
   base,
   big,
   checkbox,
-  checked,
   s as default,
   disabled,
   end,
-  error,
   focusVisible,
   hovered,
   indeterminate,
+  invalid,
   normal,
+  selected,
   start
 };

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

@@ -1,27 +1,83 @@
-import type { ComponentPropsWithRef } from 'react';
-import type { UseCheckboxProps } from '@koobiq/react-primitives';
+import type { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
+import type { ExtendableProps } from '@koobiq/react-core';
+import { type CheckboxProps as CheckboxPropsPrimitive } from '@koobiq/react-primitives';
 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 = ExtendableProps<{
+    /** 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;
     /** The props used for each slot inside. */
     slotProps?: {
         box?: ComponentPropsWithRef<'span'>;
         label?: ComponentPropsWithRef<'span'>;
     };
-};
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+} & CheckboxDeprecatedProps, Omit<CheckboxPropsPrimitive, 'inputRef' | 'validationState'>>;
+export {};

package/dist/components/Checkbox/types.js

@@ -1,3 +1,4 @@
+import "@koobiq/react-primitives";
 const checkboxPropSize = ["normal", "big"];
 const checkboxPropLabelPlacement = ["start", "end"];
 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
+};