@smurfox/proxy-ui 0.2.2 → 0.3.0

package/README.md

@@ -616,6 +616,43 @@ const closeDropdown = inject("closeDropdown");
 
 ---
 
+### PULottie
+
+A Lottie animation player powered by `vue3-lottie`. Renders inside `ClientOnly` so it is SSR-safe, and shrinks 80px in width and height on screens narrower than 768px.
+
+```vue
+<script setup>
+import animationData from "./my-animation.json";
+</script>
+
+<template>
+  <PULottie :animation-data="animationData" />
+</template>
+```
+
+**Props**
+
+| Prop            | Type      | Default | Description                                                  |
+| --------------- | --------- | ------- | ------------------------------------------------------------ |
+| `animationData` | `object`  | —       | Parsed Lottie JSON object. Required.                         |
+| `loop`          | `boolean` | `true`  | Whether the animation loops.                                 |
+| `height`        | `number`  | `420`   | Height in pixels. Reduced by 80px on viewports below 768px.  |
+| `width`         | `number`  | `420`   | Width in pixels. Reduced by 80px on viewports below 768px.   |
+
+**Examples**
+
+```vue
+<!-- Play once -->
+<PULottie :animation-data="data" :loop="false" />
+
+<!-- Custom size -->
+<PULottie :animation-data="data" :width="240" :height="240" />
+```
+
+> `PUTable` ships with a bundled empty-state Lottie that uses this component internally. You can disable or override it via the table's `showEmptyAnimation` and `emptyAnimationData` props.
+
+---
+
 ### PUTable
 
 A responsive data table that renders as a normal `<table>` on `md+` viewports and switches to a stack of cards on mobile. Cells are rendered through per-column scoped slots so you can fully customize their content.
@@ -626,16 +663,22 @@ A responsive data table that renders as a normal `<table>` on `md+` viewports an
 
 **Props**
 
-| Prop          | Type                                                                        | Default                                  | Description                                                              |
-| ------------- | --------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------ |
-| `items`       | `Array<{ id: string \| number, [key: string]: unknown }>`                    | `[]`                                                                | Row data. Each item must have an `id` used as the Vue key.                              |
-| `columns`     | `{ name: string, id: string, width?: string }[]`                             | `[]`                                                                | Column definitions. `id` is the row key to read, `width` is CSS width.                  |
-| `rounded`     | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'lg'`                                                              | Border radius of the outer container.                                                   |
-| `isBordered`   | `boolean`                                                                    | `false`                                                             | Adds an outer border around the table.                                                  |
-| `isSelectable` | `boolean`                                                                    | `false`                                                             | Enables row click + hover effects (cursor, bg highlight, motion-v lift). Emits `row-click`. |
-| `itemsSize`    | `'sm' \| 'md' \| 'lg'`                                                       | `'md'`                                                              | Vertical padding of body rows. `sm` → `py-2`, `md` → `py-4`, `lg` → `py-6`.             |
-| `headerColor`  | `string`                                                                     | `bg-[#F4F4F5] text-[#71717A] dark:bg-[#27272A] dark:text-[#A1A1AA]` | Tailwind classes applied to `<thead>`.                                                  |
-| `bodyColor`    | `string`                                                                     | `''`                                                                | Tailwind classes applied to `<tbody>`.                                                  |
+| Prop                   | Type                                                                         | Default                                                                                  | Description                                                                                 |
+| ---------------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `items`                | `Array<{ id: string \| number, [key: string]: unknown }>`                    | `[]`                                                                                     | Row data. Each item must have an `id` used as the Vue key.                                  |
+| `columns`              | `{ name: string, id: string, width?: string }[]`                             | `[]`                                                                                     | Column definitions. `id` is the row key to read, `width` is CSS width.                      |
+| `rounded`              | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'` | `'lg'`                                                                                   | Border radius of the outer container.                                                       |
+| `isBordered`           | `boolean`                                                                    | `false`                                                                                  | Adds an outer border around the table.                                                      |
+| `isSelectable`         | `boolean`                                                                    | `false`                                                                                  | Enables row click + hover effects (cursor, bg highlight, motion-v lift). Emits `row-click`. |
+| `itemsSize`            | `'sm' \| 'md' \| 'lg'`                                                       | `'md'`                                                                                   | Vertical padding of body rows. `sm` → `py-2`, `md` → `py-4`, `lg` → `py-6`.                 |
+| `headerColor`          | `string`                                                                     | `bg-[#F4F4F5] text-[#71717A] dark:bg-[#27272A] dark:text-[#A1A1AA]`                      | Tailwind classes applied to `<thead>`.                                                      |
+| `bodyColor`            | `string`                                                                     | `''`                                                                                     | Tailwind classes applied to `<tbody>`.                                                      |
+| `hasShadow`            | `boolean`                                                                    | `true`                                                                                   | Adds an iOS-style outer shadow to the table container.                                      |
+| `emptyStateTitle`      | `string`                                                                     | `'No results found'`                                                                     | Heading shown when `items` is empty.                                                        |
+| `emptyStateDescription`| `string`                                                                     | `'Try adjusting your search or filter to find what you\'re looking for.'`                | Sub-text shown under the empty-state title.                                                 |
+| `showEmptyAnimation`   | `boolean`                                                                    | `true`                                                                                   | Renders a bundled Lottie above the empty-state text. Set to `false` to hide it.             |
+| `emptyAnimationData`   | `object \| undefined`                                                        | bundled `empty-state.json`                                                               | Override the empty-state Lottie with your own animation JSON object.                        |
+| `emptyAnimationSize`   | `number`                                                                     | `220`                                                                                    | Width and height of the empty-state animation, in pixels.                                   |
 
 **Events**
 
@@ -727,10 +770,16 @@ import type {
   TabItem,
   TabsProps,
   TabsRounded,
+  LottieProps,
+  TableProps,
+  TableColumn,
+  TableItem,
+  TableRounded,
+  TableItemsSize,
 } from "proxy-ui";
 ```
 
-> `PUTextArea`, `PUSelect`, `PUDropdown`, and `PUTable` define their props inline and do not export dedicated `Props` types. They reuse `InputVariant` and `InputRounded` from the same package.
+> `PUTextArea`, `PUSelect`, and `PUDropdown` define their props inline and do not export dedicated `Props` types. They reuse `InputVariant` and `InputRounded` from the same package.
 
 ---
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "proxy-ui",
   "configKey": "proxyUI",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/empty-state.json

@@ -0,0 +1 @@
+{"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.20","a":"","k":"","d":"","tc":""},"fr":30,"ip":0,"op":90,"w":1200,"h":1200,"nm":"box","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"eye","parent":5,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":17,"s":[100]},{"t":18.000000733155,"s":[0]}],"ix":11},"r":{"a":0,"k":-3.26,"ix":10},"p":{"a":0,"k":[615.862,463.104,0],"ix":2},"a":{"a":0,"k":[127.58,82.222,0],"ix":1},"s":{"a":0,"k":[100,71.332,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.039,0],[0.6,1.171],[-0.826,1.073],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[-1.309,0],[-0.618,-1.204],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-0.038,0.002]],"v":[[-32.856,35.435],[-35.969,33.533],[-35.631,29.803],[14.481,-35.435],[20.033,-31.17],[-25.569,28.195],[36.358,26.167],[36.587,33.164],[-32.741,35.433]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[218.323,35.685],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-0.233,-1.324],[1.093,-0.784]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[1.294,0.366],[0.232,1.324],[0,0]],"v":[[-32.586,36.912],[-36.667,31.225],[25.042,-13.055],[-35.578,-30.176],[-33.676,-36.912],[33.938,-17.816],[36.435,-15.052],[35.026,-11.604]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[36.917,127.282],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":119.000004846969,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"right eye","parent":5,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[0]},{"t":19.0000007738859,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[704.616,429.018,0],"ix":2},"a":{"a":0,"k":[11.582,20.934,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":38,"s":[100,100,100]},{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":43,"s":[100,0,100]},{"t":48.0000019550801,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-6.258,0],[0,11.422],[6.259,0],[0,-11.423]],"o":[[6.259,0],[0,-11.423],[-6.258,0],[0,11.422]],"v":[[0,20.683],[11.332,0],[0,-20.683],[-11.332,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[11.582,20.934],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":119.000004846969,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"left eye","parent":5,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":18,"s":[0]},{"t":19.0000007738859,"s":[100]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[522.057,503.396,0],"ix":2},"a":{"a":0,"k":[11.582,20.933,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":38,"s":[100,100,100]},{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":43,"s":[100,0,100]},{"t":48.0000019550801,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-6.259,0],[0,11.423],[6.258,0],[0,-11.422]],"o":[[6.258,0],[0,-11.422],[-6.259,0],[0,11.423]],"v":[[0.001,20.683],[11.332,-0.001],[0.001,-20.683],[-11.332,-0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[11.582,20.933],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":119.000004846969,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"mouth","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[635.424,595.739,0],"ix":2},"a":{"a":0,"k":[55.31,37.779,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[14.989,-38.593],[0,0],[-24.018,3.631],[-7.024,-8.854],[0,0],[20.125,-3.041]],"o":[[0,0],[16.303,-41.974],[22.978,-3.473],[0,0],[-4.857,-6.125],[-20.726,3.131]],"v":[[-47.702,37.528],[-55.061,34.673],[5.705,-34.055],[55.061,-12.846],[48.876,-7.941],[6.888,-26.251]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[55.31,37.779],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":119.000004846969,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"box","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":13,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":20,"s":[-3.323]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":30,"s":[-3.323]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":32,"s":[1.526]},{"t":34.0000013848484,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.97,"y":1},"o":{"x":0.5,"y":0},"t":13,"s":[599.823,1019.934,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.51,"y":1},"o":{"x":0.5,"y":0},"t":20,"s":[599.823,883.934,0],"to":[0,0,0],"ti":[0,0,0]},{"t":30.0000012219251,"s":[599.823,1027.934,0]}],"ix":2},"a":{"a":0,"k":[396.637,841.845,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.5,0.5,0.5],"y":[1,1,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":2,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,0.833,1]},"o":{"x":[0.5,0.5,0.5],"y":[0,0,0]},"t":11,"s":[100,55.00000000000001,100]},{"t":17.0000006924242,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-254.471,-127.467],[140.402,44.408],[143.989,169.658],[254.47,124.071],[251.131,-1.97],[-155.426,-169.658]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9607843137254902,0.19607843137254902,0.19607843137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[404.144,234.244],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-0.002,170.176],[396.387,4.152],[3.11,-170.176],[-396.387,0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.6078431372549019,0.6078431372549019,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[396.637,170.427],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.5,"y":1},"o":{"x":0.5,"y":0},"t":2,"s":[{"i":[[0,0],[0.326,-170],[0,0],[0,0],[-1.219,152],[0,0]],"o":[[0,0],[-0.326,170],[0,0],[0,0],[1.219,-152],[0,0]],"v":[[-197.227,-171.62],[-198.227,84.256],[-197.227,339.161],[198.227,174.49],[198.227,-59.743],[198.227,-338.785]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.5,"y":0},"t":11,"s":[{"i":[[0,0],[0.326,-170],[0,0],[0,0],[-1.219,152],[0,0]],"o":[[0,0],[-0.326,170],[0,0],[0,0],[1.219,-152],[0,0]],"v":[[-197.227,-171.62],[-221.227,84.256],[-197.227,339.161],[198.227,174.49],[218.227,-68.315],[198.227,-338.785]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":17,"s":[{"i":[[0,0],[0.326,-170],[0,0],[0,0],[-1.219,152],[0,0]],"o":[[0,0],[-0.326,170],[0,0],[0,0],[1.219,-152],[0,0]],"v":[[-197.227,-171.62],[-198.227,84.256],[-197.227,339.161],[198.227,174.49],[198.227,-59.743],[198.227,-338.785]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":30,"s":[{"i":[[0,0],[0.326,-170],[0,0],[0,0],[-1.219,152],[0,0]],"o":[[0,0],[-0.326,170],[0,0],[0,0],[1.219,-152],[0,0]],"v":[[-197.227,-171.62],[-198.227,84.256],[-197.227,339.161],[198.227,174.49],[198.227,-59.743],[198.227,-338.785]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":32,"s":[{"i":[[0,0],[0.326,-170],[0,0],[0,0],[-1.219,152],[0,0]],"o":[[0,0],[-0.326,170],[0,0],[0,0],[1.219,-152],[0,0]],"v":[[-197.227,-171.62],[-211.196,85.602],[-197.227,339.161],[198.227,174.49],[205.172,-61.929],[198.227,-338.785]],"c":true}]},{"t":34.0000013848484,"s":[{"i":[[0,0],[0.326,-170],[0,0],[0,0],[-1.219,152],[0,0]],"o":[[0,0],[-0.326,170],[0,0],[0,0],[1.219,-152],[0,0]],"v":[[-197.227,-171.62],[-198.227,84.256],[-197.227,339.161],[198.227,174.49],[198.227,-59.743],[198.227,-338.785]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.32941176470588235,0.32941176470588235,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[593.868,512.154],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.5,"y":1},"o":{"x":0.5,"y":0},"t":2,"s":[{"i":[[0,0],[0,0],[0,0],[0.754,213.01],[0,0]],"o":[[0,0],[0,0],[0,0],[-0.754,-213.01],[0,0]],"v":[[198.192,-170.583],[198.192,339.948],[-198.193,168.738],[-196.375,-76.442],[-196.301,-339.948]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.5,"y":0},"t":11,"s":[{"i":[[0,0],[0,0],[0,0],[0.754,213.01],[0,0]],"o":[[0,0],[0,0],[0,0],[-0.754,-213.01],[0,0]],"v":[[198.193,-170.583],[198.193,339.948],[-198.193,168.738],[-220.375,-70.727],[-196.301,-339.948]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":17,"s":[{"i":[[0,0],[0,0],[0,0],[0.754,213.01],[0,0]],"o":[[0,0],[0,0],[0,0],[-0.754,-213.01],[0,0]],"v":[[198.192,-170.583],[198.192,339.948],[-198.193,168.738],[-196.375,-76.442],[-196.301,-339.948]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":30,"s":[{"i":[[0,0],[0,0],[0,0],[0.754,213.01],[0,0]],"o":[[0,0],[0,0],[0,0],[-0.754,-213.01],[0,0]],"v":[[198.192,-170.583],[198.192,339.948],[-198.193,168.738],[-196.375,-76.442],[-196.301,-339.948]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":32,"s":[{"i":[[0,0],[0,0],[0,0],[0.754,213.01],[0,0]],"o":[[0,0],[0,0],[0,0],[-0.754,-213.01],[0,0]],"v":[[198.193,-170.583],[198.193,339.948],[-198.193,168.738],[-208.37,-76.122],[-196.301,-339.948]],"c":true}]},{"t":34.0000013848484,"s":[{"i":[[0,0],[0,0],[0,0],[0.754,213.01],[0,0]],"o":[[0,0],[0,0],[0,0],[-0.754,-213.01],[0,0]],"v":[[198.192,-170.583],[198.192,339.948],[-198.193,168.738],[-196.375,-76.442],[-196.301,-339.948]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9607843137254902,0.19607843137254902,0.19607843137254902,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[198.443,511.187],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":119.000004846969,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"bg","sr":1,"ks":{"o":{"a":0,"k":30,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[599.425,597.205,0],"ix":2},"a":{"a":0,"k":[-0.5,8,0],"ix":1},"s":{"a":0,"k":[115.063,115.063,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[940,940],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.909803921569,0.827450980392,0.909803921569,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.5,8],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":179.000007290819,"st":0,"bm":0}],"markers":[]}

package/dist/runtime/components/Chip.vue

@@ -30,9 +30,9 @@
 
 <script setup>
 const sizes = {
-  sm: "text-xs min-w-8 py-1 px-2",
-  md: "text-xs min-w-12 py-1.5 px-2",
-  lg: "text-sm min-w-14 py-2 px-4"
+  sm: "text-xs min-w-8 py-0.5 px-2",
+  md: "text-xs min-w-12 py-1 px-2.5",
+  lg: "text-sm min-w-14 py-1.5 px-4"
 };
 const variantClasses = {
   default: "",

package/dist/runtime/components/Lottie.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    animationData: object;
+    loop?: boolean;
+    height?: number;
+    width?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+    width: number;
+    loop: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Lottie.vue

@@ -0,0 +1,50 @@
+<template>
+  <ClientOnly>
+    <Vue3Lottie
+      :loop="loop"
+      :height="effectiveHeight"
+      :width="effectiveWidth"
+      :animation-data="animationData"
+    />
+    <template #fallback>
+      <div
+        class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg"
+        :style="{ width: `${effectiveWidth}px`, height: `${effectiveHeight}px` }"
+      >
+        <div class="text-gray-500 dark:text-gray-400">
+          Loading animation...
+        </div>
+      </div>
+    </template>
+  </ClientOnly>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { Vue3Lottie } from "vue3-lottie";
+const props = defineProps({
+  animationData: { type: Object, required: true },
+  loop: { type: Boolean, required: false, default: true },
+  height: { type: Number, required: false, default: 420 },
+  width: { type: Number, required: false, default: 420 }
+});
+const isMobile = ref(false);
+let mq = null;
+function handleChange(e) {
+  isMobile.value = e.matches;
+}
+onMounted(() => {
+  mq = window.matchMedia("(max-width: 767px)");
+  isMobile.value = mq.matches;
+  mq.addEventListener("change", handleChange);
+});
+onUnmounted(() => {
+  if (mq) mq.removeEventListener("change", handleChange);
+});
+const effectiveHeight = computed(
+  () => isMobile.value ? Math.max(props.height - 80, 0) : props.height
+);
+const effectiveWidth = computed(
+  () => isMobile.value ? Math.max(props.width - 80, 0) : props.width
+);
+</script>

package/dist/runtime/components/Lottie.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    animationData: object;
+    loop?: boolean;
+    height?: number;
+    width?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+    width: number;
+    loop: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Table.d.vue.ts

@@ -30,6 +30,12 @@ type __VLS_Props = {
     headerColor?: string;
     bodyColor?: string;
     itemsSize?: keyof typeof sizes;
+    hasShadow?: boolean;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    showEmptyAnimation?: boolean;
+    emptyAnimationData?: object;
+    emptyAnimationSize?: number;
 };
 declare var __VLS_10: `cell-${string}`, __VLS_11: {
     item: {
@@ -37,7 +43,7 @@ declare var __VLS_10: `cell-${string}`, __VLS_11: {
         id: string | number;
     };
     value: unknown;
-}, __VLS_21: {
+}, __VLS_26: {
     item: {
         [key: string]: unknown;
         id: string | number;
@@ -47,7 +53,7 @@ declare var __VLS_10: `cell-${string}`, __VLS_11: {
         id: string;
         width?: string;
     }[];
-}, __VLS_24: `cell-${string}`, __VLS_25: {
+}, __VLS_29: `cell-${string}`, __VLS_30: {
     item: {
         [key: string]: unknown;
         id: string | number;
@@ -57,9 +63,9 @@ declare var __VLS_10: `cell-${string}`, __VLS_11: {
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 } & {
-    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
+    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
 } & {
-    'mobile-card'?: (props: typeof __VLS_21) => any;
+    'mobile-card'?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "row-click": (item: {
@@ -79,6 +85,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         width?: string;
     }[];
     isBordered: boolean;
+    hasShadow: boolean;
     items: Array<{
         id: string | number;
         [key: string]: unknown;
@@ -87,6 +94,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     headerColor: string;
     bodyColor: string;
     itemsSize: keyof typeof sizes;
+    emptyStateTitle: string;
+    emptyStateDescription: string;
+    showEmptyAnimation: boolean;
+    emptyAnimationData: object;
+    emptyAnimationSize: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/Table.vue

@@ -5,7 +5,8 @@
       class="hidden md:block overflow-clip"
       :class="[
   roundedClasses[props.rounded],
-  isBordered ? 'border border-gray-200 dark:border-white/10 ' : ''
+  isBordered ? 'border border-gray-200 dark:border-white/10 ' : '',
+  hasShadow ? 'pu-shadow-ios' : ''
 ]"
     >
       <table class="w-full text-sm text-left rtl:text-right table-fixed">
@@ -34,7 +35,9 @@
               :key="item.id"
               :while-hover="props.isSelectable ? { scale: 1.01 } : {}"
               :transition="{ type: 'spring', stiffness: 400, damping: 30 }"
-              :class="props.isSelectable ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-white/5' : ''"
+              :class="
+  props.isSelectable ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-white/5' : ''
+"
               @click="props.isSelectable && emit('row-click', item)"
             >
               <td
@@ -58,9 +61,25 @@
           <tr v-else>
             <td
               :colspan="columns.length"
-              class="text-lg text-center py-20 text-black/50 dark:text-white/50"
+              class="text-center py-10"
             >
-              No se encontraron resultados
+              <div class="flex flex-col items-center gap-1">
+                <Lottie
+                  v-if="props.showEmptyAnimation"
+                  :animation-data="props.emptyAnimationData ?? defaultEmptyAnimation"
+                  :width="props.emptyAnimationSize"
+                  :height="props.emptyAnimationSize"
+                />
+                <p class="text-lg font-medium text-black/70 dark:text-white/70">
+                  {{ props.emptyStateTitle }}
+                </p>
+                <p
+                  v-if="props.emptyStateDescription"
+                  class="text-sm text-black/50 dark:text-white/50"
+                >
+                  {{ props.emptyStateDescription }}
+                </p>
+              </div>
             </td>
           </tr>
         </tbody>
@@ -75,7 +94,9 @@
         :while-hover="props.isSelectable ? { y: -3 } : {}"
         :transition="{ type: 'spring', stiffness: 400, damping: 25 }"
         class="bg-white dark:bg-[#18181B] border border-gray-200 dark:border-white/10 rounded-lg p-4 shadow-sm"
-        :class="props.isSelectable ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-white/5 hover:shadow-md' : ''"
+        :class="
+  props.isSelectable ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-white/5 hover:shadow-md' : ''
+"
         @click="props.isSelectable && emit('row-click', item)"
       >
         <slot
@@ -112,9 +133,23 @@
       <!-- Mensaje cuando no hay items -->
       <div
         v-if="items.length === 0"
-        class="text-lg text-center py-20 text-black/50 dark:text-white/50"
+        class="text-center py-10 flex flex-col items-center gap-1"
       >
-        No se encontraron resultados
+        <Lottie
+          v-if="props.showEmptyAnimation"
+          :animation-data="props.emptyAnimationData ?? defaultEmptyAnimation"
+          :width="props.emptyAnimationSize"
+          :height="props.emptyAnimationSize"
+        />
+        <p class="text-lg font-medium text-black/70 dark:text-white/70">
+          {{ props.emptyStateTitle }}
+        </p>
+        <p
+          v-if="props.emptyStateDescription"
+          class="text-sm text-black/50 dark:text-white/50"
+        >
+          {{ props.emptyStateDescription }}
+        </p>
       </div>
     </div>
   </div>
@@ -122,6 +157,8 @@
 
 <script setup>
 import { motion } from "motion-v";
+import Lottie from "./Lottie.vue";
+import defaultEmptyAnimation from "../assets/empty-state.json";
 const roundedClasses = {
   "none": "rounded-none",
   "xs": "rounded-xs",
@@ -190,7 +227,17 @@ const props = defineProps({
   isSelectable: { type: Boolean, required: false, default: false },
   headerColor: { type: String, required: false, default: "bg-[#F4F4F5] text-[#71717A] dark:bg-[#27272A] dark:text-[#A1A1AA]" },
   bodyColor: { type: String, required: false, default: "" },
-  itemsSize: { type: null, required: false, default: "md" }
+  itemsSize: { type: null, required: false, default: "md" },
+  hasShadow: { type: Boolean, required: false, default: true },
+  emptyStateTitle: { type: String, required: false, default: "No results found" },
+  emptyStateDescription: { type: String, required: false, default: "Try adjusting your search or filter to find what you're looking for." },
+  showEmptyAnimation: { type: Boolean, required: false, default: true },
+  emptyAnimationData: { type: Object, required: false, default: void 0 },
+  emptyAnimationSize: { type: Number, required: false, default: 220 }
 });
 const emit = defineEmits(["row-click"]);
 </script>
+
+<style scoped>
+.pu-shadow-ios{box-shadow:0 10px 30px rgba(0,0,0,.05)}
+</style>

package/dist/runtime/components/Table.vue.d.ts

@@ -30,6 +30,12 @@ type __VLS_Props = {
     headerColor?: string;
     bodyColor?: string;
     itemsSize?: keyof typeof sizes;
+    hasShadow?: boolean;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    showEmptyAnimation?: boolean;
+    emptyAnimationData?: object;
+    emptyAnimationSize?: number;
 };
 declare var __VLS_10: `cell-${string}`, __VLS_11: {
     item: {
@@ -37,7 +43,7 @@ declare var __VLS_10: `cell-${string}`, __VLS_11: {
         id: string | number;
     };
     value: unknown;
-}, __VLS_21: {
+}, __VLS_26: {
     item: {
         [key: string]: unknown;
         id: string | number;
@@ -47,7 +53,7 @@ declare var __VLS_10: `cell-${string}`, __VLS_11: {
         id: string;
         width?: string;
     }[];
-}, __VLS_24: `cell-${string}`, __VLS_25: {
+}, __VLS_29: `cell-${string}`, __VLS_30: {
     item: {
         [key: string]: unknown;
         id: string | number;
@@ -57,9 +63,9 @@ declare var __VLS_10: `cell-${string}`, __VLS_11: {
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
 } & {
-    [K in NonNullable<typeof __VLS_24>]?: (props: typeof __VLS_25) => any;
+    [K in NonNullable<typeof __VLS_29>]?: (props: typeof __VLS_30) => any;
 } & {
-    'mobile-card'?: (props: typeof __VLS_21) => any;
+    'mobile-card'?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "row-click": (item: {
@@ -79,6 +85,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
         width?: string;
     }[];
     isBordered: boolean;
+    hasShadow: boolean;
     items: Array<{
         id: string | number;
         [key: string]: unknown;
@@ -87,6 +94,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     headerColor: string;
     bodyColor: string;
     itemsSize: keyof typeof sizes;
+    emptyStateTitle: string;
+    emptyStateDescription: string;
+    showEmptyAnimation: boolean;
+    emptyAnimationData: object;
+    emptyAnimationSize: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/types/index.d.ts

@@ -72,3 +72,36 @@ export interface TabsProps {
     disabledTabs?: string[];
     isVertical?: boolean;
 }
+export interface LottieProps {
+    animationData: object;
+    loop?: boolean;
+    height?: number;
+    width?: number;
+}
+export type TableRounded = GlobalRounded;
+export type TableItemsSize = 'sm' | 'md' | 'lg';
+export interface TableColumn {
+    name: string;
+    id: string;
+    width?: string;
+}
+export interface TableItem {
+    id: string | number;
+    [key: string]: unknown;
+}
+export interface TableProps {
+    items?: TableItem[];
+    columns?: TableColumn[];
+    rounded?: TableRounded;
+    isBordered?: boolean;
+    isSelectable?: boolean;
+    headerColor?: string;
+    bodyColor?: string;
+    itemsSize?: TableItemsSize;
+    hasShadow?: boolean;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    showEmptyAnimation?: boolean;
+    emptyAnimationData?: object;
+    emptyAnimationSize?: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smurfox/proxy-ui",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A UI component library built for Nuxt 4",
   "repository": {
     "type": "git",
@@ -56,7 +56,8 @@
     "@nuxt/fonts": "^0.14.0",
     "@nuxt/icon": "^2.2.1",
     "@nuxt/kit": "^4.4.2",
-    "motion-v": "^1.0.0"
+    "motion-v": "^1.0.0",
+    "vue3-lottie": "^3.3.1"
   },
   "peerDependencies": {
     "nuxt": "^4.0.0",