@koobiq/react-components 0.2.0 → 0.2.2

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/TagGroup/TagGroup.js

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
 import { useListState, useTagGroup } from "@koobiq/react-primitives";
 import s from "./TagGroup.module.css.js";
-import { TagInner } from "./components/TagInner/TagInner.js";
+import { Tag } from "./components/Tag/Tag.js";
 function TagGroupRender(props, ref) {
   const { variant = "theme-fade", style, className, slotProps } = props;
   const domRef = useDOMRef(ref);
@@ -15,7 +15,7 @@ function TagGroupRender(props, ref) {
     gridProps,
     slotProps?.root
   );
-  return /* @__PURE__ */ jsx("div", { ...rootProps, children: [...state.collection].map((item) => /* @__PURE__ */ jsx(TagInner, { item, variant, state }, item.key)) });
+  return /* @__PURE__ */ jsx("div", { ...rootProps, children: [...state.collection].map((item) => /* @__PURE__ */ jsx(Tag, { item, variant, state }, item.key)) });
 }
 const TagGroup = forwardRef(TagGroupRender);
 export {

package/dist/components/TagGroup/components/{TagInner/TagInner.d.ts → Tag/Tag.d.ts}

@@ -1,6 +1,6 @@
 import type { AriaTagProps, ListState } from '@koobiq/react-primitives';
 import type { TagGroupPropVariant } from '../../index';
-export type TagInnerProps<T> = AriaTagProps<T> & {
+type TagProps<T> = AriaTagProps<T> & {
     state: ListState<T>;
     /**
      * The variant to use.
@@ -8,4 +8,5 @@ export type TagInnerProps<T> = AriaTagProps<T> & {
      */
     variant?: TagGroupPropVariant;
 };
-export declare function TagInner<T>(props: TagInnerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Tag<T>(props: TagProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TagGroup/components/{TagInner/TagInner.js → Tag/Tag.js}

@@ -5,11 +5,11 @@ import { IconXmarkS16 } from "@koobiq/react-icons";
 import { useTag } from "@koobiq/react-primitives";
 import { utilClasses } from "../../../../styles/utility.js";
 import intlMessages from "../../intl.json.js";
-import s from "./TagInner.module.css.js";
+import s from "./Tag.module.css.js";
 import { matchVariantToCloseButton } from "./utils.js";
 import { IconButton } from "../../../IconButton/IconButton.js";
 const textNormalMedium = utilClasses.typography["text-normal-medium"];
-function TagInner(props) {
+function Tag(props) {
   const { item, state, variant = "theme-fade" } = props;
   const { slotProps, icon, className, style } = item.props;
   const ref = useRef(null);
@@ -82,5 +82,5 @@ function TagInner(props) {
   ] }) });
 }
 export {
-  TagInner
+  Tag
 };

package/dist/components/TagGroup/components/Tag/Tag.module.css.js

@@ -0,0 +1,30 @@
+const base = "kbq-tag-b509d0";
+const content = "kbq-tag-content-fe481b";
+const icon = "kbq-tag-icon-1e369b";
+const cancelIcon = "kbq-tag-cancelIcon-1ec6aa";
+const hovered = "kbq-tag-hovered-2fc42f";
+const focused = "kbq-tag-focused-033891";
+const disabled = "kbq-tag-disabled-bbd5a1";
+const s = {
+  base,
+  content,
+  icon,
+  cancelIcon,
+  "theme-fade": "kbq-tag-theme-fade-71290f",
+  "contrast-fade": "kbq-tag-contrast-fade-319aac",
+  "error-fade": "kbq-tag-error-fade-b90fd8",
+  "warning-fade": "kbq-tag-warning-fade-6decab",
+  hovered,
+  focused,
+  disabled
+};
+export {
+  base,
+  cancelIcon,
+  content,
+  s as default,
+  disabled,
+  focused,
+  hovered,
+  icon
+};

package/dist/components/TagGroup/components/Tag/index.d.ts

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

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

@@ -1 +1 @@
-export * from './TagInner';
+export * from './Tag';

package/dist/components/TimePicker/TimePicker.js

@@ -59,7 +59,7 @@ function TimePickerRender(props, ref) {
     {
       startAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
         startAddon,
-        /* @__PURE__ */ jsx(IconClock16, {})
+        /* @__PURE__ */ jsx(IconClock16, { className: s.clock })
       ] }),
       variant,
       isInvalid,

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

@@ -1,11 +1,14 @@
 const base = "kbq-timepicker-a6e9f3";
 const startAddon = "kbq-timepicker-startAddon-46c835";
+const clock = "kbq-timepicker-clock-920ed0";
 const s = {
   base,
-  startAddon
+  startAddon,
+  clock
 };
 export {
   base,
+  clock,
   s as default,
   startAddon
 };

package/dist/style.css

@@ -2018,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);
 }
 
@@ -2026,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);
 }
 
@@ -2122,7 +2122,7 @@
 
 .kbq-fieldinput-filled-abb632:where(.kbq-fieldinput-invalid-2af82b) {
   --field-input-color: var(--kbq-foreground-error);
-  --field-input-bg-color: var(--kbq-states-background-error-less);
+  --field-input-bg-color: var(--kbq-background-error-less);
   --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
 }
 
@@ -3163,7 +3163,7 @@
 
 .kbq-fieldselect-invalid-db8152 {
   --field-input-color: var(--kbq-foreground-error);
-  --field-input-bg-color: var(--kbq-states-background-error-less);
+  --field-input-bg-color: var(--kbq-background-error-less);
   --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
 }
 
@@ -3393,7 +3393,7 @@
 .kbq-taggroup-20136b [role="gridcell"] {
   display: contents;
 }
-.kbq-taginner-f9f19a {
+.kbq-tag-b509d0 {
   --tag-color: ;
   --tag-bg-color: ;
   --tag-icon-color: ;
@@ -3419,14 +3419,14 @@
   display: inline-flex;
 }
 
-.kbq-taginner-content-72ca39 {
+.kbq-tag-content-fe481b {
   white-space: nowrap;
   text-overflow: ellipsis;
   margin-inline: var(--kbq-size-3xs);
   overflow: hidden;
 }
 
-.kbq-taginner-icon-df45be {
+.kbq-tag-icon-1e369b {
   color: var(--tag-icon-color);
   flex-shrink: 0;
   justify-content: center;
@@ -3435,58 +3435,58 @@
   display: flex;
 }
 
-.kbq-taginner-cancelIcon-8a3dbe {
+.kbq-tag-cancelIcon-1ec6aa {
   justify-content: center;
   align-items: center;
   margin-inline-end: var(--kbq-size-3xs);
   display: flex;
 }
 
-.kbq-taginner-theme-fade-68b99c {
+.kbq-tag-theme-fade-71290f {
   --tag-icon-color: var(--kbq-icon-theme);
   --tag-bg-color: var(--kbq-background-theme-fade);
   --tag-color: var(--kbq-foreground-theme);
 }
 
-.kbq-taginner-contrast-fade-39d7a7 {
+.kbq-tag-contrast-fade-319aac {
   --tag-icon-color: var(--kbq-icon-contrast-fade);
   --tag-bg-color: var(--kbq-background-contrast-fade);
   --tag-color: var(--kbq-foreground-contrast);
 }
 
-.kbq-taginner-error-fade-6d7d03 {
+.kbq-tag-error-fade-b90fd8 {
   --tag-icon-color: var(--kbq-icon-error);
   --tag-bg-color: var(--kbq-background-error-fade);
   --tag-color: var(--kbq-foreground-error);
 }
 
-.kbq-taginner-warning-fade-9403c7 {
+.kbq-tag-warning-fade-6decab {
   --tag-icon-color: var(--kbq-icon-warning);
   --tag-bg-color: var(--kbq-background-warning-fade);
   --tag-color: var(--kbq-foreground-warning);
 }
 
-.kbq-taginner-theme-fade-68b99c:where(.kbq-taginner-hovered-abf199) {
+.kbq-tag-theme-fade-71290f:where(.kbq-tag-hovered-2fc42f) {
   --tag-bg-color: var(--kbq-states-background-theme-fade-hover);
 }
 
-.kbq-taginner-contrast-fade-39d7a7:where(.kbq-taginner-hovered-abf199) {
+.kbq-tag-contrast-fade-319aac:where(.kbq-tag-hovered-2fc42f) {
   --tag-bg-color: var(--kbq-states-background-contrast-fade-hover);
 }
 
-.kbq-taginner-error-fade-6d7d03:where(.kbq-taginner-hovered-abf199) {
+.kbq-tag-error-fade-b90fd8:where(.kbq-tag-hovered-2fc42f) {
   --tag-bg-color: var(--kbq-states-background-error-fade-hover);
 }
 
-.kbq-taginner-warning-fade-9403c7:where(.kbq-taginner-hovered-abf199) {
+.kbq-tag-warning-fade-6decab:where(.kbq-tag-hovered-2fc42f) {
   --tag-bg-color: var(--kbq-states-background-warning-fade-hover);
 }
 
-.kbq-taginner-focused-16f44f {
+.kbq-tag-focused-033891 {
   --tag-outline-color: var(--kbq-states-line-focus-theme);
 }
 
-.kbq-taginner-disabled-0c6073 {
+.kbq-tag-disabled-bbd5a1 {
   --tag-icon-color: ;
   --tag-bg-color: var(--kbq-states-background-disabled);
   --tag-color: var(--kbq-states-foreground-disabled);
@@ -3852,7 +3852,7 @@
 
 .kbq-fieldinputdate-filled-02db7d:where(.kbq-fieldinputdate-invalid-d764c6) {
   --field-input-color: var(--kbq-foreground-error);
-  --field-input-bg-color: var(--kbq-states-background-error-less);
+  --field-input-bg-color: var(--kbq-background-error-less);
   --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
 }
 
@@ -3906,6 +3906,10 @@
 .kbq-timepicker-startAddon-46c835 {
   pointer-events: none;
 }
+
+.kbq-timepicker-startAddon-46c835 > :not(.kbq-timepicker-clock-920ed0) {
+  pointer-events: all;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

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

package/dist/components/TagGroup/components/TagInner/TagInner.module.css.js

@@ -1,30 +0,0 @@
-const base = "kbq-taginner-f9f19a";
-const content = "kbq-taginner-content-72ca39";
-const icon = "kbq-taginner-icon-df45be";
-const cancelIcon = "kbq-taginner-cancelIcon-8a3dbe";
-const hovered = "kbq-taginner-hovered-abf199";
-const focused = "kbq-taginner-focused-16f44f";
-const disabled = "kbq-taginner-disabled-0c6073";
-const s = {
-  base,
-  content,
-  icon,
-  cancelIcon,
-  "theme-fade": "kbq-taginner-theme-fade-68b99c",
-  "contrast-fade": "kbq-taginner-contrast-fade-39d7a7",
-  "error-fade": "kbq-taginner-error-fade-6d7d03",
-  "warning-fade": "kbq-taginner-warning-fade-9403c7",
-  hovered,
-  focused,
-  disabled
-};
-export {
-  base,
-  cancelIcon,
-  content,
-  s as default,
-  disabled,
-  focused,
-  hovered,
-  icon
-};

package/dist/components/TagGroup/components/TagInner/index.d.ts

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