@gnome-ui/react 1.39.0 → 1.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -81,7 +81,7 @@ import { Button } from "@gnome-ui/react/components/Button";
|
|
|
81
81
|
| Component | Description |
|
|
82
82
|
|-----------|-------------|
|
|
83
83
|
| [`Text`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-text--docs) | 12 Adwaita type styles: large-title, title-1…4, heading, body, caption… |
|
|
84
|
-
| [`Icon`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-icon--docs) |
|
|
84
|
+
| [`Icon`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-icon--docs) | Inline SVG icon. Accepts `@gnome-ui/icons` definitions, [`simple-icons`](https://simpleicons.org/) icons, or any `{ path }` object; inherits `currentColor` |
|
|
85
85
|
| [`Avatar`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-avatar--docs) | Circular user image with deterministic-color initials fallback |
|
|
86
86
|
| [`Badge`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-badge--docs) | Counter or status dot, optionally anchored over another element |
|
|
87
87
|
| [`Blockquote`](https://eljijuna.github.io/gnome-ui/?path=/docs/components-blockquote--docs) | Styled pull-quote with left-border accent; default, info, warning, error, success variants; optional icon and attribution |
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
let e=require(`react/jsx-runtime`);var t={sm:12,md:16,lg:20};function n({icon:
|
|
1
|
+
let e=require(`react/jsx-runtime`);var t={sm:12,md:16,lg:20};function n(e){return`paths`in e&&Array.isArray(e.paths)}function r({icon:r,size:i=`md`,label:a,width:o,height:s,...c}){let l=t[i],u=n(r)?r.viewBox:r.viewBox??`0 0 24 24`,d=n(r)?r.paths.map((t,n)=>(0,e.jsx)(`path`,{d:t.d,fillRule:t.fillRule,clipRule:t.clipRule},n)):[(0,e.jsx)(`path`,{d:r.path},0)];return(0,e.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:u,width:o??l,height:s??l,fill:`currentColor`,"aria-label":a,"aria-hidden":a?void 0:!0,role:a?`img`:void 0,focusable:`false`,...c,children:d})}exports.Icon=r;
|
|
2
2
|
//# sourceMappingURL=Icon.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.cjs","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /** Icon
|
|
1
|
+
{"version":3,"file":"Icon.cjs","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */\n icon: AnyIconDefinition;\n /**\n * Rendered size.\n * - `sm` — 12 px\n * - `md` — 16 px (default)\n * - `lg` — 20 px\n *\n * Override with `width`/`height` for non-standard sizes.\n */\n size?: IconSize;\n /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n // When an object has both `path` and `paths`, `paths` wins.\n return \"paths\" in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/**\n * Renders an icon as an inline SVG.\n *\n * Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n *\n * @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport function Icon({\n icon,\n size = \"md\",\n label,\n width,\n height,\n ...props\n}: IconProps) {\n const px = SIZE_MAP[size];\n\n const resolvedViewBox = isIconDefinition(icon)\n ? icon.viewBox\n : (icon.viewBox ?? \"0 0 24 24\");\n\n const paths = isIconDefinition(icon)\n ? icon.paths.map((p, i) => (\n <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} />\n ))\n : [<path key={0} d={icon.path} />];\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={resolvedViewBox}\n width={width ?? px}\n height={height ?? px}\n fill=\"currentColor\"\n aria-label={label}\n aria-hidden={label ? undefined : true}\n role={label ? \"img\" : undefined}\n focusable=\"false\"\n {...props}\n >\n {paths}\n </svg>\n );\n}\n"],"mappings":"mCAqBA,IAAM,EAAqC,CAAE,GAAI,GAAI,GAAI,GAAI,GAAI,GAAI,CAErE,SAAS,EAAiB,EAAiD,CAEzE,MAAO,UAAW,GAAQ,MAAM,QAAS,EAAwB,MAAM,CAkBzE,SAAgB,EAAK,CACnB,OACA,OAAO,KACP,QACA,QACA,SACA,GAAG,GACS,CACZ,IAAM,EAAK,EAAS,GAEd,EAAkB,EAAiB,EAAK,CAC1C,EAAK,QACJ,EAAK,SAAW,YAEf,EAAQ,EAAiB,EAAK,CAChC,EAAK,MAAM,KAAK,EAAG,KACjB,EAAA,EAAA,KAAC,OAAD,CAAc,EAAG,EAAE,EAAG,SAAU,EAAE,SAAU,SAAU,EAAE,SAAY,CAAzD,EAAyD,CACpE,CACF,EAAC,EAAA,EAAA,KAAC,OAAD,CAAc,EAAG,EAAK,KAAQ,CAAnB,EAAmB,CAAC,CAEpC,OACE,EAAA,EAAA,KAAC,MAAD,CACE,MAAM,6BACN,QAAS,EACT,MAAO,GAAS,EAChB,OAAQ,GAAU,EAClB,KAAK,eACL,aAAY,EACZ,cAAa,EAAQ,IAAA,GAAY,GACjC,KAAM,EAAQ,MAAQ,IAAA,GACtB,UAAU,QACV,GAAI,WAEH,EACG,CAAA"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { SVGAttributes } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { AnyIconDefinition } from '@gnome-ui/icons';
|
|
3
3
|
export type IconSize = "sm" | "md" | "lg";
|
|
4
4
|
export interface IconProps extends SVGAttributes<SVGSVGElement> {
|
|
5
|
-
/** Icon
|
|
6
|
-
icon:
|
|
5
|
+
/** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */
|
|
6
|
+
icon: AnyIconDefinition;
|
|
7
7
|
/**
|
|
8
8
|
* Rendered size.
|
|
9
9
|
* - `sm` — 12 px
|
|
@@ -17,14 +17,18 @@ export interface IconProps extends SVGAttributes<SVGSVGElement> {
|
|
|
17
17
|
label?: string;
|
|
18
18
|
}
|
|
19
19
|
/**
|
|
20
|
-
* Renders an
|
|
20
|
+
* Renders an icon as an inline SVG.
|
|
21
21
|
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
22
|
+
* Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain
|
|
23
|
+
* `{ path }` object. Uses `currentColor` so the icon inherits the text color
|
|
24
|
+
* of its parent. Pass `label` only when the icon conveys meaning on its own.
|
|
25
25
|
*
|
|
26
26
|
* @example
|
|
27
27
|
* import { Search } from "@gnome-ui/icons";
|
|
28
28
|
* <Icon icon={Search} label="Search" />
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* import { siGithub } from "simple-icons";
|
|
32
|
+
* <Icon icon={siGithub} label="GitHub" />
|
|
29
33
|
*/
|
|
30
34
|
export declare function Icon({ icon, size, label, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,27 +5,30 @@ var t = {
|
|
|
5
5
|
md: 16,
|
|
6
6
|
lg: 20
|
|
7
7
|
};
|
|
8
|
-
function n(
|
|
9
|
-
|
|
8
|
+
function n(e) {
|
|
9
|
+
return "paths" in e && Array.isArray(e.paths);
|
|
10
|
+
}
|
|
11
|
+
function r({ icon: r, size: i = "md", label: a, width: o, height: s, ...c }) {
|
|
12
|
+
let l = t[i], u = n(r) ? r.viewBox : r.viewBox ?? "0 0 24 24", d = n(r) ? r.paths.map((t, n) => /* @__PURE__ */ e("path", {
|
|
13
|
+
d: t.d,
|
|
14
|
+
fillRule: t.fillRule,
|
|
15
|
+
clipRule: t.clipRule
|
|
16
|
+
}, n)) : [/* @__PURE__ */ e("path", { d: r.path }, 0)];
|
|
10
17
|
return /* @__PURE__ */ e("svg", {
|
|
11
18
|
xmlns: "http://www.w3.org/2000/svg",
|
|
12
|
-
viewBox:
|
|
13
|
-
width:
|
|
14
|
-
height:
|
|
19
|
+
viewBox: u,
|
|
20
|
+
width: o ?? l,
|
|
21
|
+
height: s ?? l,
|
|
15
22
|
fill: "currentColor",
|
|
16
|
-
"aria-label":
|
|
17
|
-
"aria-hidden":
|
|
18
|
-
role:
|
|
23
|
+
"aria-label": a,
|
|
24
|
+
"aria-hidden": a ? void 0 : !0,
|
|
25
|
+
role: a ? "img" : void 0,
|
|
19
26
|
focusable: "false",
|
|
20
|
-
...
|
|
21
|
-
children:
|
|
22
|
-
d: t.d,
|
|
23
|
-
fillRule: t.fillRule,
|
|
24
|
-
clipRule: t.clipRule
|
|
25
|
-
}, n))
|
|
27
|
+
...c,
|
|
28
|
+
children: d
|
|
26
29
|
});
|
|
27
30
|
}
|
|
28
31
|
//#endregion
|
|
29
|
-
export {
|
|
32
|
+
export { r as Icon };
|
|
30
33
|
|
|
31
34
|
//# sourceMappingURL=Icon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /** Icon
|
|
1
|
+
{"version":3,"file":"Icon.js","names":[],"sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { SVGAttributes } from \"react\";\nimport type { AnyIconDefinition, IconDefinition } from \"@gnome-ui/icons\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface IconProps extends SVGAttributes<SVGSVGElement> {\n /** Icon from `@gnome-ui/icons`, a `simple-icons` icon, or a raw `{ path }` object. */\n icon: AnyIconDefinition;\n /**\n * Rendered size.\n * - `sm` — 12 px\n * - `md` — 16 px (default)\n * - `lg` — 20 px\n *\n * Override with `width`/`height` for non-standard sizes.\n */\n size?: IconSize;\n /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */\n label?: string;\n}\n\nconst SIZE_MAP: Record<IconSize, number> = { sm: 12, md: 16, lg: 20 };\n\nfunction isIconDefinition(icon: AnyIconDefinition): icon is IconDefinition {\n // When an object has both `path` and `paths`, `paths` wins.\n return \"paths\" in icon && Array.isArray((icon as IconDefinition).paths);\n}\n\n/**\n * Renders an icon as an inline SVG.\n *\n * Accepts icons from `@gnome-ui/icons`, any `simple-icons` icon, or a plain\n * `{ path }` object. Uses `currentColor` so the icon inherits the text color\n * of its parent. Pass `label` only when the icon conveys meaning on its own.\n *\n * @example\n * import { Search } from \"@gnome-ui/icons\";\n * <Icon icon={Search} label=\"Search\" />\n *\n * @example\n * import { siGithub } from \"simple-icons\";\n * <Icon icon={siGithub} label=\"GitHub\" />\n */\nexport function Icon({\n icon,\n size = \"md\",\n label,\n width,\n height,\n ...props\n}: IconProps) {\n const px = SIZE_MAP[size];\n\n const resolvedViewBox = isIconDefinition(icon)\n ? icon.viewBox\n : (icon.viewBox ?? \"0 0 24 24\");\n\n const paths = isIconDefinition(icon)\n ? icon.paths.map((p, i) => (\n <path key={i} d={p.d} fillRule={p.fillRule} clipRule={p.clipRule} />\n ))\n : [<path key={0} d={icon.path} />];\n\n return (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox={resolvedViewBox}\n width={width ?? px}\n height={height ?? px}\n fill=\"currentColor\"\n aria-label={label}\n aria-hidden={label ? undefined : true}\n role={label ? \"img\" : undefined}\n focusable=\"false\"\n {...props}\n >\n {paths}\n </svg>\n );\n}\n"],"mappings":";;AAqBA,IAAM,IAAqC;CAAE,IAAI;CAAI,IAAI;CAAI,IAAI;CAAI;AAErE,SAAS,EAAiB,GAAiD;AAEzE,QAAO,WAAW,KAAQ,MAAM,QAAS,EAAwB,MAAM;;AAkBzE,SAAgB,EAAK,EACnB,SACA,UAAO,MACP,UACA,UACA,WACA,GAAG,KACS;CACZ,IAAM,IAAK,EAAS,IAEd,IAAkB,EAAiB,EAAK,GAC1C,EAAK,UACJ,EAAK,WAAW,aAEf,IAAQ,EAAiB,EAAK,GAChC,EAAK,MAAM,KAAK,GAAG,MACjB,kBAAC,QAAD;EAAc,GAAG,EAAE;EAAG,UAAU,EAAE;EAAU,UAAU,EAAE;EAAY,EAAzD,EAAyD,CACpE,GACF,CAAC,kBAAC,QAAD,EAAc,GAAG,EAAK,MAAQ,EAAnB,EAAmB,CAAC;AAEpC,QACE,kBAAC,OAAD;EACE,OAAM;EACN,SAAS;EACT,OAAO,KAAS;EAChB,QAAQ,KAAU;EAClB,MAAK;EACL,cAAY;EACZ,eAAa,IAAQ,KAAA,IAAY;EACjC,MAAM,IAAQ,QAAQ,KAAA;EACtB,WAAU;EACV,GAAI;YAEH;EACG,CAAA"}
|