@roku-ui/vue 0.30.0 → 0.31.0

package/README.md

@@ -1,33 +1,92 @@
-# Max Min Vue
+# Roku UI Vue
 
-## Usage
+Vue 3 component library for the Roku UI design system. Every component is written in TypeScript, themed by shared tokens, and works with UnoCSS for consistent light and dark schemes.
 
-### Install
+## Installation
 
 ```bash
-pnpm install
+pnpm add @roku-ui/vue
+# Optional: enable utility classes and theme tokens
+pnpm add -D unocss @roku-ui/preset
 ```
 
-### Development
+## UnoCSS setup (recommended)
 
-```bash
-pnpm dev
+Add the Roku preset to your UnoCSS config and enable the Vite plugin so `virtual:uno.css` is generated:
+
+```ts
+import { rokuPreset } from '@roku-ui/preset'
+// uno.config.ts
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  presets: [rokuPreset()],
+})
 ```
 
-### Build
+```ts
+import vue from '@vitejs/plugin-vue'
+import Unocss from 'unocss/vite'
+// vite.config.ts
+import { defineConfig } from 'vite'
 
-```bash
-pnpm build
+export default defineConfig({
+  plugins: [vue(), Unocss()],
+})
 ```
 
-### Lint
+If you cannot run UnoCSS, import the prebuilt styles instead:
 
-```bash
-pnpm lint
+```ts
+import '@roku-ui/vue/style.css'
 ```
 
-### Test
+## Basic usage
+
+Wrap your app with `RokuProvider` to supply theme values and use components with the provided tokens such as `bg-base`, `text-default`, and `border-container`.
+
+```vue
+<script setup lang="ts">
+import { Btn, RokuProvider } from '@roku-ui/vue'
+</script>
+
+<template>
+  <RokuProvider :theme-obj="{ colors: { primary: '#0f6bff', surface: '#121212' } }">
+    <div class="text-default bg-base border-container p-6 border rounded-lg">
+      <h1 class="text-2xl font-semibold mb-4">
+        Roku UI Vue
+      </h1>
+      <Btn color="primary">
+        Get started
+      </Btn>
+    </div>
+  </RokuProvider>
+</template>
+```
+
+## Nuxt integration
+
+Use the Nuxt module to auto-register components with the `R` prefix:
 
 ```bash
-pnpm test
+pnpm add @roku-ui/nuxt @roku-ui/vue
 ```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@roku-ui/nuxt'],
+  rokuUi: {
+    // Optional: customize the prefix
+    prefix: 'R',
+  },
+})
+```
+
+## Local development
+
+- Install dependencies: `pnpm install`
+- Start the component playground: `pnpm --filter @roku-ui/vue dev`
+- Build the library: `pnpm --filter @roku-ui/vue build`
+- Run unit tests: `pnpm --filter @roku-ui/vue test --run`
+- Lint all packages: `pnpm lint`

package/dist/components/Avatar.vue.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'vue';
-import { Color, ContainerVariant, Rounded } from '../types';
+import { Color, ContainerVariant, CornerShape, Rounded } from '../types';
 type __VLS_Props = {
     is?: string | Component;
     src?: string | null;
@@ -8,6 +8,7 @@ type __VLS_Props = {
     variant?: ContainerVariant;
     color?: Color;
     rounded?: Rounded;
+    cornerShape?: CornerShape;
     skeleton?: boolean;
 };
 declare function __VLS_template(): {

package/dist/components/Icon.vue.d.ts

@@ -0,0 +1,37 @@
+import { BtnVariant, Color, IconSource, Rounded, Size } from '../types';
+type __VLS_Props = {
+    icon?: IconSource;
+    size?: Size;
+    variant?: BtnVariant;
+    color?: Color;
+    rounded?: Rounded;
+    outlineColor?: Color;
+    skeleton?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => any;
+    }> & {
+        default?: () => any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: Color;
+    icon: IconSource;
+    size: Size;
+    variant: BtnVariant;
+    rounded: Rounded;
+    skeleton: boolean;
+    outlineColor: Color;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Step.vue.d.ts

@@ -1,4 +1,4 @@
-import { IconSource, Color, Rounded } from '../types';
+import { Color, IconSource, Rounded } from '../types';
 export interface StepItem {
     title: string;
     description?: string;

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ export { default as ColorSwatch } from './ColorSwatch.vue';
 export { default as Drawer } from './Drawer.vue';
 export { default as Dropzone } from './Dropzone.vue';
 export { default as FullscreenOverlay } from './FullscreenOverlay.vue';
+export { default as Icon } from './Icon.vue';
 export { default as Image } from './Image.vue';
 export { default as Indicator } from './Indicator.vue';
 export { default as Menu } from './Menu.vue';