@koobiq/react-components 0.0.1-beta.26 → 0.0.1-beta.28

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/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.26",
+  "version": "0.0.1-beta.28",
   "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.26",
-    "@koobiq/react-icons": "0.0.1-beta.26",
-    "@koobiq/react-core": "0.0.1-beta.26",
-    "@koobiq/react-primitives": "0.0.1-beta.26"
+    "@koobiq/logger": "0.0.1-beta.28",
+    "@koobiq/react-core": "0.0.1-beta.28",
+    "@koobiq/react-icons": "0.0.1-beta.28",
+    "@koobiq/react-primitives": "0.0.1-beta.28"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",

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
-};