react-native-terra-ui 0.5.0 → 0.6.0

package/src/components/screen/types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 
 /**
  * Which axes of the `layout.screen.margin` token a scroll container pads its
@@ -8,7 +8,7 @@ import type { ReactNode } from 'react';
  * structural insets — the header height and the safe area — which apply
  * whether or not margins are on.
  */
-export type ScreenMargins = 'all' | 'x' | 'y' | 'none';
+export type ScreenMargins = "all" | "x" | "y" | "none";
 
 /**
  * Props shared by `Screen.ScrollView`, `Screen.FlatList` and `Screen.List`, so

package/src/components/screen/utils.ts

@@ -1,31 +1,18 @@
-import {
-  type ComponentType,
-  createElement,
-  isValidElement,
-  type ReactElement,
-} from 'react';
+import { type ComponentType, createElement, isValidElement, type ReactElement } from "react";
 
-import type { ScreenMargins } from './types';
+import type { ScreenMargins } from "./types";
 
-export type ListHeaderComponent =
-  | ComponentType
-  | ReactElement
-  | null
-  | undefined;
+export type ListHeaderComponent = ComponentType | ReactElement | null | undefined;
 
 /** Renders a `ListHeaderComponent`-shaped prop (element, component, or nullish) into an element. */
-export function renderListHeader(
-  ListHeaderComponent: ListHeaderComponent
-): ReactElement | null {
+export function renderListHeader(ListHeaderComponent: ListHeaderComponent): ReactElement | null {
   if (!ListHeaderComponent) return null;
   if (isValidElement(ListHeaderComponent)) return ListHeaderComponent;
   return createElement(ListHeaderComponent);
 }
 
 /** Whether `margins` pads the horizontal axis. */
-export const hasXMargin = (margins: ScreenMargins): boolean =>
-  margins === 'all' || margins === 'x';
+export const hasXMargin = (margins: ScreenMargins): boolean => margins === "all" || margins === "x";
 
 /** Whether `margins` pads the vertical axis (the bottom of the content area). */
-export const hasYMargin = (margins: ScreenMargins): boolean =>
-  margins === 'all' || margins === 'y';
+export const hasYMargin = (margins: ScreenMargins): boolean => margins === "all" || margins === "y";

package/src/components/slot/Slot.tsx

@@ -1,12 +1,6 @@
-import {
-  cloneElement,
-  isValidElement,
-  type ReactElement,
-  type ReactNode,
-  type Ref,
-} from 'react';
+import { cloneElement, isValidElement, type ReactElement, type ReactNode, type Ref } from "react";
 
-import { composeRefs, mergeProps } from './utils';
+import { composeRefs, mergeProps } from "./utils";
 
 type AnyProps = Record<string, unknown>;
 
@@ -23,16 +17,10 @@ export interface SlotProps {
  * rendering a wrapper. Composes `on*` handlers (child first), `style`
  * (`[slotStyle, childStyle]`), and refs.
  */
-export function Slot({
-  slotProps,
-  ownerName = 'Component',
-  children,
-}: SlotProps): ReactElement | null {
+export function Slot({ slotProps, ownerName = "Component", children }: SlotProps): ReactElement | null {
   if (!isValidElement(children)) {
     if (__DEV__ && children != null) {
-      console.error(
-        `[${ownerName}] \`asChild\` expects exactly one React element child.`
-      );
+      console.error(`[${ownerName}] \`asChild\` expects exactly one React element child.`);
     }
     return null;
   }
@@ -44,10 +32,7 @@ export function Slot({
   const { ref: childRef, ...restChildProps } = childProps;
 
   const merged = mergeProps(restSlotProps, restChildProps);
-  const composedRef = composeRefs(
-    slotRef as Ref<unknown> | undefined,
-    childRef as Ref<unknown> | undefined
-  );
+  const composedRef = composeRefs(slotRef as Ref<unknown> | undefined, childRef as Ref<unknown> | undefined);
 
   return cloneElement(child, {
     ...merged,

package/src/components/slot/index.ts

@@ -3,6 +3,6 @@
  * `asChild` patterns). Most apps should use component APIs directly.
  */
 
-export type { SlotProps } from './Slot';
-export { Slot } from './Slot';
-export { composeRefs, mergeProps } from './utils';
+export type { SlotProps } from "./Slot";
+export { Slot } from "./Slot";
+export { composeRefs, mergeProps } from "./utils";

package/src/components/slot/utils.ts

@@ -1,7 +1,7 @@
-import type { MutableRefObject, Ref } from 'react';
+import type { MutableRefObject, Ref } from "react";
 
 function assignRef<T>(ref: Ref<T> | undefined, value: T | null): void {
-  if (typeof ref === 'function') {
+  if (typeof ref === "function") {
     ref(value);
   } else if (ref != null) {
     (ref as MutableRefObject<T | null>).current = value;
@@ -31,10 +31,7 @@ const isEventHandler = (key: string): boolean => /^on[A-Z]/.test(key);
  * `ref`/`style` are intentionally not handled here — the caller composes refs
  * and passes a pre-merged `style` via `slotProps`.
  */
-export function mergeProps(
-  slotProps: AnyProps,
-  childProps: AnyProps
-): AnyProps {
+export function mergeProps(slotProps: AnyProps, childProps: AnyProps): AnyProps {
   const merged: AnyProps = { ...slotProps };
 
   for (const key of Object.keys(childProps)) {
@@ -42,7 +39,7 @@ export function mergeProps(
     const childValue = childProps[key];
 
     if (isEventHandler(key)) {
-      if (typeof slotValue === 'function' && typeof childValue === 'function') {
+      if (typeof slotValue === "function" && typeof childValue === "function") {
         merged[key] = (...args: unknown[]) => {
           (childValue as (...a: unknown[]) => void)(...args);
           (slotValue as (...a: unknown[]) => void)(...args);
@@ -50,7 +47,7 @@ export function mergeProps(
       } else {
         merged[key] = childValue ?? slotValue;
       }
-    } else if (key === 'style') {
+    } else if (key === "style") {
       merged.style = [slotValue, childValue].filter(Boolean);
     } else {
       merged[key] = childValue;

package/src/components/spinner/Spinner.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useId } from 'react';
+import { memo, useEffect, useId } from "react";
 
 import Animated, {
   cancelAnimation,
@@ -7,15 +7,14 @@ import Animated, {
   useSharedValue,
   withRepeat,
   withTiming,
-} from 'react-native-reanimated';
-import Svg, { Defs, G, LinearGradient, Path, Stop } from 'react-native-svg';
+} from "react-native-reanimated";
+import Svg, { Defs, G, LinearGradient, Path, Stop } from "react-native-svg";
+import { useUnistyles } from "react-native-unistyles";
 
-import { useUnistyles } from 'react-native-unistyles';
+import type { ColorToken } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
 
-import type { ColorToken } from '#theme/types';
-import { resolveThemeColor } from '#utils/resolve-theme-color';
-
-export type SpinnerSize = 'sm' | 'md' | 'lg';
+export type SpinnerSize = "sm" | "md" | "lg";
 
 export interface SpinnerProps {
   /** Spinner diameter preset. Defaults to `'md'`. */
@@ -30,10 +29,10 @@ const ROTATION_DURATION = 900;
 
 // HeroUI spinner arcs — two gradient-filled segments in a 24×24 viewBox.
 const LEFT_ARC =
-  'M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021';
+  "M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021";
 const RIGHT_ARC =
-  'M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118';
-const ARC_TRANSFORM = 'translate(1.5 1.625)';
+  "M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118";
+const ARC_TRANSFORM = "translate(1.5 1.625)";
 
 interface SpinnerIconProps {
   size: number;
@@ -42,47 +41,22 @@ interface SpinnerIconProps {
   gradientId2: string;
 }
 
-const SpinnerIcon = memo(function SpinnerIcon({
-  size,
-  color,
-  gradientId1,
-  gradientId2,
-}: SpinnerIconProps) {
+const SpinnerIcon = memo(function SpinnerIcon({ size, color, gradientId1, gradientId2 }: SpinnerIconProps) {
   return (
     <Svg width={size} height={size} viewBox="0 0 24 24">
       <Defs>
-        <LinearGradient
-          id={gradientId1}
-          x1="50%"
-          x2="50%"
-          y1="5.271%"
-          y2="91.793%"
-        >
+        <LinearGradient id={gradientId1} x1="50%" x2="50%" y1="5.271%" y2="91.793%">
           <Stop offset="0%" stopColor={color} />
           <Stop offset="100%" stopColor={color} stopOpacity={0.55} />
         </LinearGradient>
-        <LinearGradient
-          id={gradientId2}
-          x1="50%"
-          x2="50%"
-          y1="15.24%"
-          y2="87.15%"
-        >
+        <LinearGradient id={gradientId2} x1="50%" x2="50%" y1="15.24%" y2="87.15%">
           <Stop offset="0%" stopColor={color} stopOpacity={0} />
           <Stop offset="100%" stopColor={color} stopOpacity={0.55} />
         </LinearGradient>
       </Defs>
       <G fill="none">
-        <Path
-          d={LEFT_ARC}
-          fill={`url(#${gradientId1})`}
-          transform={ARC_TRANSFORM}
-        />
-        <Path
-          d={RIGHT_ARC}
-          fill={`url(#${gradientId2})`}
-          transform={ARC_TRANSFORM}
-        />
+        <Path d={LEFT_ARC} fill={`url(#${gradientId1})`} transform={ARC_TRANSFORM} />
+        <Path d={RIGHT_ARC} fill={`url(#${gradientId2})`} transform={ARC_TRANSFORM} />
       </G>
     </Svg>
   );
@@ -96,17 +70,15 @@ const SpinnerIcon = memo(function SpinnerIcon({
  * <Spinner size="md" color="content.accent" />
  * ```
  */
-export function Spinner({ size = 'md', color = 'text.accent' }: SpinnerProps) {
+export function Spinner({ size = "md", color = "text.accent" }: SpinnerProps) {
   const { theme } = useUnistyles();
   const id = useId();
   const gradientId1 = `spinner-def-1-${id}`;
   const gradientId2 = `spinner-def-2-${id}`;
   const resolvedColor =
     resolveThemeColor(color, theme) ??
-    (theme.color as unknown as Record<string, string | undefined>)[
-      'text.accent'
-    ] ??
-    '';
+    (theme.color as unknown as Record<string, string | undefined>)["text.accent"] ??
+    "";
 
   const dim = DIMENSION[size];
   const rotation = useSharedValue(0);
@@ -142,12 +114,7 @@ export function Spinner({ size = 'md', color = 'text.accent' }: SpinnerProps) {
       collapsable={false}
       style={[{ width: dim, height: dim }, animStyle]}
     >
-      <SpinnerIcon
-        size={dim}
-        color={resolvedColor}
-        gradientId1={gradientId1}
-        gradientId2={gradientId2}
-      />
+      <SpinnerIcon size={dim} color={resolvedColor} gradientId1={gradientId1} gradientId2={gradientId2} />
     </Animated.View>
   );
 }

package/src/components/spinner/index.ts

@@ -1,2 +1,2 @@
-export type { SpinnerProps, SpinnerSize } from './Spinner';
-export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSize } from "./Spinner";
+export { Spinner } from "./Spinner";

package/src/components/surface/Surface.tsx

@@ -1,15 +1,14 @@
-import { type ComponentRef, forwardRef } from 'react';
-import type { View } from 'react-native';
+import { type ComponentRef, forwardRef } from "react";
+import type { View } from "react-native";
 
-import { getDefaultRadius, getSurfaceElevation } from '#theme/registry';
-import type { ColorToken, ElevationKey } from '#theme/types';
-
-import { type BorderWidthInput, Box, type BoxProps } from '../box';
+import { getDefaultRadius, getSurfaceElevation } from "#theme/registry";
+import type { ColorToken, ElevationKey } from "#theme/types";
+import { type BorderWidthInput, Box, type BoxProps } from "../box";
 
 /** Background level of a {@link Surface}. */
-export type SurfaceVariant = 'base' | 'raised' | 'sunken' | 'transparent';
+export type SurfaceVariant = "base" | "raised" | "sunken" | "transparent";
 
-export interface SurfaceProps extends Omit<BoxProps, 'bg'> {
+export interface SurfaceProps extends Omit<BoxProps, "background"> {
   /** Background surface level. Defaults to `'base'`. */
   variant?: SurfaceVariant;
   /**
@@ -23,20 +22,17 @@ export interface SurfaceProps extends Omit<BoxProps, 'bg'> {
 }
 
 const VARIANT_BG: Record<SurfaceVariant, ColorToken> = {
-  base: 'surface.default',
-  raised: 'surface.raised',
-  sunken: 'surface.sunken',
-  transparent: 'transparent',
+  base: "surface.default",
+  raised: "surface.raised",
+  sunken: "surface.sunken",
+  transparent: "transparent",
 };
 
 /** Variant-aware hairline borders improve edge definition when fills are close. */
-const VARIANT_BORDER: Record<
-  SurfaceVariant,
-  { borderWidth?: BorderWidthInput; borderColor?: ColorToken }
-> = {
+const VARIANT_BORDER: Record<SurfaceVariant, { borderWidth?: BorderWidthInput; borderColor?: ColorToken }> = {
   base: {},
-  raised: { borderWidth: 'hairline', borderColor: 'border.subtle' },
-  sunken: { borderWidth: 'hairline', borderColor: 'border.default' },
+  raised: { borderWidth: "hairline", borderColor: "border.subtle" },
+  sunken: { borderWidth: "hairline", borderColor: "border.default" },
   transparent: {},
 };
 
@@ -45,13 +41,10 @@ const VARIANT_BORDER: Record<
  * theme-independent. `transparent` collapses to `'none'` because a shadow needs
  * an opaque fill behind it to render.
  */
-const resolveElevation = (
-  variant: SurfaceVariant,
-  elevation?: ElevationKey
-): ElevationKey => {
-  if (variant === 'transparent') return 'none';
+const resolveElevation = (variant: SurfaceVariant, elevation?: ElevationKey): ElevationKey => {
+  if (variant === "transparent") return "none";
   if (elevation !== undefined) return elevation;
-  if (variant === 'raised') return 'sm';
+  if (variant === "raised") return "sm";
   return getSurfaceElevation();
 };
 
@@ -75,23 +68,21 @@ const resolveElevation = (
  * </Surface>
  * ```
  */
-export const Surface = forwardRef<ComponentRef<typeof View>, SurfaceProps>(
-  function Surface(
-    { variant = 'base', elevation, radius, borderWidth, borderColor, ...rest },
-    ref
-  ) {
-    const variantBorder = VARIANT_BORDER[variant];
+export const Surface = forwardRef<ComponentRef<typeof View>, SurfaceProps>(function Surface(
+  { variant = "base", elevation, radius, borderWidth, borderColor, ...rest },
+  ref
+) {
+  const variantBorder = VARIANT_BORDER[variant];
 
-    return (
-      <Box
-        ref={ref}
-        bg={VARIANT_BG[variant]}
-        radius={radius ?? getDefaultRadius('surface')}
-        borderWidth={borderWidth ?? variantBorder.borderWidth}
-        borderColor={borderColor ?? variantBorder.borderColor}
-        elevation={resolveElevation(variant, elevation)}
-        {...rest}
-      />
-    );
-  }
-);
+  return (
+    <Box
+      ref={ref}
+      background={VARIANT_BG[variant]}
+      radius={radius ?? getDefaultRadius("surface")}
+      borderWidth={borderWidth ?? variantBorder.borderWidth}
+      borderColor={borderColor ?? variantBorder.borderColor}
+      elevation={resolveElevation(variant, elevation)}
+      {...rest}
+    />
+  );
+});

package/src/components/surface/index.ts

@@ -1,2 +1,2 @@
-export type { SurfaceProps, SurfaceVariant } from './Surface';
-export { Surface } from './Surface';
+export type { SurfaceProps, SurfaceVariant } from "./Surface";
+export { Surface } from "./Surface";

package/src/components/text/Text.tsx

@@ -1,31 +1,28 @@
-import { type ComponentRef, forwardRef } from 'react';
-import {
-  Text as RNText,
-  type TextProps as RNTextProps,
-  type TextStyle,
-} from 'react-native';
+import { type ComponentRef, forwardRef } from "react";
+import { Text as RNText, type TextProps as RNTextProps, type TextStyle } from "react-native";
+
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { StyleSheet, useUnistyles } from 'react-native-unistyles';
 import type {
   ColorToken,
   FontWeightToken,
   HeadingTextVariant,
   RoleTextVariant,
   TextVariant,
-} from '#theme/types';
-import type { Mutable } from '#types';
-import { resolveThemeColor } from '#utils/resolve-theme-color';
-import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from '#utils/typography';
+} from "#theme/types";
+import type { Mutable } from "#types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from "#utils/typography";
 
-export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+export type TextAlign = "left" | "center" | "right" | "justify";
 
 const HEADING_VARIANT_ALIAS: Record<HeadingTextVariant, RoleTextVariant> = {
-  h1: 'headline-lg',
-  h2: 'headline-md',
-  h3: 'title-lg',
-  h4: 'title-md',
-  h5: 'title-sm',
-  h6: 'label-lg',
+  h1: "headline-lg",
+  h2: "headline-md",
+  h3: "title-lg",
+  h4: "title-md",
+  h5: "title-sm",
+  h6: "label-lg",
 };
 
 function resolveTextVariant(variant: TextVariant): RoleTextVariant {
@@ -44,7 +41,7 @@ export interface TextProps extends RNTextProps {
   align?: TextAlign;
   italic?: boolean;
   underline?: boolean;
-  transform?: 'uppercase' | 'lowercase' | 'capitalize';
+  transform?: "uppercase" | "lowercase" | "capitalize";
   strikeThrough?: boolean;
   /** Truncate to a single line with a trailing ellipsis. */
   isTruncated?: boolean;
@@ -54,75 +51,68 @@ export interface TextProps extends RNTextProps {
  * Themed text primitive. Reads its scale from `theme.typography` and resolves
  * fonts by weight, honoring Dynamic Type with a per-variant scaling cap.
  */
-export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(
-  function Text(
-    {
-      variant = 'body-md',
-      color,
-      weight,
-      align,
-      italic,
-      underline,
-      transform,
-      strikeThrough,
-      isTruncated,
-      style,
-      numberOfLines,
-      ellipsizeMode,
-      maxFontSizeMultiplier,
-      ...rest
-    },
-    ref
-  ) {
-    const { theme } = useUnistyles();
-    const resolvedVariant = resolveTextVariant(variant);
-    const v = theme.typography.variants[resolvedVariant];
-    const effectiveWeight: FontWeightToken = weight ?? v.fontWeight;
-    const fontFamily = theme.typography.fonts[effectiveWeight];
-    const italicFamily = italic
-      ? theme.typography.fontsItalic?.[effectiveWeight]
-      : undefined;
-    const resolvedFamily = italicFamily ?? fontFamily;
-    const isSystemFont = resolvedFamily === SYSTEM_FONT;
+export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(
+  {
+    variant = "body-md",
+    color,
+    weight,
+    align,
+    italic,
+    underline,
+    transform,
+    strikeThrough,
+    isTruncated,
+    style,
+    numberOfLines,
+    ellipsizeMode,
+    maxFontSizeMultiplier,
+    ...rest
+  },
+  ref
+) {
+  const { theme } = useUnistyles();
+  const resolvedVariant = resolveTextVariant(variant);
+  const v = theme.typography.variants[resolvedVariant];
+  const effectiveWeight: FontWeightToken = weight ?? v.fontWeight;
+  const fontFamily = theme.typography.fonts[effectiveWeight];
+  const italicFamily = italic ? theme.typography.fontsItalic?.[effectiveWeight] : undefined;
+  const resolvedFamily = italicFamily ?? fontFamily;
+  const isSystemFont = resolvedFamily === SYSTEM_FONT;
 
-    const base: Mutable<TextStyle> = {
-      fontSize: v.fontSize,
-      lineHeight: v.lineHeight,
-      letterSpacing: v.letterSpacing,
-      color:
-        resolveThemeColor(color, theme) ??
-        (theme.color as unknown as Record<string, string | undefined>)[
-          'text.default'
-        ] ??
-        '',
-    };
-    // System font: apply numeric weight. Custom font: family encodes the weight.
-    if (isSystemFont) base.fontWeight = FONT_WEIGHT_VALUE[effectiveWeight];
-    else base.fontFamily = resolvedFamily;
+  const base: Mutable<TextStyle> = {
+    fontSize: v.fontSize,
+    lineHeight: v.lineHeight,
+    letterSpacing: v.letterSpacing,
+    color:
+      resolveThemeColor(color, theme) ??
+      (theme.color as unknown as Record<string, string | undefined>)["text.default"] ??
+      "",
+  };
+  // System font: apply numeric weight. Custom font: family encodes the weight.
+  if (isSystemFont) base.fontWeight = FONT_WEIGHT_VALUE[effectiveWeight];
+  else base.fontFamily = resolvedFamily;
 
-    if (align) base.textAlign = align;
-    // A dedicated italic family already renders slanted; `fontStyle` is only
-    // needed (and only works) for the system font or as a best-effort
-    // fallback when no italic family is configured for this weight.
-    if (italic && !italicFamily) base.fontStyle = 'italic';
-    if (underline && strikeThrough)
-      base.textDecorationLine = 'underline line-through';
-    else if (underline) base.textDecorationLine = 'underline';
-    else if (strikeThrough) base.textDecorationLine = 'line-through';
-    if (transform) base.textTransform = transform;
+  if (align) base.textAlign = align;
+  // A dedicated italic family already renders slanted; `fontStyle` is only
+  // needed (and only works) for the system font or as a best-effort
+  // fallback when no italic family is configured for this weight.
+  if (italic && !italicFamily) base.fontStyle = "italic";
+  if (underline && strikeThrough) base.textDecorationLine = "underline line-through";
+  else if (underline) base.textDecorationLine = "underline";
+  else if (strikeThrough) base.textDecorationLine = "line-through";
+  if (transform) base.textTransform = transform;
 
-    return (
-      <RNText
-        ref={ref}
-        style={[styles.root, base, style]}
-        maxFontSizeMultiplier={maxFontSizeMultiplier ?? v.maxFontSizeMultiplier}
-        numberOfLines={isTruncated ? 1 : numberOfLines}
-        ellipsizeMode={isTruncated ? 'tail' : ellipsizeMode}
-        {...rest}
-      />
-    );
-  }
-);
+  return (
+    <RNText
+      ref={ref}
+      style={[styles.root, base, style]}
+      maxFontSizeMultiplier={maxFontSizeMultiplier ?? v.maxFontSizeMultiplier}
+      numberOfLines={isTruncated ? 1 : numberOfLines}
+      ellipsizeMode={isTruncated ? "tail" : ellipsizeMode}
+      {...rest}
+    />
+  );
+});
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 //

package/src/components/text/index.ts

@@ -1,2 +1,2 @@
-export type { TextAlign, TextProps } from './Text';
-export { Text } from './Text';
+export type { TextAlign, TextProps } from "./Text";
+export { Text } from "./Text";