@ponti-studios/ui 1.6.0 → 1.8.0

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>
-  ),
-};

package/src/styles/tokens/generated/native.generated.ts

@@ -1,266 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export default {
-  text: {
-    "large-title": {
-      fontSize: {
-        value: 34,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 41,
-        unit: "px",
-      },
-      fontWeight: 700,
-      letterSpacing: {
-        value: -0.6,
-        unit: "px",
-      },
-    },
-    title1: {
-      fontSize: {
-        value: 28,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 34,
-        unit: "px",
-      },
-      fontWeight: 700,
-      letterSpacing: {
-        value: -0.4,
-        unit: "px",
-      },
-    },
-    title2: {
-      fontSize: {
-        value: 22,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 28,
-        unit: "px",
-      },
-      fontWeight: 600,
-      letterSpacing: {
-        value: -0.2,
-        unit: "px",
-      },
-    },
-    headline: {
-      fontSize: {
-        value: 17,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 22,
-        unit: "px",
-      },
-      fontWeight: 600,
-      letterSpacing: {
-        value: -0.1,
-        unit: "px",
-      },
-    },
-    body: {
-      fontSize: {
-        value: 17,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 24,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: 0,
-        unit: "px",
-      },
-    },
-    callout: {
-      fontSize: {
-        value: 16,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 22,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: -0.1,
-        unit: "px",
-      },
-    },
-    subhead: {
-      fontSize: {
-        value: 15,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 20,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: 0,
-        unit: "px",
-      },
-    },
-    footnote: {
-      fontSize: {
-        value: 13,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 18,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: 0,
-        unit: "px",
-      },
-    },
-    caption1: {
-      fontSize: {
-        value: 12,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 16,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: 0,
-        unit: "px",
-      },
-    },
-    caption2: {
-      fontSize: {
-        value: 11,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 14,
-        unit: "px",
-      },
-      fontWeight: 500,
-      letterSpacing: {
-        value: 0.2,
-        unit: "px",
-      },
-    },
-    display: {
-      fontSize: {
-        value: 40,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 44,
-        unit: "px",
-      },
-      fontWeight: 700,
-      letterSpacing: {
-        value: -1.2,
-        unit: "px",
-      },
-    },
-    overline: {
-      fontSize: {
-        value: 11,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 16,
-        unit: "px",
-      },
-      fontWeight: 500,
-      letterSpacing: {
-        value: 0.8,
-        unit: "px",
-      },
-      textTransform: "uppercase",
-    },
-    mono: {
-      fontFamily: "Menlo",
-      fontSize: {
-        value: 12,
-        unit: "px",
-      },
-      lineHeight: {
-        value: 16,
-        unit: "px",
-      },
-      fontWeight: 400,
-      letterSpacing: {
-        value: 0,
-        unit: "px",
-      },
-    },
-  },
-  space: {
-    sm: "0.5rem",
-    md: "0.75rem",
-    lg: "1rem",
-    xl: "1.5rem",
-  },
-  "screen-margin": "1rem",
-  "component-size": {
-    sm: "1rem",
-    md: "1.5rem",
-    lg: "2rem",
-    xl: "2.75rem",
-    icon: "1.25rem",
-  },
-  "border-radius": {
-    sm: "0.25rem",
-    md: "0.375rem",
-    lg: "0.5rem",
-    icon: "0.375rem",
-  },
-  "stream-item": {
-    "border-radius": "0rem",
-    "border-width": "1px",
-    gap: "0.75rem",
-    "icon-size": "1.25rem",
-    "min-height": "3.5rem",
-    "padding-horizontal": "1rem",
-    "padding-vertical": "0.5rem",
-  },
-  "font-family": {
-    primary: "System",
-    mono: "Menlo",
-  },
-  motion: {
-    duration: {
-      instant: "0ms",
-      quick: "150ms",
-      standard: "300ms",
-      deliberate: "500ms",
-    },
-    easing: {
-      enter: [0, 0, 0.2, 1],
-      exit: [0.4, 0, 1, 1],
-      inOut: [0.4, 0, 0.2, 1],
-    },
-    distance: {
-      rowEnter: "0.5rem",
-      sceneReveal: "2rem",
-    },
-    opacity: {
-      hidden: 0,
-      visible: 1,
-      disabled: 0.5,
-    },
-    interruption: {
-      policy: "cancel-and-settle",
-    },
-    reducedMotion: {
-      policy: "replace-transform-with-opacity",
-    },
-  },
-};

package/src/styles/tokens/normalize-native.ts

@@ -1,88 +0,0 @@
-import nativeGenerated from "./generated/native.generated";
-
-const toPixels = (value: string) => {
-  if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
-  if (value.endsWith("px")) return Number.parseFloat(value);
-  throw new Error(`Unsupported dimension: ${value}`);
-};
-
-const unwrap = (v: { value: number; unit?: string } | number) =>
-  typeof v === "number" ? v : v.value;
-
-type DimensionValue = number | { value: number; unit?: string };
-
-const makeFlat = (raw: Record<string, unknown>) => ({
-  fontFamily: raw.fontFamily as string | undefined,
-  fontSize: unwrap(raw.fontSize as DimensionValue),
-  fontWeight: raw.fontWeight as number,
-  lineHeight: unwrap(raw.lineHeight as DimensionValue),
-  letterSpacing: unwrap(raw.letterSpacing as DimensionValue),
-  ...(raw.textTransform
-    ? { textTransform: raw.textTransform as "uppercase" | "lowercase" | "capitalize" | "none" }
-    : {}),
-});
-
-const generated = nativeGenerated as unknown as {
-  text: Record<string, Record<string, unknown>>;
-  space: Record<string, string>;
-  "screen-margin": string;
-  "component-size": Record<string, string>;
-  "border-radius": Record<string, string>;
-  "stream-item": Record<string, string>;
-  "font-family": { primary: string; mono: string };
-};
-
-const primaryFont = generated["font-family"].primary;
-
-const typographyEntries = Object.entries(generated.text).map(([key, raw]) => {
-  const flat = makeFlat(raw);
-  if (!flat.fontFamily) flat.fontFamily = primaryFont;
-  return [key, flat] as const;
-});
-
-export const typography = Object.fromEntries(typographyEntries) as Record<
-  string,
-  {
-    fontFamily: string;
-    fontSize: number;
-    fontWeight: number;
-    lineHeight: number;
-    letterSpacing: number;
-    textTransform?: "uppercase" | "lowercase" | "capitalize" | "none";
-  }
->;
-
-export type TypographyVariant = keyof typeof typography;
-
-export const spacing = Object.fromEntries(
-  Object.entries(generated.space).map(([key, value]) => [key, toPixels(value)]),
-) as Record<keyof typeof generated.space, number>;
-
-export type SpacingToken = keyof typeof spacing;
-
-export const screenMargin = toPixels(generated["screen-margin"]);
-
-export const componentSize = Object.fromEntries(
-  Object.entries(generated["component-size"]).map(([key, value]) => [key, toPixels(value)]),
-) as Record<keyof (typeof generated)["component-size"], number>;
-
-export type ComponentSizeToken = keyof typeof componentSize;
-
-export const borderRadius = Object.fromEntries(
-  Object.entries(generated["border-radius"]).map(([key, value]) => [key, toPixels(value)]),
-) as Record<keyof (typeof generated)["border-radius"], number>;
-
-export type BorderRadiusToken = keyof typeof borderRadius;
-
-const rawStreamItem = generated["stream-item"];
-export const streamItem = {
-  borderRadius: toPixels(rawStreamItem["border-radius"]),
-  borderWidth: toPixels(rawStreamItem["border-width"]),
-  gap: toPixels(rawStreamItem.gap),
-  iconSize: toPixels(rawStreamItem["icon-size"]),
-  minHeight: toPixels(rawStreamItem["min-height"]),
-  paddingHorizontal: toPixels(rawStreamItem["padding-horizontal"]),
-  paddingVertical: toPixels(rawStreamItem["padding-vertical"]),
-};
-
-export const fontFamily = generated["font-family"];