@xaui/native 0.9.1-alpha.9 → 0.9.1-alpha.90

package/dist/theme/theme-hooks.d.ts

@@ -0,0 +1,15 @@
+import type { XAUIAppearance } from './appearance';
+import type { ColorMode, XAUIColors, XAUITheme } from './theme.type';
+export declare function useXAUITheme(): XAUITheme;
+/** The resolved mode — never `'system'`. */
+export declare function useColorMode(): ColorMode;
+/**
+ * The theme, read as app chrome: the status bar, the navigation bar, a header.
+ *
+ * The provider dresses everything the library renders and nothing above it, because a
+ * status bar belongs to the platform and a header belongs to whatever navigator the app
+ * chose. This is what an app hands to those — see `appearanceFor` for the three wirings.
+ */
+export declare function useAppearance(): XAUIAppearance;
+export declare function useThemeColor(token: keyof XAUIColors): string;
+export declare function useThemeColor(tokens: Array<keyof XAUIColors>): string[];

package/dist/{theme.type-C9bFJKFm.d.cts → theme/theme.type.d.cts}

@@ -1,7 +1,6 @@
-import { TextStyle } from 'react-native';
-
+import type { TextStyle } from 'react-native';
 /** The source layer — the only surface a consumer writes by hand, per mode. */
-type XAUISourceColors = {
+export type XAUISourceColors = {
     background: string;
     foreground: string;
     surface: string;
@@ -36,7 +35,7 @@ type XAUISourceColors = {
     link: string;
 };
 /** The derived layer — computed by `deriveColors`, never written by hand. */
-type XAUIDerivedColors = {
+export type XAUIDerivedColors = {
     accentPressed: string;
     successPressed: string;
     warningPressed: string;
@@ -71,21 +70,21 @@ type XAUIDerivedColors = {
     fieldBorderFocus: string;
 };
 /** Constant across both modes. */
-type XAUIPrimitiveColors = {
+export type XAUIPrimitiveColors = {
     white: string;
     black: string;
     snow: string;
     eclipse: string;
 };
 /** Everything a component reads, flattened. */
-type XAUIColors = XAUISourceColors & XAUIDerivedColors & XAUIPrimitiveColors;
-type ColorMode = 'light' | 'dark';
-type Size = 'xs' | 'sm' | 'md' | 'lg';
-type RadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'field' | 'full';
-type FontSizeKey = Size | 'xl' | '2xl' | '3xl' | '4xl';
-type FontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold';
-type XAUIRadius = Record<RadiusKey, number>;
-type XAUIShadow = {
+export type XAUIColors = XAUISourceColors & XAUIDerivedColors & XAUIPrimitiveColors;
+export type ColorMode = 'light' | 'dark';
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type RadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'field' | 'full';
+export type FontSizeKey = Size | 'xl' | '2xl' | '3xl' | '4xl';
+export type FontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold';
+export type XAUIRadius = Record<RadiusKey, number>;
+export type XAUIShadow = {
     shadowColor: string;
     shadowOffset: {
         width: number;
@@ -95,7 +94,7 @@ type XAUIShadow = {
     shadowRadius: number;
     elevation: number;
 };
-type XAUITheme = {
+export type XAUITheme = {
     id: string;
     mode: ColorMode;
     colors: XAUIColors;
@@ -129,7 +128,7 @@ type XAUITheme = {
     };
     controlHeights: Record<Size, number>;
 };
-type XAUIThemeConfig = {
+export type XAUIThemeConfig = {
     colors?: {
         light?: Partial<XAUISourceColors & XAUIDerivedColors>;
         dark?: Partial<XAUISourceColors & XAUIDerivedColors>;
@@ -150,10 +149,8 @@ type XAUIThemeConfig = {
     controlHeights?: Partial<XAUITheme['controlHeights']>;
 };
 /** What `createTheme` returns: both modes, resolved, sharing one id. */
-type XAUIThemeSet = {
+export type XAUIThemeSet = {
     id: string;
     light: XAUITheme;
     dark: XAUITheme;
 };
-
-export type { ColorMode as C, FontSizeKey as F, RadiusKey as R, Size as S, XAUIColors as X, FontWeightKey as a, XAUIDerivedColors as b, XAUIPrimitiveColors as c, XAUIRadius as d, XAUIShadow as e, XAUISourceColors as f, XAUITheme as g, XAUIThemeConfig as h, XAUIThemeSet as i };

package/dist/{theme.type-C9bFJKFm.d.ts → theme/theme.type.d.ts}

@@ -1,7 +1,6 @@
-import { TextStyle } from 'react-native';
-
+import type { TextStyle } from 'react-native';
 /** The source layer — the only surface a consumer writes by hand, per mode. */
-type XAUISourceColors = {
+export type XAUISourceColors = {
     background: string;
     foreground: string;
     surface: string;
@@ -36,7 +35,7 @@ type XAUISourceColors = {
     link: string;
 };
 /** The derived layer — computed by `deriveColors`, never written by hand. */
-type XAUIDerivedColors = {
+export type XAUIDerivedColors = {
     accentPressed: string;
     successPressed: string;
     warningPressed: string;
@@ -71,21 +70,21 @@ type XAUIDerivedColors = {
     fieldBorderFocus: string;
 };
 /** Constant across both modes. */
-type XAUIPrimitiveColors = {
+export type XAUIPrimitiveColors = {
     white: string;
     black: string;
     snow: string;
     eclipse: string;
 };
 /** Everything a component reads, flattened. */
-type XAUIColors = XAUISourceColors & XAUIDerivedColors & XAUIPrimitiveColors;
-type ColorMode = 'light' | 'dark';
-type Size = 'xs' | 'sm' | 'md' | 'lg';
-type RadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'field' | 'full';
-type FontSizeKey = Size | 'xl' | '2xl' | '3xl' | '4xl';
-type FontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold';
-type XAUIRadius = Record<RadiusKey, number>;
-type XAUIShadow = {
+export type XAUIColors = XAUISourceColors & XAUIDerivedColors & XAUIPrimitiveColors;
+export type ColorMode = 'light' | 'dark';
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type RadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'field' | 'full';
+export type FontSizeKey = Size | 'xl' | '2xl' | '3xl' | '4xl';
+export type FontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold';
+export type XAUIRadius = Record<RadiusKey, number>;
+export type XAUIShadow = {
     shadowColor: string;
     shadowOffset: {
         width: number;
@@ -95,7 +94,7 @@ type XAUIShadow = {
     shadowRadius: number;
     elevation: number;
 };
-type XAUITheme = {
+export type XAUITheme = {
     id: string;
     mode: ColorMode;
     colors: XAUIColors;
@@ -129,7 +128,7 @@ type XAUITheme = {
     };
     controlHeights: Record<Size, number>;
 };
-type XAUIThemeConfig = {
+export type XAUIThemeConfig = {
     colors?: {
         light?: Partial<XAUISourceColors & XAUIDerivedColors>;
         dark?: Partial<XAUISourceColors & XAUIDerivedColors>;
@@ -150,10 +149,8 @@ type XAUIThemeConfig = {
     controlHeights?: Partial<XAUITheme['controlHeights']>;
 };
 /** What `createTheme` returns: both modes, resolved, sharing one id. */
-type XAUIThemeSet = {
+export type XAUIThemeSet = {
     id: string;
     light: XAUITheme;
     dark: XAUITheme;
 };
-
-export type { ColorMode as C, FontSizeKey as F, RadiusKey as R, Size as S, XAUIColors as X, FontWeightKey as a, XAUIDerivedColors as b, XAUIPrimitiveColors as c, XAUIRadius as d, XAUIShadow as e, XAUISourceColors as f, XAUITheme as g, XAUIThemeConfig as h, XAUIThemeSet as i };

package/dist/theme/tokens.gen.d.cts

@@ -0,0 +1,144 @@
+export declare const tokens: {
+    readonly light: {
+        readonly background: "#fafafa";
+        readonly foreground: "#18181b";
+        readonly surface: "#ffffff";
+        readonly surfaceForeground: "#18181b";
+        readonly surfaceSecondary: "#ececee";
+        readonly surfaceSecondaryForeground: "#18181b";
+        readonly surfaceTertiary: "#e4e4e7";
+        readonly surfaceTertiaryForeground: "#18181b";
+        readonly overlay: "#ffffff";
+        readonly overlayForeground: "#18181b";
+        readonly backdrop: "rgba(0, 0, 0, 0.2)";
+        readonly muted: "#71717a";
+        readonly default: "#e4e4e7";
+        readonly defaultForeground: "#18181b";
+        readonly accent: "#9333ea";
+        readonly accentForeground: "#faf5ff";
+        readonly fieldBackground: "#ffffff";
+        readonly fieldForeground: "#18181b";
+        readonly fieldPlaceholder: "#71717a";
+        readonly fieldBorder: "#e4e4e7";
+        readonly success: "#15803d";
+        readonly successForeground: "#fafafa";
+        readonly warning: "#c2410c";
+        readonly warningForeground: "#fafafa";
+        readonly danger: "#dc2626";
+        readonly dangerForeground: "#fafafa";
+        readonly segment: "#ffffff";
+        readonly segmentForeground: "#18181b";
+        readonly border: "#e4e4e7";
+        readonly separator: "#d4d4d8";
+        readonly focus: "#9333ea";
+        readonly link: "#18181b";
+        readonly accentPressed: "#8533d3";
+        readonly successPressed: "#1b753a";
+        readonly warningPressed: "#af3e15";
+        readonly dangerPressed: "#c72927";
+        readonly defaultPressed: "#dbdbde";
+        readonly surfacePressed: "#eaeaea";
+        readonly defaultSoft: "rgba(228, 228, 231, 0.5)";
+        readonly defaultSoftForeground: "#18181b";
+        readonly defaultSoftPressed: "rgba(228, 228, 231, 0.6)";
+        readonly accentSoft: "rgba(147, 51, 234, 0.15)";
+        readonly accentSoftForeground: "#7833bc";
+        readonly accentSoftPressed: "rgba(147, 51, 234, 0.2)";
+        readonly successSoft: "rgba(21, 128, 61, 0.15)";
+        readonly successSoftForeground: "#205f34";
+        readonly successSoftPressed: "rgba(21, 128, 61, 0.2)";
+        readonly warningSoft: "rgba(194, 65, 12, 0.15)";
+        readonly warningSoftForeground: "#82361e";
+        readonly warningSoftPressed: "rgba(194, 65, 12, 0.2)";
+        readonly dangerSoft: "rgba(220, 38, 38, 0.15)";
+        readonly dangerSoftForeground: "#b22b28";
+        readonly dangerSoftPressed: "rgba(220, 38, 38, 0.2)";
+        readonly backgroundSecondary: "#f0f0f0";
+        readonly backgroundTertiary: "#e5e5e6";
+        readonly backgroundInverse: "#18181b";
+        readonly borderSecondary: "#c6c6c7";
+        readonly borderTertiary: "#a8a8a9";
+        readonly separatorSecondary: "#d8d8d8";
+        readonly separatorTertiary: "#cdcdce";
+        readonly fieldPressed: "#e5e5e5";
+        readonly fieldFocus: "#ffffff";
+        readonly fieldBorderPressed: "#c8c8cb";
+        readonly fieldBorderFocus: "#a9a9ac";
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly snow: "#fafafa";
+        readonly eclipse: "#18181b";
+    };
+    readonly dark: {
+        readonly background: "#09090b";
+        readonly foreground: "#fafafa";
+        readonly surface: "#18181b";
+        readonly surfaceForeground: "#fafafa";
+        readonly surfaceSecondary: "#27272a";
+        readonly surfaceSecondaryForeground: "#fafafa";
+        readonly surfaceTertiary: "#3f3f46";
+        readonly surfaceTertiaryForeground: "#fafafa";
+        readonly overlay: "#18181b";
+        readonly overlayForeground: "#fafafa";
+        readonly backdrop: "rgba(0, 0, 0, 0.5)";
+        readonly muted: "#a1a1aa";
+        readonly default: "#27272a";
+        readonly defaultForeground: "#fafafa";
+        readonly accent: "#c084fc";
+        readonly accentForeground: "#18181b";
+        readonly fieldBackground: "#18181b";
+        readonly fieldForeground: "#fafafa";
+        readonly fieldPlaceholder: "#a1a1aa";
+        readonly fieldBorder: "#3f3f46";
+        readonly success: "#4ade80";
+        readonly successForeground: "#18181b";
+        readonly warning: "#fb923c";
+        readonly warningForeground: "#18181b";
+        readonly danger: "#f87171";
+        readonly dangerForeground: "#18181b";
+        readonly segment: "#3f3f46";
+        readonly segmentForeground: "#fafafa";
+        readonly border: "#27272a";
+        readonly separator: "#52525b";
+        readonly focus: "#c084fc";
+        readonly link: "#fafafa";
+        readonly accentPressed: "#c691fd";
+        readonly successPressed: "#64e18d";
+        readonly warningPressed: "#fc9d55";
+        readonly dangerPressed: "#fa807e";
+        readonly defaultPressed: "#2e2e31";
+        readonly surfacePressed: "#27272a";
+        readonly defaultSoft: "rgba(39, 39, 42, 0.5)";
+        readonly defaultSoftForeground: "#fafafa";
+        readonly defaultSoftPressed: "rgba(39, 39, 42, 0.6)";
+        readonly accentSoft: "rgba(192, 132, 252, 0.15)";
+        readonly accentSoftForeground: "#cb9dfd";
+        readonly accentSoftPressed: "rgba(192, 132, 252, 0.2)";
+        readonly successSoft: "rgba(74, 222, 128, 0.15)";
+        readonly successSoftForeground: "#8de8a6";
+        readonly successSoftPressed: "rgba(74, 222, 128, 0.2)";
+        readonly warningSoft: "rgba(251, 146, 60, 0.15)";
+        readonly warningSoftForeground: "#feb887";
+        readonly warningSoftPressed: "rgba(251, 146, 60, 0.2)";
+        readonly dangerSoft: "rgba(248, 113, 113, 0.15)";
+        readonly dangerSoftForeground: "#fc8f8c";
+        readonly dangerSoftPressed: "rgba(248, 113, 113, 0.2)";
+        readonly backgroundSecondary: "#101012";
+        readonly backgroundTertiary: "#18181a";
+        readonly backgroundInverse: "#fafafa";
+        readonly borderSecondary: "#424245";
+        readonly borderTertiary: "#5b5b5e";
+        readonly separatorSecondary: "#343437";
+        readonly separatorTertiary: "#3c3c3f";
+        readonly fieldPressed: "#2a2a2d";
+        readonly fieldFocus: "#18181b";
+        readonly fieldBorderPressed: "#535359";
+        readonly fieldBorderFocus: "#6b6b71";
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly snow: "#fafafa";
+        readonly eclipse: "#18181b";
+    };
+};
+/** Which keys belong to the source layer — the rest is derived or primitive. */
+export declare const sourceKeys: readonly ["background", "foreground", "surface", "surfaceForeground", "surfaceSecondary", "surfaceSecondaryForeground", "surfaceTertiary", "surfaceTertiaryForeground", "overlay", "overlayForeground", "backdrop", "muted", "default", "defaultForeground", "accent", "accentForeground", "fieldBackground", "fieldForeground", "fieldPlaceholder", "fieldBorder", "success", "successForeground", "warning", "warningForeground", "danger", "dangerForeground", "segment", "segmentForeground", "border", "separator", "focus", "link"];

package/dist/theme/tokens.gen.d.ts

@@ -0,0 +1,144 @@
+export declare const tokens: {
+    readonly light: {
+        readonly background: "#fafafa";
+        readonly foreground: "#18181b";
+        readonly surface: "#ffffff";
+        readonly surfaceForeground: "#18181b";
+        readonly surfaceSecondary: "#ececee";
+        readonly surfaceSecondaryForeground: "#18181b";
+        readonly surfaceTertiary: "#e4e4e7";
+        readonly surfaceTertiaryForeground: "#18181b";
+        readonly overlay: "#ffffff";
+        readonly overlayForeground: "#18181b";
+        readonly backdrop: "rgba(0, 0, 0, 0.2)";
+        readonly muted: "#71717a";
+        readonly default: "#e4e4e7";
+        readonly defaultForeground: "#18181b";
+        readonly accent: "#9333ea";
+        readonly accentForeground: "#faf5ff";
+        readonly fieldBackground: "#ffffff";
+        readonly fieldForeground: "#18181b";
+        readonly fieldPlaceholder: "#71717a";
+        readonly fieldBorder: "#e4e4e7";
+        readonly success: "#15803d";
+        readonly successForeground: "#fafafa";
+        readonly warning: "#c2410c";
+        readonly warningForeground: "#fafafa";
+        readonly danger: "#dc2626";
+        readonly dangerForeground: "#fafafa";
+        readonly segment: "#ffffff";
+        readonly segmentForeground: "#18181b";
+        readonly border: "#e4e4e7";
+        readonly separator: "#d4d4d8";
+        readonly focus: "#9333ea";
+        readonly link: "#18181b";
+        readonly accentPressed: "#8533d3";
+        readonly successPressed: "#1b753a";
+        readonly warningPressed: "#af3e15";
+        readonly dangerPressed: "#c72927";
+        readonly defaultPressed: "#dbdbde";
+        readonly surfacePressed: "#eaeaea";
+        readonly defaultSoft: "rgba(228, 228, 231, 0.5)";
+        readonly defaultSoftForeground: "#18181b";
+        readonly defaultSoftPressed: "rgba(228, 228, 231, 0.6)";
+        readonly accentSoft: "rgba(147, 51, 234, 0.15)";
+        readonly accentSoftForeground: "#7833bc";
+        readonly accentSoftPressed: "rgba(147, 51, 234, 0.2)";
+        readonly successSoft: "rgba(21, 128, 61, 0.15)";
+        readonly successSoftForeground: "#205f34";
+        readonly successSoftPressed: "rgba(21, 128, 61, 0.2)";
+        readonly warningSoft: "rgba(194, 65, 12, 0.15)";
+        readonly warningSoftForeground: "#82361e";
+        readonly warningSoftPressed: "rgba(194, 65, 12, 0.2)";
+        readonly dangerSoft: "rgba(220, 38, 38, 0.15)";
+        readonly dangerSoftForeground: "#b22b28";
+        readonly dangerSoftPressed: "rgba(220, 38, 38, 0.2)";
+        readonly backgroundSecondary: "#f0f0f0";
+        readonly backgroundTertiary: "#e5e5e6";
+        readonly backgroundInverse: "#18181b";
+        readonly borderSecondary: "#c6c6c7";
+        readonly borderTertiary: "#a8a8a9";
+        readonly separatorSecondary: "#d8d8d8";
+        readonly separatorTertiary: "#cdcdce";
+        readonly fieldPressed: "#e5e5e5";
+        readonly fieldFocus: "#ffffff";
+        readonly fieldBorderPressed: "#c8c8cb";
+        readonly fieldBorderFocus: "#a9a9ac";
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly snow: "#fafafa";
+        readonly eclipse: "#18181b";
+    };
+    readonly dark: {
+        readonly background: "#09090b";
+        readonly foreground: "#fafafa";
+        readonly surface: "#18181b";
+        readonly surfaceForeground: "#fafafa";
+        readonly surfaceSecondary: "#27272a";
+        readonly surfaceSecondaryForeground: "#fafafa";
+        readonly surfaceTertiary: "#3f3f46";
+        readonly surfaceTertiaryForeground: "#fafafa";
+        readonly overlay: "#18181b";
+        readonly overlayForeground: "#fafafa";
+        readonly backdrop: "rgba(0, 0, 0, 0.5)";
+        readonly muted: "#a1a1aa";
+        readonly default: "#27272a";
+        readonly defaultForeground: "#fafafa";
+        readonly accent: "#c084fc";
+        readonly accentForeground: "#18181b";
+        readonly fieldBackground: "#18181b";
+        readonly fieldForeground: "#fafafa";
+        readonly fieldPlaceholder: "#a1a1aa";
+        readonly fieldBorder: "#3f3f46";
+        readonly success: "#4ade80";
+        readonly successForeground: "#18181b";
+        readonly warning: "#fb923c";
+        readonly warningForeground: "#18181b";
+        readonly danger: "#f87171";
+        readonly dangerForeground: "#18181b";
+        readonly segment: "#3f3f46";
+        readonly segmentForeground: "#fafafa";
+        readonly border: "#27272a";
+        readonly separator: "#52525b";
+        readonly focus: "#c084fc";
+        readonly link: "#fafafa";
+        readonly accentPressed: "#c691fd";
+        readonly successPressed: "#64e18d";
+        readonly warningPressed: "#fc9d55";
+        readonly dangerPressed: "#fa807e";
+        readonly defaultPressed: "#2e2e31";
+        readonly surfacePressed: "#27272a";
+        readonly defaultSoft: "rgba(39, 39, 42, 0.5)";
+        readonly defaultSoftForeground: "#fafafa";
+        readonly defaultSoftPressed: "rgba(39, 39, 42, 0.6)";
+        readonly accentSoft: "rgba(192, 132, 252, 0.15)";
+        readonly accentSoftForeground: "#cb9dfd";
+        readonly accentSoftPressed: "rgba(192, 132, 252, 0.2)";
+        readonly successSoft: "rgba(74, 222, 128, 0.15)";
+        readonly successSoftForeground: "#8de8a6";
+        readonly successSoftPressed: "rgba(74, 222, 128, 0.2)";
+        readonly warningSoft: "rgba(251, 146, 60, 0.15)";
+        readonly warningSoftForeground: "#feb887";
+        readonly warningSoftPressed: "rgba(251, 146, 60, 0.2)";
+        readonly dangerSoft: "rgba(248, 113, 113, 0.15)";
+        readonly dangerSoftForeground: "#fc8f8c";
+        readonly dangerSoftPressed: "rgba(248, 113, 113, 0.2)";
+        readonly backgroundSecondary: "#101012";
+        readonly backgroundTertiary: "#18181a";
+        readonly backgroundInverse: "#fafafa";
+        readonly borderSecondary: "#424245";
+        readonly borderTertiary: "#5b5b5e";
+        readonly separatorSecondary: "#343437";
+        readonly separatorTertiary: "#3c3c3f";
+        readonly fieldPressed: "#2a2a2d";
+        readonly fieldFocus: "#18181b";
+        readonly fieldBorderPressed: "#535359";
+        readonly fieldBorderFocus: "#6b6b71";
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly snow: "#fafafa";
+        readonly eclipse: "#18181b";
+    };
+};
+/** Which keys belong to the source layer — the rest is derived or primitive. */
+export declare const sourceKeys: readonly ["background", "foreground", "surface", "surfaceForeground", "surfaceSecondary", "surfaceSecondaryForeground", "surfaceTertiary", "surfaceTertiaryForeground", "overlay", "overlayForeground", "backdrop", "muted", "default", "defaultForeground", "accent", "accentForeground", "fieldBackground", "fieldForeground", "fieldPlaceholder", "fieldBorder", "success", "successForeground", "warning", "warningForeground", "danger", "dangerForeground", "segment", "segmentForeground", "border", "separator", "focus", "link"];

package/dist/utils/carousel.d.cts

@@ -0,0 +1,66 @@
+/** What a carousel's track measures, once its own width is known. */
+export type CarouselMetrics = {
+    /** How wide one slide is. */
+    itemWidth: number;
+    /** How far one step travels — a slide plus the gap after it. This is the snap interval. */
+    step: number;
+    /** Between two slides. The same number the caller gave, kept here so nothing recomputes it. */
+    gap: number;
+    /**
+     * The empty run at each end of the track.
+     *
+     * It is what makes the first and last slides sit where the middle ones do: without it a
+     * carousel that peeks would show its first slide flush against the edge and every other
+     * one inset, and the snap points would be right for one of those and wrong for the other.
+     */
+    inset: number;
+};
+export type CarouselMetricsOptions = {
+    /** The track's own width, measured. */
+    width: number;
+    /** How many whole slides are in view at once. */
+    itemsPerView: number;
+    /** Between two slides. */
+    gap: number;
+    /** How much of the neighbouring slide shows at each edge. Zero for a full-width carousel. */
+    peek: number;
+};
+/**
+ * The slide width and the snap interval a track of this width implies.
+ *
+ * ```
+ * ├ peek ┼ gap ┼──── item ────┼ gap ┼──── item ────┼ gap ┼ peek ┤
+ * ```
+ *
+ * The peek is a *sight* of the next slide, so it brings a gap of its own with it — the run
+ * it costs at each edge is `peek + gap`, not `peek`. Without that second term the peeking
+ * neighbour would touch the slide in view, and a carousel whose slides touch reads as one
+ * wide image that has been cut.
+ *
+ * Everything is clamped at zero: a width smaller than what the gaps and the peeks already
+ * claim asks for a negative slide, and a negative width renders as nothing at all rather
+ * than as the too-small thing the caller could have seen and fixed.
+ */
+export declare function carouselMetrics({ width, itemsPerView, gap, peek, }: CarouselMetricsOptions): CarouselMetrics;
+/**
+ * Which slide a scroll offset has landed on.
+ *
+ * Rounded, not floored: the slide the track is *nearest* to is the one it will snap to, and
+ * an indicator that waits for the halfway point to pass lags a drag the reader can see.
+ */
+export declare function indexFromOffset(offset: number, step: number, count: number): number;
+/**
+ * The same thing unrounded — where the track is *between* two slides.
+ *
+ * This is what an indicator that follows the drag reads: 1.4 means forty percent of the way
+ * from the second dot to the third, and the pill is stretched across both.
+ */
+export declare function progressFromOffset(offset: number, step: number, count: number): number;
+/**
+ * The slide `delta` steps away, wrapping or stopping at the ends.
+ *
+ * `delta` rather than a target, because both callers are arrows: the whole question is what
+ * "the next one" means at the last slide, and the answer is the `hasLoop` branch here rather
+ * than a check written twice.
+ */
+export declare function stepIndex(index: number, delta: number, count: number, hasLoop: boolean): number;

package/dist/utils/carousel.d.ts

@@ -0,0 +1,66 @@
+/** What a carousel's track measures, once its own width is known. */
+export type CarouselMetrics = {
+    /** How wide one slide is. */
+    itemWidth: number;
+    /** How far one step travels — a slide plus the gap after it. This is the snap interval. */
+    step: number;
+    /** Between two slides. The same number the caller gave, kept here so nothing recomputes it. */
+    gap: number;
+    /**
+     * The empty run at each end of the track.
+     *
+     * It is what makes the first and last slides sit where the middle ones do: without it a
+     * carousel that peeks would show its first slide flush against the edge and every other
+     * one inset, and the snap points would be right for one of those and wrong for the other.
+     */
+    inset: number;
+};
+export type CarouselMetricsOptions = {
+    /** The track's own width, measured. */
+    width: number;
+    /** How many whole slides are in view at once. */
+    itemsPerView: number;
+    /** Between two slides. */
+    gap: number;
+    /** How much of the neighbouring slide shows at each edge. Zero for a full-width carousel. */
+    peek: number;
+};
+/**
+ * The slide width and the snap interval a track of this width implies.
+ *
+ * ```
+ * ├ peek ┼ gap ┼──── item ────┼ gap ┼──── item ────┼ gap ┼ peek ┤
+ * ```
+ *
+ * The peek is a *sight* of the next slide, so it brings a gap of its own with it — the run
+ * it costs at each edge is `peek + gap`, not `peek`. Without that second term the peeking
+ * neighbour would touch the slide in view, and a carousel whose slides touch reads as one
+ * wide image that has been cut.
+ *
+ * Everything is clamped at zero: a width smaller than what the gaps and the peeks already
+ * claim asks for a negative slide, and a negative width renders as nothing at all rather
+ * than as the too-small thing the caller could have seen and fixed.
+ */
+export declare function carouselMetrics({ width, itemsPerView, gap, peek, }: CarouselMetricsOptions): CarouselMetrics;
+/**
+ * Which slide a scroll offset has landed on.
+ *
+ * Rounded, not floored: the slide the track is *nearest* to is the one it will snap to, and
+ * an indicator that waits for the halfway point to pass lags a drag the reader can see.
+ */
+export declare function indexFromOffset(offset: number, step: number, count: number): number;
+/**
+ * The same thing unrounded — where the track is *between* two slides.
+ *
+ * This is what an indicator that follows the drag reads: 1.4 means forty percent of the way
+ * from the second dot to the third, and the pill is stretched across both.
+ */
+export declare function progressFromOffset(offset: number, step: number, count: number): number;
+/**
+ * The slide `delta` steps away, wrapping or stopping at the ends.
+ *
+ * `delta` rather than a target, because both callers are arrows: the whole question is what
+ * "the next one" means at the last slide, and the answer is the `hasLoop` branch here rather
+ * than a check written twice.
+ */
+export declare function stepIndex(index: number, delta: number, count: number, hasLoop: boolean): number;

package/dist/utils/chart-palette.d.cts

@@ -0,0 +1,17 @@
+/**
+ * `count` colours for `count` series, walked out of one.
+ *
+ * **A ramp rather than a wheel**, and that is the design: a chart's series are usually the
+ * same quantity split — organic and paid traffic, mobile and desktop — so shades of one
+ * colour say "parts of a whole" where a rainbow says "unrelated things". It is also the only
+ * scheme that survives a caller changing the accent, because there is nothing to change but
+ * the seed.
+ *
+ * The walk is in **OKLab lightness**, which is perceptual: equal steps look equally far
+ * apart, where equal steps in sRGB crowd at the dark end. Chroma and hue are untouched, so
+ * every series is recognisably the seed colour.
+ *
+ * The seed keeps its own place in the ramp rather than sitting at one end — a two-series
+ * chart drawn from the accent should still contain the accent.
+ */
+export declare function chartPalette(seed: string, count: number): string[];

package/dist/utils/chart-palette.d.ts

@@ -0,0 +1,17 @@
+/**
+ * `count` colours for `count` series, walked out of one.
+ *
+ * **A ramp rather than a wheel**, and that is the design: a chart's series are usually the
+ * same quantity split — organic and paid traffic, mobile and desktop — so shades of one
+ * colour say "parts of a whole" where a rainbow says "unrelated things". It is also the only
+ * scheme that survives a caller changing the accent, because there is nothing to change but
+ * the seed.
+ *
+ * The walk is in **OKLab lightness**, which is perceptual: equal steps look equally far
+ * apart, where equal steps in sRGB crowd at the dark end. Chroma and hue are untouched, so
+ * every series is recognisably the seed colour.
+ *
+ * The seed keeps its own place in the ramp rather than sitting at one end — a two-series
+ * chart drawn from the accent should still contain the accent.
+ */
+export declare function chartPalette(seed: string, count: number): string[];