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

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 { DateSegment } from "../DateSegment/DateSegment.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(DateSegment, { 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/index.d.ts

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

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

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

package/dist/components/DateInput/types.js

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

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

@@ -0,0 +1,5 @@
+import type { Ref } from 'react';
+import { type DateValue } from '@koobiq/react-primitives';
+import type { DatePickerComponent, DatePickerProps, DatePickerRef } from './types';
+export declare function DatePickerRender<T extends DateValue>(props: DatePickerProps<T>, ref: Ref<DatePickerRef>): import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: DatePickerComponent;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { mergeProps } from "@koobiq/react-core";
+import { IconCalendarO16 } from "@koobiq/react-icons";
+import { useDatePickerState, removeDataAttributes, useDatePicker } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
+import s from "./DatePicker.module.css.js";
+import { DateInput } from "../DateInput/DateInput.js";
+import { Calendar } from "../Calendar/Calendar.js";
+import { IconButton } from "../IconButton/IconButton.js";
+function DatePickerRender(props, ref) {
+  const anchorRef = useRef(null);
+  const {
+    label,
+    style,
+    caption,
+    className,
+    slotProps,
+    fullWidth,
+    errorMessage,
+    startAddon,
+    endAddon,
+    "data-testid": testId
+  } = props;
+  const state = useDatePickerState(
+    removeDataAttributes({ ...props, description: caption })
+  );
+  const {
+    isInvalid,
+    groupProps,
+    labelProps,
+    fieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps: calendarPropsAria
+  } = useDatePicker(
+    removeDataAttributes({ ...props, description: caption }),
+    state,
+    anchorRef
+  );
+  const rootProps = mergeProps(
+    {
+      ref,
+      style,
+      label,
+      caption,
+      fullWidth,
+      className,
+      startAddon,
+      errorMessage,
+      "data-testid": testId,
+      slotProps: {
+        label: labelProps,
+        group: {
+          endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+            endAddon,
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: isInvalid ? "error" : "fade-contrast",
+                className: s.calendar,
+                ...buttonProps,
+                children: /* @__PURE__ */ jsx(IconCalendarO16, {})
+              }
+            )
+          ] }),
+          ...groupProps,
+          ref: anchorRef
+        }
+      }
+    },
+    slotProps?.root,
+    fieldProps
+  );
+  const popoverProps = mergeProps(
+    {
+      state,
+      anchorRef,
+      offset: 4,
+      size: "auto",
+      hideArrow: true,
+      hideCloseButton: true,
+      placement: "bottom start",
+      slotProps: {
+        dialog: dialogProps
+      }
+    },
+    slotProps?.popover
+  );
+  const calendarProps = mergeProps(calendarPropsAria, slotProps?.calendar);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DateInput, { ...rootProps }),
+    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(Calendar, { firstDayOfWeek: props.firstDayOfWeek, ...calendarProps }) })
+  ] });
+}
+const DatePicker = forwardRef(DatePickerRender);
+export {
+  DatePicker,
+  DatePickerRender
+};

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

@@ -0,0 +1,8 @@
+const calendar = "kbq-datepicker-calendar-25a0d7";
+const s = {
+  calendar
+};
+export {
+  calendar,
+  s as default
+};

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

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