@koobiq/react-components 0.5.1 → 0.7.0

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

@@ -1,9 +1,12 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useEffect, createRef } from "react";
 import { useLocale, getWeeksInMonth, clsx } from "@koobiq/react-core";
 import { useCalendarGrid } from "@koobiq/react-primitives";
+import { TransitionGroup, CSSTransition } from "react-transition-group";
 import { utilClasses } from "../../../../styles/utility.js";
 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 }) {
@@ -12,16 +15,57 @@ function CalendarGrid({ state, ...props }) {
     { ...props, weekdayStyle: "short" },
     state
   );
+  const currentKey = useMemo(
+    () => state.visibleRange.start.toString(),
+    [state.visibleRange.start]
+  );
+  const prevStartRef = useRef(state.visibleRange.start);
+  const dir = useMemo(() => {
+    const curr = state.visibleRange.start;
+    const prev = prevStartRef.current;
+    const delta = monthIndex(curr) - monthIndex(prev);
+    if (delta === 0) return "next";
+    if (Math.abs(delta) > 1) return "jump";
+    return delta > 0 ? "next" : "prev";
+  }, [state.visibleRange.start]);
+  useEffect(() => {
+    prevStartRef.current = state.visibleRange.start;
+  }, [state.visibleRange.start]);
   const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
-  return /* @__PURE__ */ jsxs("table", { ...gridProps, className: clsx(s.base, textNormal), children: [
+  const nodeRefs = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const k = currentKey;
+  if (!nodeRefs.current.has(k)) {
+    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: [
     /* @__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)) })
-  ] });
+    /* @__PURE__ */ jsx(TransitionGroup, { component: null, children: /* @__PURE__ */ jsx(
+      CSSTransition,
+      {
+        timeout: 300,
+        nodeRef: tbodyRef,
+        classNames: {
+          enter: s.daysEnter,
+          enterActive: s.daysEnterActive,
+          exit: s.daysExit,
+          exitActive: s.daysExitActive
+        },
+        onExited: () => {
+          nodeRefs.current.delete(k);
+        },
+        children: /* @__PURE__ */ jsx("tbody", { ref: tbodyRef, 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)) })
+      },
+      k
+    ) })
+  ] }) });
 }
 export {
   CalendarGrid

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

@@ -1,14 +1,35 @@
 const base = "kbq-calendargrid-1a43cf";
+const container = "kbq-calendargrid-container-aea3c5";
 const weekDay = "kbq-calendargrid-weekDay-94b083";
 const divider = "kbq-calendargrid-divider-3ec061";
+const next = "kbq-calendargrid-next-56a233";
+const daysEnter = "kbq-calendargrid-daysEnter-576154";
+const daysEnterActive = "kbq-calendargrid-daysEnterActive-a174dd";
+const daysExit = "kbq-calendargrid-daysExit-93902d";
+const daysExitActive = "kbq-calendargrid-daysExitActive-57d3e5";
+const prev = "kbq-calendargrid-prev-1d8448";
 const s = {
   base,
+  container,
   weekDay,
-  divider
+  divider,
+  next,
+  daysEnter,
+  daysEnterActive,
+  daysExit,
+  daysExitActive,
+  prev
 };
 export {
   base,
+  container,
+  daysEnter,
+  daysEnterActive,
+  daysExit,
+  daysExitActive,
   s as default,
   divider,
+  next,
+  prev,
   weekDay
 };

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

@@ -0,0 +1,4 @@
+export declare function monthIndex(d: {
+    year: number;
+    month: number;
+}): number;

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

@@ -0,0 +1,6 @@
+function monthIndex(d) {
+  return d.year * 12 + d.month;
+}
+export {
+  monthIndex
+};

package/dist/components/DatePicker/DatePicker.js

@@ -81,6 +81,7 @@ function DatePickerRender(props, ref) {
       size: "auto",
       hideArrow: true,
       hideCloseButton: true,
+      className: s.popover,
       placement: "bottom start",
       slotProps: {
         dialog: dialogProps

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

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

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,5 @@
 import { Cell, Row, Column, TableBody, TableHeader } from '../Collections';
+import { TableContainer } from './components';
 import type { TableComponent } from './types';
 declare const TableComponent: TableComponent;
 type CompoundedComponent = typeof TableComponent & {
@@ -9,4 +10,4 @@ type CompoundedComponent = typeof TableComponent & {
     Cell: typeof Cell;
 };
 export declare const Table: CompoundedComponent;
-export {};
+export { TableContainer };

package/dist/components/Table/Table.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
-import { useDOMRef, mergeProps, useElementSize, clsx } from "@koobiq/react-core";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { useTableState, useTable } from "@koobiq/react-primitives";
 import { utilClasses } from "../../styles/utility.js";
 import s from "./Table.module.css.js";
-import { normalizeBlockSize } from "./utils.js";
+import { useTableContainerContext } from "./components/TableContainer/TableContainerContext.js";
 import { TableRowGroup } from "./components/TableRowGroup/TableRowGroup.js";
 import { TableHeaderRow } from "./components/TableHeaderRow/TableHeaderRow.js";
 import { TableSelectAllCell } from "./components/TableSelectAllCell/TableSelectAllCell.js";
@@ -22,47 +22,35 @@ const textNormal = utilClasses.typography["text-normal"];
 function TableRender(props, ref) {
   const {
     stickyHeader = false,
+    fullWidth = false,
     divider = "none",
     slotProps,
     selectionMode,
     selectionBehavior,
     className,
-    blockSize,
-    maxBlockSize,
-    minBlockSize,
-    style: styleProp
+    style
   } = props;
+  const { theadRef } = useTableContainerContext();
   const state = useTableState({
     ...props,
     showSelectionCheckboxes: selectionMode === "multiple" && selectionBehavior !== "replace"
   });
   const domRef = useDOMRef(ref);
-  const tableRef = useRef(null);
   const { collection } = state;
-  const { gridProps } = useTable(props, state, tableRef);
+  const { gridProps } = useTable(props, state, domRef);
   const tableProps = mergeProps(
-    { ref: tableRef, className: s.base },
-    gridProps,
-    slotProps?.table
-  );
-  const { ref: theadRef, height } = useElementSize();
-  const containerProps = mergeProps(
     {
-      className: clsx(s.container, textNormal, className),
-      "data-divider": divider,
+      className: clsx(s.base, fullWidth && s.fullWidth, textNormal, className),
       "data-sticky-header": stickyHeader,
-      style: {
-        ...styleProp,
-        "--table-container-block-size": normalizeBlockSize(blockSize),
-        "--table-container-min-block-size": normalizeBlockSize(minBlockSize),
-        "--table-container-max-block-size": normalizeBlockSize(maxBlockSize),
-        "--table-container-scroll-padding-top": `${height}px`
-      },
-      ref: domRef
+      "data-divider": divider,
+      "data-fullwidth": fullWidth,
+      ref: domRef,
+      style
     },
-    slotProps?.container
+    gridProps,
+    slotProps?.root
   );
-  return /* @__PURE__ */ jsx("div", { ...containerProps, children: /* @__PURE__ */ jsxs("table", { ...tableProps, children: [
+  return /* @__PURE__ */ jsxs("table", { ...tableProps, children: [
     /* @__PURE__ */ jsx(TableRowGroup, { type: "thead", ref: theadRef, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx(TableHeaderRow, { item: headerRow, state, children: [...headerRow.childNodes].map(
       (column) => column.props.isSelectionCell ? /* @__PURE__ */ jsx(
         TableSelectAllCell,
@@ -83,7 +71,7 @@ function TableRender(props, ref) {
     /* @__PURE__ */ jsx(TableRowGroup, { type: "tbody", children: [...collection.body.childNodes].map((row) => /* @__PURE__ */ jsx(TableRow, { item: row, state, children: [...row.childNodes].map(
       (cell) => cell.props.isSelectionCell ? /* @__PURE__ */ jsx(TableCheckboxCell, { cell, state }, cell.key) : /* @__PURE__ */ jsx(TableCell, { cell, state }, cell.key)
     ) }, row.key)) })
-  ] }) });
+  ] });
 }
 const TableComponent = forwardRef(TableRender);
 const Table = TableComponent;

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

@@ -1,11 +1,11 @@
-const container = "kbq-table-container-ecbaa4";
 const base = "kbq-table-55e555";
+const fullWidth = "kbq-table-fullWidth-419d42";
 const s = {
-  container,
-  base
+  base,
+  fullWidth
 };
 export {
   base,
-  container,
-  s as default
+  s as default,
+  fullWidth
 };

package/dist/components/Table/components/TableContainer/TableContainer.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { TableContainerBaseProps } from './types';
+export declare const TableContainer: import("@koobiq/react-core").PolyForwardComponent<"div", TableContainerBaseProps, ElementType>;
+export type TableContainerProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof TableContainer<As>>;

package/dist/components/Table/components/TableContainer/TableContainer.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, useElementSize, clsx } from "@koobiq/react-core";
+import s from "./TableContainer.module.css.js";
+import { TableContainerContext } from "./TableContainerContext.js";
+import { normalizeBlockSize } from "./utils.js";
+const TableContainer = polymorphicForwardRef((props, ref) => {
+  const {
+    as: Tag = "div",
+    children,
+    className,
+    blockSize,
+    maxBlockSize,
+    minBlockSize,
+    style: styleProp
+  } = props;
+  const { ref: theadRef, height } = useElementSize();
+  const style = {
+    ...styleProp,
+    "--table-container-block-size": normalizeBlockSize(blockSize),
+    "--table-container-min-block-size": normalizeBlockSize(minBlockSize),
+    "--table-container-max-block-size": normalizeBlockSize(maxBlockSize),
+    "--table-container-scroll-padding-top": `${height}px`
+  };
+  return /* @__PURE__ */ jsx(TableContainerContext.Provider, { value: { theadRef }, children: /* @__PURE__ */ jsx(Tag, { className: clsx(s.base, className), style, ref, children }) });
+});
+TableContainer.displayName = "TableContainer";
+export {
+  TableContainer
+};

package/dist/components/Table/components/TableContainer/TableContainer.module.css.js

@@ -0,0 +1,8 @@
+const base = "kbq-tablecontainer-0c5c0f";
+const s = {
+  base
+};
+export {
+  base,
+  s as default
+};

package/dist/components/Table/components/TableContainer/TableContainerContext.d.ts

@@ -0,0 +1,6 @@
+import { type Ref } from 'react';
+export type TableContainerContextProps = {
+    theadRef: Ref<HTMLElement>;
+};
+export declare const TableContainerContext: import("react").Context<TableContainerContextProps>;
+export declare const useTableContainerContext: () => TableContainerContextProps;

package/dist/components/Table/components/TableContainer/TableContainerContext.js

@@ -0,0 +1,10 @@
+"use client";
+import { createContext, useContext } from "react";
+const TableContainerContext = createContext(
+  {}
+);
+const useTableContainerContext = () => useContext(TableContainerContext);
+export {
+  TableContainerContext,
+  useTableContainerContext
+};

package/dist/components/Table/components/TableContainer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TableContainer';
+export * from './TableContainerContext';
+export * from './types';

package/dist/components/Table/components/TableContainer/types.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type TableContainerPropBlockSize = CSSProperties['blockSize'];
+export type TableContainerPropMinBlockSize = CSSProperties['minBlockSize'];
+export type TableContainerPropMaxBlockSize = CSSProperties['maxInlineSize'];
+export type TableContainerBaseProps = {
+    /** Height of the table container. */
+    blockSize?: TableContainerPropBlockSize;
+    /** Minimum height of the table container. */
+    minBlockSize?: TableContainerPropMinBlockSize;
+    /** Maximum height of the table container. */
+    maxBlockSize?: TableContainerPropMaxBlockSize;
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+};

package/dist/components/Table/components/TableContainer/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TableContainerPropBlockSize } from './types';
+export declare const normalizeBlockSize: (value: TableContainerPropBlockSize | undefined) => string | undefined;

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

@@ -5,3 +5,4 @@ export * from './TableRow';
 export * from './TableCell';
 export * from './TableSelectAllCell';
 export * from './TableCheckboxCell';
+export * from './TableContainer';

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

@@ -4,9 +4,6 @@ import type { Key } from '@react-types/shared';
 export declare const tablePropDivider: readonly ["none", "row"];
 export type TablePropDivider = (typeof tablePropDivider)[number];
 export type TablePropChildren<T> = TableStateProps<T>['children'];
-export type TablePropBlockSize = CSSProperties['blockSize'];
-export type TablePropMinBlockSize = CSSProperties['minBlockSize'];
-export type TablePropMaxBlockSize = CSSProperties['maxInlineSize'];
 export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'selectionMode' | 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'disabledKeys' | 'disabledBehavior'> & {
     /** Handler that is called when a user performs an action on the row. */
     onRowAction?: (key: Key) => void;
@@ -21,6 +18,11 @@ export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'sele
      * @default 'none'
      */
     divider?: TablePropDivider;
+    /**
+     * If `true`, the button will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Flag indicating a fixed table header.
      * @default false
@@ -32,17 +34,10 @@ export type TableProps<T> = Pick<TableStateProps<T>, 'selectionBehavior' | 'sele
      */
     children?: TablePropChildren<T>;
     /** Ref to the control. */
-    ref?: Ref<HTMLDivElement>;
-    /** Height of the table container. */
-    blockSize?: TablePropBlockSize;
-    /** Minimum height of the table container. */
-    minBlockSize?: TablePropMinBlockSize;
-    /** Maximum height of the table container. */
-    maxBlockSize?: TablePropMaxBlockSize;
+    ref?: Ref<HTMLTableElement>;
     /** The props used for each slot inside. */
     slotProps?: {
-        container?: ComponentPropsWithRef<'div'>;
-        table?: ComponentPropsWithRef<'table'>;
+        root?: ComponentPropsWithRef<'table'>;
     };
 };
 export type TableComponent = <T>(props: TableProps<T>) => ReactElement | null;

package/dist/index.js

@@ -72,6 +72,7 @@ import { TagGroup } from "./components/TagGroup/TagGroup.js";
 import { Tag } from "./components/TagGroup/Tag.js";
 import { tagGroupPropVariant } from "./components/TagGroup/types.js";
 import { Table } from "./components/Table/Table.js";
+import { TableContainer } from "./components/Table/components/TableContainer/TableContainer.js";
 import { Calendar } from "./components/Calendar/Calendar.js";
 import { DateInput, DateInputRender } from "./components/DateInput/DateInput.js";
 import { dateInputPropVariant } from "./components/DateInput/types.js";
@@ -138,6 +139,7 @@ export {
   SkeletonBlock,
   SkeletonTypography,
   Table,
+  TableContainer,
   Tag,
   TagGroup,
   Textarea,

package/dist/style.css

@@ -3605,20 +3605,17 @@
 .kbq-taggroup-20136b [role="gridcell"] {
   display: contents;
 }
-.kbq-table-container-ecbaa4 {
-  --table-container-block-size: 100%;
-  --table-container-min-block-size: unset;
-  --table-container-max-block-size: unset;
-  --table-container-scroll-padding-top: 0;
+.kbq-table-55e555 {
   --table-cell-padding: 10px var(--kbq-size-s);
   --table-cell-color: var(--kbq-foreground-contrast);
   --table-header-cell-padding: 10px var(--kbq-size-s);
   --table-border: 1px solid var(--kbq-line-contrast-less);
   --table-header-cell-color: var(--kbq-foreground-contrast-secondary);
-  block-size: var(--table-container-block-size);
-  min-block-size: var(--table-container-min-block-size);
-  max-block-size: var(--table-container-max-block-size);
-  scroll-padding-block-start: var(--table-container-scroll-padding-top);
+  border-spacing: 0;
+}
+
+.kbq-table-fullWidth-419d42 {
+  inline-size: 100%;
 }
 
 [data-divider="none"] tbody td:first-child {
@@ -3665,11 +3662,6 @@
   inset-block-start: 0;
 }
 
-.kbq-table-55e555 {
-  border-spacing: 0;
-  inline-size: 100%;
-}
-
 [aria-multiselectable="true"] tbody tr:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])) {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
@@ -3825,6 +3817,21 @@
   outline-offset: -2px;
   outline: 2px solid var(--kbq-states-line-focus-theme);
 }
+.kbq-tablecontainer-0c5c0f {
+  --table-container-block-size: ;
+  --table-container-min-block-size: unset;
+  --table-container-max-block-size: unset;
+  --table-container-scroll-padding-top: 0;
+  block-size: var(--table-container-block-size);
+  min-block-size: var(--table-container-min-block-size);
+  max-block-size: var(--table-container-max-block-size);
+  scroll-padding-block-start: var(--table-container-scroll-padding-top);
+  overflow: auto;
+}
+
+.kbq-tablecontainer-0c5c0f table {
+  inline-size: 100%;
+}
 .kbq-calendar-fa3168 {
   --calendar-cell-inline-size: 40px;
   --calendar-cell-block-size: 32px;
@@ -3835,6 +3842,7 @@
   padding-block: var(--kbq-size-m);
   flex-direction: column;
   display: flex;
+  overflow-x: hidden;
 }
 
 .kbq-calendar-open-e506bb {
@@ -3856,15 +3864,23 @@
   margin-inline-start: auto;
 }
 .kbq-calendargrid-1a43cf {
+  border-spacing: 0;
   border-collapse: separate;
-  padding-inline: var(--kbq-size-m);
-  border-spacing: 0 var(--kbq-size-3xs);
+  position: relative;
 }
 
 .kbq-calendargrid-1a43cf td, .kbq-calendargrid-1a43cf th {
   padding: 0;
 }
 
+.kbq-calendargrid-1a43cf tr > td {
+  padding-block-start: var(--kbq-size-3xs);
+}
+
+.kbq-calendargrid-container-aea3c5 {
+  padding-inline: var(--kbq-size-m);
+}
+
 .kbq-calendargrid-weekDay-94b083 {
   block-size: var(--calendar-cell-block-size);
   inline-size: var(--calendar-cell-inline-size);
@@ -3883,6 +3899,54 @@
   background-color: var(--kbq-line-contrast-less);
   position: absolute;
 }
+
+.kbq-calendargrid-next-56a233 .kbq-calendargrid-daysEnter-576154 {
+  transform: translateX(50px);
+}
+
+.kbq-calendargrid-next-56a233 .kbq-calendargrid-daysEnterActive-a174dd, .kbq-calendargrid-next-56a233 .kbq-calendargrid-daysExit-93902d {
+  transform: translateX(0);
+}
+
+.kbq-calendargrid-next-56a233 .kbq-calendargrid-daysExitActive-57d3e5 {
+  transform: translateX(-50px);
+}
+
+.kbq-calendargrid-prev-1d8448 .kbq-calendargrid-daysEnter-576154 {
+  transform: translateX(-50px);
+}
+
+.kbq-calendargrid-prev-1d8448 .kbq-calendargrid-daysEnterActive-a174dd, .kbq-calendargrid-prev-1d8448 .kbq-calendargrid-daysExit-93902d {
+  transform: translateX(0);
+}
+
+.kbq-calendargrid-prev-1d8448 .kbq-calendargrid-daysExitActive-57d3e5 {
+  transform: translateX(50px);
+}
+
+.kbq-calendargrid-daysEnter-576154 {
+  opacity: 0;
+  position: absolute;
+  inset-inline-start: 0;
+}
+
+.kbq-calendargrid-daysEnterActive-a174dd {
+  opacity: 1;
+}
+
+.kbq-calendargrid-daysExit-93902d {
+  pointer-events: none;
+  opacity: 1;
+  position: absolute;
+}
+
+.kbq-calendargrid-daysExitActive-57d3e5 {
+  opacity: 0;
+}
+
+.kbq-calendargrid-daysEnterActive-a174dd, .kbq-calendargrid-daysExitActive-57d3e5 {
+  transition: opacity .2s, transform .3s;
+}
 .kbq-calendarcell-dc4d6e {
   --table-cell-outline-color: transparent;
   --table-cell-outline-width: var(--kbq-size-3xs);
@@ -4023,6 +4087,22 @@
 .kbq-datepicker-calendar-25a0d7 {
   margin-inline-end: calc(-1 * var(--kbq-size-xxs));
 }
+
+.kbq-datepicker-popover-831cde {
+  border-radius: var(--kbq-size-s);
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.kbq-datepicker-popover-831cde[data-transition="entering"], .kbq-datepicker-popover-831cde[data-transition="entered"] {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.kbq-datepicker-popover-831cde[data-transition="exiting"], .kbq-datepicker-popover-831cde[data-transition="exited"] {
+  opacity: 0;
+  transform: translateY(-8px);
+}
 .kbq-timepicker-a6e9f3 {
   min-inline-size: 150px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-core": "0.5.1",
-    "@koobiq/logger": "0.5.1",
-    "@koobiq/react-icons": "0.5.1",
-    "@koobiq/react-primitives": "0.5.1"
+    "@koobiq/react-core": "0.7.0",
+    "@koobiq/react-icons": "0.7.0",
+    "@koobiq/logger": "0.7.0",
+    "@koobiq/react-primitives": "0.7.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",

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

@@ -1,2 +0,0 @@
-import type { TablePropBlockSize } from './types';
-export declare const normalizeBlockSize: (value: TablePropBlockSize | undefined) => string | undefined;