@douglasneuroinformatics/libui 3.5.2 → 3.6.0

package/dist/hooks.d.ts

@@ -1,8 +1,14 @@
+import { C as ChartConfig, U as UseStorageOptions } from './types-9zYgx7C8.js';
+export { D as DEFAULT_THEME, a as SYS_DARK_MEDIA_QUERY, S as StorageName, b as THEME_ATTRIBUTE, c as THEME_KEY, T as Theme, u as useStorage, d as useTheme } from './types-9zYgx7C8.js';
 import { Promisable } from 'type-fest';
 import { RefObject, useEffect, Dispatch, SetStateAction } from 'react';
 import * as zustand from 'zustand';
 import { T as TranslationNamespace, L as Language, a as TranslateFunction } from './types-DTkK8l-q.js';
 
+declare function useChart(): {
+    config: ChartConfig;
+};
+
 type DownloadTextOptions = {
     blobType: 'text/csv' | 'text/plain';
 };
@@ -60,69 +66,12 @@ declare const useNotificationsStore: zustand.UseBoundStore<zustand.StoreApi<Noti
 type Handler = (event: MouseEvent) => void;
 declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: 'mousedown' | 'mouseup'): void;
 
-type StorageName = 'localStorage' | 'sessionStorage';
-type StorageEventMap = {
-    [K in StorageName]: CustomEvent;
-};
-declare global {
-    interface WindowEventMap extends StorageEventMap {
-    }
-}
-/**
- * Represents the options for customizing the behavior of serialization and deserialization.
- * @template T - The type of the state to be stored in storage.
- */
-type UseStorageOptions<T> = {
-    /** A function to deserialize the stored value. */
-    deserializer?: (value: string) => T;
-    /**
-     * If `true` (default), the hook will initialize reading the storage. In SSR, you should set it to `false`, returning the initial value initially.
-     * @default true
-     */
-    initializeWithValue?: boolean;
-    /** A function to serialize the value before storing it. */
-    serializer?: (value: T) => string;
-};
-/**
- * Custom hook that uses local or session storage to persist state across page reloads.
- * @template T - The type of the state to be stored in storage.
- * @param key - The key under which the value will be stored in  storage.
- * @param initialValue - The initial value of the state or a function that returns the initial value.
- * @param options - Options for customizing the behavior of serialization and deserialization (optional).
- * @returns A tuple containing the stored value and a function to set the value.
- * @public
- * @example
- * ```tsx
- * const [count, setCount] = useStorage('count', 0);
- * // Access the `count` value and the `setCount` function to update it.
- * ```
- */
-declare function useStorage<T>(key: string, initialValue: (() => T) | T, storageName: StorageName, options?: UseStorageOptions<T>): [T, Dispatch<SetStateAction<T>>];
-
 /** Custom hook that uses local storage to persist state across page reloads */
 declare function useLocalStorage<T>(key: string, initialValue: (() => T) | T, options?: UseStorageOptions<T>): [T, Dispatch<SetStateAction<T>>];
 
 /** Custom hook that uses session storage to persist state across page reloads */
 declare function useSessionStorage<T>(key: string, initialValue: (() => T) | T, options?: UseStorageOptions<T>): [T, Dispatch<SetStateAction<T>>];
 
-type Theme = 'dark' | 'light';
-type UpdateTheme = (theme: Theme) => void;
-/** @private */
-declare const DEFAULT_THEME: Theme;
-/** @private */
-declare const THEME_ATTRIBUTE = "data-mode";
-/** @private */
-declare const THEME_KEY = "theme";
-/** @private */
-declare const SYS_DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
-/**
- * Returns the current theme and a function to update the current theme
- *
- * The reason the implementation of this hook is rather convoluted is for
- * cases where the theme is updated outside this hook
- */
-declare function useTheme(): readonly [Theme, UpdateTheme];
-
 declare function useTranslation<TNamespace extends TranslationNamespace | undefined = undefined>(namespace?: TNamespace): {
     changeLanguage: (language: Language) => void;
     resolvedLanguage: "fr" | "en";
@@ -135,4 +84,4 @@ type WindowSize = {
 };
 declare function useWindowSize(): WindowSize;
 
-export { DEFAULT_THEME, type NotificationInterface, type NotificationsStore, SYS_DARK_MEDIA_QUERY, type StorageName, THEME_ATTRIBUTE, THEME_KEY, type Theme, type UseStorageOptions, type WindowSize, useDownload, useEventCallback, useEventListener, useInterval, useIsomorphicLayoutEffect, useLocalStorage, useMediaQuery, useNotificationsStore, useOnClickOutside, useSessionStorage, useStorage, useTheme, useTranslation, useWindowSize };
+export { type NotificationInterface, type NotificationsStore, UseStorageOptions, type WindowSize, useChart, useDownload, useEventCallback, useEventListener, useInterval, useIsomorphicLayoutEffect, useLocalStorage, useMediaQuery, useNotificationsStore, useOnClickOutside, useSessionStorage, useTranslation, useWindowSize };

package/dist/hooks.js

@@ -3,6 +3,7 @@ import {
   SYS_DARK_MEDIA_QUERY,
   THEME_ATTRIBUTE,
   THEME_KEY,
+  useChart,
   useDownload,
   useEventCallback,
   useEventListener,
@@ -17,7 +18,7 @@ import {
   useTheme,
   useTranslation,
   useWindowSize
-} from "./chunk-AFNJZUOE.js";
+} from "./chunk-TVVMHFB6.js";
 import "./chunk-53GZFQK3.js";
 import "./chunk-IX6RFIQL.js";
 export {
@@ -25,6 +26,7 @@ export {
   SYS_DARK_MEDIA_QUERY,
   THEME_ATTRIBUTE,
   THEME_KEY,
+  useChart,
   useDownload,
   useEventCallback,
   useEventListener,

package/dist/tailwind/config.cjs

@@ -23,13 +23,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 
 // src/tailwind/config.cts
-var import_lodash_es = require("lodash-es");
 var fs = require("fs");
 var path = require("path");
 var animate = require("tailwindcss-animate");
 var containerQueries = require("@tailwindcss/container-queries");
-var headlessui = require("@headlessui/tailwindcss");
 var plugin = require("tailwindcss/plugin");
+var _ = require("lodash-es");
 var packageRoot = path.dirname(require.resolve("@douglasneuroinformatics/libui/package.json"));
 var isDev = fs.existsSync(path.resolve(packageRoot, "src"));
 var config = ({
@@ -54,7 +53,6 @@ var config = ({
     plugins: [
       animate,
       containerQueries,
-      headlessui,
       plugin((api) => {
         api.addUtilities({
           ".scrollbar-none": {
@@ -77,7 +75,7 @@ var config = ({
           xl: "3rem"
         }
       },
-      extend: (0, import_lodash_es.merge)(
+      extend: _.merge(
         {
           animation: {
             "accordion-down": "accordion-down 0.2s ease-out",

package/dist/tailwind/config.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tailwind/config.cts"],"sourcesContent":["import type { Config } from 'tailwindcss';\nimport type { CustomThemeConfig, PluginsConfig } from 'tailwindcss/types/config';\n\nimport fs = require('node:fs');\nimport path = require('node:path');\n\nimport animate = require('tailwindcss-animate');\nimport containerQueries = require('@tailwindcss/container-queries');\nimport headlessui = require('@headlessui/tailwindcss');\nimport plugin = require('tailwindcss/plugin');\nimport { merge } from 'lodash-es';\n\nconst packageRoot = path.dirname(require.resolve('@douglasneuroinformatics/libui/package.json'));\n\nconst isDev = fs.existsSync(path.resolve(packageRoot, 'src'));\n\ntype ConfigOptions = {\n  content?: string[];\n  include?: string[];\n  plugins?: PluginsConfig;\n  root?: string;\n  extend?: {\n    theme?: Partial<CustomThemeConfig>;\n  };\n};\n\nconst config = ({\n  content = [],\n  include = [],\n  root = undefined,\n  plugins = [],\n  extend = {}\n}: ConfigOptions = {}): Config => {\n  if (isDev) {\n    content.push(path.resolve(packageRoot, 'src/**/*.{js,jsx,ts,tsx}'));\n  } else {\n    content.push(path.resolve(packageRoot, 'dist/**/*.js'));\n  }\n\n  for (const id of include) {\n    const baseDir = path.dirname(require.resolve(`${id}/package.json`, { paths: root ? [root] : undefined }));\n    content.push(path.resolve(baseDir, 'src/**/*.{js,ts,jsx,tsx}'));\n  }\n\n  return {\n    content,\n    darkMode: ['class', '[data-mode=\"dark\"]'],\n    plugins: [\n      animate,\n      containerQueries,\n      headlessui,\n      plugin((api) => {\n        api.addUtilities({\n          '.scrollbar-none': {\n            '&::-webkit-scrollbar': {\n              display: 'none'\n            },\n            '-ms-overflow-style': 'none',\n            'scrollbar-width': 'none'\n          }\n        });\n      }),\n      ...plugins\n    ],\n    theme: {\n      container: {\n        center: true,\n        padding: {\n          DEFAULT: '1rem',\n          md: '2rem',\n          xl: '3rem'\n        }\n      },\n      extend: merge(\n        {\n          animation: {\n            'accordion-down': 'accordion-down 0.2s ease-out',\n            'accordion-up': 'accordion-up 0.2s ease-out',\n            spinner: 'spinner-spin 1.7s infinite ease, round 1.7s infinite ease'\n          },\n          borderRadius: {\n            lg: `var(--radius)`,\n            md: `calc(var(--radius) - 2px)`,\n            sm: 'calc(var(--radius) - 4px)'\n          },\n          colors: {\n            accent: {\n              DEFAULT: 'var(--accent)',\n              foreground: 'var(--accent-foreground)'\n            },\n            background: 'var(--background)',\n            border: 'var(--border)',\n            card: {\n              DEFAULT: 'var(--card)',\n              foreground: 'var(--card-foreground)'\n            },\n            destructive: {\n              DEFAULT: 'var(--destructive)',\n              foreground: 'var(--destructive-foreground)'\n            },\n            foreground: 'var(--foreground)',\n            input: 'var(--input)',\n            muted: {\n              DEFAULT: 'var(--muted)',\n              foreground: 'var(--muted-foreground)'\n            },\n            popover: {\n              DEFAULT: 'var(--popover)',\n              foreground: 'var(--popover-foreground)'\n            },\n            primary: {\n              DEFAULT: 'var(--primary)',\n              foreground: 'var(--primary-foreground)'\n            },\n            ring: 'var(--ring)',\n            secondary: {\n              DEFAULT: 'var(--secondary)',\n              foreground: 'var(--secondary-foreground)'\n            }\n          },\n          keyframes: {\n            'accordion-down': {\n              from: { height: '0' },\n              to: { height: 'var(--radix-accordion-content-height)' }\n            },\n            'accordion-up': {\n              from: { height: 'var(--radix-accordion-content-height)' },\n              to: { height: '0' }\n            },\n            round: {\n              '0%': {\n                transform: 'rotate(0deg)'\n              },\n              '100%': {\n                transform: 'rotate(360deg)'\n              }\n            },\n            'spinner-spin': {\n              '0%, 5%, 95%, 100%': {\n                boxShadow: `0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em`\n              },\n              '10%, 59%': {\n                boxShadow: `0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em`\n              },\n              '20%': {\n                boxShadow: `0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em`\n              },\n              '38%': {\n                boxShadow: `0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em`\n              }\n            }\n          },\n          screens: {\n            '2xl': '1400px'\n          }\n        },\n        extend.theme\n      )\n    }\n  };\n};\n\nexport = config;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/tailwind/config.cts"],"sourcesContent":["import type { Config } from 'tailwindcss';\nimport type { CustomThemeConfig, PluginsConfig } from 'tailwindcss/types/config';\n\nimport fs = require('node:fs');\nimport path = require('node:path');\n\nimport animate = require('tailwindcss-animate');\nimport containerQueries = require('@tailwindcss/container-queries');\nimport plugin = require('tailwindcss/plugin');\nimport _ = require('lodash-es');\n\nconst packageRoot = path.dirname(require.resolve('@douglasneuroinformatics/libui/package.json'));\n\nconst isDev = fs.existsSync(path.resolve(packageRoot, 'src'));\n\ntype ConfigOptions = {\n  content?: string[];\n  include?: string[];\n  plugins?: PluginsConfig;\n  root?: string;\n  extend?: {\n    theme?: Partial<CustomThemeConfig>;\n  };\n};\n\nconst config = ({\n  content = [],\n  include = [],\n  root = undefined,\n  plugins = [],\n  extend = {}\n}: ConfigOptions = {}): Config => {\n  if (isDev) {\n    content.push(path.resolve(packageRoot, 'src/**/*.{js,jsx,ts,tsx}'));\n  } else {\n    content.push(path.resolve(packageRoot, 'dist/**/*.js'));\n  }\n\n  for (const id of include) {\n    const baseDir = path.dirname(require.resolve(`${id}/package.json`, { paths: root ? [root] : undefined }));\n    content.push(path.resolve(baseDir, 'src/**/*.{js,ts,jsx,tsx}'));\n  }\n\n  return {\n    content,\n    darkMode: ['class', '[data-mode=\"dark\"]'],\n    plugins: [\n      animate,\n      containerQueries,\n      plugin((api) => {\n        api.addUtilities({\n          '.scrollbar-none': {\n            '&::-webkit-scrollbar': {\n              display: 'none'\n            },\n            '-ms-overflow-style': 'none',\n            'scrollbar-width': 'none'\n          }\n        });\n      }),\n      ...plugins\n    ],\n    theme: {\n      container: {\n        center: true,\n        padding: {\n          DEFAULT: '1rem',\n          md: '2rem',\n          xl: '3rem'\n        }\n      },\n      extend: _.merge(\n        {\n          animation: {\n            'accordion-down': 'accordion-down 0.2s ease-out',\n            'accordion-up': 'accordion-up 0.2s ease-out',\n            spinner: 'spinner-spin 1.7s infinite ease, round 1.7s infinite ease'\n          },\n          borderRadius: {\n            lg: `var(--radius)`,\n            md: `calc(var(--radius) - 2px)`,\n            sm: 'calc(var(--radius) - 4px)'\n          },\n          colors: {\n            accent: {\n              DEFAULT: 'var(--accent)',\n              foreground: 'var(--accent-foreground)'\n            },\n            background: 'var(--background)',\n            border: 'var(--border)',\n            card: {\n              DEFAULT: 'var(--card)',\n              foreground: 'var(--card-foreground)'\n            },\n            destructive: {\n              DEFAULT: 'var(--destructive)',\n              foreground: 'var(--destructive-foreground)'\n            },\n            foreground: 'var(--foreground)',\n            input: 'var(--input)',\n            muted: {\n              DEFAULT: 'var(--muted)',\n              foreground: 'var(--muted-foreground)'\n            },\n            popover: {\n              DEFAULT: 'var(--popover)',\n              foreground: 'var(--popover-foreground)'\n            },\n            primary: {\n              DEFAULT: 'var(--primary)',\n              foreground: 'var(--primary-foreground)'\n            },\n            ring: 'var(--ring)',\n            secondary: {\n              DEFAULT: 'var(--secondary)',\n              foreground: 'var(--secondary-foreground)'\n            }\n          },\n          keyframes: {\n            'accordion-down': {\n              from: { height: '0' },\n              to: { height: 'var(--radix-accordion-content-height)' }\n            },\n            'accordion-up': {\n              from: { height: 'var(--radix-accordion-content-height)' },\n              to: { height: '0' }\n            },\n            round: {\n              '0%': {\n                transform: 'rotate(0deg)'\n              },\n              '100%': {\n                transform: 'rotate(360deg)'\n              }\n            },\n            'spinner-spin': {\n              '0%, 5%, 95%, 100%': {\n                boxShadow: `0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em`\n              },\n              '10%, 59%': {\n                boxShadow: `0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em`\n              },\n              '20%': {\n                boxShadow: `0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em`\n              },\n              '38%': {\n                boxShadow: `0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em`\n              }\n            }\n          },\n          screens: {\n            '2xl': '1400px'\n          }\n        },\n        extend.theme\n      )\n    }\n  };\n};\n\nexport = config;\n"],"mappings":"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","names":[]}

package/dist/types-9zYgx7C8.d.ts

@@ -0,0 +1,75 @@
+import { Dispatch, SetStateAction } from 'react';
+
+type StorageName = 'localStorage' | 'sessionStorage';
+type StorageEventMap = {
+    [K in StorageName]: CustomEvent;
+};
+declare global {
+    interface WindowEventMap extends StorageEventMap {
+    }
+}
+/**
+ * Represents the options for customizing the behavior of serialization and deserialization.
+ * @template T - The type of the state to be stored in storage.
+ */
+type UseStorageOptions<T> = {
+    /** A function to deserialize the stored value. */
+    deserializer?: (value: string) => T;
+    /**
+     * If `true` (default), the hook will initialize reading the storage. In SSR, you should set it to `false`, returning the initial value initially.
+     * @default true
+     */
+    initializeWithValue?: boolean;
+    /** A function to serialize the value before storing it. */
+    serializer?: (value: T) => string;
+};
+/**
+ * Custom hook that uses local or session storage to persist state across page reloads.
+ * @template T - The type of the state to be stored in storage.
+ * @param key - The key under which the value will be stored in  storage.
+ * @param initialValue - The initial value of the state or a function that returns the initial value.
+ * @param options - Options for customizing the behavior of serialization and deserialization (optional).
+ * @returns A tuple containing the stored value and a function to set the value.
+ * @public
+ * @example
+ * ```tsx
+ * const [count, setCount] = useStorage('count', 0);
+ * // Access the `count` value and the `setCount` function to update it.
+ * ```
+ */
+declare function useStorage<T>(key: string, initialValue: (() => T) | T, storageName: StorageName, options?: UseStorageOptions<T>): [T, Dispatch<SetStateAction<T>>];
+
+type Theme = 'dark' | 'light';
+type UpdateTheme = (theme: Theme) => void;
+/** @private */
+declare const DEFAULT_THEME: Theme;
+/** @private */
+declare const THEME_ATTRIBUTE = "data-mode";
+/** @private */
+declare const THEME_KEY = "theme";
+/** @private */
+declare const SYS_DARK_MEDIA_QUERY = "(prefers-color-scheme: dark)";
+/**
+ * Returns the current theme and a function to update the current theme
+ *
+ * The reason the implementation of this hook is rather convoluted is for
+ * cases where the theme is updated outside this hook
+ */
+declare function useTheme(): readonly [Theme, UpdateTheme];
+
+type ChartConfig = {
+    [key: string]: {
+        icon?: React.ComponentType;
+        label?: React.ReactNode;
+    } & ({
+        color?: never;
+        theme: {
+            [K in Theme]: string;
+        };
+    } | {
+        color?: string;
+        theme?: never;
+    });
+};
+
+export { type ChartConfig as C, DEFAULT_THEME as D, type StorageName as S, type Theme as T, type UseStorageOptions as U, SYS_DARK_MEDIA_QUERY as a, THEME_ATTRIBUTE as b, THEME_KEY as c, useTheme as d, useStorage as u };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "3.5.2",
-  "packageManager": "pnpm@9.11.0",
+  "version": "3.6.0",
+  "packageManager": "pnpm@9.12.1",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
   "license": "Apache-2.0",
@@ -69,92 +69,90 @@
     "zod": "^3.23.6"
   },
   "dependencies": {
-    "@douglasneuroinformatics/libjs": "^0.7.0",
+    "@douglasneuroinformatics/libjs": "^0.8.0",
     "@douglasneuroinformatics/libui-form-types": "^0.11.0",
-    "@headlessui/tailwindcss": "^0.2.1",
-    "@heroicons/react": "^2.1.5",
-    "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-alert-dialog": "^1.1.1",
-    "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-checkbox": "^1.1.1",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-context-menu": "^2.2.1",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-context-menu": "^2.2.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.1.1",
-    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-radio-group": "^1.2.0",
-    "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "framer-motion": "^11.5.2",
+    "framer-motion": "^11.11.7",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.438.0",
-    "react-dropzone": "^14.2.3",
+    "lucide-react": "^0.451.0",
+    "react-dropzone": "^14.2.9",
     "react-error-boundary": "^4.0.13",
-    "react-resizable-panels": "^2.1.2",
+    "react-resizable-panels": "^2.1.4",
     "recharts": "^2.12.7",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
-    "ts-pattern": "^5.3.1",
-    "type-fest": "^4.26.0",
+    "ts-pattern": "^5.4.0",
+    "type-fest": "^4.26.1",
     "vaul": "^0.9.1",
     "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.4.1",
-    "@douglasneuroinformatics/eslint-config": "^5.1.7",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@douglasneuroinformatics/eslint-config": "^5.2.1",
     "@douglasneuroinformatics/prettier-config": "^0.0.1",
     "@douglasneuroinformatics/semantic-release": "^0.0.1",
     "@douglasneuroinformatics/tsconfig": "^1.0.2",
-    "@faker-js/faker": "^9.0.1",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/components": "^8.2.9",
-    "@storybook/icons": "^1.2.10",
-    "@storybook/manager-api": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/theming": "^8.2.9",
+    "@faker-js/faker": "^9.0.3",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/components": "^8.3.5",
+    "@storybook/icons": "^1.2.12",
+    "@storybook/manager-api": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/theming": "^8.3.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.14.2",
-    "@types/react": "^18.3.5",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@vitejs/plugin-react-swc": "^3.7.1",
+    "@vitest/coverage-v8": "^2.1.2",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.1",
+    "eslint": "^9.12.0",
     "happy-dom": "^14.12.0",
-    "husky": "^9.1.5",
-    "jsdom": "25.0.0",
-    "postcss": "^8.4.45",
+    "husky": "^9.1.6",
+    "jsdom": "25.0.1",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.6",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "sort-json": "^2.0.1",
-    "storybook": "^8.2.9",
-    "tsup": "^8.2.4",
-    "typescript": "~5.5.4",
-    "vite": "5.4.3",
-    "vitest": "^2.0.5"
+    "storybook": "^8.3.5",
+    "tsup": "^8.3.0",
+    "typescript": "5.5.x",
+    "vite": "5.4.8",
+    "vitest": "^2.1.2"
   },
   "commitlint": {
     "extends": [

package/src/components/Chart/Chart.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+
+import { Chart } from './Chart';
+
+import type { ChartConfig } from './types';
+
+const chartData = [
+  { desktop: 186, mobile: 80, month: 'January' },
+  { desktop: 305, mobile: 200, month: 'February' },
+  { desktop: 237, mobile: 120, month: 'March' },
+  { desktop: 73, mobile: 190, month: 'April' },
+  { desktop: 209, mobile: 130, month: 'May' },
+  { desktop: 214, mobile: 140, month: 'June' }
+];
+
+const chartConfig = {
+  desktop: {
+    color: '#2563eb',
+    label: 'Desktop'
+  },
+  mobile: {
+    color: '#60a5fa',
+    label: 'Mobile'
+  }
+} satisfies ChartConfig;
+
+type Story = StoryObj<typeof Chart>;
+
+export default {
+  component: Chart
+} as Meta<typeof Chart>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <BarChart accessibilityLayer data={chartData}>
+        <CartesianGrid vertical={false} />
+        <Chart.Tooltip content={<Chart.TooltipContent />} />
+        <Chart.Legend content={<Chart.LegendContent />} />
+        <XAxis
+          axisLine={false}
+          dataKey="month"
+          tickFormatter={(value: string) => value.slice(0, 3)}
+          tickLine={false}
+          tickMargin={10}
+        />
+        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+        <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+      </BarChart>
+    ),
+    className: 'min-h-[200px] w-full',
+    config: chartConfig
+  }
+};

package/src/components/Chart/Chart.tsx

@@ -0,0 +1,14 @@
+import { Legend, Tooltip } from 'recharts';
+
+import { ChartContainer } from './ChartContainer';
+import { ChartLegendContent } from './ChartLegendContent';
+import { ChartStyle } from './ChartStyle';
+import { ChartTooltipContent } from './ChartTooltipContent';
+
+export const Chart = Object.assign(ChartContainer, {
+  Legend,
+  LegendContent: ChartLegendContent,
+  Style: ChartStyle,
+  Tooltip,
+  TooltipContent: ChartTooltipContent
+});

package/src/components/Chart/ChartContainer.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, useId } from 'react';
+
+import { ResponsiveContainer } from 'recharts';
+
+import { ChartContext } from '@/context/ChartContext';
+import { cn } from '@/utils';
+
+import { Chart } from './Chart';
+
+import type { ChartConfig } from './types';
+
+export const ChartContainer = forwardRef<
+  HTMLDivElement,
+  {
+    children: React.ComponentProps<typeof ResponsiveContainer>['children'];
+    config: ChartConfig;
+  } & React.ComponentProps<'div'>
+>(function ChartContainer({ children, className, config, id, ...props }, ref) {
+  const uniqueId = useId();
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        className={cn(
+          "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        data-chart={chartId}
+        ref={ref}
+        {...props}
+      >
+        <Chart.Style config={config} id={chartId} />
+        <ResponsiveContainer>{children}</ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});

package/src/components/Chart/ChartLegendContent.tsx

@@ -0,0 +1,56 @@
+import { forwardRef } from 'react';
+
+import type { LegendProps } from 'recharts';
+
+import { useChart } from '@/hooks/useChart';
+import { cn } from '@/utils';
+
+import { getPayloadConfigFromPayload } from './utils';
+
+export const ChartLegendContent = forwardRef<
+  HTMLDivElement,
+  {
+    hideIcon?: boolean;
+    nameKey?: string;
+  } & Pick<LegendProps, 'payload' | 'verticalAlign'> &
+    React.ComponentProps<'div'>
+>(function ChartLegendContent({ className, hideIcon = false, nameKey, payload, verticalAlign = 'bottom' }, ref) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}
+      ref={ref}
+    >
+      {payload.map((item) => {
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        const key = `${nameKey ?? item.dataKey ?? 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            className={cn('flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground')}
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            key={item.value}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+});

package/src/components/Chart/ChartStyle.tsx

@@ -0,0 +1,33 @@
+import type { ChartConfig } from './types';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { dark: '.dark', light: '' } as const;
+
+export const ChartStyle = ({ config, id }: { config: ChartConfig; id: string }) => {
+  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme ?? config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join('\n')}
+}
+`
+          )
+          .join('\n')
+      }}
+    />
+  );
+};