@kanso-labs/kanso-ui 0.12.4 → 0.14.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/dist/components/button/index.d.ts +5 -4
- package/dist/components/button/index.js +54 -19
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/card/index.js +1 -1
- package/dist/components/card/index.js.map +1 -1
- package/dist/components/icon-button/index.d.ts +6 -4
- package/dist/components/icon-button/index.js +22 -5
- package/dist/components/icon-button/index.js.map +1 -1
- package/dist/components/link/index.d.ts +23 -6
- package/dist/components/link/index.js +48 -27
- package/dist/components/link/index.js.map +1 -1
- package/dist/components/list-item/index.d.ts +6 -0
- package/dist/components/list-item/index.js +21 -26
- package/dist/components/list-item/index.js.map +1 -1
- package/dist/components/popover/index.js +7 -49
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/separator/index.d.ts +12 -10
- package/dist/components/separator/index.js +16 -18
- package/dist/components/separator/index.js.map +1 -1
- package/dist/components/sheet/index.js +3 -19
- package/dist/components/sheet/index.js.map +1 -1
- package/dist/components/text-field/index.d.ts +4 -0
- package/dist/components/text-field/index.js +19 -50
- package/dist/components/text-field/index.js.map +1 -1
- package/dist/field/index.js +157 -0
- package/dist/field/index.js.map +1 -0
- package/dist/field/root.js +19 -0
- package/dist/field/root.js.map +1 -0
- package/dist/render/aria.js +9 -4
- package/dist/render/aria.js.map +1 -1
- package/dist/row/index.js +93 -0
- package/dist/row/index.js.map +1 -0
- package/dist/row/styles.js +75 -0
- package/dist/row/styles.js.map +1 -0
- package/dist/styles/overlay.js +78 -0
- package/dist/styles/overlay.js.map +1 -0
- package/dist/styles.css +65 -16
- package/dist/tokens.css +2 -2
- package/package.json +5 -5
|
@@ -22,8 +22,9 @@ type ButtonProps$1 = {
|
|
|
22
22
|
/** The link's `rel`, when `href` is set. */
|
|
23
23
|
rel?: string;
|
|
24
24
|
/**
|
|
25
|
-
* Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl`
|
|
26
|
-
*
|
|
25
|
+
* Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —
|
|
26
|
+
* the buttons spec page's XS, S, M, L and XL, each with its own inline
|
|
27
|
+
* padding and type role. `md` is the page's default.
|
|
27
28
|
* @default 'md'
|
|
28
29
|
*/
|
|
29
30
|
size?: ButtonSize;
|
|
@@ -34,12 +35,12 @@ type ButtonProps$1 = {
|
|
|
34
35
|
/** @default 'filled' */
|
|
35
36
|
variant?: ButtonVariant;
|
|
36
37
|
} & ButtonDOMProps;
|
|
37
|
-
type ButtonSize = 'lg' | 'md' | 'xl' | 'xs';
|
|
38
|
+
type ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';
|
|
38
39
|
type ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;
|
|
39
40
|
type ButtonVariant = 'filled' | 'outlined' | 'text' | 'tonal';
|
|
40
41
|
type GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof ButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;
|
|
41
42
|
/**
|
|
42
|
-
* The design's button, at four emphasis levels and
|
|
43
|
+
* The design's button, at four emphasis levels and five control heights.
|
|
43
44
|
* Given `href` it is a link with the same appearance. Every `aria-*` prop is
|
|
44
45
|
* forwarded to the element; React Aria alone would keep only the labelling
|
|
45
46
|
* ones.
|
|
@@ -35,7 +35,6 @@ const styles = {
|
|
|
35
35
|
kWkggS: "xpky1to x16z974x xyf7a0q xnety89",
|
|
36
36
|
kGVxlE: "xpk4wdd x1955hzl x1gnnqk1",
|
|
37
37
|
kMwMTN: "xwjo7ld",
|
|
38
|
-
kg3NbH: "xg0ps1x",
|
|
39
38
|
$$css: true
|
|
40
39
|
},
|
|
41
40
|
filledDisabled: {
|
|
@@ -46,22 +45,25 @@ const styles = {
|
|
|
46
45
|
},
|
|
47
46
|
lg: {
|
|
48
47
|
kZKoxP: "xnnlda6",
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
kMv6JI: "x46eyla",
|
|
49
|
+
kGuDYH: "x5ehqhr",
|
|
50
|
+
k63SB2: "xrf6cl6",
|
|
51
|
+
kb6lSQ: "x1g135zh",
|
|
52
|
+
kLWn49: "x1ggk5va",
|
|
53
|
+
kg3NbH: "xg0ps1x",
|
|
52
54
|
$$css: true
|
|
53
55
|
},
|
|
54
56
|
md: {
|
|
55
57
|
kZKoxP: "x1vqgdyp",
|
|
58
|
+
kg3NbH: "x790zyz",
|
|
56
59
|
$$css: true
|
|
57
60
|
},
|
|
58
61
|
outlined: {
|
|
59
|
-
kWkggS: "
|
|
60
|
-
kVAM5u: "
|
|
62
|
+
kWkggS: "x1dg9itu x1yu1589 x1728qcm xjbqb8w",
|
|
63
|
+
kVAM5u: "x133yhug",
|
|
61
64
|
ksu8eU: "x1y0btm7",
|
|
62
65
|
kMzoRj: "xmkeg23",
|
|
63
|
-
kMwMTN: "
|
|
64
|
-
kg3NbH: "xg0ps1x",
|
|
66
|
+
kMwMTN: "x1w5n3ug",
|
|
65
67
|
$$css: true
|
|
66
68
|
},
|
|
67
69
|
outlinedDisabled: {
|
|
@@ -73,7 +75,6 @@ const styles = {
|
|
|
73
75
|
text: {
|
|
74
76
|
kWkggS: "x12vej0r x598nmq x14dcer4 xjbqb8w",
|
|
75
77
|
kMwMTN: "x1mxwv8y",
|
|
76
|
-
kg3NbH: "x790zyz",
|
|
77
78
|
$$css: true
|
|
78
79
|
},
|
|
79
80
|
textDisabled: {
|
|
@@ -82,10 +83,9 @@ const styles = {
|
|
|
82
83
|
$$css: true
|
|
83
84
|
},
|
|
84
85
|
tonal: {
|
|
85
|
-
kWkggS: "
|
|
86
|
+
kWkggS: "xnqsvhv xc87fxa xlizrex x15dekr4",
|
|
86
87
|
kGVxlE: "xpk4wdd x1955hzl x1gnnqk1",
|
|
87
|
-
kMwMTN: "
|
|
88
|
-
kg3NbH: "xg0ps1x",
|
|
88
|
+
kMwMTN: "x1sawysd",
|
|
89
89
|
$$css: true
|
|
90
90
|
},
|
|
91
91
|
tonalDisabled: {
|
|
@@ -95,18 +95,53 @@ const styles = {
|
|
|
95
95
|
$$css: true
|
|
96
96
|
},
|
|
97
97
|
xl: {
|
|
98
|
-
kZKoxP: "
|
|
99
|
-
|
|
100
|
-
|
|
98
|
+
kZKoxP: "xjp8j0k",
|
|
99
|
+
kMv6JI: "x1fz0g89",
|
|
100
|
+
kGuDYH: "xkb6epg",
|
|
101
|
+
k63SB2: "x76yrz5",
|
|
102
|
+
kOIVth: "x1gka490",
|
|
103
|
+
kb6lSQ: "x1s1qhaa",
|
|
104
|
+
kLWn49: "x1voeury",
|
|
101
105
|
kg3NbH: "x1sdxjpb",
|
|
102
106
|
$$css: true
|
|
103
107
|
},
|
|
104
108
|
xs: {
|
|
105
109
|
kZKoxP: "x10w6t97",
|
|
106
|
-
kGuDYH: "xkucv67",
|
|
107
|
-
kLWn49: "xvzb9hk",
|
|
108
110
|
kg3NbH: "x790zyz",
|
|
109
111
|
$$css: true
|
|
112
|
+
},
|
|
113
|
+
xxl: {
|
|
114
|
+
kZKoxP: "xn866dk",
|
|
115
|
+
kMv6JI: "x1vsmgmf",
|
|
116
|
+
kGuDYH: "xh9c4x",
|
|
117
|
+
k63SB2: "x1y15vu6",
|
|
118
|
+
kOIVth: "xxj4525",
|
|
119
|
+
kb6lSQ: "xoqu3bc",
|
|
120
|
+
kLWn49: "x10x9d6x",
|
|
121
|
+
kg3NbH: "x1dao9b2",
|
|
122
|
+
$$css: true
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
const outlineWidths = {
|
|
126
|
+
lg: {
|
|
127
|
+
kMzoRj: "xmkeg23",
|
|
128
|
+
$$css: true
|
|
129
|
+
},
|
|
130
|
+
md: {
|
|
131
|
+
kMzoRj: "xmkeg23",
|
|
132
|
+
$$css: true
|
|
133
|
+
},
|
|
134
|
+
xl: {
|
|
135
|
+
kMzoRj: "xdh2fpr",
|
|
136
|
+
$$css: true
|
|
137
|
+
},
|
|
138
|
+
xs: {
|
|
139
|
+
kMzoRj: "xmkeg23",
|
|
140
|
+
$$css: true
|
|
141
|
+
},
|
|
142
|
+
xxl: {
|
|
143
|
+
kMzoRj: "x9r2w2z",
|
|
144
|
+
$$css: true
|
|
110
145
|
}
|
|
111
146
|
};
|
|
112
147
|
const disabledStyles = {
|
|
@@ -116,7 +151,7 @@ const disabledStyles = {
|
|
|
116
151
|
tonal: styles.tonalDisabled
|
|
117
152
|
};
|
|
118
153
|
/**
|
|
119
|
-
* The design's button, at four emphasis levels and
|
|
154
|
+
* The design's button, at four emphasis levels and five control heights.
|
|
120
155
|
* Given `href` it is a link with the same appearance. Every `aria-*` prop is
|
|
121
156
|
* forwarded to the element; React Aria alone would keep only the labelling
|
|
122
157
|
* ones.
|
|
@@ -130,7 +165,7 @@ function Button$1({ children, disableRipple = false, href, isDisabled = false, o
|
|
|
130
165
|
onPointerLeave,
|
|
131
166
|
onPointerUp
|
|
132
167
|
});
|
|
133
|
-
const styleProps = mergeStatefulStyles((state) => props(styles.base, styles[variant], styles[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props$1);
|
|
168
|
+
const styleProps = mergeStatefulStyles((state) => props(styles.base, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props$1);
|
|
134
169
|
const element = {
|
|
135
170
|
aria: ariaAttributesOf(props$1),
|
|
136
171
|
onKeyDown,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' (filled) or the brand color itself\n// (outlined/text, over a transparent container) at the interaction state's\n// opacity, rather than swapping in a separate hover/pressed color.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\nconst styles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kaIpWk: \"x3y1ksm\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kOIVth: \"x126z3so\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n kjBf7l: \"xrgy624\",\n kInvED: \"x1hl8ikr\",\n k3XXqK: \"x9v5kkp x1t137rt\",\n kMeerF: \"x1de99jn\",\n kVAEAm: \"x1n2onr6\",\n kybGjl: \"x1hl2dhg\",\n $$css: true\n },\n disabled: {\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n filled: {\n kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"xwjo7ld\",\n kg3NbH: \"xg0ps1x\",\n $$css: true\n },\n filledDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n lg: {\n kZKoxP: \"xnnlda6\",\n kGuDYH: \"x1848etk\",\n kLWn49: \"xh7dzej\",\n kg3NbH: \"x6e1k4i\",\n $$css: true\n },\n md: {\n kZKoxP: \"x1vqgdyp\",\n $$css: true\n },\n outlined: {\n kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n kVAM5u: \"x1fwvt7v\",\n ksu8eU: \"x1y0btm7\",\n kMzoRj: \"xmkeg23\",\n kMwMTN: \"x1mxwv8y\",\n kg3NbH: \"xg0ps1x\",\n $$css: true\n },\n outlinedDisabled: {\n kWkggS: \"xjbqb8w\",\n kVAM5u: \"xrh88j3\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n text: {\n kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n kMwMTN: \"x1mxwv8y\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n textDisabled: {\n kWkggS: \"xjbqb8w\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n tonal: {\n kWkggS: \"xxwd9aw x1uyy5zb x1hei0q8 xp89om9\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"xscdzaa\",\n kg3NbH: \"xg0ps1x\",\n $$css: true\n },\n tonalDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n xl: {\n kZKoxP: \"xwzfr38\",\n kGuDYH: \"xete2z3\",\n kLWn49: \"x2divse\",\n kg3NbH: \"x1sdxjpb\",\n $$css: true\n },\n xs: {\n kZKoxP: \"x10w6t97\",\n kGuDYH: \"xkucv67\",\n kLWn49: \"xvzb9hk\",\n kg3NbH: \"x790zyz\",\n $$css: true\n }\n};\nconst disabledStyles = {\n filled: styles.filledDisabled,\n outlined: styles.outlinedDisabled,\n text: styles.textDisabled,\n tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n children?: ReactNode;\n /** A function may compute the class from the button's render state. */\n className?: ClassNameOrFunction<ButtonState>;\n /**\n * Disables the press ripple. The hover/pressed background state layer is\n * unaffected.\n * @default false\n */\n disableRipple?: boolean;\n /**\n * Where the button leads. Given one, the button is rendered as a link —\n * an `<a>`, announced as the link it is — with the same styles and ripple.\n * `render`, `type`, and the form and pending props apply to the button\n * form only.\n */\n href?: string;\n /** The link's `rel`, when `href` is set. */\n rel?: string;\n /**\n * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 80px. Sizes other\n * than `md` also set their own inline padding.\n * @default 'md'\n */\n size?: ButtonSize;\n /** A function may compute the style from the button's render state. */\n style?: StyleOrFunction<ButtonState>;\n /** The link's `target`, when `href` is set. */\n target?: string;\n /** @default 'filled' */\n variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at four emphasis levels and four control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n children,\n disableRipple = false,\n href,\n isDisabled = false,\n onClick,\n onContextMenu,\n onKeyDown,\n onKeyUp,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n rel,\n render,\n size = 'md',\n target,\n variant = 'filled',\n ...props\n}: ButtonProps) {\n // `props` (className/style, etc.) is spread separately: `className` and\n // `style` there may be functions of render state, which ripple's own\n // handler-only merge doesn't need to know about. It is also why the styles\n // below merge through mergeStatefulStyles rather than the plain\n // mergeStyles. The ripple is off while disabled: React Aria still forwards\n // pointer events to a disabled element, and a press that changes nothing\n // should not look like one.\n const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n onClick,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n });\n const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, styles[variant], styles[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n const element = {\n aria: ariaAttributesOf(props),\n onKeyDown,\n onKeyUp\n };\n if (href !== undefined) {\n return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n {children}\n {ripple.surface}\n </RACLink>;\n }\n return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n {children}\n {ripple.surface}\n </RACButton>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":";;;;;;;AAkCA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,QAAQ,OAAO;CACf,UAAU,OAAO;CACjB,MAAM,OAAO;CACb,OAAO,OAAO;AAChB;;;;;;;AAwDA,SAAS,SAAO,EACd,UACA,gBAAgB,OAChB,MACA,aAAa,OACb,SACA,eACA,WACA,SACA,iBACA,eACA,gBACA,aACA,KACA,QACA,OAAO,MACP,QACA,UAAU,UACV,GAAG,WACW;CAQd,MAAM,SAAS,UAA4B,CAAC,iBAAiB,CAAC,YAAY;EACxE;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,aAAa,qBAAqB,UAAuB,MAAa,OAAO,MAAM,OAAO,UAAU,OAAO,OAAO,MAAM,cAAc,OAAO,UAAU,MAAM,cAAc,eAAe,QAAQ,GAAG,OAAK;CAChN,MAAM,UAAU;EACd,MAAM,iBAAiB,OAAK;EAC5B;EACA;CACF;CACA,IAAI,SAAS,KAAA,GACX,OAAO,qBAAC,MAAD;EAAe;EAAkB;EAAiB;EAAK,QAAQ,aAAa,OAAO;EAAW;EAAQ,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI;EAA1I,UAAA,CACF,UACA,OAAO,OACD;;CAEb,OAAO,qBAAC,QAAD;EAAuB;EAAY,QAAQ,eAAe,SAAS,MAAM;EAAG,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI;EAAhH,UAAA,CACF,UACA,OAAO,OACC;;AACf"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined and text paint the label colour over a transparent\n// one. The pairs are the buttons spec page's, Expressive column: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\nconst styles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kaIpWk: \"x3y1ksm\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kOIVth: \"x126z3so\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n kjBf7l: \"xrgy624\",\n kInvED: \"x1hl8ikr\",\n k3XXqK: \"x9v5kkp x1t137rt\",\n kMeerF: \"x1de99jn\",\n kVAEAm: \"x1n2onr6\",\n kybGjl: \"x1hl2dhg\",\n $$css: true\n },\n disabled: {\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n filled: {\n kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"xwjo7ld\",\n $$css: true\n },\n filledDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n lg: {\n kZKoxP: \"xnnlda6\",\n kMv6JI: \"x46eyla\",\n kGuDYH: \"x5ehqhr\",\n k63SB2: \"xrf6cl6\",\n kb6lSQ: \"x1g135zh\",\n kLWn49: \"x1ggk5va\",\n kg3NbH: \"xg0ps1x\",\n $$css: true\n },\n md: {\n kZKoxP: \"x1vqgdyp\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n outlined: {\n kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n kVAM5u: \"x133yhug\",\n ksu8eU: \"x1y0btm7\",\n kMzoRj: \"xmkeg23\",\n kMwMTN: \"x1w5n3ug\",\n $$css: true\n },\n outlinedDisabled: {\n kWkggS: \"xjbqb8w\",\n kVAM5u: \"xrh88j3\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n text: {\n kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n textDisabled: {\n kWkggS: \"xjbqb8w\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n tonal: {\n kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"x1sawysd\",\n $$css: true\n },\n tonalDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n xl: {\n kZKoxP: \"xjp8j0k\",\n kMv6JI: \"x1fz0g89\",\n kGuDYH: \"xkb6epg\",\n k63SB2: \"x76yrz5\",\n kOIVth: \"x1gka490\",\n kb6lSQ: \"x1s1qhaa\",\n kLWn49: \"x1voeury\",\n kg3NbH: \"x1sdxjpb\",\n $$css: true\n },\n xs: {\n kZKoxP: \"x10w6t97\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n xxl: {\n kZKoxP: \"xn866dk\",\n kMv6JI: \"x1vsmgmf\",\n kGuDYH: \"xh9c4x\",\n k63SB2: \"x1y15vu6\",\n kOIVth: \"xxj4525\",\n kb6lSQ: \"xoqu3bc\",\n kLWn49: \"x10x9d6x\",\n kg3NbH: \"x1dao9b2\",\n $$css: true\n }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n lg: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n md: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n xl: {\n kMzoRj: \"xdh2fpr\",\n $$css: true\n },\n xs: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n xxl: {\n kMzoRj: \"x9r2w2z\",\n $$css: true\n }\n};\nconst disabledStyles = {\n filled: styles.filledDisabled,\n outlined: styles.outlinedDisabled,\n text: styles.textDisabled,\n tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n children?: ReactNode;\n /** A function may compute the class from the button's render state. */\n className?: ClassNameOrFunction<ButtonState>;\n /**\n * Disables the press ripple. The hover/pressed background state layer is\n * unaffected.\n * @default false\n */\n disableRipple?: boolean;\n /**\n * Where the button leads. Given one, the button is rendered as a link —\n * an `<a>`, announced as the link it is — with the same styles and ripple.\n * `render`, `type`, and the form and pending props apply to the button\n * form only.\n */\n href?: string;\n /** The link's `rel`, when `href` is set. */\n rel?: string;\n /**\n * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n * the buttons spec page's XS, S, M, L and XL, each with its own inline\n * padding and type role. `md` is the page's default.\n * @default 'md'\n */\n size?: ButtonSize;\n /** A function may compute the style from the button's render state. */\n style?: StyleOrFunction<ButtonState>;\n /** The link's `target`, when `href` is set. */\n target?: string;\n /** @default 'filled' */\n variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at four emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n children,\n disableRipple = false,\n href,\n isDisabled = false,\n onClick,\n onContextMenu,\n onKeyDown,\n onKeyUp,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n rel,\n render,\n size = 'md',\n target,\n variant = 'filled',\n ...props\n}: ButtonProps) {\n // `props` (className/style, etc.) is spread separately: `className` and\n // `style` there may be functions of render state, which ripple's own\n // handler-only merge doesn't need to know about. It is also why the styles\n // below merge through mergeStatefulStyles rather than the plain\n // mergeStyles. The ripple is off while disabled: React Aria still forwards\n // pointer events to a disabled element, and a press that changes nothing\n // should not look like one.\n const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n onClick,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n });\n const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n const element = {\n aria: ariaAttributesOf(props),\n onKeyDown,\n onKeyUp\n };\n if (href !== undefined) {\n return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n {children}\n {ripple.surface}\n </RACLink>;\n }\n return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n {children}\n {ripple.surface}\n </RACButton>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":";;;;;;;AAsCA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,gBAAgB;CACpB,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,QAAQ,OAAO;CACf,UAAU,OAAO;CACjB,MAAM,OAAO;CACb,OAAO,OAAO;AAChB;;;;;;;AAyDA,SAAS,SAAO,EACd,UACA,gBAAgB,OAChB,MACA,aAAa,OACb,SACA,eACA,WACA,SACA,iBACA,eACA,gBACA,aACA,KACA,QACA,OAAO,MACP,QACA,UAAU,UACV,GAAG,WACW;CAQd,MAAM,SAAS,UAA4B,CAAC,iBAAiB,CAAC,YAAY;EACxE;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,aAAa,qBAAqB,UAAuB,MAAa,OAAO,MAAM,OAAO,UAAU,OAAO,OAAO,YAAY,cAAc,cAAc,OAAO,MAAM,cAAc,OAAO,UAAU,MAAM,cAAc,eAAe,QAAQ,GAAG,OAAK;CAC/P,MAAM,UAAU;EACd,MAAM,iBAAiB,OAAK;EAC5B;EACA;CACF;CACA,IAAI,SAAS,KAAA,GACX,OAAO,qBAAC,MAAD;EAAe;EAAkB;EAAiB;EAAK,QAAQ,aAAa,OAAO;EAAW;EAAQ,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI;EAA1I,UAAA,CACF,UACA,OAAO,OACD;;CAEb,OAAO,qBAAC,QAAD;EAAuB;EAAY,QAAQ,eAAe,SAAS,MAAM;EAAG,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI;EAAhH,UAAA,CACF,UACA,OAAO,OACC;;AACf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n base: {\n kaIpWk: \"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n base: {\n kaIpWk: \"x62ce2h\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1heor9g\",\n k1xSpc: \"x1lliihq\",\n kVQacm: \"xb3r6kr\",\n kVAEAm: \"x1n2onr6\",\n kybGjl: \"x1hl2dhg\",\n $$css: true\n },\n elevated: {\n kWkggS: \"x1vnz5z6\",\n kGVxlE: \"x19efjv6\",\n $$css: true\n },\n filled: {\n kWkggS: \"x1rrhr5q\",\n $$css: true\n },\n interactive: {\n kkrTdU: \"x1ypdohk\",\n kVVagm: \"xln7xf2\",\n kzqmXN: \"xh8yej3\",\n kjBf7l: \"xrgy624\",\n kInvED: \"x1hl8ikr\",\n k3XXqK: \"x9v5kkp x1t137rt\",\n kMeerF: \"x1de99jn\",\n k9WMMc: \"x1yc453h\",\n $$css: true\n },\n outlined: {\n kWkggS: \"x14s9m32\",\n kVAM5u: \"x133yhug\",\n ksu8eU: \"x1y0btm7\",\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n paddingDefault: {\n kmVPX3: \"xgc26li\",\n $$css: true\n },\n paddingNone: {\n kmVPX3: \"x1717udv\",\n $$css: true\n }\n};\nconst interactionStyles = {\n elevated: {\n kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n $$css: true\n },\n filled: {\n kWkggS: \"x1w49kxs xovjh5a x1rrhr5q\",\n $$css: true\n },\n outlined: {\n kWkggS: \"x1jqfdmz x1dmgsxd x14s9m32\",\n $$css: true\n }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n /**\n * Makes the card the thing you press: it ripples, lifts on hover, and takes\n * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n * it off for a card that merely holds content, including one containing its\n * own buttons.\n * @default false\n */\n interactive?: boolean;\n /**\n * `none` removes the card's own padding, for a card whose children run to\n * its edges — a list of rows separated by rules.\n * @default 'default'\n */\n padding?: 'default' | 'none';\n /**\n * How the card separates itself from the page: `elevated` casts a shadow,\n * `filled` sits on a darker surface, `outlined` draws a border.\n * @default 'elevated'\n */\n variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n children,\n interactive = false,\n onClick,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n padding = 'default',\n render,\n variant = 'elevated',\n ...props\n}: CardProps) {\n // The consumer's own pointer handlers are handed to useRipple to merge\n // rather than spread over its handlers afterwards, which is what Button\n // does and for the same reason: a plain spread means whichever object\n // comes last silently wins, so an onPointerDown on the call site would\n // replace the one driving the ripple and the card would stop rippling.\n const ripple = useRipple(interactive, {\n onClick,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n });\n const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n return useRender({\n defaultTagName: interactive ? 'button' : 'div',\n props: {\n ...props,\n // Only when the default <button> is what renders. On an element the\n // call site chose, `type` is either meaningless or wrong — an <a>'s\n // `type` is a hint about the MIME type of what it links to — and that\n // element's own attributes are the call site's to write.\n ...(interactive && render === undefined ? {\n type: 'button'\n } : undefined),\n ...ripple.handlers,\n children: <>\n {children}\n {ripple.surface}\n </>,\n ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant]), props)\n },\n render\n });\n}\nexport type { CardProps };\nexport default Card;"],"mappings":";;;;;;AAmBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,oBAAoB;CACxB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;AA2CA,SAAS,KAAK,EACZ,UACA,cAAc,OACd,SACA,eACA,iBACA,eACA,gBACA,aACA,UAAU,WACV,QACA,UAAU,YACV,GAAG,WACS;CAMZ,MAAM,SAAS,UAAU,aAAa;EACpC;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB,cAAc,WAAW;EACzC,OAAO;GACL,GAAG;GAKH,GAAI,eAAe,WAAW,KAAA,IAAY,EACxC,MAAM,SACR,IAAI,KAAA;GACJ,GAAG,OAAO;GACV,UAAU,qBAAA,UAAA,EAAA,UAAA,CACL,UACA,OAAO,OACV,EAAA,CAAA;GACF,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,UAAU,QAAQ,eAAe,OAAO,aAAa,eAAe,kBAAkB,QAAQ,GAAG,OAAK;EACxJ;EACA;CACF,CAAC;AACH"}
|
|
@@ -28,11 +28,13 @@ type IconButtonProps = {
|
|
|
28
28
|
/** The link's `rel`, when `href` is set. */
|
|
29
29
|
rel?: string;
|
|
30
30
|
/**
|
|
31
|
-
* Control size: `xs` 32px, `md` 40px, `lg` 56px
|
|
32
|
-
*
|
|
31
|
+
* Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —
|
|
32
|
+
* the icon buttons spec page's XS to XL, and the same heights `Button`
|
|
33
|
+
* uses, so the two line up beside each other in a row. The icon is 20px,
|
|
34
|
+
* 24px, 24px, 32px and 40px in turn.
|
|
33
35
|
* @default 'md'
|
|
34
36
|
*/
|
|
35
|
-
size?: 'lg' | 'md' | 'xs';
|
|
37
|
+
size?: 'lg' | 'md' | 'xl' | 'xs' | 'xxl';
|
|
36
38
|
/** A function may compute the style from the button's render state. */
|
|
37
39
|
style?: StyleOrFunction<ButtonState>;
|
|
38
40
|
/** The link's `target`, when `href` is set. */
|
|
@@ -45,7 +47,7 @@ type IconButtonProps = {
|
|
|
45
47
|
variant?: 'filled' | 'standard' | 'tonal';
|
|
46
48
|
} & ButtonDOMProps;
|
|
47
49
|
/**
|
|
48
|
-
* A button that is an icon, at
|
|
50
|
+
* A button that is an icon, at five control heights. Given `href` it is a
|
|
49
51
|
* link with the same appearance. Every `aria-*` prop is forwarded to the
|
|
50
52
|
* element; React Aria alone would keep only the labelling ones.
|
|
51
53
|
*/
|
|
@@ -8,7 +8,7 @@ import { Button, Link } from "react-aria-components";
|
|
|
8
8
|
const styles = {
|
|
9
9
|
base: {
|
|
10
10
|
kGNEyG: "x6s0dn4",
|
|
11
|
-
kaIpWk: "
|
|
11
|
+
kaIpWk: "x3y1ksm",
|
|
12
12
|
kMzoRj: "xc342km",
|
|
13
13
|
kB7OPa: "x9f619",
|
|
14
14
|
kkrTdU: "x1ypdohk",
|
|
@@ -44,12 +44,14 @@ const styles = {
|
|
|
44
44
|
},
|
|
45
45
|
lg: {
|
|
46
46
|
kZKoxP: "xnnlda6",
|
|
47
|
-
|
|
47
|
+
kaIpWk: "xtt5grq x3y1ksm",
|
|
48
|
+
kGuDYH: "x1pvqxga",
|
|
48
49
|
kzqmXN: "x15yg21f",
|
|
49
50
|
$$css: true
|
|
50
51
|
},
|
|
51
52
|
md: {
|
|
52
53
|
kZKoxP: "x1vqgdyp",
|
|
54
|
+
kaIpWk: "x1r81nxe x3y1ksm",
|
|
53
55
|
kGuDYH: "x1pvqxga",
|
|
54
56
|
kzqmXN: "x100vrsf",
|
|
55
57
|
$$css: true
|
|
@@ -65,8 +67,8 @@ const styles = {
|
|
|
65
67
|
$$css: true
|
|
66
68
|
},
|
|
67
69
|
tonal: {
|
|
68
|
-
kWkggS: "
|
|
69
|
-
kMwMTN: "
|
|
70
|
+
kWkggS: "xnqsvhv xlizrex x15dekr4",
|
|
71
|
+
kMwMTN: "x1sawysd",
|
|
70
72
|
$$css: true
|
|
71
73
|
},
|
|
72
74
|
tonalDisabled: {
|
|
@@ -74,11 +76,26 @@ const styles = {
|
|
|
74
76
|
kMwMTN: "x1xj74d8",
|
|
75
77
|
$$css: true
|
|
76
78
|
},
|
|
79
|
+
xl: {
|
|
80
|
+
kZKoxP: "xjp8j0k",
|
|
81
|
+
kaIpWk: "x11f6t2b x3y1ksm",
|
|
82
|
+
kGuDYH: "x1s3cmhv",
|
|
83
|
+
kzqmXN: "x13oubkp",
|
|
84
|
+
$$css: true
|
|
85
|
+
},
|
|
77
86
|
xs: {
|
|
78
87
|
kZKoxP: "x10w6t97",
|
|
88
|
+
kaIpWk: "x1r81nxe x3y1ksm",
|
|
79
89
|
kGuDYH: "xwsyq91",
|
|
80
90
|
kzqmXN: "x1td3qas",
|
|
81
91
|
$$css: true
|
|
92
|
+
},
|
|
93
|
+
xxl: {
|
|
94
|
+
kZKoxP: "xn866dk",
|
|
95
|
+
kaIpWk: "x11f6t2b x3y1ksm",
|
|
96
|
+
kGuDYH: "x1tgwohi",
|
|
97
|
+
kzqmXN: "x1f2tiqu",
|
|
98
|
+
$$css: true
|
|
82
99
|
}
|
|
83
100
|
};
|
|
84
101
|
const disabledStyles = {
|
|
@@ -87,7 +104,7 @@ const disabledStyles = {
|
|
|
87
104
|
tonal: styles.tonalDisabled
|
|
88
105
|
};
|
|
89
106
|
/**
|
|
90
|
-
* A button that is an icon, at
|
|
107
|
+
* A button that is an icon, at five control heights. Given `href` it is a
|
|
91
108
|
* link with the same appearance. Every `aria-*` prop is forwarded to the
|
|
92
109
|
* element; React Aria alone would keep only the labelling ones.
|
|
93
110
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ClassNameOrFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ClassNameOrFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, standard on surface variant over nothing. calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\nconst styles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kaIpWk: \"x3y1ksm\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kmuXW: \"x2lah0s\",\n kjj79g: \"xl56j7k\",\n kjBf7l: \"xrgy624\",\n kInvED: \"x1hl8ikr\",\n k3XXqK: \"x9v5kkp x1t137rt\",\n kMeerF: \"x1de99jn\",\n kmVPX3: \"x1717udv\",\n kVAEAm: \"x1n2onr6\",\n kybGjl: \"x1hl2dhg\",\n kIyJzY: \"x1iuyhda\",\n k1ekBW: \"xb5u718\",\n kAMwcw: \"x15l9jch\",\n $$css: true\n },\n disabled: {\n kaIpWk: \"x3y1ksm\",\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n filled: {\n kWkggS: \"xpky1to xyf7a0q xnety89\",\n kMwMTN: \"xwjo7ld\",\n $$css: true\n },\n filledDisabled: {\n kWkggS: \"xepofeg\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n lg: {\n kZKoxP: \"xnnlda6\",\n kaIpWk: \"xtt5grq x3y1ksm\",\n kGuDYH: \"x1pvqxga\",\n kzqmXN: \"x15yg21f\",\n $$css: true\n },\n md: {\n kZKoxP: \"x1vqgdyp\",\n kaIpWk: \"x1r81nxe x3y1ksm\",\n kGuDYH: \"x1pvqxga\",\n kzqmXN: \"x100vrsf\",\n $$css: true\n },\n standard: {\n kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n kMwMTN: \"x1w5n3ug\",\n $$css: true\n },\n standardDisabled: {\n kWkggS: \"xjbqb8w\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n tonal: {\n kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n kMwMTN: \"x1sawysd\",\n $$css: true\n },\n tonalDisabled: {\n kWkggS: \"xepofeg\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n xl: {\n kZKoxP: \"xjp8j0k\",\n kaIpWk: \"x11f6t2b x3y1ksm\",\n kGuDYH: \"x1s3cmhv\",\n kzqmXN: \"x13oubkp\",\n $$css: true\n },\n xs: {\n kZKoxP: \"x10w6t97\",\n kaIpWk: \"x1r81nxe x3y1ksm\",\n kGuDYH: \"xwsyq91\",\n kzqmXN: \"x1td3qas\",\n $$css: true\n },\n xxl: {\n kZKoxP: \"xn866dk\",\n kaIpWk: \"x11f6t2b x3y1ksm\",\n kGuDYH: \"x1tgwohi\",\n kzqmXN: \"x1f2tiqu\",\n $$css: true\n }\n};\nconst disabledStyles = {\n filled: styles.filledDisabled,\n standard: styles.standardDisabled,\n tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n /**\n * What the button does, in words. Required rather than optional: an icon\n * on its own has no accessible name, so without this the control announces\n * nothing at all.\n */\n 'aria-label': string;\n children?: ReactNode;\n /** A function may compute the class from the button's render state. */\n className?: ClassNameOrFunction<ButtonState>;\n /**\n * Disables the press ripple. The hover and pressed state layers are\n * unaffected.\n * @default false\n */\n disableRipple?: boolean;\n /**\n * Where the button leads. Given one, the button is rendered as a link —\n * an `<a>`, announced as the link it is — with the same styles and ripple.\n * `render`, `type`, and the form and pending props apply to the button\n * form only.\n */\n href?: string;\n /** The link's `rel`, when `href` is set. */\n rel?: string;\n /**\n * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n * the icon buttons spec page's XS to XL, and the same heights `Button`\n * uses, so the two line up beside each other in a row. The icon is 20px,\n * 24px, 24px, 32px and 40px in turn.\n * @default 'md'\n */\n size?: 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n /** A function may compute the style from the button's render state. */\n style?: StyleOrFunction<ButtonState>;\n /** The link's `target`, when `href` is set. */\n target?: string;\n /**\n * `standard` is transparent and tints what it sits on; `filled` and `tonal`\n * carry a container of their own.\n * @default 'standard'\n */\n variant?: 'filled' | 'standard' | 'tonal';\n} & ButtonDOMProps;\n\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n */\nfunction IconButton({\n children,\n disableRipple = false,\n href,\n isDisabled = false,\n onClick,\n onContextMenu,\n onKeyDown,\n onKeyUp,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n rel,\n render,\n size = 'md',\n target,\n variant = 'standard',\n ...props\n}: IconButtonProps) {\n // `props` (className/style, etc.) is spread separately: `className` and\n // `style` there may be functions of render state, which ripple's own\n // handler-only merge doesn't need to know about. It is also why the styles\n // below merge through mergeStatefulStyles rather than the plain\n // mergeStyles. The ripple is off while disabled, as in Button.\n const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n onClick,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n });\n const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, styles[variant], styles[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n const element = {\n aria: ariaAttributesOf(props),\n onKeyDown,\n onKeyUp\n };\n if (href !== undefined) {\n return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n {children}\n {ripple.surface}\n </RACLink>;\n }\n return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n {children}\n {ripple.surface}\n </RACButton>;\n}\nexport type { IconButtonProps };\nexport default IconButton;"],"mappings":";;;;;;;AAkCA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,QAAQ,OAAO;CACf,UAAU,OAAO;CACjB,OAAO,OAAO;AAChB;;;;;;AAmDA,SAAS,WAAW,EAClB,UACA,gBAAgB,OAChB,MACA,aAAa,OACb,SACA,eACA,WACA,SACA,iBACA,eACA,gBACA,aACA,KACA,QACA,OAAO,MACP,QACA,UAAU,YACV,GAAG,WACe;CAMlB,MAAM,SAAS,UAA4B,CAAC,iBAAiB,CAAC,YAAY;EACxE;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,aAAa,qBAAqB,UAAuB,MAAa,OAAO,MAAM,OAAO,UAAU,OAAO,OAAO,MAAM,cAAc,OAAO,UAAU,MAAM,cAAc,eAAe,QAAQ,GAAG,OAAK;CAChN,MAAM,UAAU;EACd,MAAM,iBAAiB,OAAK;EAC5B;EACA;CACF;CACA,IAAI,SAAS,KAAA,GACX,OAAO,qBAAC,MAAD;EAAe;EAAkB;EAAiB;EAAK,QAAQ,aAAa,OAAO;EAAW;EAAQ,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI;EAA1I,UAAA,CACF,UACA,OAAO,OACD;;CAEb,OAAO,qBAAC,QAAD;EAAuB;EAAY,QAAQ,eAAe,SAAS,MAAM;EAAG,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI;EAAhH,UAAA,CACF,UACA,OAAO,OACC;;AACf"}
|
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AriaAttributes, DOMAttributes, ReactNode } from "react";
|
|
2
|
+
import { ClassNameOrFunction, LinkProps, LinkRenderProps, StyleOrFunction } from "react-aria-components";
|
|
2
3
|
//#region src/components/link/index.d.ts
|
|
3
|
-
type
|
|
4
|
+
type GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof LinkProps, 'onBlur' | 'onClick' | 'onFocus'>;
|
|
5
|
+
type LinkDOMProps = Omit<LinkProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;
|
|
6
|
+
type LinkProps$1 = {
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
/** A function may compute the class from the link's render state. */
|
|
9
|
+
className?: ClassNameOrFunction<LinkRenderProps>;
|
|
10
|
+
/** A function may compute the style from the link's render state. */
|
|
11
|
+
style?: StyleOrFunction<LinkRenderProps>;
|
|
4
12
|
/**
|
|
5
13
|
* Which colour role to render in. `primary` marks the link out from the
|
|
6
14
|
* text around it; `inherit` takes the surrounding colour and leans on the
|
|
@@ -17,14 +25,23 @@ type LinkProps = {
|
|
|
17
25
|
* @default 'always'
|
|
18
26
|
*/
|
|
19
27
|
underline?: LinkUnderline;
|
|
20
|
-
} &
|
|
28
|
+
} & AriaAttributes & LinkDOMProps;
|
|
21
29
|
type LinkTone = 'inherit' | 'primary';
|
|
22
30
|
type LinkUnderline = 'always' | 'hover' | 'none';
|
|
23
31
|
/**
|
|
24
32
|
* A navigational link. It renders an `<a>` and sets no type of its own, so it
|
|
25
|
-
* takes the size and face of the text it sits in.
|
|
33
|
+
* takes the size and face of the text it sits in. Without `href`, or while
|
|
34
|
+
* disabled, it is a span announced as a link instead, since a disabled
|
|
35
|
+
* anchor is no link at all.
|
|
36
|
+
*
|
|
37
|
+
* Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard
|
|
38
|
+
* alike, a `RouterProvider` above it turns a navigation into a client-side
|
|
39
|
+
* one, and a `Breadcrumbs` or `Menu` around it reaches it through context.
|
|
40
|
+
* `render` is React Aria's function form, handed the anchor's props to spread
|
|
41
|
+
* onto an element of its own. Every `aria-*` prop is forwarded to the element;
|
|
42
|
+
* React Aria alone would keep only the labelling ones.
|
|
26
43
|
*/
|
|
27
|
-
declare function Link({ render, tone, underline, ...props }: LinkProps): import("react").
|
|
44
|
+
declare function Link$1({ onKeyDown, onKeyUp, render, tone, underline, ...props }: LinkProps$1): import("react").JSX.Element;
|
|
28
45
|
//#endregion
|
|
29
|
-
export { type LinkProps, Link as default };
|
|
46
|
+
export { type LinkDOMProps, type LinkProps$1 as LinkProps, type LinkTone, type LinkUnderline, Link$1 as default };
|
|
30
47
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,22 +1,32 @@
|
|
|
1
1
|
import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { mergeStatefulStyles } from "../../styles/merge.js";
|
|
3
|
+
import { ariaAttributesOf, linkRenderer } from "../../render/aria.js";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { Link } from "react-aria-components";
|
|
4
6
|
//#region src/components/link/index.tsx
|
|
5
|
-
const styles = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
7
|
+
const styles = {
|
|
8
|
+
base: {
|
|
9
|
+
kaIpWk: "x1tfhd1",
|
|
10
|
+
kB7OPa: "x9f619",
|
|
11
|
+
kkrTdU: "x1ypdohk",
|
|
12
|
+
kjBf7l: "xrgy624",
|
|
13
|
+
kInvED: "x1hl8ikr",
|
|
14
|
+
k3XXqK: "x9v5kkp x1t137rt",
|
|
15
|
+
kMeerF: "x1de99jn",
|
|
16
|
+
kNySMw: "xyi4chj",
|
|
17
|
+
kcSHmL: "x1ohr1zr",
|
|
18
|
+
kIyJzY: "x1qno0dh",
|
|
19
|
+
k1ekBW: "xz1df8t",
|
|
20
|
+
kAMwcw: "xpc4ca7",
|
|
21
|
+
$$css: true
|
|
22
|
+
},
|
|
23
|
+
disabled: {
|
|
24
|
+
kMwMTN: "x1xj74d8",
|
|
25
|
+
kkrTdU: "x1h6gzvc",
|
|
26
|
+
k1TLXF: "x1g6epwz",
|
|
27
|
+
$$css: true
|
|
28
|
+
}
|
|
29
|
+
};
|
|
20
30
|
const tones = {
|
|
21
31
|
inherit: {
|
|
22
32
|
kMwMTN: "x1aetzt3 x1heor9g",
|
|
@@ -45,19 +55,30 @@ const underlines = {
|
|
|
45
55
|
};
|
|
46
56
|
/**
|
|
47
57
|
* A navigational link. It renders an `<a>` and sets no type of its own, so it
|
|
48
|
-
* takes the size and face of the text it sits in.
|
|
58
|
+
* takes the size and face of the text it sits in. Without `href`, or while
|
|
59
|
+
* disabled, it is a span announced as a link instead, since a disabled
|
|
60
|
+
* anchor is no link at all.
|
|
61
|
+
*
|
|
62
|
+
* Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard
|
|
63
|
+
* alike, a `RouterProvider` above it turns a navigation into a client-side
|
|
64
|
+
* one, and a `Breadcrumbs` or `Menu` around it reaches it through context.
|
|
65
|
+
* `render` is React Aria's function form, handed the anchor's props to spread
|
|
66
|
+
* onto an element of its own. Every `aria-*` prop is forwarded to the element;
|
|
67
|
+
* React Aria alone would keep only the labelling ones.
|
|
49
68
|
*/
|
|
50
|
-
function Link({ render, tone = "primary", underline = "always", ...props$1 }) {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
render
|
|
69
|
+
function Link$1({ onKeyDown, onKeyUp, render, tone = "primary", underline = "always", ...props$1 }) {
|
|
70
|
+
const element = {
|
|
71
|
+
aria: ariaAttributesOf(props$1),
|
|
72
|
+
onKeyDown,
|
|
73
|
+
onKeyUp
|
|
74
|
+
};
|
|
75
|
+
return /* @__PURE__ */ jsx(Link, {
|
|
76
|
+
render: linkRenderer(element, render),
|
|
77
|
+
...props$1,
|
|
78
|
+
...mergeStatefulStyles((state) => props(styles.base, tones[tone], underlines[underline], state.isDisabled && styles.disabled), props$1)
|
|
58
79
|
});
|
|
59
80
|
}
|
|
60
81
|
//#endregion
|
|
61
|
-
export { Link as default };
|
|
82
|
+
export { Link$1 as default };
|
|
62
83
|
|
|
63
84
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import type { AriaAttributes, DOMAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, LinkRenderProps, LinkProps as RACLinkProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Link as RACLink } from 'react-aria-components';\nimport { ariaAttributesOf, linkRenderer } from '../../render/aria';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nconst styles = {\n base: {\n kaIpWk: \"x1tfhd1\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n kjBf7l: \"xrgy624\",\n kInvED: \"x1hl8ikr\",\n k3XXqK: \"x9v5kkp x1t137rt\",\n kMeerF: \"x1de99jn\",\n kNySMw: \"xyi4chj\",\n kcSHmL: \"x1ohr1zr\",\n kIyJzY: \"x1qno0dh\",\n k1ekBW: \"xz1df8t\",\n kAMwcw: \"xpc4ca7\",\n $$css: true\n },\n disabled: {\n kMwMTN: \"x1xj74d8\",\n kkrTdU: \"x1h6gzvc\",\n k1TLXF: \"x1g6epwz\",\n $$css: true\n }\n};\nconst tones = {\n inherit: {\n kMwMTN: \"x1aetzt3 x1heor9g\",\n k1TLXF: \"x1rdisx9 x1dbr5dg\",\n $$css: true\n },\n primary: {\n kMwMTN: \"x1mxwv8y\",\n k1TLXF: \"x1rdisx9 xfhk6l2\",\n $$css: true\n }\n};\nconst underlines = {\n always: {\n kMnn75: \"xujl8zx\",\n $$css: true\n },\n hover: {\n kMnn75: \"x1sur9pj xkrqix3\",\n $$css: true\n },\n none: {\n kMnn75: \"xkrqix3\",\n $$css: true\n }\n};\n\n// React Aria types the global DOM events against the element it renders, and\n// a handler written for an <a> does not type-check against the <span> it\n// renders while disabled. The keys are retyped against HTMLElement here, as\n// Button's are, so one set of props serves both forms; the events React Aria\n// defines itself (press, hover, focus) keep its types, since it hands those\n// its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACLinkProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype LinkDOMProps = Omit<RACLinkProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype LinkProps = {\n children?: ReactNode;\n /** A function may compute the class from the link's render state. */\n className?: ClassNameOrFunction<LinkRenderProps>;\n /** A function may compute the style from the link's render state. */\n style?: StyleOrFunction<LinkRenderProps>;\n /**\n * Which colour role to render in. `primary` marks the link out from the\n * text around it; `inherit` takes the surrounding colour and leans on the\n * underline alone, for a link in a place already understood to be links —\n * a footer, a breadcrumb, a nav.\n * @default 'primary'\n */\n tone?: LinkTone;\n /**\n * When to draw the rule. Leave it at `always` in prose: without it, colour\n * is the only thing separating the link from the sentence, which some\n * readers cannot see. `hover` and `none` are for links whose position\n * already announces them, such as a row of footer links.\n * @default 'always'\n */\n underline?: LinkUnderline;\n} & AriaAttributes & LinkDOMProps;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in. Without `href`, or while\n * disabled, it is a span announced as a link instead, since a disabled\n * anchor is no link at all.\n *\n * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard\n * alike, a `RouterProvider` above it turns a navigation into a client-side\n * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.\n * `render` is React Aria's function form, handed the anchor's props to spread\n * onto an element of its own. Every `aria-*` prop is forwarded to the element;\n * React Aria alone would keep only the labelling ones.\n */\nfunction Link({\n onKeyDown,\n onKeyUp,\n render,\n tone = 'primary',\n underline = 'always',\n ...props\n}: LinkProps) {\n const element = {\n aria: ariaAttributesOf(props),\n onKeyDown,\n onKeyUp\n };\n return <RACLink render={linkRenderer(element, render)} {...props} {...mergeStatefulStyles((state: LinkRenderProps) => stylex.props(styles.base, tones[tone], underlines[underline], state.isDisabled && styles.disabled), props)} />;\n}\nexport type { LinkDOMProps, LinkProps, LinkTone, LinkUnderline };\nexport default Link;"],"mappings":";;;;;;AAQA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,QAAQ;CACZ,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,aAAa;CACjB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;;AAiDA,SAAS,OAAK,EACZ,WACA,SACA,QACA,OAAO,WACP,YAAY,UACZ,GAAG,WACS;CACZ,MAAM,UAAU;EACd,MAAM,iBAAiB,OAAK;EAC5B;EACA;CACF;CACA,OAAO,oBAAC,MAAD;EAAS,QAAQ,aAAa,SAAS,MAAM;EAAG,GAAI;EAAO,GAAI,qBAAqB,UAA2B,MAAa,OAAO,MAAM,MAAM,OAAO,WAAW,YAAY,MAAM,cAAc,OAAO,QAAQ,GAAG,OAAK;CAAE,CAAA;AACnO"}
|
|
@@ -16,6 +16,12 @@ type ListItemProps = {
|
|
|
16
16
|
/** Content after the headline, such as an amount or a control. */
|
|
17
17
|
trailing?: ReactNode;
|
|
18
18
|
} & HTMLAttributes<HTMLElement>;
|
|
19
|
+
/**
|
|
20
|
+
* A static row: the row every list draws, on its own. The layout and the
|
|
21
|
+
* states are the row module's in `src/row`, shared with every collection
|
|
22
|
+
* item; what is here is the element around them — a `<div>` that presents,
|
|
23
|
+
* or a `<button>` that ripples — and the props that fill the slots.
|
|
24
|
+
*/
|
|
19
25
|
declare function ListItem({ children, interactive, leading, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
|
|
20
26
|
//#endregion
|
|
21
27
|
export { type ListItemProps, ListItem as default };
|