@ponti-studios/ui 2.0.1 → 3.0.0

package/dist/integrations/service-worker.js

@@ -0,0 +1,2 @@
+import { UpdateGuard as e } from "../components/feedback/update-guard.js";
+export { e as UpdateGuard };

package/dist/lib/auth.d.ts

@@ -0,0 +1,2 @@
+export declare const OTP_LENGTH = 6;
+export declare function normalizeOtp(value: string, length?: number): string;

package/dist/lib/auth.js

@@ -0,0 +1,7 @@
+//#region src/lib/auth.ts
+var e = 6;
+function t(e, t = 6) {
+	return e.replace(/\D/g, "").slice(0, t);
+}
+//#endregion
+export { e as OTP_LENGTH, t as normalizeOtp };

package/dist/lib/clipboard.d.ts

@@ -0,0 +1 @@
+export declare function copyToClipboard(text: string): Promise<boolean>;

package/dist/lib/clipboard.js

@@ -0,0 +1,10 @@
+//#region src/lib/clipboard.ts
+async function e(e) {
+	try {
+		return await navigator.clipboard.writeText(e), !0;
+	} catch {
+		return !1;
+	}
+}
+//#endregion
+export { e as copyToClipboard };

package/dist/lib/index.js

@@ -0,0 +1,4 @@
+import { OTP_LENGTH as e, normalizeOtp as t } from "./auth.js";
+import { copyToClipboard as n } from "./clipboard.js";
+import { cn as r } from "./utils.js";
+export { e as OTP_LENGTH, r as cn, n as copyToClipboard, t as normalizeOtp };

package/{src/lib/slot.tsx → dist/lib/slot.d.ts}

@@ -1,11 +1,7 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import type { ReactElement } from "react";
 import * as React from "react";
-
 export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
+    children?: React.ReactNode;
 }
-
 /**
  * Generic `asChild` primitive: merges the props it receives onto its single
  * child instead of rendering its own DOM element. Lets compound components
@@ -17,13 +13,4 @@ export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
  * event handlers chain instead of one overwriting the other, and
  * `className`/`style` merge instead of replacing.
  */
-export const Slot = React.forwardRef<HTMLElement, SlotProps>(({ children, ...props }, ref) => {
-  if (!React.isValidElement(children)) return null;
-  const child = children as ReactElement<Record<string, unknown>>;
-  const merged = mergeProps<"div">(
-    props as React.ComponentPropsWithRef<"div">,
-    child.props as React.ComponentPropsWithRef<"div">,
-  );
-  return React.cloneElement(child, { ...merged, ref } as Record<string, unknown>);
-});
-Slot.displayName = "Slot";
+export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;

package/dist/lib/slot.js

@@ -0,0 +1,14 @@
+import * as e from "react";
+import { mergeProps as t } from "@base-ui/react/merge-props";
+//#region src/lib/slot.tsx
+var n = e.forwardRef(({ children: n, ...r }, i) => {
+	if (!e.isValidElement(n)) return null;
+	let a = n, o = t(r, a.props);
+	return e.cloneElement(a, {
+		...o,
+		ref: i
+	});
+});
+n.displayName = "Slot";
+//#endregion
+export { n as Slot };

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,8 @@
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+//#region src/lib/utils.ts
+function n(...n) {
+	return t(e(n));
+}
+//#endregion
+export { n as cn };

package/dist/native/components.d.ts

@@ -0,0 +1,41 @@
+import React, { type ReactNode } from "react";
+import { type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+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 declare function NativeButton({ label, onPress, variant, size, disabled, loading, accessibilityLabel, accessibilityHint, leading, style, }: NativeButtonProps): React.JSX.Element;
+export interface NativeSurfaceProps {
+    children: ReactNode;
+    tone?: "card" | "muted" | "background";
+    style?: StyleProp<ViewStyle>;
+}
+export declare function NativeSurface({ children, tone, style }: NativeSurfaceProps): React.JSX.Element;
+export type NativeBadgeVariant = "default" | "secondary" | "accent" | "success" | "warning" | "destructive";
+export interface NativeBadgeProps {
+    label: string;
+    variant?: NativeBadgeVariant;
+    accessibilityLabel?: string;
+}
+export declare function NativeBadge({ label, variant, accessibilityLabel }: NativeBadgeProps): React.JSX.Element;
+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 declare function NativeTabBar<Value extends string>({ items, value, onChange }: NativeTabBarProps<Value>): React.JSX.Element;

package/dist/native/components.js

@@ -0,0 +1,135 @@
+import { useNativeTheme as e } from "./theme.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Pressable as r, Text as i, View as a } from "react-native";
+//#region src/native/components.tsx
+function o({ label: a, onPress: o, variant: c = "primary", size: l = "medium", disabled: u = !1, loading: d = !1, accessibilityLabel: f, accessibilityHint: p, leading: m, style: h }) {
+	let { colors: g, spacing: _, textSizes: v, fontWeights: y, radii: b } = e(), x = u || d, [S, C] = x ? [g.muted, g.tertiary] : s(c, g), w = l === "small" ? _[2] : l === "large" ? _[4] : _[3], T = l === "small" ? _[3] : _[4], E = l === "small" ? v.sm : l === "large" ? v.lg : v.base;
+	return /* @__PURE__ */ n(r, {
+		accessibilityRole: "button",
+		accessibilityLabel: f ?? a,
+		accessibilityHint: p,
+		accessibilityState: {
+			disabled: x,
+			busy: d
+		},
+		disabled: x,
+		onPress: o,
+		style: [{
+			minHeight: l === "large" ? _[14] : _[12],
+			paddingHorizontal: T,
+			paddingVertical: w,
+			borderRadius: b.lg,
+			backgroundColor: S,
+			alignItems: "center",
+			justifyContent: "center",
+			flexDirection: "row",
+			gap: _[2]
+		}, h],
+		children: [m, /* @__PURE__ */ t(i, {
+			style: {
+				color: C,
+				fontSize: E,
+				fontWeight: y.semibold
+			},
+			children: a
+		})]
+	});
+}
+function s(e, t) {
+	switch (e) {
+		case "primary": return [t.primary, t["primary-foreground"]];
+		case "destructive": return [t.destructive, t["destructive-foreground"]];
+		case "secondary": return [t.secondary, t["text-primary"]];
+		case "ghost": return ["transparent", t["text-primary"]];
+	}
+}
+function c({ children: n, tone: r = "card", style: i }) {
+	let { colors: o, spacing: s, radii: c } = e();
+	return /* @__PURE__ */ t(a, {
+		style: [{
+			backgroundColor: r === "muted" ? o.muted : r === "background" ? o.background : o.card,
+			borderColor: o["border-default"],
+			borderWidth: s.px,
+			borderRadius: c.xl,
+			padding: s[4],
+			gap: s[2]
+		}, i],
+		children: n
+	});
+}
+function l({ label: n, variant: r = "default", accessibilityLabel: o }) {
+	let { colors: s, spacing: c, textSizes: l, fontWeights: d, radii: f } = e(), [p, m] = u(r, s);
+	return /* @__PURE__ */ t(a, {
+		accessibilityRole: "text",
+		accessibilityLabel: o ?? n,
+		style: {
+			alignSelf: "flex-start",
+			paddingHorizontal: c[2],
+			paddingVertical: c[1],
+			borderRadius: f.full,
+			backgroundColor: p
+		},
+		children: /* @__PURE__ */ t(i, {
+			style: {
+				color: m,
+				fontSize: l.sm,
+				fontWeight: d.medium
+			},
+			children: n
+		})
+	});
+}
+function u(e, t) {
+	switch (e) {
+		case "secondary": return [t.secondary, t["text-primary"]];
+		case "accent": return [t.accent, t["text-primary"]];
+		case "success": return [t.success, t["success-foreground"]];
+		case "warning": return [t.warning, t["warning-foreground"]];
+		case "destructive": return [t.destructive, t["destructive-foreground"]];
+		case "default": return [t.primary, t["primary-foreground"]];
+	}
+}
+function d({ items: n, value: o, onChange: s }) {
+	let { colors: c, spacing: l, textSizes: u, fontWeights: d, radii: f } = e();
+	return /* @__PURE__ */ t(a, {
+		accessibilityRole: "tablist",
+		style: {
+			flexDirection: "row",
+			backgroundColor: c.card,
+			borderTopColor: c["border-default"],
+			borderTopWidth: l.px,
+			padding: l[2],
+			gap: l[1]
+		},
+		children: n.map((e) => {
+			let n = e.value === o;
+			return /* @__PURE__ */ t(r, {
+				accessibilityRole: "tab",
+				accessibilityLabel: e.accessibilityLabel ?? e.label,
+				accessibilityState: { selected: n },
+				onPress: () => s(e.value),
+				style: ({ pressed: e }) => ({
+					flex: 1,
+					minHeight: l[12],
+					paddingHorizontal: l[2],
+					paddingVertical: l[2],
+					borderRadius: f.lg,
+					backgroundColor: n ? c.accent : e ? c.secondary : c.card,
+					alignItems: "center",
+					justifyContent: "center"
+				}),
+				children: /* @__PURE__ */ t(i, {
+					style: {
+						color: n ? c["text-primary"] : c["text-secondary"],
+						fontSize: u.sm,
+						fontWeight: n ? d.semibold : d.normal
+					},
+					children: e.label
+				})
+			}, e.value);
+		})
+	});
+}
+//#endregion
+export { l as NativeBadge, o as NativeButton, c as NativeSurface, d as NativeTabBar };

package/dist/native/index.js

@@ -0,0 +1,3 @@
+import { NativeThemeProvider as e, useNativeTheme as t } from "./theme.js";
+import { NativeBadge as n, NativeButton as r, NativeSurface as i, NativeTabBar as a } from "./components.js";
+export { n as NativeBadge, r as NativeButton, i as NativeSurface, a as NativeTabBar, e as NativeThemeProvider, t as useNativeTheme };

package/dist/native/theme.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { type TextStyle } from "react-native";
+import { 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;
+}
+export interface NativeThemeProviderProps {
+    children: React.ReactNode;
+    colorPreference?: NativeColorPreference;
+}
+export declare function NativeThemeProvider({ children, colorPreference }: NativeThemeProviderProps): React.JSX.Element;
+export declare function useNativeTheme(): NativeTheme;

package/dist/native/theme.js

@@ -0,0 +1,58 @@
+import { colorThemes as e, fontWeights as t, radii as n, spacing as r, textLineHeights as i, textSizes as a } from "../styles/tokens/index.js";
+import { createContext as o, useContext as s, useMemo as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { useColorScheme as u } from "react-native";
+//#region src/native/theme.tsx
+function d(e) {
+	switch (t[e]) {
+		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 Error(`Unsupported native font-weight token: ${t[e]}`);
+	}
+}
+var f = {
+	thin: d("thin"),
+	extralight: d("extralight"),
+	light: d("light"),
+	normal: d("normal"),
+	medium: d("medium"),
+	semibold: d("semibold"),
+	bold: d("bold"),
+	extrabold: d("extrabold"),
+	black: d("black")
+}, p = o({
+	mode: "light",
+	colors: e.light,
+	spacing: r,
+	textSizes: a,
+	textLineHeights: i,
+	fontWeights: f,
+	radii: n
+});
+function m({ children: t, colorPreference: o = "system" }) {
+	let s = u(), d = o === "system" ? s === "dark" ? "dark" : "light" : o, m = c(() => ({
+		mode: d,
+		colors: e[d],
+		spacing: r,
+		textSizes: a,
+		textLineHeights: i,
+		fontWeights: f,
+		radii: n
+	}), [d]);
+	return /* @__PURE__ */ l(p.Provider, {
+		value: m,
+		children: t
+	});
+}
+function h() {
+	return s(p);
+}
+//#endregion
+export { m as NativeThemeProvider, h as useNativeTheme };

package/dist/styles/tokens/css-vars.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Color tokens as CSS `var()` references, for consumers whose runtime resolves
+ * the CSS cascade (i.e. web). Kept out of `./tokens` because React Native has
+ * no cascade — a `var(--token)` string there fails silently, rendering as an
+ * unparseable color rather than throwing.
+ */
+export declare const colors: Record<"accent" | "accent-foreground" | "background" | "border-default" | "card" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-negative" | "chart-neutral" | "chart-positive" | "control-border" | "destructive" | "destructive-foreground" | "focus-ring" | "muted" | "overlay-scrim" | "popover" | "primary" | "primary-foreground" | "secondary" | "success" | "success-foreground" | "tertiary" | "text-accent" | "text-destructive" | "text-primary" | "text-secondary" | "text-success" | "text-warning" | "warning" | "warning-foreground", `var(--${string})`>;

package/dist/styles/tokens/css-vars.js

@@ -0,0 +1,5 @@
+import { colorTokenNames as e } from "./index.js";
+//#region src/styles/tokens/css-vars.ts
+var t = e.reduce((e, t) => (e[t] = `var(--${t})`, e), {});
+//#endregion
+export { t as colors };

package/dist/styles/tokens/generated/dark.colors.generated.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    background: string;
+    card: string;
+    secondary: string;
+    popover: string;
+    muted: string;
+    "text-primary": string;
+    "text-secondary": string;
+    tertiary: string;
+    primary: string;
+    accent: string;
+    destructive: string;
+    success: string;
+    warning: string;
+    "text-success": string;
+    "text-warning": string;
+    "success-foreground": string;
+    "warning-foreground": string;
+    "primary-foreground": string;
+    "accent-foreground": string;
+    "destructive-foreground": string;
+    "text-destructive": string;
+    "text-accent": string;
+    "border-default": string;
+    "control-border": string;
+    "focus-ring": string;
+    "chart-1": string;
+    "chart-2": string;
+    "chart-3": string;
+    "chart-4": string;
+    "chart-5": string;
+    "chart-positive": string;
+    "chart-negative": string;
+    "chart-neutral": string;
+    "overlay-scrim": string;
+};
+export default _default;

package/dist/styles/tokens/generated/dark.colors.generated.js

@@ -0,0 +1,39 @@
+//#region src/styles/tokens/generated/dark.colors.generated.ts
+var e = {
+	background: "#0a0a0a",
+	card: "#111111",
+	secondary: "#1a1a1a",
+	popover: "#111111",
+	muted: "#141414",
+	"text-primary": "#fafafa",
+	"text-secondary": "#a3a3a3",
+	tertiary: "#a3a3a3",
+	primary: "#ededed",
+	accent: "#1e293b",
+	destructive: "#dc2626",
+	success: "#22c55e",
+	warning: "#f59e0b",
+	"text-success": "#4ade80",
+	"text-warning": "#fcd34d",
+	"success-foreground": "#0a0a0a",
+	"warning-foreground": "#0a0a0a",
+	"primary-foreground": "#0a0a0a",
+	"accent-foreground": "#93c5fd",
+	"destructive-foreground": "#ffffff",
+	"text-destructive": "#fca5a5",
+	"text-accent": "#60a5fa",
+	"border-default": "#262626",
+	"control-border": "#707070",
+	"focus-ring": "#3b82f6",
+	"chart-1": "#3b82f6",
+	"chart-2": "#ededed",
+	"chart-3": "#737373",
+	"chart-4": "#93c5fd",
+	"chart-5": "#3f3f46",
+	"chart-positive": "#22c55e",
+	"chart-negative": "#ef4444",
+	"chart-neutral": "#a3a3a3",
+	"overlay-scrim": "#000000"
+};
+//#endregion
+export { e as default };