@radix-ui/react-accessible-icon 0.0.0-20250116175529

package/README.md

@@ -0,0 +1,13 @@
+# `react-accessible-icon`
+
+## Installation
+
+```sh
+$ yarn add @radix-ui/react-accessible-icon
+# or
+$ npm install @radix-ui/react-accessible-icon
+```
+
+## Usage
+
+View docs [here](https://radix-ui.com/primitives/docs/utilities/accessible-icon).

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface AccessibleIconProps {
+    children?: React.ReactNode;
+    /**
+     * The accessible label for the icon. This label will be visually hidden but announced to screen
+     * reader users, similar to `alt` text for `img` tags.
+     */
+    label: string;
+}
+declare const AccessibleIcon: React.FC<AccessibleIconProps>;
+declare const Root: React.FC<AccessibleIconProps>;
+
+export { AccessibleIcon, type AccessibleIconProps, Root };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface AccessibleIconProps {
+    children?: React.ReactNode;
+    /**
+     * The accessible label for the icon. This label will be visually hidden but announced to screen
+     * reader users, similar to `alt` text for `img` tags.
+     */
+    label: string;
+}
+declare const AccessibleIcon: React.FC<AccessibleIconProps>;
+declare const Root: React.FC<AccessibleIconProps>;
+
+export { AccessibleIcon, type AccessibleIconProps, Root };

package/dist/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/react/accessible-icon/src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AccessibleIcon: () => AccessibleIcon,
+  Root: () => Root2
+});
+module.exports = __toCommonJS(src_exports);
+
+// packages/react/accessible-icon/src/AccessibleIcon.tsx
+var React = __toESM(require("react"));
+var VisuallyHiddenPrimitive = __toESM(require("@radix-ui/react-visually-hidden"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var NAME = "AccessibleIcon";
+var AccessibleIcon = ({ children, label }) => {
+  const child = React.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    React.cloneElement(child, {
+      // accessibility
+      "aria-hidden": "true",
+      focusable: "false"
+      // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VisuallyHiddenPrimitive.Root, { children: label })
+  ] });
+};
+AccessibleIcon.displayName = NAME;
+var Root2 = AccessibleIcon;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts", "../src/AccessibleIcon.tsx"],
+  "sourcesContent": ["export {\n  AccessibleIcon,\n  //\n  Root,\n} from './AccessibleIcon';\nexport type { AccessibleIconProps } from './AccessibleIcon';\n", "import * as React from 'react';\nimport * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';\n\nconst NAME = 'AccessibleIcon';\n\ninterface AccessibleIconProps {\n  children?: React.ReactNode;\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label: string;\n}\n\nconst AccessibleIcon: React.FC<AccessibleIconProps> = ({ children, label }) => {\n  const child = React.Children.only(children);\n  return (\n    <>\n      {React.cloneElement(child as React.ReactElement<React.SVGAttributes<SVGElement>>, {\n        // accessibility\n        'aria-hidden': 'true',\n        focusable: 'false', // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable\n      })}\n      <VisuallyHiddenPrimitive.Root>{label}</VisuallyHiddenPrimitive.Root>\n    </>\n  );\n};\n\nAccessibleIcon.displayName = NAME;\n\nconst Root = AccessibleIcon;\n\nexport {\n  AccessibleIcon,\n  //\n  Root,\n};\nexport type { AccessibleIconProps };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,cAAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,8BAAyC;AAgBrC;AAdJ,IAAM,OAAO;AAWb,IAAM,iBAAgD,CAAC,EAAE,UAAU,MAAM,MAAM;AAC7E,QAAM,QAAc,eAAS,KAAK,QAAQ;AAC1C,SACE,4EACG;AAAA,IAAM,mBAAa,OAA8D;AAAA;AAAA,MAEhF,eAAe;AAAA,MACf,WAAW;AAAA;AAAA,IACb,CAAC;AAAA,IACD,4CAAyB,8BAAxB,EAA8B,iBAAM;AAAA,KACvC;AAEJ;AAEA,eAAe,cAAc;AAE7B,IAAMC,QAAO;",
+  "names": ["Root", "Root"]
+}

package/dist/index.mjs

@@ -0,0 +1,24 @@
+// packages/react/accessible-icon/src/AccessibleIcon.tsx
+import * as React from "react";
+import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var NAME = "AccessibleIcon";
+var AccessibleIcon = ({ children, label }) => {
+  const child = React.Children.only(children);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    React.cloneElement(child, {
+      // accessibility
+      "aria-hidden": "true",
+      focusable: "false"
+      // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+    }),
+    /* @__PURE__ */ jsx(VisuallyHiddenPrimitive.Root, { children: label })
+  ] });
+};
+AccessibleIcon.displayName = NAME;
+var Root2 = AccessibleIcon;
+export {
+  AccessibleIcon,
+  Root2 as Root
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/AccessibleIcon.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nimport * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';\n\nconst NAME = 'AccessibleIcon';\n\ninterface AccessibleIconProps {\n  children?: React.ReactNode;\n  /**\n   * The accessible label for the icon. This label will be visually hidden but announced to screen\n   * reader users, similar to `alt` text for `img` tags.\n   */\n  label: string;\n}\n\nconst AccessibleIcon: React.FC<AccessibleIconProps> = ({ children, label }) => {\n  const child = React.Children.only(children);\n  return (\n    <>\n      {React.cloneElement(child as React.ReactElement<React.SVGAttributes<SVGElement>>, {\n        // accessibility\n        'aria-hidden': 'true',\n        focusable: 'false', // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable\n      })}\n      <VisuallyHiddenPrimitive.Root>{label}</VisuallyHiddenPrimitive.Root>\n    </>\n  );\n};\n\nAccessibleIcon.displayName = NAME;\n\nconst Root = AccessibleIcon;\n\nexport {\n  AccessibleIcon,\n  //\n  Root,\n};\nexport type { AccessibleIconProps };\n"],
+  "mappings": ";AAAA,YAAY,WAAW;AACvB,YAAY,6BAA6B;AAgBrC,mBAME,KANF;AAdJ,IAAM,OAAO;AAWb,IAAM,iBAAgD,CAAC,EAAE,UAAU,MAAM,MAAM;AAC7E,QAAM,QAAc,eAAS,KAAK,QAAQ;AAC1C,SACE,iCACG;AAAA,IAAM,mBAAa,OAA8D;AAAA;AAAA,MAEhF,eAAe;AAAA,MACf,WAAW;AAAA;AAAA,IACb,CAAC;AAAA,IACD,oBAAyB,8BAAxB,EAA8B,iBAAM;AAAA,KACvC;AAEJ;AAEA,eAAe,cAAc;AAE7B,IAAMA,QAAO;",
+  "names": ["Root"]
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@radix-ui/react-accessible-icon",
+  "version": "0.0.0-20250116175529",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@radix-ui/react-visually-hidden": "workspace:*"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+    "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "homepage": "https://radix-ui.com/primitives",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/radix-ui/primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/radix-ui/primitives/issues"
+  }
+}