@brumaombra/ui-vintage 0.7.8 → 0.7.10

package/src/components/ui/sidebar/SidebarMenuSub.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <ul data-slot="sidebar-menu-sub" data-sidebar="menu-badge" :class="cn(
-    'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-    'group-data-[collapsible=icon]:hidden',
-    props.class,
-  )">
-    <slot />
-  </ul>
-</template>
+    <ul data-slot="sidebar-menu-sub" data-sidebar="menu-badge" :class="cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+    )
+        ">
+        <slot />
+    </ul>
+</template>

package/src/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -1,28 +1,31 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { Primitive } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = withDefaults(defineProps<PrimitiveProps & {
-  size?: "sm" | "md"
-  isActive?: boolean
-  class?: HTMLAttributes["class"]
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+    class?: HTMLAttributes['class'];
 }>(), {
-  as: "a",
-  size: "md",
-})
+    as: 'a',
+    size: 'md'
+});
 </script>
 
 <template>
-  <Primitive data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" :as="as" :as-child="asChild" :data-size="size" :data-active="isActive" :class="cn(
-    'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-h-7 min-w-0 -translate-x-px items-center gap-2 rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
-    'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-    size === 'sm' && 'text-xs',
-    size === 'md' && 'text-sm group-data-[compact=true]/sidebar-wrapper:text-xs',
-    'group-data-[collapsible=icon]:hidden',
-    props.class,
-  )">
-    <slot />
-  </Primitive>
-</template>
+    <Primitive data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" :as="as" :as-child="asChild" :data-size="size" :data-active="isActive" :class="cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex min-h-7 min-w-0 -translate-x-px items-center gap-2 rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:px-1.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' &&
+        'text-sm group-data-[compact=true]/sidebar-wrapper:text-xs',
+        'group-data-[collapsible=icon]:hidden',
+        props.class
+    )
+        ">
+        <slot />
+    </Primitive>
+</template>

package/src/components/ui/sidebar/SidebarMenuSubItem.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
-    <slot />
-  </li>
-</template>
+    <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
+        <slot />
+    </li>
+</template>

package/src/components/ui/sidebar/SidebarProvider.vue

@@ -1,79 +1,89 @@
 <script setup lang="ts">
-import type { HTMLAttributes, Ref } from "vue"
-import { defaultDocument, useEventListener, useMediaQuery, useVModel } from "@vueuse/core"
-import { TooltipProvider } from "reka-ui"
-import { computed, ref } from "vue"
-import { cn } from "../../../lib/utils"
-import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "./utils"
+import type { HTMLAttributes, Ref } from 'vue';
+import { defaultDocument, useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
+import { TooltipProvider } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { cn } from '../../../lib/utils';
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils';
 
+// Props
 const props = withDefaults(defineProps<{
-  defaultOpen?: boolean
-  open?: boolean
-  compact?: boolean
-  class?: HTMLAttributes["class"]
+    defaultOpen?: boolean;
+    open?: boolean;
+    compact?: boolean;
+    class?: HTMLAttributes['class'];
 }>(), {
-  defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
-  open: undefined,
-  compact: false,
-})
+    defaultOpen: !defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`),
+    open: undefined,
+    compact: false
+});
 
+// Emits
 const emits = defineEmits<{
-  "update:open": [open: boolean]
-}>()
+    'update:open': [open: boolean];
+}>();
 
-const isMobile = useMediaQuery("(max-width: 768px)")
-const openMobile = ref(false)
+const isMobile = useMediaQuery('(max-width: 768px)');
+const openMobile = ref(false);
 
-const open = useVModel(props, "open", emits, {
-  defaultValue: props.defaultOpen ?? false,
-  passive: (props.open === undefined) as false,
-}) as Ref<boolean>
+const open = useVModel(props, 'open', emits, {
+    defaultValue: props.defaultOpen ?? false,
+    passive: (props.open === undefined) as false
+}) as Ref<boolean>;
 
 function setOpen(value: boolean) {
-  open.value = value // emits('update:open', value)
+    open.value = value; // emits('update:open', value)
 
-  // This sets the cookie to keep the sidebar state.
-  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 }
 
 function setOpenMobile(value: boolean) {
-  openMobile.value = value
+    openMobile.value = value;
 }
 
 // Helper to toggle the sidebar.
 function toggleSidebar() {
-  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+    return isMobile.value
+        ? setOpenMobile(!openMobile.value)
+        : setOpen(!open.value);
 }
 
-useEventListener("keydown", (event: KeyboardEvent) => {
-  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-    event.preventDefault()
-    toggleSidebar()
-  }
-})
+useEventListener('keydown', (event: KeyboardEvent) => {
+    if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+    ) {
+        event.preventDefault();
+        toggleSidebar();
+    }
+});
 
-// We add a state so that we can do data-state="expanded" or "collapsed".
-// This makes it easier to style the sidebar with Tailwind classes.
-const state = computed(() => open.value ? "expanded" : "collapsed")
+// We add a state so that we can do data-state="expanded" or "collapsed"
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
 
 provideSidebarContext({
-  state,
-  open,
-  setOpen,
-  isMobile,
-  openMobile,
-  setOpenMobile,
-  toggleSidebar,
-})
+    state,
+    open,
+    setOpen,
+    isMobile,
+    openMobile,
+    setOpenMobile,
+    toggleSidebar
+});
 </script>
 
 <template>
-  <TooltipProvider :delay-duration="0">
-    <div data-slot="sidebar-wrapper" :style="{
-      '--sidebar-width': SIDEBAR_WIDTH,
-      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-    }" :data-compact="props.compact ? 'true' : 'false'" :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)" v-bind="$attrs">
-      <slot />
-    </div>
-  </TooltipProvider>
-</template>
+    <TooltipProvider :delay-duration="0">
+        <div data-slot="sidebar-wrapper" :style="{
+            '--sidebar-width': SIDEBAR_WIDTH,
+            '--sidebar-width-icon': SIDEBAR_WIDTH_ICON
+        }" :data-compact="props.compact ? 'true' : 'false'" :class="cn(
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            props.class
+        )
+            " v-bind="$attrs">
+            <slot />
+        </div>
+    </TooltipProvider>
+</template>

package/src/components/ui/sidebar/SidebarRail.vue

@@ -1,25 +1,27 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
-import { useSidebar } from "./utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
+import { useSidebar } from './utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
-  <button data-sidebar="rail" data-slot="sidebar-rail" aria-label="Toggle Sidebar" :tabindex="-1" title="Toggle Sidebar" :class="cn(
-    'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-    'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-    '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-    'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-    '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-    '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-    props.class,
-  )" @click="toggleSidebar">
-    <slot />
-  </button>
-</template>
+    <button data-sidebar="rail" data-slot="sidebar-rail" aria-label="Toggle Sidebar" :tabindex="-1" title="Toggle Sidebar" :class="cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        props.class
+    )
+        " @click="toggleSidebar">
+        <slot />
+    </button>
+</template>

package/src/components/ui/sidebar/SidebarSeparator.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
-import { Separator } from '../separator'
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
+import { Separator } from '../separator';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
-    <slot />
-  </Separator>
-</template>
+    <Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
+        <slot />
+    </Separator>
+</template>

package/src/components/ui/sidebar/SidebarTrigger.vue

@@ -1,21 +1,22 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { PanelLeftIcon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { cn } from "../../../lib/utils"
-import { Button } from '../button'
-import { useSidebar } from "./utils"
+import type { HTMLAttributes } from 'vue';
+import { PanelLeftIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { cn } from '../../../lib/utils';
+import { Button } from '../button';
+import { useSidebar } from './utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 
-const { toggleSidebar } = useSidebar()
+const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
-  <Button data-sidebar="trigger" data-slot="sidebar-trigger" variant="secondary" size="icon" :class="cn(props.class)" @click="toggleSidebar">
-    <HugeiconsIcon :icon="PanelLeftIcon" />
-    <span class="sr-only">Toggle Sidebar</span>
-  </Button>
-</template>
+    <Button data-sidebar="trigger" data-slot="sidebar-trigger" variant="secondary" size="icon" :class="cn(props.class)" @click="toggleSidebar">
+        <HugeiconsIcon :icon="PanelLeftIcon" />
+        <span class="sr-only">Toggle Sidebar</span>
+    </Button>
+</template>

package/src/components/ui/sidebar/index.ts

@@ -1,64 +1,68 @@
-import type { ClassProp } from "class-variance-authority/types"
-import type { HTMLAttributes } from "vue"
-import { cva } from "class-variance-authority"
+import type { ClassProp } from 'class-variance-authority/types';
+import type { HTMLAttributes } from 'vue';
+import { cva } from 'class-variance-authority';
 
-export interface SidebarProps {
-  side?: "left" | "right"
-  variant?: "sidebar" | "floating" | "inset"
-  collapsible?: "offcanvas" | "icon" | "none"
-  compact?: boolean
-  class?: HTMLAttributes["class"]
-}
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SidebarContent } from './SidebarContent.vue';
+export { default as SidebarFooter } from './SidebarFooter.vue';
+export { default as SidebarGroup } from './SidebarGroup.vue';
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
+export { default as SidebarHeader } from './SidebarHeader.vue';
+export { default as SidebarInput } from './SidebarInput.vue';
+export { default as SidebarInset } from './SidebarInset.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
+export { default as SidebarProvider } from './SidebarProvider.vue';
+export { default as SidebarRail } from './SidebarRail.vue';
+export { default as SidebarSeparator } from './SidebarSeparator.vue';
+export { default as SidebarTrigger } from './SidebarTrigger.vue';
 
-export { default as Sidebar } from "./Sidebar.vue"
-export { default as SidebarContent } from "./SidebarContent.vue"
-export { default as SidebarFooter } from "./SidebarFooter.vue"
-export { default as SidebarGroup } from "./SidebarGroup.vue"
-export { default as SidebarGroupAction } from "./SidebarGroupAction.vue"
-export { default as SidebarGroupContent } from "./SidebarGroupContent.vue"
-export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue"
-export { default as SidebarHeader } from "./SidebarHeader.vue"
-export { default as SidebarInput } from "./SidebarInput.vue"
-export { default as SidebarInset } from "./SidebarInset.vue"
-export { default as SidebarMenu } from "./SidebarMenu.vue"
-export { default as SidebarMenuAction } from "./SidebarMenuAction.vue"
-export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue"
-export { default as SidebarMenuButton } from "./SidebarMenuButton.vue"
-export { default as SidebarMenuItem } from "./SidebarMenuItem.vue"
-export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue"
-export { default as SidebarMenuSub } from "./SidebarMenuSub.vue"
-export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue"
-export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue"
-export { default as SidebarProvider } from "./SidebarProvider.vue"
-export { default as SidebarRail } from "./SidebarRail.vue"
-export { default as SidebarSeparator } from "./SidebarSeparator.vue"
-export { default as SidebarTrigger } from "./SidebarTrigger.vue"
+export { useSidebar } from './utils';
 
-export { useSidebar } from "./utils"
+export interface SidebarProps {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+    compact?: boolean;
+    class?: HTMLAttributes['class'];
+}
 
 export type SidebarMenuButtonVariants = {
-  variant?: "default" | "outline" | null | undefined
-  size?: "default" | "sm" | "lg" | null | undefined
-}
+    variant?: 'default' | 'outline' | null | undefined;
+    size?: 'default' | 'sm' | 'lg' | null | undefined;
+};
 
-export const sidebarMenuButtonVariants: (props?: SidebarMenuButtonVariants & ClassProp) => string = cva(
-  "peer/menu-button flex w-full items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,min-height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:p-2.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "min-h-8 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-7 group-data-[compact=true]/sidebar-wrapper:text-xs group-data-[compact=true]/sidebar-wrapper:py-3",
-        sm: "min-h-7 text-xs group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:py-2.5",
-        lg: "min-h-12 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-10 group-data-[collapsible=icon]:p-0!",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-)
+export const sidebarMenuButtonVariants: (
+    props?: SidebarMenuButtonVariants & ClassProp
+) => string = cva(
+    'peer/menu-button flex w-full items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,min-height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-semibold data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! group-data-[compact=true]/sidebar-wrapper:gap-1.5 group-data-[compact=true]/sidebar-wrapper:p-2.5 group-data-[compact=true]/sidebar-wrapper:[&>svg]:size-3.5 [&>svg]:size-4 [&>svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default:
+                    'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                outline:
+                    'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
+            },
+            size: {
+                default:
+                    'min-h-8 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-7 group-data-[compact=true]/sidebar-wrapper:text-xs group-data-[compact=true]/sidebar-wrapper:py-3',
+                sm: 'min-h-7 text-xs group-data-[compact=true]/sidebar-wrapper:min-h-6 group-data-[compact=true]/sidebar-wrapper:py-2.5',
+                lg: 'min-h-12 text-sm group-data-[compact=true]/sidebar-wrapper:min-h-10 group-data-[collapsible=icon]:p-0!'
+            }
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
+        }
+    }
+);

package/src/components/ui/sidebar/utils.ts

@@ -1,19 +1,19 @@
-import type { ComputedRef, Ref } from "vue"
-import { createContext } from "reka-ui"
+import type { ComputedRef, Ref } from 'vue';
+import { createContext } from 'reka-ui';
 
-export const SIDEBAR_COOKIE_NAME = "sidebar_state"
-export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = "16rem"
-export const SIDEBAR_WIDTH_MOBILE = "18rem"
-export const SIDEBAR_WIDTH_ICON = "3rem"
-export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
 
 export const [useSidebar, provideSidebarContext] = createContext<{
-  state: ComputedRef<"expanded" | "collapsed">
-  open: Ref<boolean>
-  setOpen: (value: boolean) => void
-  isMobile: Ref<boolean>
-  openMobile: Ref<boolean>
-  setOpenMobile: (value: boolean) => void
-  toggleSidebar: () => void
-}>("Sidebar")
+    state: ComputedRef<'expanded' | 'collapsed'>;
+    open: Ref<boolean>;
+    setOpen: (value: boolean) => void;
+    isMobile: Ref<boolean>;
+    openMobile: Ref<boolean>;
+    setOpenMobile: (value: boolean) => void;
+    toggleSidebar: () => void;
+}>('Sidebar');

package/src/components/ui/skeleton/Skeleton.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
-interface SkeletonProps {
-  class?: HTMLAttributes["class"]
-}
-
-const props = defineProps<SkeletonProps>()
+// Props
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="skeleton" :class="cn(props.class, 'animate-pulse rounded border border-(--border-light) bg-(--bg-surface-light) transition-colors duration-300 ease-in-out dark:border-(--border-dark) dark:bg-(--bg-surface-dark)',)" />
-</template>
+    <div data-slot="skeleton" :class="cn(
+        props.class,
+        'animate-pulse rounded border border-(--border-light) bg-(--bg-surface-light) transition-colors duration-300 ease-in-out dark:border-(--border-dark) dark:bg-(--bg-surface-dark)'
+    )
+        " />
+</template>

package/src/components/ui/skeleton/index.ts

@@ -1 +1 @@
-export { default as Skeleton } from "./Skeleton.vue"
+export { default as Skeleton } from './Skeleton.vue';

package/src/components/ui/slider/Slider.vue

@@ -1,27 +1,32 @@
 <script setup lang="ts">
-import type { SliderRootEmits, SliderRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { SliderRootEmits, SliderRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<SliderRootEmits>()
+// Props
+const props = defineProps<SliderRootProps & {
+    class?: HTMLAttributes['class'];
+}>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Emits
+const emits = defineEmits<SliderRootEmits>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <SliderRoot v-slot="{ modelValue }" data-slot="slider" :class="cn(
-    'relative flex w-full cursor-pointer touch-none items-center select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-    props.class,
-  )" v-bind="forwarded">
-    <SliderTrack data-slot="slider-track" class="bg-muted relative grow overflow-hidden rounded data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2">
-      <SliderRange data-slot="slider-range" class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
-    </SliderTrack>
+    <SliderRoot v-slot="{ modelValue }" data-slot="slider" :class="cn(
+        'relative flex w-full cursor-pointer touch-none items-center select-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        props.class
+    )
+        " v-bind="forwarded">
+        <SliderTrack data-slot="slider-track" class="bg-muted relative grow overflow-hidden rounded data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2">
+            <SliderRange data-slot="slider-range" class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+        </SliderTrack>
 
-    <SliderThumb v-for="(_, key) in modelValue" :key="key" data-slot="slider-thumb" class="bg-white border-primary ring-ring/50 block size-5 shrink-0 rounded border shadow-sm transition-[color,box-shadow,transform] hover:scale-105 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
-  </SliderRoot>
-</template>
+        <SliderThumb v-for="(_, key) in modelValue" :key="key" data-slot="slider-thumb" class="bg-white border-primary ring-ring/50 block size-5 shrink-0 rounded border shadow-sm transition-[color,box-shadow,transform] hover:scale-105 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
+    </SliderRoot>
+</template>