@memori.ai/ui 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 
 
+## [1.5.0](https://github.com/memori-ai/ui/compare/v1.4.0...v1.5.0) (2026-02-06)
+
+
+### Features
+
+* add shadow prop to Button component ([4c083ae](https://github.com/memori-ai/ui/commit/4c083ae2b1aa764d13ed1a562521e7434a628eab))
+
+## [1.4.0](https://github.com/memori-ai/ui/compare/v1.3.0...v1.4.0) (2026-02-04)
+
+
+### Features
+
+* add displayValue prop to SelectBox component for custom rendering ([120c2ed](https://github.com/memori-ai/ui/commit/120c2ed58d0cef2e0cdb2a06f9bc48db0473c7b9))
+
 ## [1.3.0](https://github.com/memori-ai/ui/compare/v1.2.0...v1.3.0) (2026-02-04)
 
 

package/README.md

@@ -38,20 +38,50 @@ function App() {
 
 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
+### Design Tokens
 
-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.
+The library exposes CSS variables for shadows, interactive states, and focus. Use these tokens in your app or when extending components.
+
+#### Shadows
+
+| Token                     | Use case                             |
+| ------------------------- | ------------------------------------ |
+| `--memori-shadow-xs`      | Subtle depth for small elements      |
+| `--memori-shadow-sm`      | Default for buttons, cards           |
+| `--memori-shadow-md`      | Hover states                         |
+| `--memori-shadow-lg`      | Modals, dropdowns                    |
+| `--memori-shadow-xl`      | Hero cards, major sections           |
+| `--memori-shadow-2xl`     | Maximum elevation                    |
+| `--memori-shadow-primary` | Brand-colored shadow for CTA buttons |
+
+Shadows are overridden in dark theme for better contrast.
+
+#### Interactive state tokens
+
+Primary interactive states are derived from your brand color and can be overridden:
+
+- `--memori-primary-hover` – hover background/border
+- `--memori-primary-active` – pressed/active state
+- `--memori-primary-disabled` – disabled state
+- `--memori-focus-ring` – focus outline (box-shadow)
+- `--memori-focus-ring-offset` – gap between element and ring
+
+#### Overriding brand colors
+
+Set `--memori-primary-color` (and optionally `--memori-secondary-color`) in your app. Interactive states and `--memori-shadow-primary` are computed from these.
 
 ```css
 :root {
-  /* Override Primary Color (Purple default) */
-  --memori-primary-rgb: oklch(0.55 0.22 290); /* or hex, rgb, etc. */
+  /* Override Primary (purple default) */
+  --memori-primary-color: oklch(0.55 0.22 290);
 
-  /* Override Secondary Color (Cyan default) */
-  --memori-secondary-rgb: oklch(0.7 0.15 200);
+  /* Override Secondary (cyan default) */
+  --memori-secondary-color: oklch(0.7 0.15 200);
 }
 ```
 
+**Note:** The legacy token `--memori-depth` has been removed. Use the shadow scale (`--memori-shadow-xs` through `--memori-shadow-2xl`) instead.
+
 ### Dark Mode
 
 The library includes built-in dark mode support. All components automatically adapt when dark mode is enabled.

package/dist/index.d.ts

@@ -185,6 +185,11 @@ declare interface ButtonProps extends Omit<ButtonProps_2, 'className'>, Pick<def
      * @default 'default'
      */
     shape?: 'default' | 'round' | 'circle';
+    /**
+     * Whether to apply a box shadow to the button
+     * @default false
+     */
+    shadow?: boolean;
     /**
      * Whether the button is in an active/pressed state (for toggle buttons)
      */
@@ -231,7 +236,7 @@ declare interface CardProps extends Omit<default_2.HTMLAttributes<HTMLDivElement
      * Visual variant of the card
      * @default 'elevated'
      */
-    variant?: 'elevated' | 'outlined';
+    variant?: 'elevated' | 'outlined' | 'flat';
     /**
      * Controls the padding inside the card body
      * @default 'md'
@@ -535,6 +540,10 @@ declare interface DropdownItemProps extends Omit<default_2.ComponentPropsWithout
      * Content of the item.
      */
     children?: default_2.ReactNode;
+    /**
+     * Icon to show on the left side of the item.
+     */
+    icon?: default_2.ReactNode;
     /**
      * If true, the item is disabled.
      * @default false
@@ -638,7 +647,10 @@ declare interface DropdownSeparatorProps extends Omit<default_2.ComponentPropsWi
     style?: default_2.CSSProperties;
 }
 
-declare interface DropdownTriggerProps extends Omit<default_2.ComponentPropsWithoutRef<typeof Menu.Trigger>, 'className' | 'style'> {
+/** Button-related props: when set, the trigger renders as your Button component (single button in DOM). */
+declare type DropdownTriggerButtonProps = Pick<ButtonProps, 'variant' | 'size' | 'fullWidth' | 'shape' | 'shadow' | 'danger' | 'active'>;
+
+declare interface DropdownTriggerProps extends Omit<default_2.ComponentPropsWithoutRef<typeof Menu.Trigger>, 'className' | 'style' | 'render'>, DropdownTriggerButtonProps {
     /**
      * Content of the trigger (e.g. button text or icon).
      */
@@ -656,6 +668,12 @@ declare interface DropdownTriggerProps extends Omit<default_2.ComponentPropsWith
      * Inline styles for the trigger button.
      */
     style?: default_2.CSSProperties;
+    /**
+     * Custom element for the trigger. Use this to render your own component (e.g. Button)
+     * as the trigger so there is a single button in the DOM. Receives trigger props and
+     * state (e.g. open). Prefer using variant/size etc. for the built-in Button.
+     */
+    render?: default_2.ComponentPropsWithoutRef<typeof Menu.Trigger>['render'];
 }
 
 export declare const Expandable: ({ rows, className, innerClassName, btnClassName, lineHeightMultiplier, defaultExpanded, expandSymbol, collapseSymbol, children, mode, }: Props) => JSX.Element;
@@ -929,6 +947,7 @@ declare interface SelectBoxProps {
     defaultValue?: string | null;
     onChange?: (value: string | null) => void;
     placeholder?: string;
+    displayValue?: default_2.ReactNode;
     label?: string;
     disabled?: boolean;
     required?: boolean;