@ponti-studios/ui 1.7.0 → 2.0.0

package/src/native/components.tsx

@@ -0,0 +1,198 @@
+import React, { type ReactNode } from "react";
+import { Pressable, Text, View, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useNativeTheme } from "./theme";
+
+export type NativeButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+export type NativeButtonSize = "small" | "medium" | "large";
+
+export interface NativeButtonProps {
+  label: string;
+  onPress: PressableProps["onPress"];
+  variant?: NativeButtonVariant;
+  size?: NativeButtonSize;
+  disabled?: boolean;
+  loading?: boolean;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  leading?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function NativeButton({
+  label,
+  onPress,
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  loading = false,
+  accessibilityLabel,
+  accessibilityHint,
+  leading,
+  style,
+}: NativeButtonProps) {
+  const { colors, spacing, textSizes, fontWeights, radii } = useNativeTheme();
+  const isDisabled = disabled || loading;
+  const [backgroundColor, foregroundColor] = isDisabled
+    ? [colors.muted, colors.tertiary]
+    : buttonColors(variant, colors);
+  const verticalPadding = size === "small" ? spacing["2"] : size === "large" ? spacing["4"] : spacing["3"];
+  const horizontalPadding = size === "small" ? spacing["3"] : spacing["4"];
+  const fontSize = size === "small" ? textSizes.sm : size === "large" ? textSizes.lg : textSizes.base;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityHint={accessibilityHint}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      disabled={isDisabled}
+      onPress={onPress}
+      style={[
+        {
+          minHeight: size === "large" ? spacing["14"] : spacing["12"],
+          paddingHorizontal: horizontalPadding,
+          paddingVertical: verticalPadding,
+          borderRadius: radii.lg,
+          backgroundColor,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row",
+          gap: spacing["2"],
+        },
+        style,
+      ]}
+    >
+      {leading}
+      <Text style={{ color: foregroundColor, fontSize, fontWeight: fontWeights.semibold }}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function buttonColors(variant: NativeButtonVariant, colors: ReturnType<typeof useNativeTheme>["colors"]): [string, string] {
+  switch (variant) {
+    case "primary":
+      return [colors.primary, colors["primary-foreground"]];
+    case "destructive":
+      return [colors.destructive, colors["destructive-foreground"]];
+    case "secondary":
+      return [colors.secondary, colors["text-primary"]];
+    case "ghost":
+      return ["transparent", colors["text-primary"]];
+  }
+}
+
+export interface NativeSurfaceProps {
+  children: ReactNode;
+  tone?: "card" | "muted" | "background";
+  style?: StyleProp<ViewStyle>;
+}
+
+export function NativeSurface({ children, tone = "card", style }: NativeSurfaceProps) {
+  const { colors, spacing, radii } = useNativeTheme();
+  const backgroundColor = tone === "muted" ? colors.muted : tone === "background" ? colors.background : colors.card;
+  return (
+    <View
+      style={[
+        {
+          backgroundColor,
+          borderColor: colors["border-default"],
+          borderWidth: spacing.px,
+          borderRadius: radii.xl,
+          padding: spacing["4"],
+          gap: spacing["2"],
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+export type NativeBadgeVariant = "default" | "secondary" | "accent" | "success" | "warning" | "destructive";
+
+export interface NativeBadgeProps {
+  label: string;
+  variant?: NativeBadgeVariant;
+  accessibilityLabel?: string;
+}
+
+export function NativeBadge({ label, variant = "default", accessibilityLabel }: NativeBadgeProps) {
+  const { colors, spacing, textSizes, fontWeights, radii } = useNativeTheme();
+  const [backgroundColor, foregroundColor] = badgeColors(variant, colors);
+  return (
+    <View
+      accessibilityRole="text"
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={{ alignSelf: "flex-start", paddingHorizontal: spacing["2"], paddingVertical: spacing["1"], borderRadius: radii.full, backgroundColor }}
+    >
+      <Text style={{ color: foregroundColor, fontSize: textSizes.sm, fontWeight: fontWeights.medium }}>{label}</Text>
+    </View>
+  );
+}
+
+function badgeColors(variant: NativeBadgeVariant, colors: ReturnType<typeof useNativeTheme>["colors"]): [string, string] {
+  switch (variant) {
+    case "secondary":
+      return [colors.secondary, colors["text-primary"]];
+    case "accent":
+      return [colors.accent, colors["text-primary"]];
+    case "success":
+      return [colors.success, colors["success-foreground"]];
+    case "warning":
+      return [colors.warning, colors["warning-foreground"]];
+    case "destructive":
+      return [colors.destructive, colors["destructive-foreground"]];
+    case "default":
+      return [colors.primary, colors["primary-foreground"]];
+  }
+}
+
+export interface NativeTabItem<Value extends string = string> {
+  value: Value;
+  label: string;
+  accessibilityLabel?: string;
+}
+
+export interface NativeTabBarProps<Value extends string> {
+  items: readonly NativeTabItem<Value>[];
+  value: Value;
+  onChange: (value: Value) => void;
+}
+
+export function NativeTabBar<Value extends string>({ items, value, onChange }: NativeTabBarProps<Value>) {
+  const { colors, spacing, textSizes, fontWeights, radii } = useNativeTheme();
+  return (
+    <View
+      accessibilityRole="tablist"
+      style={{ flexDirection: "row", backgroundColor: colors.card, borderTopColor: colors["border-default"], borderTopWidth: spacing.px, padding: spacing["2"], gap: spacing["1"] }}
+    >
+      {items.map((item) => {
+        const selected = item.value === value;
+        return (
+          <Pressable
+            key={item.value}
+            accessibilityRole="tab"
+            accessibilityLabel={item.accessibilityLabel ?? item.label}
+            accessibilityState={{ selected }}
+            onPress={() => onChange(item.value)}
+            style={({ pressed }) => ({
+              flex: 1,
+              minHeight: spacing["12"],
+              paddingHorizontal: spacing["2"],
+              paddingVertical: spacing["2"],
+              borderRadius: radii.lg,
+              backgroundColor: selected ? colors.accent : pressed ? colors.secondary : colors.card,
+              alignItems: "center",
+              justifyContent: "center",
+            })}
+          >
+            <Text style={{ color: selected ? colors["text-primary"] : colors["text-secondary"], fontSize: textSizes.sm, fontWeight: selected ? fontWeights.semibold : fontWeights.normal }}>
+              {item.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/native/index.ts

@@ -0,0 +1,2 @@
+export { NativeBadge, NativeButton, NativeSurface, NativeTabBar, type NativeBadgeProps, type NativeBadgeVariant, type NativeButtonProps, type NativeButtonSize, type NativeButtonVariant, type NativeSurfaceProps, type NativeTabBarProps, type NativeTabItem } from "./components";
+export { NativeThemeProvider, useNativeTheme, type NativeColorPreference, type NativeTheme, type NativeThemeProviderProps } from "./theme";

package/src/native/theme.tsx

@@ -0,0 +1,69 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { useColorScheme, type TextStyle } from "react-native";
+import { colorThemes, fontWeights, radii, spacing, textLineHeights, textSizes, type ColorMode, type ColorTheme } from "../styles/tokens";
+
+export type NativeColorPreference = ColorMode | "system";
+
+export interface NativeTheme {
+  mode: ColorMode;
+  colors: ColorTheme;
+  spacing: typeof spacing;
+  textSizes: typeof textSizes;
+  textLineHeights: typeof textLineHeights;
+  fontWeights: Readonly<Record<keyof typeof fontWeights, NonNullable<TextStyle["fontWeight"]>>>;
+  radii: typeof radii;
+}
+
+function nativeFontWeight(token: keyof typeof fontWeights): NonNullable<TextStyle["fontWeight"]> {
+  switch (fontWeights[token]) {
+    case "100": return "100";
+    case "200": return "200";
+    case "300": return "300";
+    case "400": return "400";
+    case "500": return "500";
+    case "600": return "600";
+    case "700": return "700";
+    case "800": return "800";
+    case "900": return "900";
+    default: throw new Error(`Unsupported native font-weight token: ${fontWeights[token]}`);
+  }
+}
+
+const nativeFontWeights: NativeTheme["fontWeights"] = {
+  thin: nativeFontWeight("thin"),
+  extralight: nativeFontWeight("extralight"),
+  light: nativeFontWeight("light"),
+  normal: nativeFontWeight("normal"),
+  medium: nativeFontWeight("medium"),
+  semibold: nativeFontWeight("semibold"),
+  bold: nativeFontWeight("bold"),
+  extrabold: nativeFontWeight("extrabold"),
+  black: nativeFontWeight("black"),
+};
+
+const NativeThemeContext = createContext<NativeTheme>({
+  mode: "light",
+  colors: colorThemes.light,
+  spacing,
+  textSizes,
+  textLineHeights,
+  fontWeights: nativeFontWeights,
+  radii,
+});
+
+export interface NativeThemeProviderProps {
+  children: React.ReactNode;
+  colorPreference?: NativeColorPreference;
+}
+
+export function NativeThemeProvider({ children, colorPreference = "system" }: NativeThemeProviderProps) {
+  const systemMode = useColorScheme();
+  const mode: ColorMode = colorPreference === "system" ? (systemMode === "dark" ? "dark" : "light") : colorPreference;
+  const value = useMemo<NativeTheme>(() => ({ mode, colors: colorThemes[mode], spacing, textSizes, textLineHeights, fontWeights: nativeFontWeights, radii }), [mode]);
+
+  return <NativeThemeContext.Provider value={value}>{children}</NativeThemeContext.Provider>;
+}
+
+export function useNativeTheme(): NativeTheme {
+  return useContext(NativeThemeContext);
+}

package/src/styles/build.ts

@@ -0,0 +1 @@
+import "./package.css";

package/src/styles/index.css

@@ -17,6 +17,7 @@
 @import "./tokens/generated/foundations.css";
 @import "./tokens/generated/light.css";
 @import "./tokens/generated/dark.css" (prefers-color-scheme: dark);
+@import "./tokens/generated/dark-class.css";
 @import "./animations.css";
 @import "./nokia.css";
 
@@ -54,20 +55,18 @@
   --color-foreground: var(--text-primary);
   --color-card: var(--card);
   --color-card-foreground: var(--text-primary);
-  --color-popover: var(--background);
+  --color-popover: var(--popover);
   --color-popover-foreground: var(--text-primary);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--card);
+  --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--text-primary);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--text-secondary);
-  --color-accent: var(--primary);
-  --color-accent-foreground: var(--primary-foreground);
-  /* Distinct from --color-accent: that pairs with white/primary-foreground
-   * for solid fills (badges, active states). This pairs with the page
-   * background for standalone text/icons/borders (inline links, upload
-   * affordances) and must differ per theme to stay AA-compliant. */
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  /* Distinct from --color-accent: this pairs with the page background for
+   * standalone text/icons/borders (inline links, upload affordances). */
   --color-accent-text: var(--text-accent);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
@@ -78,8 +77,10 @@
   --color-destructive-text: var(--text-destructive);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+  --color-success-text: var(--text-success);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-warning-text: var(--text-warning);
   --color-border: var(--border-default);
   --color-input: var(--border-default);
   --color-ring: var(--focus-ring);
@@ -200,6 +201,85 @@
   height: 100dvh;
 }
 
+/* Responsive dropdown surfaces keep their menu/listbox semantics while
+ * becoming thumb-reachable sheets on compact viewports. */
+.ui-mobile-sheet-backdrop {
+  display: none;
+}
+.ui-mobile-sheet-positioner {
+  z-index: var(--z-index-50);
+}
+.ui-mobile-sheet-close {
+  display: none;
+}
+@media (max-width: 767px) {
+  .ui-mobile-sheet-backdrop {
+    position: fixed;
+    z-index: var(--z-index-50);
+    display: block;
+    background: color-mix(in srgb, var(--overlay-scrim) 50%, transparent);
+    inset: 0;
+  }
+  .ui-mobile-sheet-positioner {
+    position: fixed !important;
+    z-index: calc(var(--z-index-50) + 1) !important;
+    display: block;
+    width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+    transform: none !important;
+    inset: auto 0 0 !important;
+  }
+  .ui-mobile-sheet-popup {
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    max-height: min(75dvh, var(--available-height, 75dvh)) !important;
+    border-start-start-radius: var(--radius-2xl) !important;
+    border-start-end-radius: var(--radius-2xl) !important;
+    border-end-start-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+    padding-bottom: max(var(--spacing-scale-4), env(safe-area-inset-bottom)) !important;
+    overscroll-behavior: contain;
+  }
+  .ui-mobile-popover-popup {
+    padding-block-start: calc(var(--spacing-scale-12) + var(--spacing-scale-2)) !important;
+  }
+  .ui-mobile-sheet-close {
+    position: absolute;
+    z-index: var(--z-index-10);
+    top: var(--spacing-scale-2);
+    right: var(--spacing-scale-3);
+    display: grid;
+    width: var(--spacing-scale-12);
+    height: var(--spacing-scale-12);
+    place-items: center;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-full);
+    color: var(--text-secondary);
+    background: var(--background);
+    cursor: pointer;
+  }
+  .ui-mobile-sheet-close svg {
+    width: var(--spacing-scale-5);
+    height: var(--spacing-scale-5);
+  }
+  [data-slot="dropdown-menu-content"] [data-slot^="dropdown-menu-item"],
+  [data-slot="select-content"] [data-slot="select-item"] {
+    min-height: var(--spacing-scale-12);
+  }
+  [data-slot="dropdown-menu-content"][data-open],
+  [data-slot="select-content"][data-open],
+  [data-slot="popover-content"][data-open] {
+    animation: sheet-slide-in-bottom 300ms var(--ease-drawer);
+  }
+  [data-slot="dropdown-menu-content"][data-closed],
+  [data-slot="select-content"][data-closed],
+  [data-slot="popover-content"][data-closed] {
+    animation: sheet-slide-out-bottom 200ms var(--ease-drawer);
+  }
+}
+
 /* Shared layout rhythm. Product components own their layout; this does not
  * define visual component families. */
 .page-shell {
@@ -264,6 +344,16 @@
   @apply text-muted-foreground text-xs font-medium uppercase tracking-widest;
 }
 
+/* Command rows: action hints stay silent until the row is highlighted,
+ * so the list scans clean and the affordance appears exactly when usable. */
+[data-slot="command-item"] [data-slot="command-shortcut"] {
+  opacity: 0;
+  transition: opacity 120ms ease-out;
+}
+[data-slot="command-item"][data-highlighted] [data-slot="command-shortcut"] {
+  opacity: 1;
+}
+
 @layer base {
   :root {
     color-scheme: light;
@@ -273,6 +363,10 @@
       color-scheme: dark;
     }
   }
+  /* Manual override: toggling `.dark` on <html> beats the OS preference. */
+  :root.dark {
+    color-scheme: dark;
+  }
   html,
   body {
     background-color: var(--color-background);

package/src/styles/package.css

@@ -0,0 +1,3 @@
+@import "tailwindcss" source(none);
+@import "./index.css";
+@source "../components";

package/src/styles/tokens/color-systems.stories.tsx

@@ -2,40 +2,188 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Button } from "../../components/primitives/button";
 import { colors } from "./css-vars";
-import { colorTokenNames } from "./index";
+import type { ColorToken } from "./index";
 
 const meta: Meta = { title: "Foundations/Colors", parameters: { layout: "fullscreen" } };
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+type Role = {
+  token: ColorToken;
+  purpose: string;
+  foreground?: ColorToken;
+};
+
+const surfaces: Role[] = [
+  { token: "background", purpose: "The page and app shell surface." },
+  { token: "card", purpose: "Content containers and grouped information." },
+  { token: "popover", purpose: "Dropdowns, dialogs, and floating panels." },
+  { token: "muted", purpose: "Quiet, disabled, and loading surfaces." },
+  { token: "secondary", purpose: "Secondary actions and selectable chips." },
+  {
+    token: "accent",
+    purpose: "Tinted emphasis and hover surfaces.",
+    foreground: "accent-foreground",
+  },
+];
+
+const text: Role[] = [
+  { token: "text-primary", purpose: "Primary reading text." },
+  { token: "text-secondary", purpose: "Supporting labels and descriptions." },
+  { token: "tertiary", purpose: "Metadata, timestamps, and placeholders." },
+  { token: "text-accent", purpose: "Standalone links and accent affordances." },
+  { token: "text-success", purpose: "Standalone positive status text and icons." },
+  { token: "text-warning", purpose: "Standalone cautionary status text and icons." },
+  { token: "text-destructive", purpose: "Standalone error and destructive text." },
+];
+
+const actions: Role[] = [
+  {
+    token: "primary",
+    purpose: "The strongest action on a screen.",
+    foreground: "primary-foreground",
+  },
+  {
+    token: "destructive",
+    purpose: "Irreversible or dangerous actions.",
+    foreground: "destructive-foreground",
+  },
+  {
+    token: "success",
+    purpose: "Positive indicators and confirmed states.",
+    foreground: "success-foreground",
+  },
+  {
+    token: "warning",
+    purpose: "Caution indicators and attention states.",
+    foreground: "warning-foreground",
+  },
+];
+
+const system: Role[] = [
+  { token: "border-default", purpose: "Default borders, inputs, and dividers." },
+  { token: "focus-ring", purpose: "Keyboard focus indication." },
+  { token: "overlay-scrim", purpose: "Backdrop behind modal surfaces." },
+];
+
+const charts: Role[] = [
+  { token: "chart-1", purpose: "Categorical data series one." },
+  { token: "chart-2", purpose: "Categorical data series two." },
+  { token: "chart-3", purpose: "Categorical data series three." },
+  { token: "chart-4", purpose: "Categorical data series four." },
+  { token: "chart-5", purpose: "Categorical data series five." },
+  { token: "chart-positive", purpose: "Positive trend in a visualization." },
+  { token: "chart-negative", purpose: "Negative trend in a visualization." },
+  { token: "chart-neutral", purpose: "Neutral or baseline trend." },
+];
+
+function RoleCard({ token, purpose, foreground }: Role) {
+  const isText = token.startsWith("text-") || token === "tertiary";
+  const isSurface = surfaces.some((role) => role.token === token);
+  const swatchOnly = !isText && !isSurface && !foreground;
+  const background = isText ? "background" : token;
+  const contentColor = isText ? token : (foreground ?? "text-primary");
+
+  return (
+    <article className="border-border overflow-hidden rounded-md border bg-card">
+      <div
+        className="flex min-h-24 items-end p-3"
+        style={{
+          backgroundColor: colors[swatchOnly ? "card" : background],
+          color: colors[swatchOnly ? "text-primary" : contentColor],
+        }}
+      >
+        {swatchOnly ? (
+          <span
+            aria-hidden="true"
+            className="h-full min-h-16 w-full rounded-sm"
+            style={{ backgroundColor: colors[token] }}
+          />
+        ) : (
+          <span className="font-mono text-xs">{token}</span>
+        )}
+      </div>
+      <div className="grid gap-1 p-3">
+        <code className="text-sm font-medium">--{token}</code>
+        <p className="text-muted-foreground text-sm">{purpose}</p>
+        {foreground && (
+          <p className="text-muted-foreground text-xs">Paired content: --{foreground}</p>
+        )}
+      </div>
+    </article>
+  );
+}
+
+function RoleSection({
+  title,
+  description,
+  roles,
+}: {
+  title: string;
+  description: string;
+  roles: Role[];
+}) {
+  return (
+    <section className="grid gap-3">
+      <div className="grid gap-1">
+        <h2 className="text-lg font-semibold">{title}</h2>
+        <p className="text-muted-foreground text-sm">{description}</p>
+      </div>
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {roles.map((role) => (
+          <RoleCard key={role.token} {...role} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
 export const SystemAppearance: Story = {
   render: () => (
-    <main className="bg-background text-foreground grid min-h-screen gap-8 p-6 md:p-10">
-      <header className="grid gap-2">
-        <h1 className="text-2xl font-semibold">System color roles</h1>
-        <p className="text-muted-foreground max-w-prose text-sm">
-          These semantic roles resolve from the operating system’s light or dark appearance. CSS is
-          the single source of their values.
+    <main className="bg-background text-foreground grid min-h-screen gap-10 p-6 md:p-10">
+      <header className="grid max-w-3xl gap-2">
+        <p className="text-accent-text text-xs font-medium uppercase tracking-widest">
+          Foundations
         </p>
+        <h1 className="text-2xl font-semibold">Color roles</h1>
+        <p className="text-muted-foreground text-sm">
+          Every color has a job. These roles resolve from the operating system’s light or dark
+          appearance and are the only colors components should consume.
+        </p>
+        <div className="flex flex-wrap gap-2 pt-2">
+          <Button>Primary action</Button>
+          <Button variant="secondary">Secondary action</Button>
+          <Button variant="outline">Outline action</Button>
+          <Button variant="destructive">Delete item</Button>
+        </div>
       </header>
-      <div className="flex flex-wrap gap-2">
-        <Button>Primary action</Button>
-        <Button variant="secondary">Secondary action</Button>
-        <Button variant="outline">Outline action</Button>
-        <Button variant="destructive">Delete item</Button>
-      </div>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
-        {colorTokenNames.map((token) => (
-          <div
-            key={token}
-            className="border-border grid min-h-20 content-end rounded-md border p-3"
-            style={{ backgroundColor: colors[token] }}
-          >
-            <span className="bg-background text-foreground w-fit rounded px-1 font-mono text-xs">
-              {token}
-            </span>
-          </div>
-        ))}
+
+      <div className="grid gap-10">
+        <RoleSection
+          title="Surfaces"
+          description="Backgrounds establish hierarchy. Use the lightest appropriate surface and let spacing do the rest."
+          roles={surfaces}
+        />
+        <RoleSection
+          title="Text"
+          description="Text roles describe hierarchy or state. Use a text role when content sits directly on a surface."
+          roles={text}
+        />
+        <RoleSection
+          title="Actions and status"
+          description="Fill roles communicate action or state and always pair with their matching foreground."
+          roles={actions}
+        />
+        <RoleSection
+          title="System"
+          description="Structural colors support boundaries, focus, and modal layering without competing with content."
+          roles={system}
+        />
+        <RoleSection
+          title="Charts"
+          description="Chart roles are for data visualization only. They do not communicate interaction or severity in product UI."
+          roles={charts}
+        />
       </div>
     </main>
   ),