@salemcobalt/ui 0.1.0 → 0.2.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -12
- package/dist/index.d.ts +292 -8
- package/dist/index.js +625 -39
- package/dist/index.js.map +1 -1
- package/dist/styles.css +285 -2
- package/package.json +6 -5
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/cx.ts","../src/components/Button/Button.tsx","../src/components/Badge/Badge.tsx","../src/components/Card/Card.tsx","../src/components/Stack/Stack.tsx","../src/components/Inline/Inline.tsx","../src/components/Kbd/Kbd.tsx","../src/components/Dialog/Dialog.tsx","../src/index.ts"],"names":["jsxs","jsx","createElement","BaseDialog"],"mappings":"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","file":"index.js","sourcesContent":["/** Joins class names, dropping falsy entries. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n return parts.filter(Boolean).join(' ');\n}\n","import type { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends ComponentPropsWithRef<'button'> {\n /** `primary` for the one main action in a view, `secondary` for the rest, `ghost` in toolbars and rows, `danger` for destructive confirmations. */\n variant?: ButtonVariant | undefined;\n /** 32, 40 or 48px tall. Compact density shrinks each by one step. */\n size?: ButtonSize | undefined;\n /** A 16px icon before the label. */\n iconStart?: ReactNode | undefined;\n /** A 16px icon after the label. */\n iconEnd?: ReactNode | undefined;\n /** Keeps the width, hides the label, shows a spinner, sets `aria-busy` and ignores clicks. */\n loading?: boolean | undefined;\n /** Stretches to the container. */\n fullWidth?: boolean | undefined;\n}\n\n/** The one way to trigger an action. Renders a native `<button>`; `type` defaults to `button`. */\nexport function Button({\n variant = 'primary',\n size = 'md',\n iconStart,\n iconEnd,\n loading = false,\n fullWidth = false,\n type = 'button',\n className,\n children,\n onClick,\n ...rest\n}: ButtonProps) {\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n event.preventDefault();\n return;\n }\n onClick?.(event);\n };\n return (\n <button\n type={type}\n className={cx('sc-button', className)}\n data-variant={variant}\n data-size={size}\n data-loading={loading || undefined}\n data-full-width={fullWidth || undefined}\n aria-busy={loading || undefined}\n onClick={handleClick}\n {...rest}\n >\n {iconStart ? (\n <span className=\"sc-button__icon\" aria-hidden=\"true\">\n {iconStart}\n </span>\n ) : null}\n <span className=\"sc-button__label\">{children}</span>\n {iconEnd ? (\n <span className=\"sc-button__icon\" aria-hidden=\"true\">\n {iconEnd}\n </span>\n ) : null}\n {loading ? <span className=\"sc-button__spinner\" aria-hidden=\"true\" /> : null}\n </button>\n );\n}\n","import type { ComponentPropsWithRef } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';\nexport type BadgeVariant = 'soft' | 'solid' | 'outline';\nexport type BadgeSize = 'sm' | 'md';\n\nexport interface BadgeProps extends ComponentPropsWithRef<'span'> {\n /** Color reinforces the status; the word is the status. */\n tone?: BadgeTone | undefined;\n /** `soft` tinted fill (default), `solid` filled, `outline` hairline. */\n variant?: BadgeVariant | undefined;\n /** `md` 24px (default) or `sm` 20px for table rows and Card headers. */\n size?: BadgeSize | undefined;\n /** A 6px dot before the label for scannable lists. */\n dot?: boolean | undefined;\n}\n\n/** One or two words of status beside a thing. Text only; never clickable. */\nexport function Badge({\n tone = 'neutral',\n variant = 'soft',\n size = 'md',\n dot = false,\n className,\n children,\n ...rest\n}: BadgeProps) {\n return (\n <span\n className={cx('sc-badge', className)}\n data-tone={tone}\n data-variant={variant}\n data-size={size}\n {...rest}\n >\n {dot ? <span className=\"sc-badge__dot\" aria-hidden=\"true\" /> : null}\n {children}\n </span>\n );\n}\n","import { useRender } from '@base-ui/react/use-render';\nimport { cx } from '../../utils/cx';\n\nexport type CardVariant = 'outlined' | 'elevated' | 'filled';\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg';\nexport type CardElement = 'div' | 'article' | 'section' | 'li' | 'a' | 'button';\n\nexport interface CardProps extends useRender.ComponentProps<'div'> {\n /** `outlined` hairline (default), `elevated` floats, `filled` is an inset region. */\n variant?: CardVariant | undefined;\n /** `none`, `sm` 12px, `md` 16px (default), `lg` 24px. */\n padding?: CardPadding | undefined;\n /** Hover lifts the card and the whole card is the target. Render it as `a` or `button` so it is a real control. */\n interactive?: boolean | undefined;\n /** Accent border with a 1px inset, for the active row or chosen option. */\n selected?: boolean | undefined;\n /** Element to render when `render` is not given. */\n as?: CardElement | undefined;\n}\n\n/** A bordered surface that groups related content. Compose the inside with Stack and Inline. */\nexport function Card({\n variant = 'outlined',\n padding = 'md',\n interactive = false,\n selected = false,\n as = 'div',\n render,\n className,\n ref,\n ...rest\n}: CardProps) {\n return useRender({\n render,\n ref,\n defaultTagName: as,\n props: {\n className: cx('sc-card', className),\n 'data-variant': variant,\n 'data-padding': padding,\n 'data-interactive': interactive || undefined,\n 'data-selected': selected || undefined,\n ...rest,\n },\n });\n}\n","import { createElement, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport type { SpacingSize } from '../../types';\nimport { cx } from '../../utils/cx';\n\nexport type StackAlign = 'stretch' | 'start' | 'center' | 'end';\nexport type StackJustify = 'start' | 'center' | 'end' | 'between';\nexport type StackElement = 'div' | 'section' | 'ul' | 'ol' | 'nav' | 'form';\n\nexport interface StackProps extends ComponentPropsWithRef<'div'> {\n /** Gap from the spacing scale. Default `sm` (12px). */\n gap?: SpacingSize | undefined;\n /** Cross-axis alignment. Default `stretch`. */\n align?: StackAlign | undefined;\n /** Main-axis distribution. Default `start`. */\n justify?: StackJustify | undefined;\n /** Element to render. Use `ul`/`ol` for lists so semantics survive the layout. */\n as?: StackElement | undefined;\n /** Lays out as `inline-flex`. */\n inline?: boolean | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Vertical flex layout with a token gap. The only way children should be spaced vertically. */\nexport function Stack({\n gap = 'sm',\n align = 'stretch',\n justify = 'start',\n as = 'div',\n inline = false,\n className,\n ...rest\n}: StackProps) {\n return createElement(as, {\n className: cx('sc-stack', className),\n 'data-gap': gap,\n 'data-align': align,\n 'data-justify': justify,\n 'data-inline': inline || undefined,\n ...rest,\n });\n}\n","import { createElement, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport type { SpacingSize } from '../../types';\nimport { cx } from '../../utils/cx';\n\nexport type InlineAlign = 'center' | 'start' | 'end' | 'baseline' | 'stretch';\nexport type InlineJustify = 'start' | 'center' | 'end' | 'between';\nexport type InlineElement = 'div' | 'span' | 'ul' | 'nav';\n\nexport interface InlineProps extends ComponentPropsWithRef<'div'> {\n /** Gap from the spacing scale. Default `xs` (8px). */\n gap?: SpacingSize | undefined;\n /** Cross-axis alignment. Default `center`; use `baseline` when mixing text sizes. */\n align?: InlineAlign | undefined;\n /** Main-axis distribution. Default `start`. */\n justify?: InlineJustify | undefined;\n /** Wraps by default; `false` for toolbars that scroll. */\n wrap?: boolean | undefined;\n /** Element to render. */\n as?: InlineElement | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Horizontal flex layout that wraps. For rows of buttons, badges, metadata and key combinations. */\nexport function Inline({\n gap = 'xs',\n align = 'center',\n justify = 'start',\n wrap = true,\n as = 'div',\n className,\n ...rest\n}: InlineProps) {\n return createElement(as, {\n className: cx('sc-inline', className),\n 'data-gap': gap,\n 'data-align': align,\n 'data-justify': justify,\n 'data-nowrap': wrap ? undefined : '',\n ...rest,\n });\n}\n","import { Children, Fragment, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type KbdProps = ComponentPropsWithRef<'kbd'>;\n\n/** A single key, rendered like a keycap. One Kbd per key; group keys with `Kbd.Group`. */\nfunction KbdBase({ className, ...rest }: KbdProps) {\n return <kbd className={cx('sc-kbd', className)} {...rest} />;\n}\n\nexport interface KbdGroupProps extends ComponentPropsWithRef<'span'> {\n /** The readable combination, announced instead of the symbols: \"Command K\". */\n label: string;\n /** `plus` (default) draws a muted + between keys; `space` leaves a gap. */\n separator?: 'plus' | 'space' | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Groups the keys of one shortcut. */\nfunction KbdGroup({ label, separator = 'plus', className, children, ...rest }: KbdGroupProps) {\n const keys = Children.toArray(children);\n return (\n <span role=\"group\" aria-label={label} className={cx('sc-kbd-group', className)} {...rest}>\n {keys.map((key, i) => (\n <Fragment key={i}>\n {i > 0 && separator === 'plus' ? (\n <span className=\"sc-kbd-group__sep\" aria-hidden=\"true\">\n +\n </span>\n ) : null}\n {key}\n </Fragment>\n ))}\n </span>\n );\n}\n\nexport const Kbd = Object.assign(KbdBase, { Group: KbdGroup });\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { Inline, type InlineProps } from '../Inline/Inline';\nimport { cx } from '../../utils/cx';\n\nexport type DialogSize = 'sm' | 'md' | 'lg';\n\nexport interface DialogRootProps {\n /** Controlled open state. */\n open?: boolean | undefined;\n /** Initial open state when uncontrolled. */\n defaultOpen?: boolean | undefined;\n /** Called when the dialog opens or closes. */\n onOpenChange?: ((open: boolean) => void) | undefined;\n /** When `false`, Esc and backdrop clicks no longer close the dialog. Default `true`. */\n dismissible?: boolean | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */\nfunction Root({ dismissible = true, onOpenChange, open, defaultOpen, children }: DialogRootProps) {\n return (\n <BaseDialog.Root\n open={open}\n defaultOpen={defaultOpen}\n disablePointerDismissal={!dismissible}\n onOpenChange={(next, details) => {\n if (\n !dismissible &&\n !next &&\n (details.reason === 'escape-key' || details.reason === 'outside-press')\n ) {\n details.cancel();\n return;\n }\n onOpenChange?.(next);\n }}\n >\n {children}\n </BaseDialog.Root>\n );\n}\n\n/** Opens the dialog. Pass the Button through `render`: `<Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>`. */\nconst Trigger = BaseDialog.Trigger;\n\nexport interface DialogContentProps extends Omit<BaseDialog.Popup.Props, 'className'> {\n /** `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely. */\n size?: DialogSize | undefined;\n className?: string | undefined;\n}\n\n/** Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close. */\nfunction Content({ size = 'md', className, children, ...rest }: DialogContentProps) {\n return (\n <BaseDialog.Portal>\n <BaseDialog.Backdrop className=\"sc-dialog__backdrop\" />\n <BaseDialog.Popup\n className={cx('sc-dialog__popup', className)}\n data-size={size}\n aria-modal=\"true\"\n {...rest}\n >\n {children}\n </BaseDialog.Popup>\n </BaseDialog.Portal>\n );\n}\n\nexport interface DialogTitleProps extends Omit<BaseDialog.Title.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** Required. Labels the dialog; a question or a statement. Renders an `<h2>`. */\nfunction Title({ className, ...rest }: DialogTitleProps) {\n return <BaseDialog.Title className={cx('sc-dialog__title', className)} {...rest} />;\n}\n\nexport interface DialogDescriptionProps extends Omit<BaseDialog.Description.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** Optional, muted. Says what will happen. */\nfunction Description({ className, ...rest }: DialogDescriptionProps) {\n return <BaseDialog.Description className={cx('sc-dialog__description', className)} {...rest} />;\n}\n\nexport type DialogBodyProps = ComponentPropsWithRef<'div'>;\n\n/** Free content between the description and the actions. */\nfunction Body({ className, ...rest }: DialogBodyProps) {\n return <div className={cx('sc-dialog__body', className)} {...rest} />;\n}\n\nexport type DialogActionsProps = Omit<InlineProps, 'justify'>;\n\n/** Right-aligned row of Buttons. Put the confirming action last. */\nfunction Actions({ className, ...rest }: DialogActionsProps) {\n return <Inline justify=\"end\" className={cx('sc-dialog__actions', className)} {...rest} />;\n}\n\nexport interface DialogCloseProps extends Omit<BaseDialog.Close.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** With no children or `render`, the × in the corner. Otherwise wraps any Button: `<Dialog.Close render={<Button variant=\"secondary\" />}>Cancel</Dialog.Close>`. */\nfunction Close({ className, children, render, ...rest }: DialogCloseProps) {\n if (children === undefined && render === undefined) {\n return (\n <BaseDialog.Close className={cx('sc-dialog__close', className)} aria-label=\"Close\" {...rest}>\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.75\"\n aria-hidden=\"true\"\n >\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </svg>\n </BaseDialog.Close>\n );\n }\n return (\n <BaseDialog.Close className={className} render={render} {...rest}>\n {children}\n </BaseDialog.Close>\n );\n}\n\n/** A modal that interrupts for a decision or a short form. Built on Base UI's Dialog. */\nexport const Dialog = { Root, Trigger, Content, Title, Description, Body, Actions, Close };\n","export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './components/Button/Button';\nexport {\n Badge,\n type BadgeProps,\n type BadgeSize,\n type BadgeTone,\n type BadgeVariant,\n} from './components/Badge/Badge';\nexport {\n Card,\n type CardElement,\n type CardPadding,\n type CardProps,\n type CardVariant,\n} from './components/Card/Card';\nexport {\n Stack,\n type StackAlign,\n type StackElement,\n type StackJustify,\n type StackProps,\n} from './components/Stack/Stack';\nexport {\n Inline,\n type InlineAlign,\n type InlineElement,\n type InlineJustify,\n type InlineProps,\n} from './components/Inline/Inline';\nexport { Kbd, type KbdGroupProps, type KbdProps } from './components/Kbd/Kbd';\nexport {\n Dialog,\n type DialogActionsProps,\n type DialogBodyProps,\n type DialogCloseProps,\n type DialogContentProps,\n type DialogDescriptionProps,\n type DialogRootProps,\n type DialogSize,\n type DialogTitleProps,\n} from './components/Dialog/Dialog';\nexport type { SpacingSize } from './types';\nexport const version = '0.1.0';\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/utils/cx.ts","../src/components/Button/Button.tsx","../src/components/Badge/Badge.tsx","../src/components/Card/Card.tsx","../src/components/Stack/Stack.tsx","../src/components/Inline/Inline.tsx","../src/components/Kbd/Kbd.tsx","../src/components/Dialog/Dialog.tsx","../src/components/Icon/Icon.tsx","../src/icons/icons.gen.tsx","../src/icons/icon-names.gen.ts","../src/components/Tooltip/Tooltip.tsx","../src/components/IconButton/IconButton.tsx","../src/components/Menu/Menu.tsx","../src/index.ts"],"sourcesContent":["/** Joins class names, dropping falsy entries. */\nexport function cx(...parts: Array<string | false | null | undefined>): string {\n return parts.filter(Boolean).join(' ');\n}\n","import type { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends ComponentPropsWithRef<'button'> {\n /** `primary` for the one main action in a view, `secondary` for the rest, `ghost` in toolbars and rows, `danger` for destructive confirmations. */\n variant?: ButtonVariant | undefined;\n /** 32, 40 or 48px tall. Compact density shrinks each by one step. */\n size?: ButtonSize | undefined;\n /** A 16px icon before the label. */\n iconStart?: ReactNode | undefined;\n /** A 16px icon after the label. */\n iconEnd?: ReactNode | undefined;\n /** Keeps the width, hides the label, shows a spinner, sets `aria-busy` and ignores clicks. */\n loading?: boolean | undefined;\n /** Stretches to the container. */\n fullWidth?: boolean | undefined;\n}\n\n/** The one way to trigger an action. Renders a native `<button>`; `type` defaults to `button`. */\nexport function Button({\n variant = 'primary',\n size = 'md',\n iconStart,\n iconEnd,\n loading = false,\n fullWidth = false,\n type = 'button',\n className,\n children,\n onClick,\n ...rest\n}: ButtonProps) {\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n event.preventDefault();\n return;\n }\n onClick?.(event);\n };\n return (\n <button\n type={type}\n className={cx('sc-button', className)}\n data-variant={variant}\n data-size={size}\n data-loading={loading || undefined}\n data-full-width={fullWidth || undefined}\n aria-busy={loading || undefined}\n onClick={handleClick}\n {...rest}\n >\n {iconStart ? (\n <span className=\"sc-button__icon\" aria-hidden=\"true\">\n {iconStart}\n </span>\n ) : null}\n <span className=\"sc-button__label\">{children}</span>\n {iconEnd ? (\n <span className=\"sc-button__icon\" aria-hidden=\"true\">\n {iconEnd}\n </span>\n ) : null}\n {loading ? <span className=\"sc-button__spinner\" aria-hidden=\"true\" /> : null}\n </button>\n );\n}\n","import type { ComponentPropsWithRef } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';\nexport type BadgeVariant = 'soft' | 'solid' | 'outline';\nexport type BadgeSize = 'sm' | 'md';\n\nexport interface BadgeProps extends ComponentPropsWithRef<'span'> {\n /** Color reinforces the status; the word is the status. */\n tone?: BadgeTone | undefined;\n /** `soft` tinted fill (default), `solid` filled, `outline` hairline. */\n variant?: BadgeVariant | undefined;\n /** `md` 24px (default) or `sm` 20px for table rows and Card headers. */\n size?: BadgeSize | undefined;\n /** A 6px dot before the label for scannable lists. */\n dot?: boolean | undefined;\n}\n\n/** One or two words of status beside a thing. Text only; never clickable. */\nexport function Badge({\n tone = 'neutral',\n variant = 'soft',\n size = 'md',\n dot = false,\n className,\n children,\n ...rest\n}: BadgeProps) {\n return (\n <span\n className={cx('sc-badge', className)}\n data-tone={tone}\n data-variant={variant}\n data-size={size}\n {...rest}\n >\n {dot ? <span className=\"sc-badge__dot\" aria-hidden=\"true\" /> : null}\n {children}\n </span>\n );\n}\n","import { useRender } from '@base-ui/react/use-render';\nimport { cx } from '../../utils/cx';\n\nexport type CardVariant = 'outlined' | 'elevated' | 'filled';\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg';\nexport type CardElement = 'div' | 'article' | 'section' | 'li' | 'a' | 'button';\n\nexport interface CardProps extends useRender.ComponentProps<'div'> {\n /** `outlined` hairline (default), `elevated` floats, `filled` is an inset region. */\n variant?: CardVariant | undefined;\n /** `none`, `sm` 12px, `md` 16px (default), `lg` 24px. */\n padding?: CardPadding | undefined;\n /** Hover lifts the card and the whole card is the target. Render it as `a` or `button` so it is a real control. */\n interactive?: boolean | undefined;\n /** Accent border with a 1px inset, for the active row or chosen option. */\n selected?: boolean | undefined;\n /** Element to render when `render` is not given. */\n as?: CardElement | undefined;\n}\n\n/** A bordered surface that groups related content. Compose the inside with Stack and Inline. */\nexport function Card({\n variant = 'outlined',\n padding = 'md',\n interactive = false,\n selected = false,\n as = 'div',\n render,\n className,\n ref,\n ...rest\n}: CardProps) {\n return useRender({\n render,\n ref,\n defaultTagName: as,\n props: {\n className: cx('sc-card', className),\n 'data-variant': variant,\n 'data-padding': padding,\n 'data-interactive': interactive || undefined,\n 'data-selected': selected || undefined,\n ...rest,\n },\n });\n}\n","import { createElement, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport type { SpacingSize } from '../../types';\nimport { cx } from '../../utils/cx';\n\nexport type StackAlign = 'stretch' | 'start' | 'center' | 'end';\nexport type StackJustify = 'start' | 'center' | 'end' | 'between';\nexport type StackElement = 'div' | 'section' | 'ul' | 'ol' | 'nav' | 'form';\n\nexport interface StackProps extends ComponentPropsWithRef<'div'> {\n /** Gap from the spacing scale. Default `sm` (12px). */\n gap?: SpacingSize | undefined;\n /** Cross-axis alignment. Default `stretch`. */\n align?: StackAlign | undefined;\n /** Main-axis distribution. Default `start`. */\n justify?: StackJustify | undefined;\n /** Element to render. Use `ul`/`ol` for lists so semantics survive the layout. */\n as?: StackElement | undefined;\n /** Lays out as `inline-flex`. */\n inline?: boolean | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Vertical flex layout with a token gap. The only way children should be spaced vertically. */\nexport function Stack({\n gap = 'sm',\n align = 'stretch',\n justify = 'start',\n as = 'div',\n inline = false,\n className,\n ...rest\n}: StackProps) {\n return createElement(as, {\n className: cx('sc-stack', className),\n 'data-gap': gap,\n 'data-align': align,\n 'data-justify': justify,\n 'data-inline': inline || undefined,\n ...rest,\n });\n}\n","import { createElement, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport type { SpacingSize } from '../../types';\nimport { cx } from '../../utils/cx';\n\nexport type InlineAlign = 'center' | 'start' | 'end' | 'baseline' | 'stretch';\nexport type InlineJustify = 'start' | 'center' | 'end' | 'between';\nexport type InlineElement = 'div' | 'span' | 'ul' | 'nav';\n\nexport interface InlineProps extends ComponentPropsWithRef<'div'> {\n /** Gap from the spacing scale. Default `xs` (8px). */\n gap?: SpacingSize | undefined;\n /** Cross-axis alignment. Default `center`; use `baseline` when mixing text sizes. */\n align?: InlineAlign | undefined;\n /** Main-axis distribution. Default `start`. */\n justify?: InlineJustify | undefined;\n /** Wraps by default; `false` for toolbars that scroll. */\n wrap?: boolean | undefined;\n /** Element to render. */\n as?: InlineElement | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Horizontal flex layout that wraps. For rows of buttons, badges, metadata and key combinations. */\nexport function Inline({\n gap = 'xs',\n align = 'center',\n justify = 'start',\n wrap = true,\n as = 'div',\n className,\n ...rest\n}: InlineProps) {\n return createElement(as, {\n className: cx('sc-inline', className),\n 'data-gap': gap,\n 'data-align': align,\n 'data-justify': justify,\n 'data-nowrap': wrap ? undefined : '',\n ...rest,\n });\n}\n","import { Children, Fragment, type ComponentPropsWithRef, type ReactNode } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type KbdProps = ComponentPropsWithRef<'kbd'>;\n\n/** A single key, rendered like a keycap. One Kbd per key; group keys with `Kbd.Group`. */\nfunction KbdBase({ className, ...rest }: KbdProps) {\n return <kbd className={cx('sc-kbd', className)} {...rest} />;\n}\n\nexport interface KbdGroupProps extends ComponentPropsWithRef<'span'> {\n /** The readable combination, announced instead of the symbols: \"Command K\". */\n label: string;\n /** `plus` (default) draws a muted + between keys; `space` leaves a gap. */\n separator?: 'plus' | 'space' | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Groups the keys of one shortcut. */\nfunction KbdGroup({ label, separator = 'plus', className, children, ...rest }: KbdGroupProps) {\n const keys = Children.toArray(children);\n return (\n <span role=\"group\" aria-label={label} className={cx('sc-kbd-group', className)} {...rest}>\n {keys.map((key, i) => (\n <Fragment key={i}>\n {i > 0 && separator === 'plus' ? (\n <span className=\"sc-kbd-group__sep\" aria-hidden=\"true\">\n +\n </span>\n ) : null}\n {key}\n </Fragment>\n ))}\n </span>\n );\n}\n\nexport const Kbd = Object.assign(KbdBase, { Group: KbdGroup });\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { Inline, type InlineProps } from '../Inline/Inline';\nimport { XIcon } from '../../icons/icons.gen';\nimport { cx } from '../../utils/cx';\n\nexport type DialogSize = 'sm' | 'md' | 'lg';\n\nexport interface DialogRootProps {\n /** Controlled open state. */\n open?: boolean | undefined;\n /** Initial open state when uncontrolled. */\n defaultOpen?: boolean | undefined;\n /** Called when the dialog opens or closes. */\n onOpenChange?: ((open: boolean) => void) | undefined;\n /** When `false`, Esc and backdrop clicks no longer close the dialog. Default `true`. */\n dismissible?: boolean | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */\nfunction Root({ dismissible = true, onOpenChange, open, defaultOpen, children }: DialogRootProps) {\n return (\n <BaseDialog.Root\n open={open}\n defaultOpen={defaultOpen}\n disablePointerDismissal={!dismissible}\n onOpenChange={(next, details) => {\n if (\n !dismissible &&\n !next &&\n (details.reason === 'escape-key' || details.reason === 'outside-press')\n ) {\n details.cancel();\n return;\n }\n onOpenChange?.(next);\n }}\n >\n {children}\n </BaseDialog.Root>\n );\n}\n\n/** Opens the dialog. Pass the Button through `render`: `<Dialog.Trigger render={<Button />}>Open</Dialog.Trigger>`. */\nconst Trigger = BaseDialog.Trigger;\n\nexport interface DialogContentProps extends Omit<BaseDialog.Popup.Props, 'className'> {\n /** `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely. */\n size?: DialogSize | undefined;\n className?: string | undefined;\n}\n\n/** Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close. */\nfunction Content({ size = 'md', className, children, ...rest }: DialogContentProps) {\n return (\n <BaseDialog.Portal>\n <BaseDialog.Backdrop className=\"sc-dialog__backdrop\" />\n <BaseDialog.Popup\n className={cx('sc-dialog__popup', className)}\n data-size={size}\n aria-modal=\"true\"\n {...rest}\n >\n {children}\n </BaseDialog.Popup>\n </BaseDialog.Portal>\n );\n}\n\nexport interface DialogTitleProps extends Omit<BaseDialog.Title.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** Required. Labels the dialog; a question or a statement. Renders an `<h2>`. */\nfunction Title({ className, ...rest }: DialogTitleProps) {\n return <BaseDialog.Title className={cx('sc-dialog__title', className)} {...rest} />;\n}\n\nexport interface DialogDescriptionProps extends Omit<BaseDialog.Description.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** Optional, muted. Says what will happen. */\nfunction Description({ className, ...rest }: DialogDescriptionProps) {\n return <BaseDialog.Description className={cx('sc-dialog__description', className)} {...rest} />;\n}\n\nexport type DialogBodyProps = ComponentPropsWithRef<'div'>;\n\n/** Free content between the description and the actions. */\nfunction Body({ className, ...rest }: DialogBodyProps) {\n return <div className={cx('sc-dialog__body', className)} {...rest} />;\n}\n\nexport type DialogActionsProps = Omit<InlineProps, 'justify'>;\n\n/** Right-aligned row of Buttons. Put the confirming action last. */\nfunction Actions({ className, ...rest }: DialogActionsProps) {\n return <Inline justify=\"end\" className={cx('sc-dialog__actions', className)} {...rest} />;\n}\n\nexport interface DialogCloseProps extends Omit<BaseDialog.Close.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** With no children or `render`, the × in the corner. Otherwise wraps any Button: `<Dialog.Close render={<Button variant=\"secondary\" />}>Cancel</Dialog.Close>`. */\nfunction Close({ className, children, render, ...rest }: DialogCloseProps) {\n if (children === undefined && render === undefined) {\n return (\n <BaseDialog.Close className={cx('sc-dialog__close', className)} aria-label=\"Close\" {...rest}>\n <XIcon />\n </BaseDialog.Close>\n );\n }\n return (\n <BaseDialog.Close className={className} render={render} {...rest}>\n {children}\n </BaseDialog.Close>\n );\n}\n\n/** A modal that interrupts for a decision or a short form. Built on Base UI's Dialog. */\nexport const Dialog = { Root, Trigger, Content, Title, Description, Body, Actions, Close };\n","import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'em';\n\nexport interface IconProps extends Omit<ComponentPropsWithRef<'svg'>, 'children'> {\n /** `xs` 12, `sm` 14, `md` 16 (default), `lg` 20, `xl` 24, or `em` to follow the surrounding font size. */\n size?: IconSize | undefined;\n /** Gives the icon an accessible name (`role=\"img\"`). Without it the icon is decorative and hidden from assistive tech. */\n title?: string | undefined;\n /** The glyph: `<path>`, `<circle>` … on a 16×16 grid, stroke `currentColor`. */\n children: ReactNode;\n}\n\n/** Props of a shipped icon such as `PlayIcon`: everything `Icon` takes except the glyph. */\nexport type IconGlyphProps = Omit<IconProps, 'children'>;\n\n/**\n * The frame every icon renders in: a 16×16 outline in `currentColor`, sized by `size`, decorative unless\n * `title` is given. Use the shipped `<Name>Icon` components, or wrap your own paths.\n */\nexport function Icon({ size = 'md', title, className, children, ...rest }: IconProps) {\n return (\n <svg\n className={cx('sc-icon', className)}\n data-size={size}\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n focusable=\"false\"\n aria-hidden={title ? undefined : true}\n role={title ? 'img' : undefined}\n aria-label={title}\n {...rest}\n >\n {children}\n </svg>\n );\n}\n","// Generated by scripts/build-icons.mjs from src/icons/svg/*.svg. Do not edit; add an SVG and run `pnpm build`.\nimport { Icon, type IconGlyphProps } from '../components/Icon/Icon';\n\n/** `archive` */\nexport function ArchiveIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <rect x=\"2.25\" y=\"2.75\" width=\"11.5\" height=\"3\" rx=\".75\" />\n <path d=\"M3.25 5.75v6.5a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1v-6.5M6.5 8.75h3\" />\n </Icon>\n );\n}\n\n/** `arrow-left` */\nexport function ArrowLeftIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M13 8H3M7 4 3 8l4 4\" />\n </Icon>\n );\n}\n\n/** `arrow-right` */\nexport function ArrowRightIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M3 8h10M9 4l4 4-4 4\" />\n </Icon>\n );\n}\n\n/** `bell` */\nexport function BellIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M4 6.5a4 4 0 0 1 8 0v3l1.25 2H2.75L4 9.5z\" />\n <path d=\"M6.5 13.5a1.5 1.5 0 0 0 3 0\" />\n </Icon>\n );\n}\n\n/** `briefcase` */\nexport function BriefcaseIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <rect x=\"2\" y=\"4.75\" width=\"12\" height=\"8.5\" rx=\"1\" />\n <path d=\"M5.5 4.75V3.5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1.25M2 8.5h12\" />\n </Icon>\n );\n}\n\n/** `calendar` */\nexport function CalendarIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <rect x=\"2.5\" y=\"3.25\" width=\"11\" height=\"10\" rx=\"1\" />\n <path d=\"M2.5 6.75h11M5.5 1.75v3M10.5 1.75v3\" />\n </Icon>\n );\n}\n\n/** `check` */\nexport function CheckIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"m3 8.5 3.5 3.5L13 4.5\" />\n </Icon>\n );\n}\n\n/** `chevron-down` */\nexport function ChevronDownIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"m4 6 4 4 4-4\" />\n </Icon>\n );\n}\n\n/** `chevron-left` */\nexport function ChevronLeftIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"m10 4-4 4 4 4\" />\n </Icon>\n );\n}\n\n/** `chevron-right` */\nexport function ChevronRightIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"m6 4 4 4-4 4\" />\n </Icon>\n );\n}\n\n/** `chevron-up` */\nexport function ChevronUpIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"m4 10 4-4 4 4\" />\n </Icon>\n );\n}\n\n/** `circle-check` */\nexport function CircleCheckIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <circle cx=\"8\" cy=\"8\" r=\"6\" />\n <path d=\"m5.25 8 2 2 3.5-4\" />\n </Icon>\n );\n}\n\n/** `circle-x` */\nexport function CircleXIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <circle cx=\"8\" cy=\"8\" r=\"6\" />\n <path d=\"m6 6 4 4M10 6l-4 4\" />\n </Icon>\n );\n}\n\n/** `clock` */\nexport function ClockIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <circle cx=\"8\" cy=\"8\" r=\"6\" />\n <path d=\"M8 4.75V8l2.25 1.5\" />\n </Icon>\n );\n}\n\n/** `copy` */\nexport function CopyIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <rect x=\"6\" y=\"6\" width=\"7.5\" height=\"7.5\" rx=\"1\" />\n <path d=\"M4 10H3.25a1 1 0 0 1-1-1V3.25a1 1 0 0 1 1-1H9a1 1 0 0 1 1 1V4\" />\n </Icon>\n );\n}\n\n/** `document` */\nexport function DocumentIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M9 2.25H4.5a1 1 0 0 0-1 1v9.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V5.75z\" />\n <path d=\"M9 2.25v3.5h3.5M6 8.5h4M6 11h4\" />\n </Icon>\n );\n}\n\n/** `download` */\nexport function DownloadIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M8 2.5v8M4.75 7.25 8 10.5l3.25-3.25\" />\n <path d=\"M2.75 11v1.5a1 1 0 0 0 1 1h8.5a1 1 0 0 0 1-1V11\" />\n </Icon>\n );\n}\n\n/** `edit` */\nexport function EditIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"m10.75 2.75 2.5 2.5-7.5 7.5H3.25v-2.5z\" />\n </Icon>\n );\n}\n\n/** `external-link` */\nexport function ExternalLinkIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M9 2.75h4.25V7M13.25 2.75 7.5 8.5\" />\n <path d=\"M11.25 9v3.25a1 1 0 0 1-1 1h-6.5a1 1 0 0 1-1-1v-6.5a1 1 0 0 1 1-1H7\" />\n </Icon>\n );\n}\n\n/** `eye` */\nexport function EyeIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M1.75 8s2.25-4.25 6.25-4.25S14.25 8 14.25 8s-2.25 4.25-6.25 4.25S1.75 8 1.75 8z\" />\n <circle cx=\"8\" cy=\"8\" r=\"2\" />\n </Icon>\n );\n}\n\n/** `filter` */\nexport function FilterIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M2.5 3h11l-4.25 5v4.25L6.75 13.5V8z\" />\n </Icon>\n );\n}\n\n/** `flag` */\nexport function FlagIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M3.5 14V2.75\" />\n <path d=\"M3.5 2.75h8.75l-2.25 3 2.25 3H3.5\" />\n </Icon>\n );\n}\n\n/** `inbox` */\nexport function InboxIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M2 9v3.25a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V9l-1.6-4.6a1 1 0 0 0-.95-.65H4.55a1 1 0 0 0-.95.65z\" />\n <path d=\"M2 9h3.25l1 2h3.5l1-2H14\" />\n </Icon>\n );\n}\n\n/** `info` */\nexport function InfoIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <circle cx=\"8\" cy=\"8\" r=\"6\" />\n <path d=\"M8 7.25V11M8 5.25v.01\" />\n </Icon>\n );\n}\n\n/** `link` */\nexport function LinkIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M6.75 9.25a2.5 2.5 0 0 0 3.54 0l2-2a2.5 2.5 0 0 0-3.54-3.54l-.75.75\" />\n <path d=\"M9.25 6.75a2.5 2.5 0 0 0-3.54 0l-2 2a2.5 2.5 0 0 0 3.54 3.54l.75-.75\" />\n </Icon>\n );\n}\n\n/** `mail` */\nexport function MailIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <rect x=\"2\" y=\"3.5\" width=\"12\" height=\"9\" rx=\"1\" />\n <path d=\"m2.5 4.5 5.5 4.25L13.5 4.5\" />\n </Icon>\n );\n}\n\n/** `map-pin` */\nexport function MapPinIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M8 14s4.5-3.9 4.5-7.5a4.5 4.5 0 1 0-9 0C3.5 10.1 8 14 8 14z\" />\n <circle cx=\"8\" cy=\"6.5\" r=\"1.5\" />\n </Icon>\n );\n}\n\n/** `menu` */\nexport function MenuIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M2.5 4.5h11M2.5 8h11M2.5 11.5h11\" />\n </Icon>\n );\n}\n\n/** `minus` */\nexport function MinusIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M3 8h10\" />\n </Icon>\n );\n}\n\n/** `moon` */\nexport function MoonIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M13.25 9.5A5.5 5.5 0 0 1 6.5 2.75 5.5 5.5 0 1 0 13.25 9.5z\" />\n </Icon>\n );\n}\n\n/** `more-horizontal` */\nexport function MoreHorizontalIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <circle cx=\"3.5\" cy=\"8\" r=\"1.25\" fill=\"currentColor\" stroke=\"none\" />\n <circle cx=\"8\" cy=\"8\" r=\"1.25\" fill=\"currentColor\" stroke=\"none\" />\n <circle cx=\"12.5\" cy=\"8\" r=\"1.25\" fill=\"currentColor\" stroke=\"none\" />\n </Icon>\n );\n}\n\n/** `more-vertical` */\nexport function MoreVerticalIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <circle cx=\"8\" cy=\"3.5\" r=\"1.25\" fill=\"currentColor\" stroke=\"none\" />\n <circle cx=\"8\" cy=\"8\" r=\"1.25\" fill=\"currentColor\" stroke=\"none\" />\n <circle cx=\"8\" cy=\"12.5\" r=\"1.25\" fill=\"currentColor\" stroke=\"none\" />\n </Icon>\n );\n}\n\n/** `pause` */\nexport function PauseIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <rect x=\"3.75\" y=\"2.75\" width=\"3\" height=\"10.5\" rx=\".75\" />\n <rect x=\"9.25\" y=\"2.75\" width=\"3\" height=\"10.5\" rx=\".75\" />\n </Icon>\n );\n}\n\n/** `play` */\nexport function PlayIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M4.5 2.75v10.5L13 8z\" />\n </Icon>\n );\n}\n\n/** `plus` */\nexport function PlusIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M8 3v10M3 8h10\" />\n </Icon>\n );\n}\n\n/** `refresh` */\nexport function RefreshIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M2.75 8a5.25 5.25 0 0 1 9-3.7l1.5 1.45\" />\n <path d=\"M13.25 2.25v3.5h-3.5\" />\n <path d=\"M13.25 8a5.25 5.25 0 0 1-9 3.7l-1.5-1.45\" />\n <path d=\"M2.75 13.75v-3.5h3.5\" />\n </Icon>\n );\n}\n\n/** `search` */\nexport function SearchIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <circle cx=\"7\" cy=\"7\" r=\"4.5\" />\n <path d=\"m10.5 10.5 3 3\" />\n </Icon>\n );\n}\n\n/** `settings` */\nexport function SettingsIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M13.01 6.42 14.67 6.94v2.12l-1.66.52-.35.84.8 1.55-1.49 1.49-1.55-.8-.84.35-.52 1.66H6.94l-.52-1.66-.84-.35-1.55.8-1.49-1.49.8-1.55-.35-.84-1.66-.52V6.94l1.66-.52.35-.84-.8-1.55 1.49-1.49 1.55.8.84-.35.52-1.66h2.12l.52 1.66.84.35 1.55-.8 1.49 1.49-.8 1.55z\" />\n <circle cx=\"8\" cy=\"8\" r=\"2.25\" />\n </Icon>\n );\n}\n\n/** `star` */\nexport function StarIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"m8 2.25 1.8 3.8 4.2.55-3.1 2.9.8 4.15L8 11.6l-3.7 2.05.8-4.15L2 6.6l4.2-.55z\" />\n </Icon>\n );\n}\n\n/** `sun` */\nexport function SunIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <circle cx=\"8\" cy=\"8\" r=\"3\" />\n <path d=\"M8 1.75v1.5M8 12.75v1.5M1.75 8h1.5M12.75 8h1.5M3.58 3.58l1.06 1.06M11.36 11.36l1.06 1.06M3.58 12.42l1.06-1.06M11.36 4.64l1.06-1.06\" />\n </Icon>\n );\n}\n\n/** `thumbs-down` */\nexport function ThumbsDownIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M5 2.5H3a.5.5 0 0 0-.5.5v5.5a.5.5 0 0 0 .5.5h2\" />\n <path d=\"M5 9l2.5 4.5a1.5 1.5 0 0 0 1.5-1.5V9.5h3.25a1.25 1.25 0 0 0 1.23-1.45l-.9-5a1.25 1.25 0 0 0-1.23-1.05H5z\" />\n </Icon>\n );\n}\n\n/** `thumbs-up` */\nexport function ThumbsUpIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M5 13.5H3a.5.5 0 0 1-.5-.5V7.5A.5.5 0 0 1 3 7h2\" />\n <path d=\"M5 7l2.5-4.5a1.5 1.5 0 0 1 1.5 1.5v2.5h3.25a1.25 1.25 0 0 1 1.23 1.45l-.9 5a1.25 1.25 0 0 1-1.23 1.05H5z\" />\n </Icon>\n );\n}\n\n/** `trash` */\nexport function TrashIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M2.75 4.25h10.5M6.25 4.25V3a.75.75 0 0 1 .75-.75h2A.75.75 0 0 1 9.75 3v1.25\" />\n <path d=\"M4 4.25l.5 8.5a1 1 0 0 0 1 .95h5a1 1 0 0 0 1-.95l.5-8.5\" />\n <path d=\"M6.5 7v4M9.5 7v4\" />\n </Icon>\n );\n}\n\n/** `undo` */\nexport function UndoIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M3 7h7a3.5 3.5 0 0 1 0 7H6\" />\n <path d=\"M6 4 3 7l3 3\" />\n </Icon>\n );\n}\n\n/** `user` */\nexport function UserIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <circle cx=\"8\" cy=\"5.25\" r=\"2.75\" />\n <path d=\"M2.75 13.75a5.25 5.25 0 0 1 10.5 0\" />\n </Icon>\n );\n}\n\n/** `warning` */\nexport function WarningIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M8 2.5 1.75 13.25h12.5z\" />\n <path d=\"M8 6.5v3M8 11.5v.01\" />\n </Icon>\n );\n}\n\n/** `x` */\nexport function XIcon(props: IconGlyphProps) {\n return (\n <Icon {...props}>\n <path d=\"M4 4l8 8M12 4l-8 8\" />\n </Icon>\n );\n}\n","// Generated by scripts/build-icons.mjs from src/icons/svg/*.svg. Do not edit; add an SVG and run `pnpm build`.\n/** Every icon shipped by this package, as `<Name>Icon` components. */\nexport const iconNames = [\n 'archive',\n 'arrow-left',\n 'arrow-right',\n 'bell',\n 'briefcase',\n 'calendar',\n 'check',\n 'chevron-down',\n 'chevron-left',\n 'chevron-right',\n 'chevron-up',\n 'circle-check',\n 'circle-x',\n 'clock',\n 'copy',\n 'document',\n 'download',\n 'edit',\n 'external-link',\n 'eye',\n 'filter',\n 'flag',\n 'inbox',\n 'info',\n 'link',\n 'mail',\n 'map-pin',\n 'menu',\n 'minus',\n 'moon',\n 'more-horizontal',\n 'more-vertical',\n 'pause',\n 'play',\n 'plus',\n 'refresh',\n 'search',\n 'settings',\n 'star',\n 'sun',\n 'thumbs-down',\n 'thumbs-up',\n 'trash',\n 'undo',\n 'user',\n 'warning',\n 'x',\n] as const;\nexport type IconName = (typeof iconNames)[number];\n","import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport type { ReactElement, ReactNode } from 'react';\nimport { cx } from '../../utils/cx';\n\nexport type TooltipSide = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipAlign = 'start' | 'center' | 'end';\n\nexport interface TooltipProps {\n /** The hint. Short text; never anything the user cannot do without. */\n content: ReactNode;\n /** The trigger: one element that takes a ref and spreads props, such as `IconButton`, `Button` or `Badge`. */\n children: ReactElement;\n /** Which side of the trigger the hint opens on; flips when there is no room. Default `top`. */\n side?: TooltipSide | undefined;\n /** Alignment along that side. Default `center`. */\n align?: TooltipAlign | undefined;\n /** Hover delay in ms before opening. Default 300; inside `Tooltip.Provider` sibling tooltips open instantly once one is open. */\n delay?: number | undefined;\n /** Delay in ms before closing. Default 0. */\n closeDelay?: number | undefined;\n /** Controlled open state. */\n open?: boolean | undefined;\n /** Initial open state when uncontrolled. */\n defaultOpen?: boolean | undefined;\n /** Called when the hint opens or closes. */\n onOpenChange?: ((open: boolean) => void) | undefined;\n /** Never opens. */\n disabled?: boolean | undefined;\n className?: string | undefined;\n}\n\n/**\n * A hint that opens on hover and keyboard focus. Supplementary only: touch devices never see it and\n * screen readers hear the trigger's own name, so the trigger must already be labelled.\n */\nfunction TooltipBase({\n content,\n children,\n side = 'top',\n align = 'center',\n delay = 300,\n closeDelay,\n open,\n defaultOpen,\n onOpenChange,\n disabled,\n className,\n}: TooltipProps) {\n return (\n <BaseTooltip.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange ? (next) => onOpenChange(next) : undefined}\n disabled={disabled}\n >\n <BaseTooltip.Trigger render={children} delay={delay} closeDelay={closeDelay} />\n <BaseTooltip.Portal>\n <BaseTooltip.Positioner side={side} align={align} sideOffset={6} className=\"sc-tooltip__positioner\">\n <BaseTooltip.Popup role=\"tooltip\" className={cx('sc-tooltip', className)}>\n <BaseTooltip.Arrow className=\"sc-tooltip__arrow\" />\n {content}\n </BaseTooltip.Popup>\n </BaseTooltip.Positioner>\n </BaseTooltip.Portal>\n </BaseTooltip.Root>\n );\n}\n\n/** Wrap a toolbar or a row of icon buttons so moving between them skips the delay. */\nconst Provider = BaseTooltip.Provider;\n\nexport const Tooltip = Object.assign(TooltipBase, { Provider });\n","import type { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react';\nimport { Tooltip, type TooltipSide } from '../Tooltip/Tooltip';\nimport type { ButtonSize, ButtonVariant } from '../Button/Button';\nimport { cx } from '../../utils/cx';\n\nexport interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'aria-label'> {\n /** Required. The accessible name, and the tooltip text when `tooltip` is `true`. */\n label: string;\n /** The icon, usually a shipped `<Name>Icon`. It is decorative; `label` names the button. Optional only so a popup trigger can supply it through `render`. */\n children?: ReactNode | undefined;\n /** `ghost` (default) in toolbars and rows, `secondary` when it must read as a button, `primary` and `danger` rarely. */\n variant?: ButtonVariant | undefined;\n /** Square: 32, 40 or 48px. Compact density shrinks each by one step. */\n size?: ButtonSize | undefined;\n /** `true` shows `label` as a tooltip on hover and focus; a string shows that text instead. */\n tooltip?: boolean | string | undefined;\n /** Side the tooltip opens on. Default `top`. */\n tooltipSide?: TooltipSide | undefined;\n /** Fully round, for avatars and floating actions. */\n round?: boolean | undefined;\n /** Shows a spinner, sets `aria-busy` and ignores clicks. */\n loading?: boolean | undefined;\n}\n\n/** A square Button for one icon. Always named by `label`; use `tooltip` to show that name on hover. */\nexport function IconButton({\n label,\n children,\n variant = 'ghost',\n size = 'md',\n tooltip,\n tooltipSide = 'top',\n round = false,\n loading = false,\n type = 'button',\n className,\n onClick,\n ...rest\n}: IconButtonProps) {\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n if (loading) {\n event.preventDefault();\n return;\n }\n onClick?.(event);\n };\n const button = (\n <button\n type={type}\n className={cx('sc-button', 'sc-icon-button', className)}\n data-variant={variant}\n data-size={size}\n data-round={round || undefined}\n data-loading={loading || undefined}\n aria-busy={loading || undefined}\n aria-label={label}\n onClick={handleClick}\n {...rest}\n >\n <span className=\"sc-button__icon\" aria-hidden=\"true\">\n {children}\n </span>\n {loading ? <span className=\"sc-button__spinner\" aria-hidden=\"true\" /> : null}\n </button>\n );\n if (!tooltip) return button;\n return (\n <Tooltip content={tooltip === true ? label : tooltip} side={tooltipSide}>\n {button}\n </Tooltip>\n );\n}\n","import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport type { ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport { CheckIcon, ChevronDownIcon } from '../../icons/icons.gen';\nimport { cx } from '../../utils/cx';\n\nexport type MenuSide = 'top' | 'bottom' | 'left' | 'right';\nexport type MenuAlign = 'start' | 'center' | 'end';\nexport type MenuItemTone = 'default' | 'danger';\n\nexport interface MenuRootProps {\n /** Controlled open state. */\n open?: boolean | undefined;\n /** Initial open state when uncontrolled. */\n defaultOpen?: boolean | undefined;\n /** Called when the menu opens or closes. */\n onOpenChange?: ((open: boolean) => void) | undefined;\n /** Disables the trigger. */\n disabled?: boolean | undefined;\n /** Default `true`: the page behind the menu is inert until it closes. */\n modal?: boolean | undefined;\n children?: ReactNode | undefined;\n}\n\n/** Owns the open state. Wrap a `Menu.Trigger` and a `Menu.Content`. */\nfunction Root({ open, defaultOpen, onOpenChange, disabled, modal = true, children }: MenuRootProps) {\n return (\n <BaseMenu.Root\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange ? (next) => onOpenChange(next) : undefined}\n disabled={disabled}\n modal={modal}\n >\n {children}\n </BaseMenu.Root>\n );\n}\n\nexport interface MenuTriggerProps extends Omit<BaseMenu.Trigger.Props, 'className'> {\n className?: string | undefined;\n}\n\n/**\n * Opens the menu. With no `render` it is a secondary Button with a chevron; pass any Button or\n * IconButton through `render`: `<Menu.Trigger render={<IconButton label=\"More\" />}><MoreHorizontalIcon /></Menu.Trigger>`.\n */\nfunction Trigger({ render, className, children, ...rest }: MenuTriggerProps) {\n return (\n <BaseMenu.Trigger\n render={render ?? <Button variant=\"secondary\" iconEnd={<ChevronDownIcon />} className={className} />}\n className={render ? className : undefined}\n {...rest}\n >\n {children}\n </BaseMenu.Trigger>\n );\n}\n\nexport interface MenuContentProps extends Omit<BaseMenu.Popup.Props, 'className'> {\n /** Side of the trigger the menu opens on; flips when there is no room. Default `bottom`. */\n side?: MenuSide | undefined;\n /** Alignment along that side. Default `start`. */\n align?: MenuAlign | undefined;\n /** Distance from the trigger in px. Default 4. */\n sideOffset?: number | undefined;\n className?: string | undefined;\n}\n\n/** Portal, positioner and the popup. Items go inside. */\nfunction Content({\n side = 'bottom',\n align = 'start',\n sideOffset = 4,\n className,\n children,\n ...rest\n}: MenuContentProps) {\n return (\n <BaseMenu.Portal>\n <BaseMenu.Positioner side={side} align={align} sideOffset={sideOffset} className=\"sc-menu__positioner\">\n <BaseMenu.Popup className={cx('sc-menu', className)} {...rest}>\n {children}\n </BaseMenu.Popup>\n </BaseMenu.Positioner>\n </BaseMenu.Portal>\n );\n}\n\ninterface ItemSlots {\n /** A 16px icon before the label. */\n icon?: ReactNode | undefined;\n /** Muted text at the end: a shortcut (`<Kbd>`) or a count. */\n trailing?: ReactNode | undefined;\n /** `danger` for destructive actions; put them last, after a separator. */\n tone?: MenuItemTone | undefined;\n}\n\nfunction ItemBody({\n icon,\n trailing,\n children,\n}: {\n icon?: ReactNode;\n trailing?: ReactNode;\n children?: ReactNode;\n}) {\n return (\n <>\n <span className=\"sc-menu__icon\" aria-hidden=\"true\">\n {icon}\n </span>\n <span className=\"sc-menu__label\">{children}</span>\n {trailing !== undefined ? <span className=\"sc-menu__trailing\">{trailing}</span> : null}\n </>\n );\n}\n\nexport interface MenuItemProps extends Omit<BaseMenu.Item.Props, 'className'>, ItemSlots {\n className?: string | undefined;\n}\n\n/** One action. Closes the menu when activated. */\nfunction Item({ icon, trailing, tone = 'default', className, children, ...rest }: MenuItemProps) {\n return (\n <BaseMenu.Item className={cx('sc-menu__item', className)} data-tone={tone} {...rest}>\n <ItemBody icon={icon} trailing={trailing}>\n {children}\n </ItemBody>\n </BaseMenu.Item>\n );\n}\n\nexport interface MenuLinkItemProps extends Omit<BaseMenu.LinkItem.Props, 'className'>, ItemSlots {\n className?: string | undefined;\n}\n\n/** An item that navigates: renders an `<a href>`. */\nfunction LinkItem({ icon, trailing, tone = 'default', className, children, ...rest }: MenuLinkItemProps) {\n return (\n <BaseMenu.LinkItem className={cx('sc-menu__item', className)} data-tone={tone} {...rest}>\n <ItemBody icon={icon} trailing={trailing}>\n {children}\n </ItemBody>\n </BaseMenu.LinkItem>\n );\n}\n\nexport interface MenuCheckboxItemProps extends Omit<\n BaseMenu.CheckboxItem.Props,\n 'className' | 'onCheckedChange'\n> {\n /** Called with the next checked state. */\n onCheckedChange?: ((checked: boolean) => void) | undefined;\n /** Muted text at the end. */\n trailing?: ReactNode | undefined;\n className?: string | undefined;\n}\n\n/** A toggle. Stays open when activated so several can be flipped at once; pass `closeOnClick` to close. */\nfunction CheckboxItem({ trailing, onCheckedChange, className, children, ...rest }: MenuCheckboxItemProps) {\n return (\n <BaseMenu.CheckboxItem\n className={cx('sc-menu__item', className)}\n onCheckedChange={onCheckedChange ? (checked) => onCheckedChange(checked) : undefined}\n {...rest}\n >\n <BaseMenu.CheckboxItemIndicator className=\"sc-menu__icon sc-menu__indicator\">\n <CheckIcon size=\"sm\" />\n </BaseMenu.CheckboxItemIndicator>\n <span className=\"sc-menu__label\">{children}</span>\n {trailing !== undefined ? <span className=\"sc-menu__trailing\">{trailing}</span> : null}\n </BaseMenu.CheckboxItem>\n );\n}\n\nexport interface MenuRadioGroupProps<Value extends string = string> extends Omit<\n BaseMenu.RadioGroup.Props,\n 'className' | 'value' | 'defaultValue' | 'onValueChange'\n> {\n /** Controlled selected value. */\n value?: Value | undefined;\n /** Initial value when uncontrolled. */\n defaultValue?: Value | undefined;\n /** Called with the next selected value. */\n onValueChange?: ((value: Value) => void) | undefined;\n /** A heading for the group, rendered above the items. */\n label?: ReactNode | undefined;\n className?: string | undefined;\n}\n\n/** A set of `Menu.RadioItem`s where exactly one is selected. */\nfunction RadioGroup<Value extends string = string>({\n label,\n onValueChange,\n className,\n children,\n ...rest\n}: MenuRadioGroupProps<Value>) {\n return (\n <BaseMenu.RadioGroup\n className={cx('sc-menu__group', className)}\n onValueChange={onValueChange ? (value: Value) => onValueChange(value) : undefined}\n {...rest}\n >\n {label !== undefined ? (\n <BaseMenu.GroupLabel className=\"sc-menu__group-label\">{label}</BaseMenu.GroupLabel>\n ) : null}\n {children}\n </BaseMenu.RadioGroup>\n );\n}\n\nexport interface MenuRadioItemProps extends Omit<BaseMenu.RadioItem.Props, 'className' | 'value'> {\n value: string;\n /** Muted text at the end. */\n trailing?: ReactNode | undefined;\n className?: string | undefined;\n}\n\n/** One choice in a `Menu.RadioGroup`. Stays open when chosen; pass `closeOnClick` to close. */\nfunction RadioItem({ trailing, className, children, ...rest }: MenuRadioItemProps) {\n return (\n <BaseMenu.RadioItem className={cx('sc-menu__item', className)} {...rest}>\n <BaseMenu.RadioItemIndicator className=\"sc-menu__icon sc-menu__indicator\">\n <span className=\"sc-menu__radio-dot\" />\n </BaseMenu.RadioItemIndicator>\n <span className=\"sc-menu__label\">{children}</span>\n {trailing !== undefined ? <span className=\"sc-menu__trailing\">{trailing}</span> : null}\n </BaseMenu.RadioItem>\n );\n}\n\nexport interface MenuGroupProps extends Omit<BaseMenu.Group.Props, 'className'> {\n /** A heading for the group, rendered above the items. */\n label?: ReactNode | undefined;\n className?: string | undefined;\n}\n\n/** Labels a run of items. */\nfunction Group({ label, className, children, ...rest }: MenuGroupProps) {\n return (\n <BaseMenu.Group className={cx('sc-menu__group', className)} {...rest}>\n {label !== undefined ? (\n <BaseMenu.GroupLabel className=\"sc-menu__group-label\">{label}</BaseMenu.GroupLabel>\n ) : null}\n {children}\n </BaseMenu.Group>\n );\n}\n\nexport interface MenuSeparatorProps extends Omit<BaseMenu.Separator.Props, 'className'> {\n className?: string | undefined;\n}\n\n/** A hairline between runs of items. */\nfunction Separator({ className, ...rest }: MenuSeparatorProps) {\n return <BaseMenu.Separator className={cx('sc-menu__separator', className)} {...rest} />;\n}\n\n/** A dropdown of actions on a trigger, with full keyboard support. Built on Base UI's Menu. */\nexport const Menu = {\n Root,\n Trigger,\n Content,\n Item,\n LinkItem,\n CheckboxItem,\n RadioGroup,\n RadioItem,\n Group,\n Separator,\n};\n","export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './components/Button/Button';\nexport {\n Badge,\n type BadgeProps,\n type BadgeSize,\n type BadgeTone,\n type BadgeVariant,\n} from './components/Badge/Badge';\nexport {\n Card,\n type CardElement,\n type CardPadding,\n type CardProps,\n type CardVariant,\n} from './components/Card/Card';\nexport {\n Stack,\n type StackAlign,\n type StackElement,\n type StackJustify,\n type StackProps,\n} from './components/Stack/Stack';\nexport {\n Inline,\n type InlineAlign,\n type InlineElement,\n type InlineJustify,\n type InlineProps,\n} from './components/Inline/Inline';\nexport { Kbd, type KbdGroupProps, type KbdProps } from './components/Kbd/Kbd';\nexport {\n Dialog,\n type DialogActionsProps,\n type DialogBodyProps,\n type DialogCloseProps,\n type DialogContentProps,\n type DialogDescriptionProps,\n type DialogRootProps,\n type DialogSize,\n type DialogTitleProps,\n} from './components/Dialog/Dialog';\nexport { Icon, type IconGlyphProps, type IconProps, type IconSize } from './components/Icon/Icon';\nexport * from './icons/icons.gen';\nexport { iconNames, type IconName } from './icons/icon-names.gen';\nexport { IconButton, type IconButtonProps } from './components/IconButton/IconButton';\nexport {\n Tooltip,\n type TooltipAlign,\n type TooltipProps,\n type TooltipSide,\n} from './components/Tooltip/Tooltip';\nexport {\n Menu,\n type MenuAlign,\n type MenuCheckboxItemProps,\n type MenuContentProps,\n type MenuGroupProps,\n type MenuItemProps,\n type MenuItemTone,\n type MenuLinkItemProps,\n type MenuRadioGroupProps,\n type MenuRadioItemProps,\n type MenuRootProps,\n type MenuSeparatorProps,\n type MenuSide,\n type MenuTriggerProps,\n} from './components/Menu/Menu';\nexport type { SpacingSize } from './types';\nexport const version = '0.1.1';\n"],"mappings":"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","names":["jsx","jsxs","createElement","createElement","jsx","jsxs","jsx","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs","Fragment","jsx","jsxs","Root","Trigger","Content"]}
|
package/dist/styles.css
CHANGED
|
@@ -1,15 +1,44 @@
|
|
|
1
|
-
/* @salemcobalt/ui 0.
|
|
1
|
+
/* @salemcobalt/ui 0.2.0-rc.0 — requires @salemcobalt/tokens/css. */
|
|
2
2
|
@layer sc {
|
|
3
3
|
/* ---- base.css ---- */
|
|
4
4
|
/* Shared: focus ring, reduced motion. Component files follow. */
|
|
5
5
|
.sc-focus-ring:focus-visible,
|
|
6
6
|
.sc-button:focus-visible,
|
|
7
7
|
.sc-card[data-interactive]:focus-visible,
|
|
8
|
-
.sc-dialog__close:focus-visible
|
|
8
|
+
.sc-dialog__close:focus-visible,
|
|
9
|
+
.sc-menu__item:focus-visible {
|
|
9
10
|
outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
|
|
10
11
|
outline-offset: var(--sc-border-width-focus);
|
|
11
12
|
}
|
|
12
13
|
|
|
14
|
+
/* ---- icon.css ---- */
|
|
15
|
+
/* ---- Icon ------------------------------------------------------------------ */
|
|
16
|
+
.sc-icon {
|
|
17
|
+
--_s: var(--sc-size-icon-md);
|
|
18
|
+
display: inline-block;
|
|
19
|
+
inline-size: var(--_s);
|
|
20
|
+
block-size: var(--_s);
|
|
21
|
+
flex: none;
|
|
22
|
+
vertical-align: -0.125em;
|
|
23
|
+
color: inherit;
|
|
24
|
+
overflow: visible;
|
|
25
|
+
}
|
|
26
|
+
.sc-icon[data-size='xs'] {
|
|
27
|
+
--_s: var(--sc-size-icon-xs);
|
|
28
|
+
}
|
|
29
|
+
.sc-icon[data-size='sm'] {
|
|
30
|
+
--_s: var(--sc-size-icon-sm);
|
|
31
|
+
}
|
|
32
|
+
.sc-icon[data-size='lg'] {
|
|
33
|
+
--_s: var(--sc-size-icon-lg);
|
|
34
|
+
}
|
|
35
|
+
.sc-icon[data-size='xl'] {
|
|
36
|
+
--_s: var(--sc-size-icon-xl);
|
|
37
|
+
}
|
|
38
|
+
.sc-icon[data-size='em'] {
|
|
39
|
+
--_s: 1em;
|
|
40
|
+
}
|
|
41
|
+
|
|
13
42
|
/* ---- button.css ---- */
|
|
14
43
|
/* ---- Button ---------------------------------------------------------------- */
|
|
15
44
|
.sc-button {
|
|
@@ -158,6 +187,38 @@
|
|
|
158
187
|
animation-duration: 1.6s;
|
|
159
188
|
}
|
|
160
189
|
}
|
|
190
|
+
/* ---- IconButton ------------------------------------------------------------ */
|
|
191
|
+
.sc-icon-button {
|
|
192
|
+
--_icon: var(--sc-size-icon-md);
|
|
193
|
+
padding-inline: 0;
|
|
194
|
+
inline-size: var(--_h);
|
|
195
|
+
flex: none;
|
|
196
|
+
}
|
|
197
|
+
.sc-icon-button[data-size='sm'] {
|
|
198
|
+
--_icon: var(--sc-size-icon-sm);
|
|
199
|
+
}
|
|
200
|
+
.sc-icon-button[data-size='lg'] {
|
|
201
|
+
--_icon: var(--sc-size-icon-lg);
|
|
202
|
+
}
|
|
203
|
+
.sc-icon-button[data-round] {
|
|
204
|
+
border-radius: var(--sc-radius-full);
|
|
205
|
+
}
|
|
206
|
+
.sc-icon-button > .sc-button__icon {
|
|
207
|
+
inline-size: var(--_icon);
|
|
208
|
+
block-size: var(--_icon);
|
|
209
|
+
}
|
|
210
|
+
.sc-icon-button[data-loading] > .sc-button__icon {
|
|
211
|
+
opacity: 0;
|
|
212
|
+
}
|
|
213
|
+
.sc-button[data-popup-open] {
|
|
214
|
+
background: var(--sc-color-surface-active);
|
|
215
|
+
}
|
|
216
|
+
.sc-button[data-variant='primary'][data-popup-open] {
|
|
217
|
+
background: var(--sc-color-accent-active);
|
|
218
|
+
}
|
|
219
|
+
.sc-button[data-variant='danger'][data-popup-open] {
|
|
220
|
+
background: var(--sc-color-danger-hover);
|
|
221
|
+
}
|
|
161
222
|
|
|
162
223
|
/* ---- badge.css ---- */
|
|
163
224
|
/* ---- Badge ----------------------------------------------------------------- */
|
|
@@ -597,4 +658,226 @@
|
|
|
597
658
|
}
|
|
598
659
|
}
|
|
599
660
|
|
|
661
|
+
/* ---- tooltip.css ---- */
|
|
662
|
+
/* ---- Tooltip --------------------------------------------------------------- */
|
|
663
|
+
.sc-tooltip__positioner {
|
|
664
|
+
z-index: var(--sc-z-tooltip);
|
|
665
|
+
outline: 0;
|
|
666
|
+
}
|
|
667
|
+
.sc-tooltip {
|
|
668
|
+
box-sizing: border-box;
|
|
669
|
+
max-inline-size: 280px;
|
|
670
|
+
padding: var(--sc-spacing-2xs) var(--sc-spacing-xs);
|
|
671
|
+
border-radius: var(--sc-radius-md);
|
|
672
|
+
background: var(--sc-color-text-default);
|
|
673
|
+
color: var(--sc-color-surface-default);
|
|
674
|
+
box-shadow: var(--sc-elevation-2);
|
|
675
|
+
font-family: var(--sc-font-family-sans);
|
|
676
|
+
font-size: var(--sc-font-size-xs);
|
|
677
|
+
font-weight: var(--sc-font-weight-medium);
|
|
678
|
+
line-height: var(--sc-font-line-height-ui);
|
|
679
|
+
text-wrap: pretty;
|
|
680
|
+
transform-origin: var(--transform-origin);
|
|
681
|
+
transition:
|
|
682
|
+
opacity var(--sc-duration-fast) var(--sc-ease-enter),
|
|
683
|
+
scale var(--sc-duration-fast) var(--sc-ease-enter);
|
|
684
|
+
}
|
|
685
|
+
.sc-tooltip[data-starting-style],
|
|
686
|
+
.sc-tooltip[data-ending-style] {
|
|
687
|
+
opacity: 0;
|
|
688
|
+
scale: 0.96;
|
|
689
|
+
}
|
|
690
|
+
.sc-tooltip[data-ending-style] {
|
|
691
|
+
transition-timing-function: var(--sc-ease-exit);
|
|
692
|
+
}
|
|
693
|
+
.sc-tooltip[data-instant] {
|
|
694
|
+
transition: none;
|
|
695
|
+
}
|
|
696
|
+
/* A pointed tip, 12×6, placed by Base UI on the side facing the trigger. */
|
|
697
|
+
.sc-tooltip__arrow {
|
|
698
|
+
--_w: 12px;
|
|
699
|
+
--_h: 6px;
|
|
700
|
+
display: block;
|
|
701
|
+
inline-size: var(--_w);
|
|
702
|
+
block-size: var(--_h);
|
|
703
|
+
overflow: clip;
|
|
704
|
+
pointer-events: none;
|
|
705
|
+
}
|
|
706
|
+
.sc-tooltip__arrow::before {
|
|
707
|
+
content: '';
|
|
708
|
+
position: absolute;
|
|
709
|
+
inset-block-end: 0;
|
|
710
|
+
inset-inline-start: 50%;
|
|
711
|
+
inline-size: calc(var(--_h) * 1.4142);
|
|
712
|
+
block-size: calc(var(--_h) * 1.4142);
|
|
713
|
+
background: var(--sc-color-text-default);
|
|
714
|
+
translate: -50% 50%;
|
|
715
|
+
rotate: 45deg;
|
|
716
|
+
}
|
|
717
|
+
.sc-tooltip__arrow[data-side='top'] {
|
|
718
|
+
inset-block-end: calc(-1 * var(--_h));
|
|
719
|
+
rotate: 180deg;
|
|
720
|
+
}
|
|
721
|
+
.sc-tooltip__arrow[data-side='bottom'] {
|
|
722
|
+
inset-block-start: calc(-1 * var(--_h));
|
|
723
|
+
}
|
|
724
|
+
.sc-tooltip__arrow[data-side='left'],
|
|
725
|
+
.sc-tooltip__arrow[data-side='inline-start'] {
|
|
726
|
+
inset-inline-end: calc(-1 * (var(--_w) + var(--_h)) / 2);
|
|
727
|
+
rotate: 90deg;
|
|
728
|
+
}
|
|
729
|
+
.sc-tooltip__arrow[data-side='right'],
|
|
730
|
+
.sc-tooltip__arrow[data-side='inline-end'] {
|
|
731
|
+
inset-inline-start: calc(-1 * (var(--_w) + var(--_h)) / 2);
|
|
732
|
+
rotate: -90deg;
|
|
733
|
+
}
|
|
734
|
+
.sc-tooltip .sc-kbd {
|
|
735
|
+
background: transparent;
|
|
736
|
+
color: inherit;
|
|
737
|
+
border-color: currentColor;
|
|
738
|
+
box-shadow: none;
|
|
739
|
+
opacity: 0.8;
|
|
740
|
+
}
|
|
741
|
+
@media (prefers-reduced-motion: reduce) {
|
|
742
|
+
.sc-tooltip {
|
|
743
|
+
transition-duration: 0ms;
|
|
744
|
+
}
|
|
745
|
+
.sc-tooltip[data-starting-style],
|
|
746
|
+
.sc-tooltip[data-ending-style] {
|
|
747
|
+
scale: none;
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
/* ---- menu.css ---- */
|
|
752
|
+
/* ---- Menu ------------------------------------------------------------------ */
|
|
753
|
+
.sc-menu__positioner {
|
|
754
|
+
z-index: var(--sc-z-dropdown);
|
|
755
|
+
outline: 0;
|
|
756
|
+
}
|
|
757
|
+
.sc-menu {
|
|
758
|
+
--_item-h: var(--sc-size-control-sm);
|
|
759
|
+
box-sizing: border-box;
|
|
760
|
+
min-inline-size: 180px;
|
|
761
|
+
max-inline-size: min(100vw - 2 * var(--sc-spacing-md), 320px);
|
|
762
|
+
max-block-size: var(--available-height);
|
|
763
|
+
overflow: auto;
|
|
764
|
+
padding: var(--sc-spacing-2xs);
|
|
765
|
+
border-radius: var(--sc-radius-lg);
|
|
766
|
+
background: var(--sc-color-surface-raised);
|
|
767
|
+
color: var(--sc-color-text-default);
|
|
768
|
+
border: var(--sc-border-width-hairline) solid var(--sc-color-border-default);
|
|
769
|
+
box-shadow: var(--sc-elevation-2);
|
|
770
|
+
font-family: var(--sc-font-family-sans);
|
|
771
|
+
font-size: var(--sc-font-size-sm);
|
|
772
|
+
line-height: var(--sc-font-line-height-ui);
|
|
773
|
+
outline: 0;
|
|
774
|
+
transform-origin: var(--transform-origin);
|
|
775
|
+
transition:
|
|
776
|
+
opacity var(--sc-duration-fast) var(--sc-ease-enter),
|
|
777
|
+
scale var(--sc-duration-fast) var(--sc-ease-enter);
|
|
778
|
+
}
|
|
779
|
+
.sc-menu[data-starting-style],
|
|
780
|
+
.sc-menu[data-ending-style] {
|
|
781
|
+
opacity: 0;
|
|
782
|
+
scale: 0.97;
|
|
783
|
+
}
|
|
784
|
+
.sc-menu[data-ending-style] {
|
|
785
|
+
transition-timing-function: var(--sc-ease-exit);
|
|
786
|
+
}
|
|
787
|
+
.sc-menu[data-instant] {
|
|
788
|
+
transition: none;
|
|
789
|
+
}
|
|
790
|
+
.sc-menu__item {
|
|
791
|
+
display: grid;
|
|
792
|
+
grid-template-columns: var(--sc-size-icon-md) 1fr auto;
|
|
793
|
+
align-items: center;
|
|
794
|
+
column-gap: var(--sc-spacing-xs);
|
|
795
|
+
box-sizing: border-box;
|
|
796
|
+
min-block-size: var(--_item-h);
|
|
797
|
+
padding-inline: var(--sc-spacing-xs);
|
|
798
|
+
padding-block: var(--sc-spacing-2xs);
|
|
799
|
+
border-radius: var(--sc-radius-sm);
|
|
800
|
+
color: var(--sc-color-text-default);
|
|
801
|
+
text-decoration: none;
|
|
802
|
+
cursor: default;
|
|
803
|
+
user-select: none;
|
|
804
|
+
outline: 0;
|
|
805
|
+
}
|
|
806
|
+
.sc-menu__item[data-highlighted] {
|
|
807
|
+
background: var(--sc-color-surface-hover);
|
|
808
|
+
}
|
|
809
|
+
.sc-menu__item:active:not([data-disabled]) {
|
|
810
|
+
background: var(--sc-color-surface-active);
|
|
811
|
+
}
|
|
812
|
+
.sc-menu__item[data-disabled] {
|
|
813
|
+
opacity: 0.5;
|
|
814
|
+
cursor: not-allowed;
|
|
815
|
+
}
|
|
816
|
+
.sc-menu__item[data-tone='danger'] {
|
|
817
|
+
color: var(--sc-color-danger-text);
|
|
818
|
+
}
|
|
819
|
+
.sc-menu__item[data-tone='danger'][data-highlighted] {
|
|
820
|
+
background: var(--sc-color-danger-subtle);
|
|
821
|
+
}
|
|
822
|
+
.sc-menu__icon {
|
|
823
|
+
display: inline-flex;
|
|
824
|
+
align-items: center;
|
|
825
|
+
justify-content: center;
|
|
826
|
+
inline-size: var(--sc-size-icon-md);
|
|
827
|
+
block-size: var(--sc-size-icon-md);
|
|
828
|
+
color: var(--sc-color-text-muted);
|
|
829
|
+
}
|
|
830
|
+
.sc-menu__item[data-tone='danger'] > .sc-menu__icon {
|
|
831
|
+
color: inherit;
|
|
832
|
+
}
|
|
833
|
+
.sc-menu__indicator {
|
|
834
|
+
grid-column: 1;
|
|
835
|
+
color: var(--sc-color-accent-text);
|
|
836
|
+
}
|
|
837
|
+
.sc-menu__item[data-unchecked] > .sc-menu__label {
|
|
838
|
+
grid-column: 2;
|
|
839
|
+
}
|
|
840
|
+
.sc-menu__label {
|
|
841
|
+
grid-column: 2;
|
|
842
|
+
min-inline-size: 0;
|
|
843
|
+
}
|
|
844
|
+
.sc-menu__trailing {
|
|
845
|
+
grid-column: 3;
|
|
846
|
+
display: inline-flex;
|
|
847
|
+
align-items: center;
|
|
848
|
+
gap: var(--sc-spacing-3xs);
|
|
849
|
+
padding-inline-start: var(--sc-spacing-md);
|
|
850
|
+
color: var(--sc-color-text-muted);
|
|
851
|
+
font-size: var(--sc-font-size-xs);
|
|
852
|
+
font-variant-numeric: tabular-nums;
|
|
853
|
+
}
|
|
854
|
+
.sc-menu__radio-dot {
|
|
855
|
+
inline-size: 6px;
|
|
856
|
+
block-size: 6px;
|
|
857
|
+
border-radius: 50%;
|
|
858
|
+
background: currentColor;
|
|
859
|
+
}
|
|
860
|
+
.sc-menu__group-label {
|
|
861
|
+
padding: var(--sc-spacing-2xs) var(--sc-spacing-xs);
|
|
862
|
+
color: var(--sc-color-text-muted);
|
|
863
|
+
font-size: var(--sc-font-size-xs);
|
|
864
|
+
font-weight: var(--sc-font-weight-medium);
|
|
865
|
+
letter-spacing: var(--sc-font-tracking-wide);
|
|
866
|
+
text-transform: uppercase;
|
|
867
|
+
}
|
|
868
|
+
.sc-menu__separator {
|
|
869
|
+
block-size: var(--sc-border-width-hairline);
|
|
870
|
+
margin: var(--sc-spacing-2xs) calc(-1 * var(--sc-spacing-2xs));
|
|
871
|
+
background: var(--sc-color-border-default);
|
|
872
|
+
}
|
|
873
|
+
@media (prefers-reduced-motion: reduce) {
|
|
874
|
+
.sc-menu {
|
|
875
|
+
transition-duration: 0ms;
|
|
876
|
+
}
|
|
877
|
+
.sc-menu[data-starting-style],
|
|
878
|
+
.sc-menu[data-ending-style] {
|
|
879
|
+
scale: none;
|
|
880
|
+
}
|
|
881
|
+
}
|
|
882
|
+
|
|
600
883
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salemcobalt/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "React components for the Salem Cobalt design system: Button, Badge, Card, Stack, Inline, Kbd, Dialog.",
|
|
3
|
+
"version": "0.2.0-rc.0",
|
|
4
|
+
"description": "React components for the Salem Cobalt design system: Button, IconButton, Icon set, Badge, Card, Stack, Inline, Kbd, Dialog, Tooltip, Menu.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": "^19.0.0",
|
|
35
35
|
"react-dom": "^19.0.0",
|
|
36
|
-
"@salemcobalt/tokens": "^0.
|
|
36
|
+
"@salemcobalt/tokens": "^0.2.0-rc.0"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@base-ui/react": "^1.9.0",
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"@testing-library/user-event": "^14.6.8",
|
|
49
49
|
"@types/react": "^19.3.0",
|
|
50
50
|
"@types/react-dom": "^19.3.0",
|
|
51
|
+
"axe-core": "^4.14.0",
|
|
51
52
|
"jsdom": "^30.1.3",
|
|
52
53
|
"react": "^19.3.1",
|
|
53
54
|
"react-dom": "^19.3.1",
|
|
@@ -55,13 +56,13 @@
|
|
|
55
56
|
"tsup": "^9.0.0",
|
|
56
57
|
"typescript": "^5.9.3",
|
|
57
58
|
"vitest": "^5.0.5",
|
|
58
|
-
"@salemcobalt/tokens": "^0.
|
|
59
|
+
"@salemcobalt/tokens": "^0.2.0-rc.0"
|
|
59
60
|
},
|
|
60
61
|
"publishConfig": {
|
|
61
62
|
"access": "public"
|
|
62
63
|
},
|
|
63
64
|
"scripts": {
|
|
64
|
-
"build": "tsup && node scripts/build-css.mjs",
|
|
65
|
+
"build": "node scripts/build-icons.mjs && tsup && node scripts/build-css.mjs",
|
|
65
66
|
"dev": "tsup --watch",
|
|
66
67
|
"test": "vitest run",
|
|
67
68
|
"typecheck": "tsc -p tsconfig.json --noEmit"
|