@bccampus/ui-components 0.7.2 → 0.8.0

package/dist/components/ui/composite/{composite-component.js → components/composite-component.js}

@@ -1,29 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useImperativeHandle, useMemo, useEffect } from "react";
+import { useCallback, useImperativeHandle, 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",
-    groupRole: "group",
-    itemRole: "option"
-  },
-  grid: {
-    rootRole: "grid",
-    groupRole: "rowgroup",
-    itemRole: "row"
-  },
-  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;
-};
+import { useId } from "../../../../hooks/use-id.js";
+import { useRequiredRef } from "../../../../hooks/use-required-ref.js";
+import { isOutsideElement } from "./utils.js";
 function CompositeComponent({
   data,
-  variant,
   rootRole,
   itemRole,
   groupRole,
@@ -43,35 +25,31 @@ function CompositeComponent({
   const $rootRef = useRequiredRef(rootRef);
   const focusElement = useCallback(() => {
     if (softFocus) return;
-    const itemKey = data.focusProvider.focusedItem.get()?.key;
+    const itemKey = data.focusManager.focusedItem.get()?.key;
     if (itemKey && $rootRef.current) {
       const focusedItemEl = $rootRef.current.querySelector(`[data-key="${itemKey}"]`);
       if (focusedItemEl) focusedItemEl.focus();
     }
-  }, [softFocus, data.focusProvider.focusedItem, $rootRef]);
+  }, [softFocus, data.focusManager.focusedItem, $rootRef]);
   useImperativeHandle(handleRef, () => {
     return {
-      focusProvider: data.focusProvider,
-      selectionProvider: data.selectionProvider,
+      focusManager: data.focusManager,
+      selectionManager: data.selectionManager,
       focusElement
     };
   }, [data, focusElement]);
-  const roles = useMemo(
-    () => defaultRoles[variant] ?? { rootRole, groupRole, itemRole },
-    [groupRole, itemRole, rootRole, variant]
-  );
   const intiFocus = useCallback(
     (onlyData) => {
       let initialFocusItem = null;
-      if (initialFocus === "FirstItem") initialFocusItem = data.focusProvider.firstFocusableItem;
+      if (initialFocus === "FirstItem") initialFocusItem = data.focusManager.firstFocusableItem;
       else if (initialFocus === "SelectedItem") {
-        const selecedItem = data.selectionProvider?.selectedKeys.get().values().next().value;
-        initialFocusItem = selecedItem ?? data.focusProvider.firstFocusableItem;
+        const selecedItem = data.selectionManager?.selectedKeys.get().values().next().value;
+        initialFocusItem = selecedItem ?? data.focusManager.firstFocusableItem;
       }
-      data.focusProvider.focus(initialFocusItem);
+      data.focusManager.focus(initialFocusItem);
       if (!onlyData) focusElement();
     },
-    [data.focusProvider, data.selectionProvider?.selectedKeys, focusElement, initialFocus]
+    [data.focusManager, data.selectionManager?.selectedKeys, focusElement, initialFocus]
   );
   const onFocusHandler = useCallback(
     (ev) => {
@@ -88,7 +66,7 @@ function CompositeComponent({
       id: compositeId,
       className,
       tabIndex: initialFocus === "None" ? 0 : -1,
-      role: roles.rootRole,
+      role: rootRole,
       ...props,
       onFocus: onFocusHandler,
       children: [...data].map((item) => /* @__PURE__ */ jsx(
@@ -96,8 +74,8 @@ function CompositeComponent({
         {
           className: itemClassName,
           id: `${compositeId}-${item.key}`,
-          role: roles.itemRole,
-          groupRole: roles.groupRole,
+          role: itemRole,
+          groupRole,
           item,
           render: renderItem,
           itemMouseEventHandler,

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

@@ -0,0 +1,5 @@
+export * from './composite-component.tsx';
+export * from './composite-component-item.tsx';
+export * from './listbox.tsx';
+export * from './utils.ts';
+export type * from './types';

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

@@ -0,0 +1,10 @@
+import { CompositeComponent } from "./composite-component.js";
+import { CompositeComponentItem } from "./composite-component-item.js";
+import { Listbox } from "./listbox.js";
+import { isOutsideElement } from "./utils.js";
+export {
+  CompositeComponent,
+  CompositeComponentItem,
+  Listbox,
+  isOutsideElement
+};

package/dist/components/ui/composite/{listbox.d.ts → components/listbox.d.ts}

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

package/dist/components/ui/composite/{listbox.js → components/listbox.js}

@@ -2,59 +2,64 @@ import { jsx } from "react/jsx-runtime";
 import { CompositeComponent } from "./composite-component.js";
 import { useCallback } from "react";
 import "nanostores";
-import { useKeyboardEvent } from "../../../hooks/use-keyboard-event.js";
-import { useRequiredRef } from "../../../hooks/use-required-ref.js";
+import { useKeyboardEvent } from "../../../../hooks/use-keyboard-event.js";
+import { useRequiredRef } from "../../../../hooks/use-required-ref.js";
+import { c as cn } from "../../../../_chunks/utils.js";
 function Listbox({
   data,
   rootRef,
   handleRef,
   initialFocus = "SelectedItem",
+  className,
   ...props
 }) {
   const $handleRef = useRequiredRef(handleRef);
   const handleKeyboardEvent = useKeyboardEvent(
     {
       ArrowUp: () => {
-        data.focusProvider.focusUp();
+        data.focusManager.focusUp();
         $handleRef.current?.focusElement();
       },
       ArrowDown: () => {
-        data.focusProvider.focusDown();
+        data.focusManager.focusDown();
         $handleRef.current?.focusElement();
       },
       Home: () => {
-        data.focusProvider.focusToFirst();
+        data.focusManager.focusToFirst();
         $handleRef.current?.focusElement();
       },
       End: () => {
-        data.focusProvider.focusToLast();
+        data.focusManager.focusToLast();
         $handleRef.current?.focusElement();
       },
       Space: () => {
-        data.selectionProvider?.toggleSelect();
+        data.selectionManager?.toggleSelect();
         $handleRef.current?.focusElement();
       }
     },
-    [$handleRef, data.focusProvider]
+    [$handleRef, data.focusManager]
   );
   const handleItemMouseEvent = useCallback(
     (item) => {
-      data.focusProvider.focus(item.key);
-      data.selectionProvider?.toggleSelect(item);
+      data.focusManager.focus(item.key);
+      data.selectionManager?.toggleSelect(item);
       $handleRef.current?.focusElement();
     },
-    [$handleRef, data.focusProvider, data.selectionProvider]
+    [$handleRef, data.focusManager, data.selectionManager]
   );
   return /* @__PURE__ */ jsx(
     CompositeComponent,
     {
       rootRef,
       handleRef: $handleRef,
-      variant: "listbox",
+      rootRole: "listbox",
+      groupRole: "group",
+      itemRole: "option",
       data,
       initialFocus,
       onKeyDown: handleKeyboardEvent,
       itemMouseEventHandler: handleItemMouseEvent,
+      className: cn("flex flex-col gap-1", className),
       ...props
     }
   );

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

@@ -0,0 +1,53 @@
+import { AriaRole, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+import { CompositeData } from '../CompositeData';
+import { CompositeDataItemState, CompositeItemKey } from '../types';
+import { IFocusManager } from '../FocusManager';
+import { SelectionManager } from '../SelectionManager';
+import { CompositeDataItem } from '../CompositeDataItem';
+export type InitialFocusTarget = "None" | "LastFocusedItem" | "SelectedItem" | "FirstItem";
+export interface BaseCompositeProps<T extends object> extends React.ComponentPropsWithoutRef<"div"> {
+    data: CompositeData<T>;
+    className?: string;
+    rootRef?: React.RefObject<HTMLDivElement | null>;
+    handleRef?: React.RefObject<CompositeHandle<T> | null>;
+    renderItem: CompositeItemRenderFn<T>;
+    itemClassName?: string;
+    initialFocus?: InitialFocusTarget;
+    /**
+     * Set `item.focused = true`, but not focus on the HTMLElement
+     */
+    softFocus?: boolean;
+}
+export interface CompositeProps<T extends object> extends BaseCompositeProps<T>, CompositeItemEventHandlerFunctions<T> {
+    rootRole: AriaRole;
+    itemRole: AriaRole;
+    groupRole: AriaRole;
+}
+export interface CompositeHandle<T extends object> {
+    focusManager: IFocusManager<T>;
+    focusElement: () => void;
+    selectionManager?: SelectionManager<T>;
+}
+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>;
+    softFocus?: 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;
+}

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+export declare const isOutsideElement: (parent: Element | null, el: Element | null) => boolean;

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

@@ -0,0 +1,8 @@
+const isOutsideElement = (parent, el) => {
+  if (parent === el) return false;
+  const nodeId = !!el?.id && CSS.escape(el.id);
+  return !nodeId || parent?.querySelector(`#${nodeId}`) === null;
+};
+export {
+  isOutsideElement
+};

package/dist/components/ui/composite/create-composite-data.d.ts

@@ -0,0 +1,80 @@
+import { CompositeData } from './CompositeData';
+import { CompositeOptions, CompositeManagerOptions } from './types';
+/**
+ * Returns nanostores object with `CompositeData` instance,
+ *
+ * @example
+ * ```
+ * const items = [...];
+ * const compositeData = createCompositeData(
+ *    items,
+ *    {
+ *       focusManager: new ListboxFocusManager(),
+ *       selectionManager: new SingleSelectionManager(),
+ *    },
+ *    {
+ *       disabledKeys: ["key 02", "key 04", "key 3023"],
+ *       selectedKeys: ["key 207", "key 101", "key 3021"],
+ *       itemChildrenProp: "nodes",
+ *    },
+ * );
+ *
+ * export function CompositeSelectedItems() {
+ *    const composite = useStore(compositeData);
+ *    const selections = useStore(composite.data.selectionManager!.selectedKeys);
+ *    return (
+ *      <div className="py-4 flex gap-2 items-center justify-star ">
+ *        <span className="text-lg font-semibold text-accent-foreground">Selected Items:</span>
+ *        <div className="flex gap-2 flex-wrap items-center justify-start *:bg-blue-100 *:p-2">
+ *          {[...selections].map((selectedKey) => {
+ *            return <span key={selectedKey}>{composite.data.item(selectedKey)?.data.get().name}</span>;
+ *          })}
+ *        </div>
+ *      </div>
+ *    );
+ * }
+ * ```
+ */
+export declare const createCompositeData: <T extends object>(items: T[], managerOptions: CompositeManagerOptions<T>, options?: CompositeOptions) => import('nanostores').ReadableAtom<{
+    data: CompositeData<T>;
+    version: number;
+}>;
+/**
+ * Returns nanostores object with `CompositeData` instance.
+ *
+ * Intialize the store by calling the `fetch` function without any arguments
+ *
+ * @example
+ * ```
+ * const compositeAsyncData = createAsyncCompositeData(
+ *    async (url?: string) => {
+ *      if (!url) return undefined;
+ *
+ *      const response = await fetch(url);
+ *      if (response.ok) {
+ *        const data = await response.json();
+ *        return data.results as NamedListItem[];
+ *      }
+ *
+ *      return null;
+ *    },
+ *    {
+ *      focusManager: new ListboxFocusManager(),
+ *      selectionManager: new MultipleSelectionManager(),
+ *    },
+ *    {
+ *      itemKeyProp: "name",
+ *    },
+ * );
+ *
+ * export function CompositeSomethign() {
+ *    const composite = useStore(compositeAsyncData);
+ *    return <Listbox data={composite.data} ... />
+ * }
+ * ```
+ */
+export declare const createAsyncCompositeData: <T extends object, FnArgs = never>(fetch: (options?: FnArgs) => Promise<T[] | undefined | null>, managerOptions: CompositeManagerOptions<T>, options?: CompositeOptions) => import('nanostores').ReadableAtom<{
+    data: CompositeData<T>;
+    version: number;
+    load: (options?: FnArgs) => void;
+}>;

package/dist/components/ui/composite/create-composite-data.js

@@ -0,0 +1,22 @@
+import { computed } from "nanostores";
+import { CompositeData } from "./CompositeData.js";
+const createCompositeData = (items, managerOptions, options) => {
+  const $store = new CompositeData(items, managerOptions, options);
+  return computed($store.version, (version) => {
+    return { data: $store, version };
+  });
+};
+const createAsyncCompositeData = (fetch, managerOptions, options) => {
+  const load = (options2) => {
+    fetch(options2).then((items) => items && $store.setItems(items));
+  };
+  const $store = new CompositeData(null, managerOptions, options);
+  load();
+  return computed($store.version, (version) => {
+    return { data: $store, version, load };
+  });
+};
+export {
+  createAsyncCompositeData,
+  createCompositeData
+};

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

@@ -1,8 +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';
+export * from './FocusManager/index.ts';
+export * from './SelectionManager/index.ts';
+export * from './components';
+export * from './create-composite-data.ts';
 export type * from './types';

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

@@ -1,22 +1,27 @@
 import { CompositeData } from "./CompositeData.js";
 import { CompositeDataItem } from "./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";
+import { AbstractFocusManager } from "./FocusManager/AbstractFocusManager.js";
+import { ListboxFocusManager } from "./FocusManager/ListboxFocusManager.js";
+import { AbstractSelectionManager } from "./SelectionManager/AbstractSelectionManager.js";
+import { SingleSelectionManager } from "./SelectionManager/SingleSelectionManager.js";
+import { MultipleSelectionManager } from "./SelectionManager/MultipleSelectionManager.js";
+import { CompositeComponent } from "./components/composite-component.js";
+import { CompositeComponentItem } from "./components/composite-component-item.js";
+import { Listbox } from "./components/listbox.js";
+import { isOutsideElement } from "./components/utils.js";
+import { createAsyncCompositeData, createCompositeData } from "./create-composite-data.js";
 export {
-  AbstractFocusProvider,
-  AbstractSelectionProvider,
+  AbstractFocusManager,
+  AbstractSelectionManager,
   CompositeComponent,
   CompositeComponentItem,
   CompositeData,
   CompositeDataItem,
   Listbox,
-  ListboxFocusProvider,
-  MultipleSelectionProvider,
-  SingleSelectionProvider
+  ListboxFocusManager,
+  MultipleSelectionManager,
+  SingleSelectionManager,
+  createAsyncCompositeData,
+  createCompositeData,
+  isOutsideElement
 };

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

@@ -1,26 +1,6 @@
-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';
+import { AbstractFocusManager } from './FocusManager/AbstractFocusManager';
+import { AbstractSelectionManager } from './SelectionManager/AbstractSelectionManager';
 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 type InitialFocusTarget = "None" | "LastFocusedItem" | "SelectedItem" | "FirstItem";
 export interface CompositeOptions {
     disabledKeys?: CompositeItemKey[];
     selectedKeys?: CompositeItemKey[];
@@ -31,9 +11,9 @@ 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 interface CompositeManagerOptions<T extends object> {
+    focusManager: AbstractFocusManager<T>;
+    selectionManager?: AbstractSelectionManager<T>;
 }
 export type CompositeDataOptions<T> = Required<CompositeOptions> & CompositeDataPropGetters<T>;
 export type CompositeDataItemOptions<T> = CompositeDataPropGetters<T> & {
@@ -45,46 +25,4 @@ export interface CompositeDataItemState {
     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;
-    rootRef?: React.RefObject<HTMLDivElement | null>;
-    handleRef?: React.RefObject<CompositeHandle<T> | 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<T extends object> {
-    focusProvider: FocusProvider<T>;
-    focusElement: () => void;
-    selectionProvider?: SelectionProvider<T>;
-}
-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>;
-    softFocus?: boolean;
-}
 export {};

package/dist/components/ui/navigation-menu.js

@@ -55,7 +55,7 @@ function createSlotClone(ownerName) {
   SlotClone.displayName = `${ownerName}.SlotClone`;
   return SlotClone;
 }
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
 function isSlottable(child) {
   return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }

package/dist/components/ui/popover.js

@@ -2478,7 +2478,7 @@ function createSlotClone(ownerName) {
   SlotClone.displayName = `${ownerName}.SlotClone`;
   return SlotClone;
 }
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
 function isSlottable(child) {
   return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './use-effect-after-mount';
 export * from './use-id';
 export * from './use-keyboard-event';
+export * from './use-required-ref';

package/dist/hooks/index.js

@@ -1,9 +1,11 @@
 import { useEffectAfterMount } from "./use-effect-after-mount.js";
 import { useId } from "./use-id.js";
 import { keyboardEventHandler, useKeyboardEvent } from "./use-keyboard-event.js";
+import { useRequiredRef } from "./use-required-ref.js";
 export {
   keyboardEventHandler,
   useEffectAfterMount,
   useId,
-  useKeyboardEvent
+  useKeyboardEvent,
+  useRequiredRef
 };

package/eslint.config.js

@@ -12,7 +12,7 @@ export default defineConfig([
     extends: [
       js.configs.recommended,
       tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
+      reactHooks.configs.flat['recommended-latest'],
       reactRefresh.configs.vite,
     ],
     languageOptions: {

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "type": "module",
-  "packageManager": "yarn@4.10.3",
   "exports": {
     ".": {
       "types": "./dist/components/index.d.ts",
@@ -24,6 +23,7 @@
   },
   "scripts": {
     "dev": "vite",
+    "check": "tsc -b && eslint ./src",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "publish": "yarn build && npm publish --access public --scope=@bccampus",
@@ -39,10 +39,10 @@
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.560.0",
+    "lucide-react": "^0.563.0",
     "nanostores": "^1.1.0",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0"
@@ -56,21 +56,22 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@ladle/react": "^5.1.1",
     "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^24.10.3",
-    "@types/react": "^19.2.7",
+    "@types/node": "^24.10.9",
+    "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "baseline-browser-mapping": "^2.9.17",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.26",
     "glob": "^13.0.0",
-    "globals": "^16.5.0",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.49.0",
-    "vite": "^7.2.7",
+    "globals": "^17.1.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }
-}
+}