@koobiq/react-components 0.0.1-beta.12 → 0.0.1-beta.14

package/dist/style.css

@@ -1305,6 +1305,78 @@
   text-underline-offset: inherit;
   font-family: inherit;
 }
+
+.kbq-utility-list-792630 {
+  outline: none;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: auto;
+}
+
+.kbq-utility-list-item-862731 {
+  --list-item-bg-color: ;
+  --list-item-outline-color: transparent;
+  --list-item-outline-width: var(--kbq-size-3xs);
+  cursor: pointer;
+  box-sizing: border-box;
+  gap: var(--kbq-size-s);
+  border-radius: var(--kbq-size-s);
+  color: var(--kbq-foreground-contrast);
+  background-color: var(--list-item-bg-color);
+  padding: var(--kbq-size-xs) var(--kbq-size-m);
+  outline-offset: calc(-1 * var(--list-item-outline-width));
+  outline: var(--list-item-outline-width) solid var(--list-item-outline-color);
+  transition: border-color var(--kbq-transition-default), border-radius var(--kbq-transition-default), background-color var(--kbq-transition-default), color var(--kbq-transition-default);
+  flex-shrink: 0;
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+.kbq-utility-list-item-862731:where([data-hovered="true"]) {
+  --list-item-bg-color: var(--kbq-states-background-transparent-hover);
+}
+
+.kbq-utility-list-item-862731:where([data-pressed="true"]) {
+  --list-item-bg-color: var(--kbq-states-background-transparent-active);
+}
+
+.kbq-utility-list-item-862731:where([data-focus-visible="true"]) {
+  --list-item-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+.kbq-utility-list-item-862731:where([data-selected="true"]) {
+  --list-item-bg-color: var(--kbq-background-theme-less);
+}
+
+.kbq-utility-list-item-862731:where([data-selected="true"][data-hovered="true"]) {
+  --list-item-bg-color: var(--kbq-states-background-theme-less-hover);
+}
+
+.kbq-utility-list-item-862731:where([data-selected="true"][data-pressed="true"]) {
+  --list-item-bg-color: var(--kbq-states-background-theme-less-active);
+}
+
+.kbq-utility-list-item-862731:where([data-disabled="true"]), .kbq-utility-list-item-862731:where([aria-disabled="true"]) {
+  --list-item-bg-color: ;
+  cursor: default;
+  opacity: .3;
+}
+
+.kbq-utility-list-item-862731:where([data-selected="true"][data-disabled="true"]), .kbq-utility-list-item-862731:where([data-selected="true"][aria-disabled="true"]) {
+  --list-item-bg-color: var(--kbq-background-theme-less);
+}
+
+.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;
+}
+
+.kbq-utility-list-792630[aria-multiselectable="true"] .kbq-utility-list-item-862731:is([data-selected="true"], [data-focus-visible="true"]) + :is([data-selected="true"], [data-focus-visible="true"]) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
 .kbq-typography-645b00 {
   margin: unset;
 }
@@ -2538,6 +2610,73 @@
 .kbq-skeletontypography-skeleton-5db4ac {
   block-size: .9em;
 }
+.kbq-modal-4b03cd {
+  --modal-window-offset: 48px;
+  pointer-events: none;
+  z-index: var(--kbq-layer-modal);
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.kbq-modal-small-7273e9 {
+  --modal-window-inline-size: 400px;
+}
+
+.kbq-modal-medium-5db542 {
+  --modal-window-inline-size: 640px;
+}
+
+.kbq-modal-large-534723 {
+  --modal-window-inline-size: 960px;
+}
+
+.kbq-modal-4b03cd[data-transition="entering"] .kbq-modal-modal-3e5b95, .kbq-modal-4b03cd[data-transition="entered"] .kbq-modal-modal-3e5b95 {
+  opacity: 1;
+  transform: translate(-50%);
+}
+
+.kbq-modal-4b03cd[data-transition="exiting"] .kbq-modal-modal-3e5b95, .kbq-modal-4b03cd[data-transition="exited"] .kbq-modal-modal-3e5b95 {
+  opacity: 0;
+  transform: translate(-50%, 100px);
+}
+
+.kbq-modal-modal-3e5b95 {
+  pointer-events: auto;
+  border-radius: var(--kbq-size-m);
+  box-shadow: var(--kbq-shadow-overlay);
+  background-color: var(--kbq-background-bg);
+  max-inline-size: var(--modal-window-inline-size);
+  inline-size: calc(100% - var(--modal-window-offset) * 2);
+  max-block-size: calc(100vh - var(--modal-window-offset) * 2);
+  transition: opacity var(--kbq-transition-slow), transform var(--kbq-transition-slow);
+  position: absolute;
+  inset-block-start: var(--modal-window-offset);
+  inset-inline-start: 50%;
+  transform: translate(-50%, 100px);
+}
+.kbq-backdrop-238ef0 {
+  --backdrop-z-index: -1;
+  --backdrop-duration: ;
+  opacity: 0;
+  z-index: var(--backdrop-z-index);
+  pointer-events: auto;
+  background-color: var(--kbq-background-overlay);
+  transition: opacity var(--backdrop-duration) ease-in-out;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.kbq-backdrop-238ef0[data-transition="entering"], .kbq-backdrop-238ef0[data-transition="entered"] {
+  opacity: 1;
+}
+
+.kbq-backdrop-238ef0[data-transition="exiting"], .kbq-backdrop-238ef0[data-transition="exited"] {
+  opacity: 0;
+}
 .kbq-dialog-4c737c {
   --dialog-padding-inline-size: var(--kbq-size-xxl);
   pointer-events: auto;
@@ -2610,73 +2749,6 @@
 [data-bottom-overflow="true"] .kbq-dialog-footer-cf03d1 {
   box-shadow: var(--kbq-shadow-overflow-normal-top);
 }
-.kbq-modal-4b03cd {
-  --modal-window-offset: 48px;
-  pointer-events: none;
-  z-index: var(--kbq-layer-modal);
-  display: flex;
-  position: fixed;
-  inset: 0;
-}
-
-.kbq-modal-small-7273e9 {
-  --modal-window-inline-size: 400px;
-}
-
-.kbq-modal-medium-5db542 {
-  --modal-window-inline-size: 640px;
-}
-
-.kbq-modal-large-534723 {
-  --modal-window-inline-size: 960px;
-}
-
-.kbq-modal-4b03cd[data-transition="entering"] .kbq-modal-modal-3e5b95, .kbq-modal-4b03cd[data-transition="entered"] .kbq-modal-modal-3e5b95 {
-  opacity: 1;
-  transform: translate(-50%);
-}
-
-.kbq-modal-4b03cd[data-transition="exiting"] .kbq-modal-modal-3e5b95, .kbq-modal-4b03cd[data-transition="exited"] .kbq-modal-modal-3e5b95 {
-  opacity: 0;
-  transform: translate(-50%, 100px);
-}
-
-.kbq-modal-modal-3e5b95 {
-  pointer-events: auto;
-  border-radius: var(--kbq-size-m);
-  box-shadow: var(--kbq-shadow-overlay);
-  background-color: var(--kbq-background-bg);
-  max-inline-size: var(--modal-window-inline-size);
-  inline-size: calc(100% - var(--modal-window-offset) * 2);
-  max-block-size: calc(100vh - var(--modal-window-offset) * 2);
-  transition: opacity var(--kbq-transition-slow), transform var(--kbq-transition-slow);
-  position: absolute;
-  inset-block-start: var(--modal-window-offset);
-  inset-inline-start: 50%;
-  transform: translate(-50%, 100px);
-}
-.kbq-backdrop-238ef0 {
-  --backdrop-z-index: -1;
-  --backdrop-duration: ;
-  opacity: 0;
-  z-index: var(--backdrop-z-index);
-  pointer-events: auto;
-  background-color: var(--kbq-background-overlay);
-  transition: opacity var(--backdrop-duration) ease-in-out;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  position: fixed;
-  inset: 0;
-}
-
-.kbq-backdrop-238ef0[data-transition="entering"], .kbq-backdrop-238ef0[data-transition="entered"] {
-  opacity: 1;
-}
-
-.kbq-backdrop-238ef0[data-transition="exiting"], .kbq-backdrop-238ef0[data-transition="exited"] {
-  opacity: 0;
-}
 .kbq-sidepanel-2aae74 {
   pointer-events: none;
   z-index: var(--kbq-layer-modal);
@@ -2918,14 +2990,6 @@
 .kbq-tooltip-0c8f57[data-transition="exiting"], .kbq-tooltip-0c8f57[data-transition="exited"] {
   opacity: 0;
 }
-.kbq-list-928929 {
-  outline: none;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  overflow: auto;
-}
-
 .kbq-list-label-e4431c {
   padding: var(--kbq-size-xs) var(--kbq-size-m);
 }
@@ -2942,68 +3006,16 @@
   box-sizing: border-box;
   padding: var(--kbq-size-s) var(--kbq-size-m);
 }
-.kbq-listoption-8693c5 {
-  --list-item-bg-color: ;
-  --list-item-outline-color: transparent;
-  --list-item-outline-width: var(--kbq-size-3xs);
-  cursor: pointer;
-  box-sizing: border-box;
-  gap: var(--kbq-size-s);
-  border-radius: var(--kbq-size-s);
-  color: var(--kbq-foreground-contrast);
-  background-color: var(--list-item-bg-color);
-  padding: var(--kbq-size-xs) var(--kbq-size-m);
-  outline-offset: calc(-1 * var(--list-item-outline-width));
-  outline: var(--list-item-outline-width) solid var(--list-item-outline-color);
-  transition: border-color var(--kbq-transition-default), border-radius var(--kbq-transition-default), background-color var(--kbq-transition-default), color var(--kbq-transition-default);
-  flex-shrink: 0;
-  align-items: center;
-  text-decoration: none;
+.kbq-listitemtext-27bac6 {
+  gap: var(--kbq-size-3xs);
+  flex-direction: column;
+  flex-grow: 1;
+  min-inline-size: 0;
   display: flex;
 }
 
-.kbq-listoption-hovered-163e16 {
-  --list-item-bg-color: var(--kbq-states-background-transparent-hover);
-}
-
-.kbq-listoption-pressed-292310 {
-  --list-item-bg-color: var(--kbq-states-background-transparent-active);
-}
-
-.kbq-listoption-focusVisible-dcff25 {
-  --list-item-outline-color: var(--kbq-states-line-focus-theme);
-}
-
-.kbq-listoption-selected-012293 {
-  --list-item-bg-color: var(--kbq-background-theme-less);
-}
-
-.kbq-listoption-selected-012293:where(.kbq-listoption-hovered-163e16) {
-  --list-item-bg-color: var(--kbq-states-background-theme-less-hover);
-}
-
-.kbq-listoption-selected-012293:where(.kbq-listoption-pressed-292310) {
-  --list-item-bg-color: var(--kbq-states-background-theme-less-active);
-}
-
-.kbq-listoption-disabled-dafd94 {
-  --list-item-bg-color: ;
-  cursor: default;
-  opacity: .3;
-}
-
-.kbq-listoption-selected-012293:where(.kbq-listoption-disabled-dafd94) {
-  --list-item-bg-color: var(--kbq-background-theme-less);
-}
-
-[aria-multiselectable] :is(.kbq-listoption-selected-012293, .kbq-listoption-focusVisible-dcff25):has( + :is(.kbq-listoption-selected-012293, .kbq-listoption-focusVisible-dcff25)) {
-  border-end-end-radius: 0;
-  border-end-start-radius: 0;
-}
-
-[aria-multiselectable] :is(.kbq-listoption-selected-012293, .kbq-listoption-focusVisible-dcff25) + :is(.kbq-listoption-selected-012293, .kbq-listoption-focusVisible-dcff25) {
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
+[data-slot="select-value"] .kbq-listitemtext-caption-ae96af {
+  display: none;
 }
 .kbq-select-6d31ad {
   --field-input-padding-inline-start: var(--kbq-size-m);
@@ -3109,6 +3121,47 @@
 .kbq-fieldselect-hasPlaceholder-7b7518 {
   --field-input-color: var(--field-input-placeholder-color);
 }
+.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-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/dist/styles/utility.d.ts

@@ -68,4 +68,6 @@ export declare const utilClasses: {
         'italic-compact-strong': string;
         inherit: string;
     };
+    list: string;
+    listItem: string;
 };

package/dist/styles/utility.js

@@ -69,7 +69,9 @@ const typography = {
 };
 const utilClasses = {
   color,
-  typography
+  typography,
+  list: s.list,
+  listItem: s["list-item"]
 };
 export {
   utilClasses

package/dist/styles/utility.module.css.js

@@ -2,6 +2,7 @@ const headline = "kbq-utility-headline-b504fb";
 const title = "kbq-utility-title-49d974";
 const subheading = "kbq-utility-subheading-ec6b60";
 const inherit = "kbq-utility-inherit-6b72bf";
+const list = "kbq-utility-list-792630";
 const s = {
   "foreground-white": "kbq-utility-foreground-white-f552a0",
   "foreground-white-secondary": "kbq-utility-foreground-white-secondary-893462",
@@ -64,12 +65,15 @@ const s = {
   "italic-normal-strong": "kbq-utility-italic-normal-strong-88d247",
   "italic-compact": "kbq-utility-italic-compact-846466",
   "italic-compact-strong": "kbq-utility-italic-compact-strong-d8e16e",
-  inherit
+  inherit,
+  list,
+  "list-item": "kbq-utility-list-item-862731"
 };
 export {
   s as default,
   headline,
   inherit,
+  list,
   subheading,
   title
 };

package/dist/types.d.ts

@@ -1 +1,2 @@
+export type { PressEvent } from '@koobiq/react-primitives';
 export type Selection = 'all' | Set<string | number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.14",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -27,10 +27,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-icons": "0.0.1-beta.12",
-    "@koobiq/react-primitives": "0.0.1-beta.12",
-    "@koobiq/react-core": "0.0.1-beta.12",
-    "@koobiq/logger": "0.0.1-beta.12"
+    "@koobiq/react-core": "0.0.1-beta.14",
+    "@koobiq/react-icons": "0.0.1-beta.14",
+    "@koobiq/react-primitives": "0.0.1-beta.14",
+    "@koobiq/logger": "0.0.1-beta.14"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",

package/dist/components/Dialog/DialogContext.d.ts

@@ -1,9 +0,0 @@
-import type { DialogContentProps } from './components';
-export type DialogContextProps = {
-    close?(): void;
-    slots?: {
-        content?: DialogContentProps;
-    };
-};
-export declare const DialogContext: import("react").Context<DialogContextProps>;
-export declare function useDialogProvider(): DialogContextProps;

package/dist/components/Dialog/DialogContext.js

@@ -1,12 +0,0 @@
-"use client";
-import { useContext, createContext } from "react";
-const DialogContext = createContext(
-  {}
-);
-function useDialogProvider() {
-  return useContext(DialogContext);
-}
-export {
-  DialogContext,
-  useDialogProvider
-};

package/dist/components/Dialog/components/DialogContent.d.ts

@@ -1,12 +0,0 @@
-import type { ReactNode, ComponentRef } from 'react';
-import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
-export type DialogContentRef = ComponentRef<'div'>;
-export type DialogContentProps = ExtendableComponentPropsWithRef<{
-    /** Additional CSS-classes. */
-    className?: string;
-    /** The content of the component. */
-    children?: ReactNode;
-    /** Unique identifier for testing purposes. */
-    'data-testid'?: string;
-}, 'div'>;
-export declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/List/ListItem.d.ts

@@ -1,6 +0,0 @@
-import type { ItemProps } from '@koobiq/react-primitives';
-export type ListItemProps<T> = ItemProps<T>;
-export declare function ListItem<T>(props: ListItemProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace ListItem {
-    var getCollectionNode: unknown;
-}

package/dist/components/List/ListItem.js

@@ -1,11 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { Item } from "@koobiq/react-primitives";
-const ItemInner = Item;
-function ListItem(props) {
-  return /* @__PURE__ */ jsx(Item, { ...props });
-}
-ListItem.getCollectionNode = ItemInner.getCollectionNode;
-export {
-  ListItem
-};

package/dist/components/List/ListSection.js

@@ -1,11 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { Section } from "@koobiq/react-primitives";
-const SectionInner = Section;
-function ListSection(props) {
-  return /* @__PURE__ */ jsx(Section, { ...props });
-}
-ListSection.getCollectionNode = SectionInner.getCollectionNode;
-export {
-  ListSection
-};

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

@@ -1,23 +0,0 @@
-const base = "kbq-listoption-8693c5";
-const hovered = "kbq-listoption-hovered-163e16";
-const pressed = "kbq-listoption-pressed-292310";
-const focusVisible = "kbq-listoption-focusVisible-dcff25";
-const selected = "kbq-listoption-selected-012293";
-const disabled = "kbq-listoption-disabled-dafd94";
-const s = {
-  base,
-  hovered,
-  pressed,
-  focusVisible,
-  selected,
-  disabled
-};
-export {
-  base,
-  s as default,
-  disabled,
-  focusVisible,
-  hovered,
-  pressed,
-  selected
-};