@koobiq/react-components 0.21.1 → 0.23.0

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,9 @@
+import { AccordionDetails, AccordionSummary } from './components';
+import type { AccordionProps } from './types';
+export declare const AccordionComponent: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type CompoundedComponent = typeof AccordionComponent & {
+    Summary: typeof AccordionSummary;
+    Details: typeof AccordionDetails;
+};
+export declare const Accordion: CompoundedComponent;
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useContext, useRef } from "react";
+import { useId, clsx } from "@koobiq/react-core";
+import { useDisclosureState, useDisclosure, Provider } from "@koobiq/react-primitives";
+import { utilClasses } from "../../styles/utility.js";
+import s from "./Accordion.module.css.js";
+import { AccordionSummary } from "./components/AccordionSummary/AccordionSummary.js";
+import { AccordionDetails } from "./components/AccordionDetails/AccordionDetails.js";
+import { AccordionGroupStateContext } from "./components/AccordionGroup/AccordionGroupContext.js";
+import { AccordionStateContext } from "./AccordionStateContext.js";
+import { AccordionSummaryContext } from "./components/AccordionSummary/AccordionSummaryContext.js";
+import { AccordionDetailsContext } from "./components/AccordionDetails/AccordionDetailsContext.js";
+const textNormal = utilClasses.typography["text-normal"];
+const AccordionComponent = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      id: idProp,
+      defaultExpanded,
+      onExpandedChange,
+      isDisabled: isDisabledProp,
+      isExpanded: isExpandedProp,
+      ...other
+    } = props;
+    const commonProps = {
+      children,
+      onExpandedChange,
+      defaultExpanded,
+      isDisabled: isDisabledProp,
+      isExpanded: isExpandedProp
+    };
+    const defaultId = useId();
+    const id = idProp || defaultId;
+    const groupState = useContext(AccordionGroupStateContext);
+    const isExpanded = groupState ? groupState.expandedKeys?.has(id) : isExpandedProp;
+    const state = useDisclosureState({
+      ...commonProps,
+      isExpanded,
+      onExpandedChange(isExpanded2) {
+        if (groupState) {
+          groupState.toggleKey(id);
+        }
+        props.onExpandedChange?.(isExpanded2);
+      }
+    });
+    const panelRef = useRef(null);
+    const triggerRef = useRef(null);
+    const isDisabled = isDisabledProp || groupState?.isDisabled || false;
+    const { buttonProps: triggerProps, panelProps } = useDisclosure(
+      {
+        ...commonProps,
+        isExpanded,
+        isDisabled
+      },
+      state,
+      panelRef
+    );
+    return /* @__PURE__ */ jsx(
+      Provider,
+      {
+        values: [
+          [AccordionStateContext, state],
+          [AccordionSummaryContext, { ...triggerProps, ref: triggerRef }],
+          [AccordionDetailsContext, { ...panelProps, ref: panelRef }]
+        ],
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(s.base, textNormal, className),
+            id: idProp,
+            ...other,
+            ref,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+AccordionComponent.displayName = "Accordion";
+const Accordion = AccordionComponent;
+Accordion.Summary = AccordionSummary;
+Accordion.Details = AccordionDetails;
+export {
+  Accordion,
+  AccordionComponent
+};

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

@@ -0,0 +1,8 @@
+const base = "kbq-accordion-3163a3";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Accordion/AccordionStateContext.d.ts

@@ -0,0 +1,2 @@
+import type { DisclosureState } from '@koobiq/react-primitives';
+export declare const AccordionStateContext: import("react").Context<DisclosureState>;

package/dist/components/Accordion/AccordionStateContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+const AccordionStateContext = createContext(
+  {}
+);
+export {
+  AccordionStateContext
+};

package/dist/components/Accordion/components/AccordionDetails/AccordionDetails.d.ts

@@ -0,0 +1,2 @@
+import type { AccordionDetailsProps } from './index';
+export declare const AccordionDetails: import("react").ForwardRefExoticComponent<Omit<AccordionDetailsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/components/AccordionDetails/AccordionDetails.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useContext, useEffect } from "react";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
+import { useContextProps } from "@koobiq/react-primitives";
+import { Transition } from "react-transition-group";
+import s from "./AccordionDetails.module.css.js";
+import { AccordionDetailsContext } from "./AccordionDetailsContext.js";
+import { AccordionStateContext } from "../../AccordionStateContext.js";
+const TRANSITION_TIMEOUT = 300;
+const AccordionDetails = forwardRef((props, ref) => {
+  const { children, className, style, slotProps, unmountOnExit, ...other } = props;
+  const domRef = useDOMRef(ref);
+  const innerRef = useRef(null);
+  const [panelProps] = useContextProps({}, domRef, AccordionDetailsContext);
+  const { isExpanded } = useContext(AccordionStateContext);
+  useEffect(() => {
+    if (!isExpanded) domRef?.current?.setAttribute("hidden", "until-found");
+  }, []);
+  const transitionProps = mergeProps(
+    {
+      timeout: TRANSITION_TIMEOUT,
+      onEnter: () => {
+        domRef?.current?.removeAttribute("hidden");
+      },
+      onExited: () => {
+        domRef?.current?.setAttribute("hidden", "until-found");
+      },
+      in: isExpanded,
+      nodeRef: domRef,
+      unmountOnExit
+    },
+    slotProps?.transition
+  );
+  return /* @__PURE__ */ jsx(Transition, { ...transitionProps, children: (transition) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: domRef,
+      ...panelProps,
+      "data-transition": transition,
+      className: clsx(s.base, className),
+      style: {
+        "--accordion-details-block-size": `${innerRef.current?.clientHeight}px`,
+        "--accordion-details-duration": `${TRANSITION_TIMEOUT}ms`,
+        ...style
+      },
+      ...other,
+      children: /* @__PURE__ */ jsx("p", { ref: innerRef, children })
+    }
+  ) });
+});
+AccordionDetails.displayName = "AccordionDetails";
+export {
+  AccordionDetails
+};

package/dist/components/Accordion/components/AccordionDetails/AccordionDetails.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-accordiondetails-639d82";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Accordion/components/AccordionDetails/AccordionDetailsContext.d.ts

@@ -0,0 +1,2 @@
+import type { ContextValue } from '@koobiq/react-primitives';
+export declare const AccordionDetailsContext: import("react").Context<ContextValue<import("react").HTMLAttributes<HTMLElement>, HTMLDivElement>>;

package/dist/components/Accordion/components/AccordionDetails/AccordionDetailsContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+const AccordionDetailsContext = createContext(
+  null
+);
+export {
+  AccordionDetailsContext
+};

package/dist/components/Accordion/components/AccordionDetails/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AccordionDetails';
+export * from './AccordionDetailsContext';
+export * from './types';

package/dist/components/Accordion/components/AccordionDetails/types.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { TransitionProps } from 'react-transition-group/Transition';
+export type AccordionDetailsRef = ComponentRef<'div'>;
+export type AccordionDetailsProps = ExtendableComponentPropsWithRef<{
+    /** The content of the component. */
+    children?: ReactNode;
+    /** If `true`, unmounts the content when collapsed. */
+    unmountOnExit?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        transition?: Partial<TransitionProps<HTMLElement>>;
+    };
+}, 'div'>;

package/dist/components/Accordion/components/AccordionGroup/AccordionGroup.d.ts

@@ -0,0 +1,2 @@
+import type { AccordionGroupProps } from './index';
+export declare const AccordionGroup: import("react").ForwardRefExoticComponent<Omit<AccordionGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/components/AccordionGroup/AccordionGroup.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { clsx } from "@koobiq/react-core";
+import { useDisclosureGroupState } from "@koobiq/react-primitives";
+import s from "./AccordionGroup.module.css.js";
+import { AccordionGroupStateContext } from "./AccordionGroupContext.js";
+const AccordionGroup = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    isDisabled,
+    expandedKeys,
+    onExpandedChange,
+    defaultExpandedKeys,
+    allowsMultipleExpanded,
+    ...other
+  } = props;
+  const state = useDisclosureGroupState({
+    isDisabled,
+    expandedKeys,
+    onExpandedChange,
+    defaultExpandedKeys,
+    allowsMultipleExpanded
+  });
+  return /* @__PURE__ */ jsx("div", { className: clsx(s.base, className), ...other, ref, children: /* @__PURE__ */ jsx(AccordionGroupStateContext.Provider, { value: state, children }) });
+});
+AccordionGroup.displayName = "AccordionGroup";
+export {
+  AccordionGroup
+};

package/dist/components/Accordion/components/AccordionGroup/AccordionGroup.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-accordiongroup-35d80f";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Accordion/components/AccordionGroup/AccordionGroupContext.d.ts

@@ -0,0 +1,2 @@
+import type { DisclosureGroupState } from '@koobiq/react-primitives';
+export declare const AccordionGroupStateContext: import("react").Context<DisclosureGroupState | null>;

package/dist/components/Accordion/components/AccordionGroup/AccordionGroupContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const AccordionGroupStateContext = createContext(null);
+export {
+  AccordionGroupStateContext
+};

package/dist/components/Accordion/components/AccordionGroup/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AccordionGroup';
+export * from './AccordionGroupContext';
+export * from './types';

package/dist/components/Accordion/components/AccordionGroup/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { DisclosureGroupProps as AriaDisclosureGroupProps } from '@koobiq/react-primitives';
+export type AccordionGroupProps = ExtendableComponentPropsWithRef<AriaDisclosureGroupProps & {
+    children?: ReactNode;
+}, 'div'>;
+export type AccordionGroupRef = ComponentRef<'div'>;

package/dist/components/Accordion/components/AccordionSummary/AccordionSummary.d.ts

@@ -0,0 +1,4 @@
+import { type ComponentPropsWithRef, type ElementType } from 'react';
+import { type AccordionSummaryProps } from './index';
+export declare const AccordionSummary: import("@koobiq/react-core").PolyForwardComponent<"h3", AccordionSummaryProps, ElementType>;
+export type DisclosureTriggerProps<As extends ElementType = 'h3'> = ComponentPropsWithRef<typeof AccordionSummary<As>>;

package/dist/components/Accordion/components/AccordionSummary/AccordionSummary.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { polymorphicForwardRef, mergeProps, clsx } from "@koobiq/react-core";
+import { IconChevronRight16 } from "@koobiq/react-icons";
+import { useContextProps, Button } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import { AccordionStateContext } from "../../AccordionStateContext.js";
+import s from "./AccordionSummary.module.css.js";
+import { AccordionSummaryContext } from "./AccordionSummaryContext.js";
+import { AnimatedIcon } from "../../../AnimatedIcon/AnimatedIcon.js";
+const textBig = utilClasses.typography["text-big"];
+const AccordionSummary = polymorphicForwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    as: Tag = "h3",
+    expandIcon: expandIconProp,
+    expandIconPlacement = "before-content",
+    hideExpandIcon,
+    slotProps,
+    ...other
+  } = props;
+  const { isExpanded } = useContext(AccordionStateContext);
+  const [triggerPropsAria, triggerRef] = useContextProps(
+    { children },
+    void 0,
+    AccordionSummaryContext
+  );
+  const expandIconProps = mergeProps(
+    {
+      className: s.expandIcon,
+      "data-expanded": isExpanded || void 0,
+      "aria-hidden": "true"
+    },
+    slotProps?.expandIcon
+  );
+  const triggerProps = mergeProps(
+    triggerPropsAria,
+    {
+      "data-slot": "trigger",
+      className: ({ isHovered, isDisabled }) => clsx(
+        s.trigger,
+        isHovered && s.hovered,
+        isDisabled && s.disabled,
+        s[expandIconPlacement]
+      ),
+      ref: triggerRef
+    },
+    slotProps?.trigger
+  );
+  const expandIconDefault = /* @__PURE__ */ jsx(
+    AnimatedIcon,
+    {
+      icons: [/* @__PURE__ */ jsx(IconChevronRight16, {}, "expand-icon")],
+      directions: [0, 90],
+      activeIndex: +isExpanded
+    }
+  );
+  const expandIcon = hideExpandIcon ? null : /* @__PURE__ */ jsx("span", { ...expandIconProps, children: expandIconProp?.(isExpanded) ?? expandIconDefault });
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: clsx(s.base, textBig, className),
+      "data-expanded": isExpanded || void 0,
+      "data-expand-icon-placement": expandIconPlacement,
+      ...other,
+      ref,
+      children: /* @__PURE__ */ jsxs(Button, { ...triggerProps, children: [
+        expandIconPlacement === "before-content" && expandIcon,
+        triggerProps?.children,
+        expandIconPlacement !== "before-content" && expandIcon
+      ] })
+    }
+  );
+});
+AccordionSummary.displayName = "AccordionSummary";
+export {
+  AccordionSummary
+};

package/dist/components/Accordion/components/AccordionSummary/AccordionSummary.module.css.js

@@ -0,0 +1,24 @@
+const base = "kbq-accordionsummary-17bfb5";
+const trigger = "kbq-accordionsummary-trigger-8096e7";
+const hovered = "kbq-accordionsummary-hovered-3a99cb";
+const disabled = "kbq-accordionsummary-disabled-5a76af";
+const separately = "kbq-accordionsummary-separately-f6c597";
+const expandIcon = "kbq-accordionsummary-expandIcon-54a6fc";
+const s = {
+  base,
+  trigger,
+  hovered,
+  disabled,
+  "after-content": "kbq-accordionsummary-after-content-58ad40",
+  separately,
+  expandIcon
+};
+export {
+  base,
+  s as default,
+  disabled,
+  expandIcon,
+  hovered,
+  separately,
+  trigger
+};

package/dist/components/Accordion/components/AccordionSummary/AccordionSummaryContext.d.ts

@@ -0,0 +1,2 @@
+import type { ContextValue } from '@koobiq/react-primitives';
+export declare const AccordionSummaryContext: import("react").Context<ContextValue<import("@react-types/button").AriaButtonProps<"button">, HTMLButtonElement>>;

package/dist/components/Accordion/components/AccordionSummary/AccordionSummaryContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+const AccordionSummaryContext = createContext(
+  null
+);
+export {
+  AccordionSummaryContext
+};

package/dist/components/Accordion/components/AccordionSummary/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AccordionSummary';
+export * from './AccordionSummaryContext';
+export * from './types';

package/dist/components/Accordion/components/AccordionSummary/types.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentRef, ReactNode, ReactElement, ComponentPropsWithRef } from 'react';
+import type { ButtonProps } from '@koobiq/react-primitives';
+export type AccordionSummaryRef = ComponentRef<'h3'>;
+export declare const accordionSummaryPropExpandIconPlacement: readonly ["before-content", "after-content", "separately"];
+export type AccordionSummaryPropExpandIconPlacement = (typeof accordionSummaryPropExpandIconPlacement)[number];
+export type AccordionSummaryProps = {
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Renders a custom expand icon. Receives the current expanded state. */
+    expandIcon?: (isExpanded: boolean) => ReactElement;
+    /**
+     * Controls where the expand icon is placed relative to the content.
+     * @default 'before-content'
+     */
+    expandIconPlacement?: AccordionSummaryPropExpandIconPlacement;
+    /** If `true`, hides the expand icon. */
+    hideExpandIcon?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        trigger?: Omit<ButtonProps, 'children'>;
+        expandIcon?: ComponentPropsWithRef<'span'>;
+    };
+};

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

@@ -0,0 +1,3 @@
+export * from './AccordionSummary';
+export * from './AccordionDetails';
+export * from './AccordionGroup';

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

@@ -0,0 +1,4 @@
+export * from './Accordion';
+export * from './components/AccordionGroup';
+export * from './AccordionStateContext';
+export * from './types';

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

@@ -0,0 +1,8 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { AriaDisclosureProps } from '@koobiq/react-primitives';
+export type AccordionProps = ExtendableComponentPropsWithRef<AriaDisclosureProps & {
+    /** The content of the component. */
+    children?: ReactNode;
+}, 'div'>;
+export type AccordionRef = ComponentRef<'div'>;

package/dist/components/Autocomplete/Autocomplete.js

@@ -204,8 +204,8 @@ function AutocompleteRender(props, ref) {
     /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
     /* @__PURE__ */ jsxs("div", { className: s.body, children: [
       /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
-      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps }),
-      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) })
+      /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
+      /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
     ] }),
     /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
   ] });

package/dist/components/Button/Button.js

@@ -60,6 +60,7 @@ const Button = polymorphicForwardRef(
         isDisabled,
         className: classNameFn,
         "data-variant": variant,
+        "data-slot": "button",
         "data-loading": isLoading || void 0,
         "data-fullwidth": fullWidth || void 0,
         "data-onlyicon": !!iconOnly || void 0,

package/dist/components/Calendar/Calendar.js

@@ -9,7 +9,7 @@ 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 { style, className, slotProps } = props;
   const { locale } = useLocale();
   const state = useCalendarState({
     createCalendar,
@@ -22,18 +22,17 @@ function CalendarRender(props, ref) {
   );
   const rootProps = mergeProps(
     { className: clsx(s.base, textNormal, className), style, ref },
+    slotProps?.root,
     calendarProps
   );
+  const headerProps = mergeProps(
+    { state, prevButtonProps, nextButtonProps },
+    slotProps?.header
+  );
+  const gridProps = mergeProps({ state }, slotProps?.grid);
   return /* @__PURE__ */ jsxs("div", { ...rootProps, children: [
-    /* @__PURE__ */ jsx(
-      CalendarHeader,
-      {
-        state,
-        prevButtonProps,
-        nextButtonProps
-      }
-    ),
-    /* @__PURE__ */ jsx(CalendarGrid, { state })
+    /* @__PURE__ */ jsx(CalendarHeader, { ...headerProps }),
+    /* @__PURE__ */ jsx(CalendarGrid, { ...gridProps })
   ] });
 }
 const Calendar = forwardRef(CalendarRender);

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

@@ -23,12 +23,22 @@ function CalendarCell({ state, date }) {
   const { hoverProps, isHovered } = useHover({
     isDisabled: isDisabled || isUnavailable
   });
-  const { focusProps, isFocusVisible } = useFocusRing({});
+  const { focusProps, isFocusVisible, isFocused } = useFocusRing({});
   return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
     "div",
     {
       ...mergeProps(hoverProps, focusProps, buttonProps),
       ref,
+      "data-slot": "calendar-cell",
+      "data-today": isToday || void 0,
+      "data-focused": isFocused || void 0,
+      "data-pressed": isPressed || void 0,
+      "data-hovered": isHovered || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-selected": isSelected || void 0,
+      "data-unavailable": isUnavailable || void 0,
+      "data-focus-visible": isFocusVisible || void 0,
       className: clsx(
         s.base,
         isToday && s.today,

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

@@ -1,6 +1,2 @@
-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 {};
+import type { CalendarGridProps } from './index';
+export declare function CalendarGrid({ state, slotProps, ...props }: CalendarGridProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useEffect, createRef } from "react";
-import { useLocale, getWeeksInMonth, clsx } from "@koobiq/react-core";
+import { useLocale, getWeeksInMonth, mergeProps, clsx } from "@koobiq/react-core";
 import { useCalendarGrid } from "@koobiq/react-primitives";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { utilClasses } from "../../../../styles/utility.js";
@@ -9,7 +9,11 @@ import s from "./CalendarGrid.module.css.js";
 import { monthIndex } from "./utils.js";
 import { CalendarCell } from "../CalendarCell/CalendarCell.js";
 const textNormal = utilClasses.typography["text-normal"];
-function CalendarGrid({ state, ...props }) {
+function CalendarGrid({
+  state,
+  slotProps,
+  ...props
+}) {
   const { locale } = useLocale();
   const { gridProps, headerProps, weekDays } = useCalendarGrid(
     { ...props, weekdayStyle: "short" },
@@ -40,7 +44,13 @@ function CalendarGrid({ state, ...props }) {
     nodeRefs.current.set(k, createRef());
   }
   const tbodyRef = nodeRefs.current.get(k);
-  return /* @__PURE__ */ jsx("div", { className: s.container, children: /* @__PURE__ */ jsxs("table", { ...gridProps, className: clsx(s.base, s[dir], textNormal), children: [
+  const rootProps = mergeProps({ className: s.container }, slotProps?.root);
+  const tableProps = mergeProps(
+    { className: clsx(s.base, s[dir], textNormal) },
+    slotProps?.table,
+    gridProps
+  );
+  return /* @__PURE__ */ jsx("div", { ...rootProps, children: /* @__PURE__ */ jsxs("table", { ...tableProps, 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 }) })

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

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

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

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { AriaCalendarGridProps, CalendarState } from '@koobiq/react-primitives';
+export type CalendarGridProps = {
+    state: CalendarState;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: ComponentPropsWithRef<'div'>;
+        table?: ComponentPropsWithRef<'table'>;
+    };
+} & AriaCalendarGridProps;

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

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