@teamix-evo/ui 0.7.0 → 0.7.2

package/src/components/sheet/index.tsx

@@ -76,7 +76,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        'fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+        'fixed inset-0 z-50 bg-black/10 duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 supports-backdrop-filter:backdrop-blur-xs',
         className,
       )}
       {...props}
@@ -131,26 +131,26 @@ function SheetContent({
         className={cn(
           // 基础布局：fixed 定位 + flex 列容器 + token 化阴影（抽屉与背景的边界由阴影表达，不画 border）
           // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- box-shadow 走 component-level token --drawer-shadow，按 ADR 0026 在源码内显式声明。
-          'fixed z-50 flex flex-col bg-popover text-xs text-popover-foreground shadow-[var(--drawer-shadow,0px_0px_24px_0px_rgba(0,0,0,0.1))] transition ease-in-out outline-none data-[state=open]:animate-in data-[state=open]:duration-300 data-[state=closed]:animate-out data-[state=closed]:duration-200',
+          'fixed z-50 flex flex-col bg-popover text-xs text-popover-foreground shadow-[var(--drawer-shadow,0px_0px_24px_0px_rgba(0,0,0,0.1))] transition ease-in-out outline-none data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:animate-in data-[state=open]:duration-300',
           // 4 向定位（不加 border）
-          'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-full',
-          'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-full',
+          'data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:size-full',
+          'data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:size-full',
           'data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:w-full',
           'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:w-full',
           // 4 向滑入滑出动画
-          'data-[side=right]:data-[state=open]:slide-in-from-right data-[side=right]:data-[state=closed]:slide-out-to-right',
-          'data-[side=left]:data-[state=open]:slide-in-from-left data-[side=left]:data-[state=closed]:slide-out-to-left',
-          'data-[side=top]:data-[state=open]:slide-in-from-top data-[side=top]:data-[state=closed]:slide-out-to-top',
-          'data-[side=bottom]:data-[state=open]:slide-in-from-bottom data-[side=bottom]:data-[state=closed]:slide-out-to-bottom',
+          'data-[side=right]:data-[state=closed]:slide-out-to-right data-[side=right]:data-[state=open]:slide-in-from-right',
+          'data-[side=left]:data-[state=closed]:slide-out-to-left data-[side=left]:data-[state=open]:slide-in-from-left',
+          'data-[side=top]:data-[state=closed]:slide-out-to-top data-[side=top]:data-[state=open]:slide-in-from-top',
+          'data-[side=bottom]:data-[state=closed]:slide-out-to-bottom data-[side=bottom]:data-[state=open]:slide-in-from-bottom',
           // size 档位：left/right 控宽，top/bottom 控高（sm 断点以上生效，移动端默认贴边全屏）
           // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- 像素值对齐 cloud-design Drawer mini/small/medium/large 视觉档位 (400/600/800/1200)；通过 component-level token 表达过于碎片化，按 ADR 0026 在源码内显式声明。
-          'data-[side=left]:data-[size=sm]:sm:max-w-[400px] data-[side=left]:data-[size=md]:sm:max-w-[600px] data-[side=left]:data-[size=lg]:sm:max-w-[800px] data-[side=left]:data-[size=xl]:sm:max-w-[1200px]',
+          'data-[side=left]:data-[size=lg]:sm:max-w-[800px] data-[side=left]:data-[size=md]:sm:max-w-[600px] data-[side=left]:data-[size=sm]:sm:max-w-[400px] data-[side=left]:data-[size=xl]:sm:max-w-[1200px]',
           // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- 同上，对齐 cloud-design Drawer 视觉档位。
-          'data-[side=right]:data-[size=sm]:sm:max-w-[400px] data-[side=right]:data-[size=md]:sm:max-w-[600px] data-[side=right]:data-[size=lg]:sm:max-w-[800px] data-[side=right]:data-[size=xl]:sm:max-w-[1200px]',
+          'data-[side=right]:data-[size=lg]:sm:max-w-[800px] data-[side=right]:data-[size=md]:sm:max-w-[600px] data-[side=right]:data-[size=sm]:sm:max-w-[400px] data-[side=right]:data-[size=xl]:sm:max-w-[1200px]',
           // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- top/bottom 方向 size 控高度，对齐视觉档位。
-          'data-[side=top]:data-[size=sm]:max-h-[280px] data-[side=top]:data-[size=md]:max-h-[400px] data-[side=top]:data-[size=lg]:max-h-[560px] data-[side=top]:data-[size=xl]:max-h-[80vh]',
+          'data-[side=top]:data-[size=lg]:max-h-[560px] data-[side=top]:data-[size=md]:max-h-[400px] data-[side=top]:data-[size=sm]:max-h-[280px] data-[side=top]:data-[size=xl]:max-h-[80vh]',
           // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- 同上。
-          'data-[side=bottom]:data-[size=sm]:max-h-[280px] data-[side=bottom]:data-[size=md]:max-h-[400px] data-[side=bottom]:data-[size=lg]:max-h-[560px] data-[side=bottom]:data-[size=xl]:max-h-[80vh]',
+          'data-[side=bottom]:data-[size=lg]:max-h-[560px] data-[side=bottom]:data-[size=md]:max-h-[400px] data-[side=bottom]:data-[size=sm]:max-h-[280px] data-[side=bottom]:data-[size=xl]:max-h-[80vh]',
           className,
         )}
         {...props}
@@ -182,7 +182,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="sheet-header"
       className={cn(
-        'flex flex-col gap-1.5 border-b border-border pt-3 pr-5 pb-3 pl-5 has-data-[slot=sheet-header-extra]:grid has-data-[slot=sheet-header-extra]:grid-cols-[1fr_auto] has-data-[slot=sheet-header-extra]:items-start has-data-[slot=sheet-header-extra]:gap-x-3 has-data-[slot=sheet-header-extra]:pr-14',
+        'flex flex-col gap-1.5 border-b border-border px-5 py-3 has-data-[slot=sheet-header-extra]:grid has-data-[slot=sheet-header-extra]:grid-cols-[1fr_auto] has-data-[slot=sheet-header-extra]:items-start has-data-[slot=sheet-header-extra]:gap-x-3 has-data-[slot=sheet-header-extra]:pr-14',
         className,
       )}
       {...props}
@@ -245,7 +245,6 @@ function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="sheet-footer"
       className={cn(
-        // eslint-disable-next-line teamix-evo/no-bare-border -- border-footer-separator 是 @theme 声明的语义 token，已加入 lint-core 白名单
         'flex flex-col gap-2 border-t border-footer-separator px-4 py-2.5 sm:flex-row sm:justify-start',
         className,
       )}

package/src/components/sheet/meta.md

@@ -66,6 +66,40 @@
 </div>
 ```
 
+### Placement
+
+自定义弹出方向 — 4 向 side 切换。
+
+```tsx
+<div className="flex flex-col gap-3">
+  <RadioGroup
+    value={side}
+    onValueChange={(v) => setSide(v as typeof side)}
+    className="flex flex-row gap-4"
+  >
+    {(['right', 'bottom', 'left', 'top'] as const).map((p) => (
+      <div key={p} className="flex items-center gap-1.5">
+        <RadioGroupItem value={p} id={`side-${p}`} />
+        <Label htmlFor={`side-${p}`}>{p}</Label>
+      </div>
+    ))}
+  </RadioGroup>
+  <Sheet>
+    <SheetTrigger asChild>
+      <Button>打开 {side} 方向</Button>
+    </SheetTrigger>
+    <SheetContent side={side}>
+      <SheetHeader>
+        <SheetTitle>标题</SheetTitle>
+      </SheetHeader>
+      <SheetBody>
+        Start your business here by searching a popular product
+      </SheetBody>
+    </SheetContent>
+  </Sheet>
+</div>
+```
+
 ### WithExtra
 
 Header 附加内容 — 通过 SheetHeaderExtra 放置帮助链接 / 次要操作。
@@ -199,6 +233,96 @@ Header 附加内容 — 通过 SheetHeaderExtra 放置帮助链接 / 次要操
 </Sheet>
 ```
 
+### Nested
+
+双层抽屉 — 抽屉内打开新的抽屉，对应 cloud-design Drawer 的 double demo。
+
+```tsx
+<>
+  <Button onClick={() => setOuter(true)}>Open drawer</Button>
+  <Sheet open={outer} onOpenChange={setOuter}>
+    <SheetContent size="md">
+      <SheetHeader>
+        <SheetTitle>Multi-level drawer</SheetTitle>
+      </SheetHeader>
+      <SheetBody>
+        <Button onClick={() => setInner(true)}>Two-level drawer</Button>
+        <div className="mt-10 flex flex-col gap-2">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <p key={i}>很长的内容 {i + 1}</p>
+          ))}
+          <p>底部的内容</p>
+        </div>
+      </SheetBody>
+      <SheetFooter className="border-border">
+        <Button onClick={() => setOuter(false)}>Submit</Button>
+        <Button variant="outline" onClick={() => setOuter(false)}>
+          Cancel
+        </Button>
+      </SheetFooter>
+      <Sheet open={inner} onOpenChange={setInner}>
+        <SheetContent size="sm">
+          <SheetHeader>
+            <SheetTitle>Two-level Drawer</SheetTitle>
+          </SheetHeader>
+          <SheetBody>This is two-level drawer</SheetBody>
+        </SheetContent>
+      </Sheet>
+    </SheetContent>
+  </Sheet>
+</>
+```
+
+### Controlled
+
+受控异步关闭 — onOpenChange 在 loading 期间拦截关闭，按钮 loading 期间禁止外部交互。
+
+```tsx
+const [open, setOpen] = React.useState(false);
+const [loading, setLoading] = React.useState(false);
+const onConfirm = async () => {
+  setLoading(true);
+  await new Promise((r) => setTimeout(r, 1500));
+  setLoading(false);
+  setOpen(false);
+};
+return (
+  <Sheet
+    open={open}
+    onOpenChange={(next) => {
+      if (loading) return;
+      setOpen(next);
+    }}
+  >
+    <SheetTrigger asChild>
+      <Button>打开</Button>
+    </SheetTrigger>
+    <SheetContent
+      size="sm"
+      onPointerDownOutside={(e) => loading && e.preventDefault()}
+      onEscapeKeyDown={(e) => loading && e.preventDefault()}
+    >
+      <SheetHeader>
+        <SheetTitle>确认提交？</SheetTitle>
+      </SheetHeader>
+      <SheetBody>
+        <p>提交期间无法点击遮罩或按 ESC 关闭。</p>
+      </SheetBody>
+      <SheetFooter>
+        <Button loading={loading} onClick={onConfirm}>
+          确认
+        </Button>
+        <SheetClose asChild>
+          <Button variant="outline" disabled={loading}>
+            取消
+          </Button>
+        </SheetClose>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+);
+```
+
 ### NoCloseButton
 
 隐藏关闭按钮 — 强制通过底部操作关闭，常用于流程类强引导。

package/src/components/sheet/stories.tsx

@@ -107,41 +107,38 @@ export const Sizes: Story = {
 export const Placement: Story = {
   name: '弹出方向 side',
   render: () => {
-    function Demo() {
-      const [side, setSide] = React.useState<
-        'top' | 'right' | 'bottom' | 'left'
-      >('right');
-      return (
-        <div className="flex flex-col gap-3">
-          <RadioGroup
-            value={side}
-            onValueChange={(v) => setSide(v as typeof side)}
-            className="flex flex-row gap-4"
-          >
-            {(['right', 'bottom', 'left', 'top'] as const).map((p) => (
-              <div key={p} className="flex items-center gap-1.5">
-                <RadioGroupItem value={p} id={`side-${p}`} />
-                <Label htmlFor={`side-${p}`}>{p}</Label>
-              </div>
-            ))}
-          </RadioGroup>
-          <Sheet>
-            <SheetTrigger asChild>
-              <Button>打开 {side} 方向</Button>
-            </SheetTrigger>
-            <SheetContent side={side}>
-              <SheetHeader>
-                <SheetTitle>标题</SheetTitle>
-              </SheetHeader>
-              <SheetBody>
-                Start your business here by searching a popular product
-              </SheetBody>
-            </SheetContent>
-          </Sheet>
-        </div>
-      );
-    }
-    return <Demo />;
+    const [side, setSide] = React.useState<
+      'top' | 'right' | 'bottom' | 'left'
+    >('right');
+    return (
+      <div className="flex flex-col gap-3">
+        <RadioGroup
+          value={side}
+          onValueChange={(v) => setSide(v as typeof side)}
+          className="flex flex-row gap-4"
+        >
+          {(['right', 'bottom', 'left', 'top'] as const).map((p) => (
+            <div key={p} className="flex items-center gap-1.5">
+              <RadioGroupItem value={p} id={`side-${p}`} />
+              <Label htmlFor={`side-${p}`}>{p}</Label>
+            </div>
+          ))}
+        </RadioGroup>
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button>打开 {side} 方向</Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>标题</SheetTitle>
+            </SheetHeader>
+            <SheetBody>
+              Start your business here by searching a popular product
+            </SheetBody>
+          </SheetContent>
+        </Sheet>
+      </div>
+    );
   },
 };
 
@@ -282,46 +279,43 @@ export const LargeContent: Story = {
 export const Nested: Story = {
   name: '双层抽屉',
   render: () => {
-    function Demo() {
-      const [outer, setOuter] = React.useState(false);
-      const [inner, setInner] = React.useState(false);
-      return (
-        <>
-          <Button onClick={() => setOuter(true)}>Open drawer</Button>
-          <Sheet open={outer} onOpenChange={setOuter}>
-            <SheetContent size="md">
-              <SheetHeader>
-                <SheetTitle>Multi-level drawer</SheetTitle>
-              </SheetHeader>
-              <SheetBody>
-                <Button onClick={() => setInner(true)}>Two-level drawer</Button>
-                <div className="mt-10 flex flex-col gap-2">
-                  {Array.from({ length: 20 }).map((_, i) => (
-                    <p key={i}>很长的内容 {i + 1}</p>
-                  ))}
-                  <p>底部的内容</p>
-                </div>
-              </SheetBody>
-              <SheetFooter className="border-border">
-                <Button onClick={() => setOuter(false)}>Submit</Button>
-                <Button variant="outline" onClick={() => setOuter(false)}>
-                  Cancel
-                </Button>
-              </SheetFooter>
-              <Sheet open={inner} onOpenChange={setInner}>
-                <SheetContent size="sm">
-                  <SheetHeader>
-                    <SheetTitle>Two-level Drawer</SheetTitle>
-                  </SheetHeader>
-                  <SheetBody>This is two-level drawer</SheetBody>
-                </SheetContent>
-              </Sheet>
-            </SheetContent>
-          </Sheet>
-        </>
-      );
-    }
-    return <Demo />;
+    const [outer, setOuter] = React.useState(false);
+    const [inner, setInner] = React.useState(false);
+    return (
+      <>
+        <Button onClick={() => setOuter(true)}>Open drawer</Button>
+        <Sheet open={outer} onOpenChange={setOuter}>
+          <SheetContent size="md">
+            <SheetHeader>
+              <SheetTitle>Multi-level drawer</SheetTitle>
+            </SheetHeader>
+            <SheetBody>
+              <Button onClick={() => setInner(true)}>Two-level drawer</Button>
+              <div className="mt-10 flex flex-col gap-2">
+                {Array.from({ length: 20 }).map((_, i) => (
+                  <p key={i}>很长的内容 {i + 1}</p>
+                ))}
+                <p>底部的内容</p>
+              </div>
+            </SheetBody>
+            <SheetFooter className="border-border">
+              <Button onClick={() => setOuter(false)}>Submit</Button>
+              <Button variant="outline" onClick={() => setOuter(false)}>
+                Cancel
+              </Button>
+            </SheetFooter>
+            <Sheet open={inner} onOpenChange={setInner}>
+              <SheetContent size="sm">
+                <SheetHeader>
+                  <SheetTitle>Two-level Drawer</SheetTitle>
+                </SheetHeader>
+                <SheetBody>This is two-level drawer</SheetBody>
+              </SheetContent>
+            </Sheet>
+          </SheetContent>
+        </Sheet>
+      </>
+    );
   },
 };
 
@@ -329,52 +323,49 @@ export const Nested: Story = {
 export const Controlled: Story = {
   name: '受控异步',
   render: () => {
-    function Demo() {
-      const [open, setOpen] = React.useState(false);
-      const [loading, setLoading] = React.useState(false);
-      const onConfirm = async () => {
-        setLoading(true);
-        await new Promise((r) => setTimeout(r, 1500));
-        setLoading(false);
-        setOpen(false);
-      };
-      return (
-        <Sheet
-          open={open}
-          onOpenChange={(next) => {
-            if (loading) return;
-            setOpen(next);
-          }}
+    const [open, setOpen] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    const onConfirm = async () => {
+      setLoading(true);
+      await new Promise((r) => setTimeout(r, 1500));
+      setLoading(false);
+      setOpen(false);
+    };
+    return (
+      <Sheet
+        open={open}
+        onOpenChange={(next) => {
+          if (loading) return;
+          setOpen(next);
+        }}
+      >
+        <SheetTrigger asChild>
+          <Button>打开</Button>
+        </SheetTrigger>
+        <SheetContent
+          size="sm"
+          onPointerDownOutside={(e) => loading && e.preventDefault()}
+          onEscapeKeyDown={(e) => loading && e.preventDefault()}
         >
-          <SheetTrigger asChild>
-            <Button>打开</Button>
-          </SheetTrigger>
-          <SheetContent
-            size="sm"
-            onPointerDownOutside={(e) => loading && e.preventDefault()}
-            onEscapeKeyDown={(e) => loading && e.preventDefault()}
-          >
-            <SheetHeader>
-              <SheetTitle>确认提交？</SheetTitle>
-            </SheetHeader>
-            <SheetBody>
-              <p>提交期间无法点击遮罩或按 ESC 关闭。</p>
-            </SheetBody>
-            <SheetFooter>
-              <Button loading={loading} onClick={onConfirm}>
-                确认
+          <SheetHeader>
+            <SheetTitle>确认提交？</SheetTitle>
+          </SheetHeader>
+          <SheetBody>
+            <p>提交期间无法点击遮罩或按 ESC 关闭。</p>
+          </SheetBody>
+          <SheetFooter>
+            <Button loading={loading} onClick={onConfirm}>
+              确认
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline" disabled={loading}>
+                取消
               </Button>
-              <SheetClose asChild>
-                <Button variant="outline" disabled={loading}>
-                  取消
-                </Button>
-              </SheetClose>
-            </SheetFooter>
-          </SheetContent>
-        </Sheet>
-      );
-    }
-    return <Demo />;
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    );
   },
 };
 

package/src/components/sidebar/index.tsx

@@ -211,7 +211,7 @@ function Sidebar({
             <SheetTitle>Sidebar</SheetTitle>
             <SheetDescription>Displays the mobile sidebar.</SheetDescription>
           </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
+          <div className="flex size-full flex-col">{children}</div>
         </SheetContent>
       </Sheet>
     );
@@ -246,7 +246,7 @@ function Sidebar({
           // Adjust the padding for floating and inset variants.
           variant === 'floating' || variant === 'inset'
             ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l border-sidebar-border',
+            : 'border-sidebar-border group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
           className,
         )}
         {...props}
@@ -479,7 +479,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button group/menu-button flex w-full cursor-pointer items-center gap-2 overflow-hidden rounded-md p-2 text-left text-xs ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! 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:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50 data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
+  'peer/menu-button group/menu-button flex w-full cursor-pointer items-center gap-2 overflow-hidden rounded-md p-2 text-left text-xs ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! 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:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
   {
     variants: {
       variant: {
@@ -585,7 +585,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1',
         className,
       )}
       {...props}
@@ -637,7 +637,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        'ml-4 flex min-w-0 flex-col gap-1 pl-4 py-0.5 group-data-[collapsible=icon]:hidden',
+        'ml-4 flex min-w-0 flex-col gap-1 py-0.5 pl-4 group-data-[collapsible=icon]:hidden',
         className,
       )}
       {...props}