@koobiq/react-components 0.3.0 → 0.4.0

package/dist/style.css

@@ -1334,6 +1334,18 @@
   --list-item-bg-color: var(--kbq-background-theme-less);
 }
 
+.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:where([data-selected="true"]) {
+  --list-item-bg-color: var(--kbq-background-contrast-less);
+}
+
+.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:where([data-selected="true"][data-hovered="true"]) {
+  --list-item-bg-color: var(--kbq-states-background-contrast-less-hover);
+}
+
+.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:where([data-selected="true"][data-pressed="true"]) {
+  --list-item-bg-color: var(--kbq-states-background-contrast-less-active);
+}
+
 .kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]):has( + :is([data-selected="true"], [data-focus-visible="true"])) {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
@@ -3060,6 +3072,11 @@
 .kbq-list-label-e4431c {
   padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
+
+.kbq-list-divider-fd5123 {
+  margin-inline: calc(var(--kbq-size-xxs) * -1);
+  inline-size: initial;
+}
 .kbq-listsection-d94a57 {
   margin: 0;
   padding: 0;
@@ -3073,6 +3090,47 @@
   box-sizing: border-box;
   padding: var(--kbq-size-s) var(--kbq-size-m);
 }
+.kbq-divider-16da20 {
+  border-style: solid;
+  border-color: var(--kbq-line-contrast-less);
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.kbq-divider-block-72e3e3 {
+  display: block;
+}
+
+.kbq-divider-inlineBlock-0f06d1 {
+  display: inline-block;
+}
+
+.kbq-divider-inline-2d4752 {
+  display: inline;
+}
+
+.kbq-divider-vertical-a4e613 {
+  --divider-paddings: 0 var(--kbq-size-xxs);
+  border-width: 0 1px 0 0;
+  block-size: 100%;
+  inline-size: 0;
+}
+
+.kbq-divider-horizontal-22c78d {
+  --divider-paddings: var(--kbq-size-xxs) 0;
+  border-width: 0 0 1px;
+  block-size: 0;
+  inline-size: 100%;
+}
+
+.kbq-divider-hasPaddings-d8f601 {
+  margin: var(--divider-paddings);
+}
+
+.kbq-divider-flexItem-af9975 {
+  align-self: stretch;
+  block-size: auto;
+}
 .kbq-listitemtext-27bac6 {
   gap: var(--kbq-size-3xs);
   flex-direction: column;
@@ -3108,10 +3166,16 @@
   pointer-events: all;
 }
 
-.kbq-select-popover-79fc05 {
-  border-radius: var(--kbq-size-s);
-  opacity: 0;
-  transform: translateY(-8px);
+.kbq-select-chevron-0b4fa3 {
+  inline-size: var(--kbq-size-xxl);
+  block-size: var(--kbq-size-xxl);
+  margin-inline-end: calc(-1 * var(--kbq-size-s));
+  padding-inline-end: var(--kbq-size-xxs);
+  display: inline-flex;
+}
+
+.kbq-select-chevron-0b4fa3 > svg {
+  margin: auto;
 }
 
 .kbq-select-list-8ffac0 {
@@ -3119,6 +3183,12 @@
   padding: var(--kbq-size-xxs);
 }
 
+.kbq-select-popover-79fc05 {
+  border-radius: var(--kbq-size-s);
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
 .kbq-select-popover-79fc05[data-transition="entering"], .kbq-select-popover-79fc05[data-transition="entered"] {
   opacity: 1;
   transform: translateY(0);
@@ -3128,6 +3198,14 @@
   opacity: 0;
   transform: translateY(-8px);
 }
+
+.kbq-select-clearButton-8031a1 {
+  margin-inline-end: var(--kbq-size-xxs);
+}
+
+.kbq-select-clearable-2f5092 {
+  --field-input-padding-inline-end: calc(var(--field-control-end-addon-inline-size)  + 28px);
+}
 .kbq-fieldselect-0f0f5e {
   --field-input-color: var(--kbq-foreground-contrast);
   --field-input-bg-color: var(--kbq-background-bg);
@@ -3194,46 +3272,156 @@
   block-size: 0;
   overflow: hidden;
 }
-.kbq-divider-16da20 {
-  border-style: solid;
-  border-color: var(--kbq-line-contrast-less);
-  flex-shrink: 0;
-  margin: 0;
+.kbq-selectlist-label-4b49f4 {
+  padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
 
-.kbq-divider-block-72e3e3 {
-  display: block;
+.kbq-selectlist-divider-7c167f {
+  margin-inline: calc(var(--kbq-size-xxs) * -1);
+  inline-size: initial;
+}
+.kbq-taggroup-container-c4d544 {
+  inline-size: calc(100% + var(--kbq-size-s));
+  margin-inline-start: calc(-1 * var(--kbq-size-s));
+  display: flex;
 }
 
-.kbq-divider-inlineBlock-0f06d1 {
-  display: inline-block;
+.kbq-taggroup-hasStartAddon-40d1f9 {
+  inline-size: 100%;
+  margin-inline-start: unset;
 }
 
-.kbq-divider-inline-2d4752 {
-  display: inline;
+.kbq-taggroup-8253a5 {
+  gap: var(--kbq-size-xxs);
+  inline-size: 100%;
+  padding-block: var(--kbq-size-xxs);
+  flex-wrap: wrap;
+  display: flex;
+  overflow: hidden;
 }
 
-.kbq-divider-vertical-a4e613 {
-  --divider-paddings: 0 var(--kbq-size-xxs);
-  border-width: 0 1px 0 0;
-  block-size: 100%;
-  inline-size: 0;
+.kbq-taggroup-8253a5[data-limit-tags="responsive"] {
+  gap: unset;
+  flex-wrap: nowrap;
 }
 
-.kbq-divider-horizontal-22c78d {
-  --divider-paddings: var(--kbq-size-xxs) 0;
-  border-width: 0 0 1px;
-  block-size: 0;
-  inline-size: 100%;
+.kbq-taggroup-8253a5[data-limit-tags="responsive"] .kbq-taggroup-tag-b9306f {
+  margin-inline-end: var(--kbq-size-xxs);
 }
 
-.kbq-divider-hasPaddings-d8f601 {
-  margin: var(--divider-paddings);
+.kbq-taggroup-more-b2d6b9 {
+  text-align: end;
+  white-space: nowrap;
+  box-sizing: border-box;
+  padding: var(--kbq-size-3xs) calc(var(--kbq-size-xs)  + var(--kbq-size-xxs)) var(--kbq-size-3xs) var(--kbq-size-xxs);
+  flex: 0 0 60px;
+  align-self: center;
 }
 
-.kbq-divider-flexItem-af9975 {
-  align-self: stretch;
-  block-size: auto;
+.kbq-taggroup-hidden-eadb46 {
+  visibility: hidden;
+  position: absolute;
+  inset-inline-start: -300vw;
+}
+.kbq-tag-b509d0 {
+  --tag-color: ;
+  --tag-bg-color: ;
+  --tag-icon-color: ;
+  --tag-outline-color: transparent;
+  --tag-outline-width: var(--kbq-size-3xs);
+  cursor: default;
+  vertical-align: top;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  color: var(--tag-color);
+  align-items: center;
+  gap: var(--kbq-size-3xs);
+  block-size: var(--kbq-size-xxl);
+  border-radius: var(--kbq-size-xxs);
+  padding-inline: var(--kbq-size-xxs);
+  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;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.kbq-tag-content-fe481b {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-inline-size: 100%;
+  margin-inline: var(--kbq-size-3xs);
+  overflow: hidden;
+}
+
+.kbq-tag-icon-1e369b {
+  color: var(--tag-icon-color);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  margin-inline-start: var(--kbq-size-3xs);
+  display: flex;
+}
+
+.kbq-tag-cancelIcon-1ec6aa {
+  justify-content: center;
+  align-items: center;
+  margin-inline-end: var(--kbq-size-3xs);
+  display: flex;
+}
+
+.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-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-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-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-tag-theme-fade-71290f:where(.kbq-tag-hovered-2fc42f) {
+  --tag-bg-color: var(--kbq-states-background-theme-fade-hover);
+}
+
+.kbq-tag-contrast-fade-319aac:where(.kbq-tag-hovered-2fc42f) {
+  --tag-bg-color: var(--kbq-states-background-contrast-fade-hover);
+}
+
+.kbq-tag-error-fade-b90fd8:where(.kbq-tag-hovered-2fc42f) {
+  --tag-bg-color: var(--kbq-states-background-error-fade-hover);
+}
+
+.kbq-tag-warning-fade-6decab:where(.kbq-tag-hovered-2fc42f) {
+  --tag-bg-color: var(--kbq-states-background-warning-fade-hover);
+}
+
+.kbq-tag-focused-033891 {
+  --tag-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+.kbq-tag-disabled-bbd5a1 {
+  --tag-icon-color: ;
+  --tag-bg-color: var(--kbq-states-background-disabled);
+  --tag-color: var(--kbq-states-foreground-disabled);
+  --tag-outline-color: none;
+  cursor: not-allowed;
 }
 .kbq-menu-popover-e1857c {
   border-radius: var(--kbq-size-s);
@@ -3411,106 +3599,6 @@
 .kbq-taggroup-20136b [role="gridcell"] {
   display: contents;
 }
-.kbq-tag-b509d0 {
-  --tag-color: ;
-  --tag-bg-color: ;
-  --tag-icon-color: ;
-  --tag-outline-color: transparent;
-  --tag-outline-width: var(--kbq-size-3xs);
-  cursor: default;
-  vertical-align: top;
-  box-sizing: border-box;
-  max-inline-size: 100%;
-  color: var(--tag-color);
-  align-items: center;
-  gap: var(--kbq-size-3xs);
-  block-size: var(--kbq-size-xxl);
-  border-radius: var(--kbq-size-xxs);
-  padding-inline: var(--kbq-size-xxs);
-  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;
-  text-decoration: none;
-  display: inline-flex;
-}
-
-.kbq-tag-content-fe481b {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-inline-size: 100%;
-  margin-inline: var(--kbq-size-3xs);
-  overflow: hidden;
-}
-
-.kbq-tag-icon-1e369b {
-  color: var(--tag-icon-color);
-  flex: none;
-  justify-content: center;
-  align-items: center;
-  margin-inline-start: var(--kbq-size-3xs);
-  display: flex;
-}
-
-.kbq-tag-cancelIcon-1ec6aa {
-  justify-content: center;
-  align-items: center;
-  margin-inline-end: var(--kbq-size-3xs);
-  display: flex;
-}
-
-.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-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-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-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-tag-theme-fade-71290f:where(.kbq-tag-hovered-2fc42f) {
-  --tag-bg-color: var(--kbq-states-background-theme-fade-hover);
-}
-
-.kbq-tag-contrast-fade-319aac:where(.kbq-tag-hovered-2fc42f) {
-  --tag-bg-color: var(--kbq-states-background-contrast-fade-hover);
-}
-
-.kbq-tag-error-fade-b90fd8:where(.kbq-tag-hovered-2fc42f) {
-  --tag-bg-color: var(--kbq-states-background-error-fade-hover);
-}
-
-.kbq-tag-warning-fade-6decab:where(.kbq-tag-hovered-2fc42f) {
-  --tag-bg-color: var(--kbq-states-background-warning-fade-hover);
-}
-
-.kbq-tag-focused-033891 {
-  --tag-outline-color: var(--kbq-states-line-focus-theme);
-}
-
-.kbq-tag-disabled-bbd5a1 {
-  --tag-icon-color: ;
-  --tag-bg-color: var(--kbq-states-background-disabled);
-  --tag-color: var(--kbq-states-foreground-disabled);
-  --tag-outline-color: none;
-  cursor: not-allowed;
-}
 .kbq-table-container-ecbaa4 {
   --table-container-block-size: 100%;
   --table-container-min-block-size: unset;
@@ -3683,6 +3771,18 @@
   outline-offset: -2px;
   outline: 2px solid var(--kbq-states-line-focus-theme);
 }
+
+[aria-multiselectable="true"] .kbq-tablerow-selected-ced903 {
+  background-color: var(--kbq-background-contrast-less);
+}
+
+[aria-multiselectable="true"] .kbq-tablerow-selected-ced903:where(.kbq-tablerow-hovered-f3a986) {
+  background-color: var(--kbq-states-background-contrast-less-hover);
+}
+
+[aria-multiselectable="true"] .kbq-tablerow-selected-ced903:where(.kbq-tablerow-pressed-932599) {
+  background-color: var(--kbq-states-background-contrast-less-active);
+}
 .kbq-tablecell-7b64ee {
   box-sizing: border-box;
   color: var(--table-cell-color);

package/package.json

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