@pago-sh/ui 1.0.0

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,8 @@
+// Migrated to @pago-sh/orbit. This re-export remains for cross-package
+// consumers (checkout, sidebar). Prefer importing from '@pago-sh/orbit'.
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@pago-sh/orbit/Tooltip'

package/src/hooks/theming.ts

@@ -0,0 +1,87 @@
+import { type Appearance } from '@stripe/stripe-js'
+
+export interface ThemingPresetProps {
+  stripe: Appearance
+}
+
+export const getThemePreset = (theme: 'light' | 'dark') => {
+  const inputBoxShadow =
+    theme === 'dark'
+      ? 'none'
+      : 'rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px'
+  const focusBoxShadow =
+    theme === 'dark'
+      ? 'rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 71, 184, 0.4) 0px 0px 0px 3px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px'
+      : 'rgb(255, 255, 255) 0px 0px 0px 0px, rgb(204, 224, 255) 0px 0px 0px 3px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px'
+
+  return {
+    stripe: {
+      theme: theme === 'dark' ? 'night' : 'stripe',
+      rules: {
+        '.Label': {
+          color: theme === 'dark' ? 'white' : 'black',
+          fontWeight: '500',
+          fontSize: '14px',
+          marginBottom: '8px',
+        },
+        '.PickerItem': {
+          padding: '12px',
+          backgroundColor: theme === 'dark' ? 'rgb(23 23 25)' : 'white',
+          color: theme === 'dark' ? '#E5E5E1' : '#181A1F',
+          borderRadius: '0.75rem',
+          boxShadow: inputBoxShadow,
+          borderColor: 'transparent',
+        },
+        '.PickerItem--selected': {
+          backgroundColor: theme === 'dark' ? 'rgb(23 23 25)' : 'white',
+          borderColor: '#0062FF',
+          borderWidth: '2px',
+        },
+        '.PickerItem--selected:hover': {
+          backgroundColor: theme === 'dark' ? 'rgb(23 23 25)' : 'white',
+        },
+        '.Input': {
+          padding: '12px',
+          backgroundColor: theme === 'dark' ? 'rgb(23 23 25)' : 'white',
+          color: theme === 'dark' ? '#E5E5E1' : '#181A1F',
+          borderRadius: '0.75rem',
+          borderColor: theme === 'dark' ? 'rgb(36, 36.5, 40.5)' : '#EEE',
+          boxShadow: inputBoxShadow,
+        },
+        '.Input:focus': {
+          borderColor:
+            theme === 'dark' ? 'rgb(0, 84, 219)' : 'rgb(102, 161, 255)',
+          boxShadow: focusBoxShadow,
+        },
+        '.Tab': {
+          backgroundColor: theme === 'dark' ? 'rgb(23 23 25)' : 'white',
+          borderColor: theme === 'dark' ? 'rgb(36, 36.5, 40.5)' : '#EEE',
+        },
+        '.Tab--selected': {
+          backgroundColor: 'rgb(51, 129, 255)',
+          boxShadow: focusBoxShadow,
+          border: 'none',
+        },
+        '.Tab:focus': {
+          boxShadow: focusBoxShadow,
+        },
+        '.TabLabel--selected': {
+          color: 'white',
+        },
+        '.TabIcon--selected': {
+          fill: 'white',
+        },
+        '.Block': {
+          backgroundColor: 'transparent',
+          borderColor: theme === 'dark' ? '#353641' : '#EEE',
+        },
+      },
+      variables: {
+        borderRadius: '8px',
+        fontSizeBase: '1rem',
+        spacingGridRow: '18px',
+        colorDanger: theme === 'dark' ? '#F17878' : '#E64D4D',
+      },
+    },
+  } satisfies ThemingPresetProps
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/lib/meterUnit.ts

@@ -0,0 +1,52 @@
+export type MeterUnit = 'scalar' | 'token' | 'custom'
+
+export interface MeterUnitFormat {
+  /**
+   * Factor to multiply unit_amount (in cents) by to get the price at display
+   * scale. For example, token uses 1_000_000 so "$0.00001/token" becomes
+   * "$10 / 1M tokens".
+   */
+  scale: number
+  /** Human-readable denominator shown after the price, e.g. "1M tokens". */
+  label: string
+}
+
+const UNIT_FORMATS: Record<Exclude<MeterUnit, 'custom'>, MeterUnitFormat> = {
+  scalar: { scale: 1, label: 'unit' },
+  token: { scale: 1_000_000, label: '1M tokens' },
+}
+
+/**
+ * Returns the display scale and unit label for a given meter unit.
+ *
+ * For custom units, pass `customLabel` and `customMultiplier` to override the
+ * defaults. Without them, custom units fall back to scalar (scale=1, label="unit").
+ *
+ * @example
+ * // Token: $10 / 1M tokens
+ * const { scale, label } = getMeterUnitFormat('token')
+ * const displayAmount = unitAmountCents * scale  // 0.001 * 1_000_000 = 1000 cents = $10
+ *
+ * @example
+ * // Custom: $5 / 1000 requests
+ * const { scale, label } = getMeterUnitFormat('custom', { customLabel: 'requests', customMultiplier: 1000 })
+ * const displayAmount = unitAmountCents * scale  // 0.5 * 1000 = 500 cents = $5
+ */
+export function getMeterUnitFormat(
+  unit: MeterUnit,
+  options?: { customLabel?: string | null; customMultiplier?: number | null },
+): MeterUnitFormat {
+  if (unit === 'custom') {
+    return {
+      scale: options?.customMultiplier ?? 1,
+      label: options?.customLabel ?? 'unit',
+    }
+  }
+  return UNIT_FORMATS[unit] ?? UNIT_FORMATS.scalar
+}
+
+export const METER_UNIT_DISPLAY_NAMES: Record<MeterUnit, string> = {
+  scalar: 'Scalar',
+  token: 'Token',
+  custom: 'Custom',
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { twMerge, type ClassNameValue } from 'tailwind-merge'
+
+// Utility for merging Tailwind CSS class names
+export function cn(...inputs: ClassNameValue[]) {
+  return twMerge(inputs)
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@pago-sh/typescript-config/react-library.json",
+  "compilerOptions": {
+    "baseUrl": "src/",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["esnext", "dom"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "build", "node_modules", "openapi", "scripts"]
+}

package/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig, Options } from 'tsup'
+
+export const options: Options = {
+  entry: ['./src', '!./src/**/*.stories.*'],
+  format: ['cjs', 'esm'],
+  minify: true,
+  dts: true,
+  bundle: true,
+}
+
+export default defineConfig(options)