@manafishrov/ui 1.0.5 → 1.2.0

package/src/components/TagsInput.tsx

@@ -1,7 +1,7 @@
 import { TagsInput as TagsInputPrimitive } from '@ark-ui/solid/tags-input';
 import { type Component, splitProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineCloseIcon from '~icons/ic/outline-close';
+import CloseIcon from '~icons/material-symbols/close';
 
 export const TagsInput = TagsInputPrimitive.Root;
 export const TagsInputContext = TagsInputPrimitive.Context;
@@ -23,7 +23,7 @@ export const TagsInputControl: Component<TagsInputPrimitive.ControlProps> = (pro
   return (
     <TagsInputPrimitive.Control
       class={cn(
-        'group relative min-h-10 py-1.5 pr-8 pl-2.5 text-sm [&_svg:not([class*="size-"])]:size-4 gap-1 shadow-sm flex w-full flex-wrap items-center rounded-lg border border-input bg-transparent transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        'group min-h-10 py-1.5 pr-8 pl-2.5 text-sm [&_svg:not([class*="size-"])]:size-4 gap-1 shadow-sm relative flex w-full flex-wrap items-center rounded-lg border border-input bg-transparent transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
         'focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50',
         'data-[invalid=true]:border-destructive data-[invalid=true]:ring-[3px] data-[invalid=true]:ring-destructive/20 dark:data-[invalid=true]:ring-destructive/40',
         'data-[disabled=true]:bg-input/50 data-[disabled=true]:opacity-50 dark:data-[disabled=true]:bg-input/80',
@@ -57,12 +57,12 @@ export const TagsInputClearTrigger: Component<TagsInputPrimitive.ClearTriggerPro
   return (
     <TagsInputPrimitive.ClearTrigger
       class={cn(
-        'right-2 top-1/2 p-0.5 absolute -translate-y-1/2 rounded-sm text-muted-foreground transition-colors hover:text-foreground',
+        'right-2 p-0.5 absolute top-1/2 -translate-y-1/2 rounded-sm text-muted-foreground transition-colors hover:text-foreground',
         local.class,
       )}
       {...others}
     >
-      {local.children ?? <OutlineCloseIcon class='size-3.5 pointer-events-none' />}
+      {local.children ?? <CloseIcon class='size-3.5 pointer-events-none' />}
     </TagsInputPrimitive.ClearTrigger>
   );
 };
@@ -71,7 +71,7 @@ export const TagsInputItem: Component<TagsInputPrimitive.ItemProps> = (props) =>
   const [local, others] = splitProps(props, ['class', 'children']);
   return (
     <TagsInputPrimitive.Item
-      class={cn('inline-flex items-center outline-none cursor-default', local.class)}
+      class={cn('inline-flex cursor-default items-center outline-none', local.class)}
       {...others}
     >
       {local.children}
@@ -85,8 +85,8 @@ export const TagsInputItemPreview: Component<TagsInputPrimitive.ItemPreviewProps
     <TagsInputPrimitive.ItemPreview
       data-slot='tags-input-item-preview'
       class={cn(
-        'h-6 gap-1 px-1.5 text-xs font-medium border border-transparent has-data-[slot=tags-input-item-delete-trigger]:pr-0 inline-flex items-center justify-center rounded-md bg-muted whitespace-nowrap text-foreground transition-colors',
-        'data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:border-ring',
+        'h-6 gap-1 px-1.5 text-xs font-medium has-data-[slot=tags-input-item-delete-trigger]:pr-0 inline-flex items-center justify-center rounded-md border border-transparent bg-muted whitespace-nowrap text-foreground transition-colors',
+        'data-highlighted:border-ring data-highlighted:bg-accent data-highlighted:text-accent-foreground',
         'data-disabled:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
         local.class,
       )}
@@ -106,7 +106,7 @@ export const TagsInputItemInput: Component<TagsInputPrimitive.ItemInputProps> =
     <TagsInputPrimitive.ItemInput
       class={cn(
         'py-0 px-1.5 h-6 text-xs rounded-md border border-input bg-background text-foreground outline-none',
-        'focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring',
+        'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
         local.class,
       )}
       {...others}
@@ -127,7 +127,7 @@ export const TagsInputItemDeleteTrigger: Component<TagsInputPrimitive.ItemDelete
       )}
       {...others}
     >
-      {local.children ?? <OutlineCloseIcon class='size-3 pointer-events-none' />}
+      {local.children ?? <CloseIcon class='size-3 pointer-events-none' />}
     </TagsInputPrimitive.ItemDeleteTrigger>
   );
 };

package/src/components/TreeView.tsx

@@ -1,7 +1,7 @@
 import { TreeView as TreeViewPrimitive, createTreeCollection } from '@ark-ui/solid/tree-view';
 import { Show, splitProps, type Component } from 'solid-js';
 import { cn } from 'tailwind-variants';
-import OutlineChevronRightIcon from '~icons/ic/outline-chevron-right';
+import ChevronRightIcon from '~icons/material-symbols/chevron-right';
 
 export const TreeView = TreeViewPrimitive.Root;
 export const TreeViewLabel = TreeViewPrimitive.Label;
@@ -46,7 +46,7 @@ export const TreeViewBranchControl: Component<TreeViewPrimitive.BranchControlPro
       {...others}
     >
       <TreeViewPrimitive.BranchIndicator class='text-muted-foreground transition-transform data-[state=open]:rotate-90'>
-        <OutlineChevronRightIcon class='size-4' />
+        <ChevronRightIcon class='size-4' />
       </TreeViewPrimitive.BranchIndicator>
       <Show when={local.children} fallback={<TreeViewPrimitive.BranchText />}>
         {local.children}

package/src/components/sidebar/Sidebar.tsx

@@ -1,23 +1,39 @@
-import { type Component, type ComponentProps, createEffect } from 'solid-js';
+import { type Component, type ComponentProps, createEffect, onCleanup } from 'solid-js';
+
+import { createMediaQuery } from '@/primitives/createMediaQuery';
 
 import { useSidebar } from './context';
 import { SidebarDesktop } from './SidebarDesktop';
 import { SidebarMobile } from './SidebarMobile';
 
-export type SidebarProps = ComponentProps<'div'> & {
+export type SidebarProps = ComponentProps<'aside'> & {
   side?: 'left' | 'right';
   variant?: 'sidebar' | 'floating' | 'inset';
   collapsible?: 'offcanvas' | 'icon' | 'none';
+  disableMobileSidebar?: boolean;
 };
 
 export const Sidebar: Component<SidebarProps> = (props) => {
-  const { isMobile, setSide } = useSidebar();
+  const { isMobile, setMobileDisabled, setOpen, setSide } = useSidebar();
+  const isViewportMobile = createMediaQuery('(max-width: 768px)');
+
+  onCleanup(() => {
+    setMobileDisabled(false);
+  });
 
-  // Set side on initial render and track changes
   createEffect(() => {
     const currentSide = props.side ?? 'left';
+    const mobileDisabled = props.disableMobileSidebar ?? false;
     setSide(currentSide);
+    setMobileDisabled(mobileDisabled);
   });
+
+  createEffect(() => {
+    if (props.disableMobileSidebar === true && props.collapsible === 'icon') {
+      setOpen(!isViewportMobile());
+    }
+  });
+
   return (
     <Show
       when={!isMobile()}

package/src/components/sidebar/SidebarDesktop.tsx

@@ -1,24 +1,57 @@
-import type { Component, ComponentProps, JSXElement } from 'solid-js';
-
+import {
+  createMemo,
+  type Component,
+  type ComponentProps,
+  type JSX,
+  type JSXElement,
+} from 'solid-js';
 import { cn } from 'tailwind-variants';
 
 import type { SidebarProps } from './Sidebar';
 
+import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './constants';
 import { useSidebar } from './context';
 
-type SidebarDesktopContainerProps = ComponentProps<'div'> & {
+type SidebarDesktopContainerProps = ComponentProps<'aside'> & {
   variant: string;
   side: string;
   children: JSXElement;
 };
 
+const getSidebarDesktopRootClass = (
+  disableMobileSidebar: boolean | undefined,
+): ComponentProps<'div'>['class'] =>
+  cn(
+    disableMobileSidebar === true
+      ? 'group peer min-h-0 relative block self-stretch text-sidebar-foreground'
+      : 'group peer md:block min-h-0 relative hidden self-stretch text-sidebar-foreground',
+  );
+
+const getSidebarGapClass = (variant: SidebarProps['variant']): ComponentProps<'div'>['class'] =>
+  cn(
+    'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+    'group-data-[collapsible=offcanvas]:w-0',
+    'group-data-[side=right]:rotate-180',
+    variant === 'floating' || variant === 'inset'
+      ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]'
+      : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+  );
+
+const getSidebarStyle = (style: SidebarProps['style']): JSX.CSSProperties => {
+  const base: JSX.CSSProperties = {
+    '--sidebar-width': SIDEBAR_WIDTH,
+    '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+  };
+  return typeof style === 'object' && style !== null ? { ...base, ...style } : base;
+};
+
 const SidebarDesktopContainer: Component<SidebarDesktopContainerProps> = (props) => {
   const [local, others] = splitProps(props, ['variant', 'side', 'class', 'children']);
   return (
-    <div
+    <aside
       data-slot='sidebar-container'
       class={cn(
-        'inset-y-0 md:flex fixed z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear',
+        'top-0 bottom-0 md:flex absolute z-10 hidden w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear',
         local.side === 'left'
           ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
           : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
@@ -36,7 +69,7 @@ const SidebarDesktopContainer: Component<SidebarDesktopContainerProps> = (props)
       >
         {local.children}
       </div>
-    </div>
+    </aside>
   );
 };
 
@@ -46,34 +79,29 @@ export const SidebarDesktop: Component<SidebarProps> = (props) => {
     'side',
     'variant',
     'collapsible',
+    'disableMobileSidebar',
+    'style',
     'class',
     'children',
   ]);
 
+  const style = createMemo(() => getSidebarStyle(local.style));
+
   return (
     <div
-      class='group peer md:block hidden text-sidebar-foreground'
+      style={style()}
+      class={getSidebarDesktopRootClass(local.disableMobileSidebar)}
       data-state={state()}
       data-collapsible={state() === 'collapsed' ? (local.collapsible ?? 'offcanvas') : ''}
       data-variant={local.variant ?? 'sidebar'}
       data-side={local.side ?? 'left'}
       data-slot='sidebar'
     >
-      <div
-        data-slot='sidebar-gap'
-        class={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-          'group-data-[collapsible=offcanvas]:w-0',
-          'group-data-[side=right]:rotate-180',
-          local.variant === 'floating' || local.variant === 'inset'
-            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-        )}
-      />
+      <div data-slot='sidebar-gap' class={getSidebarGapClass(local.variant)} />
       <SidebarDesktopContainer
         variant={local.variant ?? 'sidebar'}
         side={local.side ?? 'left'}
-        class={local.class}
+        class={cn(local.disableMobileSidebar === true ? 'flex' : 'md:flex hidden', local.class)}
         {...others}
       >
         {local.children}

package/src/components/sidebar/SidebarMenu.tsx

@@ -1,4 +1,5 @@
-import { createMemo, type Component, type ComponentProps } from 'solid-js';
+import { ark } from '@ark-ui/solid/factory';
+import { createMemo, type Component, type ComponentProps, type JSX } from 'solid-js';
 import { type VariantProps, tv, cn } from 'tailwind-variants';
 
 import { Skeleton } from '@/components/Skeleton';
@@ -57,12 +58,20 @@ export const sidebarMenuButtonVariants = tv({
   },
 });
 
-export type SidebarMenuButtonProps = ComponentProps<'button'> &
+type SidebarMenuButtonAsChild = ComponentProps<typeof ark.button>['asChild'];
+
+export type SidebarMenuButtonProps = Omit<ComponentProps<'button'>, 'asChild'> &
   VariantProps<typeof sidebarMenuButtonVariants> & {
+    asChild?: SidebarMenuButtonAsChild;
     isActive?: boolean;
     tooltip?: string | ComponentProps<typeof TooltipContent>;
   };
 
+type SidebarMenuButtonStyleProps = Pick<
+  SidebarMenuButtonProps,
+  'size' | 'isActive' | 'variant' | 'class'
+>;
+
 type SidebarMenuButtonDataProps = {
   'data-slot': 'sidebar-menu-button';
   'data-sidebar': 'menu-button';
@@ -88,32 +97,70 @@ const getTooltipChildren = (
   return tooltip.children;
 };
 
+const getSidebarMenuButtonDataProps = (
+  local: SidebarMenuButtonStyleProps,
+): SidebarMenuButtonDataProps => ({
+  'data-slot': 'sidebar-menu-button',
+  'data-sidebar': 'menu-button',
+  'data-size': local.size ?? 'default',
+  'data-active': local.isActive,
+  class: sidebarMenuButtonVariants({
+    variant: local.variant,
+    size: local.size,
+    class: local.class,
+  }),
+});
+
+const getSidebarMenuButtonAsChildProps = (
+  asChild: SidebarMenuButtonProps['asChild'],
+): Pick<ComponentProps<typeof ark.button>, 'asChild'> => (asChild ? { asChild } : {});
+
+const renderSidebarMenuButton = (
+  asChild: SidebarMenuButtonProps['asChild'],
+  props: ComponentProps<'button'>,
+  children: SidebarMenuButtonProps['children'],
+): JSX.Element => (
+  <ark.button {...props} {...getSidebarMenuButtonAsChildProps(asChild)}>
+    {children}
+  </ark.button>
+);
+
 export const SidebarMenuButton: Component<SidebarMenuButtonProps> = (props) => {
-  const [local, others] = splitProps(props, ['isActive', 'variant', 'size', 'tooltip', 'class']);
+  const [local, others] = splitProps(props, [
+    'asChild',
+    'children',
+    'isActive',
+    'variant',
+    'size',
+    'tooltip',
+    'class',
+  ]);
   const { isMobile, state, side } = useSidebar();
 
   const tooltipPlacement = createMemo(() => (side() === 'left' ? 'right' : 'left'));
-
-  const buttonProps = (): SidebarMenuButtonDataProps => ({
-    'data-slot': 'sidebar-menu-button',
-    'data-sidebar': 'menu-button',
-    'data-size': local.size ?? 'default',
-    'data-active': local.isActive,
-    class: sidebarMenuButtonVariants({
-      variant: local.variant,
-      size: local.size,
-      class: local.class,
-    }),
-  });
+  const buttonDataProps = createMemo(() => getSidebarMenuButtonDataProps(local));
 
   return (
-    <Show when={local.tooltip} fallback={<button {...buttonProps()} {...others} />}>
+    <Show
+      when={local.tooltip}
+      fallback={renderSidebarMenuButton(
+        local.asChild,
+        { ...buttonDataProps(), ...others },
+        local.children,
+      )}
+    >
       <Tooltip
         positioning={{ placement: tooltipPlacement() }}
         openDelay={100}
         disabled={state() !== 'collapsed' || isMobile()}
       >
-        <TooltipTrigger {...buttonProps()} {...others} />
+        <TooltipTrigger
+          {...buttonDataProps()}
+          {...others}
+          asChild={(triggerProps) =>
+            renderSidebarMenuButton(local.asChild, triggerProps(), local.children)
+          }
+        />
         <Portal>
           <TooltipPositioner>
             <TooltipContent {...getTooltipContentProps(local.tooltip)}>

package/src/components/sidebar/SidebarMobile.tsx

@@ -2,6 +2,7 @@ import type { Component } from 'solid-js';
 
 import {
   Sheet,
+  SheetCloseButton,
   SheetContent,
   SheetDescription,
   SheetHeader,
@@ -18,6 +19,7 @@ import { useSidebar } from './context';
 export const SidebarMobile: Component<SidebarProps> = (props) => {
   const [local] = splitProps(props, ['side', 'children']);
   const { openMobile, setOpenMobile } = useSidebar();
+  const side = local.side ?? 'left';
 
   return (
     <Sheet
@@ -26,16 +28,18 @@ export const SidebarMobile: Component<SidebarProps> = (props) => {
         setOpenMobile(event.open);
       }}
     >
-      <SheetPositioner side={local.side ?? 'left'}>
+      <SheetPositioner side={side}>
         <SheetContent
+          side={side}
           data-sidebar='sidebar'
           data-slot='sidebar'
           data-mobile='true'
-          class='p-0 w-(--sidebar-width) bg-sidebar text-sidebar-foreground [&>button]:hidden'
+          class='p-0 w-(--sidebar-width) bg-sidebar text-sidebar-foreground'
           style={{
             '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
           }}
         >
+          <SheetCloseButton />
           <div class='sr-only'>
             <SheetHeader>
               <SheetTitle>{messages.ui_sidebar_title()}</SheetTitle>

package/src/components/sidebar/SidebarProvider.tsx

@@ -1,7 +1,6 @@
 import {
   type Component,
   type ComponentProps,
-  createMemo,
   createSignal,
   onCleanup,
   onMount,
@@ -12,20 +11,38 @@ import { cn } from 'tailwind-variants';
 
 import { createMediaQuery } from '@/primitives/createMediaQuery';
 
-import { SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './constants';
+import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants';
 import { SidebarContext, type SidebarContextProps } from './context';
 import { setSidebarCookie } from './utils';
 
-export type SidebarProviderProps = ComponentProps<'div'> & {
+export type SidebarProviderProps = {
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (openValue: boolean) => void;
+  children?: JSX.Element;
+};
+
+export type SidebarLayoutProps = ComponentProps<'div'>;
+
+export const SidebarLayout: Component<SidebarLayoutProps> = (props) => {
+  const [local, others] = splitProps(props, ['class']);
+  return (
+    <div
+      data-slot='sidebar-wrapper'
+      class={cn(
+        'relative flex h-full min-h-full w-full has-data-[variant=inset]:bg-sidebar',
+        local.class,
+      )}
+      {...others}
+    />
+  );
 };
 
 const useSidebarState = (
   props: SidebarProviderProps,
 ): {
   isMobile: () => boolean;
+  setMobileDisabled: (value: boolean) => void;
   openMobile: () => boolean;
   setOpenMobile: (value: boolean | ((prev: boolean) => boolean)) => void;
   open: () => boolean;
@@ -33,7 +50,9 @@ const useSidebarState = (
   side: () => 'left' | 'right';
   setSide: (value: 'left' | 'right') => void;
 } => {
-  const isMobile = createMediaQuery('(max-width: 768px)');
+  const isViewportMobile = createMediaQuery('(max-width: 768px)');
+  const [mobileDisabled, setMobileDisabled] = createSignal(false);
+  const isMobile = (): boolean => isViewportMobile() && !mobileDisabled();
   const [openMobile, setOpenMobile] = createSignal(false);
   const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? true);
   const [side, setSide] = createSignal<'left' | 'right'>('left');
@@ -49,7 +68,16 @@ const useSidebarState = (
     setSidebarCookie(value);
   };
 
-  return { isMobile, openMobile, setOpenMobile, open, setOpen, side, setSide };
+  return {
+    isMobile,
+    setMobileDisabled,
+    openMobile,
+    setOpenMobile,
+    open,
+    setOpen,
+    side,
+    setSide,
+  };
 };
 const useSidebarEvents = (stateSet: ReturnType<typeof useSidebarState>): { toggle: () => void } => {
   const toggle = (): void => {
@@ -84,6 +112,7 @@ const createSidebarContextValue = (
   open: stateSet.open,
   setOpen: stateSet.setOpen,
   isMobile: stateSet.isMobile,
+  setMobileDisabled: stateSet.setMobileDisabled,
   openMobile: stateSet.openMobile,
   setOpenMobile: stateSet.setOpenMobile,
   toggleSidebar: toggle,
@@ -92,40 +121,12 @@ const createSidebarContextValue = (
 });
 
 export const SidebarProvider: Component<SidebarProviderProps> = (props) => {
-  const [local, others] = splitProps(props, [
-    'defaultOpen',
-    'open',
-    'onOpenChange',
-    'class',
-    'style',
-    'children',
-  ]);
-  const stateSet = useSidebarState(local);
+  const stateSet = useSidebarState(props);
   const { toggle } = useSidebarEvents(stateSet);
 
-  const style = createMemo((): JSX.CSSProperties => {
-    const base: JSX.CSSProperties = {
-      '--sidebar-width': SIDEBAR_WIDTH,
-      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-    };
-    return typeof local.style === 'object' && local.style !== null
-      ? { ...base, ...local.style }
-      : base;
-  });
-
   return (
     <SidebarContext.Provider value={createSidebarContextValue(stateSet, toggle)}>
-      <div
-        data-slot='sidebar-wrapper'
-        style={style()}
-        class={cn(
-          'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
-          local.class,
-        )}
-        {...others}
-      >
-        {local.children}
-      </div>
+      {props.children}
     </SidebarContext.Provider>
   );
 };

package/src/components/sidebar/SidebarSubComponents.tsx

@@ -1,10 +1,16 @@
 import type { Component, ComponentProps } from 'solid-js';
 
 import { cn } from 'tailwind-variants';
-import OutlineViewSidebarIcon from '~icons/ic/outline-view-sidebar';
+import ViewSidebarIcon from '~icons/material-symbols/side-navigation';
 
 import { Button } from '@/components/Button';
-import { ScrollArea } from '@/components/ScrollArea';
+import {
+  ScrollArea,
+  ScrollAreaContent,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '@/components/ScrollArea';
 import { Separator } from '@/components/Separator';
 import * as messages from '@/paraglide/messages';
 
@@ -34,7 +40,7 @@ export const SidebarTrigger: Component<ComponentProps<typeof Button>> = (props)
       onClick={handleClick}
       {...others}
     >
-      <OutlineViewSidebarIcon aria-hidden='true' />
+      <ViewSidebarIcon aria-hidden='true' />
     </Button>
   );
 };
@@ -140,13 +146,17 @@ export const SidebarContent: Component<ComponentProps<'div'>> = (props) => {
       data-slot='sidebar-content'
       data-sidebar='content'
       id={typeof local.id === 'string' ? local.id : 'sidebar-content'}
-      class={cn(
-        'gap-0 min-h-0 flex flex-1 flex-col group-data-[collapsible=icon]:overflow-hidden',
-        local.class,
-      )}
+      class={cn('min-h-0 flex flex-1 flex-col', local.class)}
       {...others}
     >
-      {local.children}
+      <ScrollAreaViewport class='h-full'>
+        <ScrollAreaContent class='gap-0 flex min-h-full flex-col group-data-[collapsible=icon]:overflow-hidden'>
+          {local.children}
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar orientation='vertical'>
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
     </ScrollArea>
   );
 };
@@ -170,7 +180,7 @@ export const SidebarGroupLabel: Component<ComponentProps<'div'>> = (props) => {
       data-slot='sidebar-group-label'
       data-sidebar='group-label'
       class={cn(
-        'h-8 px-2 text-xs font-medium group-data-[collapsible=icon]:-mt-8 [&>svg]:size-4 flex shrink-0 items-center rounded-md text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:shrink-0',
+        'h-8 px-2 text-xs group-data-[collapsible=icon]:-mt-8 [&>svg]:size-4 flex shrink-0 items-center rounded-md text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:shrink-0',
         local.class,
       )}
       {...others}

package/src/components/sidebar/context.ts

@@ -5,6 +5,7 @@ export type SidebarContextProps = {
   openMobile: () => boolean;
   setOpenMobile: (open: boolean) => void;
   isMobile: () => boolean;
+  setMobileDisabled: (mobileDisabled: boolean) => void;
   toggleSidebar: () => void;
   side: () => 'left' | 'right';
   setSide: (side: 'left' | 'right') => void;

package/src/components/toaster/Toaster.tsx

@@ -7,11 +7,11 @@ import {
 import { type Component, type Accessor, Show } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { cn } from 'tailwind-variants';
-import OutlineCheckCircleIcon from '~icons/ic/outline-check-circle';
-import OutlineCloseIcon from '~icons/ic/outline-close';
-import OutlineErrorIcon from '~icons/ic/outline-error';
-import OutlineInfoIcon from '~icons/ic/outline-info';
-import OutlineWarningIcon from '~icons/ic/outline-warning';
+import CheckCircleIcon from '~icons/material-symbols/check-circle';
+import CloseIcon from '~icons/material-symbols/close';
+import ErrorIcon from '~icons/material-symbols/error';
+import InfoIcon from '~icons/material-symbols/info';
+import WarningIcon from '~icons/material-symbols/warning';
 
 import { Spinner } from '@/components/Spinner';
 
@@ -24,22 +24,22 @@ export const toast = createToaster({
 const ToastItem: Component<{ toast: Accessor<ToastOptions> }> = (props) => (
   <Toast.Root
     class={cn(
-      'group gap-3 p-4 pr-10 shadow-lg pointer-events-auto relative flex min-w-72 w-full items-center rounded-lg border bg-popover transition-all',
-      'data-[state=open]:animate-in data-[state=open]:sm:slide-in-from-bottom-full data-[state=open]:slide-in-from-top-full',
+      'group gap-3 p-4 pr-10 shadow-lg min-w-72 pointer-events-auto relative flex w-full items-center rounded-lg border bg-popover transition-all',
+      'data-[state=open]:sm:slide-in-from-bottom-full data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full',
       'border-border text-popover-foreground',
     )}
   >
     <Show when={props.toast().type === 'success'}>
-      <OutlineCheckCircleIcon class={cn('size-5 text-green-500 shrink-0')} aria-hidden='true' />
+      <CheckCircleIcon class={cn('size-5 text-green-500 shrink-0')} aria-hidden='true' />
     </Show>
     <Show when={props.toast().type === 'info'}>
-      <OutlineInfoIcon class={cn('size-5 text-blue-500 shrink-0')} aria-hidden='true' />
+      <InfoIcon class={cn('size-5 text-blue-500 shrink-0')} aria-hidden='true' />
     </Show>
     <Show when={props.toast().type === 'warning'}>
-      <OutlineWarningIcon class={cn('size-5 text-amber-500 shrink-0')} aria-hidden='true' />
+      <WarningIcon class={cn('size-5 text-amber-500 shrink-0')} aria-hidden='true' />
     </Show>
     <Show when={props.toast().type === 'error'}>
-      <OutlineErrorIcon class={cn('size-5 text-red-500 shrink-0')} aria-hidden='true' />
+      <ErrorIcon class={cn('size-5 text-red-500 shrink-0')} aria-hidden='true' />
     </Show>
     <Show when={props.toast().type === 'loading'}>
       <Spinner class={cn('size-5 text-muted-foreground')} />
@@ -57,7 +57,7 @@ const ToastItem: Component<{ toast: Accessor<ToastOptions> }> = (props) => (
       </Show>
     </div>
     <Toast.CloseTrigger class='top-2 right-2 p-1 absolute cursor-pointer rounded-md text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 hover:text-foreground focus:opacity-100 focus:outline-none'>
-      <OutlineCloseIcon class='size-4' />
+      <CloseIcon class='size-4' />
     </Toast.CloseTrigger>
   </Toast.Root>
 );