@memori.ai/ui 1.0.4-alpha → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 
 
+## [1.1.0](https://github.com/memori-ai/ui/compare/v1.0.5-alpha...v1.1.0) (2026-02-03)
+
+
+### Features
+
+* add Collapsible component ([58a82f2](https://github.com/memori-ai/ui/commit/58a82f241f2c5c317eb2cbb9a4ac5eea2cbdf509))
+* add ComponentShowcase stories ([2dac871](https://github.com/memori-ai/ui/commit/2dac8715bf14068b047da87c2c0f8da58a1e66be))
+* add dark mode support with theme management hook and update README ([173b387](https://github.com/memori-ai/ui/commit/173b3876311c2957f1cd89db46b27dd3a12ce2bc))
+* added Drawer component to index.ts export ([d8f0f7a](https://github.com/memori-ai/ui/commit/d8f0f7a61c102ccaca6b9db029175ef2409b69f8))
+* enhance theme management with dynamic tenant color settings and update Storybook integration ([e24d2c6](https://github.com/memori-ai/ui/commit/e24d2c6128984f908173bcfe7166ab07bdea3292))
+* implement Alert component with customizable options, improved accessibility, and enhanced styling ([2e0da23](https://github.com/memori-ai/ui/commit/2e0da231797e9326ae9fd1005f93d2c13d47ee81))
+* improved Button component UX and fixed variables.css oklch calculated values ([3e3644a](https://github.com/memori-ai/ui/commit/3e3644a70af893d8264deda9b6ea35700654ee79))
+* improved interaction effects and animations across different components ([4066914](https://github.com/memori-ai/ui/commit/40669144733cb1d0eafce017550bd5d51e439dd7))
+* update component implementations ([de6449e](https://github.com/memori-ai/ui/commit/de6449ed7316e356f774a0a6c1ca6004b03cbf52))
+
+
+### Bug Fixes
+
+* correct oklch color calculation values in variables.css ([ad1013b](https://github.com/memori-ai/ui/commit/ad1013b47dfe8a493aaf6895524d791e7af5f5ed))
+* enhance plugin filtering in Storybook configuration ([d21e63a](https://github.com/memori-ai/ui/commit/d21e63a88407404bf1743e45827e88797bc77054))
+* linting ([2f01329](https://github.com/memori-ai/ui/commit/2f0132972337ab8293a7d5153d86b827bd65033d))
+* **types:** resolve portability error in generated declarations ([9c73d5e](https://github.com/memori-ai/ui/commit/9c73d5ea76268cb8ea08d6e6fa9805678dd19c26))
+* update plugin filtering in Storybook configuration to correctly exclude vite:dts ([f4622bb](https://github.com/memori-ai/ui/commit/f4622bbab397ab17f3b1b04c4b3c8e67c24a7d7a))
+* update Tooltip story to use new styles file ([9db0a3e](https://github.com/memori-ai/ui/commit/9db0a3eb82118122ac17a2e4a987d90ad75762fe))
+* wrong import ([87cd301](https://github.com/memori-ai/ui/commit/87cd30184511195c52a822873715e179b59dd1f4))
+
+## [1.0.5-alpha](https://github.com/memori-ai/ui/compare/v1.0.4-alpha...v1.0.5-alpha) (2026-01-07)
+
+
+### Features
+
+* add storybook for theme design ([0409aa9](https://github.com/memori-ai/ui/commit/0409aa92fc5791ea785eec775a15d3d4957c30c0))
+* configure Vitest with a new setup file for testing-library ([efd8c0a](https://github.com/memori-ai/ui/commit/efd8c0a90f830edeb0186551b23fd604dd107ab9))
+* implement Checkbox component with CSS Modules and updated Storybook ([50f02e4](https://github.com/memori-ai/ui/commit/50f02e40f9a93fa2263fe923d3378772c9f3d797))
+* implement Drawer component with CSS Modules and updated Storybook ([f5e9b16](https://github.com/memori-ai/ui/commit/f5e9b167f91fed987bad32302a76df26c1b19d17))
+* integrate loading styles and update icon imports ([0e458ff](https://github.com/memori-ai/ui/commit/0e458ff4d304312c38ef8feb3648243b3ed3450c))
+* update Card, Checkbox, and Alert snapshots ([5ce66be](https://github.com/memori-ai/ui/commit/5ce66be30e25eb410e589d46fd24fa719d6f08e9))
+* update Card, Checkbox, and Alert snapshots ([b1ae385](https://github.com/memori-ai/ui/commit/b1ae385425a2f303eda94d16ac93ea3a4570c6cb))
+
+
+### Bug Fixes
+
+* style linting ([cc66fa7](https://github.com/memori-ai/ui/commit/cc66fa79279ceeafd19c5447608b255294d833d7))
+
+
+### Changes
+
+* modal component using base-ui with new props and styles ([8f5a58e](https://github.com/memori-ai/ui/commit/8f5a58e0e48b0e7ad292fce5c6a199f73f0ea3e1))
+* remove conditional Vitest browser testing setup ([b5c88b4](https://github.com/memori-ai/ui/commit/b5c88b49eaa279e535254eb9592bafe8a2ce9e5a))
+* remove old story files for definitions and icons ([1301efd](https://github.com/memori-ai/ui/commit/1301efd0399d4e4b1017bc3c417a696511c604ac))
+* replace Card component styles with CSS modules and enhance props for better customization ([2d87933](https://github.com/memori-ai/ui/commit/2d879331bbb2d838b57c305435389cdb16f67ea3))
+* replace Select component with new SelectBox component ([a735df6](https://github.com/memori-ai/ui/commit/a735df6c7ae4830d645ce85b878a351fb380888c))
+
 ## [1.0.4-alpha](https://github.com/memori-ai/ui/compare/1.0.1-alpha...v1.0.4-alpha) (2026-01-02)
 
 
@@ -66,4 +119,4 @@
 * add recommended exts ([c830bee](https://github.com/memori-ai/ui/commit/c830beed074b1dc09aa47199c655b95854af3dab))
 * add storybook, tests, and ci ([6b9763a](https://github.com/memori-ai/ui/commit/6b9763ad12d995cdf0b84070a359c56567ae2017))
 * add vite + css lint + build steps ([b435ce3](https://github.com/memori-ai/ui/commit/b435ce37c90f23e8eb996d62d3503b51311f9267))
-* lint staged css ([522b2ed](https://github.com/memori-ai/ui/commit/522b2edb5307b7ea09beaebc4852d3b296ca359f))
+* lint staged css ([522b2ed](https://github.com/memori-ai/ui/commit/522b2edb5307b7ea09beaebc4852d3b296ca359f))

package/README.md

@@ -16,17 +16,92 @@ bun add @memori.ai/ui
 
 ## Usage
 
-Example usage for the Button component:
+### 1. Import Styles (Required)
+
+You **must** import the compiled CSS file in your application's entry point (e.g., `main.tsx` or `App.tsx`) to ensure components are styled correctly.
+
+```tsx
+import '@memori.ai/ui/styles.css'
+```
+
+### 2. Import Components
 
 ```tsx
 import { Button } from '@memori.ai/ui'
+
+function App() {
+  return <Button variant="primary">Click me</Button>
+}
+```
+
+## Theming & Customization
+
+This library uses a **dynamic OKLCH color system**. The entire color palette (shades 100-900) is automatically generated from base primary and secondary colors using CSS Relative Color Syntax.
+
+### Overriding Brand Colors
+
+To customize the theme, simply set the following CSS variables in your application (e.g., in `:root` or a specific container). You do **not** need to define every shade; the library calculates them for you.
+
+```css
+:root {
+  /* Override Primary Color (Purple default) */
+  --memori-primary-rgb: oklch(0.55 0.22 290); /* or hex, rgb, etc. */
+
+  /* Override Secondary Color (Cyan default) */
+  --memori-secondary-rgb: oklch(0.7 0.15 200);
+}
+```
+
+### Dark Mode
+
+The library includes built-in dark mode support. All components automatically adapt when dark mode is enabled.
+
+#### Using the Theme Hook
+
+The easiest way to add theme switching is using the `useTheme` hook:
+
+```tsx
+import { useTheme } from '@memori.ai/ui'
+
+function App() {
+  const { theme, setTheme, toggleTheme } = useTheme()
+
+  return (
+    <button onClick={toggleTheme}>
+      Switch to {theme === 'light' ? 'dark' : 'light'} mode
+    </button>
+  )
+}
 ```
 
-```jsx
-<Button>Click me</Button>
+The hook automatically:
+
+- Detects system preference on first load
+- Persists theme choice in localStorage
+- Applies the theme to the document root
+
+#### Manual Theme Control
+
+You can also control the theme manually by setting a `data-theme` attribute or `dark` class on the document root:
+
+```tsx
+// Set dark mode
+document.documentElement.setAttribute('data-theme', 'dark')
+// or
+document.documentElement.classList.add('dark')
+
+// Set light mode
+document.documentElement.removeAttribute('data-theme')
+document.documentElement.classList.remove('dark')
 ```
 
-To see all components, visit our [Storybook](https://memori-ai.github.io/ui/).
+### Styling Architecture
+
+- **Plain CSS**: We use standard CSS files, not CSS Modules or CSS-in-JS.
+- **Namespace**: All CSS classes and variables are prefixed with `memori-` to avoid conflicts (e.g., `.memori-button`, `--memori-spacing-md`).
+- **BEM Convention**: Classes follow the Block Element Modifier convention (e.g., `.memori-card__header--active`).
+- **Theme**: Is defined inside the '/theme/variables.css' file.
+- **Icons**: We use [Lucide React](https://lucide.dev) for all icons.
 
 ## Development
 
@@ -46,7 +121,7 @@ To run tests (in watch mode):
 
 ```bash
 bun run test
-# this is not the same as `bun test` 
+# this is not the same as `bun test`
 # `bun test` runs the tests using Bun test runner and it's not compatible with our setup
 ```
 
@@ -96,10 +171,11 @@ bun run release
 
 - [Bun](https://bun.com)
 - [React](https://react.dev)
-- [React Aria](https://react-spectrum.adobe.com/react-aria/index.html)
+- [@base-ui/react](https://github.com/base-ui/react)
 - [Storybook](https://storybook.js.org)
 - [Vite](https://vitejs.dev)
 - [Vitest](https://vitest.dev)
 - [Playwright](https://playwright.dev)
 - [React Testing Library](https://testing-library.com/react)
 - [React I18next](https://react.i18next.com)
+- [Lucide React](https://lucide.dev)