@xleddyl/443-components-native 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,455 @@
-# Temporary Holding Version
+# @xleddyl/443-components-native
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Bare-bones, theme-driven React Native components for Expo apps, built on Unistyles 3. Every color,
+radius, size and spacing comes from a typed theme, so one component set can look like Textreme
+(clear blue, tall touch targets) or Suedtirol Fishing (deep green, round corners) without forks.
+An opt-in native layer renders SwiftUI, Jetpack Compose and Liquid Glass controls with the same
+props (see [NATIVE.md](./NATIVE.md)).
+
+Built and checked against Expo SDK 57, React Native 0.86, React 19.2 and Unistyles 3.5.
+
+## Install
+
+```sh
+pnpm add @xleddyl/443-components-native
+npx expo install react-native-unistyles react-native-nitro-modules react-native-reanimated \
+   react-native-worklets react-native-gesture-handler react-native-safe-area-context
+```
+
+| Peer                                                   | Required | Used by                                            |
+| ------------------------------------------------------ | -------- | -------------------------------------------------- |
+| `react`, `react-native`                                | yes      | everything                                         |
+| `react-native-unistyles`, `react-native-nitro-modules` | yes      | styling and theming                                |
+| `react-native-reanimated`, `react-native-worklets`     | yes      | animations, sheets, sliders                        |
+| `react-native-gesture-handler`                         | yes      | sheets, sliders, swipe gestures                    |
+| `react-native-safe-area-context`                       | yes      | `Screen`, overlays, tab bars                       |
+| `react-native-svg`                                     | optional | `@xleddyl/443-components-native/icons` (Heroicons svg glyph set)      |
+| `expo-haptics`                                         | optional | only through your `haptics` adapter                |
+| `@expo/ui`, `expo-glass-effect`, `expo-router`, `expo` | optional | `@xleddyl/443-components-native/native` and `@xleddyl/443-components-native/native-tabs` |
+
+The root entry never imports an optional peer. Apps that skip them never load them.
+
+## App setup
+
+### Babel
+
+The Unistyles babel plugin must process this package, because it ships TypeScript source and
+`StyleSheet.create` calls that need dependency tracking.
+
+```js
+module.exports = function (api) {
+   api.cache(true)
+   return {
+      presets: ['babel-preset-expo'],
+      plugins: [
+         [
+            'react-native-unistyles/plugin',
+            { root: 'src', autoProcessPaths: ['/node_modules/@xleddyl/443-components-native/'] },
+         ],
+      ],
+   }
+}
+```
+
+In a pnpm workspace that links the package from source, also add its source folder (the
+playground uses `'/packages/native/src/'`).
+
+### Metro
+
+Keep `inlineRequires` on (Expo default in recent SDKs). The barrel relies on it so that unused
+components cost nothing at startup and so the native layer can fall back when a native module is
+missing.
+
+```js
+const { getDefaultConfig } = require('expo/metro-config')
+const config = getDefaultConfig(__dirname)
+config.transformer.getTransformOptions = async () => ({
+   transform: { experimentalImportSupport: true, inlineRequires: true },
+})
+module.exports = config
+```
+
+### Unistyles configuration file
+
+Create `src/unistyles.ts` and import it first from `index.ts`, before `expo-router/entry`. Import
+only from `@xleddyl/443-components-native/theme` here: the root barrel evaluates every `StyleSheet.create`, and
+Unistyles throws on native when that happens before `StyleSheet.configure`.
+
+```ts
+import { configureUi } from '@xleddyl/443-components-native/theme'
+import type { defaultBreakpoints } from '@xleddyl/443-components-native/theme'
+import { svgIconRenderer } from '@xleddyl/443-components-native/icons'
+import * as Haptics from 'expo-haptics'
+import { themes } from './themes'
+
+configureUi({
+   themes,
+   initialTheme: 'light',
+   icons: svgIconRenderer,
+   haptics: (kind) => {
+      if (kind === 'selection') {
+         Haptics.selectionAsync()
+         return
+      }
+      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+   },
+})
+
+type AppThemes = typeof themes
+type AppBreakpoints = typeof defaultBreakpoints
+
+declare module 'react-native-unistyles' {
+   export interface UnistylesThemes extends AppThemes {}
+   export interface UnistylesBreakpoints extends AppBreakpoints {}
+}
+```
+
+```ts
+import './src/unistyles'
+import 'expo-router/entry'
+```
+
+`configureUi` also accepts `adaptiveThemes: true` (follow the system light and dark scheme),
+`breakpoints`, `text` (`allowFontScaling`, `maxFontSizeMultiplier`) and `cssVars` (off by default:
+with CSS variables on, Unistyles web skips recomputing styles on theme change and numeric tokens
+break).
+
+### Root layout
+
+Mount `UiProvider` once. It hosts portals (sheets, dialogs, popovers, menus), the imperative
+`dialog` API and toasts.
+
+```tsx
+export default function RootLayout() {
+   return (
+      <GestureHandlerRootView style={{ flex: 1 }}>
+         <UiProvider>
+            <Stack screenOptions={{ headerShown: false }} />
+         </UiProvider>
+      </GestureHandlerRootView>
+   )
+}
+```
+
+## Theme
+
+`BaseTheme` is the contract every component reads:
+
+- `colors`: surfaces (`background`, `surface`, `surfaceRaised`, `surfaceSunken`), borders, text
+  (`text`, `textMuted`, `textDimmed`), and for each tone (`primary`, `secondary`, `neutral`,
+  `danger`, `success`, `warning`, `info`) a solid, a `*Soft` and an `on*` color, plus `overlay`,
+  `focus`, `shadow`. Each tone also takes an optional `*Text` color (`primaryText`, ...) for text
+  and icons drawn in that tone on a surface (soft, outline and ghost buttons, badges, banners,
+  links, active tabs). It defaults to the solid color (`text` for `secondary` and `neutral`), so a
+  bright brand color such as a yellow primary can stay the fill while text stays readable.
+- `radius` (`none` to `full`), `space(n)` (n \* 8), `typography` (`fonts`, `variants`: display,
+  title, heading, body, label, caption), `motion` (durations, springs, press scale, `pressedOpacity`, `disabledOpacity`),
+  `sizes` (`control` and `icon` per `sm` / `md` / `lg`, `minTouchTarget`, `borderWidth`).
+- Typography: `fonts` maps weights to font families for the text face. A variant can set its own
+  `fontFamily` (for example a display face on `display`, `title` and `heading`), and every text in
+  that variant uses it, including button labels (variant `label`). A weight override on such a
+  variant keeps its family. Font family and weight are always set together, so switching to a
+  theme without custom fonts resets to the system font.
+- `components`: optional per-component tokens (`button.radius`, `textField.height.md`,
+  `sheet.radius`, `tabBar.background`, ...). Each component falls back to base tokens when its
+  entry is missing.
+
+`createTheme(overrides, base = lightTheme)` deep merges a partial theme. A type parameter adds
+app-specific keys.
+
+```ts
+import { createTheme, darkTheme, lightTheme } from '@xleddyl/443-components-native/theme'
+
+type Brand = { brand: { name: string } }
+
+export const textreme = createTheme<Brand>(
+   {
+      brand: { name: 'Textreme' },
+      colors: {
+         background: '#F4F8FC',
+         text: '#0F2A4A',
+         primary: '#1D6FE0',
+         primarySoft: '#E3EEFC',
+         onPrimary: '#FFFFFF',
+      },
+      radius: { sm: 10, md: 16, lg: 24 },
+      sizes: { control: { sm: 40, md: 56, lg: 64 }, icon: { sm: 18, md: 22, lg: 26 } },
+      typography: {
+         variants: { body: { fontSize: 18, lineHeight: 24, letterSpacing: 0, weight: 'regular' } },
+      },
+   },
+   lightTheme
+)
+
+export const suedtirol = createTheme<Brand>(
+   {
+      brand: { name: 'Suedtirol Fishing' },
+      colors: {
+         background: '#f5f8f3',
+         primary: '#0d4631',
+         primarySoft: '#dcecdf',
+         secondary: '#bde68f',
+         onSecondary: '#0d4631',
+      },
+      radius: { xs: 8, sm: 12, md: 18, lg: 24, xl: 32 },
+      components: { button: { radius: 9999 }, textField: { radius: 16 } },
+   },
+   lightTheme
+)
+
+export const suedtirolDark = createTheme<Brand>({ brand: { name: 'Suedtirol dark' } }, darkTheme)
+
+export const themes = { textreme, suedtirol, suedtirolDark }
+```
+
+Switch at runtime with `UnistylesRuntime.setTheme('suedtirol')`. Read the theme in components with
+`useUnistyles()` or in `StyleSheet.create((theme) => ...)`.
+
+## Presets
+
+`@xleddyl/443-components-native/presets` ships three ready-made looks, each with a light and a dark theme built with
+`createTheme`. They are pure theme data: every component works the same with them.
+
+| Preset      | Label    | Look                                                                    | Fonts                                                     |
+| ----------- | -------- | ----------------------------------------------------------------------- | --------------------------------------------------------- |
+| `default`   | Default  | Textreme Access Control: clear blue accent, cool surfaces, tall targets | system font                                               |
+| `suedtirol` | Südtirol | deep green and lime, round compact controls                             | Funnel Sans, Funnel Display on display, title and heading |
+| `spotfish`  | Spotfish | signal yellow on white or graphite, `primaryText` keeps text readable   | Funnel Sans, Unbounded on display, title and heading      |
+
+The brand colors match the presets of `@xleddyl/443-components-vue`, so web and mobile stay consistent.
+
+```ts
+import { configureUi } from '@xleddyl/443-components-native/theme'
+import { presetInitialTheme, presetThemes } from '@xleddyl/443-components-native/presets'
+
+const themes = presetThemes()
+configureUi({ themes, initialTheme: presetInitialTheme('suedtirol', 'system') })
+
+type AppThemes = typeof themes
+declare module 'react-native-unistyles' {
+   export interface UnistylesThemes extends AppThemes {}
+}
+```
+
+Load the fonts in the root layout (see below), then switch anywhere with `usePreset()`:
+
+```tsx
+const { preset, mode, setPreset, setMode } = usePreset()
+```
+
+- `presets.default.light`, `presets.suedtirol.dark`, ...: the `PresetTheme` objects (a `BaseTheme`
+  plus `preset: { name, label, description, scheme }`). Extend one with
+  `createTheme(overrides, presets.suedtirol.light)`.
+- `presetThemes()` returns the Unistyles themes map: `default-light`, `default-dark`,
+  `suedtirol-light`, `suedtirol-dark`, `spotfish-light`, `spotfish-dark`.
+- `presetInitialTheme(preset, mode)` returns the theme name to start with. `mode` is `light`,
+  `dark` or `system`.
+- `usePreset()` returns `{ preset, scheme, mode, label, description, setPreset, setMode }`;
+  `useThemeMode()` returns `{ mode, scheme, setMode }`. `setPreset` and `setThemeMode` also work
+  outside React.
+- Mode `system` follows the device scheme and keeps following it while the app runs. On iOS and
+  Android, `light` and `dark` also set `Appearance.setColorScheme`, so native tabs, Liquid Glass,
+  `@expo/ui` controls, alerts and the keyboard match the theme (`system` resets it to
+  `unspecified`). Do not combine presets with `adaptiveThemes`, which needs themes named `light`
+  and `dark`.
+
+### Preset fonts
+
+The OFL font files ship in `assets/fonts` (each folder has its `OFL.txt`), and
+`@xleddyl/443-components-native/fonts` exports `presetFonts` (also `suedtirolFonts`, `spotfishFonts`), keyed by the
+family names the presets use. Load them at runtime with `expo-font`:
+
+```tsx
+import { presetFonts } from '@xleddyl/443-components-native/fonts'
+import { useFonts } from 'expo-font'
+
+const [loaded, error] = useFonts(presetFonts)
+if (!loaded && !error) return null
+```
+
+Or embed them at build time with the `expo-font` config plugin (the file names match the
+PostScript names, so the same family names work on iOS and Android):
+
+```json
+[
+   "expo-font",
+   {
+      "fonts": [
+         "node_modules/@xleddyl/443-components-native/assets/fonts/funnel-sans/FunnelSans-Regular.ttf",
+         "node_modules/@xleddyl/443-components-native/assets/fonts/funnel-sans/FunnelSans-Medium.ttf",
+         "node_modules/@xleddyl/443-components-native/assets/fonts/funnel-sans/FunnelSans-SemiBold.ttf",
+         "node_modules/@xleddyl/443-components-native/assets/fonts/funnel-sans/FunnelSans-Bold.ttf",
+         "node_modules/@xleddyl/443-components-native/assets/fonts/funnel-display/FunnelDisplay-Bold.ttf",
+         "node_modules/@xleddyl/443-components-native/assets/fonts/unbounded/Unbounded-SemiBold.ttf"
+      ]
+   }
+]
+```
+
+Only `suedtirol` and `spotfish` need fonts. Until they are loaded (or if they never are), text
+falls back to the platform font (on web the system font stack is appended to every custom
+family), and switching to `default` always resets to the system font.
+
+## Icons
+
+Components take `IconSource`: a registry name (`'close'`, `'home'`, `'fingerprint'`, ...) or a
+React element. Names are rendered by the configured icon renderer and fall back to built-in glyphs
+drawn with plain Views.
+
+- `@xleddyl/443-components-native/icons` (needs `react-native-svg`) ships `svgIconRenderer`, the Heroicons outline
+  set (MIT) for every `BuiltinIconName`: arrows, chevrons, status icons, `home`, `user`, `users`,
+  `settings`, `bell`, `backspace`, `fingerprint`, `calendar`, `clock`, `trash`, `edit`, `share`,
+  `more`, `filter`, `star`, `heart`, `lock`, `mail`, `image`, `camera`, `qr-code`, `map-pin` and
+  more.
+- Without a renderer, the View glyphs cover what the base components use (close, check, chevrons,
+  arrows, status icons, backspace, fingerprint, calendar, clock, user, menu, more, grid). Other
+  names draw a neutral placeholder and warn once in development.
+
+Add app icons by augmenting `IconRegistry` and passing paths or your own renderer:
+
+```ts
+import { composeIconRenderers } from '@xleddyl/443-components-native/theme'
+import { createSvgIconRenderer } from '@xleddyl/443-components-native/icons'
+
+declare module '@xleddyl/443-components-native' {
+   interface IconRegistry {
+      fish: true
+   }
+}
+
+configureUi({
+   themes,
+   initialTheme: 'suedtirol-light',
+   icons: composeIconRenderers(
+      myBrandIcons,
+      createSvgIconRenderer({ fish: ['M3 12c3-4 9-6 14-2l4-3v10l-4-3c-5 4-11 2-14-2Z'] })
+   ),
+})
+```
+
+`configureIcons(renderer)` swaps the renderer at runtime. A renderer returns `undefined` for names
+it does not know, so the next one (or the View glyphs) takes over.
+
+## Components
+
+Import from `@xleddyl/443-components-native` or from a group subpath (`@xleddyl/443-components-native/forms`, ...).
+
+- **core**: `Text`, `Stack`, `Touchable`, `Icon`, `Button`, `IconButton`, `TextField`, `Screen`,
+  `Spinner`
+- **forms**: `Field`, `Checkbox`, `CheckboxGroup`, `Radio`, `RadioGroup`, `Switch`,
+  `SegmentedControl`, `Slider`, `Stepper`, `PinInput`, `PinPad`, `ChipInput` (`TokenInput`),
+  `DateField`, `Calendar`, `MonthPicker`
+- **display**: `Avatar`, `AvatarGroup`, `Badge`, `Banner`, `Card`, `Chip`, `Tag`, `Divider`,
+  `EmptyState`, `KeyValue`, `DescriptionList`, `List`, `ListItem`, `ProgressBar`, `ProgressRing`,
+  `Skeleton`, `Stat`
+- **overlays**: `UiProvider`, `Portal`, `PortalHost`, `Overlay`, `Backdrop`, `Sheet`, `Dialog`,
+  `ActionSheet`, `Menu`, `MenuItem`, `Popover`, `Select`, `Toast`, `LoadingOverlay`, and the
+  imperative hooks below
+- **navigation**: `Header`, `BackButton`, `Tabs`, `TabBar` (for expo-router `Tabs`),
+  `useTabBarHeight`, `useScrollOffset`
+- **hooks and utils**: `useControllableState`, `usePressFeedback`, `useSafeSpacing`,
+  `useReducedMotion`, `hitSlopFor`, `toneColors`, `buttonColors`, `textToneColor`
+
+Shared vocabulary: `size` (`sm` / `md` / `lg`), `tone`, `variant` (`solid`, `soft`, `outline`,
+`ghost`), `value` / `defaultValue` / `onValueChange`, `open` / `defaultOpen` / `onOpenChange`,
+`disabled`, `invalid` or `error` (string shows a message), `style` for the root and `styles` for
+per-part overrides, slots (`leftElement`, `rightElement`, `header`, `footer`, `emptyState`).
+Inputs placed inside `Field` read its label, error, disabled and required state.
+
+### Overlays and React context
+
+By default sheets, dialogs and popovers render into the root `PortalHost`, above everything, so
+providers declared inside a screen are not visible to their content. Pass `portal={false}` to
+`Sheet`, `Dialog`, `ActionSheet`, `Popover`, `Menu` or `Overlay` to render in place through a
+React Native `Modal` (transparent, full screen): screen context is kept, at the cost of the
+limits listed below.
+
+### Imperative overlays
+
+`UiProvider` mounts a host for every imperative API, so each one works from any component and,
+except `useLoadingState`, from plain functions too (stores, API clients, navigation guards). The
+names match the `@xleddyl/443-components-vue` composables.
+
+| Hook                         | Plain object                      | Returns                                                                                  |
+| ---------------------------- | --------------------------------- | ---------------------------------------------------------------------------------------- |
+| `useToast()`                 | `toast`                           | `show`, `success`, `error`, `warning`, `info`, `loading`, `update`, `dismiss`, `promise` |
+| `useConfirm()`, `useAlert()` | `dialog.confirm`, `dialog.alert`  | `Promise<boolean>`, `Promise<void>`                                                      |
+| `usePrompt()`                | `dialog.prompt`                   | `Promise<string \| null>` (text field, optional `validate`, `secure`)                    |
+| `useSheet()`, `useModal()`   | `overlay.sheet`, `overlay.dialog` | `open(Component, props, options)`: `Promise<Result \| null>`                             |
+| `useActionSheet()`           | `actionSheet.show`                | `Promise<key \| null>`                                                                   |
+| `useLoading()`               | `loading`                         | `show(message)` (returns a release function), `hide`, `wrap`, `active`                   |
+| `useLoadingState()`          |                                   | `{ loading, run }`, scoped to one component (buttons, forms)                             |
+
+```tsx
+const PickSpecies = ({ overlay, current }: OverlayComponentProps<string> & { current?: string }) => (
+   <Button onPress={() => overlay.resolve('Grayling')}>Grayling</Button>
+)
+
+const sheet = useSheet()
+const species = await sheet.open(PickSpecies, { current }, { title: 'Species' })
+const prompt = usePrompt()
+const name = await prompt({ title: 'Rename', defaultValue: 'Upper Adige' })
+await loading.wrap(api.sync(), 'Syncing')
+const save = useLoadingState()
+<Button loading={save.loading} onPress={() => save.run(api.save)}>Save</Button>
+```
+
+- A component opened with `sheet.open` or `modal.open` gets an `overlay` prop (`resolve(result)`,
+  `close()`); nested components read the same controls with `useOverlayContext<Result>()`.
+  Dismissing (swipe, backdrop, back button, `close`) resolves `null`. Overlays stack: a sheet can
+  open another sheet and await it. `options` takes `title`, `description`, `dismissible`,
+  `showClose`, `snapPoints`, `scrollable`.
+- `toast.promise(task, { loading, success, error })` shows a loading toast and turns it into a
+  success or error toast; `success` and `error` may be functions of the result or the error.
+- Global loading is ref counted: overlapping `wrap` calls keep one `LoadingOverlay` up until the
+  last finishes, showing the newest message.
+- Toasts stack like a deck (the newest in front, older ones peeking behind). Tap one to expand
+  the stack; timers pause while it is expanded or being dragged. Each toast shows a tone icon in
+  a soft circle, title, description, optional action and close button, and a timer bar
+  (`showTimer` on `ToastHost` / `UiProvider toast`, or the `toast.timer` component token).
+- Turn hosts off with `UiProvider` props `toast={false}`, `dialogs={false}`, `overlays={false}`,
+  `loading={false}`.
+
+## Native layer
+
+`@xleddyl/443-components-native/native` wraps `@expo/ui` (SwiftUI, Jetpack Compose) and `expo-glass-effect`:
+`NativeSwitch`, `NativeSlider`, `NativePicker`, `NativeDatePicker`, `NativeTextField`,
+`NativeButton`, `NativeForm` / `NativeSection`, `NativeContextMenu`, `NativeBottomSheet`,
+`NativeProgress`, `GlassSurface`, `GlassGroup`, `useLiquidGlass`, `useNativeColors` and
+`fromMaterialColors` (Material You colors into a theme). `@xleddyl/443-components-native/native-tabs` themes
+expo-router `NativeTabs`. Every wrapper falls back to the base component on web or without the
+native module. Details, platform mapping and limits: [NATIVE.md](./NATIVE.md).
+
+## React Compiler
+
+The package is written for the React Compiler (no manual `useMemo`, `useCallback` or `memo`), and
+every component compiles. One finding shaped the styling rules: the Unistyles babel plugin
+rewrites `stylesheet.useVariants()` in a way the compiler cannot lower ("Could not find binding
+for declaration"), and the whole component silently stays uncompiled. Components therefore never
+use Unistyles `variants`; they pass variant values as arguments to dynamic style functions. Apply
+the same rule in app code that runs under the compiler.
+
+Three more Unistyles rules surfaced on device, and the components follow them:
+
+- A dynamic style function must return an object literal. A function whose body is a ternary
+  between two objects gets no theme dependencies from the babel plugin, so its views keep the old
+  colors after `UnistylesRuntime.setTheme`. Spread the ternary into one literal instead.
+- Content rendered later into a portal (dialog cards, action sheet rows, loading cards) lives in
+  its own small component. The compiler caches JSX built while the overlay is closed, and a view
+  first mounted with styles cached under the previous theme stays stale.
+- `contentContainerStyle` is not updated on theme change. Put backgrounds on the scroll view
+  `style`.
+
+## Known limits
+
+- Overlays rendered with `portal={false}` sit in a native `Modal`: toasts and portal overlays
+  opened while it is visible render underneath it on iOS and Android. Use one mode per flow.
+- Focus is trapped inside `Sheet`, `Dialog` and other modal overlays on web; native relies on
+  `accessibilityViewIsModal` (iOS) and hidden siblings (Android), which is what the platforms
+  offer.
+- The View glyphs are approximations. Ship `@xleddyl/443-components-native/icons` or your own renderer in production.
+- Native wrappers follow platform styling: only tint, color scheme and a few colors reach them.
+- `NativeDatePicker` `time` / `datetime` fall back to a stepper or a browser input: there is no
+  base-layer time field yet.
+- Native rendering (SwiftUI, Compose, Liquid Glass) is not covered by the typecheck or by
+  `expo export`. Check it on a simulator or device build.

package/assets/fonts/funnel-display/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Funnel Project Authors (https://github.com/Dicotype/Funnel)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/assets/fonts/funnel-sans/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Funnel Project Authors (https://github.com/Dicotype/Funnel)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/assets/fonts/index.d.ts

@@ -0,0 +1,16 @@
+type FontAsset = number
+
+export declare const funnelSansFonts: {
+   'FunnelSans-Regular': FontAsset
+   'FunnelSans-Medium': FontAsset
+   'FunnelSans-SemiBold': FontAsset
+   'FunnelSans-Bold': FontAsset
+}
+
+export declare const suedtirolFonts: typeof funnelSansFonts & { 'FunnelDisplay-Bold': FontAsset }
+
+export declare const spotfishFonts: typeof funnelSansFonts & { 'Unbounded-SemiBold': FontAsset }
+
+export declare const presetFonts: typeof suedtirolFonts & typeof spotfishFonts
+
+export type PresetFontFamily = keyof typeof presetFonts