@koobiq/react-components 0.0.1-beta.1 → 0.0.1-beta.2

package/README.md

@@ -1,43 +1,26 @@
 # @koobiq/react-components
 
-## Getting Started
+Koobiq React is an open-source design system for designers and developers, focused on designing products related to information security.
 
-Install the component library with the following command:
+## Installation
 
-```bash
-pnpm add @koobiq/design-tokens @koobiq/react-components
-```
-
-### Usage
+Depending on your preference, run one of the following in your terminal:
 
-```tsx
-import '@koobiq/design-tokens/web/css-tokens.css';
-import '@koobiq/design-tokens/web/css-tokens-light.css';
-import '@koobiq/design-tokens/web/css-tokens-dark.css';
-import '@koobiq/react-components/style.css';
+```sh
+# With npm
+npm install @koobiq/react-components
 
-import { Typography } from '@koobiq/react-components';
+# With yarn
+yarn add @koobiq/react-components
 
-export default function App() {
-  return <Typography>Hello, Koobiq React!</Typography>;
-}
+# With pnpm
+yarn add @koobiq/react-components
 ```
 
-## Browser Support
-
-[Check compatible browsers](https://browsersl.ist/#q=defaults+and+supports+es6-module%2C%0A++++chrome+%3E+88%2C%0A++++safari+%3E+14%2C%0A++++firefox+%3E+78%2C%0A++++opera+%3E+75%2C%0A++++edge+%3E+88)
+## Usage
 
-## Development
+To get started with the library, read [the documentation](https://react.koobiq.io/).
 
-Follow these steps to start the development mode:
-
-- Clone the repository and navigate to the created directory.
-- Run the command `pnpm dev` in the terminal.
-
-Documentation will be available at [http://localhost:6006](http://localhost:6006).
-All development is conducted there. For convenience, you can go directly to the page of the component you are working on.
-
-### Prerequisites
+## Browser Support
 
-- Node.js v20
-- pnpm v9
+[Check compatible browsers](https://browsersl.ist/#q=defaults+and+supports+es6-module%2C%0A++++chrome+%3E+105%2C%0A++++safari+%3E+15.4%2C%0A++++firefox+%3E+121%2C%0A++++opera+%3E+91%2C%0A++++edge+%3E+105)

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

@@ -0,0 +1,4 @@
+import type { Ref } from 'react';
+import type { ListComponent, ListProps, ListRef } from './types';
+export declare function ListRender<T extends object>(props: ListProps<T>, ref: Ref<ListRef>): import("react/jsx-runtime").JSX.Element;
+export declare const List: ListComponent;

package/dist/components/List/List.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useDOMRef, mergeProps, clsx, isNotNil } from "@koobiq/react-core";
+import { useListState, useListBox } from "@koobiq/react-primitives";
+import s from "./List.module.css.js";
+import { ListSection } from "./components/ListSection/ListSection.js";
+import { Typography } from "../Typography/Typography.js";
+import { ListOption } from "./components/ListOption/ListOption.js";
+function ListRender(props, ref) {
+  const { className, label } = props;
+  const domRef = useDOMRef(ref);
+  const state = useListState(props);
+  const { listBoxProps, labelProps } = useListBox(props, state, domRef);
+  const listProps = mergeProps(
+    {
+      className: clsx(s.base, className),
+      ref: domRef
+    },
+    listBoxProps
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isNotNil(label) && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "text-normal-strong",
+        className: s.label,
+        ...labelProps,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { ...listProps, children: [...state.collection].map(
+      (item) => item.type === "section" ? /* @__PURE__ */ jsx(ListSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx(ListOption, { item, state }, item.key)
+    ) })
+  ] });
+}
+const List = forwardRef(ListRender);
+export {
+  List,
+  ListRender
+};

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

@@ -0,0 +1,11 @@
+const base = "kbq-list-928929";
+const label = "kbq-list-label-e4431c";
+const s = {
+  base,
+  label
+};
+export {
+  base,
+  s as default,
+  label
+};

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

@@ -0,0 +1,11 @@
+import type { ReactNode, ComponentProps } from 'react';
+export type ListItemProps = {
+    /** Rendered contents of the item or child items. */
+    children: ReactNode;
+    /** Rendered contents of the item if `children` contains child items. */
+    title?: ReactNode;
+} & ComponentProps<'a'>;
+export declare function ListItem(props: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ListItem {
+    var getCollectionNode: unknown;
+}

package/dist/components/List/ListItem.js

@@ -0,0 +1,11 @@
+"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.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { SectionProps } from '@koobiq/react-primitives';
+export type ListSectionProps<T> = {
+    /** Rendered contents of the section, e.g. a header. */
+    title?: ReactNode;
+    /** An accessibility label for the section. */
+    'aria-label'?: string;
+    /** Static child items or a function to render children. */
+    children: SectionProps<T>['children'];
+    /** Item objects in the section. */
+    items?: SectionProps<T>['items'];
+};
+export declare function ListSection<T>(props: ListSectionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ListSection {
+    var getCollectionNode: unknown;
+}

package/dist/components/List/ListSection.js

@@ -0,0 +1,11 @@
+"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/ListItemText/ListItemText.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ExtendableComponentPropsWithRef, DataAttributeProps } from '@koobiq/react-core';
+import type { TypographyProps } from '../../../Typography';
+export type ListItemTextRef = ComponentRef<'div'>;
+export type ListItemTextProps = ExtendableComponentPropsWithRef<{
+    /** The content of the component. */
+    children?: ReactNode;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        text?: TypographyProps;
+        caption?: TypographyProps;
+    };
+} & DataAttributeProps, 'div'>;
+export declare const ListItemText: import("react").ForwardRefExoticComponent<Omit<ListItemTextProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/List/components/ListItemText/index.d.ts

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

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

@@ -0,0 +1,5 @@
+import type { ListState, Node } from '@koobiq/react-primitives';
+export declare function ListOption<T>({ item, state, }: {
+    item: Node<T>;
+    state: ListState<T>;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useHover, usePress, mergeProps, clsx } from "@koobiq/react-core";
+import { useOption } from "@koobiq/react-primitives";
+import { utilClasses } from "../../../../styles/utility.js";
+import s from "./ListOption.module.css.js";
+const textVariant = utilClasses.typography;
+function ListOption({
+  item,
+  state
+}) {
+  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 Tag = item.props.href ? "a" : "li";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...mergeProps(optionProps, hoverProps, pressProps),
+      className: clsx(
+        s.base,
+        hovered && s.hovered,
+        pressed && s.pressed,
+        selected && s.selected,
+        textVariant["text-normal"],
+        disabled && s.disabled,
+        focusVisible && s.focusVisible
+      ),
+      ref,
+      "data-focus-visible": focusVisible,
+      children: item.rendered
+    }
+  );
+}
+export {
+  ListOption
+};

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

@@ -0,0 +1,23 @@
+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
+};

package/dist/components/List/components/ListOption/index.d.ts

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

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

@@ -0,0 +1,5 @@
+import type { ListState, Node } from '@koobiq/react-primitives';
+export declare function ListSection<T>({ section, state, }: {
+    section: Node<T>;
+    state: ListState<T>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/List/components/ListSection/ListSection.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useListBoxSection } from "@koobiq/react-primitives";
+import s from "./ListSection.module.css.js";
+import { ListOption } from "../ListOption/ListOption.js";
+import { Typography } from "../../../Typography/Typography.js";
+function ListSection({
+  section,
+  state
+}) {
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    "aria-label": section["aria-label"]
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", { ...itemProps, children: [
+    section.rendered && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        as: "span",
+        display: "block",
+        variant: "caps-compact-strong",
+        color: "contrast-secondary",
+        className: s.heading,
+        ...headingProps,
+        children: section.rendered
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { ...groupProps, className: s.base, children: [...section.childNodes].map((node) => /* @__PURE__ */ jsx(ListOption, { item: node, state }, node.key)) })
+  ] }) });
+}
+export {
+  ListSection
+};

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

@@ -0,0 +1,11 @@
+const base = "kbq-listsection-d94a57";
+const heading = "kbq-listsection-heading-5bd9e3";
+const s = {
+  base,
+  heading
+};
+export {
+  base,
+  s as default,
+  heading
+};

package/dist/components/List/components/ListSection/index.d.ts

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

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

@@ -0,0 +1,3 @@
+export * from './ListOption';
+export * from './ListSection';
+export * from './ListItemText';

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

@@ -0,0 +1,4 @@
+export * from './List';
+export * from './types';
+export * from './ListItem';
+export * from './ListSection';

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

@@ -0,0 +1,42 @@
+import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react';
+import type { AriaListBoxProps } from '@koobiq/react-primitives';
+export declare const listPropSelectionMode: readonly ["none", "single", "multiple"];
+export type ListPropSelectionMode = (typeof listPropSelectionMode)[number];
+export type ListPropItems<T extends object> = AriaListBoxProps<T>['items'];
+export type ListPropChildren<T extends object> = AriaListBoxProps<T>['children'];
+export type ListPropSelectedKeys<T extends object> = AriaListBoxProps<T>['selectedKeys'];
+export type ListPropDefaultSelectedKeys<T extends object> = AriaListBoxProps<T>['defaultSelectedKeys'];
+export type ListPropDisabledKeys<T extends object> = AriaListBoxProps<T>['disabledKeys'];
+export type ListPropOnSelectionChange<T extends object> = AriaListBoxProps<T>['onSelectionChange'];
+export type ListPropOnAction<T extends object> = AriaListBoxProps<T>['onAction'];
+export type ListPropSelectionBehavior<T extends object> = AriaListBoxProps<T>['selectionBehavior'];
+export type ListBaseProps<T extends object> = {
+    label?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** The type of selection that is allowed in the collection. */
+    selectionMode?: ListPropSelectionMode;
+    ref?: Ref<HTMLElement>;
+    /** The contents of the collection. */
+    children?: ListPropChildren<T>;
+    /** Item objects in the collection. */
+    items?: ListPropItems<T>;
+    /** The currently selected keys in the collection (controlled). */
+    selectedKeys?: ListPropSelectedKeys<T>;
+    /** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */
+    disabledKeys?: ListPropDisabledKeys<T>;
+    /** The initial selected keys in the collection (uncontrolled). */
+    defaultSelectedKeys?: ListPropDefaultSelectedKeys<T>;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: ListPropOnSelectionChange<T>;
+    /**
+     * Handler that is called when a user performs an action on an item. The exact user event depends on
+     * the collection's `selectionBehavior` prop and the interaction modality.
+     */
+    onAction?: ListPropOnAction<T>;
+    /** How multiple selection should behave in the collection. */
+    selectionBehavior?: ListPropSelectionBehavior<T>;
+};
+export type ListProps<T extends object> = ListBaseProps<T>;
+export type ListRef = ComponentRef<'ul'>;
+export type ListComponent = <T extends object>(props: ListProps<T>) => ReactElement | null;

package/dist/components/List/types.js

@@ -0,0 +1,4 @@
+const listPropSelectionMode = ["none", "single", "multiple"];
+export {
+  listPropSelectionMode
+};

package/dist/components/index.d.ts

@@ -21,4 +21,5 @@ export * from './Modal';
 export * from './SidePanel';
 export * from './Popover';
 export * from './Tooltip';
+export * from './List';
 export * from './layout';

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 import './global.css';
-export * from './components/index.js';
+export * from './components';
+export * from './types';

package/dist/index.js

@@ -53,6 +53,10 @@ import { Popover } from "./components/Popover/Popover.js";
 import { popoverPropPlacement, popoverPropSize } from "./components/Popover/types.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 import { tooltipPropPlacement, tooltipPropVariant } from "./components/Tooltip/types.js";
+import { List, ListRender } from "./components/List/List.js";
+import { listPropSelectionMode } from "./components/List/types.js";
+import { ListItem } from "./components/List/ListItem.js";
+import { ListSection } from "./components/List/ListSection.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -72,6 +76,10 @@ export {
   Input,
   InputNumber,
   Link,
+  List,
+  ListItem,
+  ListRender,
+  ListSection,
   Modal,
   DialogContent2 as ModalContent,
   DialogFooter2 as ModalFooter,
@@ -121,6 +129,7 @@ export {
   iconButtonPropVariant,
   inputNumberPropVariant,
   inputPropVariant,
+  listPropSelectionMode,
   modalPropSize,
   popoverPropPlacement,
   popoverPropSize,

package/dist/style.css

@@ -2848,6 +2848,87 @@
   opacity: 0;
   transform: var(--popover-transform);
 }
+.kbq-list-928929 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: auto;
+}
+
+.kbq-list-label-e4431c {
+  padding: var(--kbq-size-xs) var(--kbq-size-m);
+}
+.kbq-listsection-d94a57 {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow: auto;
+}
+
+.kbq-listsection-heading-5bd9e3 {
+  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;
+  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;
+  text-decoration: none;
+  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;
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/dist/types.d.ts

@@ -0,0 +1 @@
+export type Selection = 'all' | Set<string | number>;

package/package.json

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