update components and bump version number

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@curiousleaf/design",
   "description": "A React component design system for CuriousLeaf",
-  "version": "0.13.20",
+  "version": "0.13.21",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -24,7 +24,7 @@
     "format": "bun biome format --write ."
   },
   "dependencies": {
-    "@curiousleaf/utils": "link:@curiousleaf/utils",
+    "@curiousleaf/utils": "^1.0.19",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",

src/layout/Sidebar/Sidebar.tsx

@@ -15,20 +15,14 @@ import {
   sidebarVariants,
 } from "./Sidebar.variants"
 
-export type SidebarElement = HTMLDivElement
+export type SidebarElement = HTMLElement
 
 export type SidebarProps = HTMLAttributes<SidebarElement> & VariantProps<typeof sidebarVariants>
 
 export const SidebarBase = forwardRef<SidebarElement, SidebarProps>((props, ref) => {
   const { className, size, sticky, ...rest } = props
 
-  return (
-    <div
-      ref={ref}
-      className={cx(sidebarVariants({ size, sticky, className }))}
-      {...rest}
-    />
-  )
+  return <aside ref={ref} className={cx(sidebarVariants({ size, sticky, className }))} {...rest} />
 })
 
 export const SidebarContent = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>((props, ref) => {

src/layout/Wrapper/Wrapper.tsx

@@ -5,31 +5,22 @@ import type { HTMLAttributes } from "react"
 
 import { type VariantProps, cx } from "../../shared"
 
-import {
-  wrapperContentVariants,
-  wrapperVariants,
-} from "./Wrapper.variants"
+import { wrapperContentVariants, wrapperVariants } from "./Wrapper.variants"
 
-export type WrapperElement = HTMLElement
+export type WrapperElement = HTMLDivElement
 
 export type WrapperProps = HTMLAttributes<WrapperElement> & VariantProps<typeof wrapperVariants>
 
 export const WrapperBase = forwardRef<WrapperElement, WrapperProps>((props, ref) => {
   const { className, ...rest } = props
 
-  return (
-    <main
-      ref={ref}
-      className={cx(wrapperVariants({ className }))}
-      {...rest}
-    />
-  )
+  return <div ref={ref} className={cx(wrapperVariants({ className }))} {...rest} />
 })
 
 export const WrapperContent = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>((props, ref) => {
   const { className, ...rest } = props
 
-  return <nav ref={ref} className={cx(wrapperContentVariants({ className }))} {...rest} />
+  return <main ref={ref} className={cx(wrapperContentVariants({ className }))} {...rest} />
 })
 
 export const Wrapper = Object.assign(WrapperBase, {

src/layout/Wrapper/Wrapper.variants.ts

@@ -1,9 +1,9 @@
 import { cva } from "../../shared"
 
 export const wrapperVariants = cva({
-  base: "@container/wrapper flex min-h-screen flex-col bg-[#f7f7f7] lg:flex-row",
+  base: "@container/wrapper flex h-dvh flex-col bg-[#f7f7f7] lg:flex-row",
 })
 
 export const wrapperContentVariants = cva({
-  base: "w-full m-2 bg-white border rounded-2xl",
+  base: "w-full mt-2 py-8 bg-white border-l border-t rounded-tl-2xl overflow-y-auto",
 })

src/ui/Button/Button.variants.ts

@@ -1,4 +1,4 @@
-import { cva, focusClasses } from "../../shared"
+import { cva, focusClasses } from "../../shared";
 
 export const buttonVariants = cva({
   base: [
@@ -35,7 +35,7 @@ export const buttonVariants = cva({
       true: "",
     },
     isPending: {
-      true: "[&>*:not(.animate-spin)]:text-transparent",
+      true: "[&>*:not(.animate-spin)]:text-transparent select-none",
     },
   },
 
@@ -81,8 +81,8 @@ export const buttonVariants = cva({
     variant: "solid",
     size: "lg",
   },
-})
+});
 
 export const buttonAffixVariants = cva({
   base: "shrink-0 first:-ml-[0.21425em] last:-mr-[0.21425em] only:m-0",
-})
+});

src/ui/MenuItem/MenuItem.variants.ts

@@ -2,7 +2,7 @@ import { cva } from "../../shared"
 
 export const menuItemVariants = cva({
   base: [
-    "group/menu-item relative flex items-center gap-2.5 min-w-0 rounded-md font-medium text-start",
+    "group/menu-item relative flex items-center gap-2.5 min-w-0 rounded-md font-[450] text-start",
 
     // Interactive
     "hover:bg-black/[0.03] group-data-[state=open]:hover:bg-transparent group-data-[state=open]:focus:bg-black/[0.04] group-data-[state=open]:outline-none",

tailwind.config.ts

@@ -1,6 +1,6 @@
-import type { Config } from "tailwindcss"
-import colors from "tailwindcss/colors"
-import plugin from "tailwindcss/plugin"
+import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
+import plugin from "tailwindcss/plugin";
 
 const colorTheme = {
   blue: {
@@ -59,7 +59,7 @@ const colorTheme = {
     dark: "#1F87AD",
     darker: "#164564",
   },
-} as const
+} as const;
 
 export default {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
@@ -100,12 +100,6 @@ export default {
     },
 
     extend: {
-      borderColor: {
-        // DEFAULT: colors.gray[200],
-      },
-      fontFamily: {
-        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
-      },
       lineHeight: {
         icon: "1.4285em",
       },
@@ -162,15 +156,15 @@ export default {
     plugin(({ addUtilities, matchUtilities, addBase, theme }) => {
       matchUtilities(
         {
-          "grid-auto-fill": value => ({
+          "grid-auto-fill": (value) => ({
             gridTemplateColumns: `repeat(auto-fill, minmax(${value}, 1fr))`,
           }),
-          "grid-auto-fit": value => ({
+          "grid-auto-fit": (value) => ({
             gridTemplateColumns: `repeat(auto-fit, minmax(${value}, 1fr))`,
           }),
         },
         { values: theme("gridColumns") },
-      )
+      );
       addUtilities({
         ".scrollbar-none": {
           "-ms-overflow-style": "none",
@@ -180,13 +174,13 @@ export default {
             display: "none",
           },
         },
-      })
+      });
       addBase({
         ".rounded-smooth": {
           clipPath:
             "polygon(100% 50%, 100% 56.6%, 100% 59.3%, 100% 61.4%, 99.9% 63.2%, 99.9% 64.8%, 99.9% 66.2%, 99.8% 67.5%, 99.8% 68.7%, 99.7% 69.8%, 99.6% 70.8%, 99.5% 71.8%, 99.5% 72.8%, 99.4% 73.7%, 99.3% 74.6%, 99.1% 75.4%, 99% 76.3%, 98.9% 77%, 98.8% 77.8%, 98.6% 78.5%, 98.5% 79.2%, 98.3% 79.9%, 98.1% 80.6%, 98% 81.3%, 97.8% 81.9%, 97.6% 82.5%, 97.4% 83.1%, 97.2% 83.7%, 97% 84.3%, 96.8% 84.8%, 96.5% 85.4%, 96.3% 85.9%, 96% 86.4%, 95.8% 86.9%, 95.5% 87.4%, 95.3% 87.9%, 95% 88.3%, 94.7% 88.8%, 94.4% 89.2%, 94.1% 89.7%, 93.8% 90.1%, 93.4% 90.5%, 93.1% 90.9%, 92.8% 91.3%, 92.4% 91.7%, 92% 92%, 91.7% 92.4%, 91.3% 92.8%, 90.9% 93.1%, 90.5% 93.4%, 90.1% 93.8%, 89.7% 94.1%, 89.2% 94.4%, 88.8% 94.7%, 88.3% 95%, 87.9% 95.3%, 87.4% 95.5%, 86.9% 95.8%, 86.4% 96%, 85.9% 96.3%, 85.4% 96.5%, 84.8% 96.8%, 84.3% 97%, 83.7% 97.2%, 83.1% 97.4%, 82.5% 97.6%, 81.9% 97.8%, 81.3% 98%, 80.6% 98.1%, 79.9% 98.3%, 79.2% 98.5%, 78.5% 98.6%, 77.8% 98.8%, 77% 98.9%, 76.3% 99%, 75.4% 99.1%, 74.6% 99.3%, 73.7% 99.4%, 72.8% 99.5%, 71.8% 99.5%, 70.8% 99.6%, 69.8% 99.7%, 68.7% 99.8%, 67.5% 99.8%, 66.2% 99.9%, 64.8% 99.9%, 63.2% 99.9%, 61.4% 100%, 59.3% 100%, 56.6% 100%, 50% 100%, 43.4% 100%, 40.7% 100%, 38.6% 100%, 36.8% 99.9%, 35.2% 99.9%, 33.8% 99.9%, 32.5% 99.8%, 31.3% 99.8%, 30.2% 99.7%, 29.2% 99.6%, 28.2% 99.5%, 27.2% 99.5%, 26.3% 99.4%, 25.4% 99.3%, 24.6% 99.1%, 23.7% 99%, 23% 98.9%, 22.2% 98.8%, 21.5% 98.6%, 20.8% 98.5%, 20.1% 98.3%, 19.4% 98.1%, 18.7% 98%, 18.1% 97.8%, 17.5% 97.6%, 16.9% 97.4%, 16.3% 97.2%, 15.7% 97%, 15.2% 96.8%, 14.6% 96.5%, 14.1% 96.3%, 13.6% 96%, 13.1% 95.8%, 12.6% 95.5%, 12.1% 95.3%, 11.7% 95%, 11.2% 94.7%, 10.8% 94.4%, 10.3% 94.1%, 9.9% 93.8%, 9.5% 93.4%, 9.1% 93.1%, 8.7% 92.8%, 8.3% 92.4%, 8% 92%, 7.6% 91.7%, 7.2% 91.3%, 6.9% 90.9%, 6.6% 90.5%, 6.2% 90.1%, 5.9% 89.7%, 5.6% 89.2%, 5.3% 88.8%, 5% 88.3%, 4.7% 87.9%, 4.5% 87.4%, 4.2% 86.9%, 4% 86.4%, 3.7% 85.9%, 3.5% 85.4%, 3.2% 84.8%, 3% 84.3%, 2.8% 83.7%, 2.6% 83.1%, 2.4% 82.5%, 2.2% 81.9%, 2% 81.3%, 1.9% 80.6%, 1.7% 79.9%, 1.5% 79.2%, 1.4% 78.5%, 1.2% 77.8%, 1.1% 77%, 1% 76.3%, 0.9% 75.4%, 0.7% 74.6%, 0.6% 73.7%, 0.5% 72.8%, 0.5% 71.8%, 0.4% 70.8%, 0.3% 69.8%, 0.2% 68.7%, 0.2% 67.5%, 0.1% 66.2%, 0.1% 64.8%, 0.1% 63.2%, 0% 61.4%, 0% 59.3%, 0% 56.6%, 0% 50%, 0% 43.4%, 0% 40.7%, 0% 38.6%, 0.1% 36.8%, 0.1% 35.2%, 0.1% 33.8%, 0.2% 32.5%, 0.2% 31.3%, 0.3% 30.2%, 0.4% 29.2%, 0.5% 28.2%, 0.5% 27.2%, 0.6% 26.3%, 0.7% 25.4%, 0.9% 24.6%, 1% 23.7%, 1.1% 23%, 1.2% 22.2%, 1.4% 21.5%, 1.5% 20.8%, 1.7% 20.1%, 1.9% 19.4%, 2% 18.7%, 2.2% 18.1%, 2.4% 17.5%, 2.6% 16.9%, 2.8% 16.3%, 3% 15.7%, 3.2% 15.2%, 3.5% 14.6%, 3.7% 14.1%, 4% 13.6%, 4.2% 13.1%, 4.5% 12.6%, 4.7% 12.1%, 5% 11.7%, 5.3% 11.2%, 5.6% 10.8%, 5.9% 10.3%, 6.2% 9.9%, 6.6% 9.5%, 6.9% 9.1%, 7.2% 8.7%, 7.6% 8.3%, 8% 8%, 8.3% 7.6%, 8.7% 7.2%, 9.1% 6.9%, 9.5% 6.6%, 9.9% 6.2%, 10.3% 5.9%, 10.8% 5.6%, 11.2% 5.3%, 11.7% 5%, 12.1% 4.7%, 12.6% 4.5%, 13.1% 4.2%, 13.6% 4%, 14.1% 3.7%, 14.6% 3.5%, 15.2% 3.2%, 15.7% 3%, 16.3% 2.8%, 16.9% 2.6%, 17.5% 2.4%, 18.1% 2.2%, 18.7% 2%, 19.4% 1.9%, 20.1% 1.7%, 20.8% 1.5%, 21.5% 1.4%, 22.2% 1.2%, 23% 1.1%, 23.7% 1%, 24.6% 0.9%, 25.4% 0.7%, 26.3% 0.6%, 27.2% 0.5%, 28.2% 0.5%, 29.2% 0.4%, 30.2% 0.3%, 31.3% 0.2%, 32.5% 0.2%, 33.8% 0.1%, 35.2% 0.1%, 36.8% 0.1%, 38.6% 0%, 40.7% 0%, 43.4% 0%, 50% 0%, 56.6% 0%, 59.3% 0%, 61.4% 0%, 63.2% 0.1%, 64.8% 0.1%, 66.2% 0.1%, 67.5% 0.2%, 68.7% 0.2%, 69.8% 0.3%, 70.8% 0.4%, 71.8% 0.5%, 72.8% 0.5%, 73.7% 0.6%, 74.6% 0.7%, 75.4% 0.9%, 76.3% 1%, 77% 1.1%, 77.8% 1.2%, 78.5% 1.4%, 79.2% 1.5%, 79.9% 1.7%, 80.6% 1.9%, 81.3% 2%, 81.9% 2.2%, 82.5% 2.4%, 83.1% 2.6%, 83.7% 2.8%, 84.3% 3%, 84.8% 3.2%, 85.4% 3.5%, 85.9% 3.7%, 86.4% 4%, 86.9% 4.2%, 87.4% 4.5%, 87.9% 4.7%, 88.3% 5%, 88.8% 5.3%, 89.2% 5.6%, 89.7% 5.9%, 90.1% 6.2%, 90.5% 6.6%, 90.9% 6.9%, 91.3% 7.2%, 91.7% 7.6%, 92% 8%, 92.4% 8.3%, 92.8% 8.7%, 93.1% 9.1%, 93.4% 9.5%, 93.8% 9.9%, 94.1% 10.3%, 94.4% 10.8%, 94.7% 11.2%, 95% 11.7%, 95.3% 12.1%, 95.5% 12.6%, 95.8% 13.1%, 96% 13.6%, 96.3% 14.1%, 96.5% 14.6%, 96.8% 15.2%, 97% 15.7%, 97.2% 16.3%, 97.4% 16.9%, 97.6% 17.5%, 97.8% 18.1%, 98% 18.7%, 98.1% 19.4%, 98.3% 20.1%, 98.5% 20.8%, 98.6% 21.5%, 98.8% 22.2%, 98.9% 23%, 99% 23.7%, 99.1% 24.6%, 99.3% 25.4%, 99.4% 26.3%, 99.5% 27.2%, 99.5% 28.2%, 99.6% 29.2%, 99.7% 30.2%, 99.8% 31.3%, 99.8% 32.5%, 99.9% 33.8%, 99.9% 35.2%, 99.9% 36.8%, 100% 38.6%, 100% 40.7%, 100% 43.4%)",
         },
-      })
+      });
     }),
   ],
-} satisfies Config
+} satisfies Config;