@krizaka/ui 2.9.0 → 3.0.0

package/dist/native/list.js

@@ -0,0 +1,135 @@
+// src/native/list.tsx
+import { useInfiniteQuery } from "@krizaka/query";
+import { EmptyState, Skeleton, Spinner, useTheme } from "@krizaka/ui/native";
+import { FlashList } from "@shopify/flash-list";
+import * as React from "react";
+import { RefreshControl, StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SkeletonRow() {
+  return /* @__PURE__ */ jsxs(View, { style: styles.skeleton, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(Skeleton, { shape: "circle", width: 40, height: 40 }),
+    /* @__PURE__ */ jsxs(View, { style: styles.skeletonText, children: [
+      /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "35%" })
+    ] })
+  ] });
+}
+var isWords = (value) => typeof value === "object" && value !== null && !React.isValidElement(value) && "title" in value;
+function List({
+  data,
+  renderItem,
+  keyExtractor,
+  label,
+  separator = "full",
+  loading,
+  loadingRows = 6,
+  error,
+  empty,
+  refreshing = false,
+  onRefresh,
+  onEndReached,
+  endReachedThreshold = 0.5,
+  loadingMore,
+  loadingMoreLabel = "Loading more",
+  header,
+  footer,
+  extraData,
+  ref,
+  contentContainerStyle,
+  style
+}) {
+  const { theme } = useTheme();
+  const Separator = React.useMemo(
+    () => separator === "none" ? void 0 : function ListSeparator() {
+      return /* @__PURE__ */ jsx(View, { style: [styles.separator, { backgroundColor: theme.borderSubtle }, separator === "inset" && styles.inset] });
+    },
+    [separator, theme.borderSubtle]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsxs(View, { role: "group", style: [styles.fill, style], "aria-busy": true, accessibilityLabel: label, children: [
+      header,
+      Array.from({ length: loadingRows }, (_, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        i > 0 && Separator ? /* @__PURE__ */ jsx(Separator, {}) : null,
+        /* @__PURE__ */ jsx(SkeletonRow, {})
+      ] }, i))
+    ] });
+  }
+  const state = error ? /* @__PURE__ */ jsx(View, { role: "alert", style: styles.state, children: error }) : isWords(empty) ? /* @__PURE__ */ jsx(EmptyState, { title: empty.title, description: empty.description, action: empty.action, style: styles.state }) : empty ? /* @__PURE__ */ jsx(View, { style: styles.state, children: empty }) : null;
+  return /* @__PURE__ */ jsx(
+    FlashList,
+    {
+      ref,
+      accessibilityLabel: label,
+      focusable: true,
+      data: error ? [] : data,
+      renderItem: ({ item, index }) => renderItem(item, index),
+      keyExtractor,
+      extraData,
+      ItemSeparatorComponent: Separator,
+      ListHeaderComponent: header,
+      ListEmptyComponent: state,
+      ListFooterComponent: loadingMore || footer ? /* @__PURE__ */ jsxs(View, { children: [
+        loadingMore ? /* @__PURE__ */ jsx(View, { style: styles.more, children: /* @__PURE__ */ jsx(Spinner, { label: loadingMoreLabel }) }) : null,
+        footer
+      ] }) : null,
+      onEndReached,
+      onEndReachedThreshold: endReachedThreshold,
+      refreshControl: onRefresh ? /* @__PURE__ */ jsx(RefreshControl, { refreshing, onRefresh, tintColor: theme.accent, colors: [theme.accent], progressBackgroundColor: theme.surface1 }) : void 0,
+      contentContainerStyle,
+      style
+    }
+  );
+}
+function useInfiniteList({
+  queryKey,
+  queryFn,
+  initialPageParam,
+  getNextPageParam,
+  getItems,
+  enabled,
+  staleTime
+}) {
+  const query = useInfiniteQuery({
+    queryKey,
+    queryFn: ({ pageParam, signal }) => queryFn({ pageParam, signal }),
+    initialPageParam,
+    getNextPageParam: (last, pages2) => getNextPageParam(last, pages2) ?? void 0,
+    enabled,
+    staleTime,
+    meta: { list: true }
+  });
+  const [pulled, setPulled] = React.useState(false);
+  const { data: pages, hasNextPage, isFetchingNextPage, fetchNextPage, refetch, isPending, isError, isRefetching } = query;
+  const data = React.useMemo(() => (pages?.pages ?? []).flatMap((page) => getItems(page)), [pages]);
+  return {
+    listProps: {
+      data,
+      loading: isPending && enabled !== false,
+      refreshing: pulled && isRefetching,
+      onRefresh: () => {
+        setPulled(true);
+        void refetch().finally(() => setPulled(false));
+      },
+      onEndReached: () => {
+        if (hasNextPage && !isFetchingNextPage && !isError) void fetchNextPage();
+      },
+      loadingMore: isFetchingNextPage
+    },
+    error: isError && !pages ? query.error : null,
+    query
+  };
+}
+var styles = StyleSheet.create({
+  fill: { flex: 1 },
+  separator: { height: StyleSheet.hairlineWidth },
+  inset: { marginLeft: 68 },
+  skeleton: { flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
+  skeletonText: { flex: 1, gap: 8 },
+  state: { paddingHorizontal: 16, paddingVertical: 32 },
+  more: { paddingVertical: 20, alignItems: "center" }
+});
+export {
+  List,
+  useInfiniteList
+};
+//# sourceMappingURL=list.js.map

package/dist/native/list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/native/list.tsx"],"sourcesContent":["// @krizaka/ui/native/list — its own entry, because it imports FlashList v2 (@shopify/flash-list) and @krizaka/query:\n// optional peers, installed only by the apps that list. The theme and the states come from @krizaka/ui/native (one\n// theme context); the server state comes from @krizaka/query (one QueryClient context — never @tanstack/* here).\nimport { type InfiniteData, useInfiniteQuery, type UseInfiniteQueryResult } from \"@krizaka/query\";\nimport { EmptyState, Skeleton, Spinner, useTheme } from \"@krizaka/ui/native\";\nimport { FlashList, type FlashListRef } from \"@shopify/flash-list\";\nimport * as React from \"react\";\nimport { RefreshControl, type StyleProp, StyleSheet, View, type ViewStyle } from \"react-native\";\n\nexport type ListProps<T> = {\n  /** The items (stable: a query's data, state). */\n  data: readonly T[];\n  /** Draws one item. */\n  renderItem: (item: T, index: number) => React.ReactElement | null;\n  /** A stable key per item (an id): FlashList recycles the views by it. */\n  keyExtractor: (item: T, index: number) => string;\n  /** The accessible name of the list (\"Notifications\"), passed translated. */\n  label: string;\n  /** A hairline between items: `full` (default), `inset` (aligned with the text after an avatar), `none`. */\n  separator?: \"full\" | \"inset\" | \"none\";\n  /** The first page is loading: skeleton rows (`loadingRows` of them) in place of the items. */\n  loading?: boolean;\n  /** How many skeleton rows while loading. Default 6. */\n  loadingRows?: number;\n  /** A failure, shown in place of the items (an `ErrorState` with a retry). */\n  error?: React.ReactNode;\n  /** Shown when there is no item (an `EmptyState`, or its words: `{ title, description, action }`). */\n  empty?: React.ReactNode | { title: string; description?: string; action?: React.ReactNode };\n  /** The list is reloading after a pull: the system's spinner at the top. */\n  refreshing?: boolean;\n  /** Pull to refresh: called when the person pulls the list down. */\n  onRefresh?: () => void;\n  /** Called when the end comes near: load the next page. */\n  onEndReached?: () => void;\n  /** How far from the end `onEndReached` fires, in screens. Default 0.5. */\n  endReachedThreshold?: number;\n  /** The next page is loading: a spinner under the last item, named by `loadingMoreLabel`. */\n  loadingMore?: boolean;\n  /** The name of that spinner (\"Loading more\"), passed translated. */\n  loadingMoreLabel?: string;\n  /** Above the first item (a title, filters): scrolls with the list. */\n  header?: React.ReactElement;\n  /** Under the last item. */\n  footer?: React.ReactElement;\n  /** Extra data the items depend on (a selection): a change re-renders the visible items. */\n  extraData?: unknown;\n  /** The FlashList, for `scrollToIndex` / `scrollToOffset`. */\n  ref?: React.Ref<FlashListRef<T>>;\n  /** Styles of the list's content (padding). */\n  contentContainerStyle?: StyleProp<ViewStyle>;\n  /** Styles merged last, on the list. */\n  style?: StyleProp<ViewStyle>;\n};\n\nfunction SkeletonRow() {\n  return (\n    <View style={styles.skeleton} aria-hidden>\n      <Skeleton shape=\"circle\" width={40} height={40} />\n      <View style={styles.skeletonText}>\n        <Skeleton width=\"60%\" />\n        <Skeleton width=\"35%\" />\n      </View>\n    </View>\n  );\n}\n\nconst isWords = (value: unknown): value is { title: string; description?: string; action?: React.ReactNode } =>\n  typeof value === \"object\" && value !== null && !React.isValidElement(value) && \"title\" in value;\n\n/**\n * A long list on FlashList v2 (recycled views, 60 fps): separators, skeleton rows while the first page loads, an empty\n * or error state in place of the items, pull to refresh tinted with the theme, the next page asked for near the end and\n * a spinner under the last item. With `useInfiniteList`, a paginated API is one hook and one component.\n */\nexport function List<T>({\n  data,\n  renderItem,\n  keyExtractor,\n  label,\n  separator = \"full\",\n  loading,\n  loadingRows = 6,\n  error,\n  empty,\n  refreshing = false,\n  onRefresh,\n  onEndReached,\n  endReachedThreshold = 0.5,\n  loadingMore,\n  loadingMoreLabel = \"Loading more\",\n  header,\n  footer,\n  extraData,\n  ref,\n  contentContainerStyle,\n  style,\n}: ListProps<T>) {\n  const { theme } = useTheme();\n  const Separator = React.useMemo(\n    () =>\n      separator === \"none\"\n        ? undefined\n        : function ListSeparator() {\n            return <View style={[styles.separator, { backgroundColor: theme.borderSubtle }, separator === \"inset\" && styles.inset]} />;\n          },\n    [separator, theme.borderSubtle],\n  );\n\n  if (loading) {\n    return (\n      <View role=\"group\" style={[styles.fill, style]} aria-busy accessibilityLabel={label}>\n        {header}\n        {Array.from({ length: loadingRows }, (_, i) => (\n          <React.Fragment key={i}>\n            {i > 0 && Separator ? <Separator /> : null}\n            <SkeletonRow />\n          </React.Fragment>\n        ))}\n      </View>\n    );\n  }\n\n  const state = error ? (\n    <View role=\"alert\" style={styles.state}>\n      {error}\n    </View>\n  ) : isWords(empty) ? (\n    <EmptyState title={empty.title} description={empty.description} action={empty.action} style={styles.state} />\n  ) : empty ? (\n    <View style={styles.state}>{empty}</View>\n  ) : null;\n\n  return (\n    <FlashList\n      ref={ref}\n      accessibilityLabel={label}\n      // Reachable from a keyboard (a hardware keyboard, the web): a scrolling area takes the focus to be scrolled.\n      focusable\n      data={error ? [] : data}\n      renderItem={({ item, index }) => renderItem(item, index)}\n      keyExtractor={keyExtractor}\n      extraData={extraData}\n      ItemSeparatorComponent={Separator}\n      ListHeaderComponent={header}\n      ListEmptyComponent={state}\n      ListFooterComponent={\n        loadingMore || footer ? (\n          <View>\n            {loadingMore ? (\n              <View style={styles.more}>\n                <Spinner label={loadingMoreLabel} />\n              </View>\n            ) : null}\n            {footer}\n          </View>\n        ) : null\n      }\n      onEndReached={onEndReached}\n      onEndReachedThreshold={endReachedThreshold}\n      refreshControl={\n        onRefresh ? (\n          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={theme.accent} colors={[theme.accent]} progressBackgroundColor={theme.surface1} />\n        ) : undefined\n      }\n      contentContainerStyle={contentContainerStyle as never}\n      style={style}\n    />\n  );\n}\n\nexport type InfiniteListOptions<TPage, TItem, TParam> = {\n  /** The query key (a `defineKeys` key): one cache entry for every page. */\n  queryKey: readonly unknown[];\n  /** Fetches one page (`krizakaFetch`), from its page parameter (a cursor, a page number). */\n  queryFn: (context: { pageParam: TParam; signal: AbortSignal }) => Promise<TPage>;\n  /** The parameter of the first page (`null` for a cursor, `1` for numbers). */\n  initialPageParam: TParam;\n  /** The parameter of the page after `lastPage`, or `undefined` / `null` when there is none. */\n  getNextPageParam: (lastPage: TPage, pages: TPage[]) => TParam | undefined | null;\n  /** The items of a page (`(page) => page.items`). */\n  getItems: (page: TPage) => readonly TItem[];\n  /** `false` to wait (a missing id). Default `true`. */\n  enabled?: boolean;\n  /** How long a page stays fresh, in ms (the client's default otherwise). */\n  staleTime?: number;\n};\n\n/** What `useInfiniteList` gives: the props of `List` to spread, and the query itself. */\nexport type InfiniteListResult<TPage, TItem, TParam = unknown> = {\n  /** `{ data, loading, refreshing, onRefresh, onEndReached, loadingMore }` — spread on `<List>`. */\n  listProps: Pick<ListProps<TItem>, \"data\" | \"loading\" | \"refreshing\" | \"onRefresh\" | \"onEndReached\" | \"loadingMore\">;\n  /** The failure of the first page, if any: render an `ErrorState` in `error` (a later page's failure keeps the list). */\n  error: Error | null;\n  /** The query of @krizaka/query (`refetch`, `status`, the pages…). */\n  query: UseInfiniteQueryResult<InfiniteData<TPage, TParam>, Error>;\n};\n\n/**\n * A paginated API as a list: `useInfiniteQuery` of @krizaka/query (a list: `meta: { list: true }`, so an error stays in\n * the list), the pages flattened, the next page asked for by `onEndReached` (once at a time, only when there is one),\n * pull to refresh — spread `listProps` on `<List>`.\n */\nexport function useInfiniteList<TPage, TItem, TParam = unknown>({\n  queryKey,\n  queryFn,\n  initialPageParam,\n  getNextPageParam,\n  getItems,\n  enabled,\n  staleTime,\n}: InfiniteListOptions<TPage, TItem, TParam>): InfiniteListResult<TPage, TItem, TParam> {\n  const query = useInfiniteQuery<TPage, Error, InfiniteData<TPage, TParam>, readonly unknown[], TParam>({\n    queryKey,\n    queryFn: ({ pageParam, signal }) => queryFn({ pageParam: pageParam as TParam, signal }),\n    initialPageParam,\n    getNextPageParam: (last, pages) => getNextPageParam(last, pages) ?? undefined,\n    enabled,\n    staleTime,\n    meta: { list: true },\n  });\n  const [pulled, setPulled] = React.useState(false);\n  const { data: pages, hasNextPage, isFetchingNextPage, fetchNextPage, refetch, isPending, isError, isRefetching } = query;\n  // eslint-disable-next-line react-hooks/exhaustive-deps -- `getItems` is a projection; the pages decide\n  const data = React.useMemo(() => (pages?.pages ?? []).flatMap((page) => getItems(page)), [pages]);\n  return {\n    listProps: {\n      data,\n      loading: isPending && enabled !== false,\n      refreshing: pulled && isRefetching,\n      onRefresh: () => {\n        setPulled(true);\n        void refetch().finally(() => setPulled(false));\n      },\n      onEndReached: () => {\n        if (hasNextPage && !isFetchingNextPage && !isError) void fetchNextPage();\n      },\n      loadingMore: isFetchingNextPage,\n    },\n    error: isError && !pages ? query.error : null,\n    query,\n  };\n}\n\nconst styles = StyleSheet.create({\n  fill: { flex: 1 },\n  separator: { height: StyleSheet.hairlineWidth },\n  inset: { marginLeft: 68 },\n  skeleton: { flexDirection: \"row\", alignItems: \"center\", gap: 12, paddingHorizontal: 16, paddingVertical: 14 },\n  skeletonText: { flex: 1, gap: 8 },\n  state: { paddingHorizontal: 16, paddingVertical: 32 },\n  more: { paddingVertical: 20, alignItems: \"center\" },\n});\n"],"mappings":"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","names":["pages"]}

package/dist/native.d.ts

@@ -19,7 +19,7 @@ type CountdownUnits = {
     s: string;
 };
 
-type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia";
+type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia" | "yororis";
 
 type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 type AvatarProps = Omit<ViewProps, "children"> & {
@@ -349,16 +349,16 @@ declare function KrizakaMark({ size, animated, title, neutral }: NativeMarkProps
 /**
  * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one
  * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,
- * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon) and the lovebird that
- * introduces (2026-10, with Yazakia: "l'inséparable présente"), redrawn on one 120 × 120 grid so that any bird can
- * wear any mood.
+ * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that
+ * introduces (2026-10, with Yazakia: "l'inséparable présente") and the crane that listens (2026-10, with Yororis:
+ * "la grue écoute"), redrawn on one 120 × 120 grid so that any bird can wear any mood.
  *
  * Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,
  * `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives
  * each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades
  * and highlights are black and white at a low opacity over the role, so they hold in both themes.
  */
-declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon", "lovebird"];
+declare const MASCOT_BIRDS: readonly ["falcon", "owl", "duck", "flamingo", "pigeon", "lovebird", "crane"];
 type MascotBird = (typeof MASCOT_BIRDS)[number];
 declare const MASCOT_MOODS: readonly ["welcome", "thinking", "success", "empty", "error"];
 type MascotMood = (typeof MASCOT_MOODS)[number];
@@ -370,7 +370,7 @@ declare const SIZE: {
     readonly lg: 128;
 };
 type MascotStateProps = Omit<ViewProps, "children"> & {
-    /** The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions). */
+    /** The bird whose job the moment is about: `owl` (documents), `falcon` (security), `duck` (code), `flamingo` (answers, payments), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening). */
     bird?: MascotBird;
     /** The moment: `empty` (default), `thinking`, `success`, `error`, `welcome`. */
     mood?: MascotMood;
@@ -405,7 +405,7 @@ declare const LoadingState: (props: PresetProps) => React.JSX.Element;
 declare const WelcomeState: (props: PresetProps) => React.JSX.Element;
 
 interface MascotProps {
-    /** Which bird of the flock: `falcon` (watch), `owl` (reading), `duck` (building), `flamingo` (answers), `pigeon` (delivery), `lovebird` (introductions). */
+    /** Which bird of the flock: `falcon` (watch), `owl` (reading), `duck` (building), `flamingo` (answers), `pigeon` (delivery), `lovebird` (introductions), `crane` (listening). */
     bird?: MascotBird;
     /** What the moment is: `welcome`, `thinking`, `success`, `empty` or `error`. */
     mood?: MascotMood;
@@ -421,7 +421,7 @@ interface MascotProps {
     style?: ViewStyle;
 }
 /**
- * One of the six Krizaka birds in one mood, for React Native — the geometry of the web `Mascot`
+ * One of the seven Krizaka birds in one mood, for React Native — the geometry of the web `Mascot`
  * (mascots/geometry.ts), in the theme's accent by default.
  */
 declare function Mascot({ bird, mood, tone, size, animated, title, style }: MascotProps): React__default.JSX.Element;
@@ -807,4 +807,11 @@ declare function Toaster({ closeLabel, position, offset, duration, max }: Toaste
  */
 declare function YazakiaMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
 
-export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Countdown, type CountdownProps, type CountdownUnits, EmptyState, type EmptyStateProps, ErrorState, GoalGauge, type GoalGaugeProps, IconButton, type IconButtonProps, KrizakaMark, LoadingState, Mascot, type MascotProps, MascotState, type MascotStateProps, type Mode, type Motion, type NativeMarkProps, OrazakaMark, OrochiaMark, Pagination, type PaginationLabels, type PaginationProps, Phoenix, type PhoenixProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, type Radius, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, SuccessState, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, WelcomeState, YazakiaMark, alpha, splitDuration, textStyles, toast, useCountdown, useReducedMotion, useTheme };
+/**
+ * The Yororis mark for React Native — the geometry of the web mark (marks/yororis-geometry.ts), "the hold": two filled
+ * leaves cupping a warm core. The orbit and its one node, the moment, turn slowly; the core breathes; still when the
+ * system reduces motion.
+ */
+declare function YororisMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Countdown, type CountdownProps, type CountdownUnits, EmptyState, type EmptyStateProps, ErrorState, GoalGauge, type GoalGaugeProps, IconButton, type IconButtonProps, KrizakaMark, LoadingState, Mascot, type MascotProps, MascotState, type MascotStateProps, type Mode, type Motion, type NativeMarkProps, OrazakaMark, OrochiaMark, Pagination, type PaginationLabels, type PaginationProps, Phoenix, type PhoenixProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, type Radius, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, SuccessState, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, WelcomeState, YazakiaMark, YororisMark, alpha, splitDuration, textStyles, toast, useCountdown, useReducedMotion, useTheme };