@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/command.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { cn } from '@/lib/utils';
+import { actionFrameSizeClasses } from '@/lib/action-size';
+import { Icon } from '@/components/ui/icon';
+import { Dialog } from '@/components/ui/dialog';
+
+const Command = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'bg-surface-container text-on-surface flex h-full w-full flex-col overflow-hidden rounded-sm',
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+export interface CommandDialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  'aria-label'?: string;
+  children?: React.ReactNode;
+}
+
+const CommandDialog = ({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  'aria-label': ariaLabel = 'Command menu',
+}: CommandDialogProps) => {
+  return (
+    <Dialog
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+      aria-label={ariaLabel}
+      className="shadow-3 overflow-hidden p-0"
+    >
+      <Command className="[&_[cmdk-group-heading]]:text-on-surface-variant [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5">
+        {children}
+      </Command>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div
+    className={cn('border-outline-soft flex items-center border-b', actionFrameSizeClasses.md)}
+    data-cmdk-input-wrapper=""
+  >
+    <Icon symbol="search" size="sm" className="mr-2 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'text-body-medium placeholder:text-on-surface-variant flex h-full w-full bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-38',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn(
+      'max-h-[var(--layout-command-list-max-height)] overflow-x-hidden overflow-y-auto',
+      className,
+    )}
+    {...props}
+  />
+));
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="text-body-medium text-on-surface-variant py-6 text-center"
+    {...props}
+  />
+));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'text-on-surface [&_[cmdk-group-heading]]:text-label-small [&_[cmdk-group-heading]]:text-on-surface-variant overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium',
+      className,
+    )}
+    {...props}
+  />
+));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('bg-outline-soft -mx-1 h-px', className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      `text-body-medium data-[selected=true]:bg-state-hover data-[selected=true]:text-on-surface rounded-button relative flex cursor-default items-center outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-38 ${actionFrameSizeClasses.md}`,
+      className,
+    )}
+    {...props}
+  />
+));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('text-label-small text-on-surface-variant ml-auto tracking-widest', className)}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

package/registry/components/confirm-dialog.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import React, { forwardRef, useState } from 'react';
+import { Dialog, type DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Icon } from '@/components/ui/icon';
+import { useControllableState } from '@/lib/use-controllable-state';
+
+export interface ConfirmDialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title: DialogTitle;
+  description?: React.ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  tone?: 'neutral' | 'danger' | 'warning';
+  onConfirm: () => boolean | void | Promise<boolean | void>;
+  onConfirmError?: (error: unknown) => void;
+  onCancel?: () => void;
+  loading?: boolean;
+  confirmDisabled?: boolean;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const toneConfig = {
+  neutral: {
+    icon: 'help',
+    iconClass: 'text-primary',
+    confirmClass: '',
+  },
+  danger: {
+    icon: 'warning',
+    iconClass: 'text-error',
+    confirmClass: 'bg-error text-on-error',
+  },
+  warning: {
+    icon: 'warning',
+    iconClass: 'text-warning',
+    confirmClass: 'bg-warning text-on-warning',
+  },
+} as const;
+
+export const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(
+  (
+    {
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      title,
+      description,
+      confirmLabel = 'Confirm',
+      cancelLabel = 'Cancel',
+      tone = 'neutral',
+      onConfirm,
+      onConfirmError,
+      onCancel,
+      loading = false,
+      confirmDisabled = false,
+      icon,
+      children,
+      className,
+    },
+    ref,
+  ) => {
+    const config = toneConfig[tone];
+    const [isConfirming, setIsConfirming] = useState(false);
+    const [isOpen = false, setIsOpen] = useControllableState<boolean>({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const isLoading = loading || isConfirming;
+
+    const handleCancel = () => {
+      if (isLoading) return;
+      try {
+        onCancel?.();
+      } finally {
+        setIsOpen(false);
+      }
+    };
+
+    const handleOpenChange = (nextOpen: boolean) => {
+      if (nextOpen) {
+        setIsOpen(true);
+        return;
+      }
+      handleCancel();
+    };
+
+    const handleConfirm = async () => {
+      if (isLoading || confirmDisabled) return;
+
+      setIsConfirming(true);
+      try {
+        const result = await onConfirm();
+        if (result !== false) {
+          setIsOpen(false);
+        }
+      } catch (error) {
+        onConfirmError?.(error);
+      } finally {
+        setIsConfirming(false);
+      }
+    };
+
+    const dialogIcon = icon ?? <Icon symbol={config.icon} size="md" className={config.iconClass} />;
+
+    return (
+      <Dialog
+        ref={ref}
+        open={isOpen}
+        onOpenChange={handleOpenChange}
+        title={title}
+        description={description}
+        icon={dialogIcon}
+        className={className}
+        role="alertdialog"
+        showCloseButton={false}
+        actions={
+          <>
+            <Button variant="text" onClick={handleCancel} disabled={isLoading}>
+              {cancelLabel}
+            </Button>
+            <Button
+              variant="filled"
+              onClick={() => void handleConfirm()}
+              loading={isLoading}
+              disabled={confirmDisabled || isLoading}
+              className={config.confirmClass}
+            >
+              {confirmLabel}
+            </Button>
+          </>
+        }
+      >
+        {children}
+      </Dialog>
+    );
+  },
+);
+
+ConfirmDialog.displayName = 'ConfirmDialog';