@bccampus/ui-components 0.4.2 → 0.5.0

package/dist/components/index.d.ts

@@ -0,0 +1,16 @@
+export * from './ui/composite';
+export * from './ui/icon-generator';
+export * from './ui/typography';
+export * from './ui/banner.tsx';
+export * from './ui/button.tsx';
+export * from './ui/card.tsx';
+export * from './ui/horizontal-list.tsx';
+export * from './ui/input.tsx';
+export * from './ui/navigation-menu.tsx';
+export * from './ui/overlay.tsx';
+export * from './ui/page-header.tsx';
+export * from './ui/page-section.tsx';
+export * from './ui/page.tsx';
+export * from './ui/popover.tsx';
+export * from './ui/search-input.tsx';
+export * from './ui/tag.tsx';

package/dist/components/index.js

@@ -0,0 +1,84 @@
+import { CompositeData } from "./ui/composite/CompositeData.js";
+import { C } from "../_chunks/CompositeDataItem.js";
+import { AbstractFocusProvider } from "./ui/composite/FocusProvider/AbstractFocusProvider.js";
+import { ListboxFocusProvider } from "./ui/composite/FocusProvider/ListboxFocusProvider.js";
+import { AbstractSelectionProvider } from "./ui/composite/SelectionProvider/AbstractSelectionProvider.js";
+import { SingleSelectionProvider } from "./ui/composite/SelectionProvider/SingleSelectionProvider.js";
+import { MultipleSelectionProvider } from "./ui/composite/SelectionProvider/MultipleSelectionProvider.js";
+import { CompositeComponent } from "./ui/composite/composite-component.js";
+import { CompositeComponentItem } from "./ui/composite/composite-component-item.js";
+import { Listbox } from "./ui/composite/listbox.js";
+import { IconGenerator } from "./ui/icon-generator/icon-generator.js";
+import { generateIconPattern, generateTiles } from "./ui/icon-generator/generate-tiles.js";
+import { MaskedImageGenerator } from "./ui/icon-generator/masked-image-generator.js";
+import { TileShape } from "./ui/icon-generator/types.js";
+import { Caption, captionVariants } from "./ui/typography/caption.js";
+import { Banner } from "./ui/banner.js";
+import { Button, buttonVariants } from "./ui/button.js";
+import { Card, CardArea, CardCaption, CardContent, CardImage, CardItemGroup, CardMedia, CardMeta, CardSubcaption, CardSubtitle, CardTitle, CardToolbar } from "./ui/card.js";
+import { HorizontalList } from "./ui/horizontal-list.js";
+import { Input } from "./ui/input.js";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./ui/navigation-menu.js";
+import { Overlay } from "./ui/overlay.js";
+import { PageHeader } from "./ui/page-header.js";
+import { PageSection } from "./ui/page-section.js";
+import { Page } from "./ui/page.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./ui/popover.js";
+import { SearchInput } from "./ui/search-input.js";
+import { Tag, tagVariants } from "./ui/tag.js";
+export {
+  AbstractFocusProvider,
+  AbstractSelectionProvider,
+  Banner,
+  Button,
+  Caption,
+  Card,
+  CardArea,
+  CardCaption,
+  CardContent,
+  CardImage,
+  CardItemGroup,
+  CardMedia,
+  CardMeta,
+  CardSubcaption,
+  CardSubtitle,
+  CardTitle,
+  CardToolbar,
+  CompositeComponent,
+  CompositeComponentItem,
+  CompositeData,
+  C as CompositeDataItem,
+  HorizontalList,
+  IconGenerator,
+  Input,
+  Listbox,
+  ListboxFocusProvider,
+  MaskedImageGenerator,
+  MultipleSelectionProvider,
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  Overlay,
+  Page,
+  PageHeader,
+  PageSection,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  SearchInput,
+  SingleSelectionProvider,
+  Tag,
+  TileShape,
+  buttonVariants,
+  captionVariants,
+  generateIconPattern,
+  generateTiles,
+  navigationMenuTriggerStyle,
+  tagVariants
+};

package/dist/components/ui/banner.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+declare const bannerVariants: (props?: ({
+    variant?: "alert" | "default" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export interface BannerProps extends VariantProps<typeof bannerVariants>, React.ComponentProps<"div"> {
+    dismissible?: boolean;
+}
+declare function Banner({ className, size, variant, dismissible, children, ...props }: BannerProps): import("react").JSX.Element | null;
+export { Banner };

package/dist/components/ui/banner.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as cva } from "../../_chunks/index2.js";
+import { c as cn } from "../../_chunks/utils.js";
+import { useState } from "react";
+import { Button } from "./button.js";
+import { c as createLucideIcon } from "../../_chunks/createLucideIcon.js";
+/**
+ * @license lucide-react v0.544.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
+const bannerVariants = cva("flex flex-row items-center justify-between px-(--spacing-section) text-sm", {
+  variants: {
+    variant: {
+      default: "bg-complement-3 text-white",
+      alert: "bg-complement-2-200 text-black"
+    },
+    size: {
+      default: "py-2",
+      sm: "py-1",
+      lg: "py-3 text-md font-semibold"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Banner({ className, size, variant, dismissible, children, ...props }) {
+  const [dismissed, setDismissed] = useState(false);
+  if (dismissed) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "banner", className: cn(bannerVariants({ variant, size }), className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-auto text-center", children }),
+    dismissible && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-6 text-white", onClick: () => setDismissed(true), children: /* @__PURE__ */ jsx(X, {}) }) })
+  ] });
+}
+export {
+  Banner
+};

package/dist/components/ui/button.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "item" | "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    block?: boolean | null | undefined;
+    size?: "text" | "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+};
+declare function Button({ className, variant, size, block, asChild, ...props }: ButtonProps): import("react").JSX.Element;
+export { Button, buttonVariants };

package/dist/{button.js → components/ui/button.js}

@@ -1,8 +1,8 @@
-import { jsx as n } from "react/jsx-runtime";
-import { S as s } from "./index-U7DVCmS_.js";
-import { c as d } from "./index-CQhYMnjT.js";
-import { c } from "./utils-CRiPKpXj.js";
-const u = d(
+import { jsx } from "react/jsx-runtime";
+import { S as Slot } from "../../_chunks/index.js";
+import { c as cva } from "../../_chunks/index2.js";
+import { c as cn } from "../../_chunks/utils.js";
+const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 px-6 has-[>svg]:px-4 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
@@ -28,15 +28,16 @@ const u = d(
     },
     defaultVariants: {
       size: "default",
-      block: !1,
+      block: false,
       variant: "default"
     }
   }
 );
-function p({ className: e, variant: r, size: t, block: o, asChild: a = !1, ...i }) {
-  return /* @__PURE__ */ n(a ? s : "button", { "data-slot": "button", className: c(u({ size: t, block: o, variant: r }), e), ...i });
+function Button({ className, variant, size, block, asChild = false, ...props }) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ size, block, variant }), className), ...props });
 }
 export {
-  p as Button,
-  u as buttonVariants
+  Button,
+  buttonVariants
 };

package/dist/components/ui/card.d.ts

@@ -0,0 +1,27 @@
+import { VariantProps } from 'class-variance-authority';
+declare const cardVariants: (props?: ({
+    bordered?: boolean | null | undefined;
+    rounded?: boolean | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export type CardProps<T extends boolean> = (T extends true ? React.ComponentProps<"a"> : React.ComponentProps<"div">) & VariantProps<typeof cardVariants> & {
+    asLink?: T;
+};
+declare function Card<T extends boolean = false>({ className, asLink, bordered, rounded, ...props }: CardProps<T>): import("react").JSX.Element;
+type CardAreaProps = React.ComponentProps<"div"> & {
+    name: string;
+};
+declare function CardArea({ name, className, ...props }: CardAreaProps): import("react").JSX.Element;
+declare function CardItemGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+type CardTitleProps = React.ComponentProps<"div"> & {
+    size?: "sm" | "md" | "lg";
+};
+declare function CardTitle({ size, className, ...props }: CardTitleProps): import("react").JSX.Element;
+declare function CardSubtitle({ size, className, ...props }: CardTitleProps): import("react").JSX.Element;
+declare function CardCaption(props: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardSubcaption(props: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardMeta(props: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardContent(props: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardToolbar({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardMedia({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function CardImage({ className, ...props }: React.ComponentProps<"img">): import("react").JSX.Element;
+export { Card, CardArea, CardItemGroup, CardToolbar, CardTitle, CardSubtitle, CardCaption, CardSubcaption, CardMeta, CardContent, CardMedia, CardImage, };

package/dist/components/ui/card.js

@@ -0,0 +1,109 @@
+import { jsx } from "react/jsx-runtime";
+import { c as cn } from "../../_chunks/utils.js";
+import { Caption } from "./typography/caption.js";
+import { c as cva } from "../../_chunks/index2.js";
+const cardVariants = cva("group @container/card w-full max-w-full bg-card text-card-foreground grid gap-(--gap-card)", {
+  variants: {
+    bordered: {
+      true: "p-(--spacing-card) border border-complement-1-100  dark:border-brand-1-900 ",
+      false: ""
+    },
+    rounded: {
+      true: "rounded-2xl",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    bordered: false,
+    rounded: false
+  }
+});
+function Card({ className, asLink, bordered, rounded, ...props }) {
+  const Comp = asLink ? "a" : "div";
+  const linkClassName = asLink ? "transition-all hover:bg-complement-1-50 dark:hover:bg-gray-900" : "";
+  return (
+    //@ts-expect-error: props type will be correct
+    /* @__PURE__ */ jsx(Comp, { "data-slot": "card", className: cn(cardVariants({ bordered, rounded }), linkClassName, className), ...props })
+  );
+}
+function CardArea({ name, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { gridArea: name },
+      className: cn("@container/card-area relative flex flex-col gap-(--gap-card-area)", className),
+      ...props
+    }
+  );
+}
+function CardItemGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-(--gap-card-item-group)", className), ...props });
+}
+function CardTitle({ size = "md", className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        {
+          "heading-1": size === "lg",
+          "heading-2": size === "md",
+          "heading-3": size === "sm"
+        },
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardSubtitle({ size = "md", className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "text-secondary",
+        {
+          "heading-1": size === "lg",
+          "heading-2": size === "md",
+          "heading-3": size === "sm"
+        },
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardCaption(props) {
+  return /* @__PURE__ */ jsx(Caption, { ...props });
+}
+function CardSubcaption(props) {
+  return /* @__PURE__ */ jsx(Caption, { variant: "light", ...props });
+}
+function CardMeta(props) {
+  return /* @__PURE__ */ jsx(Caption, { variant: "light", ...props });
+}
+function CardContent(props) {
+  return /* @__PURE__ */ jsx("div", { ...props });
+}
+function CardToolbar({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className), ...props });
+}
+function CardMedia({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("relative w-full h-full", className), ...props });
+}
+function CardImage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(CardMedia, { children: /* @__PURE__ */ jsx("img", { className: cn("w-full h-full rounded-lg aspect-9/5 object-cover object-top", className), ...props }) });
+}
+export {
+  Card,
+  CardArea,
+  CardCaption,
+  CardContent,
+  CardImage,
+  CardItemGroup,
+  CardMedia,
+  CardMeta,
+  CardSubcaption,
+  CardSubtitle,
+  CardTitle,
+  CardToolbar
+};

package/dist/components/ui/composite/CompositeData.d.ts

@@ -0,0 +1,20 @@
+import { CompositeItemKey, CompositeOptions, CompositeProviderOptions } from './types';
+import { CompositeDataItem } from './CompositeDataItem';
+import { AbstractFocusProvider } from './FocusProvider/AbstractFocusProvider';
+import { AbstractSelectionProvider } from './SelectionProvider/AbstractSelectionProvider';
+export declare class CompositeData<T extends object> implements Iterable<CompositeDataItem<T>> {
+    #private;
+    lookup: Map<CompositeItemKey, CompositeDataItem<T>>;
+    focusProvider: AbstractFocusProvider<T>;
+    selectionProvider?: AbstractSelectionProvider<T>;
+    disabledKeys: Set<CompositeItemKey>;
+    root: CompositeDataItem<T>;
+    constructor(items: T[], providerOptions: CompositeProviderOptions<T>, options?: CompositeOptions);
+    [Symbol.iterator](): Iterator<CompositeDataItem<T>>;
+    toJSON(): T[];
+    init(items: T[]): void;
+    item(key: CompositeItemKey): CompositeDataItem<T> | undefined;
+    descendants(itemKey: CompositeItemKey): CompositeDataItem<T>[] | undefined;
+    ancestors(itemKey: CompositeItemKey): CompositeDataItem<T>[] | undefined;
+    updateItem(key: CompositeItemKey, data: Partial<T> | ((item: T) => Partial<T>)): void;
+}

package/dist/components/ui/composite/CompositeData.js

@@ -0,0 +1,89 @@
+import { C as CompositeDataItem } from "../../../_chunks/CompositeDataItem.js";
+import { union } from "../../../lib/set-operations.js";
+class CompositeData {
+  #options;
+  lookup = /* @__PURE__ */ new Map();
+  focusProvider;
+  selectionProvider;
+  disabledKeys = /* @__PURE__ */ new Set();
+  root;
+  constructor(items, providerOptions, options) {
+    this.#options = {
+      itemKeyProp: "key",
+      itemChildrenProp: "children",
+      disabledKeys: [],
+      selectedKeys: [],
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getItemKey: (item) => item[this.#options.itemKeyProp],
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      getItemChildren: (item) => item[this.#options.itemChildrenProp] ? item[this.#options.itemChildrenProp] : void 0,
+      ...options
+    };
+    this.focusProvider = providerOptions.focusProvider;
+    this.selectionProvider = providerOptions.selectionProvider;
+    this.init(items);
+  }
+  *[Symbol.iterator]() {
+    if (this.root.children) {
+      for (const node of this.root.children) {
+        yield node;
+      }
+    }
+  }
+  toJSON() {
+    const json = this.root.toJSON();
+    return json[this.#options.itemChildrenProp];
+  }
+  init(items) {
+    this.root = new CompositeDataItem(
+      { [this.#options.itemKeyProp]: "ALL", [this.#options.itemChildrenProp]: items },
+      this.#options,
+      null
+    );
+    this.lookup = new Map([...this.root].map((item) => [item.key, item]));
+    this.#options.disabledKeys.forEach((disabledKey) => this.#disable(disabledKey));
+    if (this.selectionProvider)
+      this.selectionProvider.init(this, this.#options);
+    this.focusProvider.init(this, this.#options);
+  }
+  item(key) {
+    return this.lookup.get(key);
+  }
+  descendants(itemKey) {
+    const item = this.lookup.get(itemKey);
+    if (!item) return void 0;
+    return item.descendants();
+  }
+  ancestors(itemKey) {
+    const item = this.lookup.get(itemKey);
+    if (!item) return void 0;
+    return item.ancestors();
+  }
+  #disable(item, recursive = false) {
+    const _item = item instanceof CompositeDataItem ? item : this.lookup.get(item);
+    if (!_item) return;
+    const disabledKeys = _item.disable(recursive);
+    this.disabledKeys = union(this.disabledKeys, disabledKeys);
+  }
+  updateItem(key, data) {
+    const item = this.lookup.get(key);
+    if (item) {
+      const newData = {
+        ...item.data.get(),
+        ...typeof data === "function" ? data(item.data.get()) : data
+      };
+      const newKey = this.#options.getItemKey(newData);
+      if (item.key !== newKey) throw "Item key cannot be updated!";
+      this.#updateIfSelectedItem(key);
+      item.data.set(newData);
+    }
+  }
+  #updateIfSelectedItem(key) {
+    if (this.selectionProvider && this.selectionProvider.selectedKeys.get().has(key)) {
+      this.selectionProvider.selectedKeys.set(/* @__PURE__ */ new Set([...this.selectionProvider.selectedKeys.get()]));
+    }
+  }
+}
+export {
+  CompositeData
+};

package/dist/components/ui/composite/CompositeDataItem.d.ts

@@ -0,0 +1,28 @@
+import { PreinitializedMapStore } from 'nanostores';
+import { CompositeDataItemState, CompositeItemKey, CompositeDataItemOptions } from './types';
+export declare class CompositeDataItem<T extends object> implements Iterable<CompositeDataItem<T>> {
+    #private;
+    parent: CompositeDataItem<T> | null;
+    children?: CompositeDataItem<T>[];
+    level: number;
+    data: PreinitializedMapStore<T>;
+    state: PreinitializedMapStore<CompositeDataItemState>;
+    pointers: {
+        left?: CompositeItemKey;
+        right?: CompositeItemKey;
+        up?: CompositeItemKey;
+        down?: CompositeItemKey;
+    };
+    childrenProp: string;
+    constructor(item: T, options: CompositeDataItemOptions<T>, parent: CompositeDataItem<T> | null);
+    get key(): CompositeItemKey;
+    [Symbol.iterator](): Iterator<CompositeDataItem<T>>;
+    toJSON(): T;
+    descendants(): CompositeDataItem<T>[];
+    ancestors(): CompositeDataItem<T>[];
+    toggleSelect(recursive?: boolean): void;
+    select(recursive?: boolean): CompositeItemKey[];
+    deselect(recursive?: boolean): CompositeItemKey[];
+    disable(recursive?: boolean): CompositeItemKey[];
+    enable(recursive?: boolean): CompositeItemKey[];
+}

package/dist/components/ui/composite/CompositeDataItem.js

@@ -0,0 +1,5 @@
+import "../../../lib/object.js";
+import { C } from "../../../_chunks/CompositeDataItem.js";
+export {
+  C as CompositeDataItem
+};

package/dist/components/ui/composite/FocusProvider/AbstractFocusProvider.d.ts

@@ -0,0 +1,41 @@
+import { PreinitializedWritableAtom } from 'nanostores';
+import { CompositeData } from '../CompositeData';
+import { CompositeDataItem } from '../CompositeDataItem';
+import { CompositeDataOptions, CompositeItemKey } from '../types';
+export interface FocusProvider {
+    focus(itemKey: CompositeItemKey): void;
+    focusUp(): void;
+    focusDown(): void;
+    focusLeft(): void;
+    focusRight(): void;
+    focusPageUp(): void;
+    focesPageDown(): void;
+    focusToFirst(): void;
+    focusToLast(): void;
+    focusToFirstInRow(): void;
+    focusToLastInRow(): void;
+    focusToTypeAheadMatch(): void;
+}
+export declare abstract class AbstractFocusProvider<T extends object> implements FocusProvider {
+    protected data: CompositeData<T>;
+    protected dataOptions: CompositeDataOptions<T>;
+    firstFocusableItem: CompositeDataItem<T> | null;
+    lastFocusableItem: CompositeDataItem<T> | null;
+    focusedItem: PreinitializedWritableAtom<CompositeDataItem<T> | null>;
+    init(data: CompositeData<T>, dataOptions: CompositeDataOptions<T>): void;
+    isFocusable(itemAtom: CompositeDataItem<T>): boolean;
+    focus(itemKey: CompositeItemKey): void;
+    focus(item: CompositeDataItem<T>): void;
+    abstract setFocusPointers(): readonly [first: CompositeDataItem<T> | null, last: CompositeDataItem<T> | null];
+    abstract focusUp(): void;
+    abstract focusDown(): void;
+    abstract focusLeft(): void;
+    abstract focusRight(): void;
+    abstract focusPageUp(): void;
+    abstract focesPageDown(): void;
+    abstract focusToFirst(): void;
+    abstract focusToLast(): void;
+    abstract focusToFirstInRow(): void;
+    abstract focusToLastInRow(): void;
+    abstract focusToTypeAheadMatch(): void;
+}

package/dist/components/ui/composite/FocusProvider/AbstractFocusProvider.js

@@ -0,0 +1,35 @@
+import { a as atom, C as CompositeDataItem } from "../../../../_chunks/CompositeDataItem.js";
+class AbstractFocusProvider {
+  data;
+  dataOptions;
+  firstFocusableItem;
+  lastFocusableItem;
+  focusedItem = atom(null);
+  init(data, dataOptions) {
+    this.data = data;
+    this.dataOptions = dataOptions;
+    const [first, last] = this.setFocusPointers();
+    this.firstFocusableItem = first;
+    if (this.firstFocusableItem) {
+      this.firstFocusableItem.state.setKey("focused", true);
+      this.focusedItem.set(this.firstFocusableItem);
+    }
+    this.lastFocusableItem = last;
+  }
+  isFocusable(itemAtom) {
+    return !itemAtom.state.get().disabled;
+  }
+  focus(item) {
+    const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
+    if (!_item) return;
+    if (this.focusedItem.get()) {
+      if (_item.key === this.focusedItem.get()?.key) return;
+      this.focusedItem.get().state.setKey("focused", false);
+    }
+    _item.state.setKey("focused", true);
+    this.focusedItem.set(_item);
+  }
+}
+export {
+  AbstractFocusProvider
+};

package/dist/components/ui/composite/FocusProvider/ListboxFocusProvider.d.ts

@@ -0,0 +1,16 @@
+import { CompositeDataItem } from '../CompositeDataItem';
+import { AbstractFocusProvider } from './AbstractFocusProvider';
+export declare class ListboxFocusProvider<T extends object> extends AbstractFocusProvider<T> {
+    setFocusPointers(): readonly [CompositeDataItem<T> | null, CompositeDataItem<T> | null];
+    focusUp(): void;
+    focusDown(): void;
+    focusLeft(): void;
+    focusRight(): void;
+    focusPageUp(): void;
+    focesPageDown(): void;
+    focusToFirst(): void;
+    focusToLast(): void;
+    focusToFirstInRow(): void;
+    focusToLastInRow(): void;
+    focusToTypeAheadMatch(): void;
+}

package/dist/components/ui/composite/FocusProvider/ListboxFocusProvider.js

@@ -0,0 +1,67 @@
+import { AbstractFocusProvider } from "./AbstractFocusProvider.js";
+class ListboxFocusProvider extends AbstractFocusProvider {
+  setFocusPointers() {
+    let first = null;
+    let last = null;
+    const lookupData = [...this.data.lookup];
+    for (let index = 0; index < lookupData.length; index++) {
+      const [key, item] = lookupData[index];
+      if (!this.isFocusable(item)) continue;
+      if (!first) first = item;
+      last = item;
+      if (index < lookupData.length - 1) {
+        let newIndex = index === lookupData.length - 1 ? 0 : index + 1;
+        while (newIndex < lookupData.length && !this.isFocusable(lookupData[newIndex][1])) {
+          newIndex = (newIndex + 1) % lookupData.length;
+        }
+        item.pointers.down = lookupData[newIndex][0];
+        lookupData[newIndex][1].pointers.up = key;
+      }
+    }
+    return [first, last];
+  }
+  focusUp() {
+    if (this.focusedItem.get()?.pointers.up) {
+      this.focus(this.focusedItem.get().pointers.up);
+    }
+  }
+  focusDown() {
+    if (this.focusedItem.get()?.pointers.down) {
+      this.focus(this.focusedItem.get().pointers.down);
+    }
+  }
+  focusLeft() {
+    throw new Error("Method not implemented.");
+  }
+  focusRight() {
+    throw new Error("Method not implemented.");
+  }
+  focusPageUp() {
+    throw new Error("Method not implemented.");
+  }
+  focesPageDown() {
+    throw new Error("Method not implemented.");
+  }
+  focusToFirst() {
+    if (this.firstFocusableItem) {
+      this.focus(this.firstFocusableItem);
+    }
+  }
+  focusToLast() {
+    if (this.lastFocusableItem) {
+      this.focus(this.lastFocusableItem);
+    }
+  }
+  focusToFirstInRow() {
+    throw new Error("Method not implemented.");
+  }
+  focusToLastInRow() {
+    throw new Error("Method not implemented.");
+  }
+  focusToTypeAheadMatch() {
+    throw new Error("Method not implemented.");
+  }
+}
+export {
+  ListboxFocusProvider
+};

package/dist/components/ui/composite/FocusProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AbstractFocusProvider';
+export * from './ListboxFocusProvider';

package/dist/components/ui/composite/FocusProvider/index.js

@@ -0,0 +1,6 @@
+import { AbstractFocusProvider } from "./AbstractFocusProvider.js";
+import { ListboxFocusProvider } from "./ListboxFocusProvider.js";
+export {
+  AbstractFocusProvider,
+  ListboxFocusProvider
+};