@bccampus/ui-components 0.4.2 → 0.5.0

package/dist/components/ui/composite/SelectionProvider/AbstractSelectionProvider.d.ts

@@ -0,0 +1,23 @@
+import { PreinitializedWritableAtom } from 'nanostores';
+import { CompositeData } from '../CompositeData';
+import { CompositeDataItem } from '../CompositeDataItem';
+import { CompositeDataOptions, CompositeItemKey } from '../types';
+export interface SelectionProvider {
+    select(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+}
+export declare abstract class AbstractSelectionProvider<T extends object> {
+    protected data: CompositeData<T>;
+    protected dataOptions: CompositeDataOptions<T>;
+    selectedKeys: PreinitializedWritableAtom<Set<CompositeItemKey>>;
+    init(data: CompositeData<T>, dataOptions: CompositeDataOptions<T>): void;
+    abstract select(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    abstract select(item: CompositeDataItem<T>, recursive?: boolean): void;
+    abstract select(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
+    abstract deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    abstract deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
+    abstract deselect(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
+}

package/dist/components/ui/composite/SelectionProvider/AbstractSelectionProvider.js

@@ -0,0 +1,20 @@
+import { a as atom, C as CompositeDataItem } from "../../../../_chunks/CompositeDataItem.js";
+class AbstractSelectionProvider {
+  data;
+  dataOptions;
+  selectedKeys = atom(/* @__PURE__ */ new Set());
+  init(data, dataOptions) {
+    this.data = data;
+    this.dataOptions = dataOptions;
+    this.dataOptions.selectedKeys.forEach((selectedKey) => this.select(selectedKey));
+  }
+  toggleSelect(item, recursive = false) {
+    const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusProvider.focusedItem.get();
+    if (!_item) return;
+    if (_item.state.get().selected) this.deselect(_item, recursive);
+    else this.select(_item, recursive);
+  }
+}
+export {
+  AbstractSelectionProvider
+};

package/dist/components/ui/composite/SelectionProvider/MultipleSelectionProvider.d.ts

@@ -0,0 +1,9 @@
+import { CompositeDataItem } from '../CompositeDataItem';
+import { CompositeItemKey } from '../types';
+import { AbstractSelectionProvider } from './AbstractSelectionProvider';
+export declare class MultipleSelectionProvider<T extends object> extends AbstractSelectionProvider<T> {
+    select(itemKey: CompositeItemKey, recursive?: boolean): void;
+    select(item: CompositeDataItem<T>, recursive?: boolean): void;
+    deselect(itemKey: CompositeItemKey, recursive?: boolean): void;
+    deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
+}

package/dist/components/ui/composite/SelectionProvider/MultipleSelectionProvider.js

@@ -0,0 +1,20 @@
+import { C as CompositeDataItem } from "../../../../_chunks/CompositeDataItem.js";
+import { AbstractSelectionProvider } from "./AbstractSelectionProvider.js";
+import { union, difference } from "../../../../lib/set-operations.js";
+class MultipleSelectionProvider extends AbstractSelectionProvider {
+  select(item, recursive = false) {
+    const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
+    if (!_item) return;
+    const selectedKeys = _item.select(recursive);
+    this.selectedKeys.set(union(this.selectedKeys.get(), selectedKeys));
+  }
+  deselect(item, recursive = false) {
+    const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
+    if (!_item) return;
+    const deselectedKeys = _item.deselect(recursive);
+    this.selectedKeys.set(difference(this.selectedKeys.get(), deselectedKeys));
+  }
+}
+export {
+  MultipleSelectionProvider
+};

package/dist/components/ui/composite/SelectionProvider/SingleSelectionProvider.d.ts

@@ -0,0 +1,9 @@
+import { CompositeDataItem } from '../CompositeDataItem';
+import { CompositeItemKey } from '../types';
+import { AbstractSelectionProvider } from './AbstractSelectionProvider';
+export declare class SingleSelectionProvider<T extends object> extends AbstractSelectionProvider<T> {
+    select(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    select(item: CompositeDataItem<T>, recursive?: boolean): void;
+    deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
+    deselect(item: CompositeDataItem<T>, recursive?: boolean): void;
+}

package/dist/components/ui/composite/SelectionProvider/SingleSelectionProvider.js

@@ -0,0 +1,25 @@
+import { C as CompositeDataItem } from "../../../../_chunks/CompositeDataItem.js";
+import { AbstractSelectionProvider } from "./AbstractSelectionProvider.js";
+import { difference } from "../../../../lib/set-operations.js";
+class SingleSelectionProvider extends AbstractSelectionProvider {
+  select(item, _recursive = false) {
+    const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusProvider.focusedItem.get();
+    if (!_item) return;
+    this.selectedKeys.get().forEach((selectedKey) => {
+      const _item2 = this.data.lookup.get(selectedKey);
+      if (!_item2) return;
+      _item2.deselect(false);
+    });
+    const selectedKeys = _item.select(false);
+    this.selectedKeys.set(new Set(selectedKeys));
+  }
+  deselect(item, _recursive = false) {
+    const _item = item ? item instanceof CompositeDataItem ? item : this.data.lookup.get(item) : this.data.focusProvider.focusedItem.get();
+    if (!_item) return;
+    const deselectedKeys = _item.deselect(false);
+    this.selectedKeys.set(difference(this.selectedKeys.get(), deselectedKeys));
+  }
+}
+export {
+  SingleSelectionProvider
+};

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

@@ -0,0 +1,3 @@
+export * from './AbstractSelectionProvider';
+export * from './SingleSelectionProvider';
+export * from './MultipleSelectionProvider';

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

@@ -0,0 +1,8 @@
+import { AbstractSelectionProvider } from "./AbstractSelectionProvider.js";
+import { SingleSelectionProvider } from "./SingleSelectionProvider.js";
+import { MultipleSelectionProvider } from "./MultipleSelectionProvider.js";
+export {
+  AbstractSelectionProvider,
+  MultipleSelectionProvider,
+  SingleSelectionProvider
+};

package/dist/components/ui/composite/composite-component-item.d.ts

@@ -0,0 +1,2 @@
+import { CompositeItemProps } from './types';
+export declare function CompositeComponentItem<T extends object>({ id, className, item, role, itemMouseEventHandler, itemKeyboardEventHandler, render, }: CompositeItemProps<T>): import("react").JSX.Element;

package/dist/components/ui/composite/composite-component-item.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useCallback, useSyncExternalStore, useMemo } from "react";
+function listenKeys($store, keys, listener) {
+  let keysSet = new Set(keys).add(void 0);
+  return $store.listen((value, oldValue, changed) => {
+    if (keysSet.has(changed)) {
+      listener(value, oldValue, changed);
+    }
+  });
+}
+let emit = (snapshotRef, onChange) => (value) => {
+  if (snapshotRef.current === value) return;
+  snapshotRef.current = value;
+  onChange();
+};
+function useStore(store, { keys, deps = [store, keys] } = {}) {
+  let snapshotRef = useRef();
+  snapshotRef.current = store.get();
+  let subscribe = useCallback((onChange) => {
+    emit(snapshotRef, onChange)(store.value);
+    return keys?.length > 0 ? listenKeys(store, keys, emit(snapshotRef, onChange)) : store.listen(emit(snapshotRef, onChange));
+  }, deps);
+  let get = () => snapshotRef.current;
+  return useSyncExternalStore(subscribe, get, get);
+}
+function CompositeComponentItem({
+  id,
+  className,
+  item,
+  role,
+  itemMouseEventHandler,
+  itemKeyboardEventHandler,
+  render
+}) {
+  const data = useStore(item.data);
+  const state = useStore(item.state);
+  const handlers = useMemo(() => {
+    if (state.disabled) return {};
+    return {
+      mouseEventHandler: () => itemMouseEventHandler?.(item),
+      keyboardEventHandler: () => itemKeyboardEventHandler?.(item)
+    };
+  }, [state.disabled, item, itemKeyboardEventHandler, itemMouseEventHandler]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      role,
+      "aria-disabled": state.disabled,
+      "data-key": item.key,
+      tabIndex: !state.disabled ? state.focused ? 0 : -1 : void 0,
+      className,
+      children: [
+        render({ data, key: item.key, level: item.level }, state, handlers),
+        item.children && item.children.length > 0 && [...item.children].map((child) => /* @__PURE__ */ jsx(
+          CompositeComponentItem,
+          {
+            id: `${id}-${item.key}`,
+            role,
+            item: child,
+            render,
+            className,
+            itemMouseEventHandler,
+            itemKeyboardEventHandler
+          },
+          child.key
+        ))
+      ]
+    }
+  );
+}
+export {
+  CompositeComponentItem
+};

package/dist/components/ui/composite/composite-component.d.ts

@@ -0,0 +1,2 @@
+import { CompositeProps } from './types';
+export declare function CompositeComponent<T extends object>({ data, variant, rootRole, itemRole, groupRole, renderItem, className, itemClassName, ref, handleRef, id, itemMouseEventHandler, itemKeyboardEventHandler, ...props }: CompositeProps<T>): import("react").JSX.Element;

package/dist/components/ui/composite/composite-component.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { useImperativeHandle, useMemo } from "react";
+import { CompositeComponentItem } from "./composite-component-item.js";
+import { useId } from "../../../hooks/use-id.js";
+const defaultRoles = {
+  listbox: {
+    rootRole: "listbox",
+    groupRole: "group",
+    itemRole: "option"
+  },
+  grid: {
+    rootRole: "grid",
+    groupRole: "rowgroup",
+    itemRole: "row"
+  },
+  custom: void 0
+};
+function CompositeComponent({
+  data,
+  variant,
+  rootRole,
+  itemRole,
+  groupRole,
+  renderItem,
+  className,
+  itemClassName,
+  ref,
+  handleRef,
+  id,
+  itemMouseEventHandler,
+  itemKeyboardEventHandler,
+  ...props
+}) {
+  const compositeId = useId(id);
+  useImperativeHandle(
+    handleRef,
+    () => {
+      return {
+        focusProvider: data.focusProvider,
+        selectionProvider: data.selectionProvider
+      };
+    },
+    [data]
+  );
+  const roles = useMemo(
+    () => defaultRoles[variant] ?? { rootRole, groupRole, itemRole },
+    [groupRole, itemRole, rootRole, variant]
+  );
+  return /* @__PURE__ */ jsx("div", { ref, id: compositeId, className, tabIndex: -1, role: roles.rootRole, ...props, children: [...data].map((item) => /* @__PURE__ */ jsx(
+    CompositeComponentItem,
+    {
+      className: itemClassName,
+      id: `${compositeId}-${item.key}`,
+      role: roles.itemRole,
+      groupRole: roles.groupRole,
+      item,
+      render: renderItem,
+      itemMouseEventHandler,
+      itemKeyboardEventHandler
+    },
+    item.key
+  )) });
+}
+export {
+  CompositeComponent
+};

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

@@ -0,0 +1,7 @@
+export * from './CompositeData.ts';
+export * from './CompositeDataItem.ts';
+export * from './FocusProvider';
+export * from './SelectionProvider';
+export * from './composite-component.tsx';
+export * from './composite-component-item.tsx';
+export * from './listbox.tsx';

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

@@ -0,0 +1,22 @@
+import { CompositeData } from "./CompositeData.js";
+import { C } from "../../../_chunks/CompositeDataItem.js";
+import { AbstractFocusProvider } from "./FocusProvider/AbstractFocusProvider.js";
+import { ListboxFocusProvider } from "./FocusProvider/ListboxFocusProvider.js";
+import { AbstractSelectionProvider } from "./SelectionProvider/AbstractSelectionProvider.js";
+import { SingleSelectionProvider } from "./SelectionProvider/SingleSelectionProvider.js";
+import { MultipleSelectionProvider } from "./SelectionProvider/MultipleSelectionProvider.js";
+import { CompositeComponent } from "./composite-component.js";
+import { CompositeComponentItem } from "./composite-component-item.js";
+import { Listbox } from "./listbox.js";
+export {
+  AbstractFocusProvider,
+  AbstractSelectionProvider,
+  CompositeComponent,
+  CompositeComponentItem,
+  CompositeData,
+  C as CompositeDataItem,
+  Listbox,
+  ListboxFocusProvider,
+  MultipleSelectionProvider,
+  SingleSelectionProvider
+};

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

@@ -0,0 +1,2 @@
+import { BaseCompositeProps } from './types';
+export declare function Listbox<T extends object>({ data, ...props }: BaseCompositeProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { CompositeComponent } from "./composite-component.js";
+import { useRef, useCallback } from "react";
+import { useKeyboardEvent } from "../../../hooks/use-keyboard-event.js";
+function Listbox({ data, ...props }) {
+  const compositeRef = useRef(null);
+  const focusElement = useCallback(() => {
+    const itemKey = data.focusProvider.focusedItem.get()?.key;
+    if (itemKey && compositeRef.current) {
+      const focusedItemEl = compositeRef.current.querySelector(`[data-key="${itemKey}"]`);
+      if (focusedItemEl) focusedItemEl.focus();
+    }
+  }, [data]);
+  const handleKeyboardEvent = useKeyboardEvent({
+    ArrowUp: () => {
+      data.focusProvider.focusUp();
+      focusElement();
+    },
+    ArrowDown: () => {
+      data.focusProvider.focusDown();
+      focusElement();
+    },
+    Home: () => {
+      data.focusProvider.focusToFirst();
+      focusElement();
+    },
+    End: () => {
+      data.focusProvider.focusToLast();
+      focusElement();
+    },
+    Space: () => {
+      data.selectionProvider?.toggleSelect();
+      focusElement();
+    }
+  });
+  const handleItemMouseEvent = useCallback(
+    (item) => {
+      data.focusProvider.focus(item.key);
+      data.selectionProvider?.toggleSelect(item);
+      focusElement();
+    },
+    [data.focusProvider, data.selectionProvider, focusElement]
+  );
+  return /* @__PURE__ */ jsx(
+    CompositeComponent,
+    {
+      ref: compositeRef,
+      variant: "listbox",
+      data,
+      onKeyDown: handleKeyboardEvent,
+      itemMouseEventHandler: handleItemMouseEvent,
+      ...props
+    }
+  );
+}
+export {
+  Listbox
+};

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

@@ -0,0 +1,82 @@
+import { AriaRole, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+import { CompositeDataItem } from './CompositeDataItem';
+import { AbstractFocusProvider, FocusProvider } from './FocusProvider/AbstractFocusProvider';
+import { AbstractSelectionProvider, SelectionProvider } from './SelectionProvider/AbstractSelectionProvider';
+import { CompositeData } from './CompositeData';
+export type CompositeItemKey = string | number;
+export type CompositeRoles = {
+    variant: 'listbox';
+    rootRole?: never;
+    itemRole?: never;
+    groupRole?: never;
+} | {
+    variant: 'grid';
+    rootRole?: never;
+    itemRole?: never;
+    groupRole?: never;
+} | {
+    variant: 'custom';
+    rootRole: AriaRole;
+    itemRole: AriaRole;
+    groupRole: AriaRole;
+};
+export interface CompositeOptions {
+    disabledKeys?: CompositeItemKey[];
+    selectedKeys?: CompositeItemKey[];
+    itemKeyProp?: string;
+    itemChildrenProp?: string;
+}
+interface CompositeDataPropGetters<T> {
+    getItemKey: (item: T) => CompositeItemKey;
+    getItemChildren: (item: T) => T[] | undefined;
+}
+export interface CompositeProviderOptions<T extends object> {
+    focusProvider: AbstractFocusProvider<T>;
+    selectionProvider?: AbstractSelectionProvider<T>;
+}
+export type CompositeDataOptions<T> = Required<CompositeOptions> & CompositeDataPropGetters<T>;
+export type CompositeDataItemOptions<T> = CompositeDataPropGetters<T> & {
+    initialState?: CompositeDataItemState;
+    itemChildrenProp: string;
+};
+export interface CompositeDataItemState {
+    focused: boolean;
+    selected: boolean;
+    disabled: boolean;
+}
+export interface CompositeEventHandlers {
+    mouseEventHandler?: MouseEventHandler<HTMLElement>;
+    keyboardEventHandler?: KeyboardEventHandler<HTMLElement>;
+}
+export interface CompositeItemEventHandlerFunctions<T extends object> {
+    itemMouseEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+    itemKeyboardEventHandler?: (itemAtom: CompositeDataItem<T>) => void;
+}
+export interface BaseCompositeProps<T extends object> extends React.ComponentPropsWithoutRef<"div"> {
+    data: CompositeData<T>;
+    className?: string;
+    ref?: React.Ref<HTMLDivElement>;
+    handleRef?: React.Ref<CompositeHandle>;
+    renderItem: CompositeItemRenderFn<T>;
+    itemClassName?: string;
+}
+export type CompositeProps<T extends object> = BaseCompositeProps<T> & CompositeItemEventHandlerFunctions<T> & CompositeRoles;
+export interface CompositeHandle {
+    focusProvider: FocusProvider;
+    selectionProvider?: SelectionProvider;
+}
+export type CompositeItemRenderFn<T extends object> = (item: {
+    data: T;
+    level: number;
+    key: CompositeItemKey;
+}, state: CompositeDataItemState, eventHandlers: CompositeEventHandlers) => ReactNode;
+export interface CompositeItemProps<T extends object> extends CompositeItemEventHandlerFunctions<T> {
+    id: string;
+    className?: string;
+    role?: AriaRole;
+    groupRole?: AriaRole;
+    item: CompositeDataItem<T>;
+    remove?: () => void;
+    render: CompositeItemRenderFn<T>;
+}
+export {};

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

@@ -0,0 +1 @@
+

package/dist/components/ui/horizontal-list.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+declare const horizontalListVariants: (props?: ({
+    variant?: "overflow" | "contain" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export interface HorizontalListProps extends VariantProps<typeof horizontalListVariants>, React.ComponentProps<"div"> {
+    toolbarLocation?: "bottom" | "top";
+    scrollBy?: number;
+}
+declare function HorizontalList({ variant, className, children, toolbarLocation, scrollBy, ...props }: HorizontalListProps): import("react").JSX.Element;
+export { HorizontalList };

package/dist/components/ui/horizontal-list.js

@@ -0,0 +1,82 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as cn } from "../../_chunks/utils.js";
+import { Button } from "./button.js";
+import { useRef, useCallback } from "react";
+import { c as cva } from "../../_chunks/index2.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$1 = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$1);
+/**
+ * @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: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode);
+const horizontalListVariants = cva(
+  "scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-(--gap-card) overflow-x-auto snap-x snap-mandatory touch-pan-x scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
+  {
+    variants: {
+      variant: {
+        contain: "w-full ",
+        overflow: "w-screen px-(--spacing-section) -ms-(--spacing-section) scroll-px-(--spacing-section)"
+      }
+    },
+    defaultVariants: {
+      variant: "contain"
+    }
+  }
+);
+function HorizontalList({
+  variant,
+  className,
+  children,
+  toolbarLocation = "bottom",
+  scrollBy = 360,
+  ...props
+}) {
+  const containerRef = useRef(null);
+  const scrollLeft = useCallback(() => {
+    containerRef.current?.scrollBy({ left: -scrollBy });
+  }, [scrollBy]);
+  const scrollRight = useCallback(() => {
+    containerRef.current?.scrollBy({ left: scrollBy });
+  }, [scrollBy]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex gap-4", {
+        "flex-col": toolbarLocation === "bottom",
+        "flex-col-reverse": toolbarLocation === "top"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            className: cn(
+              horizontalListVariants({ variant }),
+              className
+            ),
+            ...props,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-center sm:justify-start", children: [
+          /* @__PURE__ */ jsx(Button, { size: "icon", variant: "ghost", className: "rounded-full", onClick: scrollLeft, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-9" }) }),
+          /* @__PURE__ */ jsx(Button, { size: "icon", variant: "ghost", className: "rounded-full", onClick: scrollRight, children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-9" }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  HorizontalList
+};

package/dist/components/ui/icon-generator/generate-tiles.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'react';
+import { TileConfig, TileShape } from './types';
+export declare const generateIconPattern: (width: number, height: number, tileConfig: TileShape | TileConfig) => (TileShape | TileConfig)[][];
+export declare const generateTiles: (pattern: (TileShape | TileConfig)[][], tileSize: number, tileClassName?: string) => (JSX.Element | null)[];