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

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
-import { useDOMRef, useMultiRef, useBoolean, FocusableProvider, clsx, mergeProps } from "@koobiq/react-core";
+import { deprecate } from "@koobiq/logger";
+import { useDOMRef, useMultiRef, useBoolean, mergeProps, clsx, FocusableProvider } from "@koobiq/react-core";
 import { useTooltipTriggerState, useTooltipTrigger, useOverlayPosition, useTooltip, Overlay } from "@koobiq/react-primitives";
 import { Transition } from "react-transition-group";
 import { utilClasses } from "../../styles/utility.js";
@@ -9,7 +10,10 @@ import s from "./Tooltip.module.css.js";
 const Tooltip = forwardRef((props, ref) => {
   const {
     delay = 120,
-    disabled = false,
+    disabled,
+    open,
+    isDisabled: isDisabledProp,
+    isOpen: isOpenProp,
     closeDelay = 120,
     hideArrow = false,
     variant = "contrast",
@@ -20,12 +24,23 @@ const Tooltip = forwardRef((props, ref) => {
     crossOffset,
     defaultOpen,
     onOpenChange,
-    open: openProp,
     portalContainer,
     offset: offsetProp,
     arrowBoundaryOffset,
     ...other
   } = props;
+  const isOpen = isOpenProp ?? open;
+  const isDisabled = isDisabledProp ?? disabled ?? false;
+  if (process.env.NODE_ENV !== "production" && "open" in props) {
+    deprecate(
+      'Tooltip: the "open" prop is deprecated. Use "isOpen" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+    deprecate(
+      'Tooltip: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+    );
+  }
   const showArrow = !hideArrow;
   const offset = showArrow ? offsetProp : offsetProp || 4;
   const state = useTooltipTriggerState({
@@ -33,21 +48,21 @@ const Tooltip = forwardRef((props, ref) => {
     closeDelay,
     defaultOpen,
     onOpenChange,
-    isOpen: openProp,
-    isDisabled: disabled,
+    isOpen,
+    isDisabled,
     ...other
   });
   const domRef = useDOMRef(ref);
   const controlRef = useRef(null);
   const controlRefCallback = useMultiRef([controlRef]);
-  const { triggerProps, tooltipProps } = useTooltipTrigger(
+  const { triggerProps, tooltipProps: tooltipTriggerProps } = useTooltipTrigger(
     {
       delay,
+      isOpen,
+      isDisabled,
       closeDelay,
       defaultOpen,
       onOpenChange,
-      isOpen: openProp,
-      isDisabled: disabled,
       ...other
     },
     state,
@@ -66,7 +81,20 @@ const Tooltip = forwardRef((props, ref) => {
     onClose: () => state.close(true),
     targetRef: anchorRef || controlRef
   });
-  const { tooltipProps: localTooltipProps } = useTooltip(overlayProps, state);
+  const { tooltipProps: tooltipCommonProps } = useTooltip(overlayProps, state);
+  const tooltipProps = mergeProps(
+    {
+      className: clsx(
+        s.base,
+        s[variant],
+        utilClasses.typography["text-normal"]
+      ),
+      ref: domRef
+    },
+    other,
+    tooltipCommonProps,
+    tooltipTriggerProps
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(FocusableProvider, { ...triggerProps, ref: controlRef, children: control?.({
       ref: controlRefCallback,
@@ -76,7 +104,7 @@ const Tooltip = forwardRef((props, ref) => {
       Transition,
       {
         onEnter: on,
-        timeout: 300,
+        timeout: 120,
         onExited: off,
         in: openState,
         nodeRef: domRef,
@@ -85,18 +113,11 @@ const Tooltip = forwardRef((props, ref) => {
         children: (transition) => /* @__PURE__ */ jsx(Overlay, { portalContainer, children: /* @__PURE__ */ jsxs(
           "div",
           {
-            ...mergeProps(localTooltipProps, tooltipProps),
+            ...tooltipProps,
             "data-arrow": showArrow,
             "data-variant": variant,
             "data-placement": placement,
             "data-transition": transition,
-            className: clsx(
-              s.base,
-              s[variant],
-              utilClasses.typography["text-normal"]
-            ),
-            ...other,
-            ref: domRef,
             children: [
               showArrow && /* @__PURE__ */ jsx(
                 "div",
@@ -110,8 +131,7 @@ const Tooltip = forwardRef((props, ref) => {
             ]
           }
         ) })
-      },
-      placement
+      }
     )
   ] });
 });

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

@@ -1,37 +1,42 @@
 import type { ReactNode, RefObject, ComponentRef, ReactElement, DOMAttributes } from 'react';
-import type { DataAttributeProps } from '@koobiq/react-core';
-export type TooltipPropControl = (props: DOMAttributes<HTMLElement> & {
-    ref: ((node: HTMLElement | null) => void) | null;
+import type { DataAttributeProps, ExtendableProps, FocusableElement } from '@koobiq/react-core';
+import type { TooltipTriggerProps } from '@koobiq/react-primitives';
+export type TooltipPropControl = (props: DOMAttributes<FocusableElement | null> & {
+    ref: ((node: FocusableElement | null) => void) | null;
 }) => ReactElement;
 export declare const tooltipPropPlacement: readonly ["bottom", "bottom start", "bottom end", "top", "top start", "top end", "start", "start top", "start bottom", "end", "end top", "end bottom"];
 export declare const tooltipPropVariant: readonly ["contrast", "contrast-fade", "error", "warning", "theme"];
 export type TooltipPropVariant = (typeof tooltipPropVariant)[number];
 export type TooltipPropPlacement = (typeof tooltipPropPlacement)[number];
-export type TooltipProps = {
+type TooltipDeprecatedProps = {
     /**
-     * The variant to use.
-     * @default contrast
-     * */
-    variant?: TooltipPropVariant;
-    /** If `true`, the component is shown. */
+     * If `true`, the component is shown.
+     * @default false
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     */
     open?: boolean;
-    /** The default open state. Use when the component is not controlled. */
-    defaultOpen?: boolean;
-    /** Handler that is called when the overlay's open state changes. */
-    onOpenChange?(open: boolean): void;
     /**
-     * If `true`, the tooltip should be disabled, independent of the trigger.
-     * @default false
-     * */
+     * If `true`, the component is disabled.
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     */
     disabled?: boolean;
+};
+export type TooltipProps = ExtendableProps<{
+    /**
+     * The variant to use.
+     * @default 'contrast'
+     */
+    variant?: TooltipPropVariant;
     /** The content of the component. */
     children?: ReactNode;
     /** The render function of the control for displaying the tooltip. */
     control?: TooltipPropControl;
     /**
      * The placement of the element with respect to its anchor element.
-     * @default top
-     * */
+     * @default 'top'
+     */
     placement?: TooltipPropPlacement;
     /** The ref for the element which the popover positions itself with respect to. */
     anchorRef?: RefObject<HTMLElement | null>;
@@ -55,7 +60,7 @@ export type TooltipProps = {
     /**
      * If `true`, the arrow isn't shown.
      * @default false
-     * */
+     */
     hideArrow?: boolean;
     /**
      * The delay time for the tooltip to show up.
@@ -67,10 +72,6 @@ export type TooltipProps = {
      * @default 120
      */
     closeDelay?: number;
-    /**
-     * By default, opens for both focus and hover. Can be made to open only for focus.
-     */
-    trigger?: 'focus';
     /**
      * The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
      */
@@ -82,5 +83,6 @@ export type TooltipProps = {
      * @default document.body
      */
     portalContainer?: Element;
-} & DataAttributeProps;
+} & TooltipDeprecatedProps & DataAttributeProps, TooltipTriggerProps>;
 export type TooltipRef = ComponentRef<'div'>;
+export {};

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

@@ -2,7 +2,12 @@ import type { ReactNode } from 'react';
 export declare const typographyPropVariant: readonly ["display-big", "display-normal", "display-compact", "display-big-strong", "display-normal-strong", "display-compact-strong", "headline", "title", "subheading", "text-big", "text-big-strong", "text-big-medium", "text-normal", "text-normal-strong", "text-normal-medium", "text-compact", "text-compact-strong", "text-compact-medium", "caps-big", "caps-big-strong", "caps-normal", "caps-normal-strong", "caps-compact", "caps-compact-strong", "mono-big", "mono-big-strong", "mono-normal", "mono-normal-strong", "mono-compact", "mono-compact-strong", "mono-codeblock", "tabular-big", "tabular-big-strong", "tabular-normal", "tabular-normal-strong", "tabular-compact", "tabular-compact-strong", "italic-big", "italic-big-strong", "italic-normal", "italic-normal-strong", "italic-compact", "italic-compact-strong", "inherit"];
 export type TypographyPropVariant = (typeof typographyPropVariant)[number];
 export declare const typographyPropDisplay: readonly ["block", "inline", "inline-block"];
+/**
+ * @deprecated
+ * This type has been deprecated, please use `TypographyPropDisplay` instead.
+ */
 export type TypographyDisplayVariant = (typeof typographyPropDisplay)[number];
+export type TypographyPropDisplay = (typeof typographyPropDisplay)[number];
 export declare const typographyPropAlign: readonly ["start", "center", "end", "initial", "inherit"];
 export type TypographyPropAlign = (typeof typographyPropAlign)[number];
 export declare const typographyPropColor: readonly ["white", "white-secondary", "theme", "theme-secondary", "contrast", "on-contrast", "contrast-secondary", "contrast-tertiary", "error", "error-secondary", "error-tertiary", "error-less", "success", "success-less", "success-secondary", "warning", "warning-secondary", "visited", "inherit"];
@@ -10,11 +15,11 @@ export type TypographyPropColor = (typeof typographyPropColor)[number];
 export type TypographyBaseProps = {
     /**
      * The variant to use.
-     * @default text-normal
-     * */
+     * @default 'text-normal'
+     */
     variant?: TypographyPropVariant;
     /** Set the display for the component. */
-    display?: TypographyDisplayVariant;
+    display?: TypographyPropDisplay;
     /** Set the text-align on the component. */
     align?: TypographyPropAlign;
     /** Hidden overflow content will be replaced by an ellipsis. */
@@ -25,7 +30,7 @@ export type TypographyBaseProps = {
     className?: string;
     /**
      * Text color.
-     * @default contrast
-     * */
+     * @default 'contrast'
+     */
     color?: TypographyPropColor;
 };

package/dist/components/index.d.ts

@@ -24,4 +24,16 @@ export * from './Popover';
 export * from './Tooltip';
 export * from './List';
 export * from './AnimatedIcon';
+export * from './Select';
+export * from './Divider';
+export * from './Menu';
+export * from './ButtonToggleGroup';
+export * from './TagGroup';
+export * from './Table';
+export * from './Calendar';
+export * from './DateInput';
+export * from './DatePicker';
+export * from './TimePicker';
 export * from './layout';
+export { useListData, type ListData, type ListOptions, type TimeValue, type DateValue, } from '@koobiq/react-primitives';
+export { useRouter, useLocale, type Locale, RouterProvider, useDateFormatter, } from '@koobiq/react-core';

package/dist/index.js

@@ -1,4 +1,6 @@
 /* empty css           */
+import { useListData } from "@koobiq/react-primitives";
+import { RouterProvider, useDateFormatter, useLocale, useRouter } from "@koobiq/react-core";
 import { Provider, defaultBreakpoints } from "./components/Provider/Provider.js";
 import { BreakpointsProvider } from "./components/Provider/BreakpointsProvider.js";
 import { ProviderContext, useProvider } from "./components/Provider/ProviderContext.js";
@@ -43,22 +45,37 @@ import { Grid } from "./components/Grid/Grid.js";
 import { GridItem } from "./components/Grid/components/GridItem/GridItem.js";
 import { SkeletonBlock } from "./components/SkeletonBlock/SkeletonBlock.js";
 import { SkeletonTypography } from "./components/SkeletonTypography/SkeletonTypography.js";
-import { DialogHeader, DialogHeader as DialogHeader2, DialogHeader as DialogHeader3, DialogHeader as DialogHeader4 } from "./components/Dialog/components/DialoglHeader.js";
-import { DialogFooter, DialogFooter as DialogFooter2, DialogFooter as DialogFooter3, DialogFooter as DialogFooter4 } from "./components/Dialog/components/DialogFooter.js";
-import { DialogContent, DialogContent as DialogContent2, DialogContent as DialogContent3, DialogContent as DialogContent4 } from "./components/Dialog/components/DialogContent.js";
 import { Modal } from "./components/Modal/Modal.js";
 import { modalPropSize } from "./components/Modal/types.js";
+import { ModalContent, ModalFooter, ModalHeader } from "./components/Modal/index.js";
 import { SidePanel } from "./components/SidePanel/SidePanel.js";
-import { sidePanelPropPosition, sidePanelPropSize } from "./components/SidePanel/types.js";
+import { sidePanelPropPlacement, sidePanelPropPosition, sidePanelPropSize } from "./components/SidePanel/types.js";
+import { SidePanelContent, SidePanelFooter, SidePanelHeader } from "./components/SidePanel/index.js";
 import { Popover } from "./components/Popover/Popover.js";
-import { popoverPropPlacement, popoverPropSize } from "./components/Popover/types.js";
+import { popoverPropPlacement, popoverPropSize, popoverPropType } from "./components/Popover/types.js";
+import { PopoverContent, PopoverFooter, PopoverHeader } from "./components/Popover/index.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 import { tooltipPropPlacement, tooltipPropVariant } from "./components/Tooltip/types.js";
-import { List, ListRender } from "./components/List/List.js";
-import { listPropSelectionMode } from "./components/List/types.js";
-import { ListItem } from "./components/List/ListItem.js";
-import { ListSection } from "./components/List/ListSection.js";
+import { Item } from "./components/Collections/Item.js";
+import { Section } from "./components/Collections/Section.js";
+import { List, ListInner } from "./components/List/List.js";
+import { ListItemText } from "./components/List/components/ListItemText/ListItemText.js";
 import { AnimatedIcon } from "./components/AnimatedIcon/AnimatedIcon.js";
+import { Select } from "./components/Select/Select.js";
+import { Divider } from "./components/Divider/Divider.js";
+import { dividerPropDisplay } from "./components/Divider/types.js";
+import { Menu } from "./components/Menu/Menu.js";
+import { ButtonToggleGroup } from "./components/ButtonToggleGroup/ButtonToggleGroup.js";
+import { ButtonToggle } from "./components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js";
+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 { Calendar } from "./components/Calendar/Calendar.js";
+import { DateInput, DateInputRender } from "./components/DateInput/DateInput.js";
+import { dateInputPropVariant } from "./components/DateInput/types.js";
+import { DatePicker, DatePickerRender } from "./components/DatePicker/DatePicker.js";
+import { TimePicker, TimePickerRender } from "./components/TimePicker/TimePicker.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -68,11 +85,16 @@ export {
   BreakpointsContext,
   BreakpointsProvider,
   Button,
+  ButtonToggle,
+  ButtonToggleGroup,
+  Calendar,
   Checkbox,
   Container,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
+  DateInput,
+  DateInputRender,
+  DatePicker,
+  DatePickerRender,
+  Divider,
   FlexBox,
   Grid,
   GridItem,
@@ -81,17 +103,19 @@ export {
   InputNumber,
   Link,
   List,
-  ListItem,
-  ListRender,
-  ListSection,
+  ListInner,
+  Item as ListItem,
+  ListItemText,
+  Section as ListSection,
+  Menu,
   Modal,
-  DialogContent2 as ModalContent,
-  DialogFooter2 as ModalFooter,
-  DialogHeader2 as ModalHeader,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
   Popover,
-  DialogContent3 as PopoverContent,
-  DialogFooter3 as PopoverFooter,
-  DialogHeader3 as PopoverHeader,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
   ProgressBar,
   ProgressSpinner,
   Provider,
@@ -101,13 +125,20 @@ export {
   RadioGroupContext,
   RadioGroupDescription,
   RadioGroupLabel,
+  RouterProvider,
+  Select,
   SidePanel,
-  DialogContent4 as SidePanelContent,
-  DialogFooter4 as SidePanelFooter,
-  DialogHeader4 as SidePanelHeader,
+  SidePanelContent,
+  SidePanelFooter,
+  SidePanelHeader,
   SkeletonBlock,
   SkeletonTypography,
+  Table,
+  Tag,
+  TagGroup,
   Textarea,
+  TimePicker,
+  TimePickerRender,
   Toggle,
   Tooltip,
   Typography,
@@ -119,7 +150,9 @@ export {
   checkboxPropSize,
   containerMarginsProp,
   containerPositionProp,
+  dateInputPropVariant,
   defaultBreakpoints,
+  dividerPropDisplay,
   flex,
   flexPropAlignItems,
   flexPropDirection,
@@ -133,10 +166,10 @@ export {
   iconButtonPropVariant,
   inputNumberPropVariant,
   inputPropVariant,
-  listPropSelectionMode,
   modalPropSize,
   popoverPropPlacement,
   popoverPropSize,
+  popoverPropType,
   progressBarPropVariant,
   progressSpinnerPropSize,
   progressSpinnerPropVariant,
@@ -144,10 +177,12 @@ export {
   radioGroupPropSize,
   radioPropLabelPlacement,
   radioPropSize,
+  sidePanelPropPlacement,
   sidePanelPropPosition,
   sidePanelPropSize,
   spacing,
   spacingGap,
+  tagGroupPropVariant,
   textareaPropExpand,
   textareaPropVariant,
   togglePropLabelPlacement,
@@ -159,7 +194,11 @@ export {
   typographyPropDisplay,
   typographyPropVariant,
   useBreakpoints,
+  useDateFormatter,
+  useListData,
+  useLocale,
   useMatchedBreakpoints,
   useProvider,
-  useRadioGroupState
+  useRadioGroupState,
+  useRouter
 };