feat: structure
This commit is contained in:
+6
-2
@@ -4,6 +4,7 @@ import type { StorybookConfig } from 'storybook-react-rsbuild';
|
|||||||
const config: StorybookConfig = {
|
const config: StorybookConfig = {
|
||||||
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
|
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)'],
|
||||||
addons: ['@storybook/addon-docs'],
|
addons: ['@storybook/addon-docs'],
|
||||||
|
staticDirs: ['../src/assets'],
|
||||||
framework: {
|
framework: {
|
||||||
name: 'storybook-react-rsbuild',
|
name: 'storybook-react-rsbuild',
|
||||||
options: {},
|
options: {},
|
||||||
@@ -13,9 +14,12 @@ const config: StorybookConfig = {
|
|||||||
reactDocgen: 'react-docgen-typescript',
|
reactDocgen: 'react-docgen-typescript',
|
||||||
reactDocgenTypescriptOptions: {
|
reactDocgenTypescriptOptions: {
|
||||||
shouldExtractLiteralValuesFromEnum: true,
|
shouldExtractLiteralValuesFromEnum: true,
|
||||||
// Keep our own props; drop the noise inherited from node_modules.
|
// Keep our own props + Radix primitives; drop other node_modules noise.
|
||||||
propFilter: (prop) =>
|
propFilter: (prop) =>
|
||||||
prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
|
prop.parent
|
||||||
|
? !/node_modules/.test(prop.parent.fileName) ||
|
||||||
|
/node_modules\/radix-ui/.test(prop.parent.fileName)
|
||||||
|
: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Anta';
|
||||||
|
src: url('/Anta-Regular.ttf') format('truetype');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -2,8 +2,9 @@ import { useEffect, type ReactNode } from 'react';
|
|||||||
import type { Preview, Decorator } from 'storybook-react-rsbuild';
|
import type { Preview, Decorator } from 'storybook-react-rsbuild';
|
||||||
import { Tooltip } from 'radix-ui';
|
import { Tooltip } from 'radix-ui';
|
||||||
|
|
||||||
/* The shipped library surface, exactly as a consumer would load it. */
|
/* The shipped library surface, exactly as a consumer would load it.
|
||||||
import '../src/styles/fonts.css';
|
Fonts are loaded via preview-head.html (Google Fonts link + Anta @font-face)
|
||||||
|
to avoid bundler inlining the @import url() mid-stylesheet. */
|
||||||
import '../src/styles/index.css';
|
import '../src/styles/index.css';
|
||||||
/* Storybook-only canvas styling (background, docs blocks). */
|
/* Storybook-only canvas styling (background, docs blocks). */
|
||||||
import './preview.css';
|
import './preview.css';
|
||||||
|
|||||||
@@ -0,0 +1,57 @@
|
|||||||
|
import { type ReactNode } from 'react';
|
||||||
|
import { AlertDialog as RAlertDialog } from 'radix-ui';
|
||||||
|
import { Button } from '../button';
|
||||||
|
|
||||||
|
export const AlertDialog = ({
|
||||||
|
trigger,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
cancelLabel = 'Cancel',
|
||||||
|
actionLabel = 'Confirm',
|
||||||
|
destructive,
|
||||||
|
onAction,
|
||||||
|
open,
|
||||||
|
defaultOpen,
|
||||||
|
onOpenChange,
|
||||||
|
}: {
|
||||||
|
trigger?: ReactNode;
|
||||||
|
title: string;
|
||||||
|
description?: ReactNode;
|
||||||
|
cancelLabel?: string;
|
||||||
|
actionLabel?: string;
|
||||||
|
destructive?: boolean;
|
||||||
|
onAction?: () => void;
|
||||||
|
open?: boolean;
|
||||||
|
defaultOpen?: boolean;
|
||||||
|
onOpenChange?: (o: boolean) => void;
|
||||||
|
}) => (
|
||||||
|
<RAlertDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
|
||||||
|
{trigger && <RAlertDialog.Trigger asChild>{trigger}</RAlertDialog.Trigger>}
|
||||||
|
<RAlertDialog.Portal>
|
||||||
|
<RAlertDialog.Overlay className="modern-sk-overlay" />
|
||||||
|
<RAlertDialog.Content className="modern-sk-dialog">
|
||||||
|
<RAlertDialog.Title className="modern-sk-dialog__title">
|
||||||
|
{title}
|
||||||
|
</RAlertDialog.Title>
|
||||||
|
{description && (
|
||||||
|
<RAlertDialog.Description className="modern-sk-dialog__desc">
|
||||||
|
{description}
|
||||||
|
</RAlertDialog.Description>
|
||||||
|
)}
|
||||||
|
<div className="modern-sk-dialog__footer">
|
||||||
|
<RAlertDialog.Cancel asChild>
|
||||||
|
<Button variant="ghost">{cancelLabel}</Button>
|
||||||
|
</RAlertDialog.Cancel>
|
||||||
|
<RAlertDialog.Action asChild>
|
||||||
|
<Button
|
||||||
|
variant={destructive ? 'ember' : 'primary'}
|
||||||
|
onClick={onAction}
|
||||||
|
>
|
||||||
|
{actionLabel}
|
||||||
|
</Button>
|
||||||
|
</RAlertDialog.Action>
|
||||||
|
</div>
|
||||||
|
</RAlertDialog.Content>
|
||||||
|
</RAlertDialog.Portal>
|
||||||
|
</RAlertDialog.Root>
|
||||||
|
);
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
type BadgeVariant = 'lime' | 'ember' | 'neutral' | 'outline';
|
||||||
|
|
||||||
|
export const Badge = ({
|
||||||
|
variant = 'neutral',
|
||||||
|
dot,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<'span'> & {
|
||||||
|
variant?: BadgeVariant;
|
||||||
|
dot?: boolean;
|
||||||
|
}) => (
|
||||||
|
<span
|
||||||
|
className={cx(
|
||||||
|
'modern-sk-badge',
|
||||||
|
`modern-sk-badge--${variant}`,
|
||||||
|
dot && 'modern-sk-badge--dot',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Chip = ({
|
||||||
|
children,
|
||||||
|
onRemove,
|
||||||
|
}: {
|
||||||
|
children: ReactNode;
|
||||||
|
onRemove?: () => void;
|
||||||
|
}) => (
|
||||||
|
<span className="modern-sk-chip">
|
||||||
|
{children}
|
||||||
|
{onRemove && (
|
||||||
|
<button type="button" className="x" onClick={onRemove} aria-label="Remove">
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import { forwardRef, type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
export type BtnVariant = 'key' | 'primary' | 'ember' | 'ghost';
|
||||||
|
|
||||||
|
type ButtonProps = ComponentPropsWithoutRef<'button'> & {
|
||||||
|
variant?: BtnVariant;
|
||||||
|
size?: 'sm';
|
||||||
|
iconOnly?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ variant = 'key', size, iconOnly, className, ...props }, ref) => (
|
||||||
|
<button
|
||||||
|
ref={ref}
|
||||||
|
className={cx(
|
||||||
|
'modern-sk-btn',
|
||||||
|
variant !== 'key' && `modern-sk-btn--${variant}`,
|
||||||
|
size === 'sm' && 'modern-sk-btn--sm',
|
||||||
|
iconOnly && 'modern-sk-btn--icon',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
Button.displayName = 'Button';
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { type ReactNode } from 'react';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
|
||||||
|
|
||||||
|
export const Callout = ({
|
||||||
|
variant = 'info',
|
||||||
|
icon,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
variant?: CalloutVariant;
|
||||||
|
icon?: ReactNode;
|
||||||
|
children: ReactNode;
|
||||||
|
}) => (
|
||||||
|
<div className={cx('modern-sk-callout', variant !== 'info' && `modern-sk-callout--${variant}`)}>
|
||||||
|
{icon && <span className="modern-sk-callout__icon">{icon}</span>}
|
||||||
|
<div className="modern-sk-callout__body">{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import { type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
export const Card = ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (
|
||||||
|
<div className={cx('modern-sk-card', className)} {...props} />
|
||||||
|
);
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { type ReactNode } from 'react';
|
||||||
|
import { Dialog as RDialog } from 'radix-ui';
|
||||||
|
import { X } from '@phosphor-icons/react';
|
||||||
|
import { IconButton } from '../icon-button';
|
||||||
|
|
||||||
|
export const Dialog = ({
|
||||||
|
trigger,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
children,
|
||||||
|
footer,
|
||||||
|
open,
|
||||||
|
defaultOpen,
|
||||||
|
onOpenChange,
|
||||||
|
modal,
|
||||||
|
}: {
|
||||||
|
trigger?: ReactNode;
|
||||||
|
title: string;
|
||||||
|
description?: ReactNode;
|
||||||
|
children?: ReactNode;
|
||||||
|
footer?: ReactNode;
|
||||||
|
open?: boolean;
|
||||||
|
defaultOpen?: boolean;
|
||||||
|
onOpenChange?: (o: boolean) => void;
|
||||||
|
modal?: boolean;
|
||||||
|
}) => (
|
||||||
|
<RDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>
|
||||||
|
{trigger && <RDialog.Trigger asChild>{trigger}</RDialog.Trigger>}
|
||||||
|
<RDialog.Portal>
|
||||||
|
<RDialog.Overlay className="modern-sk-overlay" />
|
||||||
|
<RDialog.Content className="modern-sk-dialog">
|
||||||
|
<RDialog.Title className="modern-sk-dialog__title">{title}</RDialog.Title>
|
||||||
|
{description && (
|
||||||
|
<RDialog.Description className="modern-sk-dialog__desc">
|
||||||
|
{description}
|
||||||
|
</RDialog.Description>
|
||||||
|
)}
|
||||||
|
{children && <div className="modern-sk-dialog__body">{children}</div>}
|
||||||
|
{footer && <div className="modern-sk-dialog__footer">{footer}</div>}
|
||||||
|
<RDialog.Close asChild>
|
||||||
|
<IconButton
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="modern-sk-dialog__close"
|
||||||
|
aria-label="Close"
|
||||||
|
>
|
||||||
|
<X size={14} weight="bold" />
|
||||||
|
</IconButton>
|
||||||
|
</RDialog.Close>
|
||||||
|
</RDialog.Content>
|
||||||
|
</RDialog.Portal>
|
||||||
|
</RDialog.Root>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const DialogClose = RDialog.Close;
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import { forwardRef, type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
import type { BtnVariant } from '../button';
|
||||||
|
|
||||||
|
type IconButtonProps = ComponentPropsWithoutRef<'button'> & {
|
||||||
|
variant?: BtnVariant;
|
||||||
|
size?: 'sm' | 'lg';
|
||||||
|
};
|
||||||
|
|
||||||
|
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
|
||||||
|
({ variant = 'key', size, className, ...props }, ref) => (
|
||||||
|
<button
|
||||||
|
ref={ref}
|
||||||
|
className={cx(
|
||||||
|
'modern-sk-btn',
|
||||||
|
'modern-sk-iconbtn',
|
||||||
|
variant !== 'key' && `modern-sk-btn--${variant}`,
|
||||||
|
size && `modern-sk-iconbtn--${size}`,
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
IconButton.displayName = 'IconButton';
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import { type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
export const List = ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (
|
||||||
|
<div className={cx('modern-sk-list', className)} {...props} />
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Row = ({
|
||||||
|
selected,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<'div'> & { selected?: boolean }) => (
|
||||||
|
<div
|
||||||
|
className={cx('modern-sk-row', selected && 'is-selected', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
||||||
|
import { DropdownMenu as RMenu } from 'radix-ui';
|
||||||
|
|
||||||
|
export const Menu = RMenu.Root;
|
||||||
|
export const MenuTrigger = RMenu.Trigger;
|
||||||
|
|
||||||
|
export const MenuContent = ({
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<typeof RMenu.Content>) => (
|
||||||
|
<RMenu.Portal>
|
||||||
|
<RMenu.Content className="modern-sk-menu" sideOffset={6} {...props}>
|
||||||
|
{children}
|
||||||
|
</RMenu.Content>
|
||||||
|
</RMenu.Portal>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const MenuItem = ({
|
||||||
|
icon,
|
||||||
|
shortcut,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<typeof RMenu.Item> & {
|
||||||
|
icon?: ReactNode;
|
||||||
|
shortcut?: string;
|
||||||
|
}) => (
|
||||||
|
<RMenu.Item className="modern-sk-menu-item" {...props}>
|
||||||
|
{icon && <span className="ph">{icon}</span>}
|
||||||
|
{children}
|
||||||
|
{shortcut && <span className="sc">{shortcut}</span>}
|
||||||
|
</RMenu.Item>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const MenuSeparator = () => (
|
||||||
|
<RMenu.Separator className="modern-sk-menu-sep" />
|
||||||
|
);
|
||||||
|
|
||||||
|
export const MenuSurface = ({ children }: { children: ReactNode }) => (
|
||||||
|
<div className="modern-sk-menu">{children}</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const MenuRow = ({
|
||||||
|
icon,
|
||||||
|
shortcut,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
icon?: ReactNode;
|
||||||
|
shortcut?: string;
|
||||||
|
children: ReactNode;
|
||||||
|
}) => (
|
||||||
|
<div className="modern-sk-menu-item">
|
||||||
|
{icon && <span className="ph">{icon}</span>}
|
||||||
|
{children}
|
||||||
|
{shortcut && <span className="sc">{shortcut}</span>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { Progress as RProgress } from 'radix-ui';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
export const Progress = ({
|
||||||
|
value = 0,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<typeof RProgress.Root>) => (
|
||||||
|
<RProgress.Root className={cx('modern-sk-progress', className)} value={value} {...props}>
|
||||||
|
<RProgress.Indicator
|
||||||
|
className="modern-sk-progress__indicator"
|
||||||
|
style={{ width: `${value}%` }}
|
||||||
|
/>
|
||||||
|
</RProgress.Root>
|
||||||
|
);
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import { type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { ScrollArea as RScrollArea } from 'radix-ui';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
export const ScrollArea = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<typeof RScrollArea.Root>) => (
|
||||||
|
<RScrollArea.Root className={cx('modern-sk-scroll', className)} {...props}>
|
||||||
|
<RScrollArea.Viewport className="modern-sk-scroll__viewport">
|
||||||
|
{children}
|
||||||
|
</RScrollArea.Viewport>
|
||||||
|
<RScrollArea.Scrollbar className="modern-sk-scroll__bar" orientation="vertical">
|
||||||
|
<RScrollArea.Thumb className="modern-sk-scroll__thumb" />
|
||||||
|
</RScrollArea.Scrollbar>
|
||||||
|
<RScrollArea.Scrollbar className="modern-sk-scroll__bar" orientation="horizontal">
|
||||||
|
<RScrollArea.Thumb className="modern-sk-scroll__thumb" />
|
||||||
|
</RScrollArea.Scrollbar>
|
||||||
|
<RScrollArea.Corner />
|
||||||
|
</RScrollArea.Root>
|
||||||
|
);
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
import { type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { ToggleGroup as RToggleGroup } from 'radix-ui';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
type SegProps = Omit<
|
||||||
|
ComponentPropsWithoutRef<typeof RToggleGroup.Root>,
|
||||||
|
'type' | 'onValueChange' | 'defaultValue' | 'value'
|
||||||
|
> & {
|
||||||
|
value: string;
|
||||||
|
defaultValue?: string;
|
||||||
|
onValueChange: (v: string) => void;
|
||||||
|
items: Array<{ value: string; label: string }>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SegmentedControl = ({
|
||||||
|
value,
|
||||||
|
onValueChange,
|
||||||
|
items,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: SegProps) => (
|
||||||
|
<RToggleGroup.Root
|
||||||
|
type="single"
|
||||||
|
className={cx('modern-sk-seg', className)}
|
||||||
|
value={value}
|
||||||
|
onValueChange={(v) => v && onValueChange(v)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{items.map((it) => (
|
||||||
|
<RToggleGroup.Item
|
||||||
|
key={it.value}
|
||||||
|
value={it.value}
|
||||||
|
className="modern-sk-seg__item"
|
||||||
|
>
|
||||||
|
{it.label}
|
||||||
|
</RToggleGroup.Item>
|
||||||
|
))}
|
||||||
|
</RToggleGroup.Root>
|
||||||
|
);
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import { type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { Select as RSelect } from 'radix-ui';
|
||||||
|
import { Check, CaretDown } from '@phosphor-icons/react';
|
||||||
|
|
||||||
|
type SelectProps = ComponentPropsWithoutRef<typeof RSelect.Root> & {
|
||||||
|
placeholder?: string;
|
||||||
|
items: Array<{ value: string; label: string }>;
|
||||||
|
'aria-label'?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Select = ({ placeholder, items, ...rest }: SelectProps) => (
|
||||||
|
<RSelect.Root {...rest}>
|
||||||
|
<RSelect.Trigger className="modern-sk-select" aria-label={rest['aria-label']}>
|
||||||
|
<RSelect.Value placeholder={placeholder} />
|
||||||
|
<RSelect.Icon className="modern-sk-select__icon">
|
||||||
|
<CaretDown size={12} weight="bold" />
|
||||||
|
</RSelect.Icon>
|
||||||
|
</RSelect.Trigger>
|
||||||
|
<RSelect.Portal>
|
||||||
|
<RSelect.Content
|
||||||
|
className="modern-sk-select__content"
|
||||||
|
position="popper"
|
||||||
|
sideOffset={6}
|
||||||
|
>
|
||||||
|
<RSelect.Viewport>
|
||||||
|
{items.map((it) => (
|
||||||
|
<RSelect.Item
|
||||||
|
key={it.value}
|
||||||
|
value={it.value}
|
||||||
|
className="modern-sk-select__item"
|
||||||
|
>
|
||||||
|
<RSelect.ItemText>{it.label}</RSelect.ItemText>
|
||||||
|
<RSelect.ItemIndicator className="modern-sk-select__item-indicator">
|
||||||
|
<Check size={14} weight="bold" />
|
||||||
|
</RSelect.ItemIndicator>
|
||||||
|
</RSelect.Item>
|
||||||
|
))}
|
||||||
|
</RSelect.Viewport>
|
||||||
|
</RSelect.Content>
|
||||||
|
</RSelect.Portal>
|
||||||
|
</RSelect.Root>
|
||||||
|
);
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
||||||
|
import {
|
||||||
|
Switch as RSwitch,
|
||||||
|
Checkbox as RCheckbox,
|
||||||
|
RadioGroup as RRadioGroup,
|
||||||
|
} from 'radix-ui';
|
||||||
|
|
||||||
|
export const Switch = (props: ComponentPropsWithoutRef<typeof RSwitch.Root>) => (
|
||||||
|
<RSwitch.Root className="modern-sk-switch" {...props}>
|
||||||
|
<RSwitch.Thumb className="modern-sk-switch__thumb" />
|
||||||
|
</RSwitch.Root>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Checkbox = (props: ComponentPropsWithoutRef<typeof RCheckbox.Root>) => (
|
||||||
|
<RCheckbox.Root className="modern-sk-check" {...props}>
|
||||||
|
<RCheckbox.Indicator className="modern-sk-check__indicator">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="var(--lime-ink)"
|
||||||
|
strokeWidth={3.5}
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M4 12l5 5L20 6" />
|
||||||
|
</svg>
|
||||||
|
</RCheckbox.Indicator>
|
||||||
|
</RCheckbox.Root>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const RadioGroup = RRadioGroup.Root;
|
||||||
|
|
||||||
|
export const RadioItem = ({
|
||||||
|
value,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<typeof RRadioGroup.Item>) => (
|
||||||
|
<RRadioGroup.Item className="modern-sk-radio" value={value} {...props}>
|
||||||
|
<RRadioGroup.Indicator className="modern-sk-radio__indicator" />
|
||||||
|
</RRadioGroup.Item>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Control = ({
|
||||||
|
children,
|
||||||
|
control,
|
||||||
|
}: {
|
||||||
|
children: ReactNode;
|
||||||
|
control: ReactNode;
|
||||||
|
}) => (
|
||||||
|
<label className="modern-sk-control">
|
||||||
|
{control}
|
||||||
|
{children}
|
||||||
|
</label>
|
||||||
|
);
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { Slider as RSlider } from 'radix-ui';
|
||||||
|
|
||||||
|
export const Slider = (props: ComponentPropsWithoutRef<typeof RSlider.Root>) => (
|
||||||
|
<RSlider.Root className="modern-sk-slider" {...props}>
|
||||||
|
<RSlider.Track className="modern-sk-slider__track">
|
||||||
|
<RSlider.Range className="modern-sk-slider__range" />
|
||||||
|
</RSlider.Track>
|
||||||
|
<RSlider.Thumb className="modern-sk-slider__thumb" aria-label="Value" />
|
||||||
|
</RSlider.Root>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Stepper = ({
|
||||||
|
onDecrement,
|
||||||
|
onIncrement,
|
||||||
|
}: {
|
||||||
|
onDecrement: () => void;
|
||||||
|
onIncrement: () => void;
|
||||||
|
}) => (
|
||||||
|
<div className="modern-sk-stepper">
|
||||||
|
<button type="button" onClick={onDecrement} aria-label="Decrease">
|
||||||
|
−
|
||||||
|
</button>
|
||||||
|
<button type="button" onClick={onIncrement} aria-label="Increase">
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import { useId, type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
export const Spinner = ({
|
||||||
|
size,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<'span'> & { size?: 'sm' | 'lg' }) => {
|
||||||
|
const gid = `modern-sk-groove-${useId()}`;
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
role="status"
|
||||||
|
aria-label="Loading"
|
||||||
|
className={cx('modern-sk-spinner', size && `modern-sk-spinner--${size}`, className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<svg viewBox="0 0 36 36" fill="none">
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id={gid}
|
||||||
|
x1="18"
|
||||||
|
y1="4"
|
||||||
|
x2="18"
|
||||||
|
y2="32"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop offset="0" stopColor="var(--spin-groove-1)" />
|
||||||
|
<stop offset="1" stopColor="var(--spin-groove-2)" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<circle cx="18" cy="18" r="14" stroke={`url(#${gid})`} strokeWidth="5" />
|
||||||
|
<circle
|
||||||
|
className="modern-sk-spinner__arc"
|
||||||
|
cx="18"
|
||||||
|
cy="18"
|
||||||
|
r="14"
|
||||||
|
stroke="var(--lime)"
|
||||||
|
strokeWidth="3"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeDasharray="22 88"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import { type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
export const Table = ({ children, ...props }: ComponentPropsWithoutRef<'table'>) => (
|
||||||
|
<div className="modern-sk-table-wrap">
|
||||||
|
<table className="modern-sk-table" {...props}>
|
||||||
|
{children}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const THead = (p: ComponentPropsWithoutRef<'thead'>) => <thead {...p} />;
|
||||||
|
export const TBody = (p: ComponentPropsWithoutRef<'tbody'>) => <tbody {...p} />;
|
||||||
|
|
||||||
|
export const Tr = ({
|
||||||
|
selected,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<'tr'> & { selected?: boolean }) => (
|
||||||
|
<tr className={cx(selected && 'is-selected', className)} {...props} />
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Th = (p: ComponentPropsWithoutRef<'th'>) => <th {...p} />;
|
||||||
|
export const Td = (p: ComponentPropsWithoutRef<'td'>) => <td {...p} />;
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { type ComponentPropsWithoutRef } from 'react';
|
||||||
|
import { Tabs as RTabs } from 'radix-ui';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
export const Tabs = RTabs.Root;
|
||||||
|
|
||||||
|
export const TabsList = ({
|
||||||
|
items,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: { items: Array<{ value: string; label: string }> } & Omit<
|
||||||
|
ComponentPropsWithoutRef<typeof RTabs.List>,
|
||||||
|
'children'
|
||||||
|
>) => (
|
||||||
|
<RTabs.List className={cx('modern-sk-tabs', className)} {...props}>
|
||||||
|
{items.map((it) => (
|
||||||
|
<RTabs.Trigger
|
||||||
|
key={it.value}
|
||||||
|
value={it.value}
|
||||||
|
className="modern-sk-tabs__trigger"
|
||||||
|
>
|
||||||
|
{it.label}
|
||||||
|
</RTabs.Trigger>
|
||||||
|
))}
|
||||||
|
</RTabs.List>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const TabsContent = RTabs.Content;
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
export const TextField = forwardRef<HTMLInputElement, ComponentPropsWithoutRef<'input'>>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<input ref={ref} className={cx('modern-sk-field', className)} {...props} />
|
||||||
|
),
|
||||||
|
);
|
||||||
|
TextField.displayName = 'TextField';
|
||||||
|
|
||||||
|
export const TextArea = forwardRef<HTMLTextAreaElement, ComponentPropsWithoutRef<'textarea'>>(
|
||||||
|
({ className, ...props }, ref) => (
|
||||||
|
<textarea ref={ref} className={cx('modern-sk-field', className)} {...props} />
|
||||||
|
),
|
||||||
|
);
|
||||||
|
TextArea.displayName = 'TextArea';
|
||||||
|
|
||||||
|
export const SearchField = ({
|
||||||
|
icon,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<'input'> & { icon: ReactNode }) => (
|
||||||
|
<div className="modern-sk-search">
|
||||||
|
<span className="ph">{icon}</span>
|
||||||
|
<TextField {...props} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
||||||
|
import { Tooltip as RTooltip } from 'radix-ui';
|
||||||
|
import { cx } from '../utils';
|
||||||
|
|
||||||
|
type TooltipProps = {
|
||||||
|
content: ReactNode;
|
||||||
|
children: ReactNode;
|
||||||
|
delayDuration?: number;
|
||||||
|
open?: boolean;
|
||||||
|
defaultOpen?: boolean;
|
||||||
|
onOpenChange?: (o: boolean) => void;
|
||||||
|
} & Omit<ComponentPropsWithoutRef<typeof RTooltip.Content>, 'children'>;
|
||||||
|
|
||||||
|
export const Tooltip = ({
|
||||||
|
content,
|
||||||
|
children,
|
||||||
|
delayDuration,
|
||||||
|
open,
|
||||||
|
defaultOpen,
|
||||||
|
onOpenChange,
|
||||||
|
sideOffset = 6,
|
||||||
|
className,
|
||||||
|
...contentProps
|
||||||
|
}: TooltipProps) => (
|
||||||
|
<RTooltip.Root
|
||||||
|
delayDuration={delayDuration}
|
||||||
|
open={open}
|
||||||
|
defaultOpen={defaultOpen}
|
||||||
|
onOpenChange={onOpenChange}
|
||||||
|
>
|
||||||
|
<RTooltip.Trigger asChild>{children}</RTooltip.Trigger>
|
||||||
|
<RTooltip.Portal>
|
||||||
|
<RTooltip.Content
|
||||||
|
className={cx('modern-sk-tooltip', className)}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
{...contentProps}
|
||||||
|
>
|
||||||
|
{content}
|
||||||
|
</RTooltip.Content>
|
||||||
|
</RTooltip.Portal>
|
||||||
|
</RTooltip.Root>
|
||||||
|
);
|
||||||
+21
-679
@@ -1,679 +1,21 @@
|
|||||||
/* ============================================================
|
export * from './button';
|
||||||
ModernSK UI — Radix Primitives wrapped in the ModernSK look.
|
export * from './icon-button';
|
||||||
Logic/accessibility from Radix; every pixel from the tokens in
|
export * from './text-field';
|
||||||
styles/tokens.css + styles/components.css.
|
export * from './select';
|
||||||
============================================================ */
|
export * from './selection';
|
||||||
import {
|
export * from './segmented-control';
|
||||||
forwardRef,
|
export * from './slider';
|
||||||
useId,
|
export * from './tabs';
|
||||||
type ComponentPropsWithoutRef,
|
export * from './progress';
|
||||||
type CSSProperties,
|
export * from './badge';
|
||||||
type ReactNode,
|
export * from './card';
|
||||||
} from 'react';
|
export * from './list';
|
||||||
import {
|
export * from './menu';
|
||||||
Switch as RSwitch,
|
export * from './tooltip';
|
||||||
Checkbox as RCheckbox,
|
export * from './spinner';
|
||||||
RadioGroup as RRadioGroup,
|
export * from './callout';
|
||||||
Tabs as RTabs,
|
export * from './table';
|
||||||
Slider as RSlider,
|
export * from './scroll-area';
|
||||||
DropdownMenu as RMenu,
|
export * from './dialog';
|
||||||
Tooltip as RTooltip,
|
export * from './alert-dialog';
|
||||||
Progress as RProgress,
|
export * from './window';
|
||||||
Select as RSelect,
|
|
||||||
ToggleGroup as RToggleGroup,
|
|
||||||
Dialog as RDialog,
|
|
||||||
AlertDialog as RAlertDialog,
|
|
||||||
ScrollArea as RScrollArea,
|
|
||||||
} from 'radix-ui';
|
|
||||||
import { Check, CaretDown, X } from '@phosphor-icons/react';
|
|
||||||
|
|
||||||
const cx = (...c: Array<string | false | undefined>) =>
|
|
||||||
c.filter(Boolean).join(' ');
|
|
||||||
|
|
||||||
/* ---------- BUTTON ---------- */
|
|
||||||
type BtnVariant = 'key' | 'primary' | 'ember' | 'ghost';
|
|
||||||
type ButtonProps = ComponentPropsWithoutRef<'button'> & {
|
|
||||||
variant?: BtnVariant;
|
|
||||||
size?: 'sm';
|
|
||||||
iconOnly?: boolean;
|
|
||||||
};
|
|
||||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
||||||
({ variant = 'key', size, iconOnly, className, ...props }, ref) => (
|
|
||||||
<button
|
|
||||||
ref={ref}
|
|
||||||
className={cx(
|
|
||||||
'modern-sk-btn',
|
|
||||||
variant !== 'key' && `modern-sk-btn--${variant}`,
|
|
||||||
size === 'sm' && 'modern-sk-btn--sm',
|
|
||||||
iconOnly && 'modern-sk-btn--icon',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
);
|
|
||||||
Button.displayName = 'Button';
|
|
||||||
|
|
||||||
/* ---------- TEXT FIELD ---------- */
|
|
||||||
export const TextField = forwardRef<
|
|
||||||
HTMLInputElement,
|
|
||||||
ComponentPropsWithoutRef<'input'>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<input ref={ref} className={cx('modern-sk-field', className)} {...props} />
|
|
||||||
));
|
|
||||||
TextField.displayName = 'TextField';
|
|
||||||
|
|
||||||
export const TextArea = forwardRef<
|
|
||||||
HTMLTextAreaElement,
|
|
||||||
ComponentPropsWithoutRef<'textarea'>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<textarea ref={ref} className={cx('modern-sk-field', className)} {...props} />
|
|
||||||
));
|
|
||||||
TextArea.displayName = 'TextArea';
|
|
||||||
|
|
||||||
export const SearchField = ({
|
|
||||||
icon,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<'input'> & { icon: ReactNode }) => (
|
|
||||||
<div className="modern-sk-search">
|
|
||||||
<span className="ph">{icon}</span>
|
|
||||||
<TextField {...props} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- SELECT (Radix) ---------- */
|
|
||||||
type SelectProps = {
|
|
||||||
value?: string;
|
|
||||||
defaultValue?: string;
|
|
||||||
onValueChange?: (v: string) => void;
|
|
||||||
placeholder?: string;
|
|
||||||
items: Array<{ value: string; label: string }>;
|
|
||||||
'aria-label'?: string;
|
|
||||||
};
|
|
||||||
export const Select = ({
|
|
||||||
value,
|
|
||||||
defaultValue,
|
|
||||||
onValueChange,
|
|
||||||
placeholder,
|
|
||||||
items,
|
|
||||||
...rest
|
|
||||||
}: SelectProps) => (
|
|
||||||
<RSelect.Root
|
|
||||||
value={value}
|
|
||||||
defaultValue={defaultValue}
|
|
||||||
onValueChange={onValueChange}
|
|
||||||
>
|
|
||||||
<RSelect.Trigger className="modern-sk-select" aria-label={rest['aria-label']}>
|
|
||||||
<RSelect.Value placeholder={placeholder} />
|
|
||||||
<RSelect.Icon className="modern-sk-select__icon">
|
|
||||||
<CaretDown size={12} weight="bold" />
|
|
||||||
</RSelect.Icon>
|
|
||||||
</RSelect.Trigger>
|
|
||||||
<RSelect.Portal>
|
|
||||||
<RSelect.Content
|
|
||||||
className="modern-sk-select__content"
|
|
||||||
position="popper"
|
|
||||||
sideOffset={6}
|
|
||||||
>
|
|
||||||
<RSelect.Viewport>
|
|
||||||
{items.map((it) => (
|
|
||||||
<RSelect.Item
|
|
||||||
key={it.value}
|
|
||||||
value={it.value}
|
|
||||||
className="modern-sk-select__item"
|
|
||||||
>
|
|
||||||
<RSelect.ItemText>{it.label}</RSelect.ItemText>
|
|
||||||
<RSelect.ItemIndicator className="modern-sk-select__item-indicator">
|
|
||||||
<Check size={14} weight="bold" />
|
|
||||||
</RSelect.ItemIndicator>
|
|
||||||
</RSelect.Item>
|
|
||||||
))}
|
|
||||||
</RSelect.Viewport>
|
|
||||||
</RSelect.Content>
|
|
||||||
</RSelect.Portal>
|
|
||||||
</RSelect.Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- SWITCH ---------- */
|
|
||||||
export const Switch = (
|
|
||||||
props: ComponentPropsWithoutRef<typeof RSwitch.Root>,
|
|
||||||
) => (
|
|
||||||
<RSwitch.Root className="modern-sk-switch" {...props}>
|
|
||||||
<RSwitch.Thumb className="modern-sk-switch__thumb" />
|
|
||||||
</RSwitch.Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- CHECKBOX ---------- */
|
|
||||||
export const Checkbox = (
|
|
||||||
props: ComponentPropsWithoutRef<typeof RCheckbox.Root>,
|
|
||||||
) => (
|
|
||||||
<RCheckbox.Root className="modern-sk-check" {...props}>
|
|
||||||
<RCheckbox.Indicator className="modern-sk-check__indicator">
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="var(--lime-ink)"
|
|
||||||
strokeWidth={3.5}
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
>
|
|
||||||
<path d="M4 12l5 5L20 6" />
|
|
||||||
</svg>
|
|
||||||
</RCheckbox.Indicator>
|
|
||||||
</RCheckbox.Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- RADIO GROUP ---------- */
|
|
||||||
export const RadioGroup = RRadioGroup.Root;
|
|
||||||
export const RadioItem = ({
|
|
||||||
value,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<typeof RRadioGroup.Item>) => (
|
|
||||||
<RRadioGroup.Item className="modern-sk-radio" value={value} {...props}>
|
|
||||||
<RRadioGroup.Indicator className="modern-sk-radio__indicator" />
|
|
||||||
</RRadioGroup.Item>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* control + label row helper */
|
|
||||||
export const Control = ({
|
|
||||||
children,
|
|
||||||
control,
|
|
||||||
}: {
|
|
||||||
children: ReactNode;
|
|
||||||
control: ReactNode;
|
|
||||||
}) => (
|
|
||||||
<label className="modern-sk-control">
|
|
||||||
{control}
|
|
||||||
{children}
|
|
||||||
</label>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- SEGMENTED CONTROL (ToggleGroup single) ---------- */
|
|
||||||
type SegProps = {
|
|
||||||
value: string;
|
|
||||||
onValueChange: (v: string) => void;
|
|
||||||
items: Array<{ value: string; label: string }>;
|
|
||||||
};
|
|
||||||
export const SegmentedControl = ({
|
|
||||||
value,
|
|
||||||
onValueChange,
|
|
||||||
items,
|
|
||||||
}: SegProps) => (
|
|
||||||
<RToggleGroup.Root
|
|
||||||
type="single"
|
|
||||||
className="modern-sk-seg"
|
|
||||||
value={value}
|
|
||||||
onValueChange={(v) => v && onValueChange(v)}
|
|
||||||
>
|
|
||||||
{items.map((it) => (
|
|
||||||
<RToggleGroup.Item
|
|
||||||
key={it.value}
|
|
||||||
value={it.value}
|
|
||||||
className="modern-sk-seg__item"
|
|
||||||
>
|
|
||||||
{it.label}
|
|
||||||
</RToggleGroup.Item>
|
|
||||||
))}
|
|
||||||
</RToggleGroup.Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- SLIDER ---------- */
|
|
||||||
export const Slider = (
|
|
||||||
props: ComponentPropsWithoutRef<typeof RSlider.Root>,
|
|
||||||
) => (
|
|
||||||
<RSlider.Root className="modern-sk-slider" {...props}>
|
|
||||||
<RSlider.Track className="modern-sk-slider__track">
|
|
||||||
<RSlider.Range className="modern-sk-slider__range" />
|
|
||||||
</RSlider.Track>
|
|
||||||
<RSlider.Thumb className="modern-sk-slider__thumb" aria-label="Value" />
|
|
||||||
</RSlider.Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- STEPPER ---------- */
|
|
||||||
export const Stepper = ({
|
|
||||||
onDecrement,
|
|
||||||
onIncrement,
|
|
||||||
}: {
|
|
||||||
onDecrement: () => void;
|
|
||||||
onIncrement: () => void;
|
|
||||||
}) => (
|
|
||||||
<div className="modern-sk-stepper">
|
|
||||||
<button type="button" onClick={onDecrement} aria-label="Decrease">
|
|
||||||
−
|
|
||||||
</button>
|
|
||||||
<button type="button" onClick={onIncrement} aria-label="Increase">
|
|
||||||
+
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- TABS ---------- */
|
|
||||||
export const Tabs = RTabs.Root;
|
|
||||||
export const TabsList = ({
|
|
||||||
items,
|
|
||||||
}: {
|
|
||||||
items: Array<{ value: string; label: string }>;
|
|
||||||
}) => (
|
|
||||||
<RTabs.List className="modern-sk-tabs">
|
|
||||||
{items.map((it) => (
|
|
||||||
<RTabs.Trigger
|
|
||||||
key={it.value}
|
|
||||||
value={it.value}
|
|
||||||
className="modern-sk-tabs__trigger"
|
|
||||||
>
|
|
||||||
{it.label}
|
|
||||||
</RTabs.Trigger>
|
|
||||||
))}
|
|
||||||
</RTabs.List>
|
|
||||||
);
|
|
||||||
export const TabsContent = RTabs.Content;
|
|
||||||
|
|
||||||
/* ---------- PROGRESS ---------- */
|
|
||||||
export const Progress = ({ value = 0 }: { value?: number }) => (
|
|
||||||
<RProgress.Root className="modern-sk-progress" value={value}>
|
|
||||||
<RProgress.Indicator
|
|
||||||
className="modern-sk-progress__indicator"
|
|
||||||
style={{ width: `${value}%` }}
|
|
||||||
/>
|
|
||||||
</RProgress.Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- BADGE ---------- */
|
|
||||||
type BadgeVariant = 'lime' | 'ember' | 'neutral' | 'outline';
|
|
||||||
export const Badge = ({
|
|
||||||
variant = 'neutral',
|
|
||||||
dot,
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<'span'> & {
|
|
||||||
variant?: BadgeVariant;
|
|
||||||
dot?: boolean;
|
|
||||||
}) => (
|
|
||||||
<span
|
|
||||||
className={cx(
|
|
||||||
'modern-sk-badge',
|
|
||||||
`modern-sk-badge--${variant}`,
|
|
||||||
dot && 'modern-sk-badge--dot',
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- CHIP ---------- */
|
|
||||||
export const Chip = ({
|
|
||||||
children,
|
|
||||||
onRemove,
|
|
||||||
}: {
|
|
||||||
children: ReactNode;
|
|
||||||
onRemove?: () => void;
|
|
||||||
}) => (
|
|
||||||
<span className="modern-sk-chip">
|
|
||||||
{children}
|
|
||||||
{onRemove && (
|
|
||||||
<button type="button" className="x" onClick={onRemove} aria-label="Remove">
|
|
||||||
×
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- CARD ---------- */
|
|
||||||
export const Card = ({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<'div'>) => (
|
|
||||||
<div className={cx('modern-sk-card', className)} {...props} />
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- LIST ---------- */
|
|
||||||
export const List = ({
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<'div'>) => (
|
|
||||||
<div className={cx('modern-sk-list', className)} {...props} />
|
|
||||||
);
|
|
||||||
export const Row = ({
|
|
||||||
selected,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<'div'> & { selected?: boolean }) => (
|
|
||||||
<div
|
|
||||||
className={cx('modern-sk-row', selected && 'is-selected', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- DROPDOWN MENU (Radix) ---------- */
|
|
||||||
export const Menu = RMenu.Root;
|
|
||||||
export const MenuTrigger = RMenu.Trigger;
|
|
||||||
export const MenuContent = ({
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<typeof RMenu.Content>) => (
|
|
||||||
<RMenu.Portal>
|
|
||||||
<RMenu.Content className="modern-sk-menu" sideOffset={6} {...props}>
|
|
||||||
{children}
|
|
||||||
</RMenu.Content>
|
|
||||||
</RMenu.Portal>
|
|
||||||
);
|
|
||||||
export const MenuItem = ({
|
|
||||||
icon,
|
|
||||||
shortcut,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<typeof RMenu.Item> & {
|
|
||||||
icon?: ReactNode;
|
|
||||||
shortcut?: string;
|
|
||||||
}) => (
|
|
||||||
<RMenu.Item className="modern-sk-menu-item" {...props}>
|
|
||||||
{icon && <span className="ph">{icon}</span>}
|
|
||||||
{children}
|
|
||||||
{shortcut && <span className="sc">{shortcut}</span>}
|
|
||||||
</RMenu.Item>
|
|
||||||
);
|
|
||||||
export const MenuSeparator = () => (
|
|
||||||
<RMenu.Separator className="modern-sk-menu-sep" />
|
|
||||||
);
|
|
||||||
|
|
||||||
/* Static menu surface — for showcasing the menu without a trigger. */
|
|
||||||
export const MenuSurface = ({ children }: { children: ReactNode }) => (
|
|
||||||
<div className="modern-sk-menu">{children}</div>
|
|
||||||
);
|
|
||||||
export const MenuRow = ({
|
|
||||||
icon,
|
|
||||||
shortcut,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
icon?: ReactNode;
|
|
||||||
shortcut?: string;
|
|
||||||
children: ReactNode;
|
|
||||||
}) => (
|
|
||||||
<div className="modern-sk-menu-item">
|
|
||||||
{icon && <span className="ph">{icon}</span>}
|
|
||||||
{children}
|
|
||||||
{shortcut && <span className="sc">{shortcut}</span>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- TOOLTIP (Radix) ---------- */
|
|
||||||
export const Tooltip = ({
|
|
||||||
content,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
content: ReactNode;
|
|
||||||
children: ReactNode;
|
|
||||||
}) => (
|
|
||||||
<RTooltip.Root>
|
|
||||||
<RTooltip.Trigger asChild>{children}</RTooltip.Trigger>
|
|
||||||
<RTooltip.Portal>
|
|
||||||
<RTooltip.Content className="modern-sk-tooltip" sideOffset={6}>
|
|
||||||
{content}
|
|
||||||
</RTooltip.Content>
|
|
||||||
</RTooltip.Portal>
|
|
||||||
</RTooltip.Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- ICON BUTTON ---------- */
|
|
||||||
type IconButtonProps = ComponentPropsWithoutRef<'button'> & {
|
|
||||||
variant?: BtnVariant;
|
|
||||||
size?: 'sm' | 'lg';
|
|
||||||
};
|
|
||||||
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
|
|
||||||
({ variant = 'key', size, className, ...props }, ref) => (
|
|
||||||
<button
|
|
||||||
ref={ref}
|
|
||||||
className={cx(
|
|
||||||
'modern-sk-btn',
|
|
||||||
'modern-sk-iconbtn',
|
|
||||||
variant !== 'key' && `modern-sk-btn--${variant}`,
|
|
||||||
size && `modern-sk-iconbtn--${size}`,
|
|
||||||
className,
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
);
|
|
||||||
IconButton.displayName = 'IconButton';
|
|
||||||
|
|
||||||
/* ---------- SPINNER ----------
|
|
||||||
Carved donut groove (sunk like the switch well, dark rim at top →
|
|
||||||
light catch at the bottom) with a glossy lime arc spinning inside it. */
|
|
||||||
export const Spinner = ({
|
|
||||||
size,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<'span'> & { size?: 'sm' | 'lg' }) => {
|
|
||||||
const gid = `modern-sk-groove-${useId()}`;
|
|
||||||
return (
|
|
||||||
<span
|
|
||||||
role="status"
|
|
||||||
aria-label="Loading"
|
|
||||||
className={cx('modern-sk-spinner', size && `modern-sk-spinner--${size}`, className)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<svg viewBox="0 0 36 36" fill="none">
|
|
||||||
<defs>
|
|
||||||
<linearGradient
|
|
||||||
id={gid}
|
|
||||||
x1="18"
|
|
||||||
y1="4"
|
|
||||||
x2="18"
|
|
||||||
y2="32"
|
|
||||||
gradientUnits="userSpaceOnUse"
|
|
||||||
>
|
|
||||||
<stop offset="0" stopColor="var(--spin-groove-1)" />
|
|
||||||
<stop offset="1" stopColor="var(--spin-groove-2)" />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
{/* carved channel */}
|
|
||||||
<circle cx="18" cy="18" r="14" stroke={`url(#${gid})`} strokeWidth="5" />
|
|
||||||
{/* glossy lime arc, nested inside the groove with rounded ends */}
|
|
||||||
<circle
|
|
||||||
className="modern-sk-spinner__arc"
|
|
||||||
cx="18"
|
|
||||||
cy="18"
|
|
||||||
r="14"
|
|
||||||
stroke="var(--lime)"
|
|
||||||
strokeWidth="3"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeDasharray="22 88"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
/* ---------- CALLOUT ---------- */
|
|
||||||
type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
|
|
||||||
export const Callout = ({
|
|
||||||
variant = 'info',
|
|
||||||
icon,
|
|
||||||
children,
|
|
||||||
}: {
|
|
||||||
variant?: CalloutVariant;
|
|
||||||
icon?: ReactNode;
|
|
||||||
children: ReactNode;
|
|
||||||
}) => (
|
|
||||||
<div className={cx('modern-sk-callout', variant !== 'info' && `modern-sk-callout--${variant}`)}>
|
|
||||||
{icon && <span className="modern-sk-callout__icon">{icon}</span>}
|
|
||||||
<div className="modern-sk-callout__body">{children}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- TABLE ---------- */
|
|
||||||
export const Table = ({
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<'table'>) => (
|
|
||||||
<div className="modern-sk-table-wrap">
|
|
||||||
<table className="modern-sk-table" {...props}>
|
|
||||||
{children}
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
export const THead = (p: ComponentPropsWithoutRef<'thead'>) => <thead {...p} />;
|
|
||||||
export const TBody = (p: ComponentPropsWithoutRef<'tbody'>) => <tbody {...p} />;
|
|
||||||
export const Tr = ({
|
|
||||||
selected,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<'tr'> & { selected?: boolean }) => (
|
|
||||||
<tr className={cx(selected && 'is-selected', className)} {...props} />
|
|
||||||
);
|
|
||||||
export const Th = (p: ComponentPropsWithoutRef<'th'>) => <th {...p} />;
|
|
||||||
export const Td = (p: ComponentPropsWithoutRef<'td'>) => <td {...p} />;
|
|
||||||
|
|
||||||
/* ---------- SCROLL AREA (Radix) ---------- */
|
|
||||||
export const ScrollArea = ({
|
|
||||||
children,
|
|
||||||
className,
|
|
||||||
style,
|
|
||||||
}: {
|
|
||||||
children: ReactNode;
|
|
||||||
className?: string;
|
|
||||||
style?: CSSProperties;
|
|
||||||
}) => (
|
|
||||||
<RScrollArea.Root className={cx('modern-sk-scroll', className)} style={style}>
|
|
||||||
<RScrollArea.Viewport className="modern-sk-scroll__viewport">
|
|
||||||
{children}
|
|
||||||
</RScrollArea.Viewport>
|
|
||||||
<RScrollArea.Scrollbar className="modern-sk-scroll__bar" orientation="vertical">
|
|
||||||
<RScrollArea.Thumb className="modern-sk-scroll__thumb" />
|
|
||||||
</RScrollArea.Scrollbar>
|
|
||||||
<RScrollArea.Scrollbar className="modern-sk-scroll__bar" orientation="horizontal">
|
|
||||||
<RScrollArea.Thumb className="modern-sk-scroll__thumb" />
|
|
||||||
</RScrollArea.Scrollbar>
|
|
||||||
<RScrollArea.Corner />
|
|
||||||
</RScrollArea.Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- DIALOG / MODAL (Radix Dialog) ---------- */
|
|
||||||
export const Dialog = ({
|
|
||||||
trigger,
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
children,
|
|
||||||
footer,
|
|
||||||
open,
|
|
||||||
onOpenChange,
|
|
||||||
}: {
|
|
||||||
trigger?: ReactNode;
|
|
||||||
title: string;
|
|
||||||
description?: ReactNode;
|
|
||||||
children?: ReactNode;
|
|
||||||
footer?: ReactNode;
|
|
||||||
open?: boolean;
|
|
||||||
onOpenChange?: (o: boolean) => void;
|
|
||||||
}) => (
|
|
||||||
<RDialog.Root open={open} onOpenChange={onOpenChange}>
|
|
||||||
{trigger && <RDialog.Trigger asChild>{trigger}</RDialog.Trigger>}
|
|
||||||
<RDialog.Portal>
|
|
||||||
<RDialog.Overlay className="modern-sk-overlay" />
|
|
||||||
<RDialog.Content className="modern-sk-dialog">
|
|
||||||
<RDialog.Title className="modern-sk-dialog__title">{title}</RDialog.Title>
|
|
||||||
{description && (
|
|
||||||
<RDialog.Description className="modern-sk-dialog__desc">
|
|
||||||
{description}
|
|
||||||
</RDialog.Description>
|
|
||||||
)}
|
|
||||||
{children && <div className="modern-sk-dialog__body">{children}</div>}
|
|
||||||
{footer && <div className="modern-sk-dialog__footer">{footer}</div>}
|
|
||||||
<RDialog.Close asChild>
|
|
||||||
<IconButton
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="modern-sk-dialog__close"
|
|
||||||
aria-label="Close"
|
|
||||||
>
|
|
||||||
<X size={14} weight="bold" />
|
|
||||||
</IconButton>
|
|
||||||
</RDialog.Close>
|
|
||||||
</RDialog.Content>
|
|
||||||
</RDialog.Portal>
|
|
||||||
</RDialog.Root>
|
|
||||||
);
|
|
||||||
/* Low-level Dialog parts (for custom compositions). */
|
|
||||||
export const DialogClose = RDialog.Close;
|
|
||||||
|
|
||||||
/* ---------- ALERT DIALOG (Radix AlertDialog) ---------- */
|
|
||||||
export const AlertDialog = ({
|
|
||||||
trigger,
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
cancelLabel = 'Cancel',
|
|
||||||
actionLabel = 'Confirm',
|
|
||||||
destructive,
|
|
||||||
onAction,
|
|
||||||
open,
|
|
||||||
onOpenChange,
|
|
||||||
}: {
|
|
||||||
trigger?: ReactNode;
|
|
||||||
title: string;
|
|
||||||
description?: ReactNode;
|
|
||||||
cancelLabel?: string;
|
|
||||||
actionLabel?: string;
|
|
||||||
destructive?: boolean;
|
|
||||||
onAction?: () => void;
|
|
||||||
open?: boolean;
|
|
||||||
onOpenChange?: (o: boolean) => void;
|
|
||||||
}) => (
|
|
||||||
<RAlertDialog.Root open={open} onOpenChange={onOpenChange}>
|
|
||||||
{trigger && <RAlertDialog.Trigger asChild>{trigger}</RAlertDialog.Trigger>}
|
|
||||||
<RAlertDialog.Portal>
|
|
||||||
<RAlertDialog.Overlay className="modern-sk-overlay" />
|
|
||||||
<RAlertDialog.Content className="modern-sk-dialog">
|
|
||||||
<RAlertDialog.Title className="modern-sk-dialog__title">
|
|
||||||
{title}
|
|
||||||
</RAlertDialog.Title>
|
|
||||||
{description && (
|
|
||||||
<RAlertDialog.Description className="modern-sk-dialog__desc">
|
|
||||||
{description}
|
|
||||||
</RAlertDialog.Description>
|
|
||||||
)}
|
|
||||||
<div className="modern-sk-dialog__footer">
|
|
||||||
<RAlertDialog.Cancel asChild>
|
|
||||||
<Button variant="ghost">{cancelLabel}</Button>
|
|
||||||
</RAlertDialog.Cancel>
|
|
||||||
<RAlertDialog.Action asChild>
|
|
||||||
<Button
|
|
||||||
variant={destructive ? 'ember' : 'primary'}
|
|
||||||
onClick={onAction}
|
|
||||||
>
|
|
||||||
{actionLabel}
|
|
||||||
</Button>
|
|
||||||
</RAlertDialog.Action>
|
|
||||||
</div>
|
|
||||||
</RAlertDialog.Content>
|
|
||||||
</RAlertDialog.Portal>
|
|
||||||
</RAlertDialog.Root>
|
|
||||||
);
|
|
||||||
|
|
||||||
/* ---------- WINDOW CHROME ---------- */
|
|
||||||
export const Window = ({
|
|
||||||
title,
|
|
||||||
badge,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
}: ComponentPropsWithoutRef<'div'> & {
|
|
||||||
title: string;
|
|
||||||
badge?: ReactNode;
|
|
||||||
}) => (
|
|
||||||
<div className="modern-sk-window" {...props}>
|
|
||||||
<div className="modern-sk-titlebar">
|
|
||||||
<span className="modern-sk-traffic r" />
|
|
||||||
<span className="modern-sk-traffic y" />
|
|
||||||
<span className="modern-sk-traffic g" />
|
|
||||||
<span className="ttl">{title}</span>
|
|
||||||
{badge && (
|
|
||||||
<div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
|
|
||||||
{badge}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export const cx = (...c: Array<string | false | undefined>) =>
|
||||||
|
c.filter(Boolean).join(' ');
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
||||||
|
|
||||||
|
export const Window = ({
|
||||||
|
title,
|
||||||
|
badge,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: ComponentPropsWithoutRef<'div'> & {
|
||||||
|
title: string;
|
||||||
|
badge?: ReactNode;
|
||||||
|
}) => (
|
||||||
|
<div className="modern-sk-window" {...props}>
|
||||||
|
<div className="modern-sk-titlebar">
|
||||||
|
<span className="modern-sk-traffic r" />
|
||||||
|
<span className="modern-sk-traffic y" />
|
||||||
|
<span className="modern-sk-traffic g" />
|
||||||
|
<span className="ttl">{title}</span>
|
||||||
|
{badge && (
|
||||||
|
<div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
|
||||||
|
{badge}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
|
||||||
|
import { AlertDialog, Button } from '../components/ui';
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: 'Overlays/AlertDialog',
|
||||||
|
component: AlertDialog,
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component:
|
||||||
|
'Confirmation dialog built on Radix AlertDialog. Use for destructive or irreversible actions — focus is trapped and the cancel button is always reachable. Set `destructive` to switch the action button to the ember (red) variant.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
title: { control: 'text' },
|
||||||
|
description: { control: 'text' },
|
||||||
|
cancelLabel: { control: 'text' },
|
||||||
|
actionLabel: { control: 'text' },
|
||||||
|
destructive: { control: 'boolean' },
|
||||||
|
trigger: { control: false },
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
title: 'Delete this project?',
|
||||||
|
description: 'This action cannot be undone.',
|
||||||
|
actionLabel: 'Delete',
|
||||||
|
cancelLabel: 'Cancel',
|
||||||
|
destructive: true,
|
||||||
|
trigger: <Button variant="ember">Delete…</Button>,
|
||||||
|
onAction: () => {},
|
||||||
|
},
|
||||||
|
} satisfies Meta<typeof AlertDialog>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Playground: Story = {};
|
||||||
|
|
||||||
|
export const Destructive: Story = {
|
||||||
|
render: () => (
|
||||||
|
<AlertDialog
|
||||||
|
trigger={<Button variant="ember">Delete account</Button>}
|
||||||
|
title="Delete your account?"
|
||||||
|
description="All data will be permanently removed. This cannot be undone."
|
||||||
|
actionLabel="Delete account"
|
||||||
|
cancelLabel="Keep account"
|
||||||
|
destructive
|
||||||
|
onAction={() => {}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Confirm: Story = {
|
||||||
|
render: () => (
|
||||||
|
<AlertDialog
|
||||||
|
trigger={<Button variant="primary">Publish</Button>}
|
||||||
|
title="Publish changes?"
|
||||||
|
description="This will make your changes visible to all users."
|
||||||
|
actionLabel="Publish"
|
||||||
|
cancelLabel="Cancel"
|
||||||
|
onAction={() => {}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
};
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
|
||||||
|
import { Dialog, Button, TextField } from '../components/ui';
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: 'Overlays/Dialog',
|
||||||
|
component: Dialog,
|
||||||
|
parameters: {
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component:
|
||||||
|
'Modal dialog built on Radix Dialog. Pass a `trigger` to wire open/close automatically, or control it with `open` / `onOpenChange`. Title is required; description, body, and footer are optional slots.',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
title: { control: 'text' },
|
||||||
|
description: { control: 'text' },
|
||||||
|
trigger: { control: false },
|
||||||
|
children: { control: false },
|
||||||
|
footer: { control: false },
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
title: 'Rename project',
|
||||||
|
description: 'Choose a new name for this project.',
|
||||||
|
trigger: <Button variant="primary">Open dialog</Button>,
|
||||||
|
},
|
||||||
|
} satisfies Meta<typeof Dialog>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Playground: Story = {};
|
||||||
|
|
||||||
|
export const WithBody: Story = {
|
||||||
|
name: 'With body',
|
||||||
|
render: () => (
|
||||||
|
<Dialog
|
||||||
|
trigger={<Button variant="primary">Open dialog</Button>}
|
||||||
|
title="Rename project"
|
||||||
|
description="Choose a new name for this project."
|
||||||
|
footer={<Button variant="primary">Save</Button>}
|
||||||
|
>
|
||||||
|
<TextField label="Project name" defaultValue="My project" />
|
||||||
|
</Dialog>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const NoDescription: Story = {
|
||||||
|
name: 'No description',
|
||||||
|
args: {
|
||||||
|
description: undefined,
|
||||||
|
title: 'Confirm action',
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -310,7 +310,7 @@ textarea.modern-sk-field{ resize:vertical; min-height:64px; line-height:1.5; }
|
|||||||
.modern-sk-overlay{ position:fixed; inset:0; z-index:80; background:rgba(8,9,6,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
|
.modern-sk-overlay{ position:fixed; inset:0; z-index:80; background:rgba(8,9,6,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
|
||||||
.modern-sk-overlay[data-state="open"]{ animation:modern-sk-fade-in var(--dur-base) var(--ease-out); }
|
.modern-sk-overlay[data-state="open"]{ animation:modern-sk-fade-in var(--dur-base) var(--ease-out); }
|
||||||
.modern-sk-overlay[data-state="closed"]{ animation:modern-sk-fade-out var(--dur-quick) var(--ease-out); }
|
.modern-sk-overlay[data-state="closed"]{ animation:modern-sk-fade-out var(--dur-quick) var(--ease-out); }
|
||||||
.modern-sk-dialog{ position:fixed; z-index:81; top:50%; left:50%; transform:translate(-50%,-50%); width:min(92vw,460px); max-height:85vh; overflow:auto; border-radius:var(--r-xl); border:1px solid var(--hair-strong); background:var(--steel-800); box-shadow:var(--shadow-window); padding:22px 22px 20px; transform-origin:center; }
|
.modern-sk-dialog{ position:fixed; z-index:81; top:50%; left:50%; translate:-50% -50%; width:min(92vw,460px); max-height:85vh; overflow:auto; border-radius:var(--r-xl); border:1px solid var(--hair-strong); background:var(--steel-800); box-shadow:var(--shadow-window); padding:22px 22px 20px; transform-origin:center; font-family:var(--font-sans); }
|
||||||
.modern-sk-dialog[data-state="open"]{ animation:modern-sk-scale-in var(--dur-base) var(--ease-out); }
|
.modern-sk-dialog[data-state="open"]{ animation:modern-sk-scale-in var(--dur-base) var(--ease-out); }
|
||||||
.modern-sk-dialog[data-state="closed"]{ animation:modern-sk-scale-out var(--dur-quick) var(--ease-out); }
|
.modern-sk-dialog[data-state="closed"]{ animation:modern-sk-scale-out var(--dur-quick) var(--ease-out); }
|
||||||
.modern-sk-dialog__title{ font-family:var(--font-sans); font-size:var(--text-lg); font-weight:600; color:var(--fg-1); letter-spacing:var(--track-snug); }
|
.modern-sk-dialog__title{ font-family:var(--font-sans); font-size:var(--text-lg); font-weight:600; color:var(--fg-1); letter-spacing:var(--track-snug); }
|
||||||
|
|||||||
Reference in New Issue
Block a user