@ponti-studios/ui 1.0.1 → 1.2.0

package/src/native/icon-button.tsx

@@ -0,0 +1,41 @@
+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

@@ -6,6 +6,33 @@
  * 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

@@ -0,0 +1,67 @@
+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/text-field.tsx

@@ -0,0 +1,34 @@
+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

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

package/src/styles/animations.css

@@ -50,6 +50,46 @@
     transform: scale(0.95);
   }
 }
+@keyframes sheet-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes sheet-slide-out-bottom {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+@keyframes sheet-slide-in-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes sheet-slide-out-right {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
 
 .data-open\:animate-in[data-open],
 .data-open\:animate-in[data-state="open"] {
@@ -64,6 +104,38 @@
     zoom-out 120ms ease-in;
 }
 
+[data-slot="sheet-overlay"][data-open],
+[data-slot="sheet-overlay"][data-state="open"] {
+  animation: fade-in 400ms var(--ease-out);
+}
+[data-slot="sheet-overlay"][data-closed],
+[data-slot="sheet-overlay"][data-state="closed"] {
+  /* Must stay in lockstep with [data-slot="sheet-content"]'s close duration below (both 200ms) —
+     Base UI gates the whole portal's unmount on this element's own close-animation duration, not
+     the content panel's, so a mismatch here yanks the sliding panel off mid-animation. */
+  animation: fade-out 200ms var(--ease-in);
+}
+
+[data-slot="sheet-content"][data-open],
+[data-slot="sheet-content"][data-state="open"] {
+  animation: sheet-slide-in-bottom 300ms var(--ease-drawer);
+}
+[data-slot="sheet-content"][data-closed],
+[data-slot="sheet-content"][data-state="closed"] {
+  animation: sheet-slide-out-bottom 200ms var(--ease-drawer);
+}
+
+@media (min-width: 768px) {
+  [data-slot="sheet-content"][data-open],
+  [data-slot="sheet-content"][data-state="open"] {
+    animation: sheet-slide-in-right 300ms var(--ease-drawer);
+  }
+  [data-slot="sheet-content"][data-closed],
+  [data-slot="sheet-content"][data-state="closed"] {
+    animation: sheet-slide-out-right 200ms var(--ease-drawer);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .animate-in,
   .animate-out,
@@ -72,3 +144,22 @@
     animation: none !important;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="sheet-overlay"][data-open],
+  [data-slot="sheet-overlay"][data-state="open"] {
+    animation: fade-in 120ms var(--ease-out) !important;
+  }
+  [data-slot="sheet-overlay"][data-closed],
+  [data-slot="sheet-overlay"][data-state="closed"] {
+    animation: fade-out 120ms var(--ease-in) !important;
+  }
+  [data-slot="sheet-content"][data-open],
+  [data-slot="sheet-content"][data-state="open"] {
+    animation: fade-in var(--duration-150) var(--ease-out) !important;
+  }
+  [data-slot="sheet-content"][data-closed],
+  [data-slot="sheet-content"][data-state="closed"] {
+    animation: fade-out 120ms var(--ease-in) !important;
+  }
+}

package/src/styles/tokens/generated/foundations.css

@@ -133,6 +133,7 @@
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
   --duration-75: 75ms;
   --duration-100: 100ms;
   --duration-150: 150ms;

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

@@ -431,6 +431,7 @@ export default {
     in: [0.4, 0, 1, 1],
     out: [0, 0, 0.2, 1],
     "in-out": [0.4, 0, 0.2, 1],
+    drawer: [0.32, 0.72, 0, 1],
   },
   duration: {
     75: "75ms",

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

@@ -0,0 +1,266 @@
+/**
+ * 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/index.ts

@@ -1,6 +1,7 @@
 import darkTokens from "./generated/dark.colors.generated";
 import foundations from "./generated/foundations.generated";
 import lightTokens from "./generated/light.colors.generated";
+import nativeTokens from "./generated/native.generated";
 
 const toPixels = (value: string) => {
   if (value.endsWith("rem")) return Number.parseFloat(value) * 16;
@@ -62,6 +63,7 @@ export const transitionDurations = Object.fromEntries(
   Object.entries(foundations.duration).map(([key, value]) => [key, toMilliseconds(value)]),
 ) as Record<keyof typeof foundations.duration, number>;
 export const animations = foundations.animate;
+export const motion = nativeTokens.motion;
 
 export type RadiusToken = keyof typeof radii;
 export type TextSizeToken = keyof typeof textSizes;

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

@@ -0,0 +1,88 @@
+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"];

package/src/styles/tokens/source/foundations.tokens.json

@@ -318,7 +318,8 @@
     "$type": "cubicBezier",
     "in": { "$value": [0.4, 0, 1, 1] },
     "out": { "$value": [0, 0, 0.2, 1] },
-    "in-out": { "$value": [0.4, 0, 0.2, 1] }
+    "in-out": { "$value": [0.4, 0, 0.2, 1] },
+    "drawer": { "$value": [0.32, 0.72, 0, 1] }
   },
   "duration": {
     "$type": "duration",