@bccampus/ui-components 0.6.1 → 0.7.1

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

@@ -3,9 +3,10 @@ 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;
+    icon?: boolean | 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;
+declare function Button({ className, variant, size, block, icon, asChild, ...props }: ButtonProps): import("react").JSX.Element;
 export { Button, buttonVariants };

package/dist/components/ui/button.js

@@ -24,8 +24,17 @@ const buttonVariants = cva(
         lg: "h-10 text-base",
         icon: "size-9",
         text: "h-9 text-base"
+      },
+      icon: {
+        true: "py-1 px-1 has-[>svg]:px-1 gap-0   [&_svg:not([class*='size-'])]:size-full",
+        false: ""
       }
     },
+    compoundVariants: [
+      { size: ["sm"], icon: true, className: "size-8" },
+      { size: ["default", "icon", "text"], icon: true, className: "size-9" },
+      { size: ["lg"], icon: true, className: "size-10" }
+    ],
     defaultVariants: {
       size: "default",
       block: false,
@@ -33,9 +42,9 @@ const buttonVariants = cva(
     }
   }
 );
-function Button({ className, variant, size, block, asChild = false, ...props }) {
+function Button({ className, variant, size, block, icon, asChild = false, ...props }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ size, block, variant }), className), ...props });
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ size, block, variant, icon }), className), ...props });
 }
 export {
   Button,

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

@@ -35,29 +35,24 @@ class CompositeDataItem {
   }
   *[Symbol.iterator]() {
     if (this.key !== "ALL") yield this;
-    if (this.children)
-      for (const child of this.children)
-        for (const item of child) yield item;
+    if (this.children) for (const child of this.children) for (const item of child) yield item;
   }
   toJSON() {
     const json = { ...this.data.get() };
     if (this.children) {
       json[this.childrenProp] = [];
-      for (const child of this.children)
-        json[this.childrenProp].push(child.toJSON());
+      for (const child of this.children) json[this.childrenProp].push(child.toJSON());
     }
     return json;
   }
   descendants() {
     if (!this.children) return [];
     const descendants = [];
-    this.children.forEach(
-      (child) => {
-        descendants.push(child);
-        const childDescendants = child.descendants();
-        if (childDescendants) descendants.push(...childDescendants);
-      }
-    );
+    this.children.forEach((child) => {
+      descendants.push(child);
+      const childDescendants = child.descendants();
+      if (childDescendants) descendants.push(...childDescendants);
+    });
     return descendants;
   }
   ancestors() {

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

@@ -26,6 +26,7 @@ export declare abstract class AbstractFocusProvider<T extends object> implements
     isFocusable(itemAtom: CompositeDataItem<T>): boolean;
     focus(itemKey: CompositeItemKey): void;
     focus(item: CompositeDataItem<T>): void;
+    focus(item: CompositeDataItem<T> | CompositeItemKey | null): void;
     abstract setFocusPointers(): readonly [first: CompositeDataItem<T> | null, last: CompositeDataItem<T> | null];
     abstract focusUp(): void;
     abstract focusDown(): void;

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

@@ -11,16 +11,13 @@ class AbstractFocusProvider {
     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) {
+    if (!item) return;
     const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
     if (!_item) return;
     if (this.focusedItem.get()) {

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

@@ -21,36 +21,28 @@ class ListboxFocusProvider extends AbstractFocusProvider {
     return [first, last];
   }
   focusUp() {
-    if (this.focusedItem.get()?.pointers.up) {
-      this.focus(this.focusedItem.get().pointers.up);
-    }
+    const focusedItem = this.focusedItem.get();
+    const focusTarget = focusedItem ? focusedItem.pointers.up : this.firstFocusableItem;
+    if (focusTarget) this.focus(focusTarget);
   }
   focusDown() {
-    if (this.focusedItem.get()?.pointers.down) {
-      this.focus(this.focusedItem.get().pointers.down);
-    }
+    const focusedItem = this.focusedItem.get();
+    const focusTarget = focusedItem ? focusedItem.pointers.down : this.firstFocusableItem;
+    if (focusTarget) this.focus(focusTarget);
   }
   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);
-    }
+    this.focus(this.firstFocusableItem);
   }
   focusToLast() {
-    if (this.lastFocusableItem) {
-      this.focus(this.lastFocusableItem);
-    }
+    this.focus(this.lastFocusableItem);
   }
   focusToFirstInRow() {
     throw new Error("Method not implemented.");

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

@@ -7,10 +7,17 @@ export interface SelectionProvider {
     deselect(itemKey?: CompositeItemKey, recursive?: boolean): void;
     toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
 }
+export interface SelectionProviderOptions<T extends object> {
+    onSelect?: (item: T) => void;
+    onDeselect?: (item: T) => void;
+    onChange?: (item: Set<CompositeItemKey>) => void;
+}
 export declare abstract class AbstractSelectionProvider<T extends object> {
     protected data: CompositeData<T>;
     protected dataOptions: CompositeDataOptions<T>;
     selectedKeys: PreinitializedWritableAtom<Set<CompositeItemKey>>;
+    options?: SelectionProviderOptions<T>;
+    constructor(options?: SelectionProviderOptions<T>);
     init(data: CompositeData<T>, dataOptions: CompositeDataOptions<T>): void;
     abstract select(itemKey?: CompositeItemKey, recursive?: boolean): void;
     abstract select(item: CompositeDataItem<T>, recursive?: boolean): void;
@@ -20,4 +27,5 @@ export declare abstract class AbstractSelectionProvider<T extends object> {
     abstract deselect(item?: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
     toggleSelect(itemKey?: CompositeItemKey, recursive?: boolean): void;
     toggleSelect(item: CompositeDataItem<T>, recursive?: boolean): void;
+    toggleSelect(item: CompositeDataItem<T> | CompositeItemKey, recursive?: boolean): void;
 }

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

@@ -4,6 +4,10 @@ class AbstractSelectionProvider {
   data;
   dataOptions;
   selectedKeys = atom(/* @__PURE__ */ new Set());
+  options;
+  constructor(options) {
+    this.options = options;
+  }
   init(data, dataOptions) {
     this.data = data;
     this.dataOptions = dataOptions;

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

@@ -6,13 +6,17 @@ class MultipleSelectionProvider extends AbstractSelectionProvider {
     const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
     if (!_item) return;
     const selectedKeys = _item.select(recursive);
+    this.options?.onSelect?.(_item.data.get());
     this.selectedKeys.set(union(this.selectedKeys.get(), selectedKeys));
+    this.options?.onChange?.(this.selectedKeys.get());
   }
   deselect(item, recursive = false) {
     const _item = item instanceof CompositeDataItem ? item : this.data.lookup.get(item);
     if (!_item) return;
     const deselectedKeys = _item.deselect(recursive);
+    this.options?.onDeselect?.(_item.data.get());
     this.selectedKeys.set(difference(this.selectedKeys.get(), deselectedKeys));
+    this.options?.onChange?.(this.selectedKeys.get());
   }
 }
 export {

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

@@ -9,15 +9,20 @@ class SingleSelectionProvider extends AbstractSelectionProvider {
       const _item2 = this.data.lookup.get(selectedKey);
       if (!_item2) return;
       _item2.deselect(false);
+      this.options?.onDeselect?.(_item2.data.get());
     });
     const selectedKeys = _item.select(false);
+    this.options?.onSelect?.(_item.data.get());
     this.selectedKeys.set(new Set(selectedKeys));
+    this.options?.onChange?.(this.selectedKeys.get());
   }
   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.options?.onDeselect?.(_item.data.get());
     this.selectedKeys.set(difference(this.selectedKeys.get(), deselectedKeys));
+    this.options?.onChange?.(this.selectedKeys.get());
   }
 }
 export {

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

@@ -1,2 +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;
+export declare function CompositeComponentItem<T extends object>({ id, className, item, role, itemMouseEventHandler, itemKeyboardEventHandler, render, softFocus, }: CompositeItemProps<T>): import("react").JSX.Element;

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

@@ -8,7 +8,8 @@ function CompositeComponentItem({
   role,
   itemMouseEventHandler,
   itemKeyboardEventHandler,
-  render
+  render,
+  softFocus
 }) {
   const data = useStore(item.data);
   const state = useStore(item.state);
@@ -26,7 +27,7 @@ function CompositeComponentItem({
       role,
       "aria-disabled": state.disabled,
       "data-key": item.key,
-      tabIndex: !state.disabled ? state.focused ? 0 : -1 : void 0,
+      tabIndex: !softFocus && !state.disabled ? state.focused ? 0 : -1 : void 0,
       className,
       children: [
         render({ data, key: item.key, level: item.level }, state, handlers),
@@ -39,7 +40,8 @@ function CompositeComponentItem({
             render,
             className,
             itemMouseEventHandler,
-            itemKeyboardEventHandler
+            itemKeyboardEventHandler,
+            softFocus
           },
           child.key
         ))

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

@@ -1,2 +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;
+export declare function CompositeComponent<T extends object>({ data, variant, rootRole, itemRole, groupRole, renderItem, className, itemClassName, rootRef, handleRef, id, itemMouseEventHandler, itemKeyboardEventHandler, initialFocus, softFocus, ...props }: CompositeProps<T>): import("react").JSX.Element;

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

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useImperativeHandle, useMemo } from "react";
+import { useCallback, useImperativeHandle, useMemo, useEffect } from "react";
 import { CompositeComponentItem } from "./composite-component-item.js";
 import { useId } from "../../../hooks/use-id.js";
+import { useRequiredRef } from "../../../hooks/use-required-ref.js";
 const defaultRoles = {
   listbox: {
     rootRole: "listbox",
@@ -15,6 +16,11 @@ const defaultRoles = {
   },
   custom: void 0
 };
+const isOutsideElement = (parent, el) => {
+  if (parent === el) return false;
+  const nodeId = !!el?.id && CSS.escape(el.id);
+  return !nodeId || parent?.querySelector(`#${nodeId}`) === null;
+};
 function CompositeComponent({
   data,
   variant,
@@ -24,42 +30,84 @@ function CompositeComponent({
   renderItem,
   className,
   itemClassName,
-  ref,
+  rootRef,
   handleRef,
   id,
   itemMouseEventHandler,
   itemKeyboardEventHandler,
+  initialFocus = "None",
+  softFocus,
   ...props
 }) {
   const compositeId = useId(id);
-  useImperativeHandle(
-    handleRef,
-    () => {
-      return {
-        focusProvider: data.focusProvider,
-        selectionProvider: data.selectionProvider
-      };
-    },
-    [data]
-  );
+  const $rootRef = useRequiredRef(rootRef);
+  const focusElement = useCallback(() => {
+    if (softFocus) return;
+    const itemKey = data.focusProvider.focusedItem.get()?.key;
+    if (itemKey && $rootRef.current) {
+      const focusedItemEl = $rootRef.current.querySelector(`[data-key="${itemKey}"]`);
+      if (focusedItemEl) focusedItemEl.focus();
+    }
+  }, [softFocus, data.focusProvider.focusedItem, $rootRef]);
+  useImperativeHandle(handleRef, () => {
+    return {
+      focusProvider: data.focusProvider,
+      selectionProvider: data.selectionProvider,
+      focusElement
+    };
+  }, [data, focusElement]);
   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
+  const intiFocus = useCallback(
+    (onlyData) => {
+      let initialFocusItem = null;
+      if (initialFocus === "FirstItem") initialFocusItem = data.focusProvider.firstFocusableItem;
+      else if (initialFocus === "SelectedItem") {
+        const selecedItem = data.selectionProvider?.selectedKeys.get().values().next().value;
+        initialFocusItem = selecedItem ?? data.focusProvider.firstFocusableItem;
+      }
+      data.focusProvider.focus(initialFocusItem);
+      if (!onlyData) focusElement();
     },
-    item.key
-  )) });
+    [data.focusProvider, data.selectionProvider?.selectedKeys, focusElement, initialFocus]
+  );
+  const onFocusHandler = useCallback(
+    (ev) => {
+      const fromOut = isOutsideElement($rootRef.current, ev.relatedTarget);
+      if (fromOut) intiFocus(false);
+    },
+    [$rootRef, intiFocus]
+  );
+  useEffect(() => intiFocus(true), [intiFocus]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: $rootRef,
+      id: compositeId,
+      className,
+      tabIndex: initialFocus === "None" ? 0 : -1,
+      role: roles.rootRole,
+      ...props,
+      onFocus: onFocusHandler,
+      children: [...data].map((item) => /* @__PURE__ */ jsx(
+        CompositeComponentItem,
+        {
+          className: itemClassName,
+          id: `${compositeId}-${item.key}`,
+          role: roles.itemRole,
+          groupRole: roles.groupRole,
+          item,
+          render: renderItem,
+          itemMouseEventHandler,
+          itemKeyboardEventHandler,
+          softFocus
+        },
+        item.key
+      ))
+    }
+  );
 }
 export {
   CompositeComponent

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

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

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

@@ -1,53 +1,58 @@
 import { jsx } from "react/jsx-runtime";
 import { CompositeComponent } from "./composite-component.js";
-import { useRef, useCallback } from "react";
+import { useCallback } from "react";
 import "nanostores";
 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();
+import { useRequiredRef } from "../../../hooks/use-required-ref.js";
+function Listbox({
+  data,
+  rootRef,
+  handleRef,
+  initialFocus = "SelectedItem",
+  ...props
+}) {
+  const $handleRef = useRequiredRef(handleRef);
+  const handleKeyboardEvent = useKeyboardEvent(
+    {
+      ArrowUp: () => {
+        data.focusProvider.focusUp();
+        $handleRef.current?.focusElement();
+      },
+      ArrowDown: () => {
+        data.focusProvider.focusDown();
+        $handleRef.current?.focusElement();
+      },
+      Home: () => {
+        data.focusProvider.focusToFirst();
+        $handleRef.current?.focusElement();
+      },
+      End: () => {
+        data.focusProvider.focusToLast();
+        $handleRef.current?.focusElement();
+      },
+      Space: () => {
+        data.selectionProvider?.toggleSelect();
+        $handleRef.current?.focusElement();
+      }
     },
-    Space: () => {
-      data.selectionProvider?.toggleSelect();
-      focusElement();
-    }
-  });
+    [$handleRef, data.focusProvider]
+  );
   const handleItemMouseEvent = useCallback(
     (item) => {
       data.focusProvider.focus(item.key);
       data.selectionProvider?.toggleSelect(item);
-      focusElement();
+      $handleRef.current?.focusElement();
     },
-    [data.focusProvider, data.selectionProvider, focusElement]
+    [$handleRef, data.focusProvider, data.selectionProvider]
   );
   return /* @__PURE__ */ jsx(
     CompositeComponent,
     {
-      ref: compositeRef,
+      rootRef,
+      handleRef: $handleRef,
       variant: "listbox",
       data,
+      initialFocus,
       onKeyDown: handleKeyboardEvent,
       itemMouseEventHandler: handleItemMouseEvent,
       ...props

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

@@ -5,21 +5,22 @@ import { AbstractSelectionProvider, SelectionProvider } from './SelectionProvide
 import { CompositeData } from './CompositeData';
 export type CompositeItemKey = string | number;
 export type CompositeRoles = {
-    variant: 'listbox';
+    variant: "listbox";
     rootRole?: never;
     itemRole?: never;
     groupRole?: never;
 } | {
-    variant: 'grid';
+    variant: "grid";
     rootRole?: never;
     itemRole?: never;
     groupRole?: never;
 } | {
-    variant: 'custom';
+    variant: "custom";
     rootRole: AriaRole;
     itemRole: AriaRole;
     groupRole: AriaRole;
 };
+export type InitialFocusTarget = "None" | "LastFocusedItem" | "SelectedItem" | "FirstItem";
 export interface CompositeOptions {
     disabledKeys?: CompositeItemKey[];
     selectedKeys?: CompositeItemKey[];
@@ -55,14 +56,20 @@ export interface CompositeItemEventHandlerFunctions<T extends object> {
 export interface BaseCompositeProps<T extends object> extends React.ComponentPropsWithoutRef<"div"> {
     data: CompositeData<T>;
     className?: string;
-    ref?: React.Ref<HTMLDivElement>;
-    handleRef?: React.Ref<CompositeHandle>;
+    rootRef?: React.RefObject<HTMLDivElement | null>;
+    handleRef?: React.RefObject<CompositeHandle | null>;
     renderItem: CompositeItemRenderFn<T>;
     itemClassName?: string;
+    initialFocus?: InitialFocusTarget;
+    /**
+     * Set `item.focused = true`, but not focus on the HTMLElement
+     */
+    softFocus?: boolean;
 }
 export type CompositeProps<T extends object> = BaseCompositeProps<T> & CompositeItemEventHandlerFunctions<T> & CompositeRoles;
 export interface CompositeHandle {
     focusProvider: FocusProvider;
+    focusElement: () => void;
     selectionProvider?: SelectionProvider;
 }
 export type CompositeItemRenderFn<T extends object> = (item: {
@@ -78,5 +85,6 @@ export interface CompositeItemProps<T extends object> extends CompositeItemEvent
     item: CompositeDataItem<T>;
     remove?: () => void;
     render: CompositeItemRenderFn<T>;
+    softFocus?: boolean;
 }
 export {};

package/dist/hooks/use-keyboard-event.d.ts

@@ -3,7 +3,7 @@ interface KeyBindings {
     [sequence: string]: (event: KeyboardEvent) => void;
 }
 interface UseKeyboardEventOptions {
-    eventKeyProp: 'key' | 'code';
+    eventKeyProp: "key" | "code";
 }
 export declare function keyboardEventHandler(bindings: KeyBindings, options?: UseKeyboardEventOptions): KeyboardEventHandler;
 /**
@@ -44,7 +44,7 @@ export declare function keyboardEventHandler(bindings: KeyBindings, options?: Us
  *     'escape': clearInput,
  *     'ctrl+c': clearInput,
  *     'ctrl + shift + c': deleteAll,
- *   });
+ *   },[]);
  *
  *   return (
  *      <input
@@ -55,5 +55,5 @@ export declare function keyboardEventHandler(bindings: KeyBindings, options?: Us
  * }
  * ```
  */
-export declare function useKeyboardEvent(bindings: KeyBindings, options?: UseKeyboardEventOptions): KeyboardEventHandler;
+export declare function useKeyboardEvent(bindings: KeyBindings, deps: React.DependencyList, options?: UseKeyboardEventOptions): KeyboardEventHandler;
 export {};

package/dist/hooks/use-keyboard-event.js

@@ -43,8 +43,8 @@ function keyboardEventHandler(bindings, options = defaultOptions) {
     }
   };
 }
-function useKeyboardEvent(bindings, options) {
-  return useMemo(() => keyboardEventHandler(bindings, options), [bindings, options]);
+function useKeyboardEvent(bindings, deps, options) {
+  return useMemo(() => keyboardEventHandler(bindings, options), [deps]);
 }
 export {
   keyboardEventHandler,

package/dist/hooks/use-required-ref.d.ts

@@ -0,0 +1 @@
+export declare function useRequiredRef<T>(ref?: React.RefObject<T | null>): import('react').RefObject<T | null>;

package/dist/hooks/use-required-ref.js

@@ -0,0 +1,8 @@
+import { useRef } from "react";
+function useRequiredRef(ref) {
+  const emptyRef = useRef(null);
+  return ref ?? emptyRef;
+}
+export {
+  useRequiredRef
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "exports": {

package/src/components/ui/button.tsx

@@ -30,13 +30,22 @@ const buttonVariants = cva(
         icon: "size-9",
         text: "h-9 text-base",
       },
+      icon: {
+        true: "py-1 px-1 has-[>svg]:px-1 gap-0   [&_svg:not([class*='size-'])]:size-full",
+        false: "",
+      },
     },
+    compoundVariants: [
+      { size: ["sm"], icon: true, className: "size-8" },
+      { size: ["default", "icon", "text"], icon: true, className: "size-9" },
+      { size: ["lg"], icon: true, className: "size-10" },
+    ],
     defaultVariants: {
       size: "default",
       block: false,
       variant: "default",
     },
-  }
+  },
 );
 
 export type ButtonProps = React.ComponentProps<"button"> &
@@ -44,10 +53,12 @@ export type ButtonProps = React.ComponentProps<"button"> &
     asChild?: boolean;
   };
 
-function Button({ className, variant, size, block, asChild = false, ...props }: ButtonProps) {
+function Button({ className, variant, size, block, icon, asChild = false, ...props }: ButtonProps) {
   const Comp = asChild ? Slot : "button";
 
-  return <Comp data-slot="button" className={cn(buttonVariants({ size, block, variant }), className)} {...props} />;
+  return (
+    <Comp data-slot="button" className={cn(buttonVariants({ size, block, variant, icon }), className)} {...props} />
+  );
 }
 
 export { Button, buttonVariants };