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

package/dist/components/ButtonToggleGroup/ButtonToggleGroup.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useReducer, useEffect } from "react";
+import { once } from "@koobiq/logger";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useToggleGroupState, useToggleButtonGroup } from "@koobiq/react-primitives";
+import { Transition } from "react-transition-group";
+import s from "./ButtonToggleGroup.module.css.js";
+import { ButtonToggleGroupContext } from "./ButtonToggleGroupContext.js";
+import { animationReducer, initialAnimationState } from "./reducer.js";
+import { getSelectedToggleButton, getToggleButtonStyle } from "./utils.js";
+const MAX_ITEMS = 5;
+const ButtonToggleGroup = forwardRef((props, ref) => {
+  const {
+    fullWidth = false,
+    isDisabled = false,
+    hasEqualItemSize = false,
+    style,
+    className,
+    slotProps,
+    defaultSelectedKey,
+    children,
+    selectedKey: selectedKeyProp,
+    onSelectionChange: onSelectionChangeProp,
+    ...other
+  } = props;
+  if (process.env.NODE_ENV !== "production" && children?.length && children?.length > MAX_ITEMS) {
+    once.warn(
+      `Use a ButtonToggleGroup to allow selection of up to ${MAX_ITEMS} options.`
+    );
+  }
+  const domRef = useDOMRef(ref);
+  const thumbRef = useRef(null);
+  const state = useToggleGroupState({
+    ...other,
+    isDisabled,
+    disallowEmptySelection: true,
+    onSelectionChange: (keys) => {
+      onSelectionChangeProp?.(Array.from(keys)[0]);
+    },
+    defaultSelectedKeys: defaultSelectedKey ? [defaultSelectedKey] : [],
+    ...!defaultSelectedKey && {
+      selectedKeys: selectedKeyProp ? [selectedKeyProp] : []
+    }
+  });
+  const { groupProps: groupPropsAria } = useToggleButtonGroup(
+    {},
+    state,
+    domRef
+  );
+  const previous = useRef(null);
+  const selectedKey = Array.from(state.selectedKeys)[0];
+  const [animatedState, dispatch] = useReducer(
+    animationReducer,
+    initialAnimationState
+  );
+  const { isAnimated, start, end, savedKey } = animatedState;
+  useEffect(() => {
+    const active = getSelectedToggleButton(domRef.current);
+    if (active && previous.current) {
+      dispatch({
+        type: "SET_ANIMATED",
+        payload: {
+          start: [previous.current.offsetLeft, previous.current.offsetWidth],
+          end: [active.offsetLeft, active.offsetWidth]
+        }
+      });
+    } else {
+      dispatch({ type: "SET_SAVED", payload: { savedKey: selectedKey } });
+    }
+    previous.current = active;
+  }, [selectedKey]);
+  useEffect(() => {
+    if (!selectedKey) dispatch({ type: "RESET" });
+  }, [selectedKey]);
+  const groupProps = mergeProps(
+    {
+      className: clsx(
+        s.base,
+        fullWidth && s.fullWidth,
+        hasEqualItemSize && s.hasEqualItemSize,
+        className
+      ),
+      "data-fullwidth": fullWidth,
+      "data-animated": isAnimated,
+      "data-equal-item-size": hasEqualItemSize,
+      ref: domRef,
+      style
+    },
+    other,
+    groupPropsAria
+  );
+  const thumbProps = mergeProps(
+    {
+      ref: thumbRef,
+      className: clsx(s.thumb),
+      style: getToggleButtonStyle(start, end)
+    },
+    slotProps?.thumb
+  );
+  const containerProps = mergeProps(
+    {
+      className: clsx(s.container)
+    },
+    slotProps?.container
+  );
+  return /* @__PURE__ */ jsx(ButtonToggleGroupContext.Provider, { value: { state, savedKey }, children: /* @__PURE__ */ jsxs("div", { ...groupProps, children: [
+    /* @__PURE__ */ jsx(
+      Transition,
+      {
+        in: isAnimated,
+        timeout: 200,
+        nodeRef: thumbRef,
+        exit: false,
+        onEntered: () => {
+          dispatch({ type: "SET_SAVED", payload: { savedKey: selectedKey } });
+        },
+        mountOnEnter: true,
+        unmountOnExit: true,
+        enter: true,
+        children: (transitionState) => /* @__PURE__ */ jsx("div", { ...thumbProps, "data-transition": transitionState })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { ...containerProps, children })
+  ] }) });
+});
+ButtonToggleGroup.displayName = "ButtonToggleGroup";
+export {
+  ButtonToggleGroup
+};

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

@@ -0,0 +1,17 @@
+const base = "kbq-buttontogglegroup-79a88d";
+const fullWidth = "kbq-buttontogglegroup-fullWidth-f63c5c";
+const thumb = "kbq-buttontogglegroup-thumb-7ff4ae";
+const container = "kbq-buttontogglegroup-container-e48aaf";
+const s = {
+  base,
+  fullWidth,
+  thumb,
+  container
+};
+export {
+  base,
+  container,
+  s as default,
+  fullWidth,
+  thumb
+};

package/dist/components/ButtonToggleGroup/ButtonToggleGroupContext.d.ts

@@ -0,0 +1,7 @@
+import type { ToggleGroupState } from '@koobiq/react-primitives';
+export type ButtonToggleGroupContextProps = {
+    state: ToggleGroupState | null;
+    savedKey?: string | number;
+};
+export declare const ButtonToggleGroupContext: import("react").Context<ButtonToggleGroupContextProps>;
+export declare function useButtonToggleGroupContext(): ButtonToggleGroupContextProps;

package/dist/components/ButtonToggleGroup/ButtonToggleGroupContext.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext, useContext } from "react";
+const ButtonToggleGroupContext = createContext({
+  state: null
+});
+function useButtonToggleGroupContext() {
+  return useContext(ButtonToggleGroupContext);
+}
+export {
+  ButtonToggleGroupContext,
+  useButtonToggleGroupContext
+};

package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonToggleProps } from './types';
+export declare const ButtonToggle: import("react").ForwardRefExoticComponent<Omit<ButtonToggleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { useDOMRef, useElementSize, useHover, useFocusRing, mergeProps, useMultiRef, clsx, isNotNil } from "@koobiq/react-core";
+import { useToggleButtonGroupItem } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { useButtonToggleGroupContext } from "../../ButtonToggleGroupContext.js";
+import s from "./ButtonToggle.module.css.js";
+import { Tooltip } from "../../../Tooltip/Tooltip.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+const ButtonToggle = forwardRef(
+  (props, ref) => {
+    const {
+      isDisabled: isDisabledProp = false,
+      children,
+      id,
+      icon,
+      className,
+      slotProps,
+      ...other
+    } = props;
+    const domRef = useDOMRef(ref);
+    const contentRef = useRef(null);
+    const { state, savedKey } = useButtonToggleGroupContext();
+    const { ref: containerRef } = useElementSize();
+    const showTooltip = (contentRef.current?.scrollWidth || 0) > (contentRef.current?.clientWidth || 0);
+    const { buttonProps, isPressed, isSelected, isDisabled } = useToggleButtonGroupItem(
+      { id, isDisabled: isDisabledProp },
+      state,
+      domRef
+    );
+    const { hoverProps, isHovered } = useHover({ ...props, isDisabled });
+    const { focusProps, isFocusVisible } = useFocusRing({});
+    const iconProps = mergeProps({ className: s.icon }, slotProps?.icon);
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        delay: 300,
+        anchorRef: domRef,
+        isDisabled: !showTooltip,
+        ...slotProps?.tooltip,
+        control: ({ ref: controlRef, ...controlProps }) => {
+          const rootRef = useMultiRef([domRef, controlRef]);
+          const rootProps = mergeProps(
+            {
+              className: clsx(
+                s.base,
+                textNormalMedium,
+                isHovered && s.hovered,
+                isPressed && s.pressed,
+                savedKey === id && s.selected,
+                isDisabled && s.disabled,
+                isFocusVisible && s.focusVisible,
+                className
+              ),
+              "data-hovered": isHovered,
+              "data-pressed": isPressed,
+              "data-selected": isSelected,
+              "data-disabled": isDisabled,
+              "data-focus-visible": isFocusVisible,
+              ref: rootRef
+            },
+            controlProps,
+            focusProps,
+            hoverProps,
+            buttonProps,
+            other
+          );
+          const containerProps = mergeProps(
+            { className: s.container, ref: containerRef },
+            slotProps?.container
+          );
+          const contentProps = mergeProps(
+            { className: s.content, ref: contentRef },
+            slotProps?.content
+          );
+          return /* @__PURE__ */ jsx("button", { ...rootProps, children: /* @__PURE__ */ jsxs("span", { ...containerProps, children: [
+            isNotNil(icon) && /* @__PURE__ */ jsx("span", { ...iconProps, children: icon }),
+            isNotNil(children) && /* @__PURE__ */ jsx("span", { ...contentProps, children })
+          ] }) });
+        },
+        children
+      }
+    );
+  }
+);
+ButtonToggle.displayName = "ButtonToggle";
+export {
+  ButtonToggle
+};

package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.module.css.js

@@ -0,0 +1,32 @@
+const base = "kbq-buttontoggle-caa007";
+const hovered = "kbq-buttontoggle-hovered-4706db";
+const pressed = "kbq-buttontoggle-pressed-6d5049";
+const selected = "kbq-buttontoggle-selected-3e6996";
+const disabled = "kbq-buttontoggle-disabled-c0d011";
+const focusVisible = "kbq-buttontoggle-focusVisible-37d5be";
+const container = "kbq-buttontoggle-container-f496bf";
+const icon = "kbq-buttontoggle-icon-668db0";
+const content = "kbq-buttontoggle-content-822c7d";
+const s = {
+  base,
+  hovered,
+  pressed,
+  selected,
+  disabled,
+  focusVisible,
+  container,
+  icon,
+  content
+};
+export {
+  base,
+  container,
+  content,
+  s as default,
+  disabled,
+  focusVisible,
+  hovered,
+  icon,
+  pressed,
+  selected
+};

package/dist/components/ButtonToggleGroup/components/ButtonToggle/index.d.ts

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

package/dist/components/ButtonToggleGroup/components/ButtonToggle/types.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithRef, ComponentRef, ReactNode } from 'react';
+import type { DataAttributeProps, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TooltipProps } from '../../../Tooltip';
+export type ButtonToggleKey = string | number;
+export type ButtonToggleProps = ExtendableComponentPropsWithRef<{
+    /** An identifier for the item in the selectedKey of a ButtonToggleGroup. */
+    id: ButtonToggleKey;
+    /** Icon placed before the children. */
+    icon?: ReactNode;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        tooltip?: TooltipProps;
+        icon?: ComponentPropsWithRef<'span'> & DataAttributeProps;
+        content?: ComponentPropsWithRef<'span'> & DataAttributeProps;
+        container?: ComponentPropsWithRef<'span'> & DataAttributeProps;
+    };
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+}, 'div'>;
+export type ButtonToggleRef = ComponentRef<'button'>;

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

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

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

@@ -0,0 +1,3 @@
+export * from './ButtonToggleGroup';
+export * from './components';
+export * from './types';

package/dist/components/ButtonToggleGroup/reducer.d.ts

@@ -0,0 +1,23 @@
+export type AnimationStateType = {
+    isAnimated?: boolean;
+    start?: [number, number];
+    end?: [number, number];
+    savedKey?: string | number;
+};
+type AnimationAction = {
+    type: 'SET_ANIMATED';
+    payload: {
+        start: [number, number];
+        end: [number, number];
+    };
+} | {
+    type: 'SET_SAVED';
+    payload: {
+        savedKey?: string | number;
+    };
+} | {
+    type: 'RESET';
+};
+export declare const initialAnimationState: AnimationStateType;
+export declare function animationReducer(state: AnimationStateType, action: AnimationAction): AnimationStateType;
+export {};

package/dist/components/ButtonToggleGroup/reducer.js

@@ -0,0 +1,25 @@
+"use client";
+const initialAnimationState = {};
+function animationReducer(state, action) {
+  switch (action.type) {
+    case "SET_ANIMATED":
+      return {
+        isAnimated: true,
+        start: action.payload.start,
+        end: action.payload.end
+      };
+    case "SET_SAVED":
+      return {
+        isAnimated: false,
+        savedKey: action.payload.savedKey
+      };
+    case "RESET":
+      return {};
+    default:
+      return state;
+  }
+}
+export {
+  animationReducer,
+  initialAnimationState
+};

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

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithRef, ComponentRef, ReactElement } from 'react';
+import type { DataAttributeProps, ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { ButtonToggleProps } from './components';
+export type ButtonToggleGroupKey = string | number;
+export type ButtonToggleGroupBaseProps = {
+    /**
+     * Whether all items are disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * If `true`, the button will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** The contents of the collection. */
+    children?: Array<ReactElement<ButtonToggleProps>>;
+    /**
+     * If `true`, each item's width will be equal.
+     * @default false
+     */
+    hasEqualItemSize?: boolean;
+    /** The currently selected key in the collection (controlled). */
+    selectedKey?: ButtonToggleGroupKey;
+    /** The initial selected key in the collection (uncontrolled). */
+    defaultSelectedKey?: ButtonToggleGroupKey;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (key: ButtonToggleGroupKey) => void;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        thumb?: ComponentPropsWithRef<'div'> & DataAttributeProps;
+        container?: ComponentPropsWithRef<'div'> & DataAttributeProps;
+    };
+};
+export type ButtonToggleGroupProps = ExtendableComponentPropsWithRef<ButtonToggleGroupBaseProps, 'div'>;
+export type ButtonToggleGroupRef = ComponentRef<'div'>;

package/dist/components/ButtonToggleGroup/utils.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from 'react';
+export declare function getToggleButtonStyle(start?: [number, number], end?: [number, number]): CSSProperties;
+export declare function getSelectedToggleButton(root: HTMLElement | null): HTMLElement | null;

package/dist/components/ButtonToggleGroup/utils.js

@@ -0,0 +1,19 @@
+function getToggleButtonStyle(start = [0, 0], end = [0, 0]) {
+  const [startX, startSize] = start;
+  const [endX, endSize] = end;
+  return {
+    "--thumb-inline-size-start": `${startSize}px`,
+    "--thumb-inline-size-end": `${endSize}px`,
+    "--thumb-transform-start": `translateX(${startX}px)`,
+    "--thumb-transform-end": `translateX(${endX}px)`
+  };
+}
+function getSelectedToggleButton(root) {
+  return root ? root.querySelector(
+    '[role="radio"][data-selected="true"] > span'
+  ) : null;
+}
+export {
+  getSelectedToggleButton,
+  getToggleButtonStyle
+};

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

@@ -0,0 +1,2 @@
+import type { CalendarComponent } from './types';
+export declare const Calendar: CalendarComponent;

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useLocale, createCalendar, mergeProps, clsx } from "@koobiq/react-core";
+import { useCalendarState, useCalendar } from "@koobiq/react-primitives";
+import { utilClasses } from "../../styles/utility.js";
+import s from "./Calendar.module.css.js";
+import { CalendarHeader } from "./components/CalendarHeader/CalendarHeader.js";
+import { CalendarGrid } from "./components/CalendarGrid/CalendarGrid.js";
+const textNormal = utilClasses.typography["text-normal"];
+function CalendarRender(props, ref) {
+  const { style, className } = props;
+  const { locale } = useLocale();
+  const state = useCalendarState({
+    createCalendar,
+    ...props,
+    locale
+  });
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
+    props,
+    state
+  );
+  const rootProps = mergeProps(
+    { className: clsx(s.base, textNormal, className), style, ref },
+    calendarProps
+  );
+  return /* @__PURE__ */ jsxs("div", { ...rootProps, children: [
+    /* @__PURE__ */ jsx(
+      CalendarHeader,
+      {
+        state,
+        prevButtonProps,
+        nextButtonProps
+      }
+    ),
+    /* @__PURE__ */ jsx(CalendarGrid, { state })
+  ] });
+}
+const Calendar = forwardRef(CalendarRender);
+export {
+  Calendar
+};

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

@@ -0,0 +1,14 @@
+const base = "kbq-calendar-fa3168";
+const open = "kbq-calendar-open-e506bb";
+const popover = "kbq-calendar-popover-a1d3d6";
+const s = {
+  base,
+  open,
+  popover
+};
+export {
+  base,
+  s as default,
+  open,
+  popover
+};

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

@@ -0,0 +1,7 @@
+import type { CalendarState, AriaCalendarCellProps } from '@koobiq/react-primitives';
+type CalendarCellProps = {
+    state: CalendarState;
+    date: AriaCalendarCellProps['date'];
+};
+export declare function CalendarCell({ state, date }: CalendarCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarCell/CalendarCell.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { today, useHover, useFocusRing, clsx, mergeProps } from "@koobiq/react-core";
+import { useCalendarCell } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "./CalendarCell.module.css.js";
+const textNormalMedium = utilClasses.typography["text-normal-medium"];
+function CalendarCell({ state, date }) {
+  const ref = useRef(null);
+  const isToday = date.compare(today(state.timeZone)) === 0;
+  const {
+    cellProps,
+    isSelected,
+    isDisabled,
+    isInvalid,
+    isPressed,
+    buttonProps,
+    isUnavailable,
+    formattedDate,
+    isOutsideVisibleRange
+  } = useCalendarCell({ date }, state, ref);
+  const { hoverProps, isHovered } = useHover({
+    isDisabled: isDisabled || isUnavailable
+  });
+  const { focusProps, isFocusVisible } = useFocusRing({});
+  return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...mergeProps(hoverProps, focusProps, buttonProps),
+      ref,
+      className: clsx(
+        s.base,
+        isToday && s.today,
+        isPressed && s.pressed,
+        isHovered && s.hovered,
+        isDisabled && s.disabled,
+        isSelected && s.selected,
+        isInvalid && s.invalid,
+        isUnavailable && s.unavailable,
+        isSelected && textNormalMedium,
+        isFocusVisible && s.focusVisible
+      ),
+      hidden: isOutsideVisibleRange,
+      children: formattedDate
+    }
+  ) });
+}
+export {
+  CalendarCell
+};

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

@@ -0,0 +1,32 @@
+const base = "kbq-calendarcell-dc4d6e";
+const today = "kbq-calendarcell-today-04de99";
+const hovered = "kbq-calendarcell-hovered-c94a4e";
+const pressed = "kbq-calendarcell-pressed-a65ee0";
+const focusVisible = "kbq-calendarcell-focusVisible-d92d99";
+const selected = "kbq-calendarcell-selected-62a719";
+const disabled = "kbq-calendarcell-disabled-a2a975";
+const unavailable = "kbq-calendarcell-unavailable-a606f4";
+const invalid = "kbq-calendarcell-invalid-02611e";
+const s = {
+  base,
+  today,
+  hovered,
+  pressed,
+  focusVisible,
+  selected,
+  disabled,
+  unavailable,
+  invalid
+};
+export {
+  base,
+  s as default,
+  disabled,
+  focusVisible,
+  hovered,
+  invalid,
+  pressed,
+  selected,
+  today,
+  unavailable
+};

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

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

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

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

package/dist/components/Calendar/components/CalendarGrid/CalendarGrid.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useLocale, getWeeksInMonth, clsx } from "@koobiq/react-core";
+import { useCalendarGrid } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "./CalendarGrid.module.css.js";
+import { CalendarCell } from "../CalendarCell/CalendarCell.js";
+const textNormal = utilClasses.typography["text-normal"];
+function CalendarGrid({ state, ...props }) {
+  const { locale } = useLocale();
+  const { gridProps, headerProps, weekDays } = useCalendarGrid(
+    { ...props, weekdayStyle: "short" },
+    state
+  );
+  const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
+  return /* @__PURE__ */ jsxs("table", { ...gridProps, className: clsx(s.base, textNormal), children: [
+    /* @__PURE__ */ jsxs("thead", { ...headerProps, children: [
+      /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, i) => /* @__PURE__ */ jsx("th", { className: clsx(s.weekDay, textNormal), children: day }, i)) }),
+      /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", { colSpan: 7, className: s.divider }) })
+    ] }),
+    /* @__PURE__ */ jsx("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex).map(
+      (date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, { state, date }, i) : /* @__PURE__ */ jsx("td", {}, i)
+    ) }, weekIndex)) })
+  ] });
+}
+export {
+  CalendarGrid
+};

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

@@ -0,0 +1,14 @@
+const base = "kbq-calendargrid-1a43cf";
+const weekDay = "kbq-calendargrid-weekDay-94b083";
+const divider = "kbq-calendargrid-divider-3ec061";
+const s = {
+  base,
+  weekDay,
+  divider
+};
+export {
+  base,
+  s as default,
+  divider,
+  weekDay
+};

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

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