@profitliga/ui 1.2.90 → 2.0.1

package/README.md

@@ -1,173 +1,257 @@
-# UI Kit
+# @profitliga/ui
 
-Vue 3 UI component library with TypeScript and SCSS support.
+Библиотека UI-компонентов для Vue 3 на TypeScript и SCSS.
 
-## View Storybook Library
+**[Storybook — живая документация и все компоненты](https://697758c596ce722ff0116b1e-dxbdjystav.chromatic.com/)**
 
-[Storybook Library](https://697758c596ce722ff0116b1e-dxbdjystav.chromatic.com/)
+## Установка
 
-## Installation
+```bash
+npm i @profitliga/ui
+```
+
+Пакет не тянет зависимости за собой — их нужно поставить в проекте:
 
 ```bash
-yarn @profitliga/ui
+npm i vue reka-ui @vueuse/core dayjs @internationalized/date @lucide/vue \
+      @tanstack/vue-table @tanstack/vue-virtual tailwindcss
 ```
 
-## Usage
+| Зависимость               | Версия     |
+| ------------------------- | ---------- |
+| `vue`                     | `3.5.26`   |
+| `reka-ui`                 | `2.7.0`    |
+| `@vueuse/core`            | `14.1.0`   |
+| `dayjs`                   | `1.11.19`  |
+| `@internationalized/date` | `^3.12.0`  |
+| `@lucide/vue`             | `^1.7.0`   |
+| `@tanstack/vue-table`     | `8.21.3`   |
+| `@tanstack/vue-virtual`   | `^3.13.35` |
+| `tailwindcss`             | `4.1.18`   |
+
+## Быстрый старт
 
-### Importing Components
+Один раз в точке входа приложения подключите базовые стили — CSS-переменные, reset, типографику и объявления шрифтов:
 
-```typescript
-import { Button } from '@profitliga/ui/components'
+```ts
+// main.ts
 import '@profitliga/ui/style.css'
 ```
 
-### Using Components
+Строго обязательного тут только одно — сброс уровня документа. Всё остальное (переменные темы, палитра, шрифты, типографика) приезжает вместе с компонентами, так что приложение со своим reset может подключить и не весь файл — см. [Стили по частям](#стили-по-частям).
+
+Дальше просто импортируйте компоненты. Стили каждого компонента приезжают вместе с ним — отдельно подключать ничего не нужно:
 
 ```vue
 <script setup lang="ts">
-import { Button } from '@profitliga/ui/components'
+import { Button, Input } from '@profitliga/ui/components/v2'
+import { ref } from 'vue'
 
-const handleClick = () => {
-	console.log('Button clicked!')
-}
+const email = ref('')
+
+const submit = () => console.log(email.value)
 </script>
 
 <template>
-	<div>
-		<Button @click="handleClick"> Click Me </Button>
+	<Input v-model="email" label="Почта" placeholder="you@example.com" />
+	<Button variant="success" @click="submit">Отправить</Button>
+</template>
+```
 
-		<Button variant="secondary" size="large"> Secondary Button </Button>
+### Шрифты
 
-		<Button variant="outline" :disabled="true"> Disabled Button </Button>
-	</div>
-</template>
+`@font-face` ссылается на шрифты по абсолютному пути `/fonts/Inter/…`, поэтому их нужно раздавать из корня сайта. Проще всего скопировать каталог в статику:
+
+```bash
+cp -r node_modules/@profitliga/ui/dist/fonts public/fonts
+```
+
+Если копирование удобнее делать сборкой, файлы доступны как подпуть пакета — `@profitliga/ui/fonts/Inter/Inter-Regular.woff2` и т. д.
+
+Если шрифты не подложить, вёрстка отрисуется системным `sans-serif`.
+
+## Точки входа
+
+| Импорт                         | Что внутри                                                 |
+| ------------------------------ | ---------------------------------------------------------- |
+| `@profitliga/ui/components/v2` | Актуальный набор компонентов — **используйте его**         |
+| `@profitliga/ui/components`    | Первое поколение, legacy                                   |
+| `@profitliga/ui/icons`         | Иконки: 139 монохромных и 17 цветных                       |
+| `@profitliga/ui/utils`         | Утилиты и composables                                      |
+| `@profitliga/ui/style.css`     | Базовые стили целиком — токены, reset, типографика, шрифты |
+| `@profitliga/ui/tokens.css`    | Только токены и компонентный минимум, без reset            |
+| `@profitliga/ui/reset.css`     | Только сброс уровня документа                              |
+| `@profitliga/ui/styles/*.scss` | Исходники SCSS: миксины, переменные, палитра               |
+| `@profitliga/ui/tailwind`      | Слой темы для Tailwind 4                                   |
+
+### Стили по частям
+
+`style.css` — это сумма двух вещей:
+
+- **токены и компонентный минимум** (`tokens.css`): CSS-переменные, палитра, кейфреймы, шрифты, типографика, `box-sizing` и сброс кнопок и полей. Приезжает автоматически вместе с любым импортом из `components/v2` — подключать отдельно не нужно;
+- **сброс уровня документа** (`reset.css`): `html`, `body`, `a`, `img`, заголовки, обнуление отступов. Трогает разметку приложения, поэтому импорт компонентов его не тянет.
+
+Если у приложения свой reset и правила библиотеки ему мешают, подключайте только его часть:
+
+```ts
+import '@profitliga/ui/reset.css'
+
+// либо не подключайте вовсе
+```
+
+Компоненты продолжат работать: всё, без чего они разъезжаются, лежит в `tokens.css` и едет с ними.
+
+### Какой набор компонентов брать
+
+Для нового кода — `components/v2`. Эти компоненты приведены к WAI-ARIA, и их доступность проверяется автотестами: **каждая история v2 прогоняется через axe на пороге `error`**, любое нарушение роняет `npm run test:a11y`. Набор из `components` остаётся для уже написанного кода, его нарушения доступности пока не разобраны.
+
+Наборы независимы, их можно использовать одновременно — но в пределах одного экрана лучше не смешивать: у поколений разный визуальный язык.
+
+В v2 сейчас 37 компонентов, в первом поколении — 47. Если нужного компонента в v2 ещё нет — берите его из первого поколения:
+
+```ts
+import { Dialog } from '@profitliga/ui/components/v2'
 ```
 
-### Using Composables
+```ts
+import { DataTable } from '@profitliga/ui/components'
+```
+
+Только в v1 доступны `ChipCheckbox`, `DateRangePicker`, `FormField`, `Image`, `InputText`, `Label`, `ListBox`, `OverlayBadge`, `ProgressBar`, `RadioGroup`, `RangeCalendar`, `ScheduleMobile`, `ScrollArea`, `Skeleton`, `Spinner`, `TimeField`. Всё остальное уже есть в v2 — в том числе `DataTable` и `Breadcrumb`.
+
+## Иконки
+
+Каждая иконка — отдельный Vue-компонент. В бандл попадают только те, что вы импортировали:
 
 ```vue
 <script setup lang="ts">
-import { useCounter } from '@profitliga/ui/utils'
-
-const { count, increment, decrement, reset, isAtMax, isAtMin } = useCounter({
-	initialValue: 0,
-	min: 0,
-	max: 10
-})
+import { AngleBottomIcon, BonusIcon } from '@profitliga/ui/icons'
 </script>
 
 <template>
-	<div>
-		<p>Count: {{ count }}</p>
-		<button @click="increment" :disabled="isAtMax">+</button>
-		<button @click="decrement" :disabled="isAtMin">-</button>
-		<button @click="reset">Reset</button>
-	</div>
+	<AngleBottomIcon />
+	<BonusIcon />
 </template>
 ```
 
-## Customization with SCSS
-
-You can import and customize SCSS variables in your project:
+Иконки принимают размер и цвет через CSS — задавайте их на родителе или классом.
 
-```scss
-// Override default variables
-$primary-color: #your-color;
-$border-radius: 0.5rem;
+## Утилиты
 
-// Import ui-kit styles
-@use '@profitliga/ui/styles/variables' as *;
-@use '@profitliga/ui/styles/mixins' as *;
+```ts
+import {
+	breakpoints,
+	dayjs,
+	priceFormat,
+	useFocusTrap
+} from '@profitliga/ui/utils'
 ```
 
-### Available SCSS Variables
+Что доступно: `dayjs` (уже с плагинами и русской локалью), `priceFormat` и `formatPrice`, `breakpoints`, `parseFileSize`, `uploadFile`, `eventBus`, `isClient`, `onClickOutside`, `useBodyScroll`, `useFocusTrap`, `useSwipeToClose`, хелперы `@internationalized/date`.
 
-```scss
-// Colors
-$primary-color: #3b82f6
-$secondary-color: #64748b
-$text-color: #1e293b
-$background-color: #ffffff
-$border-color: #e2e8f0
-
-// Spacing
-$spacing-xs: 0.25rem
-$spacing-sm: 0.5rem
-$spacing-md: 1rem
-$spacing-lg: 1.5rem
-$spacing-xl: 2rem
-
-// Border radius
-$border-radius: 0.375rem
-$border-radius-sm: 0.25rem
-$border-radius-lg: 0.5rem
+## Стилизация
+
+### CSS-переменные
+
+Тема задаётся кастомными свойствами — переопределяйте их у себя, пересобирать библиотеку не нужно:
+
+```css
+:root {
+	--input-height: 44px;
+	--animation-duration: 0.2s;
+}
 ```
 
-### Available Mixins
+Основные группы: `--theme-*` (палитра), `--input-*` (поля ввода), `--animation-duration`, z-index'ы оверлеев. Полный список — в `@profitliga/ui/styles/vars.scss` и `colors.scss`.
+
+### SCSS-миксины
 
 ```scss
-@use '@profitliga/ui/styles/mixins' as *;
+@use '@profitliga/ui/styles/mixins.scss' as *;
 
-.my-component {
-	@include flex-center;
-	@include hover-lift;
-	@include responsive('tablet') {
-		// tablet styles
+.card {
+	@include respond(lg) {
+		padding: 24px;
 	}
+
+	@include ellipsis-multiline(3);
+	@include custom-scrollbar(vertical);
 }
 ```
 
-## Components
+Доступны: `respond($breakpoint)`, `media-min-width($width)`, `ellipsis-multiline($lines)`, `focus-ring($offset)`, `custom-scrollbar($direction)`, `font-face($family, $weights)`.
 
-### Button
+Брейкпоинты: `sm` 640px, `md` 768px, `lg` 1010px, `xl` 1220px, `xxl` 1420px, `xxxl` 1620px.
 
-A versatile button component with multiple variants and sizes.
+### Tailwind
 
-**Props:**
+Пакет отдаёт слой темы для Tailwind 4 — брейкпоинты, палитру и шрифт в виде токенов:
 
-- `variant`: `'primary' | 'secondary' | 'outline'` (default: `'primary'`)
-- `size`: `'small' | 'medium' | 'large'` (default: `'medium'`)
-- `disabled`: `boolean` (default: `false`)
+```css
+@import '@profitliga/ui/tailwind';
+```
 
-**Events:**
+## Размер бандла
 
-- `click`: Emitted when button is clicked (with MouseEvent)
+Библиотека собрана помодульно: неиспользованный код и стили не попадают в сборку приложения. Замеры на реальном бандле (Vite, peer-зависимости внешние, минификация включена):
 
-## Composables
+| Импорт      | JS      | CSS     |
+| ----------- | ------- | ------- |
+| одна иконка | 0.97 KB | —       |
+| `Badge`     | 2.31 KB | 11.3 KB |
+| `Button`    | 2.71 KB | 17.1 KB |
+| `Input`     | 8.65 KB | 14.4 KB |
+| весь `v2`   | 315 KB  | 139 KB  |
 
-### useCounter
+То есть одна кнопка стоит меньше процента от набора. Стили тоже подтягиваются покомпонентно, а не одним файлом; в колонке CSS ~9 KB — это общий базовый слой токенов, он одинаков для любого импорта и дальше не растёт.
 
-A composable for managing counter state with min/max constraints.
+Чтобы это работало, импортируйте из точек входа, а не из глубины пакета.
 
-**Options:**
+## Миграция
 
-- `initialValue`: Starting value (default: `0`)
-- `min`: Minimum allowed value (default: `-Infinity`)
-- `max`: Maximum allowed value (default: `Infinity`)
+### С первого поколения на v2
 
-**Returns:**
+Переезд с `@profitliga/ui/components` на `@profitliga/ui/components/v2` разобран отдельно — карта компонентов, таблица переименованных пропов и примеры до/после: **[MIGRATION.md](./MIGRATION.md)**.
 
-- `count`: Reactive counter value
-- `increment()`: Increment counter
-- `decrement()`: Decrement counter
-- `reset()`: Reset to initial value
-- `set(value)`: Set to specific value
-- `isAtMin`: Boolean indicating if at minimum
-- `isAtMax`: Boolean indicating if at maximum
+### `Input` с `type="select"` → компонент `InputSelect`
 
-## Development
+Поле с чипом-селектом внутри переехало в отдельный компонент. Причина в весе: чип тянет за собой `Popover` со шторкой, и обычное текстовое поле платило за это ~27 KB, даже когда селект ему не нужен. После разделения `Input` стоит 8.65 KB вместо 35.
 
-```bash
-# Install dependencies
-yarn
+```vue
+<!-- было -->
+<Input
+	v-model="query"
+	v-model:selected="scope"
+	type="select"
+	:options="options"
+	select-placeholder="Везде"
+/>
+
+<!-- стало -->
+<InputSelect
+	v-model="query"
+	v-model:selected="scope"
+	:options="options"
+	select-placeholder="Везде"
+/>
+```
+
+Что убрано из `Input`: значение `'select'` у пропа `type`, пропы `options`, `selectPlaceholder`, `selectLabel`, `dropdownWidth`, `breakpointMobile`, модель `v-model:selected` и событие `select`. Все они теперь у `InputSelect`, остальные пропы поля совпадают.
 
-# Build library
-yarn build
+Тип `InputSelectOption` экспортируется из той же точки входа, импорт менять не нужно.
 
-# Type check
-yarn type-check
+Если вы опирались на CSS-класс `.input-field--type-select` — он стал `.input-field--with-control-start`.
+
+## Разработка
+
+```bash
+npm i              # зависимости
+npm run storybook  # Storybook на :6006
+npm run build      # сборка библиотеки
+npm run check      # типы + линтер + формат
+npm run test:a11y  # тесты доступности
 ```
 
-## License
+## Лицензия
 
 MIT

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/dist/components/Accordion/AccordionContent.css

@@ -0,0 +1 @@
+.accordion-content[data-v-36f0e6cd]{overflow:hidden}.accordion-content[data-state=open][data-v-36f0e6cd]{animation:slideDown-36f0e6cd var(--animation-duration) ease-in-out}.accordion-content[data-state=closed][data-v-36f0e6cd]{animation:slideUp-36f0e6cd var(--animation-duration) ease-in-out}@keyframes slideDown-36f0e6cd{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes slideUp-36f0e6cd{0%{height:var(--reka-accordion-content-height)}to{height:0}}

package/dist/components/Accordion/AccordionContent.vue.d.ts

@@ -1,17 +1,21 @@
 import { IAccordionContentProps } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
 };
-declare const __VLS_base: DefineComponent<IAccordionContentProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IAccordionContentProps> & Readonly<{}>, {
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<IAccordionContentProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IAccordionContentProps> & Readonly<{}>, {
     asChild: boolean;
     forceMount: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
+type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/Accordion/AccordionContent.vue.js

@@ -0,0 +1,8 @@
+import './AccordionContent.css';
+import o from "./AccordionContent.vue2.js";
+/* empty css                      */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-36f0e6cd"]]);
+export {
+  f as default
+};

package/dist/components/Accordion/AccordionContent.vue2.js

@@ -0,0 +1,26 @@
+import { defineComponent as t, openBlock as n, createBlock as a, unref as c, withCtx as r, renderSlot as l } from "vue";
+import { AccordionContent as s } from "reka-ui";
+const i = /* @__PURE__ */ t({
+  __name: "AccordionContent",
+  props: {
+    asChild: { type: Boolean, default: !1 },
+    as: {},
+    forceMount: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (o, f) => (n(), a(c(s), {
+      class: "accordion-content",
+      as: e.as,
+      "as-child": e.asChild,
+      "force-mount": e.forceMount
+    }, {
+      default: r(() => [
+        l(o.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "force-mount"]));
+  }
+});
+export {
+  i as default
+};

package/dist/components/Accordion/AccordionHeader.vue.d.ts

@@ -1,14 +1,18 @@
 import { IAccordionHeaderProps } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
 };
-declare const __VLS_base: DefineComponent<IAccordionHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IAccordionHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<IAccordionHeaderProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IAccordionHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
+type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/Accordion/AccordionHeader.vue.js

@@ -0,0 +1,21 @@
+import { defineComponent as t, openBlock as a, createBlock as n, unref as c, mergeProps as s, withCtx as d, renderSlot as p } from "vue";
+import { AccordionHeader as l } from "reka-ui";
+const u = /* @__PURE__ */ t({
+  __name: "AccordionHeader",
+  props: {
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(e) {
+    const o = e;
+    return (r, i) => (a(), n(c(l), s({ class: "accordion-header" }, o), {
+      default: d(() => [
+        p(r.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  u as default
+};

package/dist/components/Accordion/AccordionHeader.vue2.js

@@ -0,0 +1,4 @@
+import f from "./AccordionHeader.vue.js";
+export {
+  f as default
+};

package/dist/components/Accordion/AccordionItem.css

@@ -0,0 +1 @@
+.accordion-item[data-v-9d8a57d5]{flex-direction:column;gap:4px;display:flex}.accordion-item.accordion-item--filled[data-v-9d8a57d5]{border:1px solid var(--theme-neutral-surface-icon);border-radius:12px;overflow:hidden}.accordion-item.accordion-item--filled[data-v-9d8a57d5] .accordion-header{background-color:var(--theme-neutral-surface-icon)}.accordion-item.accordion-item--filled[data-v-9d8a57d5] .accordion-trigger__arrow{background-color:var(--theme-primary-500);border-radius:100%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.accordion-item.accordion-item--filled[data-v-9d8a57d5] .accordion-trigger__arrow svg{color:var(--theme-neutral-0)}.accordion-item.accordion-item--outlined[data-v-9d8a57d5]{border:1px solid #74889c33;border-radius:8px;overflow:hidden}

package/dist/components/Accordion/AccordionItem.vue.d.ts

@@ -1,16 +1,20 @@
 import { IAccordionItemProps } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
 };
-declare const __VLS_base: DefineComponent<IAccordionItemProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IAccordionItemProps> & Readonly<{}>, {
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<IAccordionItemProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<IAccordionItemProps> & Readonly<{}>, {
     styleVariant: "inline" | "filled" | "outlined";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
+type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/Accordion/AccordionItem.vue.js

@@ -0,0 +1,8 @@
+import './AccordionItem.css';
+import o from "./AccordionItem.vue2.js";
+/* empty css                   */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9d8a57d5"]]);
+export {
+  c as default
+};

package/dist/components/Accordion/AccordionItem.vue2.js

@@ -0,0 +1,24 @@
+import { defineComponent as r, openBlock as n, createBlock as a, unref as c, mergeProps as i, withCtx as l, renderSlot as s } from "vue";
+import { AccordionItem as d } from "reka-ui";
+const f = /* @__PURE__ */ r({
+  __name: "AccordionItem",
+  props: {
+    value: {},
+    disabled: { type: Boolean },
+    styleVariant: { default: "inline" }
+  },
+  setup(e) {
+    const t = e;
+    return (o, m) => (n(), a(c(d), i({
+      class: ["accordion-item", `accordion-item--${e.styleVariant}`]
+    }, t), {
+      default: l(() => [
+        s(o.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+});
+export {
+  f as default
+};

package/dist/components/Accordion/AccordionRoot.vue.d.ts

@@ -1,18 +1,22 @@
 import { IAccordionRootProps } from './types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-declare var __VLS_8: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
 };
-declare const __VLS_base: DefineComponent<IAccordionRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<IAccordionRootProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:modelValue": (value: string | string[] | undefined) => any;
 }, string, PublicProps, Readonly<IAccordionRootProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
+type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

package/dist/components/Accordion/AccordionRoot.vue.js

@@ -0,0 +1,25 @@
+import { defineComponent as s, openBlock as n, createBlock as p, unref as o, normalizeProps as i, guardReactiveProps as l, withCtx as c, renderSlot as d } from "vue";
+import { useForwardPropsEmits as m, AccordionRoot as u } from "reka-ui";
+const P = /* @__PURE__ */ s({
+  __name: "AccordionRoot",
+  props: {
+    type: {},
+    collapsible: { type: Boolean },
+    defaultValue: {},
+    disabled: { type: Boolean },
+    orientation: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const r = m(e, t);
+    return (a, B) => (n(), p(o(u), i(l(o(r))), {
+      default: c(() => [
+        d(a.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+export {
+  P as default
+};

package/dist/components/Accordion/AccordionRoot.vue2.js

@@ -0,0 +1,4 @@
+import f from "./AccordionRoot.vue.js";
+export {
+  f as default
+};

package/dist/components/Accordion/AccordionTrigger.css

@@ -0,0 +1 @@
+.accordion-trigger[data-v-9cb974ca]{cursor:pointer;justify-content:flex-start;align-items:center;gap:8px;width:100%;padding:12px 4px;font-size:1rem;font-weight:500;transition:background-color .3s ease-in-out;display:flex}.accordion-trigger[data-v-9cb974ca]:not(:disabled,[data-disabled]):hover{background-color:var(--color-secondary-150)}.accordion-trigger[data-disabled][data-v-9cb974ca],.accordion-trigger[data-v-9cb974ca]:disabled{cursor:not-allowed}.accordion-trigger__arrow[data-v-9cb974ca]{justify-content:center;align-items:center;width:16px;height:16px;margin-left:auto;display:flex}.accordion-trigger__arrow svg[data-v-9cb974ca]{width:100%;height:100%;transition:transform var(--animation-duration) ease-in-out;margin-top:3px}.accordion-trigger[data-state=open] .accordion-trigger__arrow svg[data-v-9cb974ca]{margin-top:3px;transform:rotate(90deg)}