chore: bump deps & update components

app/assets/css/tailwind.css

@@ -25,6 +25,16 @@
     --ring: 221.2 83.2% 53.3%;
     --radius: 0.5rem;
 
+    --sidebar-background: 210 40% 98%;
+    --sidebar-foreground: 222.2 47.4% 11.2%;
+    --sidebar-primary: 221.2 83.2% 53.3%;
+    --sidebar-primary-foreground: 210 40% 98%;
+    --sidebar-accent: 210 40% 96.1%;
+    --sidebar-accent-foreground: 222.2 47.4% 11.2%;
+    --sidebar-border: 214.3 31.8% 91.4%;
+    --sidebar-ring: 221.2 83.2% 53.3%;
+    --sidebar-input: 212.7 26.8% 83.9%;
+
     /* Twoslash stuff */
     --vp-c-border: theme("colors.foreground / 30%");
     --vp-code-font-size: theme("fontSize.sm");
@@ -53,6 +63,16 @@
     --input: 217.2 32.6% 17.5%;
     --ring: 224.3 76.3% 48%;
 
+    --sidebar-background: 222.2 47.4% 9.2%;
+    --sidebar-foreground: 210 40% 98%;
+    --sidebar-primary: 217.2 91.2% 59.8%;
+    --sidebar-primary-foreground: 210 40% 98%;
+    --sidebar-accent: 217.2 32.6% 17.5%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217.2 32.6% 17.5%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-input: 217.2 32.6% 17.5%;
+
     --vp-c-bg: theme("colors.muted.DEFAULT");
   }
 }
@@ -61,11 +81,12 @@
   * {
     @apply border-border;
   }
+  html {
+    @apply antialiased;
+  }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   }
 }
 

app/components/Ui/Badge.vue

@@ -1,19 +1,22 @@
 <template>
   <component
     :is="elementType"
-    :to="to"
-    :href="href"
-    :disabled="disabled"
-    :class="badgeVariants({ disabled, variant, class: props.class })"
+    :class="badgeVariants({ disabled, size, variant, class: props.class })"
+    v-bind="forwarded"
     @click="onClick"
   >
     <slot />
   </component>
 </template>
 
+<script lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { useForwardProps } from "radix-vue";
+  import type { NuxtLinkProps } from "#app/components";
+</script>
 <script lang="ts" setup>
   const badgeVariants = tv({
-    base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+    base: "inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
     variants: {
       variant: {
         default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
@@ -26,27 +29,44 @@
       disabled: {
         true: "cursor-not-allowed opacity-50",
       },
+      size: {
+        sm: "px-2.5 py-0.5 text-xs font-medium",
+        md: "px-2.5 py-1 text-sm font-semibold",
+        lg: "px-3 py-1.5 text-sm font-semibold",
+      },
     },
     defaultVariants: {
       variant: "default",
+      disabled: false,
+      size: "sm",
     },
   });
 
   type BadgeProps = VariantProps<typeof badgeVariants>;
 
-  const props = defineProps<{
-    class?: any;
-    variant?: BadgeProps["variant"];
-    onClick?: () => void;
-    to?: string;
-    href?: string;
-    disabled?: boolean;
-    tag?: string;
-  }>();
+  const props = defineProps<
+    NuxtLinkProps & {
+      /** Any additional class that should be added to the badge */
+      class?: any;
+      /** The variant of the badge */
+      variant?: BadgeProps["variant"];
+      /** The size of the badge */
+      size?: BadgeProps["size"];
+      /** The action to perform when the badge is clicked */
+      onClick?: () => void;
+      /** Should the badge be disabled or not */
+      disabled?: boolean;
+      /** The element to render the badge as */
+      tag?: string;
+    }
+  >();
+
+  const forwarded = useForwardProps(reactiveOmit(props, "class", "variant", "onClick", "disabled"));
 
   const elementType = computed(() => {
     if (props.tag) return props.tag;
     if (props.href || props.to) return resolveComponent("NuxtLink");
+    if (props.onClick) return "button";
     return props.tag || "div";
   });
 </script>

app/components/Ui/Kbd.vue

@@ -1,5 +1,5 @@
 <template>
-  <Primitive :class="styles({ size, class: props.class })" v-bind="forwarded">
+  <Primitive :class="styles({ size, variant, class: props.class })" v-bind="forwarded">
     <slot />
   </Primitive>
 </template>
@@ -14,6 +14,8 @@
         size?: VariantProps<typeof styles>["size"];
         /** Custom class(es) to add to the parent */
         class?: any;
+        /** The variant of the component */
+        variant?: VariantProps<typeof styles>["variant"];
       }
     >(),
     {
@@ -32,9 +34,14 @@
         sm: "h-6 min-h-[20px] px-1.5 text-[11px]",
         md: "h-7 min-h-[24px] px-2 text-[12px]",
       },
+      variant: {
+        solid: "bg-muted",
+        outline: "bg-transparent",
+      },
     },
     defaultVariants: {
       size: "sm",
+      variant: "solid",
     },
   });
 </script>

app/components/Ui/Label.vue

@@ -2,7 +2,7 @@
   <Label :class="styles({ class: props.class })" v-bind="forwarded">
     <slot />
     <slot name="hint">
-      <span v-if="hint">
+      <span v-if="hint" class="text-muted-foreground">
         {{ hint }}
       </span>
     </slot>

app/components/Ui/Placeholder.vue

@@ -0,0 +1,51 @@
+<template>
+  <Primitive :as :as-child :class="placeHolderStyles().wrapper({ class: props.class })">
+    <svg :class="placeHolderStyles().svg()" fill="none">
+      <defs>
+        <pattern
+          id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+          x="0"
+          y="0"
+          width="10"
+          height="10"
+          patternUnits="userSpaceOnUse"
+        >
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+        </pattern>
+      </defs>
+      <rect
+        stroke="none"
+        fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+        width="100%"
+        height="100%"
+      />
+    </svg>
+
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts">
+  import { Primitive } from "radix-vue";
+  import type { PrimitiveProps } from "radix-vue";
+  import type { HTMLAttributes } from "vue";
+
+  export const placeHolderStyles = tv({
+    slots: {
+      wrapper:
+        "relative flex items-center justify-center overflow-hidden rounded-md border border-dashed px-4 opacity-75",
+      svg: "absolute inset-0 size-full stroke-foreground/10",
+    },
+  });
+</script>
+
+<script lang="ts" setup>
+  const props = defineProps<
+    PrimitiveProps & {
+      /**
+       * Additional classes to add to the parent element.
+       */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+</script>

app/components/Ui/Sidebar/Content.vue

@@ -0,0 +1,20 @@
+<template>
+  <div data-sidebar="content" :class="sideBarContentStyles({ class: props.class })">
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+  import type { HTMLAttributes } from "vue";
+
+  export const sideBarContentStyles = tv({
+    base: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+  });
+</script>
+<script setup lang="ts">
+  const props = defineProps<{
+    /**
+     * Additional classes to apply to the sidebar content.
+     */
+    class?: HTMLAttributes["class"];
+  }>();
+</script>

app/components/Ui/Sidebar/Footer.vue

@@ -0,0 +1,20 @@
+<template>
+  <div data-sidebar="footer" :class="sideBarFooterStyles({ class: props.class })">
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+  import type { HTMLAttributes } from "vue";
+
+  export const sideBarFooterStyles = tv({
+    base: "flex flex-col gap-2 p-2",
+  });
+</script>
+<script setup lang="ts">
+  const props = defineProps<{
+    /**
+     * Additional classes to apply to the parent element.
+     */
+    class?: HTMLAttributes["class"];
+  }>();
+</script>

app/components/Ui/Sidebar/Group.vue

@@ -0,0 +1,20 @@
+<template>
+  <div data-sidebar="group" :class="sideBarGroupStyles({ class: props.class })">
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+  import type { HTMLAttributes } from "vue";
+
+  export const sideBarGroupStyles = tv({
+    base: "relative flex w-full min-w-0 flex-col p-2",
+  });
+</script>
+<script setup lang="ts">
+  const props = defineProps<{
+    /**
+     * Additional classes to apply to the parent element.
+     */
+    class?: HTMLAttributes["class"];
+  }>();
+</script>

app/components/Ui/Sidebar/GroupAction.vue

@@ -0,0 +1,29 @@
+<template>
+  <Primitive
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="sideBarGroupActionStyles({ class: props.class })"
+  >
+    <slot />
+  </Primitive>
+</template>
+<script lang="ts">
+  import { Primitive } from "radix-vue";
+  import type { PrimitiveProps } from "radix-vue";
+  import type { HTMLAttributes } from "vue";
+
+  export const sideBarGroupActionStyles = tv({
+    base: "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 group-data-[collapsible=icon]:hidden after:md:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+  });
+</script>
+<script setup lang="ts">
+  const props = defineProps<
+    PrimitiveProps & {
+      /**
+       * Additional classes to apply to the parent element.
+       */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+</script>

app/components/Ui/Sidebar/GroupContent.vue

@@ -0,0 +1,20 @@
+<template>
+  <div data-sidebar="group-content" :class="sideBarGroupContentStyles({ class: props.class })">
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+  import type { HTMLAttributes } from "vue";
+
+  export const sideBarGroupContentStyles = tv({
+    base: "w-full text-sm",
+  });
+</script>
+<script setup lang="ts">
+  const props = defineProps<{
+    /**
+     * Additional classes to apply to the parent element.
+     */
+    class?: HTMLAttributes["class"];
+  }>();
+</script>

app/components/Ui/Sidebar/GroupLabel.vue

@@ -0,0 +1,33 @@
+<template>
+  <Primitive
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="sideBarGroupLabelStyles({ class: props.class })"
+  >
+    <slot>{{ props.label }}</slot>
+  </Primitive>
+</template>
+<script lang="ts">
+  import { Primitive } from "radix-vue";
+  import type { PrimitiveProps } from "radix-vue";
+  import type { HTMLAttributes } from "vue";
+
+  export const sideBarGroupLabelStyles = tv({
+    base: "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/50 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0",
+  });
+</script>
+<script setup lang="ts">
+  const props = defineProps<
+    PrimitiveProps & {
+      /**
+       * Additional classes to apply to the parent element.
+       */
+      class?: HTMLAttributes["class"];
+      /**
+       * The label for the group.
+       */
+      label?: string;
+    }
+  >();
+</script>

app/components/Ui/Sidebar/Header.vue

@@ -0,0 +1,20 @@
+<template>
+  <div data-sidebar="header" :class="sideBarHeaderStyles({ class: props.class })">
+    <slot />
+  </div>
+</template>
+<script lang="ts">
+  import type { HTMLAttributes } from "vue";
+
+  export const sideBarHeaderStyles = tv({
+    base: "flex flex-col gap-2 p-2",
+  });
+</script>
+<script setup lang="ts">
+  const props = defineProps<{
+    /**
+     * Additional classes to apply to the parent element.
+     */
+    class?: HTMLAttributes["class"];
+  }>();
+</script>