@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/sheet.tsx

@@ -0,0 +1,318 @@
+'use client';
+
+import React, { forwardRef, useEffect, useId, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@/lib/utils';
+import { useControllableState } from '@/lib/use-controllable-state';
+import { useOverlayBehavior } from '@/lib/use-overlay-behavior';
+import { useScrollLock } from '@/hooks/use-scroll-lock';
+import { Text } from '@/primitives/text';
+import { IconButton, type IconButtonProps } from '@/components/ui/icon-button';
+
+export type SheetSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type SheetPlacement = 'left' | 'right' | 'bottom';
+
+export interface SheetProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  footer?: React.ReactNode;
+  footerLeft?: React.ReactNode;
+  footerRight?: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+  headerClassName?: string;
+  footerClassName?: string;
+  size?: SheetSize;
+  placement?: SheetPlacement;
+  showCloseButton?: boolean;
+  closeButtonSize?: IconButtonProps['size'];
+  closeButtonIconSize?: IconButtonProps['iconSize'];
+  closeLabel?: string;
+}
+
+const closeIcon = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+    aria-hidden="true"
+  >
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+);
+
+export const Sheet = forwardRef<HTMLDivElement, SheetProps>(
+  (
+    {
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      title,
+      description,
+      children,
+      icon,
+      footer,
+      footerLeft,
+      footerRight,
+      className,
+      contentClassName,
+      headerClassName,
+      footerClassName,
+      size = 'md',
+      placement = 'right',
+      showCloseButton,
+      closeButtonSize = 'md',
+      closeButtonIconSize,
+      closeLabel = 'Close sheet',
+    },
+    ref,
+  ) => {
+    const panelRef = useRef<HTMLDivElement>(null);
+    const overlayRootRef = useRef<HTMLDivElement>(null);
+    const timerRef = useRef<number | null>(null);
+    const [isOpen = false, setIsOpen] = useControllableState<boolean>({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const [shouldRender, setShouldRender] = useState(isOpen);
+    const [isVisible, setIsVisible] = useState(false);
+    const titleId = useId();
+    const descriptionId = useId();
+    const bodyDescriptionId = useId();
+    const isBottom = placement === 'bottom';
+    const isLeft = placement === 'left';
+    const resolvedShowCloseButton = showCloseButton ?? Boolean(title || description || icon);
+    const hasHeader = Boolean(title || description || icon || resolvedShowCloseButton);
+    const describedBy = description ? descriptionId : bodyDescriptionId;
+
+    const OPEN_DURATION = 320;
+    const CLOSE_DURATION = 220;
+
+    useScrollLock(isOpen);
+    useOverlayBehavior({
+      open: isOpen,
+      contentRef: panelRef,
+      rootRef: overlayRootRef,
+      onDismiss: () => setIsOpen(false),
+      modal: true,
+    });
+
+    useEffect(() => {
+      if (isOpen) {
+        if (timerRef.current) {
+          window.clearTimeout(timerRef.current);
+        }
+        setShouldRender(true);
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setIsVisible(true);
+          });
+        });
+        return;
+      }
+
+      setIsVisible(false);
+      timerRef.current = window.setTimeout(() => {
+        setShouldRender(false);
+      }, CLOSE_DURATION);
+
+      return () => {
+        if (timerRef.current) {
+          window.clearTimeout(timerRef.current);
+        }
+      };
+    }, [isOpen]);
+
+    if (!shouldRender || typeof document === 'undefined') {
+      return null;
+    }
+
+    const rightSizeClasses: Record<SheetSize, string> = {
+      sm: 'max-w-96',
+      md: 'max-w-120',
+      lg: 'max-w-170',
+      xl: 'max-w-220',
+      full: 'max-w-[calc(100vw-var(--spacing-8))]',
+    };
+    const bottomSizeClasses: Record<SheetSize, string> = {
+      sm: 'max-h-[58dvh]',
+      md: 'max-h-[72dvh]',
+      lg: 'max-h-[82dvh]',
+      xl: 'max-h-[90dvh]',
+      full: 'h-[calc(100dvh-var(--spacing-6))]',
+    };
+
+    const resolvedFooter =
+      footer ??
+      (footerLeft || footerRight ? (
+        <div className="medium:flex-row flex flex-col items-start justify-between gap-4">
+          <div className="medium:w-auto w-full min-w-0 flex-1">{footerLeft}</div>
+          <div className="medium:w-auto flex w-full shrink-0 items-center justify-end gap-2">
+            {footerRight}
+          </div>
+        </div>
+      ) : null);
+
+    return createPortal(
+      <div
+        ref={overlayRootRef}
+        className={cn(
+          'fixed inset-0 z-[var(--z-modal,3000)] flex overflow-hidden',
+          isBottom
+            ? 'items-end justify-center p-0'
+            : isLeft
+              ? 'items-stretch justify-start p-0'
+              : 'items-stretch justify-end p-0',
+        )}
+        role="presentation"
+      >
+        <div
+          className={cn(
+            'bg-scrim absolute inset-0 transition-opacity',
+            isVisible ? 'opacity-100' : 'opacity-0',
+          )}
+          style={{
+            transitionDuration: `${isVisible ? OPEN_DURATION : CLOSE_DURATION}ms`,
+            transitionTimingFunction: isVisible
+              ? 'cubic-bezier(0.2, 0.8, 0.2, 1)'
+              : 'cubic-bezier(0.4, 0, 1, 1)',
+          }}
+          onClick={() => setIsOpen(false)}
+          aria-hidden="true"
+        />
+
+        <div
+          ref={(node) => {
+            panelRef.current = node;
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          }}
+          className={cn(
+            'bg-surface shadow-5 border-outline-soft relative flex max-h-full w-full transform-gpu flex-col overflow-hidden border',
+            isBottom
+              ? 'rounded-t-lg rounded-b-none border-b-0'
+              : isLeft
+                ? 'h-full rounded-none border-l-0'
+                : 'h-full rounded-none border-r-0',
+            isBottom ? bottomSizeClasses[size] : rightSizeClasses[size],
+            isBottom
+              ? isVisible
+                ? 'translate-y-0 opacity-100'
+                : 'translate-y-6 opacity-0'
+              : isLeft
+                ? isVisible
+                  ? 'translate-x-0 opacity-100'
+                  : '-translate-x-6 opacity-0'
+                : isVisible
+                  ? 'translate-x-0 opacity-100'
+                  : 'translate-x-6 opacity-0',
+            className,
+          )}
+          style={{
+            transitionDuration: `${isVisible ? OPEN_DURATION : CLOSE_DURATION}ms`,
+            transitionTimingFunction: isVisible
+              ? 'cubic-bezier(0.2, 0.8, 0.2, 1)'
+              : 'cubic-bezier(0.4, 0, 1, 1)',
+          }}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={title ? titleId : undefined}
+          aria-describedby={describedBy}
+          tabIndex={-1}
+        >
+          {hasHeader ? (
+            <div
+              className={cn(
+                'border-outline-weak bg-surface-container-lowest flex items-start gap-3 border-b px-5 py-4',
+                headerClassName,
+              )}
+            >
+              {icon ? (
+                <div
+                  className="bg-surface-container-low text-primary border-outline-soft flex h-10 w-10 shrink-0 items-center justify-center rounded-md border"
+                  aria-hidden="true"
+                >
+                  {icon}
+                </div>
+              ) : null}
+
+              <div className="min-w-0 flex-1 space-y-1 text-left">
+                {title ? (
+                  <Text
+                    as="div"
+                    variant="titleLarge"
+                    id={titleId}
+                    className="text-on-surface leading-tight wrap-break-word"
+                  >
+                    {title}
+                  </Text>
+                ) : null}
+                {description ? (
+                  <Text
+                    as="div"
+                    variant="bodySmall"
+                    id={descriptionId}
+                    className="text-on-surface-variant leading-relaxed wrap-break-word"
+                  >
+                    {description}
+                  </Text>
+                ) : null}
+              </div>
+
+              {resolvedShowCloseButton ? (
+                <IconButton
+                  aria-label={closeLabel}
+                  icon={closeIcon}
+                  variant="standard"
+                  size={closeButtonSize}
+                  iconSize={closeButtonIconSize}
+                  className="bg-surface-container-low text-on-surface-variant hover:bg-surface-container hover:text-on-surface"
+                  onClick={() => setIsOpen(false)}
+                />
+              ) : null}
+            </div>
+          ) : null}
+
+          <div className="no-scrollbar relative z-10 flex-1 overflow-y-auto">
+            <div
+              id={!description ? bodyDescriptionId : undefined}
+              className={cn(
+                'text-on-surface px-5 pb-5',
+                hasHeader ? 'pt-4' : 'pt-5',
+                contentClassName,
+              )}
+            >
+              {children}
+            </div>
+          </div>
+
+          {resolvedFooter ? (
+            <div
+              className={cn(
+                'border-outline-weak bg-surface-container-lowest shrink-0 border-t px-5 py-3',
+                footerClassName,
+              )}
+            >
+              {resolvedFooter}
+            </div>
+          ) : null}
+        </div>
+      </div>,
+      document.body,
+    );
+  },
+);
+
+Sheet.displayName = 'Sheet';

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

@@ -0,0 +1,177 @@
+'use client';
+
+import React, { forwardRef, useRef } from 'react';
+import { cn } from '@/lib/utils';
+import { useOverlayBehavior } from '@/lib/use-overlay-behavior';
+import { useScrollLock } from '@/hooks/use-scroll-lock';
+import { useSidebar } from '@/components/ui/sidebar/context/sidebar-provider';
+import { CollapsedSidebarNavigation, SidebarNavigation } from '@/components/ui/sidebar/components/sidebar-navigation';
+
+export interface SidebarDrawerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+  'aria-label': string;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+  collapsedHeader?: React.ReactNode;
+  collapsedFooter?: React.ReactNode;
+  headline?: React.ReactNode;
+  overlayHeadline?: React.ReactNode;
+  emptyContent?: React.ReactNode;
+  showCloseButton?: boolean;
+}
+
+export const SidebarDrawer = forwardRef<HTMLElement, SidebarDrawerProps>(
+  (
+    {
+      header,
+      footer,
+      collapsedHeader,
+      collapsedFooter,
+      headline,
+      overlayHeadline,
+      emptyContent,
+      showCloseButton = true,
+      className,
+      style,
+      'aria-label': ariaLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const sidebar = useSidebar();
+    const panelRef = useRef<HTMLElement | null>(null);
+    const overlayRootRef = useRef<HTMLDivElement | null>(null);
+    const isOpen = sidebar.isOverlay ? sidebar.mobileOpen : sidebar.isDrawerVisible;
+    const isCollapsed =
+      sidebar.mode === 'collapsible-drawer' && !sidebar.isOverlay && !sidebar.expanded;
+    const contextualItems = sidebar.effectiveItem?.items?.length
+      ? sidebar.effectiveItem.items
+      : sidebar.items;
+    const navigationItems = sidebar.isOverlay ? sidebar.items : contextualItems;
+    const resolvedHeadline = sidebar.isOverlay
+      ? overlayHeadline
+      : headline === undefined
+        ? sidebar.effectiveItem?.label
+        : headline;
+
+    useScrollLock(sidebar.isOverlay && isOpen);
+    useOverlayBehavior({
+      open: sidebar.isOverlay && isOpen,
+      contentRef: panelRef,
+      rootRef: overlayRootRef,
+      modalBoundaryRef: sidebar.rootRef,
+      onDismiss: sidebar.close,
+      modal: true,
+      dismissOnInteractOutside: true,
+    });
+
+    if (!sidebar.drawerEnabled || (sidebar.isOverlay && !isOpen)) return null;
+
+    const setPanelRef = (node: HTMLElement | null) => {
+      panelRef.current = node;
+      if (typeof ref === 'function') ref(node);
+      else if (ref) ref.current = node;
+    };
+    const drawerWidth = sidebar.isOverlay
+      ? sidebar.mobileDrawerWidth
+      : isCollapsed
+        ? sidebar.railWidth
+        : sidebar.drawerWidth;
+    const drawer = (
+      <aside
+        ref={setPanelRef}
+        className={cn(
+          'bg-surface-container-low text-on-surface duration-emphasized ease-emphasized flex h-full flex-col overflow-hidden transition-[transform,width] motion-reduce:transition-none',
+          sidebar.isOverlay
+            ? 'shadow-3 relative z-10 max-w-[85vw]'
+            : 'absolute top-0 bottom-0 z-30',
+          sidebar.isOverlay && sidebar.side === 'left' && 'rounded-e-[2rem]',
+          sidebar.isOverlay && sidebar.side === 'right' && 'rounded-s-[2rem]',
+          !sidebar.isOverlay && !isOpen && sidebar.side === 'left' && '-translate-x-full',
+          !sidebar.isOverlay && !isOpen && sidebar.side === 'right' && 'translate-x-full',
+          className,
+        )}
+        style={{
+          width: `var(--sidebar-${sidebar.isOverlay ? 'mobile-drawer' : isCollapsed ? 'rail' : 'drawer'}-width, ${drawerWidth}px)`,
+          [sidebar.side]: sidebar.isOverlay ? 0 : sidebar.railEnabled ? sidebar.railWidth : 0,
+          ...style,
+        }}
+        onMouseEnter={!sidebar.isOverlay ? sidebar.retainPreview : undefined}
+        onMouseLeave={!sidebar.isOverlay ? sidebar.releasePreview : undefined}
+        aria-hidden={!isOpen}
+        inert={!isOpen ? true : undefined}
+        tabIndex={sidebar.isOverlay ? -1 : undefined}
+        {...props}
+      >
+        <nav aria-label={ariaLabel} className="flex min-h-0 flex-1 flex-col">
+          {isCollapsed ? (
+            <>
+              {collapsedHeader ? <div className="shrink-0 px-2 pt-3">{collapsedHeader}</div> : null}
+              <div className="flex-1 overflow-y-auto px-1 py-2">
+                <CollapsedSidebarNavigation items={sidebar.items} />
+              </div>
+              {collapsedFooter ? (
+                <div className="mt-auto shrink-0 px-2 pb-3">{collapsedFooter}</div>
+              ) : null}
+            </>
+          ) : (
+            <>
+              {header || (sidebar.isOverlay && showCloseButton) ? (
+                <div className="flex shrink-0 items-start gap-3 px-4 pt-4 pb-2">
+                  <div className="min-w-0 flex-1">{header}</div>
+                  {sidebar.isOverlay && showCloseButton ? (
+                    <button
+                      type="button"
+                      className="rounded-icon-button hover:bg-state-hover focus-visible:ring-focus-ring grid size-10 shrink-0 place-items-center focus-visible:ring-2 focus-visible:outline-none"
+                      aria-label={`Close ${ariaLabel}`}
+                      onClick={sidebar.close}
+                    >
+                      <span className="material-symbols-outlined" aria-hidden="true">
+                        close
+                      </span>
+                    </button>
+                  ) : null}
+                </div>
+              ) : null}
+              {resolvedHeadline ? (
+                <div className="text-label-small text-on-surface-variant px-5 pt-2 pb-2 font-semibold tracking-wider uppercase">
+                  {resolvedHeadline}
+                </div>
+              ) : null}
+              <div className="flex-1 overflow-y-auto px-2 py-2">
+                {navigationItems.length ? (
+                  <SidebarNavigation
+                    items={navigationItems}
+                    showRootIcons={sidebar.isOverlay || !sidebar.effectiveItem?.items?.length}
+                  />
+                ) : (
+                  emptyContent
+                )}
+              </div>
+              {footer ? <div className="mt-auto shrink-0 px-4 py-4">{footer}</div> : null}
+            </>
+          )}
+        </nav>
+      </aside>
+    );
+
+    if (!sidebar.isOverlay) return drawer;
+
+    return (
+      <div
+        ref={overlayRootRef}
+        className={cn(
+          sidebar.containerMode === 'viewport' ? 'fixed' : 'absolute',
+          'inset-0 z-[var(--z-drawer,1500)] flex',
+          sidebar.side === 'right' && 'justify-end',
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-label={ariaLabel}
+      >
+        <div className="bg-scrim absolute inset-0" aria-hidden="true" />
+        {drawer}
+      </div>
+    );
+  },
+);
+SidebarDrawer.displayName = 'SidebarDrawer';

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

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+import { useSidebar } from '@/components/ui/sidebar/context/sidebar-provider';
+
+export interface SidebarInsetProps extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+}
+
+export const SidebarInset = forwardRef<HTMLElement, SidebarInsetProps>(
+  ({ children, className, style, ...props }, ref) => {
+    const sidebar = useSidebar();
+    const topOffset =
+      sidebar.containerMode === 'contained' ? 0 : sidebar.isOverlay ? sidebar.mobileInsetOffset : 0;
+    const insetStyle: React.CSSProperties & { '--sidebar-margin': string } = {
+      marginTop: topOffset,
+      height:
+        sidebar.containerMode === 'contained'
+          ? '100%'
+          : topOffset > 0
+            ? `calc(100vh - ${topOffset}px)`
+            : '100vh',
+      marginLeft: sidebar.side === 'left' ? sidebar.contentMargin : 0,
+      marginRight: sidebar.side === 'right' ? sidebar.contentMargin : 0,
+      '--sidebar-margin': `${sidebar.contentMargin}px`,
+      ...style,
+    };
+
+    return (
+      <main
+        ref={ref}
+        className={cn(
+          'bg-surface duration-emphasized ease-emphasized flex min-w-0 flex-1 flex-col overflow-x-hidden overflow-y-auto transition-[margin,height,margin-top] motion-reduce:transition-none',
+          className,
+        )}
+        style={insetStyle}
+        aria-hidden={sidebar.isOverlay && sidebar.mobileOpen ? true : undefined}
+        {...props}
+      >
+        {children}
+      </main>
+    );
+  },
+);
+SidebarInset.displayName = 'SidebarInset';