@unisane/ui 0.1.0-next.b67ebfd0

package/registry/layout/page-section.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface PageSectionProps extends React.HTMLAttributes<HTMLElement> {
+  as?: React.ElementType;
+  rhythm?: 'standard' | 'compact' | 'hero' | 'none';
+  width?: 'standard' | 'wide' | 'none';
+  surface?: 'none' | 'surface' | 'surfaceContainerLow';
+}
+
+const rhythmClasses = {
+  standard: 'py-layout-section-y',
+  compact: 'py-layout-section-y-compact',
+  hero: 'py-layout-hero-y',
+  none: 'py-0',
+} as const;
+
+const widthClasses = {
+  standard: 'mx-auto w-full max-w-7xl px-layout-page-x',
+  wide: 'mx-auto w-full max-w-[112rem] px-layout-page-x',
+  none: 'w-full',
+} as const;
+
+const surfaceClasses = {
+  none: '',
+  surface: 'bg-surface',
+  surfaceContainerLow: 'bg-surface-container-low',
+} as const;
+
+export const PageSection = React.forwardRef<HTMLElement, PageSectionProps>(
+  (
+    {
+      as: Component = 'section',
+      rhythm = 'standard',
+      width = 'standard',
+      surface = 'none',
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn('@container', rhythmClasses[rhythm], surfaceClasses[surface], className)}
+        {...props}
+      >
+        <div className={cn(widthClasses[width])}>{children}</div>
+      </Component>
+    );
+  },
+);
+PageSection.displayName = 'PageSection';

package/registry/layout/pane.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const paneVariants = cva(
+  'relative h-full overflow-hidden transition-all duration-long ease-emphasized bg-surface',
+  {
+    variants: {
+      kind: {
+        list: 'border-r border-outline-weak z-0',
+        main: 'flex-1 z-0',
+        supporting: 'border-l border-outline-weak z-10 bg-surface-container-low',
+      },
+      isActive: {
+        true: 'block',
+        false: 'hidden medium:block',
+      },
+    },
+    defaultVariants: {
+      kind: 'main',
+      isActive: true,
+    },
+  },
+);
+
+export interface PaneProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof paneVariants> {
+  width?: string | number;
+  showScrollbar?: boolean;
+  scrollable?: boolean;
+}
+
+export const Pane = React.forwardRef<HTMLDivElement, PaneProps>(
+  (
+    {
+      className,
+      kind = 'main',
+      isActive,
+      width,
+      style,
+      children,
+      showScrollbar,
+      scrollable,
+      ...props
+    },
+    ref,
+  ) => {
+    let widthClass = '';
+    if (!width) {
+      if (kind === 'list')
+        widthClass = 'w-full medium:w-(--width-pane-list,var(--spacing-90)) shrink-0';
+      if (kind === 'supporting')
+        widthClass = 'w-full medium:w-(--width-pane-supporting,var(--spacing-100)) shrink-0';
+      if (kind === 'main') widthClass = 'w-full flex-1 min-w-0';
+    }
+
+    const shouldScroll = scrollable ?? true;
+    const shouldShowScrollbar = shouldScroll ? (showScrollbar ?? kind === 'main') : false;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(paneVariants({ kind, isActive }), widthClass, className)}
+        data-pane={kind}
+        style={{
+          ...style,
+          ...(width ? { width } : {}),
+        }}
+        {...props}
+      >
+        {shouldScroll ? (
+          <div
+            className={cn(
+              'h-full overflow-y-auto',
+              shouldShowScrollbar ? '[scrollbar-gutter:stable]' : 'no-scrollbar',
+            )}
+          >
+            {children}
+          </div>
+        ) : (
+          <div className="h-full overflow-hidden">{children}</div>
+        )}
+      </div>
+    );
+  },
+);
+Pane.displayName = 'Pane';
+
+export type PaneDividerProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const PaneDivider: React.FC<PaneDividerProps> = ({ className, ...props }) => {
+  return (
+    <div
+      className={cn(
+        'bg-outline-muted hover:bg-outline-strong medium:block z-20 hidden h-full w-px cursor-col-resize transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export interface PaneLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const PaneLayout = React.forwardRef<HTMLDivElement, PaneLayoutProps>(
+  ({ className, orientation = 'horizontal', children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative isolate flex h-full w-full overflow-hidden',
+          orientation === 'vertical' ? 'flex-col' : 'flex-row',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+PaneLayout.displayName = 'PaneLayout';

package/registry/layout/preview-frame.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface PreviewFrameProps extends React.HTMLAttributes<HTMLDivElement> {
+  aspectRatio?: 'auto' | 'video' | 'document' | 'square';
+  tone?: 'plain' | 'surface' | 'muted';
+  overflow?: 'hidden' | 'visible';
+}
+
+const aspectRatioClasses = {
+  auto: '',
+  video: 'aspect-video',
+  document: 'aspect-[3/4]',
+  square: 'aspect-square',
+} as const;
+
+const toneClasses = {
+  plain: '',
+  surface: 'bg-surface',
+  muted: 'bg-surface-container-low',
+} as const;
+
+const overflowClasses = {
+  hidden: 'overflow-hidden',
+  visible: 'overflow-visible',
+} as const;
+
+export const PreviewFrame = React.forwardRef<HTMLDivElement, PreviewFrameProps>(
+  (
+    { aspectRatio = 'auto', tone = 'muted', overflow = 'hidden', className, children, ...props },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'border-outline-soft relative min-w-0 rounded-sm border',
+          aspectRatioClasses[aspectRatio],
+          toneClasses[tone],
+          overflowClasses[overflow],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+PreviewFrame.displayName = 'PreviewFrame';

package/registry/layout/window-size-provider.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type WindowSizeClass = 'compact' | 'medium' | 'expanded' | 'large' | 'extra-large';
+
+interface WindowSizeContextType {
+  sizeClass: WindowSizeClass;
+  width: number;
+}
+
+const WindowSizeContext = createContext<WindowSizeContextType | undefined>(undefined);
+
+export function useWindowSize() {
+  const context = useContext(WindowSizeContext);
+  if (!context) {
+    throw new Error('useWindowSize must be used within a WindowSizeProvider');
+  }
+  return context;
+}
+
+function getWindowSizeClass(width: number): WindowSizeClass {
+  if (width < 600) return 'compact';
+  if (width < 840) return 'medium';
+  if (width < 1200) return 'expanded';
+  if (width < 1600) return 'large';
+  return 'extra-large';
+}
+
+interface WindowSizeProviderProps {
+  children: React.ReactNode;
+}
+
+export function WindowSizeProvider({ children }: WindowSizeProviderProps) {
+  const [sizeClass, setSizeClass] = useState<WindowSizeClass>(() =>
+    typeof window !== 'undefined' ? getWindowSizeClass(window.innerWidth) : 'compact',
+  );
+  const [width, setWidth] = useState<number>(typeof window !== 'undefined' ? window.innerWidth : 0);
+
+  useEffect(() => {
+    function handleResize() {
+      const newWidth = window.innerWidth;
+      setWidth(newWidth);
+      const sc = getWindowSizeClass(newWidth);
+      setSizeClass(sc);
+
+      document.documentElement.setAttribute('data-wsc', sc);
+    }
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <WindowSizeContext.Provider value={{ sizeClass, width }}>{children}</WindowSizeContext.Provider>
+  );
+}

package/registry/lib/action-control.tsx

@@ -0,0 +1,68 @@
+import { type MouseEvent } from 'react';
+import { cn, composeAsChildClickHandler, focusRing } from '@/lib/utils';
+
+export const actionInteractiveClass = cn(
+  'group overflow-hidden select-none active:scale-[0.98] motion-reduce:active:scale-100 disabled:cursor-not-allowed disabled:opacity-38 data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-38',
+  focusRing,
+);
+
+export function getActionDisabledState(disabled: boolean, loading: boolean) {
+  return disabled || loading;
+}
+
+export function getActionStateAttributes(isDisabled: boolean, loading: boolean) {
+  return {
+    'aria-busy': loading || undefined,
+    'data-disabled': isDisabled ? 'true' : undefined,
+  };
+}
+
+export function getActionAsChildAttributes(
+  isDisabled: boolean,
+  loading: boolean,
+  props: Record<string, unknown> & {
+    onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+    tabIndex?: number | undefined;
+  },
+  childProps: {
+    onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+    tabIndex?: number | undefined;
+  },
+) {
+  return {
+    ...getActionStateAttributes(isDisabled, loading),
+    'aria-disabled': isDisabled || undefined,
+    ...props,
+    onClick: composeAsChildClickHandler(isDisabled, props.onClick, childProps.onClick),
+    tabIndex: isDisabled ? -1 : (childProps.tabIndex ?? props.tabIndex),
+  };
+}
+
+export function ActionStateLayer({ className }: { className?: string }) {
+  return (
+    <span
+      className={cn(
+        'group-hover:opacity-hover group-focus-visible:opacity-focus group-active:opacity-pressed pointer-events-none absolute inset-0 bg-current opacity-0 transition-opacity',
+        className,
+      )}
+    />
+  );
+}
+
+export function ActionSpinner({ className }: { className?: string }) {
+  return (
+    <svg
+      className={cn('animate-spin', className)}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}

package/registry/lib/action-size.ts

@@ -0,0 +1,67 @@
+export const actionFrameHeightClasses = {
+  sm: 'h-[var(--size-action-sm)]',
+  md: 'h-[var(--size-action-md)]',
+  lg: 'h-[var(--size-action-lg)]',
+} as const;
+
+export const actionFramePaddingXClasses = {
+  sm: 'px-[var(--space-action-padding-x-sm)]',
+  md: 'px-[var(--space-action-padding-x-md)]',
+  lg: 'px-[var(--space-action-padding-x-lg)]',
+} as const;
+
+export const actionFrameSizeClasses = {
+  sm: `${actionFrameHeightClasses.sm} ${actionFramePaddingXClasses.sm}`,
+  md: `${actionFrameHeightClasses.md} ${actionFramePaddingXClasses.md}`,
+  lg: `${actionFrameHeightClasses.lg} ${actionFramePaddingXClasses.lg}`,
+} as const;
+
+export const actionButtonSizeClasses = {
+  sm: `${actionFrameSizeClasses.sm} text-label-medium`,
+  md: `${actionFrameSizeClasses.md} text-label-large`,
+  lg: `${actionFrameSizeClasses.lg} text-label-large`,
+} as const;
+
+export const iconButtonSizeClasses = {
+  sm: 'h-[var(--size-icon-button-sm)] w-[var(--size-icon-button-sm)]',
+  md: 'h-[var(--size-icon-button-md)] w-[var(--size-icon-button-md)]',
+  lg: 'h-[var(--size-icon-button-lg)] w-[var(--size-icon-button-lg)]',
+} as const;
+
+export type IconFrameSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export function getIconFrameSizeClass(size: IconFrameSize): string {
+  if (typeof size === 'number') {
+    if (size <= 16) return 'size-icon-xs';
+    if (size <= 20) return 'size-icon-sm';
+    if (size <= 24) return 'size-icon-md';
+    if (size <= 32) return 'size-icon-lg';
+    return 'size-icon-xl';
+  }
+
+  return {
+    xs: 'size-icon-xs',
+    sm: 'size-icon-sm',
+    md: 'size-icon-md',
+    lg: 'size-icon-lg',
+    xl: 'size-icon-xl',
+  }[size];
+}
+
+export const fabSizeClasses = {
+  sm: 'h-[var(--size-fab-sm)] w-[var(--size-fab-sm)]',
+  md: 'h-[var(--size-fab-md)] w-[var(--size-fab-md)]',
+  lg: 'h-[var(--size-fab-lg)] w-[var(--size-fab-lg)]',
+  extended:
+    'h-[var(--size-fab-md)] min-w-[var(--size-fab-extended-min)] w-auto px-[var(--space-fab-extended-x)]',
+} as const;
+
+export const avatarSizeClasses = {
+  sm: 'h-[var(--size-avatar-sm)] w-[var(--size-avatar-sm)] text-label-small',
+  md: 'h-[var(--size-avatar-md)] w-[var(--size-avatar-md)] text-body-small',
+  lg: 'h-[var(--size-avatar-lg)] w-[var(--size-avatar-lg)] text-body-medium',
+  xl: 'h-[var(--size-avatar-xl)] w-[var(--size-avatar-xl)] text-body-large',
+} as const;
+
+export const paginationButtonClass =
+  'relative h-[var(--size-pagination-button)] w-[var(--size-pagination-button)] rounded-button flex items-center justify-center overflow-hidden transition-colors';

package/registry/lib/field-shell.ts

@@ -0,0 +1,115 @@
+'use client';
+
+import { cva } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { getFieldSizeStyles, type FieldSize } from '@/lib/field-size';
+
+export type FieldShellVariant = 'outlined' | 'filled';
+
+export const fieldContainerVariants = cva(
+  'relative flex w-full transition-all duration-snappy ease-emphasized group cursor-text',
+  {
+    variants: {
+      variant: {
+        outlined:
+          'rounded-sm border border-control-outline bg-surface hover:border-outline-medium focus-within:border-primary! focus-within:ring-1 focus-within:ring-focus-ring',
+        filled:
+          'rounded-t-sm rounded-b-none border-b border-outline-subtle bg-surface-container-low hover:bg-surface-container focus-within:bg-surface',
+      },
+      error: {
+        true: 'border-error focus-within:border-error hover:border-error ring-focus-ring-error',
+      },
+      disabled: {
+        true: 'opacity-38 cursor-not-allowed pointer-events-none',
+      },
+    },
+    defaultVariants: {
+      variant: 'outlined',
+      error: false,
+    },
+  },
+);
+
+type FieldLabelClassOptions = {
+  size?: FieldSize;
+  variant?: FieldShellVariant;
+  floating: boolean;
+  error?: boolean;
+  active?: boolean;
+  multiline?: boolean;
+  labelBg?: string;
+  labelClassName?: string;
+  floatingClassName?: string;
+  restingTextClassName?: string;
+};
+
+export function getFieldLabelClasses({
+  size = 'md',
+  variant = 'outlined',
+  floating,
+  error = false,
+  active = false,
+  multiline = false,
+  labelBg,
+  labelClassName,
+  floatingClassName,
+  restingTextClassName,
+}: FieldLabelClassOptions) {
+  const fieldSize = getFieldSizeStyles(size);
+
+  return cn(
+    'absolute pointer-events-none truncate max-w-[calc(100%-calc(var(--unit)*4))] transition-all duration-medium ease-emphasized origin-left',
+    fieldSize.labelLeft,
+    !floating && [
+      restingTextClassName ?? fieldSize.valueText,
+      'text-on-surface-variant',
+      multiline ? fieldSize.multilineLabelTop : 'top-1/2 -translate-y-1/2',
+    ],
+    floating && [
+      'text-label-small font-medium',
+      variant === 'outlined' && [
+        'top-0 -translate-y-1/2 px-1 -ml-1',
+        labelBg || 'bg-surface',
+        labelClassName,
+      ],
+      variant === 'filled' && [fieldSize.filledFloatingLabel, floatingClassName],
+      error ? 'text-error' : active ? 'text-primary' : 'text-on-surface-variant',
+    ],
+  );
+}
+
+type FieldAffixClassOptions = {
+  size?: FieldSize;
+  error?: boolean;
+  active?: boolean;
+  multiline?: boolean;
+  side: 'leading' | 'trailing';
+};
+
+export function getFieldAffixClasses({
+  size = 'md',
+  error = false,
+  active = false,
+  multiline = false,
+  side,
+}: FieldAffixClassOptions) {
+  const fieldSize = getFieldSizeStyles(size);
+
+  return cn(
+    'transition-colors shrink-0 flex items-center justify-center',
+    side === 'leading' ? fieldSize.leadingPadding : fieldSize.trailingPadding,
+    multiline ? fieldSize.multilineIconOffset : 'h-full',
+    error ? 'text-error' : active ? 'text-primary' : 'text-on-surface-variant',
+  );
+}
+
+export function getFieldHelperTextClasses(size: FieldSize = 'md', error = false) {
+  const fieldSize = getFieldSizeStyles(size);
+
+  return cn(
+    'text-label-small font-medium',
+    fieldSize.helperMarginTop,
+    fieldSize.helperPaddingX,
+    error ? 'text-error' : 'text-on-surface-variant',
+  );
+}