@molecule/app-ui-react 1.0.0

package/dist/utilities/initials.js

@@ -0,0 +1,23 @@
+/**
+ * Initials derivation for avatar fallbacks.
+ *
+ * @module
+ */
+/**
+ * Compute up-to-two-letter initials from a display name or email.
+ *
+ * @param value - The name or email to derive initials from.
+ * @returns The uppercased initials, or `'?'` when no usable input is given.
+ */
+export function getInitials(value) {
+    if (!value)
+        return '?';
+    const cleaned = value.includes('@') ? value.split('@')[0] : value;
+    const parts = cleaned.split(/[\s._-]+/).filter(Boolean);
+    if (parts.length === 0)
+        return '?';
+    const first = parts[0]?.[0] ?? '';
+    const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : '';
+    return (first + last).toUpperCase().slice(0, 2) || '?';
+}
+//# sourceMappingURL=initials.js.map

package/dist/utilities/initials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initials.js","sourceRoot":"","sources":["../../src/utilities/initials.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,KAAgC;IAC1D,IAAI,CAAC,KAAK;QAAE,OAAO,GAAG,CAAA;IACtB,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;IACjE,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IACvD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,GAAG,CAAA;IAClC,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;IACjC,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IACzE,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,CAAA;AACxD,CAAC"}

package/dist/utilities/renderIcon.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Render an icon from the current icon set.
+ *
+ * @module
+ */
+import React from 'react';
+import { type IconName } from '@molecule/app-icons';
+/**
+ * Renders an icon by name as a React SVG element.
+ *
+ * The SVG is marked `aria-hidden` + `focusable="false"`: every call site is
+ * decorative chrome (close X, chevrons, status glyphs) whose accessible name
+ * comes from the surrounding control's `aria-label`/text. Without this, some
+ * screen reader/browser combos announce a stray "image" for each glyph.
+ *
+ * @param name - Icon name from the icon set
+ * @param className - CSS class for sizing
+ * @returns React SVG element
+ */
+export declare function renderIcon(name: IconName, className?: string): React.ReactElement;
+//# sourceMappingURL=renderIcon.d.ts.map

package/dist/utilities/renderIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderIcon.d.ts","sourceRoot":"","sources":["../../src/utilities/renderIcon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE5D;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAyBjF"}

package/dist/utilities/renderIcon.js

@@ -0,0 +1,40 @@
+/**
+ * Render an icon from the current icon set.
+ *
+ * @module
+ */
+import React from 'react';
+import { getIcon } from '@molecule/app-icons';
+/**
+ * Renders an icon by name as a React SVG element.
+ *
+ * The SVG is marked `aria-hidden` + `focusable="false"`: every call site is
+ * decorative chrome (close X, chevrons, status glyphs) whose accessible name
+ * comes from the surrounding control's `aria-label`/text. Without this, some
+ * screen reader/browser combos announce a stray "image" for each glyph.
+ *
+ * @param name - Icon name from the icon set
+ * @param className - CSS class for sizing
+ * @returns React SVG element
+ */
+export function renderIcon(name, className) {
+    const icon = getIcon(name);
+    return React.createElement('svg', {
+        xmlns: 'http://www.w3.org/2000/svg',
+        'aria-hidden': true,
+        focusable: false,
+        className,
+        viewBox: icon.viewBox || '0 0 20 20',
+        fill: icon.fill || 'currentColor',
+        stroke: icon.stroke,
+        strokeWidth: icon.strokeWidth,
+        strokeLinecap: icon.strokeLinecap,
+        strokeLinejoin: icon.strokeLinejoin,
+    }, ...icon.paths.map((p, i) => React.createElement('path', {
+        key: i,
+        d: p.d,
+        fillRule: p.fillRule,
+        clipRule: p.clipRule,
+    })));
+}
+//# sourceMappingURL=renderIcon.js.map

package/dist/utilities/renderIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderIcon.js","sourceRoot":"","sources":["../../src/utilities/renderIcon.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,OAAO,EAAiB,MAAM,qBAAqB,CAAA;AAE5D;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,UAAU,CAAC,IAAc,EAAE,SAAkB;IAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC1B,OAAO,KAAK,CAAC,aAAa,CACxB,KAAK,EACL;QACE,KAAK,EAAE,4BAA4B;QACnC,aAAa,EAAE,IAAI;QACnB,SAAS,EAAE,KAAK;QAChB,SAAS;QACT,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,WAAW;QACpC,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,cAAc;QACjC,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,WAAW,EAAE,IAAI,CAAC,WAAW;QAC7B,aAAa,EAAE,IAAI,CAAC,aAAa;QACjC,cAAc,EAAE,IAAI,CAAC,cAAc;KACpC,EACD,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACzB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;QAC1B,GAAG,EAAE,CAAC;QACN,CAAC,EAAE,CAAC,CAAC,CAAC;QACN,QAAQ,EAAE,CAAC,CAAC,QAAQ;QACpB,QAAQ,EAAE,CAAC,CAAC,QAAQ;KACrB,CAAC,CACH,CACF,CAAA;AACH,CAAC"}

package/dist/utilities.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Utility functions for UI components.
+ *
+ * @module
+ */
+/**
+ * Merge class name strings, filtering out falsy values (undefined, null, false).
+ * @param inputs - Class name strings or falsy values to be filtered out.
+ * @returns A single space-separated class string.
+ */
+export declare function cn(...inputs: (string | undefined | null | false)[]): string;
+//# sourceMappingURL=utilities.d.ts.map

package/dist/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../src/utilities.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE3E"}

package/dist/utilities.js

@@ -0,0 +1,14 @@
+/**
+ * Utility functions for UI components.
+ *
+ * @module
+ */
+/**
+ * Merge class name strings, filtering out falsy values (undefined, null, false).
+ * @param inputs - Class name strings or falsy values to be filtered out.
+ * @returns A single space-separated class string.
+ */
+export function cn(...inputs) {
+    return inputs.filter(Boolean).join(' ');
+}
+//# sourceMappingURL=utilities.js.map

package/dist/utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.js","sourceRoot":"","sources":["../src/utilities.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;GAIG;AACH,MAAM,UAAU,EAAE,CAAC,GAAG,MAA6C;IACjE,OAAO,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACzC,CAAC"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@molecule/app-ui-react",
+  "version": "1.0.0",
+  "description": "React UI components for molecule.dev",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/Tooltip.js": {
+      "types": "./dist/components/Tooltip.d.ts",
+      "import": "./dist/components/Tooltip.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "author": "Molecule Dev, Inc. (https://molecule.dev)",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "@molecule/app-i18n": "^1.0.0",
+    "@molecule/app-icons": "^1.0.0",
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router": "^7.0.0 || ^8.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-i18n": "1.0.0",
+    "@molecule/app-icons": "1.0.0",
+    "@molecule/app-react": "1.0.0",
+    "@testing-library/react": "16.3.2",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "30.0.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-router": "8.3.0",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/molecule-dev/molecule.git",
+    "directory": "packages/app/frameworks/react-ui"
+  },
+  "homepage": "https://github.com/molecule-dev/molecule/tree/main/packages/app/frameworks/react-ui",
+  "bugs": "https://github.com/molecule-dev/molecule/issues",
+  "publishConfig": {
+    "access": "public"
+  }
+}