@koobiq/react-components 0.1.2 → 0.2.0

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

@@ -1,12 +1,12 @@
 import type { ComponentPropsWithRef } from 'react';
-import type { InputPropVariant } from '../../Input';
+import type { FieldInputGroupPropVariant } from '../FieldContentGroup';
 export type FieldInputBaseProps = {
     isInvalid?: boolean;
     isDisabled?: boolean;
     className?: string;
     'data-testid'?: string;
     as?: 'input' | 'textarea';
-    variant?: InputPropVariant;
+    variant?: FieldInputGroupPropVariant;
 };
 export declare const FieldInput: import("@koobiq/react-core").PolyForwardComponent<"input", FieldInputBaseProps, "input" | "textarea">;
 export type FieldInputProps<As extends 'input' | 'textarea' = 'input'> = ComponentPropsWithRef<typeof FieldInput<As>>;

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

@@ -1,12 +1,12 @@
 import { type ReactNode, type Ref } from 'react';
-import type { InputPropVariant } from '../../Input';
+import type { FieldInputGroupPropVariant } from '../FieldContentGroup';
 export type FieldInputDateProps = {
     isInvalid?: boolean;
     isDisabled?: boolean;
-    variant?: InputPropVariant;
     className?: string;
     children?: ReactNode;
     'data-testid'?: string;
     ref?: Ref<HTMLDivElement>;
+    variant?: FieldInputGroupPropVariant;
 };
 export declare const FieldInputDate: import("react").ForwardRefExoticComponent<Omit<FieldInputDateProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,13 +1,4 @@
-import { type ReactNode, type Ref } from 'react';
-import type { InputPropVariant } from '../../Input';
-export type FieldSelectProps = {
-    isInvalid?: boolean;
-    isDisabled?: boolean;
-    className?: string;
-    children?: ReactNode;
-    'data-testid'?: string;
-    variant?: InputPropVariant;
-    placeholder?: string | number;
-    ref?: Ref<HTMLButtonElement>;
-};
-export declare const FieldSelect: import("react").ForwardRefExoticComponent<Omit<FieldSelectProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+import type { ComponentPropsWithRef, ElementType } from 'react';
+import type { FieldSelectBaseProps } from './index';
+export declare const FieldSelect: import("@koobiq/react-core").PolyForwardComponent<"button", FieldSelectBaseProps, ElementType>;
+export type FieldSelectProps<As extends ElementType = 'button'> = ComponentPropsWithRef<typeof FieldSelect<As>>;

package/dist/components/FieldComponents/FieldSelect/FieldSelect.js

@@ -1,10 +1,10 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { clsx, isNotNil } from "@koobiq/react-core";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { polymorphicForwardRef, clsx, isString, isNumber, isNotNil } from "@koobiq/react-core";
 import { Button } from "@koobiq/react-primitives";
 import s from "./FieldSelect.module.css.js";
-const FieldSelect = forwardRef(
+const FieldSelect = polymorphicForwardRef(
   ({
+    as = "button",
     isInvalid = false,
     isDisabled = false,
     variant = "filled",
@@ -12,10 +12,11 @@ const FieldSelect = forwardRef(
     children,
     className,
     ...other
-  }, ref) => /* @__PURE__ */ jsx(
+  }, ref) => /* @__PURE__ */ jsxs(
     Button,
     {
       ...other,
+      as,
       isDisabled,
       "data-slot": "select-value",
       className: clsx(
@@ -27,7 +28,10 @@ const FieldSelect = forwardRef(
         className
       ),
       ref,
-      children: /* @__PURE__ */ jsx("span", { className: s.content, children: children ?? placeholder })
+      children: [
+        isString(children) || isNumber(children) ? /* @__PURE__ */ jsx("span", { className: s.content, children }) : children,
+        !isNotNil(children) && /* @__PURE__ */ jsx("span", { className: s.content, children: placeholder })
+      ]
     }
   )
 );

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

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

package/dist/components/FieldComponents/FieldSelect/types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { FieldInputGroupPropVariant } from '../FieldContentGroup';
+export type FieldSelectBaseProps = {
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+    placeholder?: string | number;
+    variant?: FieldInputGroupPropVariant;
+};

package/dist/components/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import { TextField } from '@koobiq/react-primitives';
 import { type FieldLabelProps, type FieldInputGroupProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputProps, type FieldControlProps } from '../FieldComponents';
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").TextFieldProps<HTMLInputElement>, "children" | "validationBehavior" | "validate" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;

package/dist/components/InputNumber/InputNumber.d.ts

@@ -1,6 +1,6 @@
 import { NumberField } from '@koobiq/react-primitives';
 import { type FieldControlProps, type FieldLabelProps, type FieldCaptionProps, type FieldErrorProps, type FieldInputGroupProps, type FieldInputProps } from '../FieldComponents';
-export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "errorMessage" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
+export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "variant" | "slotProps" | "fullWidth" | "data-testid" | "startAddon" | "endAddon" | "errorMessage" | "isLabelHidden" | keyof {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;

package/dist/components/List/components/ListItemText/ListItemText.js

@@ -6,11 +6,12 @@ import s from "./ListItemText.module.css.js";
 import { Typography } from "../../../Typography/Typography.js";
 const ListItemText = forwardRef(
   ({ className, children, caption, slotProps, ...other }, ref) => /* @__PURE__ */ jsxs("div", { className: clsx(s.base, className), ...other, ref, children: [
-    /* @__PURE__ */ jsx(Typography, { as: "span", ...slotProps?.text, children }),
+    /* @__PURE__ */ jsx(Typography, { as: "span", align: "start", ellipsis: true, ...slotProps?.text, children }),
     isNotNil(caption) && /* @__PURE__ */ jsx(
       Typography,
       {
         as: "span",
+        align: "start",
         color: "contrast-secondary",
         className: s.caption,
         variant: "text-compact",

package/dist/style.css

@@ -1905,6 +1905,7 @@
   --badge-color: var(--kbq-foreground-contrast);
 }
 .kbq-fieldcontrol-ef127a {
+  --field-control-size-height: 32px;
   --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);
@@ -2039,8 +2040,8 @@
 .kbq-fieldaddon-3388d3 {
   --field-addon-color: var(--kbq-icon-contrast-fade);
   z-index: 1;
-  block-size: 100%;
   color: var(--field-addon-color);
+  block-size: var(--field-control-size-height);
   transition: color var(--kbq-transition-default);
   justify-content: center;
   align-items: center;
@@ -2099,11 +2100,11 @@
 }
 
 .kbq-fieldinput-77b90b:where(input) {
-  block-size: var(--kbq-size-3xl);
+  block-size: var(--field-control-size-height);
 }
 
 .kbq-fieldinput-77b90b:where(textarea) {
-  min-block-size: var(--kbq-size-3xl);
+  min-block-size: var(--field-control-size-height);
   resize: none;
 }
 
@@ -3127,13 +3128,14 @@
   --field-input-color: var(--kbq-foreground-contrast);
   --field-input-bg-color: var(--kbq-background-bg);
   --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
+  gap: var(--kbq-size-s);
   cursor: pointer;
   box-sizing: border-box;
   border-radius: inherit;
-  min-block-size: 32px;
   inline-size: 100%;
   color: var(--field-input-color);
   background: var(--field-input-bg-color);
+  min-block-size: var(--field-control-size-height);
   padding-block: 0;
   padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
   transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
@@ -3153,11 +3155,9 @@
 }
 
 .kbq-fieldselect-content-c36142 {
+  text-align: start;
   white-space: nowrap;
-  align-items: center;
-  gap: var(--kbq-size-s);
   text-overflow: ellipsis;
-  display: flex;
   overflow: hidden;
 }
 
@@ -3411,6 +3411,7 @@
   padding-inline: var(--kbq-size-xxs);
   min-inline-size: var(--kbq-size-xxl);
   background-color: var(--tag-bg-color);
+  outline-offset: calc(-1 * var(--tag-outline-width) / 2);
   outline: var(--tag-outline-width) solid var(--tag-outline-color);
   transition: outline-color var(--kbq-transition-default), background-color var(--kbq-transition-default), color var(--kbq-transition-default);
   border: none;
@@ -3817,7 +3818,7 @@
   cursor: pointer;
   box-sizing: border-box;
   inline-size: 100%;
-  block-size: var(--kbq-size-3xl);
+  block-size: var(--field-control-size-height);
   border-radius: inherit;
   color: var(--field-input-color);
   background: var(--field-input-bg-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.1.2",
+  "version": "0.2.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/logger": "0.1.2",
-    "@koobiq/react-icons": "0.1.2",
-    "@koobiq/react-primitives": "0.1.2",
-    "@koobiq/react-core": "0.1.2"
+    "@koobiq/react-core": "0.2.0",
+    "@koobiq/react-icons": "0.2.0",
+    "@koobiq/react-primitives": "0.2.0",
+    "@koobiq/logger": "0.2.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",