@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/canonical-layouts.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { cn } from '@/lib/utils';
+import { useControllableState } from '@/lib/use-controllable-state';
+import { Icon } from '@/components/ui/icon';
+import { IconButton } from '@/components/ui/icon-button';
+import { Pane, PaneLayout } from '@/layout/pane';
+
+export interface ListDetailLayoutProps {
+  list: React.ReactNode;
+  detail: React.ReactNode;
+  showDetailMobile?: boolean;
+  onBackClick?: () => void;
+  className?: string;
+  isRoot?: boolean;
+}
+
+export const ListDetailLayout: React.FC<ListDetailLayoutProps> = ({
+  list,
+  detail,
+  showDetailMobile = false,
+  onBackClick,
+  className,
+  isRoot = false,
+}) => {
+  return (
+    <PaneLayout className={cn(!isRoot && 'border-outline-soft rounded-sm border', className)}>
+      <Pane
+        kind="list"
+        isActive={!showDetailMobile}
+        className="duration-long ease-emphasized transition-transform"
+      >
+        {list}
+      </Pane>
+
+      <Pane
+        kind="main"
+        role="main"
+        isActive={showDetailMobile}
+        className="bg-surface-container-low duration-long ease-standard relative transition-opacity"
+      >
+        {showDetailMobile && (
+          <div className="medium:hidden absolute top-4 left-4 z-20">
+            <IconButton
+              onClick={onBackClick}
+              variant="standard"
+              className="bg-surface-container-low border-outline-soft border backdrop-blur-md"
+              aria-label="Back"
+              icon={<Icon symbol="arrow_back" />}
+            />
+          </div>
+        )}
+        {detail}
+      </Pane>
+    </PaneLayout>
+  );
+};
+
+export { ListDetailLayout as PaneGroup };
+
+export interface SupportingPaneLayoutProps {
+  main: React.ReactNode;
+  supporting: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  isRoot?: boolean;
+  mainRef?: React.RefObject<HTMLDivElement | null>;
+  title?: string;
+  subtitle?: string;
+  headerContent?: React.ReactNode;
+  headerLayout?: 'stacked' | 'inline';
+  mainScrollable?: boolean;
+  supportingScrollable?: boolean;
+  showCloseButtonOnDesktop?: boolean;
+}
+
+export const SupportingPaneLayout: React.FC<SupportingPaneLayoutProps> = ({
+  main,
+  supporting,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  isRoot = false,
+  mainRef,
+  title = 'Audit Protocol',
+  subtitle,
+  headerContent,
+  headerLayout = 'stacked',
+  mainScrollable = true,
+  supportingScrollable = true,
+  showCloseButtonOnDesktop = false,
+}) => {
+  const [resolvedOpen = false, setOpen] = useControllableState<boolean>({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+  const isOpen = resolvedOpen;
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleToggle = () => {
+    setOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpen(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, setOpen]);
+
+  return (
+    <div
+      className={cn(
+        'bg-surface duration-long ease-emphasized relative isolate grid h-full w-full overflow-hidden transition-[grid-template-columns]',
+        !isRoot && 'border-outline-soft rounded-sm border',
+        isOpen
+          ? 'expanded:grid-cols-[1fr_var(--width-pane-supporting)]'
+          : 'expanded:grid-cols-[1fr_var(--width-rail-collapsed)]',
+        className,
+      )}
+    >
+      <div
+        ref={mainRef as React.RefObject<HTMLDivElement>}
+        className="bg-surface relative h-full min-w-0 flex-1 overflow-hidden"
+      >
+        <div
+          className={cn(
+            'h-full',
+            mainScrollable
+              ? 'overflow-y-auto scroll-smooth [scrollbar-gutter:stable]'
+              : 'overflow-hidden',
+          )}
+        >
+          {main}
+        </div>
+      </div>
+
+      <aside
+        className={cn(
+          'bg-surface duration-long ease-emphasized z-40 shrink-0 overflow-hidden transition-all',
+          'medium:w-[min(100%,var(--width-pane-supporting))] absolute inset-y-0 right-0 h-full w-full',
+          isOpen ? 'shadow-3 translate-x-0' : 'translate-x-full shadow-none',
+          'expanded:z-auto expanded:static expanded:shadow-none expanded:translate-x-0 expanded:border-l expanded:border-outline-weak expanded:w-full',
+        )}
+      >
+        {isOpen ? (
+          <div className="flex h-full flex-col">
+            {headerContent && headerLayout === 'inline' ? (
+              <header className="border-outline-weak flex h-[var(--supporting-pane-header-height,3.5rem)] shrink-0 items-center justify-between gap-3 border-b px-[var(--supporting-pane-header-padding-x,0.75rem)]">
+                <div className="min-w-0 flex-1">{headerContent}</div>
+                <IconButton
+                  onClick={handleClose}
+                  variant="standard"
+                  icon={<Icon symbol="close" />}
+                  aria-label="Close pane"
+                  className={cn(!showCloseButtonOnDesktop && 'expanded:hidden')}
+                />
+              </header>
+            ) : (
+              <header className="border-outline-weak shrink-0 border-b">
+                <div className="flex h-[var(--supporting-pane-header-height,3.5rem)] items-center justify-between gap-3 px-[var(--supporting-pane-header-padding-x,0.75rem)]">
+                  <div className="min-w-0 flex-1">
+                    <div className="text-on-surface text-title-small truncate font-medium">
+                      {title}
+                    </div>
+                    {subtitle ? (
+                      <div className="text-on-surface-variant text-label-small truncate">
+                        {subtitle}
+                      </div>
+                    ) : null}
+                  </div>
+                  <IconButton
+                    onClick={handleClose}
+                    variant="standard"
+                    icon={<Icon symbol="close" />}
+                    aria-label="Close pane"
+                    className={cn(!showCloseButtonOnDesktop && 'expanded:hidden')}
+                  />
+                </div>
+                {headerContent ? (
+                  <div className="px-[var(--supporting-pane-header-padding-x,0.75rem)] pb-3">
+                    {headerContent}
+                  </div>
+                ) : null}
+              </header>
+            )}
+            <div
+              className={cn(
+                'min-h-0 flex-1',
+                supportingScrollable
+                  ? 'overflow-y-auto pt-2 [scrollbar-gutter:stable]'
+                  : 'overflow-hidden',
+              )}
+            >
+              {supporting}
+            </div>
+          </div>
+        ) : (
+          <div className="expanded:flex no-scrollbar hidden h-full flex-col items-center gap-4 overflow-y-auto py-6">
+            <IconButton
+              onClick={handleToggle}
+              variant="standard"
+              className="border-outline-soft bg-surface hover:border-primary group shrink-0 rounded-sm border transition-all"
+              aria-label="Expand pane"
+              icon={<Icon symbol="chevron_left" className="group-hover:text-primary" />}
+            />
+            <div className="bg-outline-subtle min-h-10 w-[calc(var(--unit)/4)] flex-1" />
+            <div className="text-label-small text-on-surface-variant mt-12 mb-6 shrink-0 origin-center rotate-90 font-medium tracking-wide whitespace-nowrap">
+              {title}
+            </div>
+          </div>
+        )}
+      </aside>
+
+      <div
+        className={cn(
+          'expanded:hidden bg-scrim duration-emphasized absolute inset-0 z-30 backdrop-blur-[calc(var(--unit)/4)] transition-opacity',
+          isOpen ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0',
+        )}
+        onClick={handleClose}
+      />
+    </div>
+  );
+};
+
+export interface FeedLayoutProps {
+  children: React.ReactNode;
+  className?: string;
+  isRoot?: boolean;
+}
+
+export const FeedLayout: React.FC<FeedLayoutProps> = ({ children, className, isRoot = false }) => {
+  return (
+    <div
+      className={cn(
+        'bg-surface-container-low expanded:p-6 no-scrollbar h-full w-full overflow-y-auto scroll-smooth p-4',
+        !isRoot && 'border-outline-soft rounded-sm border',
+        className,
+      )}
+    >
+      <div className="max-w-large mx-auto">
+        <div className="expanded:grid-cols-2 large:grid-cols-3 expanded:gap-6 grid grid-cols-1 items-start gap-4">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

package/registry/components/card.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn, focusRing } from '@/lib/utils';
+import { Ripple } from '@/components/ui/ripple';
+
+const cardVariants = cva(
+  'rounded-sm overflow-hidden flex flex-col transition-all duration-medium ease-emphasized relative isolate',
+  {
+    variants: {
+      variant: {
+        elevated: 'bg-surface shadow-1 border border-outline-weak',
+        filled: 'bg-surface-container border-none shadow-0',
+        outlined: 'bg-surface border border-outline-soft shadow-0',
+        low: 'bg-surface-container-low border-none shadow-0',
+        high: 'bg-surface-container-high border-none shadow-1',
+      },
+      interactive: {
+        true: 'group cursor-pointer appearance-none text-left',
+        false: '',
+      },
+      padding: {
+        none: 'p-0',
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8',
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'outlined',
+        interactive: true,
+        className: 'hover:border-primary',
+      },
+    ],
+    defaultVariants: {
+      variant: 'filled',
+      padding: 'none',
+      interactive: false,
+    },
+  },
+);
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof cardVariants> {
+  interactive?: boolean;
+}
+
+const CardRoot = React.forwardRef<HTMLElement, CardProps>(
+  ({ className, variant, padding, interactive, onClick, children, ...props }, ref) => {
+    const hasInteractiveStyles = interactive || !!onClick;
+    const cardClasses = cn(
+      cardVariants({ variant, padding, interactive: hasInteractiveStyles }),
+      onClick && focusRing,
+      className,
+    );
+    const cardContent = (
+      <>
+        {hasInteractiveStyles && (
+          <>
+            <div className="bg-primary pointer-events-none absolute inset-0 z-0 opacity-0 transition-opacity group-hover:opacity-8" />
+            <Ripple />
+          </>
+        )}
+        <div className="pointer-events-none relative z-10 flex h-full flex-col text-left">
+          <div className="pointer-events-auto flex h-full flex-col">{children}</div>
+        </div>
+      </>
+    );
+
+    if (onClick) {
+      return (
+        <button
+          ref={ref as React.Ref<HTMLButtonElement>}
+          type="button"
+          className={cardClasses}
+          onClick={onClick}
+          {...props}
+        >
+          {cardContent}
+        </button>
+      );
+    }
+
+    return (
+      <div ref={ref as React.Ref<HTMLDivElement>} className={cardClasses} {...props}>
+        {cardContent}
+      </div>
+    );
+  },
+);
+CardRoot.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('relative z-10 flex flex-col gap-1 px-6 pt-6 pb-4', className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'text-on-surface-variant text-body-medium relative z-10 px-6 py-4 leading-relaxed font-medium',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('relative z-10 mt-auto flex items-center gap-3 px-6 pt-4 pb-6', className)}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = 'CardFooter';
+
+const CardMedia = React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
+  ({ className, alt, ...props }, ref) => (
+    <img
+      ref={ref}
+      className={cn('relative z-10 w-full object-cover', className)}
+      alt={alt || ''}
+      {...props}
+    />
+  ),
+);
+CardMedia.displayName = 'CardMedia';
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('text-title-large leading-none', className)} {...props} />
+  ),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-body-small text-on-surface-variant', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+export const Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Content: CardContent,
+  Footer: CardFooter,
+  Media: CardMedia,
+  Title: CardTitle,
+  Description: CardDescription,
+});