advi-ui 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +39 -6
  2. package/dist/ad-logo.webp +0 -0
  3. package/dist/advi-ui.cjs.js +1 -1
  4. package/dist/advi-ui.cjs.js.map +1 -1
  5. package/dist/advi-ui.css +1 -1
  6. package/dist/advi-ui.es.js +1734 -1737
  7. package/dist/advi-ui.es.js.map +1 -1
  8. package/dist/apple-touch-icon.png +0 -0
  9. package/dist/base.css +1 -0
  10. package/dist/base.css.d.ts +1 -0
  11. package/dist/favicon-16x16.png +0 -0
  12. package/dist/favicon-32x32.png +0 -0
  13. package/dist/favicon.ico +0 -0
  14. package/dist/icons.svg +1 -0
  15. package/dist/src/components/Header.d.ts +4 -1
  16. package/dist/src/components/PageAside.d.ts +2 -1
  17. package/dist/src/components/SearchInput.d.ts +6 -2
  18. package/dist/src/components/ui/dialog.d.ts +6 -2
  19. package/dist/src/components/ui/modal.d.ts +5 -2
  20. package/dist/src/components/ui/multi-select.d.ts +10 -0
  21. package/dist/src/components/ui/select.d.ts +10 -0
  22. package/dist/theme/default.css +1 -0
  23. package/dist/theme/midnight.css +1 -0
  24. package/dist/theme-default.css.d.ts +1 -0
  25. package/dist/theme-midnight.css.d.ts +1 -0
  26. package/package.json +18 -6
package/README.md CHANGED
@@ -63,7 +63,8 @@ Import components and styles once at the root of your app:
63
63
 
64
64
  ```tsx
65
65
  import { Button } from "advi-ui";
66
- import "advi-ui/styles";
66
+ import "advi-ui/base"; // component styles + Tailwind base, no colors
67
+ import "advi-ui/theme/default"; // a built-in color theme — or supply your own, see THEMING.md
67
68
  import "advi-ui/fonts"; // optional — self-hosted Raleway, Unbounded, Rubik
68
69
 
69
70
  export default function App() {
@@ -71,10 +72,15 @@ export default function App() {
71
72
  }
72
73
  ```
73
74
 
74
- The style import brings in:
75
- - All component styles (SCSS, BEM `vi-*` namespace)
76
- - CSS custom properties for light and dark mode
77
- - Tailwind base layer
75
+ `advi-ui/base` brings in all component styles (SCSS, BEM `vi-*` namespace)
76
+ and the Tailwind base layer — no color values. Colors come from a separate
77
+ theme import: `advi-ui/theme/default` (stock shadcn palette) or
78
+ `advi-ui/theme/midnight` (dark teal + burnt orange), or your own `:root`
79
+ block defining the same variables. See [THEMING.md](./THEMING.md) for the
80
+ full variable contract and how to build a custom theme.
81
+
82
+ `advi-ui/styles` still works as a single import equal to `base` +
83
+ `theme/default`, for existing consumers who don't need a different theme.
78
84
 
79
85
  The fonts import is separate and optional — it's a small CSS file (`@font-face` declarations with `unicode-range`), so the browser only downloads the specific weight/subset files it actually needs for the text on the page, not the whole font family. Skip it if you'd rather supply your own fonts or use `font-raleway`/`font-unbounded`/`font-rubik` Tailwind classes with fonts you already load.
80
86
 
@@ -86,6 +92,33 @@ Add the `dark` class to your `<html>` element to activate dark mode:
86
92
  document.documentElement.classList.toggle("dark");
87
93
  ```
88
94
 
95
+ ### Icons
96
+
97
+ Components ship with [lucide-react](https://lucide.dev) icons by default. Any
98
+ component with a built-in icon (`Header`, `PageAside`, `SearchInput`,
99
+ `Select`, `MultiSelect`, `Modal`, `Dialog`) accepts icon-override props — pass
100
+ your own element from any icon library (Phosphor, Radix Icons, Heroicons,
101
+ custom SVGs) to replace it per-instance:
102
+
103
+ ```tsx
104
+ import { MagnifyingGlass, X } from "@phosphor-icons/react";
105
+
106
+ <SearchInput searchIcon={<MagnifyingGlass />} clearIcon={<X />} />
107
+ ```
108
+
109
+ | Component | Props |
110
+ |---|---|
111
+ | `Header` | `menuIcon`, `linkIcon` |
112
+ | `PageAside` | `toggleIcon` (a `(open) => ReactNode` function) |
113
+ | `SearchInput` | `searchIcon`, `clearIcon` |
114
+ | `Select` | `chevronIcon`, `checkIcon`, `clearIcon` |
115
+ | `MultiSelect` | `chevronIcon`, `checkIcon`, `removeIcon` |
116
+ | `Modal` | `closeIcon` |
117
+ | `Dialog` (`DialogContent`) | `closeIcon` |
118
+
119
+ Structural styling (sizing, rotation on open/close) is merged onto whatever
120
+ element you pass, so overrides don't need to replicate the built-in classes.
121
+
89
122
  ---
90
123
 
91
124
  ## Components
@@ -109,7 +142,7 @@ document.documentElement.classList.toggle("dark");
109
142
 
110
143
  ## Design Tokens
111
144
 
112
- All colors and typography are defined as CSS custom properties in `src/styles/global.scss` and override-able via the `.dark` class. SCSS variables live in `src/styles/_variables.scss`.
145
+ All colors are semantic CSS custom properties, supplied by a theme import and override-able via the `.dark` class — see [THEMING.md](./THEMING.md) for the full contract.
113
146
 
114
147
  ### Fonts
115
148
 
package/dist/ad-logo.webp ADDED
Binary file