@indielayer/ui 0.0.0-dev-20240125104319 → 0.0.0-dev-20240127005325

package/lib/theme.d.ts

@@ -1,5 +1,5 @@
 import type { ColorLibrary } from './composables/useColors';
-import type { AccordionTheme, AccordionItemTheme, AlertTheme, AvatarTheme, BadgeTheme, BreadcrumbsTheme, ButtonTheme, ButtonGroupTheme, CardTheme, CarouselTheme, CarouselSlideTheme, CheckboxTheme, ContainerTheme, DividerTheme, DrawerTheme, FormTheme, FormGroupTheme, IconTheme, ImageTheme, InputTheme, InputFooterTheme, LabelTheme, LinkTheme, LoaderTheme, MenuTheme, MenuItemTheme, ModalTheme, NotificationsTheme, PaginationTheme, PaginationItemTheme, PopoverTheme, PopoverContainerTheme, ProgressTheme, RadioTheme, ScrollTheme, SelectTheme, SkeletonTheme, SliderTheme, StepperTheme, TabTheme, TabGroupTheme, TableTheme, TableCellTheme, TagTheme, TextareaTheme, ToggleTheme } from './components';
+import type { AccordionTheme, AccordionItemTheme, AlertTheme, AvatarTheme, BadgeTheme, BreadcrumbsTheme, ButtonTheme, ButtonGroupTheme, CardTheme, CarouselTheme, CarouselSlideTheme, CheckboxTheme, ContainerTheme, DividerTheme, DrawerTheme, FormTheme, FormGroupTheme, IconTheme, ImageTheme, InputTheme, InputFooterTheme, LabelTheme, LinkTheme, LoaderTheme, MenuTheme, MenuItemTheme, ModalTheme, NotificationsTheme, PaginationTheme, PaginationItemTheme, PopoverTheme, PopoverContainerTheme, ProgressTheme, RadioTheme, ScrollTheme, SelectTheme, SkeletonTheme, SliderTheme, StepperTheme, TabTheme, TabGroupTheme, TableTheme, TableCellTheme, TableHeadTheme, TableHeaderTheme, TableRowTheme, TagTheme, TextareaTheme, ToggleTheme } from './components';
 export type ComponentThemes = {
     Accordion: AccordionTheme;
     AccordionItem: AccordionItemTheme;
@@ -44,6 +44,9 @@ export type ComponentThemes = {
     TabGroup: TabGroupTheme;
     Table: TableTheme;
     TableCell: TableCellTheme;
+    TableHead: TableHeadTheme;
+    TableHeader: TableHeaderTheme;
+    TableRow: TableRowTheme;
     Tag: TagTheme;
     Textarea: TextareaTheme;
     Toggle: ToggleTheme;

package/lib/themes/base/components.d.ts

@@ -41,6 +41,9 @@ export { default as Tab } from '../../components/tab/theme/Tab.base.theme';
 export { default as TabGroup } from '../../components/tab/theme/TabGroup.base.theme';
 export { default as Table } from '../../components/table/theme/Table.base.theme';
 export { default as TableCell } from '../../components/table/theme/TableCell.base.theme';
+export { default as TableHead } from '../../components/table/theme/TableHead.base.theme';
+export { default as TableHeader } from '../../components/table/theme/TableHeader.base.theme';
+export { default as TableRow } from '../../components/table/theme/TableRow.base.theme';
 export { default as Tag } from '../../components/tag/theme/Tag.base.theme';
 export { default as Textarea } from '../../components/textarea/theme/Textarea.base.theme';
 export { default as Toggle } from '../../components/toggle/theme/Toggle.base.theme';

package/lib/themes/base/components.js

@@ -1,23 +1,23 @@
-import { default as r } from "../../components/accordion/theme/Accordion.base.theme.js";
+import { default as a } from "../../components/accordion/theme/Accordion.base.theme.js";
 import { default as t } from "../../components/accordion/theme/AccordionItem.base.theme.js";
 import { default as l } from "../../components/alert/theme/Alert.base.theme.js";
-import { default as d } from "../../components/avatar/theme/Avatar.base.theme.js";
+import { default as u } from "../../components/avatar/theme/Avatar.base.theme.js";
 import { default as m } from "../../components/badge/theme/Badge.base.theme.js";
 import { default as x } from "../../components/breadcrumbs/theme/Breadcrumbs.base.theme.js";
 import { default as i } from "../../components/button/theme/Button.base.theme.js";
-import { default as g } from "../../components/button/theme/ButtonGroup.base.theme.js";
-import { default as C } from "../../components/card/theme/Card.base.theme.js";
-import { default as T } from "../../components/carousel/theme/Carousel.base.theme.js";
+import { default as c } from "../../components/button/theme/ButtonGroup.base.theme.js";
+import { default as g } from "../../components/card/theme/Card.base.theme.js";
+import { default as I } from "../../components/carousel/theme/Carousel.base.theme.js";
 import { default as P } from "../../components/carousel/theme/CarouselSlide.base.theme.js";
 import { default as A } from "../../components/checkbox/theme/Checkbox.base.theme.js";
 import { default as k } from "../../components/container/theme/Container.base.theme.js";
 import { default as G } from "../../components/divider/theme/Divider.base.theme.js";
 import { default as M } from "../../components/drawer/theme/Drawer.base.theme.js";
-import { default as h } from "../../components/form/theme/Form.base.theme.js";
-import { default as N } from "../../components/formGroup/theme/FormGroup.base.theme.js";
-import { default as j } from "../../components/icon/theme/Icon.base.theme.js";
-import { default as y } from "../../components/image/theme/Image.base.theme.js";
-import { default as E } from "../../components/input/theme/Input.base.theme.js";
+import { default as D } from "../../components/form/theme/Form.base.theme.js";
+import { default as R } from "../../components/formGroup/theme/FormGroup.base.theme.js";
+import { default as N } from "../../components/icon/theme/Icon.base.theme.js";
+import { default as q } from "../../components/image/theme/Image.base.theme.js";
+import { default as z } from "../../components/input/theme/Input.base.theme.js";
 import { default as J } from "../../components/inputFooter/theme/InputFooter.base.theme.js";
 import { default as O } from "../../components/label/theme/Label.base.theme.js";
 import { default as U } from "../../components/link/theme/Link.base.theme.js";
@@ -25,46 +25,49 @@ import { default as W } from "../../components/loader/theme/Loader.base.theme.js
 import { default as Y } from "../../components/menu/theme/Menu.base.theme.js";
 import { default as _ } from "../../components/menu/theme/MenuItem.base.theme.js";
 import { default as ee } from "../../components/modal/theme/Modal.base.theme.js";
-import { default as re } from "../../components/notifications/theme/Notifications.base.theme.js";
+import { default as ae } from "../../components/notifications/theme/Notifications.base.theme.js";
 import { default as te } from "../../components/pagination/theme/Pagination.base.theme.js";
 import { default as le } from "../../components/pagination/theme/PaginationItem.base.theme.js";
-import { default as de } from "../../components/popover/theme/Popover.base.theme.js";
+import { default as ue } from "../../components/popover/theme/Popover.base.theme.js";
 import { default as me } from "../../components/popover/theme/PopoverContainer.base.theme.js";
 import { default as xe } from "../../components/progress/theme/Progress.base.theme.js";
 import { default as ie } from "../../components/radio/theme/Radio.base.theme.js";
-import { default as ge } from "../../components/scroll/theme/Scroll.base.theme.js";
-import { default as Ce } from "../../components/select/theme/Select.base.theme.js";
-import { default as Te } from "../../components/skeleton/theme/Skeleton.base.theme.js";
+import { default as ce } from "../../components/scroll/theme/Scroll.base.theme.js";
+import { default as ge } from "../../components/select/theme/Select.base.theme.js";
+import { default as Ie } from "../../components/skeleton/theme/Skeleton.base.theme.js";
 import { default as Pe } from "../../components/slider/theme/Slider.base.theme.js";
 import { default as Ae } from "../../components/stepper/theme/Stepper.base.theme.js";
 import { default as ke } from "../../components/tab/theme/Tab.base.theme.js";
 import { default as Ge } from "../../components/tab/theme/TabGroup.base.theme.js";
 import { default as Me } from "../../components/table/theme/Table.base.theme.js";
-import { default as he } from "../../components/table/theme/TableCell.base.theme.js";
-import { default as Ne } from "../../components/tag/theme/Tag.base.theme.js";
-import { default as je } from "../../components/textarea/theme/Textarea.base.theme.js";
-import { default as ye } from "../../components/toggle/theme/Toggle.base.theme.js";
+import { default as De } from "../../components/table/theme/TableCell.base.theme.js";
+import { default as Re } from "../../components/table/theme/TableHead.base.theme.js";
+import { default as Ne } from "../../components/table/theme/TableHeader.base.theme.js";
+import { default as qe } from "../../components/table/theme/TableRow.base.theme.js";
+import { default as ze } from "../../components/tag/theme/Tag.base.theme.js";
+import { default as Je } from "../../components/textarea/theme/Textarea.base.theme.js";
+import { default as Oe } from "../../components/toggle/theme/Toggle.base.theme.js";
 export {
-  r as Accordion,
+  a as Accordion,
   t as AccordionItem,
   l as Alert,
-  d as Avatar,
+  u as Avatar,
   m as Badge,
   x as Breadcrumbs,
   i as Button,
-  g as ButtonGroup,
-  C as Card,
-  T as Carousel,
+  c as ButtonGroup,
+  g as Card,
+  I as Carousel,
   P as CarouselSlide,
   A as Checkbox,
   k as Container,
   G as Divider,
   M as Drawer,
-  h as Form,
-  N as FormGroup,
-  j as Icon,
-  y as Image,
-  E as Input,
+  D as Form,
+  R as FormGroup,
+  N as Icon,
+  q as Image,
+  z as Input,
   J as InputFooter,
   O as Label,
   U as Link,
@@ -72,23 +75,26 @@ export {
   Y as Menu,
   _ as MenuItem,
   ee as Modal,
-  re as Notifications,
+  ae as Notifications,
   te as Pagination,
   le as PaginationItem,
-  de as Popover,
+  ue as Popover,
   me as PopoverContainer,
   xe as Progress,
   ie as Radio,
-  ge as Scroll,
-  Ce as Select,
-  Te as Skeleton,
+  ce as Scroll,
+  ge as Select,
+  Ie as Skeleton,
   Pe as Slider,
   Ae as Stepper,
   ke as Tab,
   Ge as TabGroup,
   Me as Table,
-  he as TableCell,
-  Ne as Tag,
-  je as Textarea,
-  ye as Toggle
+  De as TableCell,
+  Re as TableHead,
+  Ne as TableHeader,
+  qe as TableRow,
+  ze as Tag,
+  Je as Textarea,
+  Oe as Toggle
 };

package/lib/themes/carbon/components.d.ts

@@ -41,6 +41,9 @@ export { default as Tab } from '../../components/tab/theme/Tab.carbon.theme';
 export { default as TabGroup } from '../../components/tab/theme/TabGroup.carbon.theme';
 export { default as Table } from '../../components/table/theme/Table.carbon.theme';
 export { default as TableCell } from '../../components/table/theme/TableCell.carbon.theme';
+export { default as TableHead } from '../../components/table/theme/TableHead.carbon.theme';
+export { default as TableHeader } from '../../components/table/theme/TableHeader.carbon.theme';
+export { default as TableRow } from '../../components/table/theme/TableRow.carbon.theme';
 export { default as Tag } from '../../components/tag/theme/Tag.carbon.theme';
 export { default as Textarea } from '../../components/textarea/theme/Textarea.carbon.theme';
 export { default as Toggle } from '../../components/toggle/theme/Toggle.carbon.theme';

package/lib/themes/carbon/components.js

@@ -1,23 +1,23 @@
-import { default as r } from "../../components/accordion/theme/Accordion.carbon.theme.js";
+import { default as a } from "../../components/accordion/theme/Accordion.carbon.theme.js";
 import { default as t } from "../../components/accordion/theme/AccordionItem.carbon.theme.js";
 import { default as l } from "../../components/alert/theme/Alert.carbon.theme.js";
-import { default as d } from "../../components/avatar/theme/Avatar.carbon.theme.js";
+import { default as u } from "../../components/avatar/theme/Avatar.carbon.theme.js";
 import { default as m } from "../../components/badge/theme/Badge.carbon.theme.js";
 import { default as x } from "../../components/breadcrumbs/theme/Breadcrumbs.carbon.theme.js";
 import { default as i } from "../../components/button/theme/Button.carbon.theme.js";
-import { default as g } from "../../components/button/theme/ButtonGroup.carbon.theme.js";
-import { default as C } from "../../components/card/theme/Card.carbon.theme.js";
-import { default as T } from "../../components/carousel/theme/Carousel.carbon.theme.js";
+import { default as c } from "../../components/button/theme/ButtonGroup.carbon.theme.js";
+import { default as g } from "../../components/card/theme/Card.carbon.theme.js";
+import { default as I } from "../../components/carousel/theme/Carousel.carbon.theme.js";
 import { default as P } from "../../components/carousel/theme/CarouselSlide.carbon.theme.js";
 import { default as A } from "../../components/checkbox/theme/Checkbox.carbon.theme.js";
 import { default as k } from "../../components/container/theme/Container.carbon.theme.js";
 import { default as G } from "../../components/divider/theme/Divider.carbon.theme.js";
 import { default as M } from "../../components/drawer/theme/Drawer.carbon.theme.js";
-import { default as h } from "../../components/form/theme/Form.carbon.theme.js";
-import { default as N } from "../../components/formGroup/theme/FormGroup.carbon.theme.js";
-import { default as j } from "../../components/icon/theme/Icon.carbon.theme.js";
-import { default as y } from "../../components/image/theme/Image.carbon.theme.js";
-import { default as E } from "../../components/input/theme/Input.carbon.theme.js";
+import { default as D } from "../../components/form/theme/Form.carbon.theme.js";
+import { default as R } from "../../components/formGroup/theme/FormGroup.carbon.theme.js";
+import { default as N } from "../../components/icon/theme/Icon.carbon.theme.js";
+import { default as q } from "../../components/image/theme/Image.carbon.theme.js";
+import { default as z } from "../../components/input/theme/Input.carbon.theme.js";
 import { default as J } from "../../components/inputFooter/theme/InputFooter.carbon.theme.js";
 import { default as O } from "../../components/label/theme/Label.carbon.theme.js";
 import { default as U } from "../../components/link/theme/Link.carbon.theme.js";
@@ -25,46 +25,49 @@ import { default as W } from "../../components/loader/theme/Loader.carbon.theme.
 import { default as Y } from "../../components/menu/theme/Menu.carbon.theme.js";
 import { default as _ } from "../../components/menu/theme/MenuItem.carbon.theme.js";
 import { default as ee } from "../../components/modal/theme/Modal.carbon.theme.js";
-import { default as re } from "../../components/notifications/theme/Notifications.carbon.theme.js";
+import { default as ae } from "../../components/notifications/theme/Notifications.carbon.theme.js";
 import { default as te } from "../../components/pagination/theme/Pagination.carbon.theme.js";
 import { default as le } from "../../components/pagination/theme/PaginationItem.carbon.theme.js";
-import { default as de } from "../../components/popover/theme/Popover.carbon.theme.js";
+import { default as ue } from "../../components/popover/theme/Popover.carbon.theme.js";
 import { default as me } from "../../components/popover/theme/PopoverContainer.carbon.theme.js";
 import { default as xe } from "../../components/progress/theme/Progress.carbon.theme.js";
 import { default as ie } from "../../components/radio/theme/Radio.carbon.theme.js";
-import { default as ge } from "../../components/scroll/theme/Scroll.carbon.theme.js";
-import { default as Ce } from "../../components/select/theme/Select.carbon.theme.js";
-import { default as Te } from "../../components/skeleton/theme/Skeleton.carbon.theme.js";
+import { default as ce } from "../../components/scroll/theme/Scroll.carbon.theme.js";
+import { default as ge } from "../../components/select/theme/Select.carbon.theme.js";
+import { default as Ie } from "../../components/skeleton/theme/Skeleton.carbon.theme.js";
 import { default as Pe } from "../../components/slider/theme/Slider.carbon.theme.js";
 import { default as Ae } from "../../components/stepper/theme/Stepper.carbon.theme.js";
 import { default as ke } from "../../components/tab/theme/Tab.carbon.theme.js";
 import { default as Ge } from "../../components/tab/theme/TabGroup.carbon.theme.js";
 import { default as Me } from "../../components/table/theme/Table.carbon.theme.js";
-import { default as he } from "../../components/table/theme/TableCell.carbon.theme.js";
-import { default as Ne } from "../../components/tag/theme/Tag.carbon.theme.js";
-import { default as je } from "../../components/textarea/theme/Textarea.carbon.theme.js";
-import { default as ye } from "../../components/toggle/theme/Toggle.carbon.theme.js";
+import { default as De } from "../../components/table/theme/TableCell.carbon.theme.js";
+import { default as Re } from "../../components/table/theme/TableHead.carbon.theme.js";
+import { default as Ne } from "../../components/table/theme/TableHeader.carbon.theme.js";
+import { default as qe } from "../../components/table/theme/TableRow.carbon.theme.js";
+import { default as ze } from "../../components/tag/theme/Tag.carbon.theme.js";
+import { default as Je } from "../../components/textarea/theme/Textarea.carbon.theme.js";
+import { default as Oe } from "../../components/toggle/theme/Toggle.carbon.theme.js";
 export {
-  r as Accordion,
+  a as Accordion,
   t as AccordionItem,
   l as Alert,
-  d as Avatar,
+  u as Avatar,
   m as Badge,
   x as Breadcrumbs,
   i as Button,
-  g as ButtonGroup,
-  C as Card,
-  T as Carousel,
+  c as ButtonGroup,
+  g as Card,
+  I as Carousel,
   P as CarouselSlide,
   A as Checkbox,
   k as Container,
   G as Divider,
   M as Drawer,
-  h as Form,
-  N as FormGroup,
-  j as Icon,
-  y as Image,
-  E as Input,
+  D as Form,
+  R as FormGroup,
+  N as Icon,
+  q as Image,
+  z as Input,
   J as InputFooter,
   O as Label,
   U as Link,
@@ -72,23 +75,26 @@ export {
   Y as Menu,
   _ as MenuItem,
   ee as Modal,
-  re as Notifications,
+  ae as Notifications,
   te as Pagination,
   le as PaginationItem,
-  de as Popover,
+  ue as Popover,
   me as PopoverContainer,
   xe as Progress,
   ie as Radio,
-  ge as Scroll,
-  Ce as Select,
-  Te as Skeleton,
+  ce as Scroll,
+  ge as Select,
+  Ie as Skeleton,
   Pe as Slider,
   Ae as Stepper,
   ke as Tab,
   Ge as TabGroup,
   Me as Table,
-  he as TableCell,
-  Ne as Tag,
-  je as Textarea,
-  ye as Toggle
+  De as TableCell,
+  Re as TableHead,
+  Ne as TableHeader,
+  qe as TableRow,
+  ze as Tag,
+  Je as Textarea,
+  Oe as Toggle
 };

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.0.0-dev-20240125104319";
+declare const _default: "0.0.0-dev-20240127005325";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "0.0.0-dev-20240125104319";
+const e = "0.0.0-dev-20240127005325";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "0.0.0-dev-20240125104319",
+  "version": "0.0.0-dev-20240127005325",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",

package/src/common/icons.ts

@@ -11,7 +11,8 @@ export const dotsIcon = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2
 export const prevIcon = '<path d="M15 19l-7-7 7-7" />'
 export const nextIcon = '<path d="M9 5l7 7-7 7" />'
 export const checkIcon = '<path d="M5 13l4 4L19 7" />'
-export const chevronDownIcon = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />'
+export const selectIcon = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />'
 export const externalIcon = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />'
 export const stepperPristineIcon = '<path d="M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01"/>'
 export const stepperIncompleteIcon = '<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"></path></svg>'
+export const chevronDownIcon = '<path d="M19 9l-7 7-7-7" />'

package/src/components/icon/theme/Icon.carbon.theme.ts

@@ -2,7 +2,15 @@ import type { IconTheme } from '../Icon.vue'
 
 const theme: IconTheme = {
   classes: {
-    wrapper: 'inline shrink-0 h-4 w-4',
+    wrapper: ({ props }) => {
+      const classes = 'inline shrink-0'
+
+      if (props.size === 'xs') return classes + ' h-3 w-3'
+      else if (props.size === 'lg') return classes + ' h-5 w-5'
+      else if (props.size === 'xl') return classes + ' h-8 w-8'
+
+      return classes + ' h-4 w-4'
+    },
   },
 }
 

package/src/components/link/Link.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 const linkProps = {
-  ...useColors.props(),
+  ...useColors.props('primary'),
   tag: {
     type: String,
     default: 'a',

package/src/components/link/theme/Link.carbon.theme.ts

@@ -1,7 +1,28 @@
 import type { LinkTheme } from '../Link.vue'
 
-import BaseTheme from './Link.base.theme'
+const theme: LinkTheme = {
+  classes: {
+    wrapper: 'transition duration-300 ease-in-out cursor-pointer inline-flex text-sm',
+  },
 
-const theme: LinkTheme = BaseTheme
+  styles: ({ colors, props, css }) => {
+    const color = colors.getPalette(props.color || 'gray')
+
+    return css.variables({
+      text: props.color ? color[600] : '',
+      hover: {
+        text: !props.shadow ? color[700] : '',
+      },
+      shadow: color[100],
+      dark: {
+        text: props.color ? color[400] : '',
+        hover: {
+          text: color[300],
+        },
+        shadow: color[900],
+      },
+    })
+  },
+}
 
 export default theme

package/src/components/menu/MenuItem.vue

@@ -128,7 +128,7 @@ const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, {
     ref="elRef"
     v-bind="computedProps.attrs"
     :to="computedProps.to"
-    :href="computedProps.href"
+    :href="computedProps.href || computedProps.to || ''"
     :target="computedProps.target"
     :color="computedProps.color"
     :style="styles"

package/src/components/select/Select.vue

@@ -37,7 +37,7 @@ import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
-import { checkIcon, chevronDownIcon } from '../../common/icons'
+import { checkIcon, selectIcon } from '../../common/icons'
 
 import XLabel from '../label/Label.vue'
 import XTag from '../tag/Tag.vue'
@@ -334,7 +334,8 @@ defineExpose({ focus, blur, reset, validate, setError })
             <x-tag
               v-for="value in selected"
               :key="value"
-              size="sm"
+              size="xs"
+              outlined
               removable
               @remove="(e: Event) => { handleRemove(e, value) }"
             >{{ getLabel(value) }}</x-tag>
@@ -369,7 +370,8 @@ defineExpose({ focus, blur, reset, validate, setError })
               <x-tag
                 v-for="value in selected"
                 :key="value"
-                size="sm"
+                size="xs"
+                outlined
                 removable
                 @remove="(e: Event) => { handleRemove(e, value) }"
               >{{ getLabel(value) }}</x-tag>
@@ -439,7 +441,7 @@ defineExpose({ focus, blur, reset, validate, setError })
         <x-spinner v-if="loading" :size="size" />
         <slot v-else name="icon">
           <x-icon
-            :icon="chevronDownIcon"
+            :icon="selectIcon"
             :class="[classes.icon]"
           />
         </slot>

package/src/components/skeleton/Skeleton.vue

@@ -1,9 +1,22 @@
 <script lang="ts">
+const shapes = ['line', 'circle'] as const
+
+export type SkeletonShape = typeof shapes[number]
+
+const validators = {
+  shape: shapes,
+}
+
 const skeletonProps = {
   tag: {
     type: String,
     default: 'div',
   },
+  shape: {
+    type: String as PropType<SkeletonShape>,
+    default: 'line',
+    validator: (val: SkeletonShape) => validators.shape.includes(val),
+  },
 }
 
 export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>
@@ -11,11 +24,14 @@ export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>
 type InternalClasses = 'wrapper'
 export interface SkeletonTheme extends ThemeComponent<SkeletonProps, InternalClasses> {}
 
-export default { name: 'XSkeleton' }
+export default {
+  name: 'XSkeleton',
+  validators,
+}
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes, PropType } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(skeletonProps)

package/src/components/skeleton/theme/Skeleton.base.theme.ts

@@ -2,7 +2,14 @@ import type { SkeletonTheme } from '../Skeleton.vue'
 
 const theme: SkeletonTheme = {
   classes: {
-    wrapper: 'animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md',
+    wrapper: ({ props }) => {
+      const classes = ['animate-pulse bg-gray-300 dark:bg-gray-600']
+
+      if (props.shape === 'circle') classes.push('w-8 h-8 rounded-full')
+      else classes.push('rounded-md')
+
+      return classes
+    },
   },
 }