@vkzstudio/muza-ui 1.0.46 → 1.0.47

package/dist/styles/token-sizes.css

@@ -61,15 +61,16 @@
   --spacing-comp-alert-ico-size: var(--spacing-xl);
   --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
   --radius-comp-alert-radius: var(--radius-2xl);
-  --spacing-comp-article-card-compact-gap: var(--spacing-sm);
   --spacing-comp-article-card-compact-p-img: var(--spacing-lg);
   --spacing-comp-article-card-compact-p-ver: var(--spacing-lg);
   --spacing-comp-article-card-compact-p-hor: var(--spacing-xl);
   --radius-comp-article-card-compact-radius: var(--radius-xl);
+  --spacing-comp-article-card-compact-gap: var(--spacing-2xl);
   --spacing-comp-article-card-hero-large-gap-tags: var(--spacing-xs);
   --spacing-comp-article-card-hero-large-p-bottom: var(--spacing-xl);
   --radius-comp-article-card-hero-large-radius: var(--radius-xl);
   --spacing-comp-article-card-hero-large-p: var(--spacing-3xl);
+  --spacing-comp-article-card-hero-large-text-max-w: 600px;
   --spacing-comp-article-card-search-gap-text: var(--spacing-md);
   --spacing-comp-article-card-search-p-top-text: var(--spacing-md);
   --spacing-comp-article-card-search-p-img: var(--spacing-lg);
@@ -225,6 +226,7 @@
   --spacing-comp-partner-card-hero-large-gap: var(--spacing-lg);
   --radius-comp-partner-card-hero-large-radius: var(--radius-xl);
   --spacing-comp-partner-card-hero-large-p: var(--spacing-3xl);
+  --spacing-comp-partner-card-hero-large-text-max-w: 400px;
   --spacing-comp-partner-card-hero-sm-gap: var(--spacing-md);
   --radius-comp-partner-card-hero-sm-radius: var(--radius-xl);
   --spacing-comp-partner-card-hero-sm-p: var(--spacing-2xl);
@@ -437,15 +439,16 @@
     --spacing-comp-alert-ico-size: var(--spacing-xl);
     --radius-comp-alert-radius: var(--radius-2xl);
     --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
-    --spacing-comp-article-card-compact-gap: var(--spacing-sm);
     --spacing-comp-article-card-compact-p-img: var(--spacing-lg);
     --spacing-comp-article-card-compact-p-ver: var(--spacing-lg);
     --spacing-comp-article-card-compact-p-hor: var(--spacing-xl);
     --radius-comp-article-card-compact-radius: var(--radius-xl);
+    --spacing-comp-article-card-compact-gap: var(--spacing-2xl);
     --spacing-comp-article-card-hero-large-gap-tags: var(--spacing-xs);
     --radius-comp-article-card-hero-large-radius: var(--radius-xl);
     --spacing-comp-article-card-hero-large-p-bottom: var(--spacing-2xl);
     --spacing-comp-article-card-hero-large-p: var(--spacing-3xl);
+    --spacing-comp-article-card-hero-large-text-max-w: 600px;
     --spacing-comp-article-card-search-gap-text: var(--spacing-md);
     --spacing-comp-article-card-search-p-top-text: var(--spacing-md);
     --spacing-comp-article-card-search-p-img: var(--spacing-lg);
@@ -601,6 +604,7 @@
     --spacing-comp-partner-card-hero-large-gap: var(--spacing-lg);
     --radius-comp-partner-card-hero-large-radius: var(--radius-xl);
     --spacing-comp-partner-card-hero-large-p: var(--spacing-2xl);
+    --spacing-comp-partner-card-hero-large-text-max-w: 400px;
     --spacing-comp-partner-card-hero-sm-gap: var(--spacing-md);
     --radius-comp-partner-card-hero-sm-radius: var(--radius-xl);
     --spacing-comp-partner-card-hero-sm-p: var(--spacing-2xl);
@@ -814,15 +818,16 @@
     --spacing-comp-alert-ico-size: var(--spacing-xl);
     --radius-comp-alert-radius: var(--radius-2xl);
     --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
-    --spacing-comp-article-card-compact-gap: var(--spacing-sm);
     --spacing-comp-article-card-compact-p-img: var(--spacing-lg);
     --spacing-comp-article-card-compact-p-ver: var(--spacing-lg);
     --spacing-comp-article-card-compact-p-hor: var(--spacing-xl);
     --radius-comp-article-card-compact-radius: var(--radius-xl);
+    --spacing-comp-article-card-compact-gap: var(--spacing-2xl);
     --spacing-comp-article-card-hero-large-gap-tags: var(--spacing-2xs);
     --spacing-comp-article-card-hero-large-p-bottom: var(--spacing-lg);
     --radius-comp-article-card-hero-large-radius: var(--radius-xl);
     --spacing-comp-article-card-hero-large-p: var(--spacing-2xl);
+    --spacing-comp-article-card-hero-large-text-max-w: 400px;
     --spacing-comp-article-card-search-p-top-text: var(--spacing-none);
     --spacing-comp-article-card-search-gap-text: var(--spacing-sm);
     --spacing-comp-article-card-search-p-img: var(--spacing-sm);
@@ -978,6 +983,7 @@
     --spacing-comp-partner-card-hero-large-gap: var(--spacing-md);
     --radius-comp-partner-card-hero-large-radius: var(--radius-xl);
     --spacing-comp-partner-card-hero-large-p: var(--spacing-2xl);
+    --spacing-comp-partner-card-hero-large-text-max-w: 400px;
     --spacing-comp-partner-card-hero-sm-gap: var(--spacing-md);
     --radius-comp-partner-card-hero-sm-radius: var(--radius-xl);
     --spacing-comp-partner-card-hero-sm-p: var(--spacing-2xl);
@@ -1191,15 +1197,16 @@
     --spacing-comp-alert-ico-size: var(--spacing-xl);
     --spacing-comp-alert-ver-p-lg: var(--spacing-xl);
     --radius-comp-alert-radius: var(--radius-2xl);
-    --spacing-comp-article-card-compact-gap: var(--spacing-sm);
     --spacing-comp-article-card-compact-p-img: var(--spacing-lg);
     --spacing-comp-article-card-compact-p-ver: var(--spacing-lg);
     --spacing-comp-article-card-compact-p-hor: var(--spacing-xl);
     --radius-comp-article-card-compact-radius: var(--radius-xl);
+    --spacing-comp-article-card-compact-gap: var(--spacing-2xl);
     --spacing-comp-article-card-hero-large-gap-tags: var(--spacing-xs);
     --radius-comp-article-card-hero-large-radius: var(--radius-xl);
     --spacing-comp-article-card-hero-large-p-bottom: var(--spacing-2xl);
     --spacing-comp-article-card-hero-large-p: var(--spacing-3xl);
+    --spacing-comp-article-card-hero-large-text-max-w: 600px;
     --spacing-comp-article-card-search-gap-text: var(--spacing-md);
     --spacing-comp-article-card-search-p-top-text: var(--spacing-md);
     --spacing-comp-article-card-search-p-img: var(--spacing-lg);
@@ -1355,6 +1362,7 @@
     --spacing-comp-partner-card-hero-large-gap: var(--spacing-lg);
     --radius-comp-partner-card-hero-large-radius: var(--radius-xl);
     --spacing-comp-partner-card-hero-large-p: var(--spacing-3xl);
+    --spacing-comp-partner-card-hero-large-text-max-w: 400px;
     --spacing-comp-partner-card-hero-sm-gap: var(--spacing-md);
     --radius-comp-partner-card-hero-sm-radius: var(--radius-xl);
     --spacing-comp-partner-card-hero-sm-p: var(--spacing-2xl);

package/dist/utils/cn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAgT5C,eAAO,MAAM,EAAE,GAAI,GAAG,QAAQ,UAAU,EAAE,WAEzC,CAAA"}
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAwT5C,eAAO,MAAM,EAAE,GAAI,GAAG,QAAQ,UAAU,EAAE,WAEzC,CAAA"}

package/dist/utils/cn.js

@@ -20,12 +20,21 @@ const o = [
   "8xl",
   "9xl",
   "10xl",
-  "comp-accordion-ico-size-sm",
-  "comp-accordion-ico-size-md",
-  "comp-accordion-p-hor",
-  "comp-accordion-radius",
-  "comp-accordion-ico-size-lg",
-  "comp-accordion-p",
+  "comp-accordion-branded-ico-size-sm",
+  "comp-accordion-branded-ico-size-md",
+  "comp-accordion-branded-ico-size-lg",
+  "comp-accordion-branded-p",
+  "comp-accordion-branded-p-ver",
+  "comp-accordion-branded-radius",
+  "comp-accordion-default-ico-size-sm",
+  "comp-accordion-default-ico-size-md",
+  "comp-accordion-default-ico-size-lg",
+  "comp-accordion-default-p",
+  "comp-accordion-default-p-ver",
+  "comp-accordion-default-radius",
+  "comp-accordion-inline-p-hor",
+  "comp-accordion-inline-p-ver",
+  "comp-accordion-inline-gap",
   "comp-accordion-settings-p-top",
   "comp-accordion-settings-radius",
   "comp-accordion-settings-gap",
@@ -242,7 +251,6 @@ const o = [
   "comp-texteditor-radius",
   "comp-texteditor-ico-bg-size",
   "comp-texteditor-radius",
-  "comp-time-picker-container-h",
   "comp-toast-p-hor",
   "comp-toast-p-ver",
   "comp-toast-radius",
@@ -287,7 +295,7 @@ const o = [
   "layout-p-standard",
   "layout-w-admin-settings",
   "layout-admin-max-w"
-], m = e({
+], a = e({
   extend: {
     theme: {
       spacing: o,
@@ -295,7 +303,7 @@ const o = [
     },
     classGroups: {}
   }
-}), r = (...c) => m(p(c));
+}), r = (...c) => a(p(c));
 export {
   r as cn
 };

package/llms-full.md

@@ -14,18 +14,26 @@ import '@vkzstudio/muza-ui/styles'
 
 ## MuzaUIProvider
 
-Wrap your app with `MuzaUIProvider` to enable translations and built-in `ToastContainer`:
+**Required.** Wrap your app root with `MuzaUIProvider` for the library to work correctly. It bundles every context provider the library depends on so you never have to nest them yourself.
 
 ```tsx
 import { MuzaUIProvider } from '@vkzstudio/muza-ui'
 
-;<MuzaUIProvider locale="en">
-  {' '}
-  {/* 'en' | 'cs' | 'sk' */}
+;<MuzaUIProvider
+  translationConfig={{ locale: 'en' }} // 'en' | 'cs' | 'sk'
+  color="#14645a" // optional white-label brand color
+>
   <App />
 </MuzaUIProvider>
 ```
 
+**Bundled providers (do NOT add these again inside your app):**
+
+- `TranslationProvider` — powers locale + translations for DatePicker, Select, Calendar, etc. Configure via `translationConfig`.
+- `TooltipProvider` — already wraps the tree, so `<Tooltip>` works without its own `<TooltipProvider>`. Configure via `tooltipConfig`.
+- `ToastContainer` — mounted automatically, so `toast()` works anywhere with no extra setup. Configure via `toastConfig`.
+- `ThemeProvider` — applies white-label theming when you pass a `color` hex (sets `--brand-*` CSS variables on `:root`).
+
 Components like DatePicker, Select, and Calendar use translated strings automatically. You can override any text via component props.
 
 ## Component Usage Rules
@@ -34,25 +42,25 @@ Components like DatePicker, Select, and Calendar use translated strings automati
 
 NEVER create new UI components that duplicate Muza UI functionality. Check available components first:
 
-**Complete Component List (48 components)**
+**Complete Component List (57 components)**
 
-**Form & Input (14)**:
-Button, Input, PasswordInput, Textarea, Checkbox, Radio, Switch, Toggle, ToggleGroup, Select, MultiSelect, Searchbar, FileUpload, TextEditor
+**Form & Input (17)**:
+Button, ButtonArrow, Input, PasswordInput, Textarea, Checkbox, Radio, Switch, Toggle, ToggleCheckButton, ToggleGroup, Select, MultiSelect, Searchbar, FileUpload, TextEditor, Slider
 
-**Layout & Structure (5)**:
-Accordion, Flex, Typography, Dialog, Skeleton
+**Layout & Structure (7)**:
+Accordion, Card, Flex, Sheet, Typography, Dialog, Skeleton
 
-**Data Display (4)**:
-DataTable, ExpandableTable, Reorderable, ReorderableTable
+**Data Display (5)**:
+DataTable, ExpandableTable, Reorderable, ReorderableTable, ResponsiveLayoutTable
 
-**Feedback & Status (8)**:
-Alert, Chip, Tag, Loader, EmptyState, Toast, PinIndicator, SliderIndicators
+**Feedback & Status (9)**:
+Alert, Chip, Tag, Loader, EmptyState, Toast, PinIndicator, SliderIndicators, Progress
 
-**Navigation (8)**:
-Breadcrumb, DropdownMenu, SegmentedControl, SegmentedIconControl, Stepper, SwipeButton, EdgeButton, LanguageSwitcher
+**Navigation (9)**:
+Breadcrumb, DropdownMenu, Pagination, SegmentedControl, SegmentedIconControl, Stepper, SwipeButton, EdgeButton, LanguageSwitcher
 
-**Media & Display (3)**:
-Avatar, Lightbox, Tooltip
+**Media & Display (4)**:
+Avatar, Carousel, Lightbox, Tooltip
 
 **Date & Time (3)**:
 Calendar, DatePicker, TimePicker
@@ -140,7 +148,7 @@ import {
 </Dialog>
 ```
 
-Sub-components: `Dialog`, `DialogTrigger`, `DialogContent`, `DialogTitle`, `DialogDescription`, `DialogClose`, `DialogOverlay`, `DialogPortal`
+Sub-components: `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`, `DialogOverlay`, `DialogPortal`
 
 #### DropdownMenu (19 uses)
 
@@ -166,7 +174,7 @@ import {
 </DropdownMenu>
 ```
 
-Sub-components: `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuButtonItem`
+Sub-components: `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuPortal`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuButtonItem`
 
 #### Accordion
 
@@ -188,22 +196,17 @@ import {
 
 #### Tooltip
 
-```tsx
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@vkzstudio/muza-ui'
+`TooltipProvider` is already supplied by `MuzaUIProvider` — do not wrap it again.
 
-;<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button>Hover me</Button>
-    </TooltipTrigger>
-    <TooltipContent>Tooltip text</TooltipContent>
-  </Tooltip>
-</TooltipProvider>
+```tsx
+import { Tooltip, TooltipContent, TooltipTrigger } from '@vkzstudio/muza-ui'
+
+;<Tooltip>
+  <TooltipTrigger asChild>
+    <Button>Hover me</Button>
+  </TooltipTrigger>
+  <TooltipContent>Tooltip text</TooltipContent>
+</Tooltip>
 ```
 
 #### Popover
@@ -284,7 +287,7 @@ toast({ variant: 'error', text: 'Failed to save', closable: true })
 toast({ variant: 'warning', text: 'Unsaved changes', autoDismiss: 5000 })
 ```
 
-**Note:** If using `MuzaUIProvider`, `ToastContainer` is already included. Otherwise, add `<ToastContainer position="top-right" />` to your app root.
+**Note:** `MuzaUIProvider` already mounts `ToastContainer` — do not add it again. Use `toastConfig` on the provider to customize position/duration. If you are NOT using `MuzaUIProvider` (not recommended), add `<ToastContainer position="top-right" />` to your app root manually.
 
 #### FileUpload
 

package/llms.txt

@@ -1,6 +1,6 @@
 # Muza UI
 
-> React component library (48 components) built with Tailwind CSS 4, shadcn/ui patterns, and Radix primitives. Provides form inputs, layout components, feedback indicators, navigation, and date/time pickers.
+> React component library (57 components) built with Tailwind CSS 4, shadcn/ui patterns, and Radix primitives. Provides form inputs, layout components, feedback indicators, navigation, and date/time pickers.
 
 ## Documentation
 
@@ -13,21 +13,22 @@
 import { MuzaUIProvider, Button, Input } from '@vkzstudio/muza-ui'
 import '@vkzstudio/muza-ui/styles'
 
-<MuzaUIProvider locale="en">
+// Required: wraps TranslationProvider, TooltipProvider, ToastContainer, ThemeProvider
+<MuzaUIProvider translationConfig={{ locale: 'en' }}>
   <App />
 </MuzaUIProvider>
 ```
 
 See llms-full.md for component APIs, compound component patterns, and react-hook-form integration.
 
-## Component Categories (48 total)
+## Component Categories (57 total)
 
-**Form & Input (14)**: Button, Input, PasswordInput, Textarea, Checkbox, Radio, Switch, Toggle, ToggleGroup, Select, MultiSelect, Searchbar, FileUpload, TextEditor
-**Layout (5)**: Accordion, Flex, Typography, Dialog, Skeleton
-**Data Display (4)**: DataTable, ExpandableTable, Reorderable, ReorderableTable
-**Feedback (8)**: Alert, Chip, Tag, Loader, EmptyState, Toast, PinIndicator, SliderIndicators
-**Navigation (8)**: Breadcrumb, DropdownMenu, SegmentedControl, SegmentedIconControl, Stepper, SwipeButton, EdgeButton, LanguageSwitcher
-**Media (3)**: Avatar, Lightbox, Tooltip
+**Form & Input (17)**: Button, ButtonArrow, Input, PasswordInput, Textarea, Checkbox, Radio, Switch, Toggle, ToggleCheckButton, ToggleGroup, Select, MultiSelect, Searchbar, FileUpload, TextEditor, Slider
+**Layout (7)**: Accordion, Card, Flex, Sheet, Typography, Dialog, Skeleton
+**Data Display (5)**: DataTable, ExpandableTable, Reorderable, ReorderableTable, ResponsiveLayoutTable
+**Feedback (9)**: Alert, Chip, Tag, Loader, EmptyState, Toast, PinIndicator, SliderIndicators, Progress
+**Navigation (9)**: Breadcrumb, DropdownMenu, Pagination, SegmentedControl, SegmentedIconControl, Stepper, SwipeButton, EdgeButton, LanguageSwitcher
+**Media (4)**: Avatar, Carousel, Lightbox, Tooltip
 **Date/Time (3)**: Calendar, DatePicker, TimePicker
 **Specialized (3)**: Popover, LoginScreen, Icons
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkzstudio/muza-ui",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "description": "React component library built with Vite, shadcn/ui, and Tailwind CSS",
   "type": "module",
   "main": "./dist/index.js",