@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/dialog.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import React, { forwardRef, useId, useRef } 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 { Text } from '@/primitives/text';
+import { Surface } from '@/primitives/surface';
+import { IconButton } from '@/components/ui/icon-button';
+import { useScrollLock } from '@/hooks/use-scroll-lock';
+
+export type DialogTitle = Exclude<React.ReactNode, null | undefined | boolean>;
+
+type DialogAccessibleName =
+  | {
+      title: DialogTitle;
+      'aria-label'?: string;
+    }
+  | {
+      title?: never;
+      'aria-label': string;
+    };
+
+type DialogBaseProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+  actions?: React.ReactNode;
+  icon?: React.ReactNode;
+  contentClassName?: string;
+  headerClassName?: string;
+  footerClassName?: string;
+  className?: string;
+  mobilePresentation?: 'centered' | 'fullscreen';
+  showCloseButton?: boolean;
+  closeLabel?: string;
+  role?: 'dialog' | 'alertdialog';
+  'aria-describedby'?: string;
+};
+
+export type DialogProps = DialogBaseProps & DialogAccessibleName;
+
+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 Dialog = forwardRef<HTMLDivElement, DialogProps>(
+  (
+    {
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      title,
+      'aria-label': ariaLabel,
+      'aria-describedby': externalDescribedBy,
+      description,
+      children,
+      actions,
+      icon,
+      contentClassName,
+      headerClassName,
+      footerClassName,
+      className,
+      mobilePresentation = 'centered',
+      showCloseButton,
+      closeLabel = 'Close dialog',
+      role = 'dialog',
+    },
+    ref,
+  ) => {
+    const dialogRef = useRef<HTMLDivElement>(null);
+    const overlayRootRef = useRef<HTMLDivElement>(null);
+    const titleId = useId();
+    const descriptionId = useId();
+    const [isOpen = false, setIsOpen] = useControllableState<boolean>({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const resolvedShowCloseButton = showCloseButton ?? Boolean(title || description || icon);
+    const hasHeader = Boolean(title || description || icon || resolvedShowCloseButton);
+    const hasBodyContent = children !== undefined && children !== null;
+    const describedBy = mergeIds(externalDescribedBy, description ? descriptionId : undefined);
+
+    const setRefs = (node: HTMLDivElement | null) => {
+      dialogRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+
+    useScrollLock(isOpen);
+    useOverlayBehavior({
+      open: isOpen,
+      contentRef: dialogRef,
+      rootRef: overlayRootRef,
+      onDismiss: () => setIsOpen(false),
+      modal: true,
+    });
+
+    if (!isOpen || typeof document === 'undefined') {
+      return null;
+    }
+
+    const isFullscreenMobile = mobilePresentation === 'fullscreen';
+
+    return createPortal(
+      <div
+        ref={overlayRootRef}
+        className={cn(
+          'fixed inset-0 z-[var(--z-modal,3000)] flex items-center justify-center',
+          isFullscreenMobile ? 'medium:p-10 p-0' : 'medium:p-10 p-6',
+        )}
+        role="presentation"
+      >
+        <div
+          className="bg-scrim animate-fade-enter absolute inset-0"
+          onClick={() => setIsOpen(false)}
+          aria-hidden="true"
+        />
+
+        <Surface
+          ref={setRefs}
+          role={role}
+          aria-modal="true"
+          aria-label={ariaLabel}
+          aria-labelledby={title ? titleId : undefined}
+          aria-describedby={describedBy}
+          tabIndex={-1}
+          tone="surface"
+          elevation={5}
+          rounded="lg"
+          className={cn(
+            'border-outline-soft relative flex w-full flex-col overflow-hidden border outline-none',
+            isFullscreenMobile
+              ? 'medium:h-auto medium:max-h-[calc(100dvh-var(--spacing-20))] medium:max-w-110 medium:rounded-lg medium:border expanded:medium:max-w-150 h-dvh max-h-dvh max-w-none rounded-none border-0'
+              : 'expanded:max-w-150 max-w-110',
+            'animate-surface-enter',
+            className,
+          )}
+        >
+          {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
+                    variant="titleLarge"
+                    as="div"
+                    id={titleId}
+                    className="text-on-surface leading-tight wrap-break-word"
+                  >
+                    {title}
+                  </Text>
+                ) : null}
+                {description ? (
+                  <Text
+                    variant="bodySmall"
+                    as="div"
+                    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="md"
+                  className="bg-surface-container-low text-on-surface-variant hover:bg-surface-container hover:text-on-surface"
+                  onClick={() => setIsOpen(false)}
+                />
+              ) : null}
+            </div>
+          ) : null}
+
+          {hasBodyContent ? (
+            <div
+              className={cn(
+                'flex-1 overflow-y-auto',
+                isFullscreenMobile ? 'min-h-0' : 'max-h-[min(78vh,calc(100dvh-var(--spacing-24)))]',
+              )}
+            >
+              <div
+                className={cn(
+                  'text-on-surface px-5 pb-5 text-left',
+                  hasHeader ? 'pt-4' : 'pt-5',
+                  contentClassName,
+                )}
+              >
+                {children}
+              </div>
+            </div>
+          ) : null}
+
+          {actions ? (
+            <div
+              className={cn(
+                'border-outline-weak bg-surface-container-lowest flex flex-wrap items-center justify-end gap-2 border-t px-5 py-3',
+                isFullscreenMobile &&
+                  'medium:flex-row medium:[&>*]:w-auto flex-col-reverse [&>*]:w-full',
+                footerClassName,
+              )}
+            >
+              {actions}
+            </div>
+          ) : null}
+        </Surface>
+      </div>,
+      document.body,
+    );
+  },
+);
+
+Dialog.displayName = 'Dialog';
+
+function mergeIds(...ids: Array<string | undefined>) {
+  const merged = ids.filter(Boolean).join(' ');
+  return merged || undefined;
+}

package/registry/components/divider.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  inset?: 'none' | 'start' | 'both';
+  decorative?: boolean;
+}
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  ({ orientation = 'horizontal', inset = 'none', decorative = true, className, ...props }, ref) => {
+    return (
+      <div
+        {...props}
+        ref={ref}
+        className={cn(
+          'bg-outline-soft shrink-0',
+          orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+          inset === 'start' && orientation === 'horizontal' && 'ms-16',
+          inset === 'start' && orientation === 'vertical' && 'mt-16',
+          inset === 'both' && orientation === 'horizontal' && 'mx-16',
+          inset === 'both' && orientation === 'vertical' && 'my-16',
+          className,
+        )}
+        role={decorative ? 'none' : 'separator'}
+        aria-hidden={decorative ? true : undefined}
+        aria-orientation={decorative ? undefined : orientation}
+      />
+    );
+  },
+);
+
+Divider.displayName = 'Divider';

package/registry/components/drawer.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+import React, { forwardRef } from 'react';
+import { Drawer as VaulDrawer } from 'vaul';
+import { cn } from '@/lib/utils';
+import { IconButton, type IconButtonProps } from '@/components/ui/icon-button';
+
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface DrawerProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  footerLeft?: React.ReactNode;
+  footerRight?: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+  headerClassName?: string;
+  footerClassName?: string;
+  handleClassName?: string;
+  size?: DrawerSize;
+  showCloseButton?: boolean;
+  showHandle?: boolean;
+  closeButtonSize?: IconButtonProps['size'];
+  closeButtonIconSize?: IconButtonProps['iconSize'];
+  closeLabel?: string;
+  dismissible?: boolean;
+  swipeToClose?: boolean;
+  onExitComplete?: () => void;
+}
+
+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 Drawer = forwardRef<HTMLDivElement, DrawerProps>(
+  (
+    {
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      title,
+      description,
+      children,
+      footer,
+      footerLeft,
+      footerRight,
+      className,
+      contentClassName,
+      headerClassName,
+      footerClassName,
+      handleClassName,
+      size = 'md',
+      showCloseButton,
+      showHandle = true,
+      closeButtonSize = 'sm',
+      closeButtonIconSize = 'sm',
+      closeLabel = 'Close drawer',
+      dismissible = true,
+      swipeToClose = true,
+      onExitComplete,
+    },
+    ref,
+  ) => {
+    const resolvedShowCloseButton = showCloseButton ?? false;
+    const hasHeader = Boolean(title || description || resolvedShowCloseButton);
+
+    const sizeClasses: Record<DrawerSize, 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 (
+      <VaulDrawer.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        direction="bottom"
+        dismissible={dismissible}
+        handleOnly={!swipeToClose}
+        modal
+        shouldScaleBackground={false}
+        setBackgroundColorOnScale={false}
+        onOpenChange={onOpenChange}
+        onAnimationEnd={(isOpen) => {
+          if (!isOpen) {
+            onExitComplete?.();
+          }
+        }}
+      >
+        <VaulDrawer.Portal>
+          <VaulDrawer.Overlay
+            className="bg-scrim fixed inset-0 z-[var(--z-modal,3000)]"
+            aria-hidden="true"
+          />
+
+          <VaulDrawer.Content
+            ref={ref}
+            className={cn(
+              'bg-surface text-on-surface border-outline-soft shadow-5 fixed inset-x-0 bottom-0 z-[var(--z-modal,3000)] mx-auto flex w-full flex-col overflow-hidden rounded-t-lg rounded-b-none border border-b-0 outline-none',
+              'medium:max-w-[min(640px,calc(100vw-var(--spacing-8)))]',
+              sizeClasses[size],
+              className,
+            )}
+          >
+            {showHandle ? (
+              <div
+                className={cn(
+                  'bg-surface flex shrink-0 justify-center px-5 pt-3',
+                  hasHeader ? 'pb-1' : 'pb-3',
+                )}
+              >
+                <VaulDrawer.Handle
+                  className={cn(
+                    '!bg-outline-muted !h-1 !w-8 !rounded-full !opacity-100',
+                    handleClassName,
+                  )}
+                />
+              </div>
+            ) : null}
+
+            {hasHeader ? (
+              <div
+                className={cn(
+                  'border-outline-weak bg-surface flex items-center gap-3 border-b px-5 py-3',
+                  headerClassName,
+                )}
+              >
+                <div className="min-w-0 flex-1 space-y-1 text-left">
+                  {title ? (
+                    <VaulDrawer.Title className="text-title-large text-on-surface text-left font-sans leading-tight font-normal wrap-break-word">
+                      {title}
+                    </VaulDrawer.Title>
+                  ) : null}
+                  {description ? (
+                    <VaulDrawer.Description className="text-body-small text-on-surface-variant text-left font-sans leading-relaxed font-normal wrap-break-word">
+                      {description}
+                    </VaulDrawer.Description>
+                  ) : null}
+                </div>
+
+                {resolvedShowCloseButton ? (
+                  <VaulDrawer.Close asChild>
+                    <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"
+                    />
+                  </VaulDrawer.Close>
+                ) : null}
+              </div>
+            ) : null}
+
+            {!description ? (
+              <VaulDrawer.Description className="sr-only">Drawer content</VaulDrawer.Description>
+            ) : null}
+
+            <div className="no-scrollbar relative z-10 flex-1 overflow-y-auto">
+              <div
+                className={cn(
+                  'text-on-surface px-5 pb-[max(var(--spacing-5),env(safe-area-inset-bottom))]',
+                  hasHeader || showHandle ? 'pt-4' : 'pt-5',
+                  contentClassName,
+                )}
+              >
+                {children}
+              </div>
+            </div>
+
+            {resolvedFooter ? (
+              <div
+                className={cn(
+                  'border-outline-weak bg-surface shrink-0 border-t px-5 py-3 pb-[max(var(--spacing-3),env(safe-area-inset-bottom))]',
+                  footerClassName,
+                )}
+              >
+                {resolvedFooter}
+              </div>
+            ) : null}
+          </VaulDrawer.Content>
+        </VaulDrawer.Portal>
+      </VaulDrawer.Root>
+    );
+  },
+);
+
+Drawer.displayName = 'Drawer';