@koobiq/react-components 0.1.2 → 0.2.1

package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.js

@@ -1,81 +1,86 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { isNotNil, clsx } from "@koobiq/react-core";
+import { forwardRef, Children, isValidElement, cloneElement } from "react";
+import { isNotNil, useFocusRing, mergeProps, clsx } from "@koobiq/react-core";
 import { useInputContext, Group } from "@koobiq/react-primitives";
 import s from "./FieldContentGroup.module.css.js";
 import { FieldContentGroupContext } from "./FieldContentGroupContext.js";
 import { FieldAddon } from "../FieldAddon/FieldAddon.js";
-const FieldContentGroup = forwardRef(
-  ({
-    variant = "filled",
-    isInvalid = false,
-    isDisabled = false,
-    children,
-    className,
-    startAddon,
-    endAddon,
-    slotProps,
-    ...other
-  }, ref) => {
-    const { value } = useInputContext();
-    const hasStartAddon = !!startAddon;
-    const hasEndAddon = !!endAddon;
-    const hasValue = isNotNil(value);
-    return /* @__PURE__ */ jsx(
-      Group,
-      {
-        className: clsx(
-          s.base,
-          s[variant],
-          isInvalid && s.invalid,
-          isDisabled && s.disabled,
-          hasStartAddon && s.hasStartAddon,
-          hasEndAddon && s.hasEndAddon,
-          className
-        ),
-        isInvalid,
-        isDisabled,
-        ...other,
-        ref,
-        children: ({ isHovered, isFocusWithin, isDisabled: isDisabled2, isInvalid: isInvalid2 }) => /* @__PURE__ */ jsxs(
-          FieldContentGroupContext.Provider,
-          {
-            value: {
-              hasValue,
-              isHovered,
-              isInvalid: isInvalid2,
-              isDisabled: isDisabled2,
-              isFocusWithin
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                FieldAddon,
-                {
-                  placement: "start",
-                  isInvalid: isInvalid2,
-                  isDisabled: isDisabled2,
-                  ...slotProps?.startAddon,
-                  children: startAddon
-                }
-              ),
-              children,
-              /* @__PURE__ */ jsx(
-                FieldAddon,
-                {
-                  placement: "end",
-                  isInvalid: isInvalid2,
-                  isDisabled: isDisabled2,
-                  ...slotProps?.endAddon,
-                  children: endAddon
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
+const FieldContentGroup = forwardRef(function FieldContentGroup2({
+  variant = "filled",
+  isInvalid = false,
+  isDisabled = false,
+  children,
+  className,
+  startAddon,
+  endAddon,
+  slotProps,
+  ...other
+}, ref) {
+  const { value } = useInputContext();
+  const hasStartAddon = !!startAddon;
+  const hasEndAddon = !!endAddon;
+  const hasValue = isNotNil(value);
+  const { focusProps, isFocused } = useFocusRing({ within: true });
+  const focusManagedChildren = Children.map(children, (child) => {
+    if (!isValidElement(child)) return child;
+    const merged = mergeProps(focusProps, child.props);
+    return cloneElement(child, merged);
+  });
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      className: clsx(
+        s.base,
+        s[variant],
+        isInvalid && s.invalid,
+        isDisabled && s.disabled,
+        isFocused && s.focused,
+        hasStartAddon && s.hasStartAddon,
+        hasEndAddon && s.hasEndAddon,
+        className
+      ),
+      isInvalid,
+      isDisabled,
+      ...other,
+      ref,
+      children: ({ isHovered, isFocusWithin }) => /* @__PURE__ */ jsxs(
+        FieldContentGroupContext.Provider,
+        {
+          value: {
+            hasValue,
+            isHovered,
+            isInvalid,
+            isDisabled,
+            isFocusWithin
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              FieldAddon,
+              {
+                placement: "start",
+                isInvalid,
+                isDisabled,
+                ...slotProps?.startAddon,
+                children: startAddon
+              }
+            ),
+            focusManagedChildren,
+            /* @__PURE__ */ jsx(
+              FieldAddon,
+              {
+                placement: "end",
+                isInvalid,
+                isDisabled,
+                ...slotProps?.endAddon,
+                children: endAddon
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
 FieldContentGroup.displayName = "FieldContentGroup";
 export {
   FieldContentGroup

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

@@ -3,6 +3,7 @@ const hasStartAddon = "kbq-fieldcontentgroup-hasStartAddon-62fb80";
 const hasEndAddon = "kbq-fieldcontentgroup-hasEndAddon-e8c20a";
 const transparent = "kbq-fieldcontentgroup-transparent-ac42b6";
 const filled = "kbq-fieldcontentgroup-filled-37bb93";
+const focused = "kbq-fieldcontentgroup-focused-8fb205";
 const invalid = "kbq-fieldcontentgroup-invalid-e4973b";
 const disabled = "kbq-fieldcontentgroup-disabled-54827b";
 const s = {
@@ -11,6 +12,7 @@ const s = {
   hasEndAddon,
   transparent,
   filled,
+  focused,
   invalid,
   disabled
 };
@@ -19,6 +21,7 @@ export {
   s as default,
   disabled,
   filled,
+  focused,
   hasEndAddon,
   hasStartAddon,
   invalid,

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);
@@ -2017,7 +2018,7 @@
   --field-content-border-color: var(--kbq-line-contrast-fade);
 }
 
-.kbq-fieldcontentgroup-filled-37bb93:focus-within {
+.kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-focused-8fb205) {
   --field-content-outline-color: var(--kbq-states-line-focus-theme);
 }
 
@@ -2025,7 +2026,7 @@
   --field-content-border-color: var(--kbq-line-error);
 }
 
-.kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-invalid-e4973b):focus-within {
+.kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-invalid-e4973b.kbq-fieldcontentgroup-focused-8fb205) {
   --field-content-outline-color: var(--field-content-border-color);
 }
 
@@ -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.1",
   "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/logger": "0.2.1",
+    "@koobiq/react-core": "0.2.1",
+    "@koobiq/react-icons": "0.2.1",
+    "@koobiq/react-primitives": "0.2.1"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",