@symbiote-native/symbols 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 A. Prokopenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# @symbiote-native/symbols
+
+[`expo-symbols`](https://docs.expo.dev/versions/latest/sdk/symbols/) for **every**
+[SymbioteNative](../../README.md) adapter: React, Vue, Svelte, Solid and Angular. SF Symbols on iOS,
+Material Symbols on Android drawn from a font loaded through `@symbiote-native/font`.
+
+## Install
+
+```bash
+npx @symbiote-native/cli new my-app --symbols   # new app
+npx @symbiote-native/cli add --symbols          # existing app
+```
+
+Manual: `npm install @symbiote-native/symbols`, then wire `expo-modules-autolinking` once per app.
+Never install `expo-symbols`, `expo-font` or the `expo` meta-package yourself, the Android font path
+comes with the `@symbiote-native/font` dependency.
+
+## Usage
+
+```tsx
+import { SymbolView } from '@symbiote-native/symbols/react';
+import bold from '@symbiote-native/symbols/androidWeights/bold';
+
+<SymbolView
+  name={{ ios: 'star.fill', android: 'star' }}
+  weight={{ ios: 'bold', android: bold }}
+  tintColor="orange"
+  size={32}
+  fallback={<Text>star</Text>}
+/>;
+```
+
+Same props on every adapter: `name`, `type`, `scale`, `weight`, `colors`, `size`, `tintColor`,
+`resizeMode`, `animationSpec` and the View surface. `fallback` is a prop on React and Solid, a slot
+named `fallback` on Vue, a `fallback` snippet on Svelte and projected content on Angular. It renders
+when the symbol has no name for the current platform.
+
+## Platforms
+
+| Platform | What renders                                                          |
+| -------- | --------------------------------------------------------------------- |
+| iOS      | the native `SymbolView` with every prop forwarded                     |
+| Android  | an empty sized `View`, then the glyph in the Material Symbols font    |
+
+The font loads once on mount. If loading fails the symbol stays an empty `View`.
+`unstable_getMaterialSymbolSourceAsync(symbol, size, color)` renders a Material Symbol to an image
+source for APIs that take an image, such as tab bar icons.
+
+## Not ported
+
+The macOS entry (`SymbolView.macos.tsx`) and the web build. Upstream ships no tests, so the suites here
+are written against its behavior.

package/build/angular/index.d.ts

@@ -0,0 +1,2 @@
+export { SymbolView } from './symbol-view';
+export { SYMBOL_MODULE_NAME, androidSymbolToString, symbolViewName, unstable_getMaterialSymbolSourceAsync, type IAndroidSymbol, type IAnimationSpec, type IContentMode, type ISymbolName, type ISymbolScale, type ISymbolType, type ISymbolViewProps, type ISymbolWeight, type SFSymbol, } from '../core';

package/build/angular/index.js

@@ -0,0 +1,3 @@
+// @symbiote-native/symbols/angular: компонент `SymbolView` поверх общего ядра
+export { SymbolView } from './symbol-view.js';
+export { SYMBOL_MODULE_NAME, androidSymbolToString, symbolViewName, unstable_getMaterialSymbolSourceAsync, } from '../core/index.js';

package/build/angular/symbol-view.d.ts

@@ -0,0 +1,22 @@
+import { type OnDestroy, type OnInit } from '@angular/core';
+import { NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import type { ISymbolViewProps } from '../core';
+/** Angular twin of `expo-symbols`' `SymbolView`, projected content is the fallback without a symbol */
+export declare class SymbolView extends NativeViewBase implements OnInit, OnDestroy {
+    name: ISymbolViewProps['name'];
+    type?: ISymbolViewProps['type'];
+    scale?: ISymbolViewProps['scale'];
+    weight?: ISymbolViewProps['weight'];
+    colors?: ISymbolViewProps['colors'];
+    size?: ISymbolViewProps['size'];
+    tintColor?: ISymbolViewProps['tintColor'];
+    resizeMode?: ISymbolViewProps['resizeMode'];
+    animationSpec?: ISymbolViewProps['animationSpec'];
+    protected readonly propNames: readonly ["name", "type", "scale", "weight", "colors", "size", "tintColor", "resizeMode", "animationSpec"];
+    private isFontLoaded;
+    private cancelWatch;
+    protected renderView(props: object): IDescriptor | null;
+    ngOnInit(): void;
+    protected disposeView(): void;
+}

package/build/angular/symbol-view.js

@@ -0,0 +1,147 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { ChangeDetectionStrategy, Component, Input, } from '@angular/core';
+import { DescriptorOutlet, NativeViewBase } from '@symbiote-native/angular';
+import { renderSymbolView, watchSymbolFont } from '../core/index.js';
+/** Angular twin of `expo-symbols`' `SymbolView`, projected content is the fallback without a symbol */
+let SymbolView = (() => {
+    let _classDecorators = [Component({
+            selector: 'SymbolView',
+            standalone: true,
+            imports: [DescriptorOutlet],
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            template: `@if (descriptor; as node) {
+    <symbiote-descriptor-outlet [node]="node" />
+  } @else {
+    <ng-content />
+  }`,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = NativeViewBase;
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _scale_decorators;
+    let _scale_initializers = [];
+    let _scale_extraInitializers = [];
+    let _weight_decorators;
+    let _weight_initializers = [];
+    let _weight_extraInitializers = [];
+    let _colors_decorators;
+    let _colors_initializers = [];
+    let _colors_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _tintColor_decorators;
+    let _tintColor_initializers = [];
+    let _tintColor_extraInitializers = [];
+    let _resizeMode_decorators;
+    let _resizeMode_initializers = [];
+    let _resizeMode_extraInitializers = [];
+    let _animationSpec_decorators;
+    let _animationSpec_initializers = [];
+    let _animationSpec_extraInitializers = [];
+    var SymbolView = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _name_decorators = [Input({ required: true })];
+            _type_decorators = [Input()];
+            _scale_decorators = [Input()];
+            _weight_decorators = [Input()];
+            _colors_decorators = [Input()];
+            _size_decorators = [Input()];
+            _tintColor_decorators = [Input()];
+            _resizeMode_decorators = [Input()];
+            _animationSpec_decorators = [Input()];
+            __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+            __esDecorate(null, null, _scale_decorators, { kind: "field", name: "scale", static: false, private: false, access: { has: obj => "scale" in obj, get: obj => obj.scale, set: (obj, value) => { obj.scale = value; } }, metadata: _metadata }, _scale_initializers, _scale_extraInitializers);
+            __esDecorate(null, null, _weight_decorators, { kind: "field", name: "weight", static: false, private: false, access: { has: obj => "weight" in obj, get: obj => obj.weight, set: (obj, value) => { obj.weight = value; } }, metadata: _metadata }, _weight_initializers, _weight_extraInitializers);
+            __esDecorate(null, null, _colors_decorators, { kind: "field", name: "colors", static: false, private: false, access: { has: obj => "colors" in obj, get: obj => obj.colors, set: (obj, value) => { obj.colors = value; } }, metadata: _metadata }, _colors_initializers, _colors_extraInitializers);
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _tintColor_decorators, { kind: "field", name: "tintColor", static: false, private: false, access: { has: obj => "tintColor" in obj, get: obj => obj.tintColor, set: (obj, value) => { obj.tintColor = value; } }, metadata: _metadata }, _tintColor_initializers, _tintColor_extraInitializers);
+            __esDecorate(null, null, _resizeMode_decorators, { kind: "field", name: "resizeMode", static: false, private: false, access: { has: obj => "resizeMode" in obj, get: obj => obj.resizeMode, set: (obj, value) => { obj.resizeMode = value; } }, metadata: _metadata }, _resizeMode_initializers, _resizeMode_extraInitializers);
+            __esDecorate(null, null, _animationSpec_decorators, { kind: "field", name: "animationSpec", static: false, private: false, access: { has: obj => "animationSpec" in obj, get: obj => obj.animationSpec, set: (obj, value) => { obj.animationSpec = value; } }, metadata: _metadata }, _animationSpec_initializers, _animationSpec_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            SymbolView = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        name = __runInitializers(this, _name_initializers, void 0);
+        type = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _type_initializers, void 0));
+        scale = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _scale_initializers, void 0));
+        weight = (__runInitializers(this, _scale_extraInitializers), __runInitializers(this, _weight_initializers, void 0));
+        colors = (__runInitializers(this, _weight_extraInitializers), __runInitializers(this, _colors_initializers, void 0));
+        size = (__runInitializers(this, _colors_extraInitializers), __runInitializers(this, _size_initializers, void 0));
+        tintColor = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _tintColor_initializers, void 0));
+        resizeMode = (__runInitializers(this, _tintColor_extraInitializers), __runInitializers(this, _resizeMode_initializers, void 0));
+        animationSpec = (__runInitializers(this, _resizeMode_extraInitializers), __runInitializers(this, _animationSpec_initializers, void 0));
+        propNames = (__runInitializers(this, _animationSpec_extraInitializers), [
+            'name',
+            'type',
+            'scale',
+            'weight',
+            'colors',
+            'size',
+            'tintColor',
+            'resizeMode',
+            'animationSpec',
+        ]);
+        isFontLoaded = false;
+        cancelWatch = () => { };
+        renderView(props) {
+            return renderSymbolView(props, this.isFontLoaded);
+        }
+        // Шрифт грузится один раз при создании, как в upstream
+        ngOnInit() {
+            this.cancelWatch = watchSymbolFont(Object.fromEntries(this.propNames.map(propName => [propName, Reflect.get(this, propName)])), isLoaded => {
+                this.isFontLoaded = isLoaded;
+                this.changeDetector.markForCheck();
+            });
+        }
+        disposeView() {
+            this.cancelWatch();
+        }
+    };
+    return SymbolView = _classThis;
+})();
+export { SymbolView };

package/build/core/android/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Regenerate this file using a request captured from https://fonts.google.com/icons and this script:
+ * https://gist.github.com/aleqsio/63a2f378286c727780ef6056d66d8e43
+ */
+import symbols from './symbols.json';
+export type IAndroidSymbol = keyof typeof symbols;
+export type IAndroidSymbolWeight = {
+    name: string;
+    font: number;
+};
+export declare function androidSymbolToString(symbol: IAndroidSymbol | null): string | null;

package/build/core/android/index.js

@@ -0,0 +1,10 @@
+/**
+ * Regenerate this file using a request captured from https://fonts.google.com/icons and this script:
+ * https://gist.github.com/aleqsio/63a2f378286c727780ef6056d66d8e43
+ */
+import symbols from './symbols.json';
+export function androidSymbolToString(symbol) {
+    if (!symbol)
+        return null;
+    return String.fromCharCode(symbols[symbol]);
+}