@koobiq/react-components 0.0.1-beta.27 → 0.0.1-beta.29

package/dist/components/Badge/Badge.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { deprecate } from "@koobiq/logger";
+import { polymorphicForwardRef, isNotNil, clsx } from "@koobiq/react-core";
 import s from "./Badge.module.css.js";
 const Badge = polymorphicForwardRef(
   ({
@@ -10,22 +11,30 @@ const Badge = polymorphicForwardRef(
     startIcon,
     endIcon,
     label,
+    children,
     ...other
-  }, ref) => /* @__PURE__ */ jsxs(
-    Tag,
-    {
-      "data-variant": variant,
-      "data-size": size,
-      ...other,
-      ref,
-      className: clsx(s.base, s[size], s[variant], className),
-      children: [
-        startIcon,
-        /* @__PURE__ */ jsx("span", { className: s.label, children: label }),
-        endIcon
-      ]
+  }, ref) => {
+    if (process.env.NODE_ENV !== "production" && isNotNil(label)) {
+      deprecate(
+        'Badge. The "label" prop is deprecated. Use "children" prop to replace it.'
+      );
     }
-  )
+    return /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        "data-variant": variant,
+        "data-size": size,
+        ...other,
+        ref,
+        className: clsx(s.base, s[size], s[variant], className),
+        children: [
+          startIcon,
+          /* @__PURE__ */ jsx("span", { className: s.label, children: children ?? label }),
+          endIcon
+        ]
+      }
+    );
+  }
 );
 export {
   Badge

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

@@ -3,18 +3,25 @@ export declare const badgePropSize: readonly ["compact", "normal"];
 export type BadgePropSize = (typeof badgePropSize)[number];
 export declare const badgePropVariant: readonly ["theme", "fade-theme", "outline-fade-theme", "error", "fade-error", "outline-fade-error", "warning", "fade-warning", "outline-fade-warning", "success", "fade-success", "outline-fade-success", "contrast", "fade-contrast", "outline-fade-contrast"];
 export type BadgePropVariant = (typeof badgePropVariant)[number];
+type BadgeBaseDeprecatedProps = {
+    /**
+     * @deprecated
+     * The "label" prop is deprecated. Use "children" prop to replace it.
+     * The label of the component. */
+    label?: ReactNode;
+};
 export type BadgeBaseProps = {
     /** The variant to use. */
     variant?: BadgePropVariant;
     /** The size of the component. */
     size?: BadgePropSize;
-    /** The label of the component. */
-    label?: ReactNode;
+    /** The content of the component. */
+    children?: ReactNode;
     /** Icon placed before the children. */
     startIcon?: ReactNode;
     /** Icon placed after the children. */
     endIcon?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
-    children?: never;
-};
+} & BadgeBaseDeprecatedProps;
+export {};

package/dist/components/FieldComponents/FieldControl/FieldControl.d.ts

@@ -1,10 +1,7 @@
-import type { TextFieldProps, TextFieldRef } from '@koobiq/react-primitives';
-export type FieldControlProps = TextFieldProps & {
+import type { ComponentPropsWithRef, ElementType } from 'react';
+export type FieldControlBaseProps = {
     fullWidth?: boolean;
     className?: string;
 };
-export type FieldControlRef = TextFieldRef;
-export declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseTextFieldProps, keyof import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps>> & import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").TextFieldRenderProps> & {
-    fullWidth?: boolean;
-    className?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FieldControl: import("@koobiq/react-core").PolyForwardComponent<"div", FieldControlBaseProps, ElementType>;
+export type FieldControlProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FieldControl<As>>;

package/dist/components/FieldComponents/FieldControl/FieldControl.js

@@ -1,16 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "@koobiq/react-core";
-import { TextField } from "@koobiq/react-primitives";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
 import s from "./FieldControl.module.css.js";
-const FieldControl = forwardRef(
-  ({ fullWidth = false, children, className, ...other }, ref) => /* @__PURE__ */ jsx(
-    TextField,
+const FieldControl = polymorphicForwardRef(
+  ({ fullWidth = false, className, as: Tag = "div", ...other }, ref) => /* @__PURE__ */ jsx(
+    Tag,
     {
       className: clsx(s.base, fullWidth && s.fullWidth, className),
       ...other,
-      ref,
-      children
+      ref
     }
   )
 );

package/dist/components/FieldComponents/FieldInput/FieldInput.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentPropsWithRef } from 'react';
-import type { InputPropVariant } from '../../Input/types';
+import type { InputPropVariant } from '../../Input';
 export type FieldInputBaseProps = {
     error?: boolean;
     disabled?: boolean;

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

@@ -1,5 +1,4 @@
 export * from './FieldControl';
-export * from './FieldNumberControl';
 export * from './FieldInput';
 export * from './FieldSelect';
 export * from './FieldLabel';

package/dist/components/Input/Input.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps } from "@koobiq/react-core";
+import { TextField } from "@koobiq/react-primitives";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
 import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
@@ -32,7 +33,7 @@ const Input = forwardRef((props, ref) => {
     },
     other
   );
-  return /* @__PURE__ */ jsx(FieldControl, { ...rootProps, children: ({ error, required, disabled }) => {
+  return /* @__PURE__ */ jsx(FieldControl, { as: TextField, ...rootProps, children: ({ error, required, disabled }) => {
     const labelProps = mergeProps(
       { hidden: hiddenLabel, required },
       slotProps?.label

package/dist/components/InputNumber/InputNumber.js

@@ -2,8 +2,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { useDOMRef, mergeProps } from "@koobiq/react-core";
-import { FieldNumberControl } from "../FieldComponents/FieldNumberControl/FieldNumberControl.js";
+import { NumberField } from "@koobiq/react-primitives";
 import { InputNumberCounterControls } from "./components/InputNumberCounterControls.js";
+import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
 import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
 import { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
@@ -34,7 +35,7 @@ const InputNumber = forwardRef(
       },
       other
     );
-    return /* @__PURE__ */ jsx(FieldNumberControl, { ...rootProps, children: ({ error, required, disabled }) => {
+    return /* @__PURE__ */ jsx(FieldControl, { as: NumberField, ...rootProps, children: ({ error, required, disabled }) => {
       const labelProps = mergeProps(
         { hidden: hiddenLabel, required },
         slotProps?.label

package/dist/components/InputNumber/components/InputNumberCounterControls.js

@@ -15,7 +15,7 @@ const InputNumberCounterControls = () => {
         slot: "increment",
         variant: "fade-contrast",
         size: "l",
-        compact: true,
+        isCompact: true,
         children: /* @__PURE__ */ jsx(IconChevronUp16, {})
       }
     ),
@@ -26,7 +26,7 @@ const InputNumberCounterControls = () => {
         slot: "decrement",
         variant: "fade-contrast",
         size: "l",
-        compact: true,
+        isCompact: true,
         children: /* @__PURE__ */ jsx(IconChevronDown16, {})
       }
     )

package/dist/components/Select/Select.js

@@ -7,6 +7,7 @@ import s from "./Select.module.css.js";
 import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.js";
 import { PopoverInner } from "../Popover/Popover.js";
 import { ListInner } from "../List/List.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";
@@ -150,7 +151,7 @@ function SelectRender(props, ref) {
   const renderDefaultValue = (selectedItem) => selectedItem?.rendered;
   const renderValue = renderValueProp || renderDefaultValue;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { ...rootProps, children: [
+    /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
       /* @__PURE__ */ jsx(FieldLabel, { ...labelProps, children: props.label }),
       /* @__PURE__ */ jsx(
         HiddenSelect,

package/dist/components/Table/Table.js

@@ -22,7 +22,6 @@ const textNormal = utilClasses.typography["text-normal"];
 function TableRender(props, ref) {
   const {
     stickyHeader = false,
-    fullWidth = false,
     divider = "none",
     slotProps,
     selectionMode,
@@ -49,14 +48,8 @@ function TableRender(props, ref) {
   const { ref: theadRef, height } = useElementSize();
   const containerProps = mergeProps(
     {
-      className: clsx(
-        s.container,
-        fullWidth && s.fullWidth,
-        textNormal,
-        className
-      ),
+      className: clsx(s.container, textNormal, className),
       "data-divider": divider,
-      "data-fullwidth": fullWidth,
       "data-sticky-header": stickyHeader,
       style: {
         ...styleProp,

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

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

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

@@ -43,11 +43,6 @@ export type TableProps<T> = ExtendableComponentPropsWithRef<{
      * @default none
      */
     divider?: TablePropDivider;
-    /**
-     * If `true`, the table will take up the full width of its container.
-     * @default false
-     * */
-    fullWidth?: boolean;
     /**
      * Flag indicating a fixed table header.
      * @default false

package/dist/components/Textarea/Textarea.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { mergeProps } from "@koobiq/react-core";
+import { TextField } from "@koobiq/react-primitives";
 import { TextareaContextConsumer } from "./components/TextareaContextConsumer/TextareaContextConsumer.js";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 const Textarea = forwardRef((props, ref) => {
@@ -28,7 +29,7 @@ const Textarea = forwardRef((props, ref) => {
     },
     other
   );
-  return /* @__PURE__ */ jsx(FieldControl, { inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FieldControl, { as: TextField, inputElementType: "textarea", ...rootProps, children: (values) => /* @__PURE__ */ jsx(
     TextareaContextConsumer,
     {
       ...values,

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

@@ -1,9 +1,9 @@
 export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     variant?: import("./types").TooltipPropVariant;
-    open?: boolean;
+    isOpen?: boolean;
     defaultOpen?: boolean;
     onOpenChange?(open: boolean): void;
-    disabled?: boolean;
+    isDisabled?: boolean;
     children?: import("react").ReactNode;
     control?: import("./types").TooltipPropControl;
     placement?: import("./types").TooltipPropPlacement;
@@ -18,4 +18,7 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     id?: string;
     className?: string;
     portalContainer?: Element;
+} & {
+    open?: boolean;
+    disabled?: boolean;
 } & import("@koobiq/react-core").DataAttributeProps & import("react").RefAttributes<HTMLDivElement>>;

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, mergeProps, clsx, FocusableProvider } from "@koobiq/react-core";
+import { deprecate } from "@koobiq/logger";
+import { isNotNil, 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;
+  if (process.env.NODE_ENV !== "production" && isNotNil(open)) {
+    deprecate(
+      'Tooltip. The "open" prop is deprecated. Use "isOpen" prop to replace it.'
+    );
+  }
+  if (process.env.NODE_ENV !== "production" && isNotNil(disabled)) {
+    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,8 +48,8 @@ const Tooltip = forwardRef((props, ref) => {
     closeDelay,
     defaultOpen,
     onOpenChange,
-    isOpen: openProp,
-    isDisabled: disabled,
+    isOpen,
+    isDisabled,
     ...other
   });
   const domRef = useDOMRef(ref);
@@ -43,11 +58,11 @@ const Tooltip = forwardRef((props, ref) => {
   const { triggerProps, tooltipProps: tooltipTriggerProps } = useTooltipTrigger(
     {
       delay,
+      isOpen,
+      isDisabled,
       closeDelay,
       defaultOpen,
       onOpenChange,
-      isOpen: openProp,
-      isDisabled: disabled,
       ...other
     },
     state,

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

@@ -1,12 +1,29 @@
 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 { FocusableElement } 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];
+type TooltipDeprecatedProps = {
+    /**
+     * @deprecated
+     * The "open" prop is deprecated. Use "isOpen" prop to replace it.
+     * If `true`, the component is shown.
+     * @default false
+     * */
+    open?: boolean;
+    /**
+     * @deprecated
+     * The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
+     * If `true`, the component is disabled.
+     * @default false
+     * */
+    disabled?: boolean;
+};
 export type TooltipProps = {
     /**
      * The variant to use.
@@ -14,7 +31,7 @@ export type TooltipProps = {
      * */
     variant?: TooltipPropVariant;
     /** If `true`, the component is shown. */
-    open?: boolean;
+    isOpen?: 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. */
@@ -23,7 +40,7 @@ export type TooltipProps = {
      * If `true`, the tooltip should be disabled, independent of the trigger.
      * @default false
      * */
-    disabled?: boolean;
+    isDisabled?: boolean;
     /** The content of the component. */
     children?: ReactNode;
     /** The render function of the control for displaying the tooltip. */
@@ -82,5 +99,6 @@ export type TooltipProps = {
      * @default document.body
      */
     portalContainer?: Element;
-} & DataAttributeProps;
+} & TooltipDeprecatedProps & DataAttributeProps;
 export type TooltipRef = ComponentRef<'div'>;
+export {};

package/dist/components/index.d.ts

@@ -33,3 +33,4 @@ export * from './Table';
 export * from './Calendar';
 export * from './layout';
 export { useListData } from '@koobiq/react-primitives';
+export { useRouter, RouterProvider } from '@koobiq/react-primitives';

package/dist/index.js

@@ -1,5 +1,5 @@
 /* empty css           */
-import { useListData, useLocale } from "@koobiq/react-primitives";
+import { RouterProvider, useListData, useLocale, useRouter } from "@koobiq/react-primitives";
 import { Provider, defaultBreakpoints } from "./components/Provider/Provider.js";
 import { BreakpointsProvider } from "./components/Provider/BreakpointsProvider.js";
 import { ProviderContext, useProvider } from "./components/Provider/ProviderContext.js";
@@ -119,6 +119,7 @@ export {
   RadioGroupContext,
   RadioGroupDescription,
   RadioGroupLabel,
+  RouterProvider,
   Select,
   SidePanel,
   SidePanelContent,
@@ -190,5 +191,6 @@ export {
   useLocale,
   useMatchedBreakpoints,
   useProvider,
-  useRadioGroupState
+  useRadioGroupState,
+  useRouter
 };

package/dist/style.css

@@ -2135,21 +2135,6 @@
   resize: block;
   overflow: auto;
 }
-.kbq-fieldnumbercontrol-9b0b2d {
-  --field-input-padding-inline-start: var(--kbq-size-m);
-  --field-input-padding-inline-end: var(--kbq-size-m);
-  --field-input-padding-block-start: var(--kbq-size-xs);
-  --field-input-padding-block-end: var(--kbq-size-xs);
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  display: flex;
-  position: relative;
-}
-
-.kbq-fieldnumbercontrol-fullWidth-d20d89 {
-  inline-size: 100%;
-}
 .kbq-inputnumbercountercontrols-77ed13 {
   opacity: 0;
   visibility: hidden;
@@ -3469,10 +3454,6 @@
   scroll-padding-block-start: var(--table-container-scroll-padding-top);
 }
 
-.kbq-table-fullWidth-419d42 .kbq-table-55e555 {
-  inline-size: 100%;
-}
-
 [data-divider="none"] tbody td:first-child {
   border-start-start-radius: var(--kbq-size-s);
   border-end-start-radius: var(--kbq-size-s);
@@ -3519,6 +3500,7 @@
 
 .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"])) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.27",
+  "version": "0.0.1-beta.29",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.27",
-    "@koobiq/react-primitives": "0.0.1-beta.27",
-    "@koobiq/react-icons": "0.0.1-beta.27",
-    "@koobiq/react-core": "0.0.1-beta.27"
+    "@koobiq/logger": "0.0.1-beta.29",
+    "@koobiq/react-core": "0.0.1-beta.29",
+    "@koobiq/react-primitives": "0.0.1-beta.29",
+    "@koobiq/react-icons": "0.0.1-beta.29"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",

package/dist/components/FieldComponents/FieldNumberControl/FieldNumberControl.d.ts

@@ -1,10 +0,0 @@
-import { type NumberFieldProps, type NumberFieldRef } from '@koobiq/react-primitives';
-export type FieldNumberControlProps = NumberFieldProps & {
-    fullWidth?: boolean;
-    className?: string;
-};
-export type FieldNumberControlRef = NumberFieldRef;
-export declare const FieldNumberControl: import("react").ForwardRefExoticComponent<Omit<import("@koobiq/react-primitives").UseNumberFieldProps, keyof import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").NumberFieldRenderProps>> & import("@koobiq/react-primitives").RenderProps<import("@koobiq/react-primitives").NumberFieldRenderProps> & {
-    fullWidth?: boolean;
-    className?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FieldComponents/FieldNumberControl/FieldNumberControl.js

@@ -1,18 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx } from "@koobiq/react-core";
-import { NumberField } from "@koobiq/react-primitives";
-import s from "./FieldNumberControl.module.css.js";
-const FieldNumberControl = forwardRef(({ fullWidth = false, children, className, ...other }, ref) => /* @__PURE__ */ jsx(
-  NumberField,
-  {
-    className: clsx(s.base, fullWidth && s.fullWidth, className),
-    ...other,
-    ref,
-    children
-  }
-));
-FieldNumberControl.displayName = "FieldNumberControl";
-export {
-  FieldNumberControl
-};

package/dist/components/FieldComponents/FieldNumberControl/FieldNumberControl.module.css.js

@@ -1,11 +0,0 @@
-const base = "kbq-fieldnumbercontrol-9b0b2d";
-const fullWidth = "kbq-fieldnumbercontrol-fullWidth-d20d89";
-const s = {
-  base,
-  fullWidth
-};
-export {
-  base,
-  s as default,
-  fullWidth
-};

package/dist/components/FieldComponents/FieldNumberControl/index.d.ts

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