@manafishrov/ui 1.1.0 → 1.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@manafishrov/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Styled component library for Manafish interfaces ",
   "license": "AGPL-3.0-or-later",
   "repository": {

package/src/components/sidebar/Sidebar.tsx

@@ -6,7 +6,7 @@ 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';

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>
   );
 };
 
@@ -47,34 +80,24 @@ export const SidebarDesktop: Component<SidebarProps> = (props) => {
     'variant',
     'collapsible',
     'disableMobileSidebar',
+    'style',
     'class',
     'children',
   ]);
 
+  const style = createMemo(() => getSidebarStyle(local.style));
+
   return (
     <div
-      class={cn(
-        local.disableMobileSidebar === true
-          ? 'group peer block text-sidebar-foreground'
-          : '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'}

package/src/components/sidebar/SidebarProvider.tsx

@@ -1,7 +1,6 @@
 import {
   type Component,
   type ComponentProps,
-  createMemo,
   createSignal,
   onCleanup,
   onMount,
@@ -12,14 +11,31 @@ 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 = (
@@ -105,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

@@ -4,7 +4,13 @@ import { cn } from 'tailwind-variants';
 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';
 
@@ -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 font-heading 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/theme.css

@@ -1,7 +1,10 @@
 @import 'tw-animate-css';
-@import '@fontsource/rajdhani';
-@import '@fontsource-variable/google-sans-flex/index.css';
 @import '@fontsource/chakra-petch/500';
+@import '@fontsource/rajdhani/400';
+@import '@fontsource/rajdhani/500';
+@import '@fontsource/rajdhani/600';
+@import '@fontsource/rajdhani/700';
+@import '@fontsource-variable/google-sans-flex';
 @import './components/marquee/marquee.css';
 @import './components/toaster/toaster.css';
 
@@ -82,8 +85,8 @@
     'Google Sans Flex Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --font-heading:
-    'Rajdhani', 'Google Sans Flex Variable', ui-sans-serif, system-ui, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    'Rajdhani', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
   --font-branding:
     'Chakra Petch', 'Google Sans Flex Variable', ui-sans-serif, system-ui, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';