npm - @mason-ds/react - Versions diffs - 0.2.0 → 0.2.2 - Mend

@mason-ds/react 0.2.0 → 0.2.2

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.

Files changed (8) hide show

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/provider.tsx","../src/styles.ts","../src/textStyles.ts","../src/Text.tsx","../src/stackStyles.ts","../src/Stack.tsx","../src/cardStyles.ts","../src/Card.tsx","../src/dividerStyles.ts","../src/Divider.tsx","../src/linkStyles.ts","../src/Link.tsx","../src/spinnerStyles.ts","../src/Spinner.tsx","../src/buttonStyles.ts","../src/Button.tsx","../src/badgeStyles.ts","../src/Badge.tsx","../src/calloutStyles.ts","../src/Callout.tsx","../src/field.tsx","../src/fieldStyles.ts","../src/TextField.tsx","../src/Select.tsx","../src/checkboxStyles.ts","../src/Checkbox.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport type MasonTheme = 'light' \| 'dark' \| 'system'\n\nexport interface MasonProviderProps {\n children: ReactNode\n theme?: MasonTheme\n}\n\n/** Root provider for mason-ds React apps. /\nexport function MasonProvider({ children, theme = 'light' }: MasonProviderProps) {\n return <div data-mason-provider data-mason-theme={theme}>{children}</div>\n}\n","import { getSemanticCssVar, type SemanticTokenPath } from '@mason-ds/tokens'\n\n/\n Prop unions are derived from the semantic token paths, so adding or removing\n * a token role changes the component API instead of silently drifting from it.\n /\ntype FontRoleOf<Path> = Path extends `font.${infer Role}.family` ? Role : never\ntype TextToneOf<Path> = Path extends `color.text.${infer Tone}` ? Tone : never\ntype FeedbackToneOf<Path> = Path extends `color.feedback.${infer Tone}.bg` ? Tone : never\ntype LevelOf<Path> = Path extends `spacing.inset.${infer Level}` ? Level : never\ntype RadiusOf<Path> = Path extends `radius.${infer Level}` ? Level : never\ntype ShadowOf<Path> = Path extends `shadow.${infer Level}` ? Level : never\n\n/* Typography roles, e.g. `heading.h2`, `body.md`, `code.md`. /\nexport type TextVariant = FontRoleOf<SemanticTokenPath>\n/* Text color roles, e.g. `primary`, `secondary`, `link`, `danger`. /\nexport type TextTone = TextToneOf<SemanticTokenPath>\n/* Status roles shared by Badge / Callout. /\nexport type FeedbackTone = FeedbackToneOf<SemanticTokenPath>\n/* Spacing steps — sm / md / lg. /\nexport type Level = LevelOf<SemanticTokenPath>\nexport type RadiusLevel = RadiusOf<SemanticTokenPath>\nexport type ShadowLevel = ShadowOf<SemanticTokenPath>\n\n/* Reference a semantic token as `var(--mason-)`. /\nexport function cssVar(path: SemanticTokenPath): string {\n return `var(${getSemanticCssVar(path)})`\n}\n\nexport function spacingVar(axis: 'inset' \| 'stack' \| 'inline', level: Level): string {\n return cssVar(`spacing.${axis}.${level}`)\n}\n\nexport function radiusVar(level: RadiusLevel): string {\n return cssVar(`radius.${level}`)\n}\n\nexport function shadowVar(level: ShadowLevel): string {\n return cssVar(`shadow.${level}`)\n}\n\nexport function textColorVar(tone: TextTone): string {\n return cssVar(`color.text.${tone}`)\n}\n\nexport function typographyStyle(variant: TextVariant): {\n fontFamily: string\n fontSize: string\n fontWeight: string\n lineHeight: string\n letterSpacing: string\n} {\n return {\n fontFamily: cssVar(`font.${variant}.family`),\n fontSize: cssVar(`font.${variant}.size`),\n fontWeight: cssVar(`font.${variant}.weight`),\n lineHeight: cssVar(`font.${variant}.lineHeight`),\n letterSpacing: cssVar(`font.${variant}.letterSpacing`),\n }\n}\n\nexport function mergeClassName(...parts: (string \| undefined)[]): string \| undefined {\n const merged = parts.filter(Boolean).join(' ')\n return merged.length > 0 ? merged : undefined\n}\n","import type { CSSProperties } from 'react'\nimport { textColorVar, typographyStyle, type TextTone, type TextVariant } from './styles.js'\n\nexport type TextAlign = 'start' \| 'center' \| 'end'\n\nexport function textStyle({\n variant = 'body.md',\n tone = 'primary',\n align,\n truncate = false,\n}: {\n variant?: TextVariant\n tone?: TextTone\n align?: TextAlign\n truncate?: boolean\n}): CSSProperties {\n return {\n margin: 0,\n color: textColorVar(tone),\n ...typographyStyle(variant),\n ...(align ? { textAlign: align } : null),\n ...(truncate\n ? { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }\n : null),\n }\n}\n","import type { ElementType, HTMLAttributes } from 'react'\nimport { mergeClassName, type TextTone, type TextVariant } from './styles.js'\nimport { textStyle, type TextAlign } from './textStyles.js'\n\nexport type { TextAlign } from './textStyles.js'\n\nexport type TextElement =\n \| 'p'\n \| 'span'\n \| 'div'\n \| 'label'\n \| 'strong'\n \| 'code'\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n as?: TextElement\n variant?: TextVariant\n tone?: TextTone\n align?: TextAlign\n truncate?: boolean\n}\n\n/*\n Typography primitive. `variant` covers every font role in the token set,\n * `tone` every `color.text.` role.\n \n * Pick `as` for semantics (a heading role does not imply an `<h2>`).\n /\nexport function Text({\n as = 'p',\n variant = 'body.md',\n tone = 'primary',\n align,\n truncate = false,\n className,\n style,\n children,\n ...rest\n}: TextProps) {\n const Component: ElementType = as\n\n return (\n <Component\n data-mason-component=\"text\"\n data-variant={variant}\n className={mergeClassName(className)}\n style={{ ...textStyle({ variant, tone, align, truncate }), ...style }}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { spacingVar, type Level } from './styles.js'\n\nexport type StackDirection = 'row' \| 'column'\nexport type StackAlign = 'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'\nexport type StackJustify = 'start' \| 'center' \| 'end' \| 'between'\n\nconst FLEX_ALIGN = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n} as const satisfies Record<StackAlign, string>\n\nconst FLEX_JUSTIFY = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n between: 'space-between',\n} as const satisfies Record<StackJustify, string>\n\n/* Row gaps come from `spacing.inline`, column gaps from `spacing.stack`. /\nexport function stackStyle({\n direction = 'column',\n gap = 'md',\n align,\n justify,\n wrap = false,\n inline = false,\n}: {\n direction?: StackDirection\n gap?: Level\n align?: StackAlign\n justify?: StackJustify\n wrap?: boolean\n inline?: boolean\n}): CSSProperties {\n return {\n display: inline ? 'inline-flex' : 'flex',\n flexDirection: direction,\n gap: spacingVar(direction === 'row' ? 'inline' : 'stack', gap),\n flexWrap: wrap ? 'wrap' : 'nowrap',\n minWidth: 0,\n ...(align ? { alignItems: FLEX_ALIGN[align] } : null),\n ...(justify ? { justifyContent: FLEX_JUSTIFY[justify] } : null),\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport { mergeClassName, type Level } from './styles.js'\nimport {\n stackStyle,\n type StackAlign,\n type StackDirection,\n type StackJustify,\n} from './stackStyles.js'\n\nexport type {\n StackAlign,\n StackDirection,\n StackJustify,\n} from './stackStyles.js'\n\nexport interface StackProps extends HTMLAttributes<HTMLDivElement> {\n direction?: StackDirection\n gap?: Level\n align?: StackAlign\n justify?: StackJustify\n wrap?: boolean\n inline?: boolean\n}\n\n/* Layout primitive — flex row/column with token gaps. /\nexport function Stack({\n direction = 'column',\n gap = 'md',\n align,\n justify,\n wrap = false,\n inline = false,\n className,\n style,\n children,\n ...rest\n}: StackProps) {\n return (\n <div\n data-mason-component=\"stack\"\n data-direction={direction}\n className={mergeClassName(className)}\n style={{\n ...stackStyle({ direction, gap, align, justify, wrap, inline }),\n ...style,\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n","import type { CSSProperties } from 'react'\nimport {\n cssVar,\n radiusVar,\n shadowVar,\n spacingVar,\n type Level,\n type RadiusLevel,\n type ShadowLevel,\n} from './styles.js'\n\nexport type CardTone = 'surface' \| 'canvas' \| 'elevated'\n\nconst TONE_BG = {\n surface: 'color.bg.surface',\n canvas: 'color.bg.canvas',\n elevated: 'color.bg.elevated',\n} as const\n\nexport function cardStyle({\n padding = 'md',\n elevation = 'sm',\n radius = 'md',\n tone = 'surface',\n bordered = true,\n}: {\n padding?: Level\n elevation?: ShadowLevel\n radius?: RadiusLevel\n tone?: CardTone\n bordered?: boolean\n}): CSSProperties {\n return {\n display: 'block',\n padding: spacingVar('inset', padding),\n backgroundColor: cssVar(TONE_BG[tone]),\n color: cssVar('color.text.primary'),\n border: bordered ? `1px solid ${cssVar('color.border.subtle')}` : 'none',\n borderRadius: radiusVar(radius),\n boxShadow: shadowVar(elevation),\n boxSizing: 'border-box',\n minWidth: 0,\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport {\n mergeClassName,\n type Level,\n type RadiusLevel,\n type ShadowLevel,\n} from './styles.js'\nimport { cardStyle, type CardTone } from './cardStyles.js'\n\nexport type { CardTone } from './cardStyles.js'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n padding?: Level\n elevation?: ShadowLevel\n radius?: RadiusLevel\n tone?: CardTone\n bordered?: boolean\n}\n\n/* Surface primitive — background, border, radius and shadow from tokens. /\nexport function Card({\n padding = 'md',\n elevation = 'sm',\n radius = 'md',\n tone = 'surface',\n bordered = true,\n className,\n style,\n children,\n ...rest\n}: CardProps) {\n return (\n <div\n data-mason-component=\"card\"\n data-tone={tone}\n className={mergeClassName(className)}\n style={{\n ...cardStyle({ padding, elevation, radius, tone, bordered }),\n ...style,\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { cssVar } from './styles.js'\n\nexport type DividerOrientation = 'horizontal' \| 'vertical'\n\nexport function dividerStyle(orientation: DividerOrientation = 'horizontal'): CSSProperties {\n const line = `1px solid ${cssVar('color.border.subtle')}`\n\n if (orientation === 'vertical') {\n return {\n alignSelf: 'stretch',\n width: 0,\n minHeight: '1em',\n margin: 0,\n border: 'none',\n borderInlineStart: line,\n }\n }\n\n return {\n width: '100%',\n height: 0,\n margin: 0,\n border: 'none',\n borderBlockStart: line,\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport { mergeClassName } from './styles.js'\nimport { dividerStyle, type DividerOrientation } from './dividerStyles.js'\n\nexport type { DividerOrientation } from './dividerStyles.js'\n\nexport interface DividerProps extends HTMLAttributes<HTMLHRElement> {\n orientation?: DividerOrientation\n}\n\n/* Separator line. `<hr>` already carries the separator role. /\nexport function Divider({\n orientation = 'horizontal',\n className,\n style,\n ...rest\n}: DividerProps) {\n return (\n <hr\n data-mason-component=\"divider\"\n data-orientation={orientation}\n aria-orientation={orientation === 'vertical' ? 'vertical' : undefined}\n className={mergeClassName(className)}\n style={{ ...dividerStyle(orientation), ...style }}\n {...rest}\n />\n )\n}\n","import type { CSSProperties } from 'react'\nimport { radiusVar, textColorVar } from './styles.js'\n\nexport type LinkTone = 'link' \| 'inherit'\nexport type LinkUnderline = 'hover' \| 'always' \| 'none'\n\n/* Link inherits typography from its container so it can sit inside Text. /\nexport function linkStyle({\n tone = 'link',\n underline = 'hover',\n}: {\n tone?: LinkTone\n underline?: LinkUnderline\n}): CSSProperties {\n return {\n color: tone === 'inherit' ? 'inherit' : textColorVar('link'),\n textDecoration: underline === 'always' ? 'underline' : 'none',\n textUnderlineOffset: '0.15em',\n borderRadius: radiusVar('sm'),\n cursor: 'pointer',\n }\n}\n","import type { AnchorHTMLAttributes } from 'react'\nimport { mergeClassName } from './styles.js'\nimport { linkStyle, type LinkTone, type LinkUnderline } from './linkStyles.js'\n\nexport type { LinkTone, LinkUnderline } from './linkStyles.js'\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n tone?: LinkTone\n underline?: LinkUnderline\n /* Adds `target=\"_blank\"` and a safe `rel`. /\n external?: boolean\n}\n\n/\n Navigational anchor. Typography is inherited, so it composes inside Text.\n \n For client-side routing, pass the router's component via `asChild`-style\n * composition on the consumer side (`<Link href>` stays a plain `<a>`).\n /\nexport function Link({\n tone = 'link',\n underline = 'hover',\n external = false,\n className,\n style,\n children,\n ...rest\n}: LinkProps) {\n const externalProps = external\n ? { target: '_blank', rel: 'noreferrer noopener' }\n : null\n\n return (\n <a\n data-mason-component=\"link\"\n data-tone={tone}\n data-underline={underline}\n className={mergeClassName(className)}\n style={{ ...linkStyle({ tone, underline }), ...style }}\n {...externalProps}\n {...rest}\n >\n {children}\n </a>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { cssVar } from './styles.js'\n\n/* `inherit` follows the surrounding font size — used inside Button. /\nexport type SpinnerSize = 'sm' \| 'md' \| 'lg' \| 'inherit'\n\nconst SIZE_DIMENSION = {\n sm: cssVar('font.body.sm.size'),\n md: cssVar('font.body.md.size'),\n lg: cssVar('font.display.lg.size'),\n inherit: '1em',\n} as const satisfies Record<SpinnerSize, string>\n\nexport function spinnerStyle(size: SpinnerSize = 'md'): CSSProperties {\n const dimension = SIZE_DIMENSION[size]\n\n return {\n width: dimension,\n height: dimension,\n border: '2px solid currentColor',\n borderTopColor: 'transparent',\n borderRadius: '50%',\n display: 'inline-block',\n flexShrink: 0,\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport { mergeClassName } from './styles.js'\nimport { spinnerStyle, type SpinnerSize } from './spinnerStyles.js'\n\nexport type { SpinnerSize } from './spinnerStyles.js'\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n size?: SpinnerSize\n /* Announced while loading. Without it the spinner is `aria-hidden`. /\n label?: string\n}\n\n/* Indeterminate loading indicator. The rotation lives in `tokens.css`. /\nexport function Spinner({\n size = 'md',\n label,\n className,\n style,\n ...rest\n}: SpinnerProps) {\n return (\n <span\n data-mason-component=\"spinner\"\n data-size={size}\n role={label ? 'status' : undefined}\n aria-label={label}\n aria-hidden={label ? undefined : true}\n className={mergeClassName(className)}\n style={{ ...spinnerStyle(size), ...style }}\n {...rest}\n />\n )\n}\n","import type { CSSProperties } from 'react'\nimport { cssVar, typographyStyle, type TextVariant } from './styles.js'\n\nexport type ButtonVariant = 'primary' \| 'secondary' \| 'ghost' \| 'danger'\nexport type ButtonSize = 'sm' \| 'md' \| 'lg'\n\ntype ActionColorPath =\n \| `color.action.${ButtonVariant \| 'disabled'}.${'bg' \| 'text' \| 'border'}`\n\nfunction actionColors(variant: ButtonVariant \| 'disabled'): {\n bg: ActionColorPath\n text: ActionColorPath\n border: ActionColorPath\n} {\n return {\n bg: `color.action.${variant}.bg`,\n text: `color.action.${variant}.text`,\n border: `color.action.${variant}.border`,\n }\n}\n\n/\n Size ladder — padding / radius / type. Height comes from content, not min-height.\n /\nconst sizeStyles = {\n sm: {\n paddingBlock: cssVar('spacing.inset.sm'),\n paddingInline: cssVar('spacing.inset.md'),\n gap: cssVar('spacing.inline.sm'),\n radius: cssVar('radius.sm'),\n font: 'label.sm' as TextVariant,\n },\n md: {\n paddingBlock: cssVar('spacing.inset.md'),\n paddingInline: cssVar('spacing.inset.lg'),\n gap: cssVar('spacing.inline.md'),\n radius: cssVar('radius.md'),\n font: 'label.md' as TextVariant,\n },\n lg: {\n paddingBlock: cssVar('spacing.inset.lg'),\n paddingInline: `calc(${cssVar('spacing.inset.lg')} + ${cssVar('spacing.inset.md')})`,\n gap: cssVar('spacing.inline.md'),\n radius: cssVar('radius.lg'),\n font: 'label.lg' as TextVariant,\n },\n} as const satisfies Record<\n ButtonSize,\n {\n paddingBlock: string\n paddingInline: string\n gap: string\n radius: string\n font: TextVariant\n }\n>\n\nexport function buttonStyle({\n variant = 'primary',\n size = 'md',\n disabled = false,\n loading = false,\n}: {\n variant?: ButtonVariant\n size?: ButtonSize\n disabled?: boolean\n loading?: boolean\n}): CSSProperties {\n const inactive = disabled \|\| loading\n const colors = actionColors(inactive ? 'disabled' : variant)\n const sizing = sizeStyles[size]\n\n return {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: sizing.gap,\n paddingBlock: sizing.paddingBlock,\n paddingInline: sizing.paddingInline,\n margin: 0,\n backgroundColor: cssVar(colors.bg),\n color: cssVar(colors.text),\n border: `1px solid ${cssVar(colors.border)}`,\n borderRadius: sizing.radius,\n boxSizing: 'border-box',\n ...typographyStyle(sizing.font),\n textDecoration: 'none',\n whiteSpace: 'nowrap',\n }\n}\n","import type { ButtonHTMLAttributes, ReactNode } from 'react'\nimport { mergeClassName } from './styles.js'\nimport { Spinner } from './Spinner.js'\nimport { buttonStyle, type ButtonSize, type ButtonVariant } from './buttonStyles.js'\n\nexport type { ButtonSize, ButtonVariant } from './buttonStyles.js'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant\n size?: ButtonSize\n loading?: boolean\n leadingSlot?: ReactNode\n trailingSlot?: ReactNode\n}\n\n/\n Primary action component. Native `<button>` with token-backed styles.\n \n Icon-only usage requires an `aria-label`.\n /\nexport function Button({\n variant = 'primary',\n size = 'md',\n disabled = false,\n loading = false,\n leadingSlot,\n trailingSlot,\n className,\n style,\n children,\n type = 'button',\n ...rest\n}: ButtonProps) {\n const isDisabled = disabled \|\| loading\n\n return (\n <button\n type={type}\n data-mason-component=\"button\"\n data-variant={variant}\n data-size={size}\n disabled={isDisabled}\n aria-busy={loading \|\| undefined}\n className={mergeClassName(className)}\n style={{\n ...buttonStyle({ variant, size, disabled, loading }),\n ...style,\n }}\n {...rest}\n >\n {loading ? (\n <Spinner size=\"inherit\" data-mason-slot=\"spinner\" />\n ) : leadingSlot ? (\n <span data-mason-slot=\"leading\">{leadingSlot}</span>\n ) : null}\n {children ? <span data-mason-slot=\"label\">{children}</span> : null}\n {trailingSlot && !loading ? (\n <span data-mason-slot=\"trailing\">{trailingSlot}</span>\n ) : null}\n </button>\n )\n}\n","import type { CSSProperties } from 'react'\nimport {\n cssVar,\n radiusVar,\n spacingVar,\n typographyStyle,\n type FeedbackTone,\n} from './styles.js'\n\nexport type BadgeTone = FeedbackTone \| 'neutral'\nexport type BadgeSize = 'sm' \| 'md'\n\nexport function badgeStyle({\n tone = 'neutral',\n size = 'sm',\n}: {\n tone?: BadgeTone\n size?: BadgeSize\n}): CSSProperties {\n const colors =\n tone === 'neutral'\n ? {\n bg: cssVar('color.bg.canvas'),\n text: cssVar('color.text.secondary'),\n border: cssVar('color.border.subtle'),\n }\n : {\n bg: cssVar(`color.feedback.${tone}.bg`),\n text: cssVar(`color.feedback.${tone}.text`),\n border: cssVar(`color.feedback.${tone}.border`),\n }\n\n return {\n display: 'inline-flex',\n alignItems: 'center',\n gap: spacingVar('inline', 'sm'),\n paddingBlock: '0.125em',\n paddingInline: spacingVar('inset', 'sm'),\n backgroundColor: colors.bg,\n color: colors.text,\n border: `1px solid ${colors.border}`,\n borderRadius: radiusVar('full'),\n ...typographyStyle(size === 'sm' ? 'label.sm' : 'label.md'),\n whiteSpace: 'nowrap',\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport { mergeClassName } from './styles.js'\nimport { badgeStyle, type BadgeSize, type BadgeTone } from './badgeStyles.js'\n\nexport type { BadgeSize, BadgeTone } from './badgeStyles.js'\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n tone?: BadgeTone\n size?: BadgeSize\n}\n\n/\n Compact status chip. Colour carries no meaning on its own — keep the label\n * readable (`활성`, not just a green dot).\n /\nexport function Badge({\n tone = 'neutral',\n size = 'sm',\n className,\n style,\n children,\n ...rest\n}: BadgeProps) {\n return (\n <span\n data-mason-component=\"badge\"\n data-tone={tone}\n data-size={size}\n className={mergeClassName(className)}\n style={{ ...badgeStyle({ tone, size }), ...style }}\n {...rest}\n >\n {children}\n </span>\n )\n}\n","import type { CSSProperties } from 'react'\nimport {\n cssVar,\n radiusVar,\n spacingVar,\n typographyStyle,\n type FeedbackTone,\n} from './styles.js'\n\nexport function calloutStyle(tone: FeedbackTone = 'info'): CSSProperties {\n return {\n display: 'flex',\n gap: spacingVar('inline', 'md'),\n padding: spacingVar('inset', 'md'),\n backgroundColor: cssVar(`color.feedback.${tone}.bg`),\n color: cssVar(`color.feedback.${tone}.text`),\n border: `1px solid ${cssVar(`color.feedback.${tone}.border`)}`,\n borderRadius: radiusVar('md'),\n boxSizing: 'border-box',\n ...typographyStyle('body.md'),\n }\n}\n\nexport function calloutContentStyle(): CSSProperties {\n return {\n display: 'flex',\n flexDirection: 'column',\n gap: spacingVar('stack', 'sm'),\n minWidth: 0,\n }\n}\n\nexport function calloutTitleStyle(): CSSProperties {\n return { margin: 0, ...typographyStyle('label.md') }\n}\n\nexport function calloutBodyStyle(): CSSProperties {\n return { margin: 0, ...typographyStyle('body.sm') }\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport { mergeClassName, type FeedbackTone } from './styles.js'\nimport {\n calloutBodyStyle,\n calloutContentStyle,\n calloutStyle,\n calloutTitleStyle,\n} from './calloutStyles.js'\n\n/* `title` is the heading slot, so the native tooltip attribute is not available. /\nexport interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n tone?: FeedbackTone\n title?: ReactNode\n iconSlot?: ReactNode\n}\n\n/\n Inline message block for page-level feedback.\n \n It is static content by default — for something that appears in response to\n * an action, pass `role=\"status\"` (or `\"alert\"` when it must interrupt).\n /\nexport function Callout({\n tone = 'info',\n title,\n iconSlot,\n className,\n style,\n children,\n ...rest\n}: CalloutProps) {\n return (\n <div\n data-mason-component=\"callout\"\n data-tone={tone}\n className={mergeClassName(className)}\n style={{ ...calloutStyle(tone), ...style }}\n {...rest}\n >\n {iconSlot ? (\n <span data-mason-slot=\"icon\" aria-hidden=\"true\">\n {iconSlot}\n </span>\n ) : null}\n <div data-mason-slot=\"content\" style={calloutContentStyle()}>\n {title ? (\n <p data-mason-slot=\"title\" style={calloutTitleStyle()}>\n {title}\n </p>\n ) : null}\n {children ? (\n <div data-mason-slot=\"body\" style={calloutBodyStyle()}>\n {children}\n </div>\n ) : null}\n </div>\n </div>\n )\n}\n","import { useId, type CSSProperties, type ReactNode } from 'react'\nimport { mergeClassName } from './styles.js'\nimport {\n fieldDescriptionStyle,\n fieldErrorStyle,\n fieldLabelStyle,\n fieldRootStyle,\n type FieldSize,\n} from './fieldStyles.js'\n\nexport interface FieldIds {\n controlId: string\n descriptionId: string\n errorId: string\n /* `aria-describedby` value, or undefined when there is nothing to describe. /\n describedBy: string \| undefined\n}\n\n/* Stable ids wiring a control to its label, description and error. /\nexport function useFieldIds({\n id,\n description,\n error,\n}: {\n id?: string\n description?: ReactNode\n error?: ReactNode\n}): FieldIds {\n const generated = useId()\n const controlId = id ?? `mason-field-${generated}`\n const descriptionId = `${controlId}-description`\n const errorId = `${controlId}-error`\n const describedBy =\n [description ? descriptionId : null, error ? errorId : null]\n .filter(Boolean)\n .join(' ') \|\| undefined\n\n return { controlId, descriptionId, errorId, describedBy }\n}\n\nexport interface FieldFrameProps {\n /* `data-mason-component` value of the wrapper, e.g. `text-field`. /\n component: string\n ids: FieldIds\n label?: ReactNode\n description?: ReactNode\n error?: ReactNode\n size?: FieldSize\n invalid?: boolean\n disabled?: boolean\n className?: string\n style?: CSSProperties\n children: ReactNode\n}\n\n/\n Shared label / description / error chrome for form controls.\n * Internal — consumers use TextField, Select or Checkbox.\n /\nexport function FieldFrame({\n component,\n ids,\n label,\n description,\n error,\n size = 'md',\n invalid = false,\n disabled = false,\n className,\n style,\n children,\n}: FieldFrameProps) {\n return (\n <div\n data-mason-component={component}\n data-size={size}\n data-invalid={invalid \|\| undefined}\n data-disabled={disabled \|\| undefined}\n className={mergeClassName(className)}\n style={{ ...fieldRootStyle(), ...style }}\n >\n {label ? (\n <label\n data-mason-slot=\"label\"\n htmlFor={ids.controlId}\n style={fieldLabelStyle(size)}\n >\n {label}\n </label>\n ) : null}\n {children}\n {description ? (\n <p\n data-mason-slot=\"description\"\n id={ids.descriptionId}\n style={fieldDescriptionStyle()}\n >\n {description}\n </p>\n ) : null}\n {error ? (\n <p\n data-mason-slot=\"error\"\n id={ids.errorId}\n role=\"alert\"\n style={fieldErrorStyle()}\n >\n {error}\n </p>\n ) : null}\n </div>\n )\n}\n","import type { CSSProperties } from 'react'\nimport {\n cssVar,\n radiusVar,\n spacingVar,\n typographyStyle,\n type Level,\n type TextVariant,\n} from './styles.js'\n\n/* Field sizes reuse the spacing ladder — sm / md / lg. /\nexport type FieldSize = Level\n\nconst CONTROL_FONT = {\n sm: 'body.sm',\n md: 'body.md',\n lg: 'body.lg',\n} as const satisfies Record<FieldSize, TextVariant>\n\nconst LABEL_FONT = {\n sm: 'label.sm',\n md: 'label.md',\n lg: 'label.lg',\n} as const satisfies Record<FieldSize, TextVariant>\n\nconst CONTROL_PADDING_BLOCK = { sm: 'sm', md: 'sm', lg: 'md' } as const satisfies Record<\n FieldSize,\n Level\n>\n\nconst CONTROL_PADDING_INLINE = { sm: 'sm', md: 'md', lg: 'md' } as const satisfies Record<\n FieldSize,\n Level\n>\n\nexport function fieldRootStyle(): CSSProperties {\n return {\n display: 'flex',\n flexDirection: 'column',\n gap: spacingVar('stack', 'sm'),\n minWidth: 0,\n }\n}\n\nexport function fieldLabelStyle(size: FieldSize = 'md'): CSSProperties {\n return {\n color: cssVar('color.text.primary'),\n ...typographyStyle(LABEL_FONT[size]),\n }\n}\n\nexport function fieldControlStyle({\n size = 'md',\n invalid = false,\n disabled = false,\n}: {\n size?: FieldSize\n invalid?: boolean\n disabled?: boolean\n}): CSSProperties {\n return {\n width: '100%',\n boxSizing: 'border-box',\n margin: 0,\n paddingBlock: spacingVar('inset', CONTROL_PADDING_BLOCK[size]),\n paddingInline: spacingVar('inset', CONTROL_PADDING_INLINE[size]),\n backgroundColor: disabled\n ? cssVar('color.action.disabled.bg')\n : cssVar('color.field.bg'),\n color: disabled ? cssVar('color.text.disabled') : cssVar('color.field.text'),\n border: `1px solid ${cssVar(\n invalid ? 'color.field.borderInvalid' : 'color.field.border',\n )}`,\n borderRadius: radiusVar('md'),\n ...typographyStyle(CONTROL_FONT[size]),\n }\n}\n\nexport function fieldDescriptionStyle(): CSSProperties {\n return {\n margin: 0,\n color: cssVar('color.text.secondary'),\n ...typographyStyle('body.sm'),\n }\n}\n\nexport function fieldErrorStyle(): CSSProperties {\n return {\n margin: 0,\n color: cssVar('color.text.danger'),\n ...typographyStyle('body.sm'),\n }\n}\n","import type { InputHTMLAttributes, ReactNode } from 'react'\nimport { FieldFrame, useFieldIds } from './field.js'\nimport { fieldControlStyle, type FieldSize } from './fieldStyles.js'\n\nexport type { FieldSize } from './fieldStyles.js'\n\nexport interface TextFieldProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n label?: ReactNode\n description?: ReactNode\n /* Present error text switches the field to its invalid styling. /\n error?: ReactNode\n size?: FieldSize\n invalid?: boolean\n}\n\n/\n Labelled text input. `className` / `style` apply to the wrapper; every other\n * prop goes to the native `<input>`.\n /\nexport function TextField({\n label,\n description,\n error,\n size = 'md',\n invalid,\n id,\n disabled = false,\n className,\n style,\n ...rest\n}: TextFieldProps) {\n const ids = useFieldIds({ id, description, error })\n const isInvalid = invalid ?? Boolean(error)\n\n return (\n <FieldFrame\n component=\"text-field\"\n ids={ids}\n label={label}\n description={description}\n error={error}\n size={size}\n invalid={isInvalid}\n disabled={disabled}\n className={className}\n style={style}\n >\n <input\n {...rest}\n id={ids.controlId}\n data-mason-slot=\"control\"\n disabled={disabled}\n aria-invalid={isInvalid \|\| undefined}\n aria-describedby={ids.describedBy}\n style={fieldControlStyle({ size, invalid: isInvalid, disabled })}\n />\n </FieldFrame>\n )\n}\n","import type { ReactNode, SelectHTMLAttributes } from 'react'\nimport { FieldFrame, useFieldIds } from './field.js'\nimport { fieldControlStyle, type FieldSize } from './fieldStyles.js'\n\nexport interface SelectProps\n extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n label?: ReactNode\n description?: ReactNode\n error?: ReactNode\n size?: FieldSize\n invalid?: boolean\n /* Rendered as a leading empty `<option>`. /\n placeholder?: string\n}\n\n/\n Labelled native `<select>`. Children are the `<option>` elements, so the\n * browser's own popup and keyboard behaviour is preserved.\n /\nexport function Select({\n label,\n description,\n error,\n size = 'md',\n invalid,\n placeholder,\n id,\n disabled = false,\n className,\n style,\n children,\n ...rest\n}: SelectProps) {\n const ids = useFieldIds({ id, description, error })\n const isInvalid = invalid ?? Boolean(error)\n\n return (\n <FieldFrame\n component=\"select\"\n ids={ids}\n label={label}\n description={description}\n error={error}\n size={size}\n invalid={isInvalid}\n disabled={disabled}\n className={className}\n style={style}\n >\n <select\n {...rest}\n id={ids.controlId}\n data-mason-slot=\"control\"\n disabled={disabled}\n aria-invalid={isInvalid \|\| undefined}\n aria-describedby={ids.describedBy}\n style={fieldControlStyle({ size, invalid: isInvalid, disabled })}\n >\n {placeholder ? <option value=\"\">{placeholder}</option> : null}\n {children}\n </select>\n </FieldFrame>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { cssVar, spacingVar, typographyStyle } from './styles.js'\n\nexport function checkboxRootStyle(): CSSProperties {\n return {\n display: 'flex',\n flexDirection: 'column',\n gap: spacingVar('stack', 'sm'),\n minWidth: 0,\n }\n}\n\nexport function checkboxLabelStyle(disabled = false): CSSProperties {\n return {\n display: 'inline-flex',\n alignItems: 'flex-start',\n gap: spacingVar('inline', 'sm'),\n cursor: disabled ? 'not-allowed' : 'pointer',\n color: disabled ? cssVar('color.text.disabled') : cssVar('color.text.primary'),\n ...typographyStyle('body.md'),\n }\n}\n\nexport function checkboxControlStyle(): CSSProperties {\n return {\n width: '1em',\n height: '1em',\n margin: 0,\n marginBlockStart: '0.15em',\n accentColor: cssVar('color.action.primary.bg'),\n flexShrink: 0,\n }\n}\n","import type { InputHTMLAttributes, ReactNode } from 'react'\nimport { useFieldIds } from './field.js'\nimport { mergeClassName } from './styles.js'\nimport { fieldDescriptionStyle, fieldErrorStyle } from './fieldStyles.js'\nimport {\n checkboxControlStyle,\n checkboxLabelStyle,\n checkboxRootStyle,\n} from './checkboxStyles.js'\n\nexport interface CheckboxProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' \| 'size'> {\n label?: ReactNode\n description?: ReactNode\n error?: ReactNode\n invalid?: boolean\n}\n\n/\n Native checkbox with a token-backed label row.\n * The check mark uses `accent-color`, so platform behaviour is untouched.\n */\nexport function Checkbox({\n label,\n description,\n error,\n invalid,\n id,\n disabled = false,\n className,\n style,\n ...rest\n}: CheckboxProps) {\n const ids = useFieldIds({ id, description, error })\n const isInvalid = invalid ?? Boolean(error)\n\n return (\n <div\n data-mason-component=\"checkbox\"\n data-invalid={isInvalid \|\| undefined}\n data-disabled={disabled \|\| undefined}\n className={mergeClassName(className)}\n style={{ ...checkboxRootStyle(), ...style }}\n >\n <label\n data-mason-slot=\"label\"\n htmlFor={ids.controlId}\n style={checkboxLabelStyle(disabled)}\n >\n <input\n {...rest}\n type=\"checkbox\"\n id={ids.controlId}\n data-mason-slot=\"control\"\n disabled={disabled}\n aria-invalid={isInvalid \|\| undefined}\n aria-describedby={ids.describedBy}\n style={checkboxControlStyle()}\n />\n {label ? <span data-mason-slot=\"label-text\">{label}</span> : null}\n </label>\n {description ? (\n <p\n data-mason-slot=\"description\"\n id={ids.descriptionId}\n style={fieldDescriptionStyle()}\n >\n {description}\n </p>\n ) : null}\n {error ? (\n <p\n data-mason-slot=\"error\"\n id={ids.errorId}\n role=\"alert\"\n style={fieldErrorStyle()}\n >\n {error}\n </p>\n ) : null}\n </div>\n )\n}\n"],"mappings":"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","names":["jsx","jsx","jsx","jsx","jsx","jsx","jsx","jsx","jsx","jsxs","jsx","jsxs","jsx","jsx","jsxs","jsx","jsxs"]}
1	+ {"version":3,"sources":["../src/provider.tsx","../src/styles.ts","../src/primitives/textStyles.ts","../src/primitives/Text.tsx","../src/primitives/stackStyles.ts","../src/primitives/Stack.tsx","../src/primitives/boxStyles.ts","../src/primitives/Box.tsx","../src/primitives/gridStyles.ts","../src/primitives/Grid.tsx","../src/primitives/containerStyles.ts","../src/primitives/Container.tsx","../src/primitives/cardStyles.ts","../src/primitives/Card.tsx","../src/primitives/dividerStyles.ts","../src/primitives/Divider.tsx","../src/primitives/linkStyles.ts","../src/primitives/Link.tsx","../src/primitives/spinnerStyles.ts","../src/primitives/Spinner.tsx","../src/primitives/buttonStyles.ts","../src/primitives/Button.tsx","../src/primitives/badgeStyles.ts","../src/primitives/Badge.tsx","../src/primitives/calloutStyles.ts","../src/primitives/Callout.tsx","../src/compounds/field.tsx","../src/compounds/fieldStyles.ts","../src/compounds/TextField.tsx","../src/compounds/Select.tsx","../src/compounds/checkboxStyles.ts","../src/compounds/Checkbox.tsx","../src/compounds/radioStyles.ts","../src/compounds/Radio.tsx","../src/compounds/toggleStyles.ts","../src/compounds/Toggle.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport type MasonTheme = 'light' \| 'dark' \| 'system'\n\nexport interface MasonProviderProps {\n children: ReactNode\n theme?: MasonTheme\n}\n\n/** Root provider for mason-ds React apps. /\nexport function MasonProvider({ children, theme = 'light' }: MasonProviderProps) {\n return <div data-mason-provider data-mason-theme={theme}>{children}</div>\n}\n","import { getSemanticCssVar, type SemanticTokenPath } from '@mason-ds/tokens'\n\n/\n Prop unions are derived from the semantic token paths, so adding or removing\n * a token role changes the component API instead of silently drifting from it.\n /\ntype FontRoleOf<Path> = Path extends `font.${infer Role}.family` ? Role : never\ntype TextToneOf<Path> = Path extends `color.text.${infer Tone}` ? Tone : never\ntype FeedbackToneOf<Path> = Path extends `color.feedback.${infer Tone}.bg` ? Tone : never\ntype LevelOf<Path> = Path extends `spacing.inset.${infer Level}` ? Level : never\ntype RadiusOf<Path> = Path extends `radius.${infer Level}` ? Level : never\ntype ShadowOf<Path> = Path extends `shadow.${infer Level}` ? Level : never\n\n/* Typography roles, e.g. `heading.h2`, `body.md`, `code.md`. /\nexport type TextVariant = FontRoleOf<SemanticTokenPath>\n/* Text color roles, e.g. `primary`, `secondary`, `link`, `danger`. /\nexport type TextTone = TextToneOf<SemanticTokenPath>\n/* Status roles shared by Badge / Callout. /\nexport type FeedbackTone = FeedbackToneOf<SemanticTokenPath>\n/* Spacing steps — sm / md / lg. /\nexport type Level = LevelOf<SemanticTokenPath>\nexport type RadiusLevel = RadiusOf<SemanticTokenPath>\nexport type ShadowLevel = ShadowOf<SemanticTokenPath>\n\n/* Reference a semantic token as `var(--mason-)`. /\nexport function cssVar(path: SemanticTokenPath): string {\n return `var(${getSemanticCssVar(path)})`\n}\n\nexport function spacingVar(axis: 'inset' \| 'stack' \| 'inline', level: Level): string {\n return cssVar(`spacing.${axis}.${level}`)\n}\n\nexport function containerMaxWidthVar(level: Level): string {\n return cssVar(`spacing.layout.container.${level}`)\n}\n\nexport function radiusVar(level: RadiusLevel): string {\n return cssVar(`radius.${level}`)\n}\n\nexport function shadowVar(level: ShadowLevel): string {\n return cssVar(`shadow.${level}`)\n}\n\nexport function textColorVar(tone: TextTone): string {\n return cssVar(`color.text.${tone}`)\n}\n\nexport function typographyStyle(variant: TextVariant): {\n fontFamily: string\n fontSize: string\n fontWeight: string\n lineHeight: string\n letterSpacing: string\n} {\n return {\n fontFamily: cssVar(`font.${variant}.family`),\n fontSize: cssVar(`font.${variant}.size`),\n fontWeight: cssVar(`font.${variant}.weight`),\n lineHeight: cssVar(`font.${variant}.lineHeight`),\n letterSpacing: cssVar(`font.${variant}.letterSpacing`),\n }\n}\n\nexport function mergeClassName(...parts: (string \| undefined)[]): string \| undefined {\n const merged = parts.filter(Boolean).join(' ')\n return merged.length > 0 ? merged : undefined\n}\n","import type { CSSProperties } from 'react'\nimport { textColorVar, typographyStyle, type TextTone, type TextVariant } from '../styles.js'\n\nexport type TextAlign = 'start' \| 'center' \| 'end'\n\nexport function textStyle({\n variant = 'body.md',\n tone = 'primary',\n align,\n truncate = false,\n}: {\n variant?: TextVariant\n tone?: TextTone\n align?: TextAlign\n truncate?: boolean\n}): CSSProperties {\n return {\n margin: 0,\n color: textColorVar(tone),\n ...typographyStyle(variant),\n ...(align ? { textAlign: align } : null),\n ...(truncate\n ? { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }\n : null),\n }\n}\n","import type { ElementType, HTMLAttributes } from 'react'\nimport { mergeClassName, type TextTone, type TextVariant } from '../styles.js'\nimport { textStyle, type TextAlign } from './textStyles.js'\n\nexport type { TextAlign } from './textStyles.js'\n\nexport type TextElement =\n \| 'p'\n \| 'span'\n \| 'div'\n \| 'label'\n \| 'strong'\n \| 'code'\n \| 'h1'\n \| 'h2'\n \| 'h3'\n \| 'h4'\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n as?: TextElement\n variant?: TextVariant\n tone?: TextTone\n align?: TextAlign\n truncate?: boolean\n}\n\n/*\n Typography primitive. `variant` covers every font role in the token set,\n * `tone` every `color.text.` role.\n \n * Pick `as` for semantics (a heading role does not imply an `<h2>`).\n /\nexport function Text({\n as = 'p',\n variant = 'body.md',\n tone = 'primary',\n align,\n truncate = false,\n className,\n style,\n children,\n ...rest\n}: TextProps) {\n const Component: ElementType = as\n\n return (\n <Component\n data-mason-component=\"text\"\n data-variant={variant}\n className={mergeClassName(className)}\n style={{ ...textStyle({ variant, tone, align, truncate }), ...style }}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { spacingVar, type Level } from '../styles.js'\n\nexport type StackDirection = 'row' \| 'column'\nexport type StackAlign = 'start' \| 'center' \| 'end' \| 'stretch' \| 'baseline'\nexport type StackJustify = 'start' \| 'center' \| 'end' \| 'between'\n\nconst FLEX_ALIGN = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n stretch: 'stretch',\n baseline: 'baseline',\n} as const satisfies Record<StackAlign, string>\n\nconst FLEX_JUSTIFY = {\n start: 'flex-start',\n center: 'center',\n end: 'flex-end',\n between: 'space-between',\n} as const satisfies Record<StackJustify, string>\n\n/* Row gaps come from `spacing.inline`, column gaps from `spacing.stack`. /\nexport function stackStyle({\n direction = 'column',\n gap = 'md',\n align,\n justify,\n wrap = false,\n inline = false,\n}: {\n direction?: StackDirection\n gap?: Level\n align?: StackAlign\n justify?: StackJustify\n wrap?: boolean\n inline?: boolean\n}): CSSProperties {\n return {\n display: inline ? 'inline-flex' : 'flex',\n flexDirection: direction,\n gap: spacingVar(direction === 'row' ? 'inline' : 'stack', gap),\n flexWrap: wrap ? 'wrap' : 'nowrap',\n minWidth: 0,\n ...(align ? { alignItems: FLEX_ALIGN[align] } : null),\n ...(justify ? { justifyContent: FLEX_JUSTIFY[justify] } : null),\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport { mergeClassName, type Level } from '../styles.js'\nimport {\n stackStyle,\n type StackAlign,\n type StackDirection,\n type StackJustify,\n} from './stackStyles.js'\n\nexport type {\n StackAlign,\n StackDirection,\n StackJustify,\n} from './stackStyles.js'\n\nexport interface StackProps extends HTMLAttributes<HTMLDivElement> {\n direction?: StackDirection\n gap?: Level\n align?: StackAlign\n justify?: StackJustify\n wrap?: boolean\n inline?: boolean\n}\n\n/* Layout primitive — flex row/column with token gaps. /\nexport function Stack({\n direction = 'column',\n gap = 'md',\n align,\n justify,\n wrap = false,\n inline = false,\n className,\n style,\n children,\n ...rest\n}: StackProps) {\n return (\n <div\n data-mason-component=\"stack\"\n data-direction={direction}\n className={mergeClassName(className)}\n style={{\n ...stackStyle({ direction, gap, align, justify, wrap, inline }),\n ...style,\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n","import type { CSSProperties } from 'react'\nimport {\n cssVar,\n radiusVar,\n spacingVar,\n type Level,\n type RadiusLevel,\n} from '../styles.js'\n\nexport type BoxTone = 'transparent' \| 'canvas' \| 'surface' \| 'elevated'\n\nconst TONE_BG = {\n canvas: 'color.bg.canvas',\n surface: 'color.bg.surface',\n elevated: 'color.bg.elevated',\n} as const\n\nexport function boxStyle({\n padding,\n tone = 'transparent',\n radius,\n bordered = false,\n}: {\n padding?: Level\n tone?: BoxTone\n radius?: RadiusLevel\n bordered?: boolean\n}): CSSProperties {\n return {\n display: 'block',\n boxSizing: 'border-box',\n minWidth: 0,\n ...(padding ? { padding: spacingVar('inset', padding) } : null),\n ...(tone !== 'transparent'\n ? { backgroundColor: cssVar(TONE_BG[tone]) }\n : null),\n ...(radius ? { borderRadius: radiusVar(radius) } : null),\n ...(bordered ? { border: `1px solid ${cssVar('color.border.subtle')}` } : null),\n }\n}\n","import type { ElementType, HTMLAttributes } from 'react'\nimport { mergeClassName, type Level, type RadiusLevel } from '../styles.js'\nimport { boxStyle, type BoxTone } from './boxStyles.js'\n\nexport type { BoxTone } from './boxStyles.js'\n\nexport interface BoxProps extends HTMLAttributes<HTMLElement> {\n as?: ElementType\n padding?: Level\n tone?: BoxTone\n radius?: RadiusLevel\n bordered?: boolean\n}\n\n/* Block primitive — padding, background, radius and border from tokens. /\nexport function Box({\n as = 'div',\n padding,\n tone = 'transparent',\n radius,\n bordered = false,\n className,\n style,\n children,\n ...rest\n}: BoxProps) {\n const Component = as\n\n return (\n <Component\n data-mason-component=\"box\"\n data-tone={tone}\n className={mergeClassName(className)}\n style={{ ...boxStyle({ padding, tone, radius, bordered }), ...style }}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { spacingVar, type Level } from '../styles.js'\nimport type { StackAlign, StackJustify } from './stackStyles.js'\n\nexport type GridColumns = 1 \| 2 \| 3 \| 4 \| 6 \| 12\n\nconst GRID_ALIGN = {\n start: 'start',\n center: 'center',\n end: 'end',\n stretch: 'stretch',\n baseline: 'baseline',\n} as const satisfies Record<StackAlign, string>\n\nconst GRID_JUSTIFY = {\n start: 'start',\n center: 'center',\n end: 'end',\n between: 'space-between',\n} as const satisfies Record<StackJustify, string>\n\nexport function gridStyle({\n columns = 2,\n gap = 'md',\n align,\n justify,\n}: {\n columns?: GridColumns\n gap?: Level\n align?: StackAlign\n justify?: StackJustify\n}): CSSProperties {\n return {\n display: 'grid',\n gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,\n gap: spacingVar('stack', gap),\n minWidth: 0,\n ...(align ? { alignItems: GRID_ALIGN[align] } : null),\n ...(justify ? { justifyContent: GRID_JUSTIFY[justify] } : null),\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport { mergeClassName, type Level } from '../styles.js'\nimport { gridStyle, type GridColumns } from './gridStyles.js'\nimport type { StackAlign, StackJustify } from './stackStyles.js'\n\nexport type { GridColumns } from './gridStyles.js'\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n columns?: GridColumns\n gap?: Level\n align?: StackAlign\n justify?: StackJustify\n}\n\n/* Layout primitive — CSS grid with token gaps. /\nexport function Grid({\n columns = 2,\n gap = 'md',\n align,\n justify,\n className,\n style,\n children,\n ...rest\n}: GridProps) {\n return (\n <div\n data-mason-component=\"grid\"\n data-columns={columns}\n className={mergeClassName(className)}\n style={{ ...gridStyle({ columns, gap, align, justify }), ...style }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { containerMaxWidthVar, spacingVar, type Level } from '../styles.js'\n\nexport function containerStyle({\n maxWidth = 'lg',\n padding,\n center = true,\n}: {\n maxWidth?: Level\n padding?: Level\n center?: boolean\n}): CSSProperties {\n return {\n display: 'block',\n boxSizing: 'border-box',\n width: '100%',\n minWidth: 0,\n maxWidth: containerMaxWidthVar(maxWidth),\n ...(center ? { marginInline: 'auto' } : null),\n ...(padding ? { paddingInline: spacingVar('inline', padding) } : null),\n }\n}\n","import type { ElementType, HTMLAttributes } from 'react'\nimport { mergeClassName, type Level } from '../styles.js'\nimport { containerStyle } from './containerStyles.js'\n\nexport interface ContainerProps extends HTMLAttributes<HTMLElement> {\n as?: ElementType\n maxWidth?: Level\n padding?: Level\n center?: boolean\n}\n\n/* Layout primitive — centers content and caps width from tokens. /\nexport function Container({\n as = 'div',\n maxWidth = 'lg',\n padding,\n center = true,\n className,\n style,\n children,\n ...rest\n}: ContainerProps) {\n const Component = as\n\n return (\n <Component\n data-mason-component=\"container\"\n data-max-width={maxWidth}\n className={mergeClassName(className)}\n style={{ ...containerStyle({ maxWidth, padding, center }), ...style }}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n","import type { CSSProperties } from 'react'\nimport {\n cssVar,\n radiusVar,\n shadowVar,\n spacingVar,\n type Level,\n type RadiusLevel,\n type ShadowLevel,\n} from '../styles.js'\n\nexport type CardTone = 'surface' \| 'canvas' \| 'elevated'\n\nconst TONE_BG = {\n surface: 'color.bg.surface',\n canvas: 'color.bg.canvas',\n elevated: 'color.bg.elevated',\n} as const\n\nexport function cardStyle({\n padding = 'md',\n elevation = 'sm',\n radius = 'md',\n tone = 'surface',\n bordered = true,\n}: {\n padding?: Level\n elevation?: ShadowLevel\n radius?: RadiusLevel\n tone?: CardTone\n bordered?: boolean\n}): CSSProperties {\n return {\n display: 'block',\n padding: spacingVar('inset', padding),\n backgroundColor: cssVar(TONE_BG[tone]),\n color: cssVar('color.text.primary'),\n border: bordered ? `1px solid ${cssVar('color.border.subtle')}` : 'none',\n borderRadius: radiusVar(radius),\n boxShadow: shadowVar(elevation),\n boxSizing: 'border-box',\n minWidth: 0,\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport {\n mergeClassName,\n type Level,\n type RadiusLevel,\n type ShadowLevel,\n} from '../styles.js'\nimport { cardStyle, type CardTone } from './cardStyles.js'\n\nexport type { CardTone } from './cardStyles.js'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n padding?: Level\n elevation?: ShadowLevel\n radius?: RadiusLevel\n tone?: CardTone\n bordered?: boolean\n}\n\n/* Surface primitive — background, border, radius and shadow from tokens. /\nexport function Card({\n padding = 'md',\n elevation = 'sm',\n radius = 'md',\n tone = 'surface',\n bordered = true,\n className,\n style,\n children,\n ...rest\n}: CardProps) {\n return (\n <div\n data-mason-component=\"card\"\n data-tone={tone}\n className={mergeClassName(className)}\n style={{\n ...cardStyle({ padding, elevation, radius, tone, bordered }),\n ...style,\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { cssVar } from '../styles.js'\n\nexport type DividerOrientation = 'horizontal' \| 'vertical'\n\nexport function dividerStyle(orientation: DividerOrientation = 'horizontal'): CSSProperties {\n const line = `1px solid ${cssVar('color.border.subtle')}`\n\n if (orientation === 'vertical') {\n return {\n alignSelf: 'stretch',\n width: 0,\n minHeight: '1em',\n margin: 0,\n border: 'none',\n borderInlineStart: line,\n }\n }\n\n return {\n width: '100%',\n height: 0,\n margin: 0,\n border: 'none',\n borderBlockStart: line,\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport { mergeClassName } from '../styles.js'\nimport { dividerStyle, type DividerOrientation } from './dividerStyles.js'\n\nexport type { DividerOrientation } from './dividerStyles.js'\n\nexport interface DividerProps extends HTMLAttributes<HTMLHRElement> {\n orientation?: DividerOrientation\n}\n\n/* Separator line. `<hr>` already carries the separator role. /\nexport function Divider({\n orientation = 'horizontal',\n className,\n style,\n ...rest\n}: DividerProps) {\n return (\n <hr\n data-mason-component=\"divider\"\n data-orientation={orientation}\n aria-orientation={orientation === 'vertical' ? 'vertical' : undefined}\n className={mergeClassName(className)}\n style={{ ...dividerStyle(orientation), ...style }}\n {...rest}\n />\n )\n}\n","import type { CSSProperties } from 'react'\nimport { radiusVar, textColorVar } from '../styles.js'\n\nexport type LinkTone = 'link' \| 'inherit'\nexport type LinkUnderline = 'hover' \| 'always' \| 'none'\n\n/* Link inherits typography from its container so it can sit inside Text. /\nexport function linkStyle({\n tone = 'link',\n underline = 'hover',\n}: {\n tone?: LinkTone\n underline?: LinkUnderline\n}): CSSProperties {\n return {\n color: tone === 'inherit' ? 'inherit' : textColorVar('link'),\n textDecoration: underline === 'always' ? 'underline' : 'none',\n textUnderlineOffset: '0.15em',\n borderRadius: radiusVar('sm'),\n cursor: 'pointer',\n }\n}\n","import type { AnchorHTMLAttributes } from 'react'\nimport { mergeClassName } from '../styles.js'\nimport { linkStyle, type LinkTone, type LinkUnderline } from './linkStyles.js'\n\nexport type { LinkTone, LinkUnderline } from './linkStyles.js'\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n tone?: LinkTone\n underline?: LinkUnderline\n /* Adds `target=\"_blank\"` and a safe `rel`. /\n external?: boolean\n}\n\n/\n Navigational anchor. Typography is inherited, so it composes inside Text.\n \n For client-side routing, pass the router's component via `asChild`-style\n * composition on the consumer side (`<Link href>` stays a plain `<a>`).\n /\nexport function Link({\n tone = 'link',\n underline = 'hover',\n external = false,\n className,\n style,\n children,\n ...rest\n}: LinkProps) {\n const externalProps = external\n ? { target: '_blank', rel: 'noreferrer noopener' }\n : null\n\n return (\n <a\n data-mason-component=\"link\"\n data-tone={tone}\n data-underline={underline}\n className={mergeClassName(className)}\n style={{ ...linkStyle({ tone, underline }), ...style }}\n {...externalProps}\n {...rest}\n >\n {children}\n </a>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { cssVar } from '../styles.js'\n\n/* `inherit` follows the surrounding font size — used inside Button. /\nexport type SpinnerSize = 'sm' \| 'md' \| 'lg' \| 'inherit'\n\nconst SIZE_DIMENSION = {\n sm: cssVar('font.body.sm.size'),\n md: cssVar('font.body.md.size'),\n lg: cssVar('font.display.lg.size'),\n inherit: '1em',\n} as const satisfies Record<SpinnerSize, string>\n\nexport function spinnerStyle(size: SpinnerSize = 'md'): CSSProperties {\n const dimension = SIZE_DIMENSION[size]\n\n return {\n width: dimension,\n height: dimension,\n border: '2px solid currentColor',\n borderTopColor: 'transparent',\n borderRadius: '50%',\n display: 'inline-block',\n flexShrink: 0,\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport { mergeClassName } from '../styles.js'\nimport { spinnerStyle, type SpinnerSize } from './spinnerStyles.js'\n\nexport type { SpinnerSize } from './spinnerStyles.js'\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n size?: SpinnerSize\n /* Announced while loading. Without it the spinner is `aria-hidden`. /\n label?: string\n}\n\n/* Indeterminate loading indicator. The rotation lives in `tokens.css`. /\nexport function Spinner({\n size = 'md',\n label,\n className,\n style,\n ...rest\n}: SpinnerProps) {\n return (\n <span\n data-mason-component=\"spinner\"\n data-size={size}\n role={label ? 'status' : undefined}\n aria-label={label}\n aria-hidden={label ? undefined : true}\n className={mergeClassName(className)}\n style={{ ...spinnerStyle(size), ...style }}\n {...rest}\n />\n )\n}\n","import type { CSSProperties } from 'react'\nimport { cssVar, typographyStyle, type TextVariant } from '../styles.js'\n\nexport type ButtonVariant = 'primary' \| 'secondary' \| 'ghost' \| 'danger'\nexport type ButtonSize = 'sm' \| 'md' \| 'lg'\n\n/\n Size ladder — padding / radius / type. Height comes from content, not min-height.\n /\nconst sizeStyles = {\n sm: {\n paddingBlock: cssVar('spacing.inset.sm'),\n paddingInline: cssVar('spacing.inset.md'),\n gap: cssVar('spacing.inline.sm'),\n radius: cssVar('radius.sm'),\n font: 'label.sm' as TextVariant,\n },\n md: {\n paddingBlock: cssVar('spacing.inset.md'),\n paddingInline: cssVar('spacing.inset.lg'),\n gap: cssVar('spacing.inline.md'),\n radius: cssVar('radius.md'),\n font: 'label.md' as TextVariant,\n },\n lg: {\n paddingBlock: cssVar('spacing.inset.lg'),\n paddingInline: `calc(${cssVar('spacing.inset.lg')} + ${cssVar('spacing.inset.md')})`,\n gap: cssVar('spacing.inline.md'),\n radius: cssVar('radius.lg'),\n font: 'label.lg' as TextVariant,\n },\n} as const satisfies Record<\n ButtonSize,\n {\n paddingBlock: string\n paddingInline: string\n gap: string\n radius: string\n font: TextVariant\n }\n>\n\n/\n Layout / sizing only. `background-color`, `color` and `border-color` come from\n * `[data-mason-component=\"button\"][data-variant=\"…\"]` in foundationsCss so that\n * `:hover` / `:disabled` rules there can win the cascade — an inline value here\n * would always beat them regardless of specificity.\n /\nexport function buttonStyle({ size = 'md' }: { size?: ButtonSize }): CSSProperties {\n const sizing = sizeStyles[size]\n\n return {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n gap: sizing.gap,\n paddingBlock: sizing.paddingBlock,\n paddingInline: sizing.paddingInline,\n margin: 0,\n borderRadius: sizing.radius,\n boxSizing: 'border-box',\n ...typographyStyle(sizing.font),\n textDecoration: 'none',\n whiteSpace: 'nowrap',\n }\n}\n","import type { ButtonHTMLAttributes, ReactNode } from 'react'\nimport { mergeClassName } from '../styles.js'\nimport { Spinner } from './Spinner.js'\nimport { buttonStyle, type ButtonSize, type ButtonVariant } from './buttonStyles.js'\n\nexport type { ButtonSize, ButtonVariant } from './buttonStyles.js'\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant\n size?: ButtonSize\n loading?: boolean\n leadingSlot?: ReactNode\n trailingSlot?: ReactNode\n}\n\n/\n Primary action component. Native `<button>` with token-backed styles.\n \n Icon-only usage requires an `aria-label`.\n /\nexport function Button({\n variant = 'primary',\n size = 'md',\n disabled = false,\n loading = false,\n leadingSlot,\n trailingSlot,\n className,\n style,\n children,\n type = 'button',\n ...rest\n}: ButtonProps) {\n const isDisabled = disabled \|\| loading\n\n return (\n <button\n type={type}\n data-mason-component=\"button\"\n data-variant={variant}\n data-size={size}\n disabled={isDisabled}\n aria-busy={loading \|\| undefined}\n className={mergeClassName(className)}\n style={{\n ...buttonStyle({ size }),\n ...style,\n }}\n {...rest}\n >\n {loading ? (\n <Spinner size=\"inherit\" data-mason-slot=\"spinner\" />\n ) : leadingSlot ? (\n <span data-mason-slot=\"leading\">{leadingSlot}</span>\n ) : null}\n {children ? <span data-mason-slot=\"label\">{children}</span> : null}\n {trailingSlot && !loading ? (\n <span data-mason-slot=\"trailing\">{trailingSlot}</span>\n ) : null}\n </button>\n )\n}\n","import type { CSSProperties } from 'react'\nimport {\n cssVar,\n radiusVar,\n spacingVar,\n typographyStyle,\n type FeedbackTone,\n} from '../styles.js'\n\nexport type BadgeTone = FeedbackTone \| 'neutral'\nexport type BadgeSize = 'sm' \| 'md'\n\nexport function badgeStyle({\n tone = 'neutral',\n size = 'sm',\n}: {\n tone?: BadgeTone\n size?: BadgeSize\n}): CSSProperties {\n const colors =\n tone === 'neutral'\n ? {\n bg: cssVar('color.bg.canvas'),\n text: cssVar('color.text.secondary'),\n border: cssVar('color.border.subtle'),\n }\n : {\n bg: cssVar(`color.feedback.${tone}.bg`),\n text: cssVar(`color.feedback.${tone}.text`),\n border: cssVar(`color.feedback.${tone}.border`),\n }\n\n return {\n display: 'inline-flex',\n alignItems: 'center',\n gap: spacingVar('inline', 'sm'),\n paddingBlock: '0.125em',\n paddingInline: spacingVar('inset', 'sm'),\n backgroundColor: colors.bg,\n color: colors.text,\n border: `1px solid ${colors.border}`,\n borderRadius: radiusVar('full'),\n ...typographyStyle(size === 'sm' ? 'label.sm' : 'label.md'),\n whiteSpace: 'nowrap',\n }\n}\n","import type { HTMLAttributes } from 'react'\nimport { mergeClassName } from '../styles.js'\nimport { badgeStyle, type BadgeSize, type BadgeTone } from './badgeStyles.js'\n\nexport type { BadgeSize, BadgeTone } from './badgeStyles.js'\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n tone?: BadgeTone\n size?: BadgeSize\n}\n\n/\n Compact status chip. Colour carries no meaning on its own — keep the label\n * readable (`활성`, not just a green dot).\n /\nexport function Badge({\n tone = 'neutral',\n size = 'sm',\n className,\n style,\n children,\n ...rest\n}: BadgeProps) {\n return (\n <span\n data-mason-component=\"badge\"\n data-tone={tone}\n data-size={size}\n className={mergeClassName(className)}\n style={{ ...badgeStyle({ tone, size }), ...style }}\n {...rest}\n >\n {children}\n </span>\n )\n}\n","import type { CSSProperties } from 'react'\nimport {\n cssVar,\n radiusVar,\n spacingVar,\n typographyStyle,\n type FeedbackTone,\n} from '../styles.js'\n\nexport function calloutStyle(tone: FeedbackTone = 'info'): CSSProperties {\n return {\n display: 'flex',\n gap: spacingVar('inline', 'md'),\n padding: spacingVar('inset', 'md'),\n backgroundColor: cssVar(`color.feedback.${tone}.bg`),\n color: cssVar(`color.feedback.${tone}.text`),\n border: `1px solid ${cssVar(`color.feedback.${tone}.border`)}`,\n borderRadius: radiusVar('md'),\n boxSizing: 'border-box',\n ...typographyStyle('body.md'),\n }\n}\n\nexport function calloutContentStyle(): CSSProperties {\n return {\n display: 'flex',\n flexDirection: 'column',\n gap: spacingVar('stack', 'sm'),\n minWidth: 0,\n }\n}\n\nexport function calloutTitleStyle(): CSSProperties {\n return { margin: 0, ...typographyStyle('label.md') }\n}\n\nexport function calloutBodyStyle(): CSSProperties {\n return { margin: 0, ...typographyStyle('body.sm') }\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport { mergeClassName, type FeedbackTone } from '../styles.js'\nimport {\n calloutBodyStyle,\n calloutContentStyle,\n calloutStyle,\n calloutTitleStyle,\n} from './calloutStyles.js'\n\n/* `title` is the heading slot, so the native tooltip attribute is not available. /\nexport interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n tone?: FeedbackTone\n title?: ReactNode\n iconSlot?: ReactNode\n}\n\n/\n Inline message block for page-level feedback.\n \n It is static content by default — for something that appears in response to\n * an action, pass `role=\"status\"` (or `\"alert\"` when it must interrupt).\n /\nexport function Callout({\n tone = 'info',\n title,\n iconSlot,\n className,\n style,\n children,\n ...rest\n}: CalloutProps) {\n return (\n <div\n data-mason-component=\"callout\"\n data-tone={tone}\n className={mergeClassName(className)}\n style={{ ...calloutStyle(tone), ...style }}\n {...rest}\n >\n {iconSlot ? (\n <span data-mason-slot=\"icon\" aria-hidden=\"true\">\n {iconSlot}\n </span>\n ) : null}\n <div data-mason-slot=\"content\" style={calloutContentStyle()}>\n {title ? (\n <p data-mason-slot=\"title\" style={calloutTitleStyle()}>\n {title}\n </p>\n ) : null}\n {children ? (\n <div data-mason-slot=\"body\" style={calloutBodyStyle()}>\n {children}\n </div>\n ) : null}\n </div>\n </div>\n )\n}\n","import { useId, type CSSProperties, type ReactNode } from 'react'\nimport { mergeClassName } from '../styles.js'\nimport {\n fieldDescriptionStyle,\n fieldErrorStyle,\n fieldLabelStyle,\n fieldRootStyle,\n type FieldSize,\n} from './fieldStyles.js'\n\nexport interface FieldIds {\n controlId: string\n descriptionId: string\n errorId: string\n /* `aria-describedby` value, or undefined when there is nothing to describe. /\n describedBy: string \| undefined\n}\n\n/* Stable ids wiring a control to its label, description and error. /\nexport function useFieldIds({\n id,\n description,\n error,\n}: {\n id?: string\n description?: ReactNode\n error?: ReactNode\n}): FieldIds {\n const generated = useId()\n const controlId = id ?? `mason-field-${generated}`\n const descriptionId = `${controlId}-description`\n const errorId = `${controlId}-error`\n const describedBy =\n [description ? descriptionId : null, error ? errorId : null]\n .filter(Boolean)\n .join(' ') \|\| undefined\n\n return { controlId, descriptionId, errorId, describedBy }\n}\n\nexport interface FieldFrameProps {\n /* `data-mason-component` value of the wrapper, e.g. `text-field`. /\n component: string\n ids: FieldIds\n label?: ReactNode\n description?: ReactNode\n error?: ReactNode\n size?: FieldSize\n invalid?: boolean\n disabled?: boolean\n className?: string\n style?: CSSProperties\n children: ReactNode\n}\n\n/\n Shared label / description / error chrome for form controls.\n * Internal — consumers use TextField, Select or Checkbox.\n /\nexport function FieldFrame({\n component,\n ids,\n label,\n description,\n error,\n size = 'md',\n invalid = false,\n disabled = false,\n className,\n style,\n children,\n}: FieldFrameProps) {\n return (\n <div\n data-mason-component={component}\n data-size={size}\n data-invalid={invalid \|\| undefined}\n data-disabled={disabled \|\| undefined}\n className={mergeClassName(className)}\n style={{ ...fieldRootStyle(), ...style }}\n >\n {label ? (\n <label\n data-mason-slot=\"label\"\n htmlFor={ids.controlId}\n style={fieldLabelStyle(size)}\n >\n {label}\n </label>\n ) : null}\n {children}\n {description ? (\n <p\n data-mason-slot=\"description\"\n id={ids.descriptionId}\n style={fieldDescriptionStyle()}\n >\n {description}\n </p>\n ) : null}\n {error ? (\n <p\n data-mason-slot=\"error\"\n id={ids.errorId}\n role=\"alert\"\n style={fieldErrorStyle()}\n >\n {error}\n </p>\n ) : null}\n </div>\n )\n}\n","import type { CSSProperties } from 'react'\nimport {\n cssVar,\n radiusVar,\n spacingVar,\n typographyStyle,\n type Level,\n type TextVariant,\n} from '../styles.js'\n\n/* Field sizes reuse the spacing ladder — sm / md / lg. /\nexport type FieldSize = Level\n\nconst CONTROL_FONT = {\n sm: 'body.sm',\n md: 'body.md',\n lg: 'body.lg',\n} as const satisfies Record<FieldSize, TextVariant>\n\nconst LABEL_FONT = {\n sm: 'label.sm',\n md: 'label.md',\n lg: 'label.lg',\n} as const satisfies Record<FieldSize, TextVariant>\n\nconst CONTROL_PADDING_BLOCK = { sm: 'sm', md: 'sm', lg: 'md' } as const satisfies Record<\n FieldSize,\n Level\n>\n\nconst CONTROL_PADDING_INLINE = { sm: 'sm', md: 'md', lg: 'md' } as const satisfies Record<\n FieldSize,\n Level\n>\n\nexport function fieldRootStyle(): CSSProperties {\n return {\n display: 'flex',\n flexDirection: 'column',\n gap: spacingVar('stack', 'sm'),\n minWidth: 0,\n }\n}\n\nexport function fieldLabelStyle(size: FieldSize = 'md'): CSSProperties {\n return {\n color: cssVar('color.text.primary'),\n ...typographyStyle(LABEL_FONT[size]),\n }\n}\n\nexport function fieldControlStyle({\n size = 'md',\n invalid = false,\n disabled = false,\n}: {\n size?: FieldSize\n invalid?: boolean\n disabled?: boolean\n}): CSSProperties {\n return {\n width: '100%',\n boxSizing: 'border-box',\n margin: 0,\n paddingBlock: spacingVar('inset', CONTROL_PADDING_BLOCK[size]),\n paddingInline: spacingVar('inset', CONTROL_PADDING_INLINE[size]),\n backgroundColor: disabled\n ? cssVar('color.action.disabled.bg')\n : cssVar('color.field.bg'),\n color: disabled ? cssVar('color.text.disabled') : cssVar('color.field.text'),\n border: `1px solid ${cssVar(\n invalid ? 'color.field.borderInvalid' : 'color.field.border',\n )}`,\n borderRadius: radiusVar('md'),\n ...typographyStyle(CONTROL_FONT[size]),\n }\n}\n\nexport function fieldDescriptionStyle(): CSSProperties {\n return {\n margin: 0,\n color: cssVar('color.text.secondary'),\n ...typographyStyle('body.sm'),\n }\n}\n\nexport function fieldErrorStyle(): CSSProperties {\n return {\n margin: 0,\n color: cssVar('color.text.danger'),\n ...typographyStyle('body.sm'),\n }\n}\n\n/* Native input kept for a11y; the visible chrome is a sibling indicator. /\nexport function visuallyHiddenControlStyle(): CSSProperties {\n return {\n position: 'absolute',\n left: 0,\n top: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: 0,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: 0,\n borderStyle: 'solid',\n borderColor: 'transparent',\n }\n}\n","import type { InputHTMLAttributes, ReactNode } from 'react'\nimport { FieldFrame, useFieldIds } from './field.js'\nimport { fieldControlStyle, type FieldSize } from './fieldStyles.js'\n\nexport type { FieldSize } from './fieldStyles.js'\n\nexport interface TextFieldProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n label?: ReactNode\n description?: ReactNode\n /* Present error text switches the field to its invalid styling. /\n error?: ReactNode\n size?: FieldSize\n invalid?: boolean\n}\n\n/\n Labelled text input. `className` / `style` apply to the wrapper; every other\n * prop goes to the native `<input>`.\n /\nexport function TextField({\n label,\n description,\n error,\n size = 'md',\n invalid,\n id,\n disabled = false,\n className,\n style,\n ...rest\n}: TextFieldProps) {\n const ids = useFieldIds({ id, description, error })\n const isInvalid = invalid ?? Boolean(error)\n\n return (\n <FieldFrame\n component=\"text-field\"\n ids={ids}\n label={label}\n description={description}\n error={error}\n size={size}\n invalid={isInvalid}\n disabled={disabled}\n className={className}\n style={style}\n >\n <input\n {...rest}\n id={ids.controlId}\n data-mason-slot=\"control\"\n disabled={disabled}\n aria-invalid={isInvalid \|\| undefined}\n aria-describedby={ids.describedBy}\n style={fieldControlStyle({ size, invalid: isInvalid, disabled })}\n />\n </FieldFrame>\n )\n}\n","import type { ReactNode, SelectHTMLAttributes } from 'react'\nimport { FieldFrame, useFieldIds } from './field.js'\nimport { fieldControlStyle, type FieldSize } from './fieldStyles.js'\n\nexport interface SelectProps\n extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n label?: ReactNode\n description?: ReactNode\n error?: ReactNode\n size?: FieldSize\n invalid?: boolean\n /* Rendered as a leading empty `<option>`. /\n placeholder?: string\n}\n\n/\n Labelled native `<select>`. Children are the `<option>` elements, so the\n * browser's own popup and keyboard behaviour is preserved.\n /\nexport function Select({\n label,\n description,\n error,\n size = 'md',\n invalid,\n placeholder,\n id,\n disabled = false,\n className,\n style,\n children,\n ...rest\n}: SelectProps) {\n const ids = useFieldIds({ id, description, error })\n const isInvalid = invalid ?? Boolean(error)\n\n return (\n <FieldFrame\n component=\"select\"\n ids={ids}\n label={label}\n description={description}\n error={error}\n size={size}\n invalid={isInvalid}\n disabled={disabled}\n className={className}\n style={style}\n >\n <select\n {...rest}\n id={ids.controlId}\n data-mason-slot=\"control\"\n disabled={disabled}\n aria-invalid={isInvalid \|\| undefined}\n aria-describedby={ids.describedBy}\n style={fieldControlStyle({ size, invalid: isInvalid, disabled })}\n >\n {placeholder ? <option value=\"\">{placeholder}</option> : null}\n {children}\n </select>\n </FieldFrame>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { radiusVar, spacingVar, typographyStyle, cssVar } from '../styles.js'\n\nconst CONTROL_SIZE = '1.125rem'\n\nexport function checkboxRootStyle(): CSSProperties {\n return {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n gap: spacingVar('stack', 'sm'),\n minWidth: 0,\n }\n}\n\nexport function checkboxLabelStyle(disabled = false): CSSProperties {\n return {\n display: 'inline-flex',\n alignItems: 'flex-start',\n gap: spacingVar('inline', 'sm'),\n cursor: disabled ? 'not-allowed' : 'pointer',\n color: disabled ? cssVar('color.text.disabled') : cssVar('color.text.primary'),\n ...typographyStyle('body.md'),\n }\n}\n\n/* Geometry only — colors / check mark live in foundationsCss. /\nexport function checkboxIndicatorStyle(): CSSProperties {\n return {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: CONTROL_SIZE,\n height: CONTROL_SIZE,\n marginBlockStart: '0.2em',\n flexShrink: 0,\n boxSizing: 'border-box',\n borderRadius: radiusVar('sm'),\n borderStyle: 'solid',\n borderWidth: '1.5px',\n }\n}\n","import type { InputHTMLAttributes, ReactNode } from 'react'\nimport { useFieldIds } from './field.js'\nimport { mergeClassName } from '../styles.js'\nimport {\n fieldDescriptionStyle,\n fieldErrorStyle,\n visuallyHiddenControlStyle,\n} from './fieldStyles.js'\nimport {\n checkboxIndicatorStyle,\n checkboxLabelStyle,\n checkboxRootStyle,\n} from './checkboxStyles.js'\n\nexport interface CheckboxProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' \| 'size'> {\n label?: ReactNode\n description?: ReactNode\n error?: ReactNode\n invalid?: boolean\n}\n\n/\n Token-backed checkbox with a drawn indicator.\n * A visually hidden native input keeps form / keyboard behaviour.\n * The check mark is painted with `::after` in foundationsCss.\n /\nexport function Checkbox({\n label,\n description,\n error,\n invalid,\n id,\n disabled = false,\n className,\n style,\n ...rest\n}: CheckboxProps) {\n const ids = useFieldIds({ id, description, error })\n const isInvalid = invalid ?? Boolean(error)\n\n return (\n <div\n data-mason-component=\"checkbox\"\n data-invalid={isInvalid \|\| undefined}\n data-disabled={disabled \|\| undefined}\n className={mergeClassName(className)}\n style={{ ...checkboxRootStyle(), ...style }}\n >\n <label\n data-mason-slot=\"label\"\n htmlFor={ids.controlId}\n style={checkboxLabelStyle(disabled)}\n >\n <input\n {...rest}\n type=\"checkbox\"\n id={ids.controlId}\n data-mason-slot=\"control\"\n disabled={disabled}\n aria-invalid={isInvalid \|\| undefined}\n aria-describedby={ids.describedBy}\n style={visuallyHiddenControlStyle()}\n />\n <span data-mason-slot=\"indicator\" aria-hidden=\"true\" style={checkboxIndicatorStyle()} />\n {label ? <span data-mason-slot=\"label-text\">{label}</span> : null}\n </label>\n {description ? (\n <p\n data-mason-slot=\"description\"\n id={ids.descriptionId}\n style={fieldDescriptionStyle()}\n >\n {description}\n </p>\n ) : null}\n {error ? (\n <p\n data-mason-slot=\"error\"\n id={ids.errorId}\n role=\"alert\"\n style={fieldErrorStyle()}\n >\n {error}\n </p>\n ) : null}\n </div>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { cssVar, spacingVar, typographyStyle } from '../styles.js'\n\nconst CONTROL_SIZE = '1.125rem'\n\nexport function radioRootStyle(): CSSProperties {\n return {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n gap: spacingVar('stack', 'sm'),\n minWidth: 0,\n }\n}\n\nexport function radioLabelStyle(disabled = false): CSSProperties {\n return {\n display: 'inline-flex',\n alignItems: 'flex-start',\n gap: spacingVar('inline', 'sm'),\n cursor: disabled ? 'not-allowed' : 'pointer',\n color: disabled ? cssVar('color.text.disabled') : cssVar('color.text.primary'),\n ...typographyStyle('body.md'),\n }\n}\n\n/* Geometry only — colors / selected dot live in foundationsCss. /\nexport function radioIndicatorStyle(): CSSProperties {\n return {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: CONTROL_SIZE,\n height: CONTROL_SIZE,\n marginBlockStart: '0.2em',\n flexShrink: 0,\n boxSizing: 'border-box',\n borderRadius: '999px',\n borderStyle: 'solid',\n borderWidth: '1.5px',\n }\n}\n","import type { InputHTMLAttributes, ReactNode } from 'react'\nimport { useFieldIds } from './field.js'\nimport { mergeClassName } from '../styles.js'\nimport {\n fieldDescriptionStyle,\n fieldErrorStyle,\n visuallyHiddenControlStyle,\n} from './fieldStyles.js'\nimport {\n radioIndicatorStyle,\n radioLabelStyle,\n radioRootStyle,\n} from './radioStyles.js'\n\nexport interface RadioProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' \| 'size'> {\n label?: ReactNode\n description?: ReactNode\n error?: ReactNode\n invalid?: boolean\n}\n\n/\n Token-backed radio with a drawn indicator.\n * A visually hidden native input keeps form / keyboard behaviour.\n * The selected dot is painted with `::after` in foundationsCss.\n /\nexport function Radio({\n label,\n description,\n error,\n invalid,\n id,\n disabled = false,\n className,\n style,\n ...rest\n}: RadioProps) {\n const ids = useFieldIds({ id, description, error })\n const isInvalid = invalid ?? Boolean(error)\n\n return (\n <div\n data-mason-component=\"radio\"\n data-invalid={isInvalid \|\| undefined}\n data-disabled={disabled \|\| undefined}\n className={mergeClassName(className)}\n style={{ ...radioRootStyle(), ...style }}\n >\n <label\n data-mason-slot=\"label\"\n htmlFor={ids.controlId}\n style={radioLabelStyle(disabled)}\n >\n <input\n {...rest}\n type=\"radio\"\n id={ids.controlId}\n data-mason-slot=\"control\"\n disabled={disabled}\n aria-invalid={isInvalid \|\| undefined}\n aria-describedby={ids.describedBy}\n style={visuallyHiddenControlStyle()}\n />\n <span data-mason-slot=\"indicator\" aria-hidden=\"true\" style={radioIndicatorStyle()} />\n {label ? <span data-mason-slot=\"label-text\">{label}</span> : null}\n </label>\n {description ? (\n <p\n data-mason-slot=\"description\"\n id={ids.descriptionId}\n style={fieldDescriptionStyle()}\n >\n {description}\n </p>\n ) : null}\n {error ? (\n <p\n data-mason-slot=\"error\"\n id={ids.errorId}\n role=\"alert\"\n style={fieldErrorStyle()}\n >\n {error}\n </p>\n ) : null}\n </div>\n )\n}\n","import type { CSSProperties } from 'react'\nimport { radiusVar, spacingVar, typographyStyle, cssVar, type Level } from '../styles.js'\n\nexport type ToggleSize = Level\n\nconst TRACK: Record<ToggleSize, { width: string; height: string }> = {\n sm: { width: '1.75rem', height: '1rem' },\n md: { width: '2.25rem', height: '1.25rem' },\n lg: { width: '2.75rem', height: '1.5rem' },\n}\n\nconst THUMB: Record<ToggleSize, string> = {\n sm: '0.75rem',\n md: '1rem',\n lg: '1.25rem',\n}\n\nexport function toggleRootStyle(): CSSProperties {\n return {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n gap: spacingVar('stack', 'sm'),\n minWidth: 0,\n }\n}\n\nexport function toggleLabelStyle(disabled = false): CSSProperties {\n return {\n display: 'inline-flex',\n alignItems: 'center',\n gap: spacingVar('inline', 'sm'),\n cursor: disabled ? 'not-allowed' : 'pointer',\n color: disabled ? cssVar('color.text.disabled') : cssVar('color.text.primary'),\n ...typographyStyle('label.md'),\n }\n}\n\n/* Track geometry — colors / thumb travel live in foundationsCss. /\nexport function toggleIndicatorStyle(size: ToggleSize = 'md'): CSSProperties {\n return {\n position: 'relative',\n display: 'inline-flex',\n alignItems: 'center',\n width: TRACK[size].width,\n height: TRACK[size].height,\n padding: '0.125rem',\n flexShrink: 0,\n boxSizing: 'border-box',\n borderRadius: radiusVar('full'),\n }\n}\n\nexport function toggleThumbStyle(size: ToggleSize = 'md'): CSSProperties {\n return {\n width: THUMB[size],\n height: THUMB[size],\n borderRadius: radiusVar('full'),\n flexShrink: 0,\n }\n}\n","import type { InputHTMLAttributes, ReactNode } from 'react'\nimport { useFieldIds } from './field.js'\nimport { mergeClassName } from '../styles.js'\nimport {\n fieldDescriptionStyle,\n fieldErrorStyle,\n visuallyHiddenControlStyle,\n} from './fieldStyles.js'\nimport {\n toggleIndicatorStyle,\n toggleLabelStyle,\n toggleRootStyle,\n toggleThumbStyle,\n type ToggleSize,\n} from './toggleStyles.js'\n\nexport type { ToggleSize } from './toggleStyles.js'\n\nexport interface ToggleProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' \| 'size'> {\n label?: ReactNode\n description?: ReactNode\n error?: ReactNode\n invalid?: boolean\n size?: ToggleSize\n}\n\n/\n On/off switch. Native checkbox stays for form / keyboard behaviour;\n * `role=\"switch\"` exposes the toggle pattern to assistive tech.\n * Track and thumb colors live in foundationsCss.\n */\nexport function Toggle({\n label,\n description,\n error,\n invalid,\n size = 'md',\n id,\n disabled = false,\n className,\n style,\n ...rest\n}: ToggleProps) {\n const ids = useFieldIds({ id, description, error })\n const isInvalid = invalid ?? Boolean(error)\n\n return (\n <div\n data-mason-component=\"toggle\"\n data-size={size}\n data-invalid={isInvalid \|\| undefined}\n data-disabled={disabled \|\| undefined}\n className={mergeClassName(className)}\n style={{ ...toggleRootStyle(), ...style }}\n >\n <label\n data-mason-slot=\"label\"\n htmlFor={ids.controlId}\n style={toggleLabelStyle(disabled)}\n >\n {label ? <span data-mason-slot=\"label-text\">{label}</span> : null}\n <input\n {...rest}\n type=\"checkbox\"\n role=\"switch\"\n id={ids.controlId}\n data-mason-slot=\"control\"\n disabled={disabled}\n aria-invalid={isInvalid \|\| undefined}\n aria-describedby={ids.describedBy}\n style={visuallyHiddenControlStyle()}\n />\n <span data-mason-slot=\"indicator\" aria-hidden=\"true\" style={toggleIndicatorStyle(size)}>\n <span data-mason-slot=\"thumb\" style={toggleThumbStyle(size)} />\n </span>\n </label>\n {description ? (\n <p\n data-mason-slot=\"description\"\n id={ids.descriptionId}\n style={fieldDescriptionStyle()}\n >\n {description}\n </p>\n ) : null}\n {error ? (\n <p\n data-mason-slot=\"error\"\n id={ids.errorId}\n role=\"alert\"\n style={fieldErrorStyle()}\n >\n {error}\n </p>\n ) : null}\n </div>\n )\n}\n"],"mappings":"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","names":["jsx","jsx","jsx","jsx","jsx","TONE_BG","jsx","jsx","jsx","jsx","jsx","jsx","jsx","jsxs","jsx","jsxs","jsx","jsx","jsxs","jsx","jsxs","CONTROL_SIZE","jsx","jsxs","jsx","jsxs"]}

package/llms.txt ADDED Viewed

@@ -0,0 +1,139 @@
+# @mason-ds/react
+> React UI for mason-ds. **Semantic tokens only** (`@mason-ds/tokens/tokens.css`). Palette-first: change brand via palette JSON → `mason-tokens build`, not hardcoded hex in components.
+Agents: prefer this file + sibling `@mason-ds/tokens` `llms.txt` over scraping docs HTML. Human docs: site `/guide/*` (how) · `/components/*` (API).
+## Install / setup
+```bash
+pnpm add @mason-ds/react @mason-ds/tokens
+```
+```tsx
+import '@mason-ds/tokens/tokens.css' // or mason-tokens build output
+import { MasonProvider, Button } from '@mason-ds/react'
+export function App() {
+  return (
+    <MasonProvider>
+      <Button variant="primary">Save</Button>
+    </MasonProvider>
+  )
+}
+```
+Peer: `react`, `react-dom` ^18 || ^19. Flat barrel import only — no deep paths.
+## Control model (read this first)
+1. **Props** — structure & meaning (`variant`, `tone`, `size`, slots, `error`, `loading`…)
+2. **Semantic CSS vars** — appearance (`--mason-color-action-*`, `--mason-color-feedback-*`, `--mason-color-field-*`, spacing/type/radius)
+3. **foundationsCss** (in `tokens.css`) — hover / focus-visible for Button etc. Do **not** invent per-component hover colors in app CSS.
+Levels for size/spacing/radius/motion props: **sm | md | lg** only (Badge size is **sm | md** only).
+## Components
+Provider: `MasonProvider`
+Primitives: `Text` · `Box` · `Stack` · `Grid` · `Card` · `Divider` · `Link` · `Button` · `Spinner` · `Badge` · `Callout`
+Compounds: `TextField` · `Select` · `Checkbox` · `Radio` · `Toggle`
+Feature/domain widgets stay in the **app**, not this package.
+---
+## Button
+```tsx
+<Button variant="primary">저장</Button>
+<Button variant="primary" leadingSlot={<Icon />}>저장</Button>
+<Button variant="ghost" aria-label="설정" leadingSlot={<Icon />} />
+<Button loading={busy} onClick={save}>{busy ? 'Saving…' : 'Save'}</Button>
+```
+| Prop | Values / notes |
+|------|----------------|
+| `variant` | `primary` \| `secondary` \| `ghost` \| `danger` → `color.action.{variant}.*` |
+| `size` | `sm` \| `md` \| `lg` → inset / radius / `font.label.*` |
+| `leadingSlot` / `trailingSlot` | ReactNode before/after label |
+| `loading` / `disabled` | uses `color.action.disabled.*`; loading shows spinner, sets busy |
+| icon-only | omit children; **require** `aria-label` |
+Hover/focus: package CSS — primary/danger hover ≈ brightness; ghost/secondary → `bg.canvas`; focus-visible → `color.border.focus`. No dedicated `:active` token yet. Do not pass hover color as a prop.
+---
+## Feedback (Badge · Callout · Spinner)
+Semantic: `color.feedback.*` (+ Badge `neutral`).
+```tsx
+<Badge tone="success">활성</Badge>
+<Callout tone="warning" title="저장하지 않은 변경">나가면 내용이 사라집니다.</Callout>
+<Callout tone="danger" title="실패" role="alert">로그를 확인하세요.</Callout>
+<Spinner size="md" label="불러오는 중" />
+```
+| Component | Key props |
+|-----------|-----------|
+| `Badge` | `tone` neutral\|success\|warning\|danger\|info · `size` sm\|md · children |
+| `Callout` | `tone` · `title` · `iconSlot` · children · optional `role` (`status` / `alert` when dynamic) |
+| `Spinner` | `size` sm\|md\|lg · `label` (with label → `role=status`; without → decorative) |
+Do: write status in text, not color alone. Don't: use Badge as a button; put `role="alert"` on every Callout.
+---
+## Forms (Compounds)
+Shared chrome: `label` · `description` · `error` · `size` (sm\|md\|lg). `className`/`style` → **wrapper**; other native attrs → control. `error` → `aria-invalid` + message `role="alert"`.
+Semantic: `color.field.*`.
+```tsx
+<TextField label="이메일" description="로그인용" error={err} value={v} onChange={…} />
+<Select label="역할" placeholder="선택" value={role} onChange={…}>
+  <option value="admin">관리자</option>
+</Select>
+<Checkbox label="동의" description="필수" checked={ok} onChange={…} error={agreeErr} />
+<Radio name="plan" value="pro" label="Pro" checked={…} onChange={…} />
+<Toggle label="알림" checked={on} onChange={…} />
+```
+| Component | Notes |
+|-----------|--------|
+| `TextField` | native `<input>`; omit HTML `size` (use mason `size`) |
+| `Select` | native `<select>`; options as children; `placeholder` = empty first option |
+| `Checkbox` / `Radio` | drawn indicator; native input kept for a11y |
+| `Toggle` | `role="switch"`; checkbox under the hood |
+Do: always provide visible label (not placeholder-only). Set `error` on submit. Don't: fake select with custom dropdown; hide errors with `disabled`.
+---
+## Text · layout primitives (short)
+- `Text`: `variant` font roles (e.g. `body.md`) · `tone` text color roles · `as`
+- `Box`: `padding` sm|md|lg · `tone` transparent|canvas|surface|elevated · `radius` · `bordered` · `as`
+- `Stack`: `direction` · `gap` sm|md|lg · `align` · `wrap`
+- `Grid`: `columns` 1|2|3|4|6|12 · `gap` sm|md|lg · `align` · `justify`
+- `Card`: surface + `elevation` shadow · prefer over Box when shadow needed
+- `Link`: navigation — prefer over Button for links
+---
+## Do / don't
+- Do: semantic / `--mason-*` only; brand via palette build
+- Don't: import `palette*` in app/components; hardcode action/feedback colors
+- Vue parity: `@mason-ds/vue` — same set; slots `leading`/`trailing` instead of `*Slot`; forms use `v-model`
+## Links
+- npm: https://www.npmjs.com/package/@mason-ds/react
+- Repo: https://github.com/FE-HyunSu/mason-ds/tree/main/packages/react
+- Tokens: `@mason-ds/tokens` (+ its `llms.txt`)
+- License: Apache-2.0

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@mason-ds/react",
-  "version": "0.2.0",
-  "description": "Button component for mason-ds",
+  "version": "0.2.2",
+  "description": "React primitives and compounds for mason-ds",
   "type": "module",
   "exports": {
     ".": {
@@ -23,10 +23,11 @@
     "dist",
     "README.md",
     "LICENSE",
-    "NOTICE"
+    "NOTICE",
+    "llms.txt"
   ],
   "dependencies": {
-    "@mason-ds/tokens": "0.2.0"
+    "@mason-ds/tokens": "0.2.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",