@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/sidebar/components/sidebar-navigation.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import React, { useId } from 'react';
+import { cn } from '@/lib/utils';
+import { NavigationAction, getVisibleNavigationItems } from '@/lib/navigation-action';
+import {
+  NavigationDrawerItemContent,
+  NavigationRailItemContent,
+  getNavigationDrawerItemClasses,
+  getNavigationRailItemClasses,
+} from '@/lib/navigation-visuals';
+import type { NavigationItem } from '@/types/navigation';
+import { Ripple } from '@/components/ui/ripple';
+import { useSidebar } from '@/components/ui/sidebar/context/sidebar-provider';
+import { collectLeafItems, containsNavigationId } from '@/components/ui/sidebar/model/sidebar.state';
+
+interface SidebarNavigationProps {
+  items: NavigationItem[];
+  showRootIcons?: boolean;
+  className?: string;
+}
+
+export function SidebarNavigation({
+  items,
+  showRootIcons = true,
+  className,
+}: SidebarNavigationProps) {
+  return (
+    <div className={cn('flex flex-col gap-1', className)}>
+      {getVisibleNavigationItems(items).map((item) => (
+        <SidebarNavigationNode key={item.id} item={item} level={0} showRootIcons={showRootIcons} />
+      ))}
+    </div>
+  );
+}
+
+function SidebarNavigationNode({
+  item,
+  level,
+  showRootIcons,
+}: {
+  item: NavigationItem;
+  level: number;
+  showRootIcons: boolean;
+}) {
+  const { value, selectItem, renderLink, isGroupExpanded, toggleGroup } = useSidebar();
+  const contentId = useId();
+  const hasChildren = Boolean(item.items?.length);
+  const active = containsNavigationId(item, value);
+  const directlyActive = value === item.id;
+  const showIcon = level === 0 && showRootIcons;
+
+  if (!hasChildren) {
+    return (
+      <NavigationAction
+        item={item}
+        active={active}
+        onActivate={(selected) => selectItem(selected, 'drawer')}
+        renderLink={renderLink}
+        className={getNavigationDrawerItemClasses({ active, disabled: item.disabled })}
+      >
+        <NavigationDrawerItemContent
+          icon={showIcon ? item.icon : undefined}
+          activeIcon={showIcon ? item.activeIcon : undefined}
+          badge={item.badge}
+          active={active}
+          disabled={item.disabled}
+          ripple={<Ripple disabled={item.disabled ?? false} />}
+        >
+          {item.label}
+        </NavigationDrawerItemContent>
+      </NavigationAction>
+    );
+  }
+
+  const open = isGroupExpanded(item);
+  const content = (
+    <NavigationDrawerItemContent
+      icon={showIcon ? item.icon : undefined}
+      activeIcon={showIcon ? item.activeIcon : undefined}
+      badge={item.badge}
+      active={active}
+      disabled={item.disabled}
+      ripple={<Ripple disabled={item.disabled ?? false} />}
+    >
+      {item.label}
+    </NavigationDrawerItemContent>
+  );
+  const action = item.href ? (
+    <NavigationAction
+      item={item}
+      active={directlyActive}
+      onActivate={(selected) => selectItem(selected, 'drawer')}
+      renderLink={renderLink}
+      className={cn(
+        getNavigationDrawerItemClasses({ active, disabled: item.disabled }),
+        'rounded-r-none pr-1',
+      )}
+    >
+      {content}
+    </NavigationAction>
+  ) : (
+    <button
+      type="button"
+      className={getNavigationDrawerItemClasses({ active, disabled: item.disabled })}
+      disabled={item.disabled}
+      aria-current={directlyActive ? 'page' : undefined}
+      aria-expanded={open}
+      aria-controls={contentId}
+      onClick={() => {
+        selectItem(item, 'drawer');
+        toggleGroup(item);
+      }}
+    >
+      {content}
+    </button>
+  );
+
+  return (
+    <div className="flex flex-col">
+      {item.href ? (
+        <div className="flex items-stretch">
+          <div className="min-w-0 flex-1">{action}</div>
+          <button
+            type="button"
+            className="rounded-r-button hover:bg-state-hover focus-visible:ring-focus-ring grid w-10 shrink-0 place-items-center focus-visible:ring-2 focus-visible:outline-none"
+            aria-label={`${open ? 'Collapse' : 'Expand'} ${item.label}`}
+            aria-expanded={open}
+            aria-controls={contentId}
+            onClick={() => toggleGroup(item)}
+          >
+            <span
+              className={cn(
+                'material-symbols-outlined duration-medium text-[18px] transition-transform',
+                open && 'rotate-180',
+              )}
+              aria-hidden="true"
+            >
+              expand_more
+            </span>
+          </button>
+        </div>
+      ) : (
+        action
+      )}
+      <div
+        id={contentId}
+        className={cn(
+          'duration-medium grid transition-[grid-template-rows,opacity] motion-reduce:transition-none',
+          open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
+        )}
+        aria-hidden={!open}
+      >
+        <div className="overflow-hidden">
+          <div className="mt-1 flex flex-col gap-1 pl-4">
+            {getVisibleNavigationItems(item.items ?? []).map((child) => (
+              <SidebarNavigationNode
+                key={child.id}
+                item={child}
+                level={level + 1}
+                showRootIcons={showRootIcons}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function CollapsedSidebarNavigation({ items }: { items: NavigationItem[] }) {
+  const { value, selectItem, renderLink } = useSidebar();
+
+  return (
+    <div className="flex w-full flex-col items-center gap-1">
+      {collectLeafItems(items).map((item) => {
+        const active = value === item.id;
+        return (
+          <NavigationAction
+            key={item.id}
+            item={item}
+            active={active}
+            onActivate={(selected) => selectItem(selected, 'drawer')}
+            renderLink={renderLink}
+            className={getNavigationRailItemClasses(item.disabled)}
+            ariaLabel={item.label}
+            title={item.label}
+          >
+            <NavigationRailItemContent
+              icon={item.icon ?? 'circle'}
+              activeIcon={item.activeIcon}
+              badge={
+                typeof item.badge === 'string' || typeof item.badge === 'number'
+                  ? item.badge
+                  : undefined
+              }
+              label={item.label}
+              showLabel={false}
+              active={active}
+              disabled={item.disabled}
+              ripple={<Ripple center disabled={item.disabled} />}
+            />
+          </NavigationAction>
+        );
+      })}
+    </div>
+  );
+}

package/registry/components/sidebar/components/sidebar-rail.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { NavigationRail, type NavigationRailProps } from '@/components/ui/navigation-rail';
+import { useSidebar } from '@/components/ui/sidebar/context/sidebar-provider';
+import { findTopLevelContainerById } from '@/components/ui/sidebar/model/sidebar.state';
+
+export type SidebarRailProps = Omit<
+  NavigationRailProps,
+  | 'items'
+  | 'value'
+  | 'defaultValue'
+  | 'onValueChange'
+  | 'onItemSelect'
+  | 'renderLink'
+  | 'onItemHover'
+>;
+
+export function SidebarRail({ className, style, onMouseLeave, ...props }: SidebarRailProps) {
+  const sidebar = useSidebar();
+  if (!sidebar.isRailVisible) return null;
+  const selectedTopLevel = sidebar.value
+    ? (findTopLevelContainerById(sidebar.items, sidebar.value)?.id ?? null)
+    : null;
+
+  return (
+    <NavigationRail
+      items={sidebar.items}
+      value={selectedTopLevel}
+      onItemSelect={(item) => sidebar.selectItem(item, 'rail')}
+      renderLink={sidebar.renderLink}
+      onItemHover={sidebar.previewItem}
+      onMouseLeave={(event) => {
+        sidebar.clearPreview();
+        onMouseLeave?.(event);
+      }}
+      className={cn(
+        'w-auto border-r-0',
+        sidebar.side === 'left' ? 'border-r' : 'border-l',
+        className,
+      )}
+      style={{ width: `var(--sidebar-rail-width, ${sidebar.railWidth}px)`, ...style }}
+      {...props}
+    />
+  );
+}

package/registry/components/sidebar/components/sidebar-shell.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import React, { forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+import { Icon } from '@/components/ui/icon';
+import { useSidebar } from '@/components/ui/sidebar/context/sidebar-provider';
+import type { SidebarTriggerVisibility } from '@/components/ui/sidebar/model/sidebar.types';
+import { shouldRenderSidebarTrigger } from '@/components/ui/sidebar/model/sidebar.state';
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
+  ({ children, className, style, ...props }, ref) => {
+    const sidebar = useSidebar();
+    const registerContainer = sidebar.registerContainer;
+    const setRootRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+        registerContainer(node);
+      },
+      [ref, registerContainer],
+    );
+    const sidebarStyle: React.CSSProperties & {
+      '--sidebar-rail-width': string;
+      '--sidebar-drawer-width': string;
+      '--sidebar-mobile-drawer-width': string;
+    } = {
+      '--sidebar-rail-width': `${sidebar.railWidth}px`,
+      '--sidebar-drawer-width': `${sidebar.drawerWidth}px`,
+      '--sidebar-mobile-drawer-width': `${sidebar.mobileDrawerWidth}px`,
+      ...style,
+    };
+
+    return (
+      <div
+        ref={setRootRef}
+        className={cn(
+          'relative isolate flex h-full',
+          sidebar.isOverlay && sidebar.mobileOpen && 'z-[var(--z-drawer,1500)]',
+          sidebar.side === 'right' && 'flex-row-reverse',
+          className,
+        )}
+        data-slot="sidebar"
+        data-side={sidebar.side}
+        data-mode={sidebar.mode}
+        data-behavior={sidebar.behavior}
+        data-state={sidebar.isDrawerVisible ? 'open' : 'closed'}
+        style={sidebarStyle}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+Sidebar.displayName = 'Sidebar';
+
+export interface SidebarTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  'aria-label': string;
+  children?: React.ReactNode;
+  visibility?: SidebarTriggerVisibility;
+}
+
+export const SidebarTrigger = forwardRef<HTMLButtonElement, SidebarTriggerProps>(
+  ({ children, className, onClick, visibility = 'auto', ...props }, ref) => {
+    const sidebar = useSidebar();
+    if (
+      !shouldRenderSidebarTrigger({
+        visibility,
+        drawerEnabled: sidebar.drawerEnabled,
+        viewport: sidebar.viewport,
+      })
+    ) {
+      return null;
+    }
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        onClick={(event) => {
+          sidebar.toggle();
+          onClick?.(event);
+        }}
+        className={cn(
+          'rounded-icon-button text-on-surface-variant hover:bg-state-hover focus-visible:ring-focus-ring inline-flex size-10 items-center justify-center transition-colors focus-visible:ring-2 focus-visible:outline-none',
+          className,
+        )}
+        aria-expanded={sidebar.isOverlay ? sidebar.mobileOpen : sidebar.expanded}
+        {...props}
+      >
+        {children ?? <Icon symbol="menu" />}
+      </button>
+    );
+  },
+);
+SidebarTrigger.displayName = 'SidebarTrigger';