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

package/dist/components/Link/Link.js

@@ -1,33 +1,31 @@
 "use client";
 import { jsxs } from "react/jsx-runtime";
-import { polymorphicForwardRef, useDOMRef, clsx } from "@koobiq/react-core";
-import { useLink } from "@koobiq/react-primitives";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { Link as Link$1 } from "@koobiq/react-primitives";
 import s from "./Link.module.css.js";
 const Link = polymorphicForwardRef((props, ref) => {
   const {
     variant = "text-normal",
     visitable = false,
     pseudo = false,
+    disabled,
     as = "a",
     startIcon,
     endIcon,
     children,
     className,
-    style
+    ...other
   } = props;
-  const Tag = as;
-  const domRef = useDOMRef(ref);
-  const elementType = as !== "a" && as !== "button" ? `${as}` : void 0;
-  const { linkProps, hovered, pressed, focusVisible } = useLink(
-    { ...props, elementType },
-    domRef
-  );
   const hasIcon = Boolean(startIcon || endIcon);
+  const elementType = as !== "a" && as !== "button" ? `${as}` : void 0;
   return /* @__PURE__ */ jsxs(
-    Tag,
+    Link$1,
     {
-      ...linkProps,
-      className: clsx(
+      as,
+      disabled,
+      elementType,
+      ...disabled && { tabIndex: -1 },
+      className: ({ hovered, pressed, focusVisible }) => clsx(
         s.base,
         s[variant],
         pseudo && s.pseudo,
@@ -38,8 +36,8 @@ const Link = polymorphicForwardRef((props, ref) => {
         focusVisible && s.focusVisible,
         className
       ),
-      style,
-      ref: domRef,
+      ...other,
+      ref,
       children: [
         startIcon,
         children,

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

@@ -0,0 +1,9 @@
+import type { Ref } from 'react';
+import { type ListState } from '@koobiq/react-primitives';
+import type { ListComponent, ListBaseProps } from './types';
+export type ListInnerProps<T extends object> = {
+    state: ListState<T>;
+    listRef?: Ref<HTMLUListElement>;
+} & Omit<ListBaseProps<T>, 'ref'>;
+export declare function ListInner<T extends object>(props: ListInnerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const List: ListComponent;

package/dist/components/List/List.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx, jsxs, Fragment } 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 ListInner(props) {
+  const { label, className, style, slotProps, state, listRef } = props;
+  const domRef = useDOMRef(listRef);
+  const { listBoxProps, labelProps } = useListBox(props, state, domRef);
+  const titleProps = mergeProps(
+    {
+      className: s.label,
+      variant: "text-normal-strong"
+    },
+    slotProps?.label,
+    labelProps
+  );
+  const listProps = mergeProps(
+    {
+      style,
+      ref: domRef,
+      className: clsx(s.base, className)
+    },
+    slotProps?.list,
+    listBoxProps
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isNotNil(label) && /* @__PURE__ */ jsx(Typography, { ...titleProps, 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)
+    ) })
+  ] });
+}
+function ListRender(props, ref) {
+  const state = useListState(props);
+  return /* @__PURE__ */ jsx(ListInner, { listRef: ref, ...props, state });
+}
+const List = forwardRef(ListRender);
+export {
+  List,
+  ListInner
+};

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,6 @@
+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

@@ -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, clsx, mergeProps } 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 { List } from './List';
+export * from './types';
+export * from './ListItem';
+export * from './ListSection';

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

@@ -0,0 +1,57 @@
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { AriaListBoxProps, ListState } from '@koobiq/react-primitives';
+import type { TypographyProps } from '../Typography';
+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;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The type of selection that is allowed in the collection. */
+    selectionMode?: ListPropSelectionMode;
+    /** Ref to the HTML ul-element. */
+    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>;
+    /** Whether to autofocus the list or an option. */
+    autoFocus?: boolean | 'first' | 'last';
+    /** The props used for each slot inside. */
+    slotProps?: {
+        label?: TypographyProps;
+        list?: ComponentPropsWithRef<'div'>;
+    };
+};
+export type ListProps<T extends object> = ListBaseProps<T>;
+export type ListRef = ComponentRef<'ul'>;
+export type ListInnerProps<T extends object> = {
+    state: ListState<T>;
+    listRef?: Ref<HTMLUListElement>;
+} & Omit<ListBaseProps<T>, 'ref'>;
+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/Modal/Modal.js

@@ -9,19 +9,20 @@ import { Backdrop } from "../Backdrop/Backdrop.js";
 import { Dialog } from "../Dialog/Dialog.js";
 const Modal = forwardRef((props, ref) => {
   const {
-    hideCloseButton = false,
     size = "medium",
-    disableExitOnEscapeKeyDown,
-    disableExitOnClickOutside,
-    disableFocusManagement,
-    portalContainer,
-    open: openProp,
-    hideBackdrop,
-    onOpenChange,
-    defaultOpen,
-    children,
+    hideCloseButton = false,
     control,
+    children,
     slotProps,
+    defaultOpen,
+    hideBackdrop,
+    onOpenChange,
+    open: openProp,
+    portalContainer,
+    disableFocusManagement,
+    disableExitOnClickOutside,
+    disableExitOnEscapeKeyDown,
+    shouldCloseOnInteractOutside,
     ...other
   } = props;
   const state = useOverlayTriggerState({
@@ -41,6 +42,7 @@ const Modal = forwardRef((props, ref) => {
   const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
     {
       ...props,
+      shouldCloseOnInteractOutside,
       isDismissable: !disableExitOnClickOutside,
       isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
     },
@@ -55,9 +57,9 @@ const Modal = forwardRef((props, ref) => {
   };
   const containerProps = mergeProps(
     {
-      className: clsx(s.base, s[size]),
       ref: containerRef,
-      "data-size": size
+      "data-size": size,
+      className: clsx(s.base, s[size])
     },
     other
   );

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

@@ -58,6 +58,13 @@ export type ModalProps = {
      * @default false
      */
     disableFocusManagement?: boolean;
+    /**
+     * When user interacts with the argument element outside of the overlay ref,
+     * return true if onClose should be called. This gives you a chance to filter
+     * out interaction with elements that should not dismiss the overlay.
+     * By default, onClose will always be called on interaction outside the overlay ref.
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;

package/dist/components/Popover/Popover.d.ts

@@ -1,2 +1,4 @@
-import type { PopoverProps } from './types';
-export declare const Popover: import("react").ForwardRefExoticComponent<PopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+import type { FC } from 'react';
+import type { PopoverInnerProps } from './types';
+export declare const PopoverInner: FC<PopoverInnerProps>;
+export declare const Popover: import("react").ForwardRefExoticComponent<import("./types").PopoverBaseProps & import("react").RefAttributes<HTMLDivElement>>;