@kanso-labs/kanso-ui 0.11.13 → 0.11.15
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.
|
@@ -19,8 +19,9 @@ type ProductIconProps = Omit<AvatarRootProps, 'children'> & {
|
|
|
19
19
|
*/
|
|
20
20
|
src?: string;
|
|
21
21
|
/**
|
|
22
|
-
* Which container/on-container colour pair to tint the fallback with.
|
|
23
|
-
*
|
|
22
|
+
* Which container/on-container colour pair to tint the fallback with. It is
|
|
23
|
+
* the fallback's own background, so it is gone once `src` has loaded rather
|
|
24
|
+
* than sitting behind the mark.
|
|
24
25
|
* @default 'primary'
|
|
25
26
|
*/
|
|
26
27
|
tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';
|
|
@@ -17,6 +17,14 @@ const styles = {
|
|
|
17
17
|
kfSwDN: "x87ps6o",
|
|
18
18
|
$$css: true
|
|
19
19
|
},
|
|
20
|
+
fallback: {
|
|
21
|
+
kGNEyG: "x6s0dn4",
|
|
22
|
+
kZKoxP: "x5yr21d",
|
|
23
|
+
k1xSpc: "x78zum5",
|
|
24
|
+
kzqmXN: "xh8yej3",
|
|
25
|
+
kjj79g: "xl56j7k",
|
|
26
|
+
$$css: true
|
|
27
|
+
},
|
|
20
28
|
image: {
|
|
21
29
|
kZKoxP: "x5yr21d",
|
|
22
30
|
kzqmXN: "xh8yej3",
|
|
@@ -83,12 +91,15 @@ function ProductIcon({ name, size = "md", src, tone = "primary", ...props$1 }) {
|
|
|
83
91
|
"aria-label": name,
|
|
84
92
|
role: "img",
|
|
85
93
|
...props$1,
|
|
86
|
-
...mergeStatefulStyles(props(styles.base, styles[size]
|
|
94
|
+
...mergeStatefulStyles(props(styles.base, styles[size]), props$1),
|
|
87
95
|
children: [src === void 0 ? null : /* @__PURE__ */ jsx(Avatar.Image, {
|
|
88
96
|
alt: "",
|
|
89
97
|
src,
|
|
90
98
|
className: "x5yr21d xh8yej3 x19kjcj4"
|
|
91
|
-
}), /* @__PURE__ */ jsx(Avatar.Fallback, {
|
|
99
|
+
}), /* @__PURE__ */ jsx(Avatar.Fallback, {
|
|
100
|
+
...props(styles.fallback, styles[tone]),
|
|
101
|
+
children: initialFrom(name)
|
|
102
|
+
})]
|
|
92
103
|
});
|
|
93
104
|
}
|
|
94
105
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import type { AvatarRootProps as BaseUIAvatarRootProps } from '@base-ui/react/avatar';\nimport { Avatar as BaseUIAvatar } from '@base-ui/react/avatar';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\nconst styles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kaIpWk: \"x1xdvaa9\",\n kB7OPa: \"x9f619\",\n k1xSpc: \"x3nfvp2\",\n kmuXW: \"x2lah0s\",\n kMv6JI: \"xkknnkr\",\n k63SB2: \"x1bf3uqz\",\n kjj79g: \"xl56j7k\",\n kVQacm: \"xb3r6kr\",\n kfSwDN: \"x87ps6o\",\n $$css: true\n },\n image: {\n kZKoxP: \"x5yr21d\",\n kzqmXN: \"xh8yej3\",\n kVIFPx: \"x19kjcj4\",\n $$css: true\n },\n lg: {\n kZKoxP: \"xnnlda6\",\n kGuDYH: \"x1848etk\",\n kzqmXN: \"x15yg21f\",\n $$css: true\n },\n md: {\n kZKoxP: \"x1vqgdyp\",\n kGuDYH: \"x14zspaw\",\n kzqmXN: \"x100vrsf\",\n $$css: true\n },\n negative: {\n kWkggS: \"xkz0cvf\",\n kMwMTN: \"xylzu7l\",\n $$css: true\n },\n positive: {\n kWkggS: \"xa3zu90\",\n kMwMTN: \"x1di7zbg\",\n $$css: true\n },\n primary: {\n kWkggS: \"xp89om9\",\n kMwMTN: \"xscdzaa\",\n $$css: true\n },\n secondary: {\n kWkggS: \"x15dekr4\",\n kMwMTN: \"x1sawysd\",\n $$css: true\n },\n sm: {\n kZKoxP: \"xc9qbxq\",\n kGuDYH: \"xkucv67\",\n kzqmXN: \"x14qfxbe\",\n $$css: true\n },\n tertiary: {\n kWkggS: \"xs6yvni\",\n kMwMTN: \"x3cbcwg\",\n $$css: true\n }\n};\ntype ProductIconProps = Omit<BaseUIAvatarRootProps, 'children'> & {\n /**\n * What this identifies. Supplies both the fallback initial and the\n * accessible name, so a screen reader announces the thing rather than\n * reading a letter aloud.\n */\n name: string;\n /**\n * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n * so the two are interchangeable wherever one leads a row or a card.\n * @default 'md'\n */\n size?: 'lg' | 'md' | 'sm';\n /**\n * The mark to show in place of the initial. The initial stays until it has\n * loaded, and comes back if it fails.\n */\n src?: string;\n /**\n * Which container/on-container colour pair to tint the fallback with.
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import type { AvatarRootProps as BaseUIAvatarRootProps } from '@base-ui/react/avatar';\nimport { Avatar as BaseUIAvatar } from '@base-ui/react/avatar';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\n//\n// That cost is also why `tone` tints the fallback rather than the root. A mark\n// letterboxed into the square does not cover it, and neither does one drawn\n// with transparency, so a tint on the root showed as a coloured box around\n// every logo that was not an opaque square. On the fallback it is seen exactly\n// when it is meant to be: while there is no mark, or none has loaded.\nconst styles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kaIpWk: \"x1xdvaa9\",\n kB7OPa: \"x9f619\",\n k1xSpc: \"x3nfvp2\",\n kmuXW: \"x2lah0s\",\n kMv6JI: \"xkknnkr\",\n k63SB2: \"x1bf3uqz\",\n kjj79g: \"xl56j7k\",\n kVQacm: \"xb3r6kr\",\n kfSwDN: \"x87ps6o\",\n $$css: true\n },\n fallback: {\n kGNEyG: \"x6s0dn4\",\n kZKoxP: \"x5yr21d\",\n k1xSpc: \"x78zum5\",\n kzqmXN: \"xh8yej3\",\n kjj79g: \"xl56j7k\",\n $$css: true\n },\n image: {\n kZKoxP: \"x5yr21d\",\n kzqmXN: \"xh8yej3\",\n kVIFPx: \"x19kjcj4\",\n $$css: true\n },\n lg: {\n kZKoxP: \"xnnlda6\",\n kGuDYH: \"x1848etk\",\n kzqmXN: \"x15yg21f\",\n $$css: true\n },\n md: {\n kZKoxP: \"x1vqgdyp\",\n kGuDYH: \"x14zspaw\",\n kzqmXN: \"x100vrsf\",\n $$css: true\n },\n negative: {\n kWkggS: \"xkz0cvf\",\n kMwMTN: \"xylzu7l\",\n $$css: true\n },\n positive: {\n kWkggS: \"xa3zu90\",\n kMwMTN: \"x1di7zbg\",\n $$css: true\n },\n primary: {\n kWkggS: \"xp89om9\",\n kMwMTN: \"xscdzaa\",\n $$css: true\n },\n secondary: {\n kWkggS: \"x15dekr4\",\n kMwMTN: \"x1sawysd\",\n $$css: true\n },\n sm: {\n kZKoxP: \"xc9qbxq\",\n kGuDYH: \"xkucv67\",\n kzqmXN: \"x14qfxbe\",\n $$css: true\n },\n tertiary: {\n kWkggS: \"xs6yvni\",\n kMwMTN: \"x3cbcwg\",\n $$css: true\n }\n};\ntype ProductIconProps = Omit<BaseUIAvatarRootProps, 'children'> & {\n /**\n * What this identifies. Supplies both the fallback initial and the\n * accessible name, so a screen reader announces the thing rather than\n * reading a letter aloud.\n */\n name: string;\n /**\n * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n * so the two are interchangeable wherever one leads a row or a card.\n * @default 'md'\n */\n size?: 'lg' | 'md' | 'sm';\n /**\n * The mark to show in place of the initial. The initial stays until it has\n * loaded, and comes back if it fails.\n */\n src?: string;\n /**\n * Which container/on-container colour pair to tint the fallback with. It is\n * the fallback's own background, so it is gone once `src` has loaded rather\n * than sitting behind the mark.\n * @default 'primary'\n */\n tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n const trimmed = name.trim();\n return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n name,\n size = 'md',\n src,\n tone = 'primary',\n ...props\n}: ProductIconProps) {\n return (\n // role/aria-label rather than letting the fallback letter be read: \"B\" is\n // not what anyone means to announce. Marking the root as an image also\n // makes its contents presentational, so neither the mark nor the letter\n // is announced a second time underneath the name.\n //\n // The lint rule below wants a real <img> tag instead of the role, which\n // cannot work here: an <img> is void, and this element's whole job is to\n // hold the letter shown when there is no mark, or none has loaded yet.\n <BaseUIAvatar.Root aria-label={name}\n // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- <img> takes no children\n role=\"img\" {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[size]), props)}>\n {src === undefined ? null : <BaseUIAvatar.Image alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" />}\n <BaseUIAvatar.Fallback {...stylex.props(styles.fallback, styles[tone])}>\n {initialFrom(name)}\n </BaseUIAvatar.Fallback>\n </BaseUIAvatar.Root>\n );\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":";;;;;AA0BA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAkCA,SAAS,YAAY,MAAc;CACjC,MAAM,UAAU,KAAK,KAAK;CAC1B,QAAQ,MAAM,KAAK,OAAO,CAAC,CAAC,MAAM,GAAA,CAAI,kBAAkB;AAC1D;;;;;;;;AASA,SAAS,YAAY,EACnB,MACA,OAAO,MACP,KACA,OAAO,WACP,GAAG,WACgB;CACnB,OASE,qBAAC,OAAa,MAAd;EAAmB,cAAY;EAE/B,MAAK;EAAM,GAAI;EAAO,GAAI,oBAAoB,MAAa,OAAO,MAAM,OAAO,KAAK,GAAG,OAAK;EAF5F,UAAA,CAGG,QAAQ,KAAA,IAAY,OAAO,oBAAC,OAAa,OAAd;GAAoB,KAAI;GAAQ;GAAK,WAAU;EAA0B,CAAA,GACrG,oBAAC,OAAa,UAAd;GAAuB,GAAI,MAAa,OAAO,UAAU,OAAO,KAAK;GAClE,UAAA,YAAY,IAAI;EACI,CAAA,CACN;;AAEvB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-labs/kanso-ui",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.15",
|
|
4
4
|
"description": "A React component library built on Base UI primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"@commitlint/cli": "21.2.2",
|
|
67
67
|
"@commitlint/config-conventional": "21.2.2",
|
|
68
68
|
"@eslint/js": "10.0.1",
|
|
69
|
-
"@kanso-labs/unplugin-style-dictionary": "0.4.
|
|
69
|
+
"@kanso-labs/unplugin-style-dictionary": "0.4.12",
|
|
70
70
|
"@rolldown/plugin-babel": "0.2.3",
|
|
71
71
|
"@storybook/addon-a11y": "10.5.10",
|
|
72
72
|
"@storybook/addon-docs": "10.5.10",
|
|
@@ -74,10 +74,10 @@
|
|
|
74
74
|
"@storybook/builder-vite": "10.5.10",
|
|
75
75
|
"@storybook/react-vite": "10.5.10",
|
|
76
76
|
"@stylexjs/unplugin": "0.19.0",
|
|
77
|
-
"@testing-library/react": "16.3.
|
|
77
|
+
"@testing-library/react": "16.3.3",
|
|
78
78
|
"@types/react": "19.2.18",
|
|
79
79
|
"@types/react-dom": "19.2.5",
|
|
80
|
-
"@vitejs/plugin-react": "6.1.
|
|
80
|
+
"@vitejs/plugin-react": "6.1.1",
|
|
81
81
|
"@vitest/browser-playwright": "4.1.11",
|
|
82
82
|
"@vitest/coverage-v8": "4.1.11",
|
|
83
83
|
"babel-plugin-react-compiler": "1.0.0",
|