@loomlyne/ui-system-react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Koussay Zayani
+
+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

@@ -1,3 +1,19 @@
-# Temporary Holding Version
+# @loomlyne/ui-system-react
 
-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.
+React components for [UI System](https://github.com/Loomlyne/ui-system): `Root` (theme provider), `Logo`, primitives, frontend navs and backend app shells, all themed by one `ui.config.json`.
+
+```sh
+npm i @loomlyne/ui-system-react @loomlyne/ui-system-core
+```
+
+```tsx
+import '@loomlyne/ui-system-react/ui.css';
+import { Root, Button } from '@loomlyne/ui-system-react';
+import config from './ui.config.json';
+
+export default function App() {
+  return <Root config={config}><Button>Save</Button></Root>;
+}
+```
+
+`@loomlyne/ui-system-react/bundle` is a browser build exposing `window.UIS` (React from `window.React`). Needs React 18 or later. ESM only. Playground: https://loomlyne.github.io/ui-system/ · MIT

package/dist/Avatar.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { AvatarStyle } from '@loomlyne/ui-system-core';
+export declare const AVATAR_STYLES: readonly ["notionists-neutral", "lorelei-neutral", "thumbs", "glass", "shapes", "initials"];
+/** SVG markup for a seed in a DiceBear style (memoized). */
+export declare function avatarSvg(seed: string, style?: Exclude<AvatarStyle, 'initials'>): string;
+export interface AvatarProps {
+    name?: string;
+    initials?: string;
+    /** A real photo. When absent the DiceBear style from the theme is drawn. */
+    src?: string;
+    /** Override the theme's avatar style for this avatar. */
+    avatarStyle?: AvatarStyle;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function Avatar({ name, initials, src, avatarStyle, size, className, style }: AvatarProps): React.JSX.Element;
+export declare function AvatarGroup({ people, size }: {
+    people: AvatarProps[];
+    size?: AvatarProps['size'];
+}): React.JSX.Element;

package/dist/Icon.d.ts

@@ -0,0 +1,448 @@
+import * as React from 'react';
+/** One Hugeicons node: [tag, attributes]. */
+export type IconNode = readonly [string, Readonly<Record<string, string | number>>];
+/**
+ * Every icon comes from Hugeicons (https://hugeicons.com, free stroke-rounded set, MIT,
+ * package @hugeicons/core-free-icons). Names stay short and stable; the Hugeicons glyph
+ * behind each name may change without breaking callers. Never draw a custom icon here:
+ * pick the closest Hugeicons glyph and add a name.
+ */
+declare const SOURCE: {
+    readonly menu: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly x: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly search: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly bell: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly home: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly grid: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly chart: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly activity: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly trend: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly users: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly user: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly settings: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly target: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly sliders: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly bag: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly cart: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly calendar: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly inbox: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly file: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly folder: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly plus: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly check: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'chevron-down': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'chevron-up': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'chevron-right': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'chevron-left': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'chevrons-updown': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'arrow-right': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'arrow-up-right': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly clock: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly pin: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly phone: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly mail: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly message: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly logout: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly command: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly sun: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly moon: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly sparkle: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly layers: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly box: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly card: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly help: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly filter: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly more: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly star: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly heart: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly globe: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly lock: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly download: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly upload: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly copy: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly edit: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly trash: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly eye: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'eye-off': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly link: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly bolt: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly tag: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly truck: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly image: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly play: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly sidebar: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly currency: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly briefcase: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly building: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly receipt: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly wallet: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly map: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly car: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly shield: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly share: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly refresh: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly ruler: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly bookmark: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly camera: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly store: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly list: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly route: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'check-circle': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'alert-circle': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly info: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly warning: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly 'x-circle': [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+    readonly health: [string, {
+        [key: string]: string | number;
+    }][] | readonly (readonly [string, {
+        readonly [key: string]: string | number;
+    }])[];
+};
+export type IconName = keyof typeof SOURCE;
+export declare const ICONS: Record<IconName, IconNode[]>;
+/** Hugeicons stroke width. */
+export declare const ICON_STROKE = 1.5;
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'name'> {
+    name: IconName | string;
+    size?: number;
+    strokeWidth?: number;
+    label?: string;
+}
+export declare function Icon({ name, size, strokeWidth, label, className, style, ...rest }: IconProps): React.JSX.Element;
+export {};

package/dist/Logo.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { LogoMark as MarkKind, LogoVariant } from '@loomlyne/ui-system-core';
+export interface LogoMarkProps {
+    mark?: MarkKind;
+    initials?: string;
+    tone?: 'current' | 'primary';
+    src?: string;
+    svg?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Generated brand marks. They follow the system: the monogram's corners track
+ * the roundness setting, and color follows either the text color or primary.
+ */
+export declare function LogoMark(props: LogoMarkProps): React.JSX.Element | null;
+export interface LogoProps {
+    variant?: LogoVariant;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    wordmark?: string;
+    caption?: string;
+    mark?: MarkKind;
+    initials?: string;
+    tone?: 'current' | 'primary';
+    /** Full logo image; replaces the generated lockup. */
+    src?: string;
+    markSrc?: string;
+    href?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** The brand logo in four arrangements: lockup, stacked, mark, wordmark. */
+export declare function Logo(props: LogoProps): React.JSX.Element;

package/dist/Motion.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { animate, stagger, createTimeline, onScroll, utils, eases } from 'animejs';
+/** anime.js, re-exported so projects and Claude Design (UIS.anime) use one engine. */
+export declare const anime: {
+    animate: typeof animate;
+    stagger: typeof stagger;
+    createTimeline: typeof createTimeline;
+    onScroll: typeof onScroll;
+    utils: typeof utils;
+    eases: typeof eases;
+};
+export type RevealEffect = 'fade-up' | 'fade' | 'scale-in' | 'slide-left' | 'slide-right' | 'blur-in';
+/** True when the theme allows motion and the visitor has not asked for less. */
+export declare function useMotionEnabled(): boolean;
+export interface RevealProps {
+    as?: 'div' | 'section' | 'ul' | 'span';
+    effect?: RevealEffect;
+    /** ms between children. When set, each direct child animates in turn. */
+    stagger?: number;
+    delay?: number;
+    duration?: number;
+    /** Start when scrolled into view (default) or immediately. */
+    trigger?: 'view' | 'mount';
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/** Entrance animation powered by anime.js. Follows config.motion and reduced motion. */
+export declare function Reveal({ as, effect, stagger: gap, delay, duration, trigger, className, style, children }: RevealProps): React.JSX.Element;
+/** Counts a number up when it comes into view (stats, prices, KPIs). */
+export declare function CountUp({ to, from, decimals, prefix, suffix, duration, className, style }: {
+    to: number;
+    from?: number;
+    decimals?: number;
+    prefix?: string;
+    suffix?: string;
+    duration?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}): React.JSX.Element;

package/dist/Root.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { type AvatarStyle, type BackNav, type Density, type MotionIntensity, type FloatSurface, type FontPresetId, type FrontNav, type LogoMark, type LogoVariant, type KindId, type LegacyPresetId, type Mode, type Placement, type PresetId, type ShadowDepth, type UIConfigInput } from '@loomlyne/ui-system-core';
+/**
+ * Flat props mirror ui.config.json so the same component works from code
+ * (pass `config`) and from visual tools like Claude Design (pass attributes).
+ * Flat props win over `config`.
+ */
+export interface RootProps {
+    config?: UIConfigInput;
+    /** Preset, a way of designing ('ledger' round, 'atelier' sharp). Other props still win over it. */
+    preset?: PresetId | LegacyPresetId;
+    /** What you build (shop, app, website, booking, portfolio). Sets no values. */
+    kind?: KindId;
+    primary?: string;
+    accent?: string;
+    neutral?: string;
+    mode?: Mode;
+    roundness?: number;
+    pill?: boolean;
+    fontPreset?: FontPresetId;
+    displayFont?: string;
+    bodyFont?: string;
+    buttonCase?: 'normal' | 'upper';
+    density?: Density;
+    surface?: FloatSurface;
+    shadow?: ShadowDepth;
+    border?: 'hairline' | 'none';
+    projectName?: string;
+    wordmark?: string;
+    caption?: string;
+    initials?: string;
+    logoMark?: LogoMark;
+    logoVariant?: LogoVariant;
+    logoPlacement?: Placement;
+    logoSrc?: string;
+    markSrc?: string;
+    markSvg?: string;
+    wordmarkCase?: 'normal' | 'upper';
+    wordmarkFont?: 'display' | 'body';
+    markTone?: 'current' | 'primary';
+    avatarStyle?: AvatarStyle;
+    motion?: boolean;
+    motionIntensity?: MotionIntensity;
+    frontNav?: FrontNav;
+    backNav?: BackNav;
+    /** Inject the Google Fonts stylesheet for the active fonts. Default true. */
+    loadFonts?: boolean;
+    /** Paint the page background and text color. Default true. */
+    page?: boolean;
+    /**
+     * Write the theme's CSS variables on this element. Default true. Set false
+     * when a stylesheet already provides them (theme.css, or the Claude Design
+     * tokens.css bridge) and Root should only supply brand context and fonts.
+     */
+    vars?: boolean;
+    /** Stretch to the parent's height. */
+    fill?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export declare function configFromProps(p: RootProps): UIConfigInput;
+/** Theme provider. Computes every variable from the config and scopes it to this subtree. */
+export declare function Root(props: RootProps): React.JSX.Element;

package/dist/bundle.d.ts

@@ -0,0 +1,2 @@
+export * from './index';
+export { buildTheme, resolveConfig, DEFAULT_CONFIG, RADIUS_PRESETS, FONT_PRESETS, PRESETS, PRESET_ALIASES, presetId, KINDS, contrastReport, toCSS, toTailwind, toDesignTokens, allPresetFontsUrl, googleFontsUrl, contrast, scaleFrom, } from '@loomlyne/ui-system-core';

package/dist/context.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { resolveConfig, type BrandConfig, type Placement, type Theme } from '@loomlyne/ui-system-core';
+export interface UISContextValue {
+    theme: Theme;
+    brand: BrandConfig;
+}
+export declare const UISContext: React.Context<UISContextValue>;
+export declare const useUIS: () => UISContextValue;
+export declare function cx(...parts: Array<string | false | null | undefined>): string;
+/** Treat '', 'default' and undefined as "inherit from the theme". */
+export declare function pick<T>(value: T | '' | 'default' | undefined | null, fallbackValue: T): T;
+export declare function usePlacement(p?: Placement | 'default' | ''): Placement;
+export { resolveConfig };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Root, configFromProps, type RootProps } from './Root';
+export { UISContext, useUIS, cx } from './context';
+export { Icon, ICONS, ICON_STROKE, type IconName, type IconNode, type IconProps } from './Icon';
+export { Logo, LogoMark, type LogoProps, type LogoMarkProps } from './Logo';
+export * from './primitives';
+export * from './nav/shared';
+export * from './nav/front';
+export * from './nav/back';
+export { Reveal, CountUp, anime, useMotionEnabled, type RevealProps, type RevealEffect } from './Motion';