@koobiq/react-components 0.1.1 → 0.1.2

package/dist/components/DateInput/DateInput.js

@@ -9,7 +9,7 @@ import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate
 import { DateSegment } from "../DateSegment/DateSegment.js";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
-import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
+import { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
 import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
 import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
 function DateInputRender(props, ref) {
@@ -68,7 +68,8 @@ function DateInputRender(props, ref) {
       endAddon,
       isInvalid,
       isDisabled,
-      startAddon
+      startAddon,
+      variant
     },
     slotProps?.group
   );
@@ -93,7 +94,7 @@ function DateInputRender(props, ref) {
   );
   return /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
     /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
-    /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)) }) }),
+    /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)) }) }),
     /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
     /* @__PURE__ */ jsx(FieldError, { ...errorProps })
   ] });

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

@@ -0,0 +1,2 @@
+import type { FieldInputGroupProps } from './index';
+export declare const FieldContentGroup: import("react").ForwardRefExoticComponent<Omit<FieldInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { isNotNil, 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
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+FieldContentGroup.displayName = "FieldContentGroup";
+export {
+  FieldContentGroup
+};

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

@@ -0,0 +1,26 @@
+const base = "kbq-fieldcontentgroup-d85be3";
+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 invalid = "kbq-fieldcontentgroup-invalid-e4973b";
+const disabled = "kbq-fieldcontentgroup-disabled-54827b";
+const s = {
+  base,
+  hasStartAddon,
+  hasEndAddon,
+  transparent,
+  filled,
+  invalid,
+  disabled
+};
+export {
+  base,
+  s as default,
+  disabled,
+  filled,
+  hasEndAddon,
+  hasStartAddon,
+  invalid,
+  transparent
+};

package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroupContext.d.ts

@@ -0,0 +1,9 @@
+export type FieldContentGroupContextProps = {
+    isDisabled?: boolean;
+    hasValue?: boolean;
+    isHovered?: boolean;
+    isFocusWithin?: boolean;
+    isInvalid?: boolean;
+};
+export declare const FieldContentGroupContext: import("react").Context<FieldContentGroupContextProps>;
+export declare const useFieldInputGroup: () => FieldContentGroupContextProps;

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

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+const FieldContentGroupContext = createContext({});
+const useFieldInputGroup = () => useContext(FieldContentGroupContext);
+export {
+  FieldContentGroupContext,
+  useFieldInputGroup
+};

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

@@ -0,0 +1,3 @@
+export * from './FieldContentGroup';
+export * from './FieldContentGroupContext';
+export * from './types';

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import type { FieldAddonProps } from '../FieldAddon';
+export declare const fieldInputGroupPropVariant: readonly ["filled", "transparent"];
+export type FieldInputGroupPropVariant = (typeof fieldInputGroupPropVariant)[number];
+export type FieldInputGroupProps = ExtendableComponentPropsWithRef<{
+    /** The content of the component. */
+    children?: ReactNode;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /**
+     * The variant to use.
+     * @default 'filled'
+     */
+    variant?: FieldInputGroupPropVariant;
+    /** Whether the input is disabled. */
+    isDisabled?: boolean;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Whether the input value is invalid. */
+    isInvalid?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        startAddon?: FieldAddonProps;
+        endAddon?: FieldAddonProps;
+    };
+}, 'div'>;

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

@@ -5,5 +5,5 @@ export * from './FieldLabel';
 export * from './FieldAddon';
 export * from './FieldCaption';
 export * from './FieldError';
-export * from './FieldInputGroup';
+export * from './FieldContentGroup';
 export * from './FieldInputDate';

package/dist/components/Input/Input.js

@@ -6,7 +6,7 @@ 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";
+import { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
 import { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
 import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
 import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
@@ -95,6 +95,7 @@ const Input = forwardRef((props, ref) => {
     const groupProps = mergeProps(
       {
         endAddon,
+        variant,
         isInvalid: isInvalid2,
         isDisabled: isDisabled2,
         startAddon
@@ -105,7 +106,7 @@ const Input = forwardRef((props, ref) => {
     const errorProps = mergeProps({ isInvalid: isInvalid2, children: errorMessage }, slotProps?.errorMessage);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
-      /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
+      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
       /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
       /* @__PURE__ */ jsx(FieldError, { ...errorProps })
     ] });

package/dist/components/InputNumber/InputNumber.js

@@ -7,7 +7,7 @@ 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 { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
 import { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
 import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
 import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
@@ -103,6 +103,7 @@ const InputNumber = forwardRef(
             /* @__PURE__ */ jsx(InputNumberCounterControls, {})
           ] }),
           isInvalid: isInvalid2,
+          variant,
           startAddon,
           isDisabled: isDisabled2
         },
@@ -110,7 +111,7 @@ const InputNumber = forwardRef(
       );
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
-        /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
+        /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
         /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
         /* @__PURE__ */ jsx(FieldError, { ...errorProps })
       ] });

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "@koobiq/react-core";
 import { IconChevronUpS16, IconChevronDownS16 } from "@koobiq/react-icons";
 import s from "./InputNumberCounterControls.module.css.js";
-import { useFieldInputGroup } from "../../FieldComponents/FieldInputGroup/FieldInputGroupContext.js";
+import { useFieldInputGroup } from "../../FieldComponents/FieldContentGroup/FieldContentGroupContext.js";
 import { IconButton } from "../../IconButton/IconButton.js";
 const InputNumberCounterControls = () => {
   const { isInvalid } = useFieldInputGroup();

package/dist/components/List/components/ListOption/ListOption.js

@@ -9,14 +9,13 @@ const { listItem } = utilClasses;
 function ListOption({ item, state }) {
   const { href, className, style } = item.props;
   const ref = useRef(null);
-  const {
-    optionProps,
-    isSelected: selected,
-    isDisabled: disabled,
-    isFocusVisible: focusVisible
-  } = useOption({ key: item.key }, state, ref);
-  const { hoverProps, isHovered: hovered } = useHover({ isDisabled: disabled });
-  const { isPressed: pressed, pressProps } = usePress({ isDisabled: disabled });
+  const { optionProps, isSelected, isDisabled, isFocusVisible } = useOption(
+    { key: item.key },
+    state,
+    ref
+  );
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const { isPressed, pressProps } = usePress({ isDisabled });
   const Tag = href ? "a" : "li";
   return /* @__PURE__ */ jsx(
     Tag,
@@ -25,11 +24,11 @@ function ListOption({ item, state }) {
       className: clsx(listItem, textVariant["text-normal"], className),
       style,
       ref,
-      "data-hovered": hovered,
-      "data-pressed": pressed,
-      "data-disabled": disabled,
-      "data-selected": selected,
-      "data-focus-visible": focusVisible,
+      "data-hovered": isHovered,
+      "data-pressed": isPressed,
+      "data-disabled": isDisabled,
+      "data-selected": isSelected,
+      "data-focus-visible": isFocusVisible,
       children: item.rendered
     }
   );

package/dist/components/Select/Select.js

@@ -10,7 +10,7 @@ import { FieldSelect } from "../FieldComponents/FieldSelect/FieldSelect.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 { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
 import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
 import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
 import { Item } from "../Collections/Item.js";
@@ -122,8 +122,8 @@ function SelectRender(props, ref) {
   const groupProps = mergeProps(
     {
       slotProps: {
-        end: { className: s.addon },
-        start: { className: s.addon }
+        endAddon: { className: s.addon },
+        startAddon: { className: s.addon }
       },
       startAddon,
       endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -187,7 +187,7 @@ function SelectRender(props, ref) {
           isDisabled
         }
       ),
-      /* @__PURE__ */ jsx(FieldInputGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state?.selectedItem) }) }),
+      /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldSelect, { ...controlProps, children: renderValue(state?.selectedItem) }) }),
       /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
       /* @__PURE__ */ jsx(FieldError, { ...errorProps })
     ] }),

package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js

@@ -5,6 +5,7 @@ import { useTextareaContext } from "@koobiq/react-primitives";
 import s from "../../Textarea.module.css.js";
 import { useTextareaAutosize } from "../../utils/useTextareaAutosize.js";
 import { FieldLabel } from "../../../FieldComponents/FieldLabel/FieldLabel.js";
+import { FieldContentGroup } from "../../../FieldComponents/FieldContentGroup/FieldContentGroup.js";
 import { FieldInput } from "../../../FieldComponents/FieldInput/FieldInput.js";
 import { FieldCaption } from "../../../FieldComponents/FieldCaption/FieldCaption.js";
 import { FieldError } from "../../../FieldComponents/FieldError/FieldError.js";
@@ -44,13 +45,18 @@ const TextareaContextConsumer = forwardRef((props, ref) => {
     { isInvalid, children: errorMessage },
     slotProps?.errorMessage
   );
+  const groupProps = {
+    variant,
+    isInvalid,
+    isDisabled
+  };
   const labelProps = mergeProps(
     { isHidden: isLabelHidden, children: label, isRequired },
     slotProps?.label
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
-    /* @__PURE__ */ jsx(FieldInput, { as: "textarea", ...textareaProps }),
+    /* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { as: "textarea", ...textareaProps }) }),
     /* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
     /* @__PURE__ */ jsx(FieldError, { ...errorProps })
   ] });

package/dist/components/TimePicker/TimePicker.js

@@ -6,7 +6,7 @@ import { useTimeFieldState, removeDataAttributes, useTimeField } from "@koobiq/r
 import s from "./TimePicker.module.css.js";
 import { FieldControl } from "../FieldComponents/FieldControl/FieldControl.js";
 import { FieldLabel } from "../FieldComponents/FieldLabel/FieldLabel.js";
-import { FieldInputGroup } from "../FieldComponents/FieldInputGroup/FieldInputGroup.js";
+import { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
 import { FieldInputDate } from "../FieldComponents/FieldInputDate/FieldInputDate.js";
 import { DateSegment } from "../DateSegment/DateSegment.js";
 import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
@@ -61,6 +61,7 @@ function TimePickerRender(props, ref) {
         startAddon,
         /* @__PURE__ */ jsx(IconClock16, {})
       ] }),
+      variant,
       isInvalid,
       isDisabled,
       endAddon
@@ -94,10 +95,10 @@ function TimePickerRender(props, ref) {
   return /* @__PURE__ */ jsxs(FieldControl, { ...rootProps, children: [
     /* @__PURE__ */ jsx(FieldLabel, { ...labelProps }),
     /* @__PURE__ */ jsx(
-      FieldInputGroup,
+      FieldContentGroup,
       {
         ...groupProps,
-        slotProps: { start: { className: s.startAddon } },
+        slotProps: { startAddon: { className: s.startAddon } },
         children: /* @__PURE__ */ jsx(FieldInputDate, { ...controlProps, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegment, { segment, state }, i)) })
       }
     ),

package/dist/style.css

@@ -1962,23 +1962,80 @@
   text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
   position: relative;
 }
-.kbq-fieldinputgroup-5d33da {
+.kbq-fieldcontentgroup-d85be3 {
+  --field-content-border-color: ;
+  --field-content-outline-width: 2px;
+  --field-content-outline-color: transparent;
+  --field-content-border-radius: var(--kbq-size-s);
+  --field-content-border-width: var(--kbq-size-border-width);
   --field-input-padding-inline-start: var(--field-control-start-addon-inline-size, var(--kbq-size-m));
   --field-input-padding-inline-end: var(--field-control-end-addon-inline-size, var(--kbq-size-m));
   --field-input-padding-block-start: var(--kbq-size-xs);
   --field-input-padding-block-end: var(--kbq-size-xs);
+  border-radius: var(--field-content-border-radius);
   inline-size: 100%;
   display: flex;
   position: relative;
 }
 
-.kbq-fieldinputgroup-hasStartAddon-5f5b14 {
+.kbq-fieldcontentgroup-d85be3:before {
+  content: "";
+  pointer-events: none;
+  border-radius: inherit;
+  z-index: var(--kbq-layer-absolute);
+  transition: border-color var(--kbq-transition-default);
+  border: var(--field-content-border-width) solid var(--field-content-border-color, transparent);
+  position: absolute;
+  inset: 0;
+}
+
+.kbq-fieldcontentgroup-d85be3:after {
+  content: "";
+  pointer-events: none;
+  border-radius: inherit;
+  z-index: var(--kbq-layer-absolute);
+  transition: outline-color var(--kbq-transition-default);
+  outline-offset: calc(-1 * var(--field-content-outline-width) / 2);
+  outline: var(--field-content-outline-width) solid var(--field-content-outline-color);
+  position: absolute;
+  inset: 0;
+}
+
+.kbq-fieldcontentgroup-hasStartAddon-62fb80 {
   --field-control-start-addon-inline-size: 36px;
 }
 
-.kbq-fieldinputgroup-hasEndAddon-7781d1 {
+.kbq-fieldcontentgroup-hasEndAddon-e8c20a {
   --field-control-end-addon-inline-size: 36px;
 }
+
+.kbq-fieldcontentgroup-transparent-ac42b6 {
+  --field-content-border-color: transparent;
+}
+
+.kbq-fieldcontentgroup-filled-37bb93 {
+  --field-content-border-color: var(--kbq-line-contrast-fade);
+}
+
+.kbq-fieldcontentgroup-filled-37bb93:focus-within {
+  --field-content-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+.kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-invalid-e4973b) {
+  --field-content-border-color: var(--kbq-line-error);
+}
+
+.kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-invalid-e4973b):focus-within {
+  --field-content-outline-color: var(--field-content-border-color);
+}
+
+.kbq-fieldcontentgroup-transparent-ac42b6:where(.kbq-fieldcontentgroup-invalid-e4973b) {
+  --field-content-border-color: transparent;
+}
+
+.kbq-fieldcontentgroup-filled-37bb93:where(.kbq-fieldcontentgroup-disabled-54827b) {
+  --field-content-border-color: var(--kbq-states-line-disabled);
+}
 .kbq-fieldaddon-3388d3 {
   --field-addon-color: var(--kbq-icon-contrast-fade);
   z-index: 1;
@@ -2010,10 +2067,15 @@
 .kbq-fieldinput-77b90b {
   --field-input-color: ;
   --field-input-bg-color: ;
-  --field-input-border-color: ;
-  --field-input-outline-color: ;
   --field-input-placeholder-color: ;
-  --field-input-outline-width: var(--kbq-size-3xs);
+  box-sizing: border-box;
+  border-radius: inherit;
+  inline-size: 100%;
+  color: var(--field-input-color);
+  background: var(--field-input-bg-color);
+  padding-block: var(--field-input-padding-block-start) var(--field-input-padding-block-end);
+  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);
   font-size: var(--kbq-typography-text-normal-font-size);
   font-weight: var(--kbq-typography-text-normal-font-weight);
   line-height: var(--kbq-typography-text-normal-line-height);
@@ -2023,17 +2085,8 @@
   font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
   letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
-  box-sizing: border-box;
-  border-radius: var(--kbq-size-s);
-  background: var(--field-input-bg-color);
-  inline-size: 100%;
-  color: var(--field-input-color);
-  outline: var(--field-input-outline-width) solid transparent;
-  outline-offset: -1px;
-  padding-block: var(--field-input-padding-block-start) var(--field-input-padding-block-end);
-  padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
-  border: 1px solid var(--field-input-border-color);
-  transition: color var(--kbq-transition-default), outline-color var(--kbq-transition-default), background-color var(--kbq-transition-default), border-color var(--kbq-transition-default);
+  border: none;
+  outline: none;
 }
 
 .kbq-fieldinput-77b90b:-webkit-autofill {
@@ -2045,10 +2098,6 @@
   color: var(--field-input-placeholder-color);
 }
 
-.kbq-fieldinput-77b90b:focus {
-  outline-color: var(--field-input-outline-color);
-}
-
 .kbq-fieldinput-77b90b:where(input) {
   block-size: var(--kbq-size-3xl);
 }
@@ -2060,32 +2109,24 @@
 
 .kbq-fieldinput-transparent-ed7263 {
   --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-border-color: transparent;
-  --field-input-outline-color: transparent;
   --field-input-bg-color: transparent;
   --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
 }
 
 .kbq-fieldinput-filled-abb632 {
   --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-border-color: var(--kbq-line-contrast-fade);
-  --field-input-outline-color: var(--kbq-states-line-focus-theme);
   --field-input-bg-color: var(--kbq-background-bg);
   --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
 }
 
 .kbq-fieldinput-filled-abb632:where(.kbq-fieldinput-invalid-2af82b) {
   --field-input-color: var(--kbq-foreground-error);
-  --field-input-border-color: var(--kbq-line-error);
-  --field-input-outline-color: var(--kbq-states-line-focus-error);
   --field-input-bg-color: var(--kbq-states-background-error-less);
   --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
 }
 
 .kbq-fieldinput-transparent-ed7263:where(.kbq-fieldinput-invalid-2af82b) {
   --field-input-color: var(--kbq-foreground-error);
-  --field-input-border-color: transparent;
-  --field-input-outline-color: transparent;
   --field-input-bg-color: transparent;
   --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
 }
@@ -2096,7 +2137,6 @@
 
 .kbq-fieldinput-filled-abb632:where(.kbq-fieldinput-disabled-59285a) {
   --field-input-color: var(--kbq-states-foreground-disabled);
-  --field-input-border-color: var(--kbq-states-line-disabled);
   --field-input-bg-color: var(--kbq-states-background-disabled);
 }
 
@@ -3084,38 +3124,19 @@
   transform: translateY(-8px);
 }
 .kbq-fieldselect-0f0f5e {
-  --field-input-outline-width: var(--kbq-size-3xs);
   --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-border-color: var(--kbq-line-contrast-fade);
-  --field-input-outline-color: var(--kbq-states-line-focus-theme);
   --field-input-bg-color: var(--kbq-background-bg);
   --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
   cursor: pointer;
-  outline-offset: -1px;
   box-sizing: border-box;
-  border-radius: var(--kbq-size-s);
-  block-size: 32px;
+  border-radius: inherit;
+  min-block-size: 32px;
   inline-size: 100%;
   color: var(--field-input-color);
   background: var(--field-input-bg-color);
-  border: 1px solid var(--field-input-border-color);
-  outline: var(--field-input-outline-width) solid transparent;
-  padding-block: var(--field-input-padding-block-start) var(--field-input-padding-block-end);
+  padding-block: 0;
   padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
-  transition: color var(--kbq-transition-default), outline-color var(--kbq-transition-default), background-color var(--kbq-transition-default), border-color var(--kbq-transition-default);
-  align-items: center;
-  display: flex;
-}
-
-.kbq-fieldselect-0f0f5e:focus {
-  outline-color: var(--field-input-outline-color);
-}
-
-.kbq-fieldselect-content-c36142 {
-  white-space: nowrap;
-  align-items: center;
-  gap: var(--kbq-size-s);
-  text-overflow: ellipsis;
+  transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
   font-size: var(--kbq-typography-text-normal-font-size);
   font-weight: var(--kbq-typography-text-normal-font-weight);
   line-height: var(--kbq-typography-text-normal-line-height);
@@ -3125,21 +3146,29 @@
   font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
   letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  border: none;
+  outline: none;
+  align-items: center;
+  display: flex;
+}
+
+.kbq-fieldselect-content-c36142 {
+  white-space: nowrap;
+  align-items: center;
+  gap: var(--kbq-size-s);
+  text-overflow: ellipsis;
   display: flex;
   overflow: hidden;
 }
 
 .kbq-fieldselect-invalid-db8152 {
   --field-input-color: var(--kbq-foreground-error);
-  --field-input-border-color: var(--kbq-line-error);
-  --field-input-outline-color: var(--kbq-states-line-focus-error);
   --field-input-bg-color: var(--kbq-states-background-error-less);
   --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
 }
 
 .kbq-fieldselect-disabled-f0efd4 {
   --field-input-color: var(--kbq-states-foreground-disabled);
-  --field-input-border-color: var(--kbq-states-line-disabled);
   --field-input-bg-color: var(--kbq-states-background-disabled);
   cursor: not-allowed;
 }
@@ -3356,7 +3385,7 @@
   overflow: hidden;
 }
 .kbq-taggroup-20136b {
-  gap: var(--kbq-size-s);
+  gap: var(--kbq-size-xxs);
   flex-wrap: wrap;
   display: flex;
 }
@@ -3782,24 +3811,19 @@
   min-inline-size: 150px;
 }
 .kbq-fieldinputdate-a54331 {
-  --field-input-outline-width: var(--kbq-size-3xs);
   --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-border-color: var(--kbq-line-contrast-fade);
-  --field-input-outline-color: var(--kbq-states-line-focus-theme);
   --field-input-bg-color: var(--kbq-background-bg);
   --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
   cursor: pointer;
-  outline-offset: -1px;
   box-sizing: border-box;
   inline-size: 100%;
   block-size: var(--kbq-size-3xl);
-  border-radius: var(--kbq-size-s);
+  border-radius: inherit;
   color: var(--field-input-color);
   background: var(--field-input-bg-color);
-  border: 1px solid var(--field-input-border-color);
-  outline: var(--field-input-outline-width) solid transparent;
   padding-block: var(--field-input-padding-block-start) var(--field-input-padding-block-end);
   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);
   font-size: var(--kbq-typography-text-normal-font-size);
   font-weight: var(--kbq-typography-text-normal-font-weight);
   line-height: var(--kbq-typography-text-normal-line-height);
@@ -3809,43 +3833,30 @@
   font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
   letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
   text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
-  transition: color var(--kbq-transition-default), outline-color var(--kbq-transition-default), background-color var(--kbq-transition-default), border-color var(--kbq-transition-default);
   align-items: center;
   display: flex;
 }
 
-.kbq-fieldinputdate-a54331:focus-within {
-  outline-color: var(--field-input-outline-color);
-}
-
 .kbq-fieldinputdate-transparent-04d912 {
   --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-border-color: transparent;
-  --field-input-outline-color: transparent;
   --field-input-bg-color: transparent;
   --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
 }
 
 .kbq-fieldinputdate-filled-02db7d {
   --field-input-color: var(--kbq-foreground-contrast);
-  --field-input-border-color: var(--kbq-line-contrast-fade);
-  --field-input-outline-color: var(--kbq-states-line-focus-theme);
   --field-input-bg-color: var(--kbq-background-bg);
   --field-input-placeholder-color: var(--kbq-foreground-contrast-tertiary);
 }
 
 .kbq-fieldinputdate-filled-02db7d:where(.kbq-fieldinputdate-invalid-d764c6) {
   --field-input-color: var(--kbq-foreground-error);
-  --field-input-border-color: var(--kbq-line-error);
-  --field-input-outline-color: var(--kbq-states-line-focus-error);
   --field-input-bg-color: var(--kbq-states-background-error-less);
   --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
 }
 
 .kbq-fieldinputdate-transparent-04d912:where(.kbq-fieldinputdate-invalid-d764c6) {
   --field-input-color: var(--kbq-foreground-error);
-  --field-input-border-color: transparent;
-  --field-input-outline-color: transparent;
   --field-input-bg-color: transparent;
   --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
 }
@@ -3856,7 +3867,6 @@
 
 .kbq-fieldinputdate-filled-02db7d:where(.kbq-fieldinputdate-disabled-692832) {
   --field-input-color: var(--kbq-states-foreground-disabled);
-  --field-input-border-color: var(--kbq-states-line-disabled);
   --field-input-bg-color: var(--kbq-states-background-disabled);
 }
 

package/package.json

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

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

@@ -1,17 +0,0 @@
-import { type ReactNode } from 'react';
-import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
-import { type FieldAddonProps } from '../FieldAddon';
-export type FieldInputGroupProps = ExtendableComponentPropsWithRef<{
-    children?: ReactNode;
-    startAddon?: ReactNode;
-    endAddon?: ReactNode;
-    isDisabled?: boolean;
-    className?: string;
-    isInvalid?: boolean;
-    /** The props used for each slot inside. */
-    slotProps?: {
-        start?: FieldAddonProps;
-        end?: FieldAddonProps;
-    };
-}, 'div'>;
-export declare const FieldInputGroup: import("react").ForwardRefExoticComponent<Omit<FieldInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroup.js

@@ -1,65 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { isNotNil, clsx } from "@koobiq/react-core";
-import { useInputContext, Group } from "@koobiq/react-primitives";
-import s from "./FieldInputGroup.module.css.js";
-import { FieldInputGroupContext } from "./FieldInputGroupContext.js";
-import { FieldAddon } from "../FieldAddon/FieldAddon.js";
-const FieldInputGroup = forwardRef(({ 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,
-        hasStartAddon && s.hasStartAddon,
-        hasEndAddon && s.hasEndAddon,
-        className
-      ),
-      ...other,
-      ref,
-      children: ({ isHovered, isFocusWithin, isDisabled, isInvalid }) => /* @__PURE__ */ jsxs(
-        FieldInputGroupContext.Provider,
-        {
-          value: {
-            isDisabled,
-            isHovered,
-            hasValue,
-            isFocusWithin,
-            isInvalid
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              FieldAddon,
-              {
-                placement: "start",
-                isInvalid,
-                isDisabled,
-                ...slotProps?.start,
-                children: startAddon
-              }
-            ),
-            children,
-            /* @__PURE__ */ jsx(
-              FieldAddon,
-              {
-                placement: "end",
-                isInvalid,
-                isDisabled,
-                ...slotProps?.end,
-                children: endAddon
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-});
-FieldInputGroup.displayName = "FieldInputGroup";
-export {
-  FieldInputGroup
-};

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

@@ -1,14 +0,0 @@
-const base = "kbq-fieldinputgroup-5d33da";
-const hasStartAddon = "kbq-fieldinputgroup-hasStartAddon-5f5b14";
-const hasEndAddon = "kbq-fieldinputgroup-hasEndAddon-7781d1";
-const s = {
-  base,
-  hasStartAddon,
-  hasEndAddon
-};
-export {
-  base,
-  s as default,
-  hasEndAddon,
-  hasStartAddon
-};

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroupContext.d.ts

@@ -1,9 +0,0 @@
-export type FieldInputGroupContextProps = {
-    isDisabled?: boolean;
-    hasValue?: boolean;
-    isHovered?: boolean;
-    isFocusWithin?: boolean;
-    isInvalid?: boolean;
-};
-export declare const FieldInputGroupContext: import("react").Context<FieldInputGroupContextProps>;
-export declare const useFieldInputGroup: () => FieldInputGroupContextProps;

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroupContext.js

@@ -1,7 +0,0 @@
-import { createContext, useContext } from "react";
-const FieldInputGroupContext = createContext({});
-const useFieldInputGroup = () => useContext(FieldInputGroupContext);
-export {
-  FieldInputGroupContext,
-  useFieldInputGroup
-};

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

@@ -1,2 +0,0 @@
-export * from './FieldInputGroup';
-export * from './FieldInputGroupContext';