@ponti-studios/ui 1.6.0 → 1.7.0

package/src/lib/create-memory-storage.ts

@@ -1,24 +0,0 @@
-export function createMemoryStorage(): Storage {
-  const store = new Map<string, string>();
-
-  return {
-    get length() {
-      return store.size;
-    },
-    clear() {
-      store.clear();
-    },
-    getItem(key) {
-      return store.get(key) ?? null;
-    },
-    key(index) {
-      return Array.from(store.keys())[index] ?? null;
-    },
-    removeItem(key) {
-      store.delete(key);
-    },
-    setItem(key, value) {
-      store.set(key, value);
-    },
-  };
-}

package/src/native/card.tsx

@@ -1,36 +0,0 @@
-import * as React from "react";
-import { Text, View, type TextProps, type ViewProps } from "react-native";
-
-import { cn } from "../lib/utils";
-
-function Card({ className, ...props }: ViewProps) {
-  return (
-    <View className={cn("bg-card gap-4 rounded border border-border p-4", className)} {...props} />
-  );
-}
-
-function CardHeader({ className, ...props }: ViewProps) {
-  return <View className={cn("gap-1", className)} {...props} />;
-}
-
-function CardTitle({ className, ...props }: TextProps) {
-  return <Text className={cn("text-card-foreground text-xl", className)} {...props} />;
-}
-
-function CardDescription({ className, ...props }: TextProps) {
-  return <Text className={cn("text-muted-foreground text-xs", className)} {...props} />;
-}
-
-function CardAction({ className, ...props }: ViewProps) {
-  return <View className={cn("self-start", className)} {...props} />;
-}
-
-function CardContent({ className, ...props }: ViewProps) {
-  return <View className={className} {...props} />;
-}
-
-function CardFooter({ className, ...props }: ViewProps) {
-  return <View className={cn("flex-row items-center", className)} {...props} />;
-}
-
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/src/native/icon-button.tsx

@@ -1,41 +0,0 @@
-import type { ReactNode } from "react";
-import { Pressable } from "react-native";
-import { useCSSVariable } from "uniwind";
-
-interface IconButtonProps {
-  accessibilityLabel?: string;
-  children: ReactNode;
-  disabled?: boolean;
-  onPress?: () => void;
-  testID?: string;
-  variant?: "bordered" | "plain";
-}
-
-export function IconButton({
-  accessibilityLabel,
-  children,
-  disabled = false,
-  onPress,
-  testID,
-  variant = "bordered",
-}: IconButtonProps) {
-  const [border] = useCSSVariable(["--color-border"]) as string[];
-
-  return (
-    <Pressable
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
-      disabled={disabled}
-      onPress={onPress}
-      testID={testID}
-      className={`w-8 h-8 rounded-full border items-center justify-center ${variant === "plain" ? "border-0" : ""}`}
-      style={({ pressed }) => [
-        { borderColor: variant === "plain" ? "transparent" : border },
-        pressed && { opacity: 0.7 },
-        disabled && { opacity: 0.4 },
-      ]}
-    >
-      {children}
-    </Pressable>
-  );
-}

package/src/native/index.ts

@@ -1,38 +0,0 @@
-/**
- * React Native entry point.
- *
- * Kept as its own subpath (`@ponti-studios/ui/native`) because it is the only
- * part of the package that imports `react-native`. Nothing here may import web
- * code, so web consumers never pull React Native into their graph and native
- * consumers never pull in react-dom.
- */
-export {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "./card";
-export { IconButton } from "./icon-button";
-export { ListRow } from "./list-row";
-export { createMakeStyles, type NamedStyles } from "./make-styles";
-export { nativeShadows, type NativeShadowLayer } from "./shadows";
-export { TextField } from "./text-field";
-export { useColorMode, useThemeColors } from "./use-theme-colors";
-
-export {
-  borderRadius as nativeBorderRadius,
-  componentSize as nativeComponentSize,
-  fontFamily as nativeFontFamily,
-  screenMargin as nativeScreenMargin,
-  spacing as nativeSpacing,
-  streamItem as nativeStreamItem,
-  typography as nativeTypography,
-  type BorderRadiusToken,
-  type ComponentSizeToken,
-  type SpacingToken,
-  type TypographyVariant,
-} from "../styles/tokens/normalize-native";
-export { motion as nativeMotion } from "../styles/tokens";

package/src/native/list-row.tsx

@@ -1,67 +0,0 @@
-import type { ReactNode } from "react";
-import { Pressable, type StyleProp, Text, type TextStyle, View } from "react-native";
-import { useCSSVariable } from "uniwind";
-
-interface ListRowProps {
-  accessibilityLabel: string;
-  actionTestID?: string;
-  eyebrow?: string;
-  leading?: ReactNode;
-  onLongPress?: () => void;
-  onPress: () => void;
-  subtitle?: string | null;
-  testID?: string;
-  title: string;
-  titleStyle?: StyleProp<TextStyle>;
-  trailing?: ReactNode;
-}
-
-function ListRow({
-  accessibilityLabel,
-  actionTestID,
-  eyebrow,
-  leading,
-  onLongPress,
-  onPress,
-  subtitle,
-  testID,
-  title,
-  titleStyle,
-  trailing,
-}: ListRowProps) {
-  const [muted] = useCSSVariable(["--color-muted"]) as string[];
-
-  return (
-    <Pressable
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
-      onLongPress={onLongPress}
-      onPress={onPress}
-      className="flex-row items-center gap-3 min-h-14 border-b border-border px-4 py-2"
-      style={({ pressed }) => pressed && { backgroundColor: muted }}
-      testID={testID ?? actionTestID}
-    >
-      {leading ? <View className="items-center justify-center w-6">{leading}</View> : null}
-      <View className="flex-1 gap-0.5 min-w-0">
-        {eyebrow ? (
-          <Text className="text-caption2 text-muted-foreground tracking-[0.2]">{eyebrow}</Text>
-        ) : null}
-        <Text numberOfLines={2} className="text-body text-foreground" style={titleStyle}>
-          {title}
-        </Text>
-        {subtitle ? (
-          <Text
-            ellipsizeMode="tail"
-            numberOfLines={1}
-            className="text-caption1 text-muted-foreground"
-          >
-            {subtitle}
-          </Text>
-        ) : null}
-      </View>
-      {trailing ? <View className="items-center justify-center">{trailing}</View> : null}
-    </Pressable>
-  );
-}
-
-export { ListRow };

package/src/native/make-styles.ts

@@ -1,32 +0,0 @@
-import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
-
-export type NamedStyles = Record<string, ViewStyle | TextStyle | ImageStyle>;
-
-/**
- * Builds a `makeStyles` helper bound to a consuming app's own theme hook.
- *
- * The theme *shape* stays owned by the app — this package supplies only the
- * mechanism — so `Theme` is a type parameter rather than a type exported from
- * here. An app calls this once with its `useTheme` and uses the result
- * everywhere:
- *
- * ```ts
- * export const makeStyles = createMakeStyles(useTheme);
- *
- * const useStyles = makeStyles((theme) => ({
- *   card: { backgroundColor: theme.colors.card },
- * }));
- * ```
- *
- * The returned `useStyles` is a hook: it calls `useTheme` on every render, so
- * styles re-resolve when the color mode changes. Styles are returned as plain
- * objects rather than passed through `StyleSheet.create`, since they are
- * rebuilt per render and React Native accepts plain style objects directly.
- */
-export function createMakeStyles<Theme>(useTheme: () => Theme) {
-  return function makeStyles<T extends NamedStyles>(factory: (theme: Theme) => T & NamedStyles) {
-    return function useStyles(): T {
-      return factory(useTheme());
-    };
-  };
-}

package/src/native/shadows.ts

@@ -1,38 +0,0 @@
-import { shadows, type ShadowToken } from "../styles/tokens/index";
-
-/**
- * One layer of a shadow in the shape React Native's `boxShadow` expects.
- *
- * The shared shadow tokens are authored for CSS, where each dimension carries
- * its own unit. React Native takes bare numbers (density-independent pixels),
- * so the unit is dropped here rather than at every call site.
- */
-export interface NativeShadowLayer {
-  color: string;
-  offsetX: number;
-  offsetY: number;
-  blurRadius: number;
-  spreadDistance: number;
-  inset: boolean;
-}
-
-/**
- * The shared shadow scale translated to React Native's `boxShadow` shape.
- *
- * Every token maps to an array of layers, including `none`, which is a single
- * fully transparent layer rather than an empty array — that keeps the value
- * assignable wherever a real shadow is expected.
- */
-export const nativeShadows = Object.fromEntries(
-  Object.entries(shadows).map(([name, layers]) => [
-    name,
-    layers.map((layer) => ({
-      color: layer.color,
-      offsetX: layer.offsetX.value,
-      offsetY: layer.offsetY.value,
-      blurRadius: layer.blur.value,
-      spreadDistance: layer.spread.value,
-      inset: false,
-    })),
-  ]),
-) as Record<ShadowToken, NativeShadowLayer[]>;

package/src/native/text-field.tsx

@@ -1,34 +0,0 @@
-import { forwardRef, useState } from "react";
-import { TextInput, type TextInputProps } from "react-native";
-import { useCSSVariable } from "uniwind";
-
-export const TextField = forwardRef<TextInput, TextInputProps>(function TextField(
-  { onBlur, onFocus, style, ...props },
-  ref,
-) {
-  const [ring, borderInput, foreground, mutedForeground] = useCSSVariable([
-    "--color-ring",
-    "--color-input",
-    "--color-foreground",
-    "--color-muted-foreground",
-  ]) as string[];
-  const [focused, setFocused] = useState(false);
-
-  return (
-    <TextInput
-      {...props}
-      ref={ref}
-      onBlur={(event) => {
-        setFocused(false);
-        onBlur?.(event);
-      }}
-      onFocus={(event) => {
-        setFocused(true);
-        onFocus?.(event);
-      }}
-      placeholderTextColor={props.placeholderTextColor ?? mutedForeground}
-      className="rounded-md border min-h-11 px-4 py-3 text-base"
-      style={[{ borderColor: focused ? ring : borderInput, color: foreground }, style]}
-    />
-  );
-});

package/src/native/uniwind.d.ts

@@ -1 +0,0 @@
-/// <reference types="uniwind/types" />

package/src/native/use-theme-colors.ts

@@ -1,19 +0,0 @@
-import { useColorScheme } from "react-native";
-
-import { colorThemes, type ColorMode, type ColorTheme } from "../styles/tokens/index";
-
-/**
- * Resolves the active color mode from the OS appearance setting.
- *
- * React Native's `useColorScheme` reports `null` before the appearance module
- * has settled, so anything that isn't explicitly "dark" resolves to light —
- * callers always receive a concrete mode rather than having to handle null.
- */
-export function useColorMode(): ColorMode {
-  return useColorScheme() === "dark" ? "dark" : "light";
-}
-
-/** The full color token set for the active OS appearance. */
-export function useThemeColors(): ColorTheme {
-  return colorThemes[useColorMode()];
-}

package/src/styles/tokens/foundations.stories.tsx

@@ -1,109 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-const meta: Meta = { title: "Foundations/Tailwind Defaults", parameters: { layout: "fullscreen" } };
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const SpacingAndType: Story = {
-  render: () => (
-    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
-      <section className="grid gap-6">
-        <header className="grid gap-2">
-          <p className="text-muted-foreground text-sm">Foundations / rhythm</p>
-          <h1 className="text-4xl font-semibold tracking-tight">Tailwind defaults, directly.</h1>
-          <p className="text-muted-foreground max-w-2xl text-base">
-            The specimen uses the shared Tailwind spacing and type scales.
-          </p>
-        </header>
-        <div className="grid gap-2">
-          {[1, 2, 3, 4, 6, 8, 12, 16].map((size) => (
-            <div key={size} className="flex items-center gap-3">
-              <span className="text-muted-foreground w-12 font-mono text-xs tabular-nums">
-                {size}
-              </span>
-              <div
-                className="bg-accent h-3 rounded-sm"
-                style={{ width: `calc(var(--spacing) * ${size})` }}
-                aria-hidden="true"
-              />
-            </div>
-          ))}
-        </div>
-      </section>
-      <section className="border-border bg-card grid gap-5 rounded-xl border p-6">
-        <h2 className="text-2xl font-semibold">Typography scale</h2>
-        <div className="grid gap-4">
-          {(
-            [
-              "text-xs",
-              "text-sm",
-              "text-base",
-              "text-lg",
-              "text-xl",
-              "text-2xl",
-              "text-4xl",
-            ] as const
-          ).map((size) => (
-            <p key={size} className={`${size} text-foreground`}>
-              {size}
-            </p>
-          ))}
-        </div>
-      </section>
-    </main>
-  ),
-};
-
-export const Surfaces: Story = {
-  render: () => (
-    <main className="bg-background text-foreground grid min-h-screen gap-6 p-6 md:p-10">
-      <header className="grid gap-2">
-        <p className="text-muted-foreground text-sm">Foundations / surfaces</p>
-        <h1 className="text-4xl font-semibold tracking-tight">Standard semantic layers.</h1>
-      </header>
-      <div className="grid gap-4 md:grid-cols-2">
-        {[
-          ["Background", "bg-background"],
-          ["Card", "bg-card"],
-          ["Popover", "bg-popover"],
-          ["Muted", "bg-muted"],
-        ].map(([name, className]) => (
-          <div
-            key={name}
-            className={`${className} border-border grid min-h-40 content-start gap-2 rounded-xl border p-5`}
-          >
-            <h2 className="text-lg font-semibold">{name}</h2>
-            <p className="text-muted-foreground text-sm">{className}</p>
-          </div>
-        ))}
-      </div>
-    </main>
-  ),
-};
-
-export const Motion: Story = {
-  render: () => (
-    <main className="bg-background text-foreground grid min-h-screen gap-8 p-6 md:p-10">
-      <header className="grid gap-2">
-        <p className="text-muted-foreground text-sm">Foundations / motion</p>
-        <h1 className="text-4xl font-semibold tracking-tight">
-          Motion stays standard and reducible.
-        </h1>
-      </header>
-      <div className="grid gap-4 sm:grid-cols-3">
-        <div className="motion-safe:animate-in motion-safe:fade-in-0 border-border bg-card grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-reduce:animate-none">
-          <span className="text-lg font-semibold">Enter</span>
-          <span className="text-muted-foreground text-sm">150ms</span>
-        </div>
-        <button className="border-border bg-card hover:bg-accent focus-visible:ring-ring grid min-h-32 place-content-center gap-2 rounded-xl border p-5 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none motion-reduce:transition-none">
-          <span className="text-lg font-semibold">Press</span>
-          <span className="text-muted-foreground text-sm">System focus</span>
-        </button>
-        <div className="border-border bg-card grid min-h-32 place-content-center gap-2 rounded-xl border p-5 motion-safe:animate-pulse motion-reduce:animate-none">
-          <span className="text-lg font-semibold">Loading</span>
-          <span className="text-muted-foreground text-sm">Stable geometry</span>
-        </div>
-      </div>
-    </main>
-  ),
-};