@koobiq/react-components 0.2.1 → 0.2.2

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

@@ -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.1",
+  "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/logger": "0.2.1",
-    "@koobiq/react-core": "0.2.1",
-    "@koobiq/react-icons": "0.2.1",
-    "@koobiq/react-primitives": "0.2.1"
+    "@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';