fluent-styles 1.54.0 → 1.55.0

package/lib/typescript/switch/interface.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import type { ColorValue, StyleProp, ViewStyle, TextStyle, ViewProps } from 'react-native';
+export type SwitchSize = 'sm' | 'md' | 'lg';
+export declare const SWITCH_SIZES: Record<SwitchSize, {
+    trackWidth: number;
+    trackHeight: number;
+    thumbSize: number;
+    fontSize: number;
+    thumbInset: number;
+}>;
+export type SwitchColors = {
+    /** Track background when ON. */
+    activeTrack: string;
+    /** Track background when OFF. */
+    inactiveTrack: string;
+    /** Track border when OFF (subtle outline). */
+    inactiveBorder: string;
+    /** Thumb (knob) background. */
+    thumb: string;
+    /** Shadow colour for the thumb. */
+    thumbShadow: string;
+    /** Label text colour when track is active. */
+    activeLabelText: string;
+    /** Label text colour when track is inactive. */
+    inactiveLabelText: string;
+    /** Loading spinner colour. */
+    loadingColor: string;
+};
+export declare const SWITCH_COLORS_DEFAULT: SwitchColors;
+export interface SwitchProps<ActiveValueT = boolean, InactiveValueT = boolean> extends Pick<ViewProps, 'testID'> {
+    /** Controlled value. */
+    value?: ActiveValueT | InactiveValueT;
+    /** Uncontrolled default. @default inactiveValue */
+    defaultValue?: ActiveValueT | InactiveValueT;
+    /** Value emitted when the switch is ON.  @default true */
+    activeValue?: ActiveValueT;
+    /** Value emitted when the switch is OFF. @default false */
+    inactiveValue?: InactiveValueT;
+    /** Called when the switch changes state. */
+    onChange?: (v: ActiveValueT | InactiveValueT) => void;
+    /** Called on every press, before state changes. */
+    onPress?: () => void;
+    /**
+     * Guard called before the state changes.
+     * Return `false` (or a Promise resolving `false`) to cancel.
+     */
+    beforeChange?: (next: ActiveValueT | InactiveValueT) => boolean | Promise<boolean>;
+    /** Size preset. @default 'md' */
+    size?: SwitchSize;
+    /**
+     * Manual pixel size override — sets track height; width and thumb scale
+     * proportionally from the `md` preset ratios.
+     */
+    customSize?: number;
+    /** Override the ON track colour. */
+    activeColor?: ColorValue;
+    /** Override the OFF track colour. */
+    inactiveColor?: ColorValue;
+    /** Content rendered inside the track when ON (string or ReactNode). */
+    activeLabel?: ReactNode;
+    /** Content rendered inside the track when OFF (string or ReactNode). */
+    inactiveLabel?: ReactNode;
+    /** Style for the track label text (when label is a string). */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Additional style applied to the outer wrapper. */
+    style?: StyleProp<ViewStyle>;
+    /** Show a spinner on the thumb and block interaction. @default false */
+    loading?: boolean;
+    /** Block interaction and dim the component. @default false */
+    disabled?: boolean;
+    /** Fine-grained colour overrides. */
+    colors?: Partial<SwitchColors>;
+}
+//# sourceMappingURL=interface.d.ts.map

package/lib/typescript/switch/interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/switch/interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAI1F,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3C,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE;IAC5C,UAAU,EAAG,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAI,MAAM,CAAA;IACnB,QAAQ,EAAK,MAAM,CAAA;IACnB,UAAU,EAAG,MAAM,CAAA;CACpB,CAIA,CAAA;AAID,MAAM,MAAM,YAAY,GAAG;IACzB,gCAAgC;IAChC,WAAW,EAAK,MAAM,CAAA;IACtB,iCAAiC;IACjC,aAAa,EAAG,MAAM,CAAA;IACtB,8CAA8C;IAC9C,cAAc,EAAE,MAAM,CAAA;IACtB,+BAA+B;IAC/B,KAAK,EAAW,MAAM,CAAA;IACtB,mCAAmC;IACnC,WAAW,EAAK,MAAM,CAAA;IACtB,8CAA8C;IAC9C,eAAe,EAAI,MAAM,CAAA;IACzB,gDAAgD;IAChD,iBAAiB,EAAE,MAAM,CAAA;IACzB,8BAA8B;IAC9B,YAAY,EAAI,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,YASnC,CAAA;AAID,MAAM,WAAW,WAAW,CAAC,YAAY,GAAG,OAAO,EAAE,cAAc,GAAG,OAAO,CAC3E,SAAQ,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC;IAIjC,wBAAwB;IACxB,KAAK,CAAC,EAAE,YAAY,GAAG,cAAc,CAAA;IACrC,mDAAmD;IACnD,YAAY,CAAC,EAAE,YAAY,GAAG,cAAc,CAAA;IAE5C,0DAA0D;IAC1D,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,cAAc,CAAA;IAI9B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,YAAY,GAAG,cAAc,KAAK,IAAI,CAAA;IACrD,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,CACb,IAAI,EAAE,YAAY,GAAG,cAAc,KAChC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;IAI/B,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,oCAAoC;IACpC,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,qCAAqC;IACrC,aAAa,CAAC,EAAE,UAAU,CAAA;IAE1B,uEAAuE;IACvE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,wEAAwE;IACxE,aAAa,CAAC,EAAE,SAAS,CAAA;IAEzB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAEjC,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAI5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAIlB,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;CAC/B"}

package/lib/typescript/tabBar/TabBar.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/// <reference types="react" />
+import { type TabBarProps, type TabValue } from './interface';
+export declare const TabBar: <T extends TabValue>(p: TabBarProps<T>) => JSX.Element;
+//# sourceMappingURL=TabBar.d.ts.map

package/lib/typescript/tabBar/TabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/tabBar/TabBar.tsx"],"names":[],"mappings":";;AAoBA,OAAO,EAKL,KAAK,WAAW,EAEhB,KAAK,QAAQ,EACd,MAAM,aAAa,CAAA;AAwdpB,eAAO,MAAM,MAAM,6CAEd,WAAW,CAAA"}

package/lib/typescript/tabBar/TabBarUsage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * TabBarUsage — exhaustive demo of every feature.
+ */
+import React from 'react';
+export default function TabBarUsage(): React.JSX.Element;
+//# sourceMappingURL=TabBarUsage.d.ts.map

package/lib/typescript/tabBar/TabBarUsage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarUsage.d.ts","sourceRoot":"","sources":["../../../src/tabBar/TabBarUsage.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAA;AA2EvC,MAAM,CAAC,OAAO,UAAU,WAAW,sBA4OlC"}

package/lib/typescript/tabBar/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @module TabBar
+ *
+ * ─── Basic (center-aligned, no indicator) ────────────────────────────────────
+ * ```tsx
+ * import { TabBar } from './tab-bar'
+ *
+ * const TABS = [
+ *   { value: 'home',    label: 'Home'    },
+ *   { value: 'explore', label: 'Explore' },
+ *   { value: 'profile', label: 'Profile' },
+ * ]
+ *
+ * <TabBar options={TABS} defaultValue="home" onChange={console.log} />
+ * ```
+ *
+ * ─── With animated underline indicator ───────────────────────────────────────
+ * ```tsx
+ * <TabBar options={TABS} indicator="line" value={tab} onChange={setTab} />
+ * ```
+ *
+ * ─── Scrollable (many tabs) ──────────────────────────────────────────────────
+ * ```tsx
+ * <TabBar options={manyTabs} tabAlign="scroll" indicator="line" />
+ * ```
+ *
+ * ─── With icons ──────────────────────────────────────────────────────────────
+ * ```tsx
+ * const ICON_TABS = [
+ *   { value: 'home', label: 'Home', iconRender: (color) => <HomeIcon color={color} /> },
+ * ]
+ * <TabBar options={ICON_TABS} indicator="dot" />
+ * ```
+ *
+ * ─── Pill indicator ──────────────────────────────────────────────────────────
+ * ```tsx
+ * <TabBar options={TABS} indicator="pill" variant="solid" />
+ * ```
+ *
+ * ─── Color overrides ─────────────────────────────────────────────────────────
+ * ```tsx
+ * <TabBar
+ *   options={TABS}
+ *   indicator="line"
+ *   colors={{ activeText: '#22c55e', indicator: '#22c55e' }}
+ * />
+ * ```
+ */
+export { TabBar } from './TabBar';
+export type { TabBarProps, TabItem, TabValue, TabBarColors, TabBarVariant, IndicatorStyle, } from './interface';
+export { TAB_BAR_COLORS_LIGHT, TAB_BAR_COLORS_DARK } from './interface';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/tabBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabBar/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAqC,UAAU,CAAA;AAChE,YAAY,EACV,WAAW,EACX,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,cAAc,GACf,MAAqD,aAAa,CAAA;AACnE,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA"}

package/lib/typescript/tabBar/interface.d.ts

@@ -0,0 +1,119 @@
+import type React from 'react';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+export type TabValue = number | string;
+export type TabItem<T extends TabValue> = {
+    /** Unique identifier for this tab. */
+    value: T;
+    /** Display label. */
+    label: string;
+    /**
+     * Badge rendered beside the label.
+     * - number → shown as-is
+     * - string → shown as-is (pass '' to show a dot badge)
+     */
+    badge?: number | string;
+    /**
+     * Renders an icon above (or instead of) the label.
+     * Receives the resolved icon colour and the active state.
+     */
+    iconRender?: (color: ColorValue, isActive: boolean) => React.ReactElement;
+    /** Disable this specific tab. */
+    disabled?: boolean;
+};
+export type IndicatorStyle = 'line' | 'pill' | 'dot';
+export type TabBarVariant = 'default' | 'underline' | 'card' | 'solid';
+export type TabBarColors = {
+    /** Bar background. */
+    background: string;
+    /** Inactive tab label + icon. */
+    text: string;
+    /** Active tab label + icon. */
+    activeText: string;
+    /** Underline / pill / dot indicator. */
+    indicator: string;
+    /** Badge text. */
+    badge: string;
+    /** Bar bottom border (underline variant). */
+    border: string;
+    /** Active chip background (solid/card variant). */
+    activeChipBg: string;
+    /** Active chip text (solid/card variant). */
+    activeChipText: string;
+    /** Disabled tab. */
+    disabled: string;
+};
+export declare const TAB_BAR_COLORS_LIGHT: TabBarColors;
+export declare const TAB_BAR_COLORS_DARK: TabBarColors;
+export interface TabBarProps<T extends TabValue> {
+    /** Tab options. Memoize this array to avoid spurious re-renders. */
+    options: TabItem<T>[];
+    /** Controlled active value. */
+    value?: T;
+    /** Uncontrolled initial value. Defaults to options[0].value. */
+    defaultValue?: T;
+    /** Called when the active tab changes. */
+    onChange?: (value: T) => void;
+    /**
+     * Indicator style shown on the active tab.
+     * - `'line'` — animated bottom line (classic underline)
+     * - `'pill'` — animated pill that slides behind the active tab
+     * - `'dot'`  — small dot below the label
+     * - `false`  — no indicator (default)
+     */
+    indicator?: false | IndicatorStyle;
+    /**
+     * Explicit indicator width in px.
+     * - Omit → matches label text width (line) or tab width (pill).
+     * - `0`  → stretches to tab width.
+     */
+    indicatorWidth?: number;
+    /**
+     * Indicator height in px.
+     * - line default: 3
+     * - pill: auto (covers whole tab)
+     * - dot: 6
+     */
+    indicatorHeight?: number;
+    /** Indicator colour override. Falls back to `colors.indicator`. */
+    indicatorColor?: ColorValue;
+    /** Border radius of the indicator shape. */
+    indicatorRadius?: number;
+    /**
+     * - `'center'` — tabs divide the bar equally (no scroll).
+     * - `'scroll'` — tabs are natural width; bar scrolls horizontally.
+     */
+    tabAlign?: 'center' | 'scroll';
+    /**
+     * Fixed height for the bar.
+     * Defaults: 48 with icons, 44 with indicator, 40 plain.
+     */
+    height?: number;
+    /**
+     * Visual style preset.
+     * @default 'default'
+     */
+    variant?: TabBarVariant;
+    /** Scale factor for the active label (pop / bulge effect). @default 1 */
+    labelBulge?: number | boolean;
+    /** Show a persistent bottom border on the bar. @default false */
+    showBorder?: boolean;
+    /** Padding inside each tab. @default 12 */
+    tabPaddingHorizontal?: number;
+    /** Gap between icon and label. @default 4 */
+    iconLabelGap?: number;
+    /** Font size for tab labels. @default 14 */
+    fontSize?: number;
+    /** Font size for labels when tabs also have icons. @default 11 */
+    iconFontSize?: number;
+    /** Explicit text/icon colour for inactive tabs. */
+    textColor?: ColorValue;
+    /** Explicit text/icon colour for active tab. */
+    activeTextColor?: ColorValue;
+    /** Fine-grained colour token overrides. */
+    colors?: Partial<TabBarColors>;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    tabStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+//# sourceMappingURL=interface.d.ts.map

package/lib/typescript/tabBar/interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/tabBar/interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAIpE,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAA;AAItC,MAAM,MAAM,OAAO,CAAC,CAAC,SAAS,QAAQ,IAAI;IACxC,sCAAsC;IACtC,KAAK,EAAE,CAAC,CAAA;IACR,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,YAAY,CAAA;IACzE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAID,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;AAIpD,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,MAAM,GACN,OAAO,CAAA;AAIX,MAAM,MAAM,YAAY,GAAG;IACzB,sBAAsB;IACtB,UAAU,EAAQ,MAAM,CAAA;IACxB,iCAAiC;IACjC,IAAI,EAAc,MAAM,CAAA;IACxB,+BAA+B;IAC/B,UAAU,EAAQ,MAAM,CAAA;IACxB,wCAAwC;IACxC,SAAS,EAAS,MAAM,CAAA;IACxB,kBAAkB;IAClB,KAAK,EAAa,MAAM,CAAA;IACxB,6CAA6C;IAC7C,MAAM,EAAY,MAAM,CAAA;IACxB,mDAAmD;IACnD,YAAY,EAAM,MAAM,CAAA;IACxB,6CAA6C;IAC7C,cAAc,EAAI,MAAM,CAAA;IACxB,oBAAoB;IACpB,QAAQ,EAAU,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,YAUlC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,YAUjC,CAAA;AAID,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,QAAQ;IAI7C,oEAAoE;IACpE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;IAIrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,CAAC,CAAA;IACT,gEAAgE;IAChE,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAI7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,cAAc,CAAA;IAElC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,mEAAmE;IACnE,cAAc,CAAC,EAAE,UAAU,CAAA;IAE3B,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAA;IAIxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAE9B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IAIf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IAEvB,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAE7B,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB,2CAA2C;IAC3C,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAA;IAIrB,mDAAmD;IACnD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,gDAAgD;IAChD,eAAe,CAAC,EAAE,UAAU,CAAA;IAE5B,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAI9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE/B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB"}

package/lib/typescript/text/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { TextProps, TextStyle } from 'react-native';
+type TextVariants = {
+    fontSize?: number;
+    fontWeight?: number | string;
+    color?: string;
+    textDecorationLine?: boolean | string;
+    textAlign?: string;
+    fontFamily?: string;
+    link?: boolean;
+};
+type StyledTextProps = TextVariants & TextProps & TextStyle;
+declare const StyledText: import("react").ForwardRefExoticComponent<TextVariants & TextProps & TextStyle & import("react").RefAttributes<any>>;
+export { StyledText };
+export type { StyledTextProps };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/text/index.ts"],"names":[],"mappings":";AACA,OAAO,EAEH,SAAS,EACT,SAAS,EACZ,MAAM,cAAc,CAAC;AAItB,KAAK,YAAY,GAAG;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAE;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,KAAK,eAAe,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,QAAA,MAAM,UAAU,sHAgDd,CAAC;AAEH,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/lib/typescript/timeline/index.d.ts

@@ -0,0 +1,125 @@
+/**
+ * StyledTimeline.tsx
+ * ──────────────────
+ * A fully reusable, data-driven vertical timeline component for fluent-styles.
+ *
+ * Features:
+ *  • Accepts JSON data OR React children (or both)
+ *  • Animated dot entrance on mount
+ *  • Customisable dot size, colour, line style, connector colour
+ *  • Time label column on the left (start + end)
+ *  • Right content slot: any ReactNode per item
+ *  • Variants: default · compact · spacious
+ *  • Full TypeScript props
+ */
+import React from 'react';
+export type TimelineVariant = 'default' | 'compact' | 'spacious';
+export type TimelineDotShape = 'circle' | 'filled' | 'ring';
+export interface TimelineItem {
+    /** Unique key for this entry */
+    id: string;
+    /** Primary time label (e.g. "11:35") */
+    time: string;
+    /** Secondary time label shown below primary (e.g. "13:05") */
+    endTime?: string;
+    /**
+     * Arbitrary content rendered to the right of the timeline.
+     * If provided, `renderItem` and the data fields below are ignored.
+     */
+    content?: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    description?: string;
+    /** Any extra data you want to pass through */
+    meta?: Record<string, unknown>;
+}
+export interface StyledTimelineColors {
+    /** Vertical connector line. Default: theme.colors.gray[200] */
+    line?: string;
+    /** Default dot fill/stroke. Default: '#8bc34a' */
+    dot?: string;
+    /** Dot border (for 'ring' shape). Default: palettes.white */
+    dotBorder?: string;
+    /** Time text colour. Default: theme.colors.gray[900] */
+    timeText?: string;
+    /** Secondary time (endTime) colour. Default: theme.colors.gray[400] */
+    endTimeText?: string;
+}
+export interface StyledTimelineProps {
+    /**
+     * Array of timeline entries.
+     * Each item must have `id` and `time`.
+     * Provide `content` for fully custom rendering, or use convenience fields.
+     */
+    items?: TimelineItem[];
+    /**
+     * Custom render function per item.
+     * Receives the item and its index.
+     * Takes priority over `item.content` and the default renderer.
+     */
+    renderItem?: (item: TimelineItem, index: number) => React.ReactNode;
+    /**
+     * React children are appended after `items` in the timeline.
+     * Each direct child is treated as a standalone timeline entry
+     * WITHOUT a time label — useful for one-off custom nodes.
+     */
+    children?: React.ReactNode;
+    /** Visual density. Default: 'default' */
+    variant?: TimelineVariant;
+    /** Dot shape. Default: 'filled' */
+    dotShape?: TimelineDotShape;
+    /** Dot diameter in px. Default: 10 */
+    dotSize?: number;
+    /** Width of the time label column. Default: 56 */
+    timeColumnWidth?: number;
+    /** Gap between the time column and the content area. Default: 16 */
+    timeGap?: number;
+    /** Whether to animate dots on mount. Default: true */
+    animated?: boolean;
+    /** Colour overrides */
+    colors?: StyledTimelineColors;
+    /** Called when an item is pressed (only fires if item has no custom onPress) */
+    onItemPress?: (item: TimelineItem) => void;
+}
+/**
+ * StyledTimeline — vertical data-driven timeline for fluent-styles apps.
+ *
+ * @example JSON-driven (minimal)
+ * ```tsx
+ * <StyledTimeline
+ *   items={[
+ *     { id: '1', time: '09:00', title: 'Morning Run',    subtitle: 'Cardio · 5km'  },
+ *     { id: '2', time: '11:30', title: 'Strength Class', subtitle: 'Upper body'    },
+ *     { id: '3', time: '14:00', title: 'Yoga',           subtitle: 'Recovery'      },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Custom renderItem
+ * ```tsx
+ * <StyledTimeline
+ *   items={workoutItems}
+ *   renderItem={(item) => <WorkoutCard item={item} />}
+ * />
+ * ```
+ *
+ * @example Mixed: data + inline children
+ * ```tsx
+ * <StyledTimeline items={scheduleItems}>
+ *   <NoteCard note="Don't forget to hydrate!" />
+ * </StyledTimeline>
+ * ```
+ *
+ * @example Custom colours
+ * ```tsx
+ * <StyledTimeline
+ *   items={items}
+ *   colors={{ dot: '#2196f3', line: '#bbdefb' }}
+ *   dotShape="ring"
+ *   variant="spacious"
+ * />
+ * ```
+ */
+export declare const StyledTimeline: React.FC<StyledTimelineProps>;
+export default StyledTimeline;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/timeline/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AAYjD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AACjE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5D,MAAM,WAAW,YAAY;IAC3B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,oBAAoB;IACnC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IAEvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAEpE;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,yCAAyC;IACzC,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAE5B,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uBAAuB;IACvB,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAE9B,gFAAgF;IAChF,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC5C;AAiGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+HxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/typescript/toast/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ComponentTheme, ToastColors, TOAST_DARK, TOAST_LIGHT } from '../utiles/theme';
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+export type ToastProps = {
+    message: string;
+    description?: string;
+    variant?: ToastVariant;
+    /** Auto-dismiss after ms. Pass `0` to disable. Default: 3500. */
+    duration?: number;
+    /** Called after the exit animation completes — used by the hook to unmount. */
+    onDismiss?: () => void;
+    /**
+     * Color scheme. `'dark'` (default) | `'light'` | `'system'`.
+     */
+    theme?: ComponentTheme;
+    /**
+     * Fine-grained token overrides on top of the active theme.
+     * @example
+     * ```tsx
+     * toast.show({ variant: 'success', theme: 'light', colors: { successBorder: '#059669' } })
+     * ```
+     */
+    colors?: Partial<ToastColors>;
+};
+export declare const Toast: React.FC<ToastProps>;
+export { TOAST_DARK, TOAST_LIGHT };
+export type { ToastColors };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toast/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAStE,OAAO,EACL,cAAc,EAEd,WAAW,EACX,UAAU,EACV,WAAW,EACZ,MAAM,iBAAiB,CAAA;AAIxB,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAO,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAM,YAAY,CAAA;IAC1B,iEAAiE;IACjE,QAAQ,CAAC,EAAK,MAAM,CAAA;IACpB,+EAA+E;IAC/E,SAAS,CAAC,EAAI,MAAM,IAAI,CAAA;IACxB;;OAEG;IACH,KAAK,CAAC,EAAQ,cAAc,CAAA;IAC5B;;;;;;OAMG;IACH,MAAM,CAAC,EAAO,OAAO,CAAC,WAAW,CAAC,CAAA;CACnC,CAAA;AAaD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAgFtC,CAAA;AAoCD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,CAAA;AAClC,YAAY,EAAE,WAAW,EAAE,CAAA"}

package/lib/typescript/toast/useToast.d.ts

@@ -0,0 +1,31 @@
+import { ToastProps } from './';
+type ShowOptions = Omit<ToastProps, 'onDismiss'>;
+type ToastAPI = {
+    show: (options: ShowOptions) => number;
+    success: (message: string, description?: string) => number;
+    error: (message: string, description?: string) => number;
+    warning: (message: string, description?: string) => number;
+    info: (message: string, description?: string) => number;
+    dismiss: (id: number) => void;
+    dismissAll: () => void;
+};
+/**
+ * Declarative toast hook — requires a `PortalManager` ancestor.
+ *
+ * @example
+ * ```tsx
+ * const toast = useToast()
+ *
+ * // Convenience shortcuts
+ * toast.success('Profile saved')
+ * toast.error('Upload failed', 'Max file size is 5 MB')
+ *
+ * // Full control
+ * const id = toast.show({ message: 'Processing…', duration: 0, variant: 'info' })
+ * // Later:
+ * toast.dismiss(id)
+ * ```
+ */
+export declare function useToast(): ToastAPI;
+export {};
+//# sourceMappingURL=useToast.d.ts.map

package/lib/typescript/toast/useToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/toast/useToast.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,UAAU,EAAgB,MAAM,IAAI,CAAA;AAIpD,KAAK,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,CAAA;AAEhD,KAAK,QAAQ,GAAG;IACd,IAAI,EAAK,CAAC,OAAO,EAAE,WAAW,KAAK,MAAM,CAAA;IACzC,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1D,KAAK,EAAI,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1D,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1D,IAAI,EAAK,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC1D,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,QAAQ,IAAI,QAAQ,CAsDnC"}

package/lib/typescript/utiles/createIcon.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+/**
+ * Creates a reusable icon component with standardised size, color, and strokeWidth props.
+ *
+ * @template P - Additional props passed through to the underlying Svg element
+ *
+ * @param {IconRenderer<P>} renderer - A render function that receives resolved icon props
+ *   and any extra SVG props, and returns a React element containing the Svg markup.
+ *
+ * @returns {React.FC<IconProps & P>} A React functional component that accepts:
+ *   - `size`        {number}  Width and height in dp. Default: `24`
+ *   - `color`       {string}  Stroke (and optional fill) color. Default: `"currentColor"`
+ *   - `strokeWidth` {number}  Stroke thickness in SVG units. Default: `1.5`
+ *   - `...props`    {P}       Any additional props forwarded to the Svg element
+ *
+ * @example
+ * const BackArrow = createIcon(({ size, color, strokeWidth }, props) => (
+ *   <Svg width={size} height={size} viewBox="0 0 24 24" {...props}>
+ *     <Path d="M19 12H5"      stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" fill="none" />
+ *     <Path d="M12 19l-7-7 7-7" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+ *   </Svg>
+ * ))
+ *
+ * // Usage
+ * <BackArrow size={20} color={theme.text} strokeWidth={2} />
+ */
+type IconProps = {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+    [key: string]: any;
+};
+type IconRenderer = (props: IconProps, svgProps: any) => React.ReactElement;
+export declare function createIcon(renderer: IconRenderer): {
+    ({ size, color, strokeWidth, ...props }: IconProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=createIcon.d.ts.map

package/lib/typescript/utiles/createIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../src/utiles/createIcon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,KAAK,SAAS,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CACnB,CAAA;AAED,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,KAAK,CAAC,YAAY,CAAA;AAE3E,wBAAgB,UAAU,CAAC,QAAQ,EAAE,YAAY;6CACmC,SAAS;;EAK5F"}

package/lib/typescript/utiles/fontStyles.d.ts

@@ -0,0 +1,9 @@
+export namespace fontStyles {
+    let crimson_text_bold: string | undefined;
+    let crimson_text_italic: string | undefined;
+    let crimson_text_regular: string | undefined;
+    let Roboto_Regular: string | undefined;
+    let Roboto_Italic: string | undefined;
+    let Roboto_Bold: string | undefined;
+}
+//# sourceMappingURL=fontStyles.d.ts.map

package/lib/typescript/utiles/fontStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontStyles.d.ts","sourceRoot":"","sources":["../../../src/utiles/fontStyles.js"],"names":[],"mappings":""}

package/lib/typescript/utiles/position.d.ts

@@ -0,0 +1,13 @@
+import type { ViewStyle } from 'react-native';
+import type { Offset, Position } from '../portal/types';
+/**
+ * Returns absolute-position styles that anchor a portal element at the
+ * requested screen position, with an optional pixel offset applied on top.
+ *
+ * ⚠️  The `'center'` variant uses a negative-50 translate trick that works
+ *     well for modals/toasts but assumes the content has a known or bounded
+ *     size.  For content of variable width/height, prefer wrapping in a
+ *     container that measures itself and passes explicit offsets instead.
+ */
+export declare function getPositionStyles(position?: Position, offset?: Offset): ViewStyle;
+//# sourceMappingURL=position.d.ts.map

package/lib/typescript/utiles/position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../src/utiles/position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAIvD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,GAAE,QAAmB,EAC7B,MAAM,GAAE,MAAuB,GAC9B,SAAS,CAkFX"}