@vkzstudio/muza-ui 1.5.2 → 1.7.0

package/dist/styles/token-sizes.css

@@ -132,8 +132,8 @@
   --radius-comp-card-default-radius: var(--radius-xl);
   --spacing-comp-card-default-p-hor: var(--spacing-2xl);
   --spacing-comp-card-default-p-ver: var(--spacing-2xl);
-  --spacing-comp-carousel-gap: var(--spacing-md);
   --spacing-comp-carousel-dots-gap: var(--spacing-lg);
+  --spacing-comp-carousel-gap: var(--spacing-lg);
   --radius-comp-carousel-radius: var(--radius-lg);
   --spacing-comp-carousel-arrow-offset-sm: var(--spacing-xl);
   --spacing-comp-carousel-arrow-offset-v-sm: var(--spacing-xl);
@@ -237,6 +237,7 @@
   --spacing-comp-offer-card-list-view-p-img: var(--spacing-sm);
   --radius-comp-offer-card-list-view-radius-img: var(--radius-lg);
   --spacing-comp-offer-card-list-view-gap: var(--spacing-xl);
+  --spacing-comp-offer-card-list-view-icon-size: var(--spacing-40);
   --spacing-comp-offer-card-list-view-logo-size: var(--spacing-56);
   --spacing-comp-offer-card-list-view-h-img: 112px;
   --spacing-comp-offer-card-list-view-w-img: 112px;
@@ -265,6 +266,8 @@
   --spacing-comp-partner-card-list-view-p-img: var(--spacing-sm);
   --radius-comp-partner-card-list-view-radius-img: var(--radius-lg);
   --spacing-comp-partner-card-list-view-gap: var(--spacing-xl);
+  --spacing-comp-partner-card-list-view-icon-size: var(--spacing-40);
+  --spacing-comp-partner-card-list-view-icon-size: var(--spacing-40);
   --spacing-comp-partner-card-list-view-logo-size: var(--spacing-56);
   --spacing-comp-partner-card-list-view-h-img: 112px;
   --spacing-comp-partner-card-list-view-w-img: 112px;
@@ -551,8 +554,8 @@
     --radius-comp-card-default-radius: var(--radius-xl);
     --spacing-comp-card-default-p-hor: var(--spacing-2xl);
     --spacing-comp-card-default-p-ver: var(--spacing-2xl);
-    --spacing-comp-carousel-gap: var(--spacing-md);
     --spacing-comp-carousel-dots-gap: var(--spacing-lg);
+    --spacing-comp-carousel-gap: var(--spacing-lg);
     --radius-comp-carousel-radius: var(--radius-lg);
     --spacing-comp-carousel-arrow-offset-sm: var(--spacing-xl);
     --spacing-comp-carousel-arrow-offset-v-sm: var(--spacing-xl);
@@ -656,6 +659,7 @@
     --spacing-comp-offer-card-list-view-p-img: var(--spacing-sm);
     --radius-comp-offer-card-list-view-radius-img: var(--radius-lg);
     --spacing-comp-offer-card-list-view-gap: var(--spacing-xl);
+    --spacing-comp-offer-card-list-view-icon-size: var(--spacing-40);
     --spacing-comp-offer-card-list-view-logo-size: var(--spacing-64);
     --spacing-comp-offer-card-list-view-h-img: 112px;
     --spacing-comp-offer-card-list-view-w-img: 112px;
@@ -684,6 +688,8 @@
     --spacing-comp-partner-card-list-view-p-img: var(--spacing-sm);
     --radius-comp-partner-card-list-view-radius-img: var(--radius-lg);
     --spacing-comp-partner-card-list-view-gap: var(--spacing-xl);
+    --spacing-comp-partner-card-list-view-icon-size: var(--spacing-40);
+    --spacing-comp-partner-card-list-view-icon-size: var(--spacing-40);
     --spacing-comp-partner-card-list-view-logo-size: var(--spacing-64);
     --spacing-comp-partner-card-list-view-h-img: 112px;
     --spacing-comp-partner-card-list-view-w-img: 112px;
@@ -971,10 +977,10 @@
     --spacing-comp-card-default-p-hor: var(--spacing-lg);
     --spacing-comp-card-default-p-ver: var(--spacing-xl);
     --radius-comp-card-default-radius: var(--radius-xl);
-    --spacing-comp-carousel-gap: var(--spacing-sm);
     --spacing-comp-carousel-arrow-offset: var(--spacing-md);
     --spacing-comp-carousel-arrow-offset-sm: var(--spacing-md);
     --spacing-comp-carousel-dots-gap: var(--spacing-md);
+    --spacing-comp-carousel-gap: var(--spacing-lg);
     --radius-comp-carousel-radius: var(--radius-lg);
     --spacing-comp-carousel-arrow-offset-v-sm: var(--spacing-xl);
     --spacing-comp-carousel-circle-size: var(--spacing-24);
@@ -1076,6 +1082,7 @@
     --spacing-comp-offer-card-list-view-p-img: var(--spacing-xs);
     --spacing-comp-offer-card-list-view-gap: var(--spacing-lg);
     --radius-comp-offer-card-list-view-radius-img: var(--radius-lg);
+    --spacing-comp-offer-card-list-view-icon-size: var(--spacing-40);
     --spacing-comp-offer-card-list-view-logo-size: var(--spacing-40);
     --spacing-comp-offer-card-list-view-h-img: 106px;
     --spacing-comp-offer-card-list-view-w-img: 106px;
@@ -1104,6 +1111,8 @@
     --spacing-comp-partner-card-list-view-p-img: var(--spacing-xs);
     --spacing-comp-partner-card-list-view-gap: var(--spacing-lg);
     --radius-comp-partner-card-list-view-radius-img: var(--radius-lg);
+    --spacing-comp-partner-card-list-view-icon-size: var(--spacing-40);
+    --spacing-comp-partner-card-list-view-icon-size: var(--spacing-40);
     --spacing-comp-partner-card-list-view-logo-size: var(--spacing-40);
     --spacing-comp-partner-card-list-view-h-img: 106px;
     --spacing-comp-partner-card-list-view-w-img: 106px;
@@ -1391,8 +1400,8 @@
     --radius-comp-card-default-radius: var(--radius-xl);
     --spacing-comp-card-default-p-hor: var(--spacing-2xl);
     --spacing-comp-card-default-p-ver: var(--spacing-3xl);
-    --spacing-comp-carousel-gap: var(--spacing-md);
     --spacing-comp-carousel-dots-gap: var(--spacing-lg);
+    --spacing-comp-carousel-gap: var(--spacing-lg);
     --radius-comp-carousel-radius: var(--radius-lg);
     --spacing-comp-carousel-arrow-offset-sm: var(--spacing-xl);
     --spacing-comp-carousel-arrow-offset-v-sm: var(--spacing-xl);
@@ -1496,6 +1505,7 @@
     --spacing-comp-offer-card-list-view-p-img: var(--spacing-sm);
     --radius-comp-offer-card-list-view-radius-img: var(--radius-lg);
     --spacing-comp-offer-card-list-view-gap: var(--spacing-xl);
+    --spacing-comp-offer-card-list-view-icon-size: var(--spacing-40);
     --spacing-comp-offer-card-list-view-logo-size: var(--spacing-64);
     --spacing-comp-offer-card-list-view-h-img: 112px;
     --spacing-comp-offer-card-list-view-w-img: 112px;
@@ -1524,6 +1534,8 @@
     --spacing-comp-partner-card-list-view-p-img: var(--spacing-sm);
     --radius-comp-partner-card-list-view-radius-img: var(--radius-lg);
     --spacing-comp-partner-card-list-view-gap: var(--spacing-xl);
+    --spacing-comp-partner-card-list-view-icon-size: var(--spacing-40);
+    --spacing-comp-partner-card-list-view-icon-size: var(--spacing-40);
     --spacing-comp-partner-card-list-view-logo-size: var(--spacing-64);
     --spacing-comp-partner-card-list-view-h-img: 112px;
     --spacing-comp-partner-card-list-view-w-img: 112px;

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;AA0Z5C,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;AA6Z5C,eAAO,MAAM,EAAE,GAAI,GAAG,QAAQ,UAAU,EAAE,WAEzC,CAAA"}

package/dist/utils/cn.js

@@ -1,5 +1,5 @@
 import { clsx as p } from "clsx";
-import { extendTailwindMerge as a } from "tailwind-merge";
+import { extendTailwindMerge as e } from "tailwind-merge";
 const o = [
   "none",
   "2xs",
@@ -333,6 +333,7 @@ const o = [
   "comp-offer-card-compact-p-img",
   "comp-offer-card-compact-p-top",
   "comp-offer-card-compact-radius",
+  "comp-offer-card-list-view-icon-size",
   "comp-offer-card-search-gap",
   "comp-offer-card-search-gap-text",
   "comp-offer-card-search-h-img",
@@ -351,6 +352,7 @@ const o = [
   "comp-partner-card-hero-sm-radius",
   "comp-partner-card-list-view-gap",
   "comp-partner-card-list-view-h-img",
+  "comp-partner-card-list-view-icon-size",
   "comp-partner-card-list-view-p-img",
   "comp-partner-card-list-view-radius-img",
   "comp-partner-card-list-view-w-img",
@@ -380,6 +382,7 @@ const o = [
   "comp-slider-track-h-sm",
   "comp-voucher-listview-gap",
   "comp-voucher-listview-h-img",
+  "comp-voucher-listview-icon-size",
   "comp-voucher-listview-p",
   "comp-voucher-listview-radius-img",
   "comp-voucher-listview-w-img",
@@ -393,7 +396,7 @@ const o = [
   "comp-dropdown-menu-market-min-w",
   "comp-map-pin-card-p",
   "comp-map-pin-card-radius"
-], e = a({
+], a = e({
   extend: {
     theme: {
       spacing: o,
@@ -401,7 +404,7 @@ const o = [
     },
     classGroups: {}
   }
-}), t = (...c) => e(p(c));
+}), t = (...c) => a(p(c));
 export {
   t as cn
 };

package/dist/utils/disabledLinkProps.d.ts

@@ -4,9 +4,16 @@ import type * as React from 'react';
  * to make it non-navigable while disabled. Library-agnostic: removes the
  * element from the tab order and blocks activation even when the navigation
  * target is not `href` (e.g. React Router's `to`).
+ *
+ * Deliberately does **not** null the navigation prop. Router links validate
+ * their target eagerly — Next.js `<Link>` throws when `href` is `undefined` —
+ * so stripping it on a cloned `asChild` child tears down the card's subtree
+ * instead of disabling it. `tabIndex: -1`, `aria-disabled` and the `onClick`
+ * guard already make the element non-navigable, and the card root carries
+ * `pointer-events-none` on top of that. Components that render their own
+ * built-in `<a>` strip `href` there, where the element type is known.
  */
 export declare const disabledLinkProps: {
-    href: undefined;
     tabIndex: number;
     'aria-disabled': true;
     onClick: (event: React.MouseEvent) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"disabledLinkProps.d.ts","sourceRoot":"","sources":["../../src/utils/disabledLinkProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB;;;;qBAIX,KAAK,CAAC,UAAU;CACgB,CAAA"}
+{"version":3,"file":"disabledLinkProps.d.ts","sourceRoot":"","sources":["../../src/utils/disabledLinkProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB;;;qBAGX,KAAK,CAAC,UAAU;CACgB,CAAA"}

package/dist/utils/disabledLinkProps.js

@@ -1,5 +1,4 @@
 const a = {
-  href: void 0,
   tabIndex: -1,
   "aria-disabled": !0,
   onClick: (e) => e.preventDefault()

package/llms-full.md

@@ -44,8 +44,8 @@ NEVER create new UI components that duplicate Muza UI functionality. Check avail
 
 **Complete Component List (57 components)**
 
-**Form & Input (17)**:
-Button, ButtonArrow, Input, PasswordInput, Textarea, Checkbox, Radio, Switch, Toggle, ToggleCheckButton, ToggleGroup, Select, MultiSelect, Searchbar, FileUpload, TextEditor, Slider
+**Form & Input (18)**:
+Button, ButtonArrow, Input, PasswordInput, Textarea, Checkbox, Radio, Switch, Toggle, ToggleCheckButton, ToggleGroup, Select, SelectTrigger, MultiSelect, Searchbar, FileUpload, TextEditor, Slider
 
 **Layout & Structure (7)**:
 Accordion, Card, Flex, Sheet, Typography, Dialog, Skeleton
@@ -176,6 +176,25 @@ import {
 
 Sub-components: `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuPortal`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuButtonItem`
 
+**Navigation entries must be links.** Use `asChild` on `DropdownMenuItem` so the item
+renders as a real anchor instead of a div with an `onSelect` handler:
+
+```tsx
+<DropdownMenuItem asChild icon={<HeartBold />}>
+  <Link href="/profile/favorite">Favorites</Link>
+</DropdownMenuItem>
+```
+
+This produces a single `<a role="menuitem">` carrying the item styling, with the icon
+inside it. Do NOT use `onSelect={() => router.push('/x')}` for navigation — it throws
+away middle-click, Ctrl+click, "open link in new tab", "copy link address", the hover
+URL preview, link semantics for screen readers and framework prefetching.
+
+`icon`, `isActive` and `description` all still render, and keyboard navigation,
+typeahead and `onSelect` are unchanged. `asChild` works the same way on
+`DropdownMenuCheckboxItem` and `DropdownMenuRadioItem`, though a navigating child makes
+little sense for those.
+
 #### Accordion
 
 ```tsx
@@ -222,6 +241,69 @@ import { Popover, PopoverContent, PopoverTrigger } from '@vkzstudio/muza-ui'
 </Popover>
 ```
 
+#### Carousel
+
+Built on [Embla Carousel](https://www.embla-carousel.com/). `CarouselItem` is full-width by default — override `basis-*` for multi-slide layouts.
+
+```tsx
+import {
+  Carousel,
+  CarouselContent,
+  CarouselDots,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@vkzstudio/muza-ui'
+
+;<Carousel align="start" options={{ loop: true }}>
+  <CarouselContent>
+    <CarouselItem className="basis-1/2 md:basis-1/3">Slide 1</CarouselItem>
+    <CarouselItem className="basis-1/2 md:basis-1/3">Slide 2</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+  <CarouselDots />
+</Carousel>
+```
+
+**Autoplay** — set `autoplay` for a self-running carousel. Do NOT install `embla-carousel-autoplay` or hand-roll a timer in your app; the library owns this.
+
+```tsx
+// Advances every 5000ms by default; pair with loop for a seamless wrap
+<Carousel autoplay options={{ loop: true }}>...</Carousel>
+
+// Custom interval
+<Carousel autoplay autoplayDelay={3000}>...</Carousel>
+```
+
+- Pauses on hover (mouse only) and while dragging; resumes on mouse leave, once the slide settles, or after a plain tap.
+- Never runs under `prefers-reduced-motion: reduce`, or with a single slide.
+- `autoplay` appends Embla's `Autoplay` plugin to `plugins`, so your own plugins keep working. Passing your own `Autoplay({ ... })` instance via `plugins` takes precedence — `autoplay` steps aside rather than adding a second timer.
+
+**Custom controls** — `useCarousel()` exposes the carousel's state and controls to any descendant, so you don't need `setApi` + local state for a counter, progress bar, or bespoke dot strip. It throws outside a `<Carousel>`.
+
+```tsx
+import { useCarousel } from '@vkzstudio/muza-ui'
+
+const SlideCounter = () => {
+  const { selectedIndex, slidesCount } = useCarousel()
+  return (
+    <span>
+      {selectedIndex + 1} / {slidesCount}
+    </span>
+  )
+}
+
+;<Carousel>
+  <CarouselContent>...</CarouselContent>
+  <SlideCounter /> {/* must be inside <Carousel> */}
+</Carousel>
+```
+
+Returns `api`, `carouselRef`, `scrollPrev`, `scrollNext`, `scrollTo(index)`, `canScrollPrev`, `canScrollNext`, `selectedIndex`, `slidesCount`, plus the root's `options` / `orientation` / `plugins`.
+
+Other props: `orientation` (`'horizontal' | 'vertical'`), `align`, `options` (Embla options), `plugins` (Embla plugins), `setApi` (imperative Embla API).
+
 ### 5. Complex Component APIs
 
 #### DatePicker
@@ -274,6 +356,53 @@ import { Select } from '@vkzstudio/muza-ui'
 />
 ```
 
+#### SelectTrigger (styling a menu trigger)
+
+`Select` is a value picker with combobox/listbox semantics. When the design calls for
+the select pill but the control is really a **menu** — an account dropdown, a filter
+menu, a navigation dropdown — use `SelectTrigger`, the exact button `Select` renders,
+exported on its own. Do not hand-copy the `comp-select-*` tokens into your own
+`<button>`; that silently drifts whenever Select is restyled.
+
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  SelectTrigger,
+} from '@vkzstudio/muza-ui'
+
+;<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <SelectTrigger size="sm" className="max-w-comp-market-nav-select-max-w">
+      {userName}
+    </SelectTrigger>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end" sideOffset={8}>
+    <DropdownMenuItem icon={<UserBold />}>My profile</DropdownMenuItem>
+    <DropdownMenuItem icon={<Logout2Outline />}>Log out</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+Key points:
+
+- **Stateless — no `open` prop.** The expanded border and the chevron rotation come
+  from `data-state="open"`, which Radix sets on the trigger in `Select`,
+  `DropdownMenu`, `Popover` and friends. Do not keep a local `menuOpen` state for
+  styling.
+- **`asChild` works.** It is a `forwardRef` over a single `<button>` and spreads every
+  remaining prop, so Radix's ref, handlers, `aria-expanded`, `aria-haspopup` and
+  `data-state` all land on it.
+- **It owns the chevron and truncation.** A `string` or `number` child is rendered in
+  the standard truncated label style; pass a node for full control.
+- `className` is merged with `cn`, so `max-w-*` and friends work.
+- Props: `size` (`'xs' | 'sm' | 'base' | 'lg'`), `error`, `disabled`, `prefix`,
+  `hasDescription`, plus all native `<button>` attributes.
+- `triggerWrapperVariants` is also exported as an escape hatch for cases that cannot
+  use the component, but prefer the component.
+
 #### toast() (imperative API)
 
 Toast uses an imperative function, not a declarative component:
@@ -517,6 +646,8 @@ interface CustomButtonProps extends ButtonProps {
 - Mix different UI libraries (Material-UI, Ant Design, etc.) with Muza UI
 - Create custom toast/notification systems
 - Use `<Alert variant="error">` - use `<Alert type="error">` instead
+- Copy `comp-select-*` classes into your own trigger button - use `SelectTrigger`
+- Use `<Select>` for a menu of actions - it is a combobox; use `SelectTrigger` inside `DropdownMenuTrigger asChild`
 
 ## DO
 

package/llms.txt

@@ -21,6 +21,8 @@ import '@vkzstudio/muza-ui/styles'
 
 See llms-full.md for component APIs, compound component patterns, and react-hook-form integration.
 
+Some components own behaviour you should not re-implement in an app — e.g. `Carousel` has built-in autoplay (`autoplay` / `autoplayDelay`, with hover/drag pausing and `prefers-reduced-motion` support), so don't install `embla-carousel-autoplay` or hand-roll a timer.
+
 ## Component Categories (57 total)
 
 **Form & Input (17)**: Button, ButtonArrow, Input, PasswordInput, Textarea, Checkbox, Radio, Switch, Toggle, ToggleCheckButton, ToggleGroup, Select, MultiSelect, Searchbar, FileUpload, TextEditor, Slider

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkzstudio/muza-ui",
-  "version": "1.5.2",
+  "version": "1.7.0",
   "description": "React component library built with Vite, shadcn/ui, and Tailwind CSS",
   "type": "module",
   "main": "./dist/index.js",
@@ -65,6 +65,7 @@
     "add-component": "chmod +x scripts/add-component.sh && ./scripts/add-component.sh",
     "add-component:win": "powershell -ExecutionPolicy Bypass -File scripts/add-component.ps1",
     "tokens:import": "node scripts/import-tokens.mjs",
+    "changeset:version": "changeset version && npm install --package-lock-only --ignore-scripts",
     "format": "prettier --write .",
     "chromatic": "npx chromatic --project-token=chpt_23ce248b589dbff",
     "test:visual": "storybook build --output-dir storybook-static --quiet && playwright test",
@@ -103,6 +104,7 @@
     "clsx": "^2.1.0",
     "color": "^5.0.2",
     "date-fns": "^4.1.0",
+    "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.29.0",
     "input-otp": "^1.4.2",