@yuno-payments/dashboard-design-system 2.3.11 → 2.4.1

package/README.md

@@ -47,6 +47,84 @@ All components use **Tailwind CSS** utility classes for styling. Developers must
 
 **📚 [Tailwind CSS Documentation](https://tailwindcss.com/docs/installation/using-vite)**
 
+## CSS Stylesheets — Integration Guide
+
+The design system exports three CSS files for use by consumer MFEs. Each one serves a different integration pattern.
+
+### Exported files
+
+| Import path | Description |
+|-------------|-------------|
+| `@yuno-payments/dashboard-design-system/tokens.css` | **Self-contained stylesheet.** Includes Tailwind CSS, the full color/font/radius/animation token set, light/dark semantic tokens, and the Tailwind utility bridge. **This is what most MFEs should use.** |
+| `@yuno-payments/dashboard-design-system/theme.css` | **Theme tokens only.** A raw `@theme` block for consumers that run their own Tailwind build and want to merge DS tokens into their pipeline. No Tailwind import, no base styles. |
+| `@yuno-payments/dashboard-design-system/styles.css` | **Component overrides & global utilities.** Compiled from `src/global.css`. Includes everything in `tokens.css` plus base body styles, z-index layers, toast/notification styling, RTL support, and DataTable padding. |
+
+### Usage patterns
+
+**Pattern A — Most MFEs** (no own Tailwind build):
+
+```css
+/* src/index.css */
+@import '@yuno-payments/dashboard-design-system/tokens.css';
+
+/* Your local styles below */
+```
+
+One import. Done. Tailwind utilities like `bg-background`, `text-foreground`, `border-border` work out of the box.
+
+**Pattern B — Container MFE** (own Tailwind build):
+
+```css
+/* src/index.css */
+@import 'tailwindcss/theme';
+@import '@yuno-payments/dashboard-design-system/theme.css';
+@import '@yuno-payments/dashboard-design-system/styles.css';
+@import 'tailwindcss/utilities';
+```
+
+`theme.css` merges DS tokens into the consumer's Tailwind config. `styles.css` provides the component-level overrides (toasts, z-index, RTL, DataTable, etc.).
+
+### What each file contains
+
+<details>
+<summary><strong>tokens.css</strong> (source: <code>src/tokens.css</code>)</summary>
+
+- `@import "tailwindcss"`
+- `@custom-variant dark` (class-based dark mode)
+- **Static `@theme` block**: font-sans, border-radius, 8 color families × 10 shades (RGB), opacity variants for Badge, animation keyframes
+- **Dynamic semantic tokens** (`:root` / `.dark`): background, foreground, card, popover, primary, secondary, muted, accent, destructive, border, input, surface, ring, success, warning, info
+- **Base override**: `border-color: var(--border)` on all elements
+- **`@theme inline` bridge**: maps CSS vars to `--color-*` so Tailwind generates utilities
+</details>
+
+<details>
+<summary><strong>theme.css</strong> (source: <code>src/theme.css</code>)</summary>
+
+- A single `@theme` block with the same static tokens as `tokens.css` (fonts, radii, colors, animations)
+- No Tailwind import, no `:root`/`.dark`, no bridge — purely for native `@theme` merging
+</details>
+
+<details>
+<summary><strong>styles.css</strong> (source: <code>src/global.css</code>, compiled to <code>dist/index.css</code>)</summary>
+
+- Everything in `tokens.css` plus:
+- `@import "tw-animate-css"` (animation plugin)
+- Base body styles: `bg-background text-foreground`, cursor pointer on buttons
+- Z-index utilities: `z-sheet` (1000), `z-dialog` (1000), `z-popover` (10000), `z-tooltip` (100000)
+- `.bg-input` light/dark override
+- Time picker icon positioning fix
+- Notification toast colored borders (success, error, warning, info)
+- Sonner toast icon colors by `data-type`
+- RTL directional icon mirroring (`.rtl-mirror`)
+- DataTable first/last column padding (`.yuno-data-table`)
+</details>
+
+### Keeping files in sync
+
+The `@theme` block in `tokens.css` and `global.css` must mirror the one in `theme.css`. When adding or changing tokens, update all three source files.
+
+---
+
 ## Vendors Folder
 
 The `src/vendor/` folder contains the **base components** that we use to create our custom components:

package/dist/components/atoms/icon/icon-list.d.ts

@@ -213,6 +213,11 @@ declare const IconList: {
     FilePng: import('@phosphor-icons/react').Icon;
     FileJpg: import('@phosphor-icons/react').Icon;
     FilePpt: import('@phosphor-icons/react').Icon;
+    ArrowSquareOut: import('@phosphor-icons/react').Icon;
+    SquareHalf: import('@phosphor-icons/react').Icon;
+    SquareHalfBottom: import('@phosphor-icons/react').Icon;
+    NotePencil: import('@phosphor-icons/react').Icon;
+    Lifebuoy: import('@phosphor-icons/react').Icon;
 };
 export type IconName = Exclude<keyof typeof IconList, "Icon" | "IconProps" | "IconWeight" | "IconContext">;
 export { IconList };