@radix-solid-js/accessible-icon 0.1.0

package/dist/index.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+var solidJs = require('solid-js');
+var visuallyHidden = require('@radix-solid-js/visually-hidden');
+
+// src/accessible-icon.tsx
+function AccessibleIcon(props) {
+  const resolved = solidJs.children(() => props.children);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, (() => {
+    const child = resolved();
+    if (child instanceof Element) {
+      child.setAttribute("aria-hidden", "true");
+      child.setAttribute("focusable", "false");
+    }
+    return child;
+  })(), /* @__PURE__ */ React.createElement(visuallyHidden.VisuallyHidden, null, props.label));
+}
+var Root = AccessibleIcon;
+
+exports.AccessibleIcon = AccessibleIcon;
+exports.Root = Root;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accessible-icon.tsx"],"names":["resolveChildren","VisuallyHidden"],"mappings":";;;;;;AAwBA,SAAS,eAAe,KAAA,EAA4B;AAClD,EAAA,MAAM,QAAA,GAAWA,gBAAA,CAAgB,MAAM,KAAA,CAAM,QAAQ,CAAA;AAErD,EAAA,kEAEM,MAAM;AACN,IAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,IAAA,IAAI,iBAAiB,OAAA,EAAS;AAC5B,MAAA,KAAA,CAAM,YAAA,CAAa,eAAe,MAAM,CAAA;AACxC,MAAA,KAAA,CAAM,YAAA,CAAa,aAAa,OAAO,CAAA;AAAA,IACzC;AACA,IAAA,OAAO,KAAA;AAAA,EACT,IAAG,kBACH,KAAA,CAAA,aAAA,CAACC,6BAAA,EAAA,IAAA,EAAgB,KAAA,CAAM,KAAM,CAC/B,CAAA;AAEJ;AAIA,IAAM,IAAA,GAAO","file":"index.cjs","sourcesContent":["import { type JSX, children as resolveChildren } from 'solid-js';\nimport { VisuallyHidden } from '@radix-solid-js/visually-hidden';\n\n/* -------------------------------------------------------------------------------------------------\n * AccessibleIcon\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AccessibleIconProps {\n  children: JSX.Element;\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\n/**\n * Makes an icon accessible by hiding it from the accessibility tree\n * and providing a visually hidden label for screen readers.\n *\n * In React's Radix, this used `React.Children.only` + `cloneElement`.\n * In SolidJS, we use the `children()` helper and set attributes directly\n * on the resolved child element.\n */\nfunction AccessibleIcon(props: AccessibleIconProps) {\n  const resolved = resolveChildren(() => props.children);\n\n  return (\n    <>\n      {(() => {\n        const child = resolved() as Element;\n        if (child instanceof Element) {\n          child.setAttribute('aria-hidden', 'true');\n          child.setAttribute('focusable', 'false');\n        }\n        return child;\n      })()}\n      <VisuallyHidden>{props.label}</VisuallyHidden>\n    </>\n  );\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = AccessibleIcon;\n\nexport { AccessibleIcon, Root };\nexport type { AccessibleIconProps };\n"]}

package/dist/index.d.cts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+
+interface AccessibleIconProps {
+    children: JSX.Element;
+    /**
+     * 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;
+}
+/**
+ * Makes an icon accessible by hiding it from the accessibility tree
+ * and providing a visually hidden label for screen readers.
+ *
+ * In React's Radix, this used `React.Children.only` + `cloneElement`.
+ * In SolidJS, we use the `children()` helper and set attributes directly
+ * on the resolved child element.
+ */
+declare function AccessibleIcon(props: AccessibleIconProps): JSX.Element;
+declare const Root: typeof AccessibleIcon;
+
+export { AccessibleIcon, type AccessibleIconProps, Root };

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+
+interface AccessibleIconProps {
+    children: JSX.Element;
+    /**
+     * 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;
+}
+/**
+ * Makes an icon accessible by hiding it from the accessibility tree
+ * and providing a visually hidden label for screen readers.
+ *
+ * In React's Radix, this used `React.Children.only` + `cloneElement`.
+ * In SolidJS, we use the `children()` helper and set attributes directly
+ * on the resolved child element.
+ */
+declare function AccessibleIcon(props: AccessibleIconProps): JSX.Element;
+declare const Root: typeof AccessibleIcon;
+
+export { AccessibleIcon, type AccessibleIconProps, Root };

package/dist/index.js

@@ -0,0 +1,20 @@
+import { children } from 'solid-js';
+import { VisuallyHidden } from '@radix-solid-js/visually-hidden';
+
+// src/accessible-icon.tsx
+function AccessibleIcon(props) {
+  const resolved = children(() => props.children);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, (() => {
+    const child = resolved();
+    if (child instanceof Element) {
+      child.setAttribute("aria-hidden", "true");
+      child.setAttribute("focusable", "false");
+    }
+    return child;
+  })(), /* @__PURE__ */ React.createElement(VisuallyHidden, null, props.label));
+}
+var Root = AccessibleIcon;
+
+export { AccessibleIcon, Root };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accessible-icon.tsx"],"names":["resolveChildren"],"mappings":";;;;AAwBA,SAAS,eAAe,KAAA,EAA4B;AAClD,EAAA,MAAM,QAAA,GAAWA,QAAA,CAAgB,MAAM,KAAA,CAAM,QAAQ,CAAA;AAErD,EAAA,kEAEM,MAAM;AACN,IAAA,MAAM,QAAQ,QAAA,EAAS;AACvB,IAAA,IAAI,iBAAiB,OAAA,EAAS;AAC5B,MAAA,KAAA,CAAM,YAAA,CAAa,eAAe,MAAM,CAAA;AACxC,MAAA,KAAA,CAAM,YAAA,CAAa,aAAa,OAAO,CAAA;AAAA,IACzC;AACA,IAAA,OAAO,KAAA;AAAA,EACT,IAAG,kBACH,KAAA,CAAA,aAAA,CAAC,cAAA,EAAA,IAAA,EAAgB,KAAA,CAAM,KAAM,CAC/B,CAAA;AAEJ;AAIA,IAAM,IAAA,GAAO","file":"index.js","sourcesContent":["import { type JSX, children as resolveChildren } from 'solid-js';\nimport { VisuallyHidden } from '@radix-solid-js/visually-hidden';\n\n/* -------------------------------------------------------------------------------------------------\n * AccessibleIcon\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AccessibleIconProps {\n  children: JSX.Element;\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\n/**\n * Makes an icon accessible by hiding it from the accessibility tree\n * and providing a visually hidden label for screen readers.\n *\n * In React's Radix, this used `React.Children.only` + `cloneElement`.\n * In SolidJS, we use the `children()` helper and set attributes directly\n * on the resolved child element.\n */\nfunction AccessibleIcon(props: AccessibleIconProps) {\n  const resolved = resolveChildren(() => props.children);\n\n  return (\n    <>\n      {(() => {\n        const child = resolved() as Element;\n        if (child instanceof Element) {\n          child.setAttribute('aria-hidden', 'true');\n          child.setAttribute('focusable', 'false');\n        }\n        return child;\n      })()}\n      <VisuallyHidden>{props.label}</VisuallyHidden>\n    </>\n  );\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst Root = AccessibleIcon;\n\nexport { AccessibleIcon, Root };\nexport type { AccessibleIconProps };\n"]}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@radix-solid-js/accessible-icon",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@radix-solid-js/visually-hidden": "workspace:*"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8.0"
+  },
+  "devDependencies": {
+    "@repo/tsconfig": "workspace:*",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3",
+    "solid-js": "^1.9.3",
+    "vitest": "^2.1.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ljho01/shadcn-solid-js.git",
+    "directory": "packages/solid/accessible-icon"
+  }
+}