feat: add design system platform
This commit is contained in:
donghyeon-ka
@@ -0,0 +1,47 @@
|
||||
import type { ComponentType, SVGProps } from "react";
|
||||
|
||||
import {
|
||||
CloseGlyph,
|
||||
ErrorGlyph,
|
||||
InfoGlyph,
|
||||
MenuGlyph,
|
||||
NextGlyph,
|
||||
PreviousGlyph,
|
||||
SearchGlyph,
|
||||
SuccessGlyph,
|
||||
WarningGlyph,
|
||||
} from "./vendors/lucide.js";
|
||||
|
||||
export type SemanticIconProps = Readonly<{
|
||||
label?: string;
|
||||
size?: "small" | "medium" | "large";
|
||||
}>;
|
||||
|
||||
function createSemanticIcon(
|
||||
Glyph: ComponentType<SVGProps<SVGSVGElement>>,
|
||||
) {
|
||||
return function SemanticIcon({
|
||||
label,
|
||||
size = "medium",
|
||||
}: SemanticIconProps) {
|
||||
return (
|
||||
<Glyph
|
||||
aria-hidden={label ? undefined : "true"}
|
||||
aria-label={label}
|
||||
className={`ui-icon ui-icon--${size}`}
|
||||
focusable="false"
|
||||
role={label ? "img" : undefined}
|
||||
/>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export const MenuIcon = createSemanticIcon(MenuGlyph);
|
||||
export const CloseIcon = createSemanticIcon(CloseGlyph);
|
||||
export const WarningIcon = createSemanticIcon(WarningGlyph);
|
||||
export const SuccessIcon = createSemanticIcon(SuccessGlyph);
|
||||
export const ErrorIcon = createSemanticIcon(ErrorGlyph);
|
||||
export const InfoIcon = createSemanticIcon(InfoGlyph);
|
||||
export const SearchIcon = createSemanticIcon(SearchGlyph);
|
||||
export const PreviousIcon = createSemanticIcon(PreviousGlyph);
|
||||
export const NextIcon = createSemanticIcon(NextGlyph);
|
||||
@@ -0,0 +1,21 @@
|
||||
import {
|
||||
AlertTriangle,
|
||||
Check,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
CircleX,
|
||||
Info,
|
||||
Menu,
|
||||
Search,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
|
||||
export const MenuGlyph = Menu;
|
||||
export const CloseGlyph = X;
|
||||
export const WarningGlyph = AlertTriangle;
|
||||
export const SuccessGlyph = Check;
|
||||
export const ErrorGlyph = CircleX;
|
||||
export const InfoGlyph = Info;
|
||||
export const SearchGlyph = Search;
|
||||
export const PreviousGlyph = ChevronLeft;
|
||||
export const NextGlyph = ChevronRight;
|
||||
@@ -0,0 +1,146 @@
|
||||
export {
|
||||
Alert,
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Dialog,
|
||||
Field,
|
||||
FocusRing,
|
||||
IconButton,
|
||||
LinkButton,
|
||||
Portal,
|
||||
Spinner,
|
||||
TextField,
|
||||
VisuallyHidden,
|
||||
} from "./primitives/core.js";
|
||||
export type {
|
||||
AlertProps,
|
||||
BadgeProps,
|
||||
ButtonProps,
|
||||
ButtonSize,
|
||||
ButtonVariant,
|
||||
CardProps,
|
||||
DialogProps,
|
||||
IconButtonProps,
|
||||
LinkButtonProps,
|
||||
SpinnerProps,
|
||||
TextFieldProps,
|
||||
} from "./primitives/core.js";
|
||||
export {
|
||||
Checkbox,
|
||||
RadioGroup,
|
||||
SearchField,
|
||||
Select,
|
||||
Switch,
|
||||
TextArea,
|
||||
} from "./primitives/forms.js";
|
||||
export type {
|
||||
CheckboxProps,
|
||||
RadioGroupProps,
|
||||
RadioOption,
|
||||
SearchFieldProps,
|
||||
SelectOption,
|
||||
SelectProps,
|
||||
SwitchProps,
|
||||
TextAreaProps,
|
||||
} from "./primitives/forms.js";
|
||||
export {
|
||||
ProgressBar,
|
||||
Separator,
|
||||
Skeleton,
|
||||
} from "./primitives/feedback.js";
|
||||
export type {
|
||||
ProgressBarProps,
|
||||
SkeletonProps,
|
||||
} from "./primitives/feedback.js";
|
||||
export {
|
||||
ConfirmationDialog,
|
||||
Drawer,
|
||||
Menu,
|
||||
Popover,
|
||||
ToastProvider,
|
||||
Tooltip,
|
||||
useToast,
|
||||
} from "./primitives/overlays.js";
|
||||
export type {
|
||||
DrawerProps,
|
||||
MenuItemDefinition,
|
||||
MenuProps,
|
||||
PopoverProps,
|
||||
TooltipProps,
|
||||
} from "./primitives/overlays.js";
|
||||
export {
|
||||
Breadcrumbs,
|
||||
Pagination,
|
||||
Tabs,
|
||||
} from "./primitives/navigation.js";
|
||||
export type {
|
||||
BreadcrumbItem,
|
||||
TabDefinition,
|
||||
} from "./primitives/navigation.js";
|
||||
export {
|
||||
CloseIcon,
|
||||
ErrorIcon,
|
||||
InfoIcon,
|
||||
MenuIcon,
|
||||
NextIcon,
|
||||
PreviousIcon,
|
||||
SearchIcon,
|
||||
SuccessIcon,
|
||||
WarningIcon,
|
||||
} from "./icons/semantic-icons.js";
|
||||
export type {
|
||||
SemanticIconProps,
|
||||
} from "./icons/semantic-icons.js";
|
||||
export {
|
||||
DESIGN_TOKEN_CONTRACT,
|
||||
REQUIRED_COMPONENT_TOKENS,
|
||||
REQUIRED_PRIMITIVE_TOKENS,
|
||||
REQUIRED_SEMANTIC_TOKENS,
|
||||
} from "./tokens/token-contract.js";
|
||||
export {
|
||||
AccessSurface,
|
||||
DataTable,
|
||||
DisclosureGroup,
|
||||
PaginationBar,
|
||||
SearchFilterToolbar,
|
||||
} from "./patterns/common-patterns.js";
|
||||
export type {
|
||||
AccessSurfaceProps,
|
||||
DataTableColumn,
|
||||
DisclosureDefinition,
|
||||
} from "./patterns/common-patterns.js";
|
||||
|
||||
export {
|
||||
AsyncSurface,
|
||||
EmptySurface,
|
||||
LoadingSurface,
|
||||
TerminalErrorSurface,
|
||||
} from "../components/async-surface.jsx";
|
||||
export { PageHeader } from "../components/page-header.jsx";
|
||||
export {
|
||||
AuthRequiredSurface,
|
||||
ForbiddenSurface,
|
||||
NotFoundSurface,
|
||||
} from "../components/state-surfaces.jsx";
|
||||
export {
|
||||
DetailPage,
|
||||
CollectionPage,
|
||||
FormPage,
|
||||
StandardPage,
|
||||
StatusPage,
|
||||
} from "../templates/index.js";
|
||||
export {
|
||||
DirtyNavigationDialog,
|
||||
ErrorSummary,
|
||||
Form,
|
||||
FormActions,
|
||||
FormField,
|
||||
useAppForm,
|
||||
useDirtyNavigationGuard,
|
||||
} from "../forms/index.js";
|
||||
export type {
|
||||
PageActionDefinition,
|
||||
PageHeading,
|
||||
} from "../templates/page-templates.js";
|
||||
export type { FormResult } from "../forms/form-contracts.js";
|
||||
@@ -0,0 +1,139 @@
|
||||
import { useId } from "react";
|
||||
|
||||
import {
|
||||
AuthRequiredSurface,
|
||||
ForbiddenSurface,
|
||||
NotFoundSurface,
|
||||
} from "../../components/state-surfaces.jsx";
|
||||
import { Button } from "../primitives/core.js";
|
||||
import { Pagination } from "../primitives/navigation.js";
|
||||
|
||||
export type DataTableColumn<Row> = Readonly<{
|
||||
id: string;
|
||||
header: string;
|
||||
cell(row: Row): React.ReactNode;
|
||||
}>;
|
||||
|
||||
export function DataTable<Row>({
|
||||
caption,
|
||||
columns,
|
||||
rows,
|
||||
rowKey,
|
||||
empty,
|
||||
}: Readonly<{
|
||||
caption: string;
|
||||
columns: readonly DataTableColumn<Row>[];
|
||||
rows: readonly Row[];
|
||||
rowKey(row: Row): string;
|
||||
empty: React.ReactNode;
|
||||
}>) {
|
||||
if (rows.length === 0) return <>{empty}</>;
|
||||
return (
|
||||
<div className="ui-data-table__scroll" tabIndex={0}>
|
||||
<table className="ui-data-table">
|
||||
<caption>{caption}</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
{columns.map((column) => (
|
||||
<th key={column.id} scope="col">
|
||||
{column.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row) => (
|
||||
<tr key={rowKey(row)}>
|
||||
{columns.map((column) => (
|
||||
<td key={column.id}>{column.cell(row)}</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SearchFilterToolbar({
|
||||
label,
|
||||
search,
|
||||
filters,
|
||||
resetLabel,
|
||||
onReset,
|
||||
resultCount,
|
||||
}: Readonly<{
|
||||
label: string;
|
||||
search: React.ReactNode;
|
||||
filters?: React.ReactNode;
|
||||
resetLabel: string;
|
||||
onReset(): void;
|
||||
resultCount: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<section aria-label={label} className="ui-search-filter-toolbar">
|
||||
<div>{search}</div>
|
||||
{filters ? <div>{filters}</div> : null}
|
||||
<Button onClick={onReset} variant="ghost">
|
||||
{resetLabel}
|
||||
</Button>
|
||||
<output>{resultCount}</output>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function PaginationBar({
|
||||
range,
|
||||
...pagination
|
||||
}: React.ComponentProps<typeof Pagination> & Readonly<{ range: string }>) {
|
||||
return (
|
||||
<div className="ui-pagination-bar">
|
||||
<p>{range}</p>
|
||||
<Pagination {...pagination} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type DisclosureDefinition = Readonly<{
|
||||
id: string;
|
||||
title: string;
|
||||
content: React.ReactNode;
|
||||
}>;
|
||||
|
||||
export function DisclosureGroup({
|
||||
label,
|
||||
items,
|
||||
}: Readonly<{
|
||||
label: string;
|
||||
items: readonly DisclosureDefinition[];
|
||||
}>) {
|
||||
const groupId = useId();
|
||||
return (
|
||||
<section aria-labelledby={groupId} className="ui-disclosure-group">
|
||||
<h2 className="visually-hidden" id={groupId}>
|
||||
{label}
|
||||
</h2>
|
||||
{items.map((item) => (
|
||||
<details key={item.id}>
|
||||
<summary>{item.title}</summary>
|
||||
<div>{item.content}</div>
|
||||
</details>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export type AccessSurfaceProps =
|
||||
| Readonly<{ kind: "auth-required"; onAction(): void }>
|
||||
| Readonly<{ kind: "forbidden"; onAction(): void }>
|
||||
| Readonly<{ kind: "not-found"; onAction(): void }>;
|
||||
|
||||
export function AccessSurface(props: AccessSurfaceProps) {
|
||||
if (props.kind === "auth-required") {
|
||||
return <AuthRequiredSurface onSignIn={props.onAction} />;
|
||||
}
|
||||
if (props.kind === "forbidden") {
|
||||
return <ForbiddenSurface onNavigate={props.onAction} />;
|
||||
}
|
||||
return <NotFoundSurface onNavigate={props.onAction} />;
|
||||
}
|
||||
@@ -0,0 +1,446 @@
|
||||
import {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useId,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
} from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
import { CloseIcon } from "../icons/semantic-icons.js";
|
||||
|
||||
export type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
|
||||
export type ButtonSize = "default" | "compact";
|
||||
|
||||
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
|
||||
Readonly<{
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
pending?: boolean;
|
||||
pendingLabel?: string;
|
||||
}>;
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
function Button(
|
||||
{
|
||||
variant = "primary",
|
||||
size = "default",
|
||||
pending = false,
|
||||
pendingLabel,
|
||||
className = "",
|
||||
type = "button",
|
||||
children,
|
||||
disabled,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
const classes = [
|
||||
"ui-button",
|
||||
`ui-button--${variant}`,
|
||||
size === "compact" ? "ui-button--compact" : "",
|
||||
pending ? "ui-button--pending" : "",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
<button
|
||||
{...props}
|
||||
aria-busy={pending || undefined}
|
||||
className={classes}
|
||||
disabled={disabled}
|
||||
ref={ref}
|
||||
type={type}
|
||||
>
|
||||
{pending ? (
|
||||
<>
|
||||
<Spinner decorative />
|
||||
{pendingLabel ?? children}
|
||||
</>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export type LinkButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
|
||||
Readonly<{
|
||||
href: string;
|
||||
variant?: ButtonVariant;
|
||||
size?: ButtonSize;
|
||||
}>;
|
||||
|
||||
export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
|
||||
function LinkButton(
|
||||
{
|
||||
href,
|
||||
variant = "primary",
|
||||
size = "default",
|
||||
className = "",
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<a
|
||||
{...props}
|
||||
className={[
|
||||
"ui-button",
|
||||
`ui-button--${variant}`,
|
||||
size === "compact" ? "ui-button--compact" : "",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
href={href}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export type IconButtonProps = Omit<ButtonProps, "aria-label" | "children"> &
|
||||
Readonly<{
|
||||
accessibleName: string;
|
||||
children: React.ReactElement;
|
||||
}>;
|
||||
|
||||
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
|
||||
function IconButton({ accessibleName, className = "", ...props }, ref) {
|
||||
return (
|
||||
<Button
|
||||
{...props}
|
||||
aria-label={accessibleName}
|
||||
className={`ui-icon-button ${className}`.trim()}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
type FieldFrameProps = Readonly<{
|
||||
id?: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
error?: string;
|
||||
required?: boolean;
|
||||
className?: string;
|
||||
children(
|
||||
contract: Readonly<{
|
||||
controlId: string;
|
||||
describedBy: string | undefined;
|
||||
invalid: boolean;
|
||||
}>,
|
||||
): React.ReactNode;
|
||||
}>;
|
||||
|
||||
export function Field({
|
||||
id,
|
||||
label,
|
||||
description,
|
||||
error,
|
||||
required,
|
||||
className = "",
|
||||
children,
|
||||
}: FieldFrameProps) {
|
||||
const generatedId = useId();
|
||||
const controlId = id ?? `field-${generatedId}`;
|
||||
const descriptionId = description ? `${controlId}-description` : undefined;
|
||||
const errorId = error ? `${controlId}-error` : undefined;
|
||||
const describedBy = [descriptionId, errorId].filter(Boolean).join(" ");
|
||||
|
||||
return (
|
||||
<div className={`ui-field ${className}`.trim()}>
|
||||
<label className="ui-field__label" htmlFor={controlId}>
|
||||
{label}
|
||||
{required ? <span aria-hidden="true"> *</span> : null}
|
||||
</label>
|
||||
{description ? (
|
||||
<p className="ui-field__description" id={descriptionId}>
|
||||
{description}
|
||||
</p>
|
||||
) : null}
|
||||
{children({
|
||||
controlId,
|
||||
describedBy: describedBy || undefined,
|
||||
invalid: Boolean(error),
|
||||
})}
|
||||
{error ? (
|
||||
<p className="ui-field__error" id={errorId}>
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type TextFieldProps = Omit<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
"id"
|
||||
> &
|
||||
Readonly<{
|
||||
id?: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
error?: string;
|
||||
}>;
|
||||
|
||||
export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
|
||||
function TextField(
|
||||
{
|
||||
id,
|
||||
label,
|
||||
description,
|
||||
error,
|
||||
className = "",
|
||||
required,
|
||||
...inputProps
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<Field
|
||||
className={className}
|
||||
description={description}
|
||||
error={error}
|
||||
id={id}
|
||||
label={label}
|
||||
required={required}
|
||||
>
|
||||
{({ controlId, describedBy, invalid }) => (
|
||||
<input
|
||||
{...inputProps}
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid || undefined}
|
||||
className="ui-field__input"
|
||||
id={controlId}
|
||||
ref={ref}
|
||||
required={required}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export type CardProps = Readonly<{
|
||||
title: string;
|
||||
headingLevel?: 2 | 3 | 4;
|
||||
description?: string;
|
||||
children?: React.ReactNode;
|
||||
footer?: React.ReactNode;
|
||||
className?: string;
|
||||
}>;
|
||||
|
||||
export function Card({
|
||||
title,
|
||||
headingLevel = 3,
|
||||
description,
|
||||
children,
|
||||
footer,
|
||||
className = "",
|
||||
}: CardProps) {
|
||||
const titleId = useId();
|
||||
const Heading = `h${headingLevel}` as "h2" | "h3" | "h4";
|
||||
|
||||
return (
|
||||
<article
|
||||
aria-labelledby={titleId}
|
||||
className={`ui-card ${className}`.trim()}
|
||||
>
|
||||
<div className="ui-card__header">
|
||||
<Heading id={titleId}>{title}</Heading>
|
||||
{description ? <p>{description}</p> : null}
|
||||
</div>
|
||||
{children ? <div className="ui-card__content">{children}</div> : null}
|
||||
{footer ? <footer className="ui-card__footer">{footer}</footer> : null}
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
export type AlertProps = Readonly<{
|
||||
title: string;
|
||||
children?: React.ReactNode;
|
||||
variant?: "info" | "success" | "warning" | "danger";
|
||||
dismissLabel?: string;
|
||||
onDismiss?: () => void;
|
||||
}>;
|
||||
|
||||
export function Alert({
|
||||
title,
|
||||
children,
|
||||
variant = "info",
|
||||
dismissLabel,
|
||||
onDismiss,
|
||||
}: AlertProps) {
|
||||
return (
|
||||
<section
|
||||
className={`ui-alert ui-alert--${variant}`}
|
||||
role={variant === "danger" ? "alert" : "status"}
|
||||
>
|
||||
<div>
|
||||
<strong>{title}</strong>
|
||||
{children ? <div className="ui-alert__content">{children}</div> : null}
|
||||
</div>
|
||||
{onDismiss ? (
|
||||
<IconButton
|
||||
accessibleName={dismissLabel ?? `${title} 알림 닫기`}
|
||||
className="ui-alert__dismiss"
|
||||
onClick={onDismiss}
|
||||
variant="ghost"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export type BadgeProps = Readonly<{
|
||||
children: React.ReactNode;
|
||||
variant?: "neutral" | "info" | "success" | "warning" | "danger";
|
||||
}>;
|
||||
|
||||
export function Badge({ children, variant = "neutral" }: BadgeProps) {
|
||||
return <span className={`ui-badge ui-badge--${variant}`}>{children}</span>;
|
||||
}
|
||||
|
||||
export type DialogProps = Readonly<{
|
||||
open: boolean;
|
||||
onClose(): void;
|
||||
title: string;
|
||||
description?: string;
|
||||
closeLabel?: string;
|
||||
children?: React.ReactNode;
|
||||
actions?: React.ReactNode;
|
||||
className?: string;
|
||||
}>;
|
||||
|
||||
export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
|
||||
function Dialog(
|
||||
{
|
||||
open,
|
||||
onClose,
|
||||
title,
|
||||
description,
|
||||
closeLabel,
|
||||
children,
|
||||
actions,
|
||||
className = "",
|
||||
},
|
||||
forwardedRef,
|
||||
) {
|
||||
const dialogRef = useRef<HTMLDialogElement | null>(null);
|
||||
const previousFocusRef = useRef<HTMLElement | null>(null);
|
||||
const titleId = useId();
|
||||
const descriptionId = useId();
|
||||
useImperativeHandle(forwardedRef, () => dialogRef.current!, []);
|
||||
|
||||
useEffect(() => {
|
||||
const dialog = dialogRef.current;
|
||||
if (!dialog) return;
|
||||
|
||||
if (open) {
|
||||
previousFocusRef.current =
|
||||
document.activeElement instanceof HTMLElement
|
||||
? document.activeElement
|
||||
: null;
|
||||
if (!dialog.open) {
|
||||
if (typeof dialog.showModal === "function") dialog.showModal();
|
||||
else dialog.setAttribute("open", "");
|
||||
}
|
||||
const firstFocusable = dialog.querySelector<HTMLElement>(
|
||||
"[autofocus], button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])",
|
||||
);
|
||||
firstFocusable?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (dialog.open) {
|
||||
if (typeof dialog.close === "function") dialog.close();
|
||||
else dialog.removeAttribute("open");
|
||||
}
|
||||
previousFocusRef.current?.focus();
|
||||
previousFocusRef.current = null;
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<dialog
|
||||
aria-describedby={description ? descriptionId : undefined}
|
||||
aria-labelledby={titleId}
|
||||
className={`ui-dialog ${className}`.trim()}
|
||||
onCancel={(event) => {
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
}}
|
||||
onClick={(event) => {
|
||||
if (event.target === event.currentTarget) onClose();
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
ref={dialogRef}
|
||||
>
|
||||
<div className="ui-dialog__surface">
|
||||
<header className="ui-dialog__header">
|
||||
<div>
|
||||
<h2 id={titleId}>{title}</h2>
|
||||
{description ? <p id={descriptionId}>{description}</p> : null}
|
||||
</div>
|
||||
<IconButton
|
||||
accessibleName={closeLabel ?? `${title} 닫기`}
|
||||
className="ui-dialog__close"
|
||||
onClick={onClose}
|
||||
variant="ghost"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</header>
|
||||
{children ? (
|
||||
<div className="ui-dialog__content">{children}</div>
|
||||
) : null}
|
||||
{actions ? (
|
||||
<footer className="ui-dialog__actions">{actions}</footer>
|
||||
) : null}
|
||||
</div>
|
||||
</dialog>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export type SpinnerProps =
|
||||
| Readonly<{ decorative: true; label?: never }>
|
||||
| Readonly<{ decorative?: false; label: string }>;
|
||||
|
||||
export function Spinner(props: SpinnerProps) {
|
||||
const accessibility = props.decorative
|
||||
? { "aria-hidden": true as const }
|
||||
: { "aria-label": props.label, role: "status" };
|
||||
return <span {...accessibility} className="ui-spinner" />;
|
||||
}
|
||||
|
||||
export function VisuallyHidden({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
return <span className="visually-hidden">{children}</span>;
|
||||
}
|
||||
|
||||
export function Portal({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
if (typeof document === "undefined") return <>{children}</>;
|
||||
return createPortal(children, document.body);
|
||||
}
|
||||
|
||||
export function FocusRing({
|
||||
children,
|
||||
}: Readonly<{ children: React.ReactNode }>) {
|
||||
return <span className="ui-focus-ring">{children}</span>;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
export type ProgressBarProps = Readonly<{
|
||||
label: string;
|
||||
value?: number;
|
||||
max?: number;
|
||||
}>;
|
||||
|
||||
export function ProgressBar({ label, value, max = 100 }: ProgressBarProps) {
|
||||
const determinate = typeof value === "number";
|
||||
return (
|
||||
<div className="ui-progress">
|
||||
<div className="ui-progress__label">
|
||||
<span>{label}</span>
|
||||
{determinate ? <span>{Math.round((value / max) * 100)}%</span> : null}
|
||||
</div>
|
||||
<progress
|
||||
aria-label={label}
|
||||
className="ui-progress__bar"
|
||||
max={max}
|
||||
value={determinate ? Math.min(Math.max(value, 0), max) : undefined}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type SkeletonProps = Readonly<{
|
||||
label?: string;
|
||||
height?: "text" | "control" | "surface";
|
||||
}>;
|
||||
|
||||
export function Skeleton({
|
||||
label,
|
||||
height = "surface",
|
||||
}: SkeletonProps) {
|
||||
return (
|
||||
<span
|
||||
aria-label={label}
|
||||
aria-hidden={label ? undefined : true}
|
||||
className={`ui-skeleton ui-skeleton--${height}`}
|
||||
role={label ? "status" : undefined}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function Separator({
|
||||
label,
|
||||
decorative = true,
|
||||
}: Readonly<{ label?: string; decorative?: boolean }>) {
|
||||
return (
|
||||
<hr
|
||||
aria-label={decorative ? undefined : label}
|
||||
aria-hidden={decorative || undefined}
|
||||
className="ui-separator"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,409 @@
|
||||
import {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useId,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
import { CloseIcon, SearchIcon } from "../icons/semantic-icons.js";
|
||||
import { Field, IconButton } from "./core.js";
|
||||
import type { TextFieldProps } from "./core.js";
|
||||
|
||||
type FieldCopy = Readonly<{
|
||||
id?: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
error?: string;
|
||||
}>;
|
||||
|
||||
export type TextAreaProps = Omit<
|
||||
React.TextareaHTMLAttributes<HTMLTextAreaElement>,
|
||||
"id"
|
||||
> &
|
||||
FieldCopy &
|
||||
Readonly<{ maxLengthMessage?: (remaining: number) => string }>;
|
||||
|
||||
export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
||||
function TextArea(
|
||||
{
|
||||
id,
|
||||
label,
|
||||
description,
|
||||
error,
|
||||
required,
|
||||
className = "",
|
||||
maxLength,
|
||||
maxLengthMessage,
|
||||
value,
|
||||
defaultValue,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
const [uncontrolledValue, setUncontrolledValue] = useState(
|
||||
String(defaultValue ?? ""),
|
||||
);
|
||||
const currentValue =
|
||||
value === undefined ? uncontrolledValue : String(value ?? "");
|
||||
const remaining =
|
||||
typeof maxLength === "number" ? maxLength - currentValue.length : null;
|
||||
|
||||
return (
|
||||
<Field
|
||||
className={className}
|
||||
description={description}
|
||||
error={error}
|
||||
id={id}
|
||||
label={label}
|
||||
required={required}
|
||||
>
|
||||
{({ controlId, describedBy, invalid }) => (
|
||||
<>
|
||||
<textarea
|
||||
{...props}
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid || undefined}
|
||||
className="ui-field__input ui-field__textarea"
|
||||
defaultValue={value === undefined ? defaultValue : undefined}
|
||||
id={controlId}
|
||||
maxLength={maxLength}
|
||||
onChange={(event) => {
|
||||
if (value === undefined) setUncontrolledValue(event.currentTarget.value);
|
||||
props.onChange?.(event);
|
||||
}}
|
||||
ref={ref}
|
||||
required={required}
|
||||
value={value}
|
||||
/>
|
||||
{remaining !== null ? (
|
||||
<output className="ui-field__counter">
|
||||
{maxLengthMessage
|
||||
? maxLengthMessage(remaining)
|
||||
: `${remaining}자 남음`}
|
||||
</output>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Field>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export type SelectOption = Readonly<{
|
||||
value: string;
|
||||
label: string;
|
||||
disabled?: boolean;
|
||||
}>;
|
||||
|
||||
export type SelectProps = Omit<
|
||||
React.SelectHTMLAttributes<HTMLSelectElement>,
|
||||
"id" | "children"
|
||||
> &
|
||||
FieldCopy &
|
||||
Readonly<{
|
||||
options: readonly SelectOption[];
|
||||
placeholder?: string;
|
||||
}>;
|
||||
|
||||
export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
function Select(
|
||||
{
|
||||
id,
|
||||
label,
|
||||
description,
|
||||
error,
|
||||
options,
|
||||
placeholder,
|
||||
required,
|
||||
className = "",
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<Field
|
||||
className={className}
|
||||
description={description}
|
||||
error={error}
|
||||
id={id}
|
||||
label={label}
|
||||
required={required}
|
||||
>
|
||||
{({ controlId, describedBy, invalid }) => (
|
||||
<select
|
||||
{...props}
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid || undefined}
|
||||
className="ui-field__input ui-field__select"
|
||||
id={controlId}
|
||||
ref={ref}
|
||||
required={required}
|
||||
>
|
||||
{placeholder ? (
|
||||
<option disabled value="">
|
||||
{placeholder}
|
||||
</option>
|
||||
) : null}
|
||||
{options.map((option) => (
|
||||
<option
|
||||
disabled={option.disabled}
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</Field>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export type CheckboxProps = Omit<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
"type"
|
||||
> &
|
||||
Readonly<{
|
||||
label: string;
|
||||
description?: string;
|
||||
error?: string;
|
||||
indeterminate?: boolean;
|
||||
}>;
|
||||
|
||||
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
function Checkbox(
|
||||
{ label, description, error, indeterminate = false, id, ...props },
|
||||
forwardedRef,
|
||||
) {
|
||||
const generatedId = useId();
|
||||
const controlId = id ?? `checkbox-${generatedId}`;
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
const descriptionId = description ? `${controlId}-description` : undefined;
|
||||
const errorId = error ? `${controlId}-error` : undefined;
|
||||
useEffect(() => {
|
||||
if (inputRef.current) inputRef.current.indeterminate = indeterminate;
|
||||
}, [indeterminate]);
|
||||
|
||||
return (
|
||||
<div className="ui-choice-field">
|
||||
<label className="ui-choice-field__control" htmlFor={controlId}>
|
||||
<input
|
||||
{...props}
|
||||
aria-describedby={
|
||||
[descriptionId, errorId].filter(Boolean).join(" ") || undefined
|
||||
}
|
||||
aria-invalid={error ? true : undefined}
|
||||
id={controlId}
|
||||
ref={(node) => {
|
||||
inputRef.current = node;
|
||||
if (typeof forwardedRef === "function") forwardedRef(node);
|
||||
else if (forwardedRef) forwardedRef.current = node;
|
||||
}}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span>{label}</span>
|
||||
</label>
|
||||
{description ? (
|
||||
<p className="ui-field__description" id={descriptionId}>
|
||||
{description}
|
||||
</p>
|
||||
) : null}
|
||||
{error ? (
|
||||
<p className="ui-field__error" id={errorId}>
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export type RadioOption = Readonly<{
|
||||
value: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
disabled?: boolean;
|
||||
}>;
|
||||
|
||||
export type RadioGroupProps = Readonly<{
|
||||
name: string;
|
||||
label: string;
|
||||
options: readonly RadioOption[];
|
||||
value?: string;
|
||||
defaultValue?: string;
|
||||
onChange?(value: string): void;
|
||||
disabled?: boolean;
|
||||
error?: string;
|
||||
}>;
|
||||
|
||||
export function RadioGroup({
|
||||
name,
|
||||
label,
|
||||
options,
|
||||
value,
|
||||
defaultValue,
|
||||
onChange,
|
||||
disabled,
|
||||
error,
|
||||
}: RadioGroupProps) {
|
||||
const [internalValue, setInternalValue] = useState(defaultValue ?? "");
|
||||
const selected = value ?? internalValue;
|
||||
const errorId = useId();
|
||||
const refs = useRef<Array<HTMLInputElement | null>>([]);
|
||||
|
||||
function choose(nextValue: string) {
|
||||
if (value === undefined) setInternalValue(nextValue);
|
||||
onChange?.(nextValue);
|
||||
}
|
||||
|
||||
return (
|
||||
<fieldset
|
||||
aria-describedby={error ? errorId : undefined}
|
||||
className="ui-radio-group"
|
||||
disabled={disabled}
|
||||
>
|
||||
<legend>{label}</legend>
|
||||
{options.map((option, index) => (
|
||||
<label className="ui-choice-field__control" key={option.value}>
|
||||
<input
|
||||
checked={selected === option.value}
|
||||
disabled={option.disabled}
|
||||
name={name}
|
||||
onChange={() => choose(option.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft"].includes(event.key)) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
const direction =
|
||||
event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : -1;
|
||||
let next = index;
|
||||
do {
|
||||
next = (next + direction + options.length) % options.length;
|
||||
} while (options[next]?.disabled && next !== index);
|
||||
const nextOption = options[next];
|
||||
if (nextOption && !nextOption.disabled) {
|
||||
choose(nextOption.value);
|
||||
refs.current[next]?.focus();
|
||||
}
|
||||
}}
|
||||
ref={(node) => {
|
||||
refs.current[index] = node;
|
||||
}}
|
||||
type="radio"
|
||||
value={option.value}
|
||||
/>
|
||||
<span>
|
||||
{option.label}
|
||||
{option.description ? <small>{option.description}</small> : null}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
{error ? (
|
||||
<p className="ui-field__error" id={errorId}>
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
</fieldset>
|
||||
);
|
||||
}
|
||||
|
||||
export type SwitchProps = Readonly<{
|
||||
label: string;
|
||||
checked: boolean;
|
||||
onChange(checked: boolean): void;
|
||||
disabled?: boolean;
|
||||
description?: string;
|
||||
}>;
|
||||
|
||||
export function Switch({
|
||||
label,
|
||||
checked,
|
||||
onChange,
|
||||
disabled,
|
||||
description,
|
||||
}: SwitchProps) {
|
||||
const descriptionId = useId();
|
||||
return (
|
||||
<div className="ui-switch-field">
|
||||
<button
|
||||
aria-checked={checked}
|
||||
aria-describedby={description ? descriptionId : undefined}
|
||||
className="ui-switch"
|
||||
disabled={disabled}
|
||||
onClick={() => onChange(!checked)}
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<span aria-hidden="true" className="ui-switch__thumb" />
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
{description ? (
|
||||
<p className="ui-field__description" id={descriptionId}>
|
||||
{description}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type SearchFieldProps = Omit<TextFieldProps, "type"> &
|
||||
Readonly<{
|
||||
clearLabel: string;
|
||||
onClear(): void;
|
||||
}>;
|
||||
|
||||
export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
|
||||
function SearchField(
|
||||
{
|
||||
clearLabel,
|
||||
onClear,
|
||||
value,
|
||||
className = "",
|
||||
id,
|
||||
label,
|
||||
description,
|
||||
error,
|
||||
required,
|
||||
...inputProps
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div className={`ui-search-field ${className}`.trim()}>
|
||||
<SearchIcon />
|
||||
<Field
|
||||
description={description}
|
||||
error={error}
|
||||
id={id}
|
||||
label={label}
|
||||
required={required}
|
||||
>
|
||||
{({ controlId, describedBy, invalid }) => (
|
||||
<input
|
||||
{...inputProps}
|
||||
aria-describedby={describedBy}
|
||||
aria-invalid={invalid || undefined}
|
||||
className="ui-field__input"
|
||||
id={controlId}
|
||||
ref={ref}
|
||||
type="search"
|
||||
value={value}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
{String(value ?? "").length > 0 ? (
|
||||
<IconButton
|
||||
accessibleName={clearLabel}
|
||||
onClick={onClear}
|
||||
variant="ghost"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -0,0 +1,193 @@
|
||||
import { useId, useRef, useState } from "react";
|
||||
|
||||
import { NextIcon, PreviousIcon } from "../icons/semantic-icons.js";
|
||||
import { IconButton, LinkButton } from "./core.js";
|
||||
|
||||
export type BreadcrumbItem = Readonly<{
|
||||
label: string;
|
||||
href?: string;
|
||||
}>;
|
||||
|
||||
export function Breadcrumbs({
|
||||
label,
|
||||
items,
|
||||
}: Readonly<{ label: string; items: readonly BreadcrumbItem[] }>) {
|
||||
return (
|
||||
<nav aria-label={label} className="ui-breadcrumbs">
|
||||
<ol>
|
||||
{items.map((item, index) => {
|
||||
const current = index === items.length - 1;
|
||||
return (
|
||||
<li key={`${item.label}-${index}`}>
|
||||
{item.href && !current ? (
|
||||
<a href={item.href}>{item.label}</a>
|
||||
) : (
|
||||
<span aria-current={current ? "page" : undefined}>
|
||||
{item.label}
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export type TabDefinition = Readonly<{
|
||||
id: string;
|
||||
label: string;
|
||||
panel: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
}>;
|
||||
|
||||
export function Tabs({
|
||||
label,
|
||||
tabs,
|
||||
value,
|
||||
defaultValue,
|
||||
activation = "automatic",
|
||||
onChange,
|
||||
}: Readonly<{
|
||||
label: string;
|
||||
tabs: readonly TabDefinition[];
|
||||
value?: string;
|
||||
defaultValue?: string;
|
||||
activation?: "automatic" | "manual";
|
||||
onChange?(id: string): void;
|
||||
}>) {
|
||||
const fallback = tabs.find((tab) => !tab.disabled)?.id ?? "";
|
||||
const [internalValue, setInternalValue] = useState(defaultValue ?? fallback);
|
||||
const [focusValue, setFocusValue] = useState(value ?? internalValue);
|
||||
const selected = value ?? internalValue;
|
||||
const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
|
||||
const baseId = useId();
|
||||
|
||||
function select(id: string) {
|
||||
if (value === undefined) setInternalValue(id);
|
||||
onChange?.(id);
|
||||
}
|
||||
|
||||
function move(currentIndex: number, direction: 1 | -1) {
|
||||
let next = currentIndex;
|
||||
do {
|
||||
next = (next + direction + tabs.length) % tabs.length;
|
||||
} while (tabs[next]?.disabled && next !== currentIndex);
|
||||
const nextTab = tabs[next];
|
||||
if (!nextTab || nextTab.disabled) return;
|
||||
setFocusValue(nextTab.id);
|
||||
if (activation === "automatic") select(nextTab.id);
|
||||
tabRefs.current[next]?.focus();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ui-tabs">
|
||||
<div aria-label={label} className="ui-tabs__list" role="tablist">
|
||||
{tabs.map((tab, index) => (
|
||||
<button
|
||||
aria-controls={`${baseId}-${tab.id}-panel`}
|
||||
aria-selected={selected === tab.id}
|
||||
className="ui-tabs__tab"
|
||||
disabled={tab.disabled}
|
||||
id={`${baseId}-${tab.id}-tab`}
|
||||
key={tab.id}
|
||||
onClick={() => {
|
||||
setFocusValue(tab.id);
|
||||
select(tab.id);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "ArrowRight") {
|
||||
event.preventDefault();
|
||||
move(index, 1);
|
||||
} else if (event.key === "ArrowLeft") {
|
||||
event.preventDefault();
|
||||
move(index, -1);
|
||||
} else if (
|
||||
activation === "manual" &&
|
||||
(event.key === "Enter" || event.key === " ")
|
||||
) {
|
||||
event.preventDefault();
|
||||
select(tab.id);
|
||||
}
|
||||
}}
|
||||
ref={(node) => {
|
||||
tabRefs.current[index] = node;
|
||||
}}
|
||||
role="tab"
|
||||
tabIndex={focusValue === tab.id ? 0 : -1}
|
||||
type="button"
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{tabs.map((tab) => (
|
||||
<div
|
||||
aria-labelledby={`${baseId}-${tab.id}-tab`}
|
||||
className="ui-tabs__panel"
|
||||
hidden={selected !== tab.id}
|
||||
id={`${baseId}-${tab.id}-panel`}
|
||||
key={tab.id}
|
||||
role="tabpanel"
|
||||
tabIndex={0}
|
||||
>
|
||||
{tab.panel}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Pagination({
|
||||
label,
|
||||
page,
|
||||
pageCount,
|
||||
previousLabel,
|
||||
nextLabel,
|
||||
pageLabel,
|
||||
onChange,
|
||||
}: Readonly<{
|
||||
label: string;
|
||||
page: number;
|
||||
pageCount: number;
|
||||
previousLabel: string;
|
||||
nextLabel: string;
|
||||
pageLabel(page: number): string;
|
||||
onChange(page: number): void;
|
||||
}>) {
|
||||
const pages = Array.from({ length: pageCount }, (_, index) => index + 1);
|
||||
return (
|
||||
<nav aria-label={label} className="ui-pagination">
|
||||
<IconButton
|
||||
accessibleName={previousLabel}
|
||||
disabled={page <= 1}
|
||||
onClick={() => onChange(page - 1)}
|
||||
variant="secondary"
|
||||
>
|
||||
<PreviousIcon />
|
||||
</IconButton>
|
||||
{pages.map((candidate) => (
|
||||
<LinkButton
|
||||
aria-current={candidate === page ? "page" : undefined}
|
||||
href={`?page=${candidate}`}
|
||||
key={candidate}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
onChange(candidate);
|
||||
}}
|
||||
variant={candidate === page ? "primary" : "ghost"}
|
||||
>
|
||||
{pageLabel(candidate)}
|
||||
</LinkButton>
|
||||
))}
|
||||
<IconButton
|
||||
accessibleName={nextLabel}
|
||||
disabled={page >= pageCount}
|
||||
onClick={() => onChange(page + 1)}
|
||||
variant="secondary"
|
||||
>
|
||||
<NextIcon />
|
||||
</IconButton>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,441 @@
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useId,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
|
||||
import { CloseIcon } from "../icons/semantic-icons.js";
|
||||
import { Button, Dialog, IconButton } from "./core.js";
|
||||
|
||||
export type DrawerProps = Readonly<{
|
||||
open: boolean;
|
||||
onClose(): void;
|
||||
title: string;
|
||||
closeLabel?: string;
|
||||
placement?: "start" | "end";
|
||||
children: React.ReactNode;
|
||||
}>;
|
||||
|
||||
export function Drawer({
|
||||
open,
|
||||
onClose,
|
||||
title,
|
||||
closeLabel,
|
||||
placement = "start",
|
||||
children,
|
||||
}: DrawerProps) {
|
||||
return (
|
||||
<Dialog
|
||||
className={`ui-drawer ui-drawer--${placement}`}
|
||||
closeLabel={closeLabel}
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
title={title}
|
||||
>
|
||||
{children}
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export type PopoverProps = Readonly<{
|
||||
triggerLabel: string;
|
||||
children: React.ReactNode;
|
||||
}>;
|
||||
|
||||
export function Popover({ triggerLabel, children }: PopoverProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const rootRef = useRef<HTMLDivElement | null>(null);
|
||||
const triggerRef = useRef<HTMLButtonElement | null>(null);
|
||||
const contentId = useId();
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function closeOutside(event: PointerEvent) {
|
||||
if (
|
||||
event.target instanceof Node &&
|
||||
!rootRef.current?.contains(event.target)
|
||||
) {
|
||||
setOpen(false);
|
||||
triggerRef.current?.focus();
|
||||
}
|
||||
}
|
||||
function closeOnEscape(event: KeyboardEvent) {
|
||||
if (event.key === "Escape") {
|
||||
setOpen(false);
|
||||
triggerRef.current?.focus();
|
||||
}
|
||||
}
|
||||
document.addEventListener("pointerdown", closeOutside);
|
||||
document.addEventListener("keydown", closeOnEscape);
|
||||
return () => {
|
||||
document.removeEventListener("pointerdown", closeOutside);
|
||||
document.removeEventListener("keydown", closeOnEscape);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div className="ui-popover" ref={rootRef}>
|
||||
<Button
|
||||
aria-controls={contentId}
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((current) => !current)}
|
||||
ref={triggerRef}
|
||||
variant="secondary"
|
||||
>
|
||||
{triggerLabel}
|
||||
</Button>
|
||||
{open ? (
|
||||
<div className="ui-popover__content" id={contentId} role="dialog">
|
||||
{children}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type TooltipProps = Readonly<{
|
||||
content: string;
|
||||
children: React.ReactElement;
|
||||
}>;
|
||||
|
||||
export function Tooltip({ content, children }: TooltipProps) {
|
||||
const tooltipId = useId();
|
||||
return (
|
||||
<span className="ui-tooltip">
|
||||
<span aria-describedby={tooltipId} className="ui-tooltip__trigger">
|
||||
{children}
|
||||
</span>
|
||||
<span className="ui-tooltip__content" id={tooltipId} role="tooltip">
|
||||
{content}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export type MenuItemDefinition = Readonly<{
|
||||
id: string;
|
||||
label: string;
|
||||
disabled?: boolean;
|
||||
onSelect(): void;
|
||||
}>;
|
||||
|
||||
export type MenuProps = Readonly<{
|
||||
triggerLabel: string;
|
||||
items: readonly MenuItemDefinition[];
|
||||
}>;
|
||||
|
||||
export function Menu({ triggerLabel, items }: MenuProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const triggerRef = useRef<HTMLButtonElement | null>(null);
|
||||
const rootRef = useRef<HTMLDivElement | null>(null);
|
||||
const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
|
||||
const searchRef = useRef("");
|
||||
const resetSearchRef = useRef<number | undefined>(undefined);
|
||||
|
||||
const enabledIndexes = useMemo(
|
||||
() => items.flatMap((item, index) => (item.disabled ? [] : [index])),
|
||||
[items],
|
||||
);
|
||||
|
||||
const focusIndex = useCallback(
|
||||
(index: number) => {
|
||||
setActiveIndex(index);
|
||||
queueMicrotask(() => itemRefs.current[index]?.focus());
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
function openAt(index: number) {
|
||||
setOpen(true);
|
||||
focusIndex(index);
|
||||
}
|
||||
|
||||
function dismiss() {
|
||||
setOpen(false);
|
||||
queueMicrotask(() => triggerRef.current?.focus());
|
||||
}
|
||||
|
||||
function move(direction: 1 | -1) {
|
||||
const currentPosition = Math.max(enabledIndexes.indexOf(activeIndex), 0);
|
||||
const nextPosition =
|
||||
(currentPosition + direction + enabledIndexes.length) %
|
||||
enabledIndexes.length;
|
||||
const nextIndex = enabledIndexes[nextPosition];
|
||||
if (nextIndex !== undefined) focusIndex(nextIndex);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function closeOutside(event: PointerEvent) {
|
||||
if (
|
||||
event.target instanceof Node &&
|
||||
!rootRef.current?.contains(event.target)
|
||||
) {
|
||||
setOpen(false);
|
||||
queueMicrotask(() => triggerRef.current?.focus());
|
||||
}
|
||||
}
|
||||
document.addEventListener("pointerdown", closeOutside);
|
||||
return () => document.removeEventListener("pointerdown", closeOutside);
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div className="ui-menu" ref={rootRef}>
|
||||
<Button
|
||||
aria-expanded={open}
|
||||
aria-haspopup="menu"
|
||||
onClick={() => {
|
||||
if (open) dismiss();
|
||||
else openAt(enabledIndexes[0] ?? 0);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
openAt(enabledIndexes[0] ?? 0);
|
||||
}
|
||||
if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
openAt(enabledIndexes.at(-1) ?? 0);
|
||||
}
|
||||
}}
|
||||
ref={triggerRef}
|
||||
variant="secondary"
|
||||
>
|
||||
{triggerLabel}
|
||||
</Button>
|
||||
{open ? (
|
||||
<div
|
||||
className="ui-menu__content"
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
dismiss();
|
||||
} else if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
move(1);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
move(-1);
|
||||
} else if (event.key === "Home") {
|
||||
event.preventDefault();
|
||||
focusIndex(enabledIndexes[0] ?? 0);
|
||||
} else if (event.key === "End") {
|
||||
event.preventDefault();
|
||||
focusIndex(enabledIndexes.at(-1) ?? 0);
|
||||
} else if (
|
||||
event.key.length === 1 &&
|
||||
!event.ctrlKey &&
|
||||
!event.metaKey &&
|
||||
!event.altKey
|
||||
) {
|
||||
searchRef.current += event.key.toLocaleLowerCase();
|
||||
window.clearTimeout(resetSearchRef.current);
|
||||
resetSearchRef.current = window.setTimeout(() => {
|
||||
searchRef.current = "";
|
||||
}, 500);
|
||||
const match = items.findIndex(
|
||||
(item) =>
|
||||
!item.disabled &&
|
||||
item.label
|
||||
.toLocaleLowerCase()
|
||||
.startsWith(searchRef.current),
|
||||
);
|
||||
if (match >= 0) focusIndex(match);
|
||||
}
|
||||
}}
|
||||
role="menu"
|
||||
>
|
||||
{items.map((item, index) => (
|
||||
<button
|
||||
className="ui-menu__item"
|
||||
disabled={item.disabled}
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
item.onSelect();
|
||||
dismiss();
|
||||
}}
|
||||
ref={(node) => {
|
||||
itemRefs.current[index] = node;
|
||||
}}
|
||||
role="menuitem"
|
||||
tabIndex={index === activeIndex ? 0 : -1}
|
||||
type="button"
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type ToastTone = "info" | "success" | "warning" | "danger";
|
||||
type ToastInput = Readonly<{
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
tone?: ToastTone;
|
||||
durationMs?: number;
|
||||
}>;
|
||||
type ToastEntry = ToastInput & Readonly<{ count: number }>;
|
||||
type ToastContextValue = Readonly<{
|
||||
push(toast: ToastInput): void;
|
||||
dismiss(id: string): void;
|
||||
}>;
|
||||
|
||||
const ToastContext = createContext<ToastContextValue | null>(null);
|
||||
|
||||
export function ToastProvider({
|
||||
children,
|
||||
limit = 3,
|
||||
}: Readonly<{ children: React.ReactNode; limit?: number }>) {
|
||||
const [toasts, setToasts] = useState<readonly ToastEntry[]>([]);
|
||||
|
||||
const dismiss = useCallback((id: string) => {
|
||||
setToasts((current) => current.filter((toast) => toast.id !== id));
|
||||
}, []);
|
||||
|
||||
const push = useCallback(
|
||||
(toast: ToastInput) => {
|
||||
setToasts((current) => {
|
||||
const existing = current.find((entry) => entry.id === toast.id);
|
||||
if (existing) {
|
||||
return current.map((entry) =>
|
||||
entry.id === toast.id
|
||||
? { ...entry, ...toast, count: entry.count + 1 }
|
||||
: entry,
|
||||
);
|
||||
}
|
||||
return [...current, { ...toast, count: 1 }].slice(-limit);
|
||||
});
|
||||
},
|
||||
[limit],
|
||||
);
|
||||
|
||||
const value = useMemo(() => ({ push, dismiss }), [dismiss, push]);
|
||||
return (
|
||||
<ToastContext.Provider value={value}>
|
||||
{children}
|
||||
<ToastRegion dismiss={dismiss} toasts={toasts} />
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
const context = useContext(ToastContext);
|
||||
if (!context) {
|
||||
throw new Error("ToastProvider is required.");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
function ToastRegion({
|
||||
toasts,
|
||||
dismiss,
|
||||
}: Readonly<{
|
||||
toasts: readonly ToastEntry[];
|
||||
dismiss(id: string): void;
|
||||
}>) {
|
||||
return (
|
||||
<section
|
||||
aria-label="Notifications"
|
||||
aria-live="polite"
|
||||
className="ui-toast-region"
|
||||
>
|
||||
{toasts.map((toast) => (
|
||||
<ToastItem dismiss={dismiss} key={toast.id} toast={toast} />
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ToastItem({
|
||||
toast,
|
||||
dismiss,
|
||||
}: Readonly<{
|
||||
toast: ToastEntry;
|
||||
dismiss(id: string): void;
|
||||
}>) {
|
||||
const [paused, setPaused] = useState(false);
|
||||
useEffect(() => {
|
||||
if (paused) return;
|
||||
const timeout = window.setTimeout(
|
||||
() => dismiss(toast.id),
|
||||
toast.durationMs ?? 5000,
|
||||
);
|
||||
return () => window.clearTimeout(timeout);
|
||||
}, [dismiss, paused, toast.durationMs, toast.id, toast.count]);
|
||||
|
||||
return (
|
||||
<article
|
||||
className={`ui-toast ui-toast--${toast.tone ?? "info"}`}
|
||||
onBlur={(event) => {
|
||||
if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false);
|
||||
}}
|
||||
onFocus={() => setPaused(true)}
|
||||
onMouseEnter={() => setPaused(true)}
|
||||
onMouseLeave={() => setPaused(false)}
|
||||
>
|
||||
<div>
|
||||
<strong>{toast.title}</strong>
|
||||
{toast.count > 1 ? (
|
||||
<span className="ui-toast__count"> ×{toast.count}</span>
|
||||
) : null}
|
||||
{toast.description ? <p>{toast.description}</p> : null}
|
||||
</div>
|
||||
<IconButton
|
||||
accessibleName={`${toast.title} 닫기`}
|
||||
onClick={() => dismiss(toast.id)}
|
||||
variant="ghost"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
export function ConfirmationDialog({
|
||||
open,
|
||||
title,
|
||||
description,
|
||||
confirmLabel,
|
||||
cancelLabel,
|
||||
danger = false,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
}: Readonly<{
|
||||
open: boolean;
|
||||
title: string;
|
||||
description: string;
|
||||
confirmLabel: string;
|
||||
cancelLabel: string;
|
||||
danger?: boolean;
|
||||
onConfirm(): void;
|
||||
onCancel(): void;
|
||||
}>) {
|
||||
return (
|
||||
<Dialog
|
||||
actions={
|
||||
<>
|
||||
<Button onClick={onCancel} variant="secondary">
|
||||
{cancelLabel}
|
||||
</Button>
|
||||
<Button onClick={onConfirm} variant={danger ? "danger" : "primary"}>
|
||||
{confirmLabel}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
description={description}
|
||||
onClose={onCancel}
|
||||
open={open}
|
||||
title={title}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@theme {
|
||||
--button-primary-background: var(--color-action);
|
||||
--button-primary-content: var(--color-on-action);
|
||||
--button-primary-hover: var(--color-action-hover);
|
||||
--field-border: var(--color-border-strong);
|
||||
--field-border-invalid: var(--color-danger);
|
||||
--dialog-elevation: var(--elevation-dialog);
|
||||
--navigation-active-background: color-mix(
|
||||
in oklch,
|
||||
var(--color-action) 14%,
|
||||
var(--color-panel)
|
||||
);
|
||||
--drawer-width: min(20rem, 88vw);
|
||||
--toast-width: min(24rem, calc(100vw - 2rem));
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
:root {
|
||||
--color-border: CanvasText;
|
||||
--color-border-strong: CanvasText;
|
||||
--color-focus: Highlight;
|
||||
--color-action: LinkText;
|
||||
--color-danger: MarkText;
|
||||
--color-danger-surface: Mark;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@theme {
|
||||
--palette-white: oklch(1 0 0);
|
||||
--palette-slate-50: oklch(0.985 0.003 247);
|
||||
--palette-slate-100: oklch(0.94 0.01 247);
|
||||
--palette-slate-300: oklch(0.87 0.015 247);
|
||||
--palette-slate-500: oklch(0.48 0.025 247);
|
||||
--palette-slate-800: oklch(0.25 0.025 247);
|
||||
--palette-slate-950: oklch(0.16 0.02 255);
|
||||
--palette-blue-500: oklch(0.7 0.14 250);
|
||||
--palette-blue-600: oklch(0.55 0.18 255);
|
||||
--palette-blue-700: oklch(0.48 0.2 255);
|
||||
--palette-red-500: oklch(0.68 0.19 25);
|
||||
--palette-red-600: oklch(0.55 0.2 25);
|
||||
--palette-red-700: oklch(0.47 0.2 25);
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-12: 3rem;
|
||||
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-md: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--line-height-tight: 1.25;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.7;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-semibold: 650;
|
||||
--font-weight-bold: 750;
|
||||
|
||||
--radius-xs: 0.25rem;
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-full: 999px;
|
||||
|
||||
--shadow-panel: 0 8px 28px rgb(15 23 42 / 8%);
|
||||
--shadow-popover: 0 14px 40px rgb(15 23 42 / 16%);
|
||||
--shadow-dialog: 0 24px 70px rgb(15 23 42 / 25%);
|
||||
|
||||
--duration-fast: 100ms;
|
||||
--duration-normal: 180ms;
|
||||
--duration-slow: 300ms;
|
||||
--easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
|
||||
|
||||
--size-control-sm: 2.25rem;
|
||||
--size-control-md: 2.75rem;
|
||||
--size-touch-target: 2.75rem;
|
||||
--size-icon-sm: 1rem;
|
||||
--size-icon-md: 1.25rem;
|
||||
--size-icon-lg: 1.5rem;
|
||||
--icon-stroke-default: 2;
|
||||
|
||||
--breakpoint-compact: 48rem;
|
||||
--breakpoint-medium: 64rem;
|
||||
--breakpoint-wide: 80rem;
|
||||
--container-content: 72rem;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
@theme {
|
||||
--color-surface: var(--palette-slate-50);
|
||||
--color-surface-muted: var(--palette-slate-100);
|
||||
--color-panel: var(--palette-white);
|
||||
--color-surface-elevated: var(--palette-white);
|
||||
--color-border: var(--palette-slate-300);
|
||||
--color-border-strong: var(--palette-slate-500);
|
||||
--color-content: var(--palette-slate-800);
|
||||
--color-content-muted: var(--palette-slate-500);
|
||||
--color-content-inverse: var(--palette-white);
|
||||
--color-action: var(--palette-blue-600);
|
||||
--color-action-hover: var(--palette-blue-700);
|
||||
--color-action-pressed: var(--palette-blue-700);
|
||||
--color-danger: var(--palette-red-600);
|
||||
--color-danger-hover: var(--palette-red-700);
|
||||
--color-on-action: var(--palette-white);
|
||||
--color-focus: oklch(0.72 0.16 225);
|
||||
--color-disabled-content: color-mix(in oklch, var(--color-content) 55%, transparent);
|
||||
--color-disabled-surface: var(--color-surface-muted);
|
||||
--color-info-content: oklch(0.38 0.16 255);
|
||||
--color-info-surface: oklch(0.95 0.03 255);
|
||||
--color-info-border: oklch(0.75 0.08 250);
|
||||
--color-success-content: oklch(0.35 0.12 155);
|
||||
--color-success-surface: oklch(0.95 0.04 155);
|
||||
--color-success-border: oklch(0.72 0.1 155);
|
||||
--color-warning-content: oklch(0.38 0.12 70);
|
||||
--color-warning-surface: oklch(0.96 0.05 80);
|
||||
--color-warning-border: oklch(0.75 0.12 80);
|
||||
--color-danger-content: oklch(0.42 0.18 25);
|
||||
--color-danger-surface: oklch(0.96 0.035 25);
|
||||
--color-danger-border: oklch(0.72 0.12 25);
|
||||
|
||||
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
|
||||
--spacing-page: var(--space-6);
|
||||
--radius-control: var(--radius-sm);
|
||||
--radius-surface: var(--radius-md);
|
||||
--radius-modal: var(--radius-md);
|
||||
--elevation-panel: var(--shadow-panel);
|
||||
--elevation-popover: var(--shadow-popover);
|
||||
--elevation-dialog: var(--shadow-dialog);
|
||||
--layer-base: 0;
|
||||
--layer-sticky: 30;
|
||||
--layer-navigation: 50;
|
||||
--layer-popover: 60;
|
||||
--layer-modal: 70;
|
||||
--layer-toast: 80;
|
||||
--opacity-disabled: 0.55;
|
||||
--opacity-scrim: 0.55;
|
||||
--opacity-skeleton: 0.7;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--color-surface: var(--palette-slate-950);
|
||||
--color-surface-muted: oklch(0.25 0.025 255);
|
||||
--color-panel: oklch(0.205 0.022 255);
|
||||
--color-surface-elevated: oklch(0.235 0.025 255);
|
||||
--color-border: oklch(0.36 0.025 255);
|
||||
--color-border-strong: oklch(0.58 0.025 255);
|
||||
--color-content: oklch(0.94 0.012 255);
|
||||
--color-content-muted: oklch(0.74 0.025 255);
|
||||
--color-content-inverse: var(--palette-slate-950);
|
||||
--color-action: var(--palette-blue-500);
|
||||
--color-action-hover: oklch(0.79 0.12 245);
|
||||
--color-action-pressed: oklch(0.83 0.1 245);
|
||||
--color-danger: var(--palette-red-500);
|
||||
--color-danger-hover: oklch(0.76 0.16 25);
|
||||
--color-on-action: var(--palette-slate-950);
|
||||
--color-focus: oklch(0.82 0.15 220);
|
||||
--color-disabled-content: color-mix(in oklch, var(--color-content) 55%, transparent);
|
||||
--color-disabled-surface: var(--color-surface-muted);
|
||||
--color-info-content: oklch(0.83 0.09 250);
|
||||
--color-info-surface: oklch(0.27 0.045 255);
|
||||
--color-info-border: oklch(0.55 0.09 250);
|
||||
--color-success-content: oklch(0.83 0.1 155);
|
||||
--color-success-surface: oklch(0.27 0.045 155);
|
||||
--color-success-border: oklch(0.53 0.1 155);
|
||||
--color-warning-content: oklch(0.88 0.1 80);
|
||||
--color-warning-surface: oklch(0.29 0.045 80);
|
||||
--color-warning-border: oklch(0.58 0.11 80);
|
||||
--color-danger-content: oklch(0.84 0.11 25);
|
||||
--color-danger-surface: oklch(0.28 0.055 25);
|
||||
--color-danger-border: oklch(0.56 0.13 25);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
export const REQUIRED_PRIMITIVE_TOKENS = Object.freeze([
|
||||
"--space-1",
|
||||
"--space-2",
|
||||
"--space-4",
|
||||
"--font-size-sm",
|
||||
"--line-height-normal",
|
||||
"--radius-sm",
|
||||
"--shadow-dialog",
|
||||
"--duration-fast",
|
||||
"--easing-standard",
|
||||
"--size-control-md",
|
||||
"--size-touch-target",
|
||||
"--size-icon-md",
|
||||
"--breakpoint-compact",
|
||||
] as const);
|
||||
|
||||
export const REQUIRED_SEMANTIC_TOKENS = Object.freeze([
|
||||
"--color-surface",
|
||||
"--color-surface-muted",
|
||||
"--color-surface-elevated",
|
||||
"--color-content",
|
||||
"--color-content-muted",
|
||||
"--color-content-inverse",
|
||||
"--color-border",
|
||||
"--color-border-strong",
|
||||
"--color-action",
|
||||
"--color-action-hover",
|
||||
"--color-action-pressed",
|
||||
"--color-danger",
|
||||
"--color-warning-content",
|
||||
"--color-success-content",
|
||||
"--color-info-content",
|
||||
"--color-focus",
|
||||
"--color-disabled-content",
|
||||
"--color-disabled-surface",
|
||||
"--elevation-panel",
|
||||
"--layer-navigation",
|
||||
"--layer-popover",
|
||||
"--layer-modal",
|
||||
"--layer-toast",
|
||||
"--opacity-disabled",
|
||||
"--opacity-scrim",
|
||||
"--opacity-skeleton",
|
||||
] as const);
|
||||
|
||||
export const REQUIRED_COMPONENT_TOKENS = Object.freeze([
|
||||
"--button-primary-background",
|
||||
"--button-primary-content",
|
||||
"--button-primary-hover",
|
||||
"--field-border",
|
||||
"--field-border-invalid",
|
||||
"--dialog-elevation",
|
||||
"--navigation-active-background",
|
||||
"--drawer-width",
|
||||
"--toast-width",
|
||||
] as const);
|
||||
|
||||
export const DESIGN_TOKEN_CONTRACT = Object.freeze({
|
||||
primitive: REQUIRED_PRIMITIVE_TOKENS,
|
||||
semantic: REQUIRED_SEMANTIC_TOKENS,
|
||||
component: REQUIRED_COMPONENT_TOKENS,
|
||||
});
|
||||
Reference in New Issue
Block a user