+
+ ),
+ ],
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Small: Story = {
+ render: () => (
+
+ ),
+}
+
+export const Medium: Story = {
+ render: () => (
+
+ ),
+}
+
+export const Full: Story = {
+ render: () => (
+
+ ),
+}
+
+export const CustomFooter: Story = {
+ render: () => (
+
+ ),
+}
+
+export const Destructive: Story = {
+ render: () => (
+
+ ),
+}
+
+export const NoCloseButton: Story = {
+ render: () => (
+
+ ),
+}
+
+export const Steps: Story = {
+ render: () => (
+
+ ),
+}
diff --git a/packages/shared-ui/src/components/app-modal/index.tsx b/packages/shared-ui/src/components/app-modal/index.tsx
new file mode 100644
index 0000000..3ce1555
--- /dev/null
+++ b/packages/shared-ui/src/components/app-modal/index.tsx
@@ -0,0 +1,235 @@
+import {
+ useCallback,
+ useEffect,
+ useState,
+ type ReactNode,
+} from "react"
+import { AnimatePresence, motion } from "framer-motion"
+
+import { CloseX } from "../../icons"
+import { cn } from "../../cn"
+import { Button, type ButtonProps } from "../../ui/button"
+import {
+ Dialog,
+ DialogClose,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "../../ui/dialog"
+
+type ModalButtonProps = ButtonProps & {
+ children: ReactNode
+}
+
+export interface AppModalOptions {
+ title: string
+ step?: ReactNode
+ description?: string
+ content?: ReactNode
+ footer?: ReactNode
+ primaryButton?: ModalButtonProps
+ secondaryButton?: ModalButtonProps
+ size?: "small" | "medium" | "full"
+ showCloseButton?: boolean
+ onClose?: () => void
+}
+
+type ModalState = { open: boolean; config: AppModalOptions | null }
+type SetModalState = (value: ModalState | ((prev: ModalState) => ModalState)) => void
+
+let setGlobalState: SetModalState | null = null
+
+export const AppModal = {
+ open: (options: AppModalOptions) =>
+ setGlobalState?.({ open: true, config: options }),
+ close: () => setGlobalState?.((prev) => ({ ...prev, open: false })),
+ updateConfig: (partial: Partial
+ {showHeader ? (
+
+
+ {children.trim()}
+
+
+
+
+ copy(children)}
+ data-state={copyState}
+ {...copyProps}
+ />
+ ) : null}
+
+ ) : null}
+
+
+ {logo ? (
+ 
+ ) : null}
+ {filename ? (
+
+ {filename}
+
+ ) : null}
+
+ {showCopyButton ? (
+
+ copy(children)}
+ data-state={copyState}
+ {...copyProps}
+ />
+
+ ) : null}
+
+ {label ? (
+
+ ) : null}
+
+ {
+ if (!isControlled) setInternal(String(next ?? ""))
+ onValueChange?.(next == null ? null : String(next))
+ }}
+ >
+
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+
+
+
+ {children}
+
+
+ )
+}
+
+export { ConditionalFieldRow }
diff --git a/packages/shared-ui/src/components/field-stack/field-stack.stories.tsx b/packages/shared-ui/src/components/field-stack/field-stack.stories.tsx
new file mode 100644
index 0000000..870a4c8
--- /dev/null
+++ b/packages/shared-ui/src/components/field-stack/field-stack.stories.tsx
@@ -0,0 +1,124 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Input } from "../../ui/input"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "../../ui/select"
+import { EmbeddedFieldRow, FieldStack } from "./index"
+
+const operators = [
+ { value: "gt", label: "Is greater than" },
+ { value: "lt", label: "Is less than" },
+ { value: "between", label: "Is between" },
+] as const
+
+function OperatorSelect({
+ defaultValue,
+ value,
+ onValueChange,
+}: {
+ defaultValue?: string
+ value?: string
+ onValueChange?: (value: string | null) => void
+}) {
+ return (
+
+ )
+}
+
+function BetweenFields() {
+ return (
+ <>
+
+ Minimum
+
+
+
+ Maximum
+
+
+
+ {children}
+
+ )
+}
+
+export interface EmbeddedFieldRowProps extends ComponentProps<"div"> {
+ when: boolean
+ children: ReactNode
+ layout?: "inline" | "stack"
+}
+
+function EmbeddedFieldRowRoot({
+ when,
+ children,
+ layout = "inline",
+ className,
+ ...props
+}: EmbeddedFieldRowProps) {
+ if (!when) return null
+
+ return (
+
+
+ {children}
+
+ )
+}
+
+function EmbeddedFieldRowLabel({
+ className,
+ ...props
+}: ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+function EmbeddedFieldRowSuffix({
+ className,
+ ...props
+}: ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+const EmbeddedFieldRow = Object.assign(EmbeddedFieldRowRoot, {
+ Label: EmbeddedFieldRowLabel,
+ Suffix: EmbeddedFieldRowSuffix,
+})
+
+export { FieldStack, EmbeddedFieldRow }
diff --git a/packages/shared-ui/src/components/file-upload/file-upload.stories.tsx b/packages/shared-ui/src/components/file-upload/file-upload.stories.tsx
new file mode 100644
index 0000000..368b00e
--- /dev/null
+++ b/packages/shared-ui/src/components/file-upload/file-upload.stories.tsx
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { FileUpload, type FileWithPreview } from "./index"
+
+const sampleFile = {
+ name: "pro-plan-hero.png",
+ size: 1.2 * 1024 * 1024,
+ type: "image/png",
+ width: 1600,
+ height: 900,
+} as FileWithPreview
+
+const meta: Meta
+
+ ),
+}
diff --git a/packages/shared-ui/src/components/file-upload/index.tsx b/packages/shared-ui/src/components/file-upload/index.tsx
new file mode 100644
index 0000000..2ac0c0b
--- /dev/null
+++ b/packages/shared-ui/src/components/file-upload/index.tsx
@@ -0,0 +1,365 @@
+import { useCallback, useEffect, useState, type ComponentProps, type ReactNode } from "react"
+import { type DropzoneOptions, type FileRejection, useDropzone } from "react-dropzone"
+
+import { ArrowUp, CloseX, Image, TriangleAlert } from "../../icons"
+import { ImageTransformer, type MimeType, type TransformOptions } from "../../integrations/image-transformer"
+import { type MixinProps, splitProps } from "../../lib/mixin"
+import { cn } from "../../cn"
+import { Spinner } from "../spinner"
+
+export interface FileWithPreview extends File {
+ preview?: string
+ width?: number
+ height?: number
+}
+
+type FileUploadState = "hover" | "drag"
+
+export interface FileUploadProps
+ extends MixinProps<"dropzone", Omit
+ {icon}
+
+ )
+}
+
+function FileUpload({
+ id,
+ value,
+ onFileChange,
+ onFileRejected,
+ onCancel,
+ onRemove,
+ progress = 0,
+ status,
+ hint = "PNG or JPG, up to 2MB",
+ error,
+ label,
+ disabled = false,
+ className,
+ enableTransformation = false,
+ targetFormat = "image/png",
+ maxDimension,
+ "data-state": dataState,
+ ...mixProps
+}: FileUploadProps) {
+ const { dropzone, label: labelProps, error: errorProps } = splitProps(
+ mixProps,
+ "dropzone",
+ "label",
+ "error"
+ )
+ const isControlled = value !== undefined
+ const [internalFile, setInternalFile] = useState{title}
+ {hint ?{hint}
: null} +
+ {label ? (
+
+ )
+}
+
+export { FileUpload, ImageTransformer }
+export type { FileRejection, FileUploadState, MimeType, TransformOptions }
diff --git a/packages/shared-ui/src/components/phone-number-field/index.tsx b/packages/shared-ui/src/components/phone-number-field/index.tsx
new file mode 100644
index 0000000..3c8e6ee
--- /dev/null
+++ b/packages/shared-ui/src/components/phone-number-field/index.tsx
@@ -0,0 +1,369 @@
+import { Combobox } from "@base-ui/react/combobox"
+import {
+ memo,
+ useCallback,
+ useId,
+ useLayoutEffect,
+ useMemo,
+ useRef,
+ useState,
+ type ChangeEvent,
+ type ComponentProps,
+} from "react"
+import { getCountryData, type TCountryCode } from "countries-list"
+import { countries } from "country-flag-icons"
+import * as CountryFlags from "country-flag-icons/react/3x2"
+import {
+ AsYouType,
+ parsePhoneNumberWithError,
+ type CountryCode,
+} from "libphonenumber-js"
+
+import { Check, ChevronDown, Search } from "../../icons"
+import { type MixinProps, splitProps } from "../../lib/mixin"
+import { cn } from "../../cn"
+import { InputGroup, InputGroupInput } from "../../ui/input-group"
+import { Label } from "../../ui/label"
+
+export type PhoneNumber = {
+ number: string
+ countryCode: string
+}
+
+const DEFAULT_COUNTRY_CODE = "US"
+
+export const phoneNumberToString = (phoneNumber: PhoneNumber): string => {
+ try {
+ const parsed = parsePhoneNumberWithError(
+ phoneNumber.number,
+ phoneNumber.countryCode as CountryCode
+ )
+ if (parsed?.isValid()) return parsed.formatInternational()
+ } catch {}
+ const { phone } = getCountryData(phoneNumber.countryCode as TCountryCode)
+ const prefix = phone?.[0] ? `+${phone[0]}` : "+1"
+ const digits = phoneNumber.number.replace(/[^\d]/g, "")
+ return `${prefix} ${digits}`
+}
+
+export const phoneNumberFromString = (raw: string): PhoneNumber => {
+ if (!raw?.trim()) return { number: "", countryCode: DEFAULT_COUNTRY_CODE }
+
+ try {
+ const parsed = parsePhoneNumberWithError(raw)
+ if (parsed?.country) {
+ return { number: parsed.formatNational(), countryCode: parsed.country }
+ }
+ } catch {}
+
+ const countryCodeMatch = raw.match(/^(\+\d{1,4})/)
+ if (!countryCodeMatch) {
+ return {
+ number: raw.replace(/[^\d]/g, ""),
+ countryCode: DEFAULT_COUNTRY_CODE,
+ }
+ }
+
+ const prefix = countryCodeMatch[1]
+ const number = raw.slice(prefix.length).replace(/[^\d]/g, "")
+
+ if (prefix === "+1") return { number, countryCode: DEFAULT_COUNTRY_CODE }
+
+ const countryCode = countries.find((iso) => {
+ const { phone } = getCountryData(iso as TCountryCode)
+ return phone && phone.length > 0 && `+${phone[0]}` === prefix
+ })
+
+ return { number, countryCode: countryCode ?? DEFAULT_COUNTRY_CODE }
+}
+
+type CountryOption = {
+ name: string
+ prefix: string
+ countryCode: string
+ searchKey: string
+}
+
+const COUNTRIES_DATA: CountryOption[] = countries.flatMap((countryCode) => {
+ const { name, phone } = getCountryData(countryCode as TCountryCode)
+ if (!name || !phone.length) return []
+
+ return phone.map((prefix) => ({
+ name,
+ prefix: `+${prefix}`,
+ countryCode,
+ searchKey: `${name} ${countryCode} +${prefix}`.toLowerCase(),
+ }))
+})
+
+type LabelProps = ComponentProps+ {label} +
+ ) : null} + +
+
+
+ {isTransforming ? (
+
+
+ {displayError && !isUploading && !isSuccess ? (
+
+
+ ) : isUploading && file ? (
+
+
+ ) : isSuccess && file ? (
+
+
+ {file.name}
+
+ {Math.round(progress)}%
+
+
+
+
+
+
+ {file.preview ? (
+ 
+ ) : (
+
+ )}
+
+ ) : displayError ? (
+
+
+ {file.name}
++ {formatBytes(file.size)} + {file.width && file.height ? ` - ${file.width}x${file.height}` : ""} +
+
+
+
+
+ + {displayError} +
+ ) : null} +
+ {label ? (
+
+ ) : null}
+ item.searchKey}
+ isItemEqualToValue={(a, b) =>
+ a.countryCode === b.countryCode && a.prefix === b.prefix
+ }
+ >
+
+
+
+
+
+
+
+
+ No countries found
+
+
+ {(item: CountryOption) => (
+
+
+
+
+ )}
+
+
+
+
+
+ {error ? (
+
+ )
+}
+
+export { PhoneNumberField, COUNTRIES_DATA }
+export type { CountryOption }
diff --git a/packages/shared-ui/src/components/phone-number-field/phone-number-field.stories.tsx b/packages/shared-ui/src/components/phone-number-field/phone-number-field.stories.tsx
new file mode 100644
index 0000000..4b588cf
--- /dev/null
+++ b/packages/shared-ui/src/components/phone-number-field/phone-number-field.stories.tsx
@@ -0,0 +1,73 @@
+import { useId, useState, type ComponentProps } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { PhoneNumberField, type PhoneNumber } from "./index"
+
+const emptyValue: PhoneNumber = { number: "", countryCode: "US" }
+
+function PhoneFieldDemo(
+ props: Omit
+
+ + {error} +
+ ) : null} +
+
+ ),
+}
+
+export const States: Story = {
+ render: () => (
+
+
+ ),
+}
diff --git a/packages/shared-ui/src/components/resource-field/index.tsx b/packages/shared-ui/src/components/resource-field/index.tsx
new file mode 100644
index 0000000..0ec6624
--- /dev/null
+++ b/packages/shared-ui/src/components/resource-field/index.tsx
@@ -0,0 +1,302 @@
+import {
+ useMemo,
+ useRef,
+ useState,
+ type ComponentProps,
+ type ReactNode,
+} from "react"
+
+import { ChevronDown, ChevronsUpDown, CornerDownLeft, Search } from "../../icons"
+import { type MixinProps, splitProps } from "../../lib/mixin"
+import { cn } from "../../cn"
+import { Input } from "../../ui/input"
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../../ui/input-group"
+import { Label } from "../../ui/label"
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover"
+import { Spinner } from "../spinner"
+
+export interface ResourceFieldProps
+ {children}
+
+ )
+}
+
+function ResourceFieldKey({
+ resource,
+ className,
+ ...inputProps
+}: Omit
+
+ {resource}
+
+ .
+
+
+ )
+}
+
+function ResourceField
+
+
+
+ setQuery(event.target.value)}
+ />
+
+
+
+
+ {renderActions && !query ? (
+
+
+
+ ) : null}
+
+ {grouped
+ ? grouped.map(([group, groupItems]) => (
+
+ Create
+
+ {renderActions}
+
+
+ ))
+ : (
+ <>
+ {filtered.length > 0 && !query ? (
+
+ {group}
+
+
+ {groupItems.map(renderItemButton)}
+
+
+ {recentLabel}
+
+ ) : null}
+
+ {filtered.map(renderItemButton)}
+
+
+ )}
+
+ {filtered.length === 0 ? (
+
+ No results found
+
+ ) : null}
+
+ {summary ?? (
+
+ {getItemTitle(value)}
+ {isLoading ? (
+
+ )}
+
+ ) : (
+ trigger(placeholder)
+ )}
+ {picker}
+
+ {label ? (
+
+ ) : null}
+ {field}
+ {error ? (
+
+ )
+}
+
+export { ResourceField, ResourceFieldItem, ResourceFieldKey }
diff --git a/packages/shared-ui/src/components/resource-field/resource-field.stories.tsx b/packages/shared-ui/src/components/resource-field/resource-field.stories.tsx
new file mode 100644
index 0000000..9fdaccd
--- /dev/null
+++ b/packages/shared-ui/src/components/resource-field/resource-field.stories.tsx
@@ -0,0 +1,161 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Popover } from "../../ui/popover"
+import {
+ ResourceField,
+ ResourceFieldItem,
+ ResourceFieldKey,
+} from "./index"
+
+type Resource = {
+ group: string
+ title: string
+ keyHint?: boolean
+}
+
+const resources: Resource[] = [
+ { group: "Payment", title: "amount" },
+ { group: "Payment", title: "currency" },
+ { group: "Payment", title: "status" },
+ { group: "Customer", title: "customer.email" },
+ { group: "Customer", title: "customer.name" },
+ { group: "Customer", title: "customer.metadata.+ {error} +
+ ) : null} +
+ item.title === "product.id") ?? null}
+ />
+
+ ),
+}
+
+export const Selected: Story = {
+ render: () => (
+
+
+ ),
+}
+
+export const Key: Story = {
+ render: function KeyComposer() {
+ const [key, setKey] = useState("region")
+ return (
+
+ Payment
+
+
+ amount
+ currency
+ status
+
+
+ Product
+
+
+ product.id
+ product.name
+
+
+
+ )
+}
+
+export { RuleBuilderConditionRow }
diff --git a/packages/shared-ui/src/components/rule-builder-condition-row/rule-builder-condition-row.stories.tsx b/packages/shared-ui/src/components/rule-builder-condition-row/rule-builder-condition-row.stories.tsx
new file mode 100644
index 0000000..bdfc529
--- /dev/null
+++ b/packages/shared-ui/src/components/rule-builder-condition-row/rule-builder-condition-row.stories.tsx
@@ -0,0 +1,97 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { RuleBuilderConditionRow } from "./index"
+
+type Resource = {
+ id: string
+ title: string
+}
+
+const resources: Resource[] = [
+ { id: "customer.metadata", title: "customer.metadata" },
+ { id: "customer.email", title: "customer.email" },
+ { id: "product.metadata", title: "product.metadata" },
+ { id: "payment.status", title: "payment.status" },
+]
+
+type Row = {
+ resourceId: string
+ fieldKey: string
+ operator: string
+ value: string
+}
+
+const figRow: Row = {
+ resourceId: "customer.metadata",
+ fieldKey: "plan_tier",
+ operator: "is",
+ value: "enterprise",
+}
+
+function findResource(id: string) {
+ return resources.find((item) => item.id === id) ?? null
+}
+
+function ConditionRowDemo(props: {
+ defaultRow?: Row
+ showRemove?: boolean
+ disabled?: boolean
+}) {
+ const [row, setRow] = useState
+
+ .
+ onFieldKeyChange(event.target.value)}
+ className={cn("h-9 w-28 font-mono md:text-sm", keyProps.className)}
+ />
+
+
+
+
+ onValueChange(event.target.value)}
+ className={cn("h-9 w-36 md:text-sm", input.className)}
+ />
+
+ {onRemove ? (
+
+ ) : null}
+
+
+ )
+}
+
+export { RuleBuilderDestinationRow }
diff --git a/packages/shared-ui/src/components/rule-builder-destination-row/rule-builder-destination-row.stories.tsx b/packages/shared-ui/src/components/rule-builder-destination-row/rule-builder-destination-row.stories.tsx
new file mode 100644
index 0000000..01b5337
--- /dev/null
+++ b/packages/shared-ui/src/components/rule-builder-destination-row/rule-builder-destination-row.stories.tsx
@@ -0,0 +1,164 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { RuleBuilderDestinationRow } from "./index"
+
+type Destination = {
+ id: string
+ name: string
+ description: string
+}
+
+const destinations: Destination[] = [
+ { id: "stripe-global", name: "Stripe", description: "global cards" },
+ { id: "adyen-eu", name: "Adyen", description: "EU acquiring" },
+ { id: "checkout-uk", name: "Checkout.com", description: "UK cards" },
+]
+
+const destinationTitle = (item: Destination) =>
+ `${item.name} · ${item.description}`
+
+type Row = {
+ id: string
+ destinationId: string
+ share: string
+ primary?: boolean
+}
+
+const figRows: Row[] = [
+ {
+ id: "1",
+ destinationId: "stripe-global",
+ share: "60",
+ primary: true,
+ },
+ {
+ id: "2",
+ destinationId: "adyen-eu",
+ share: "60",
+ },
+]
+
+function findDestination(id: string) {
+ return destinations.find((item) => item.id === id) ?? null
+}
+
+function DestinationRowDemo(props: {
+ defaultRow?: Row
+ showRemove?: boolean
+ disabled?: boolean
+}) {
+ const [row, setRow] = useState
+
+
+
+
+ onShareChange(event.target.value)}
+ className={cn("h-9 w-14 text-center md:text-sm", input.className)}
+ />
+
+ {suffix}
+
+
+
+
+ {primary ? (
+ {primaryLabel}
+ ) : onRemove ? (
+
+ ) : null}
+
+
+ {rows.map((row) => (
+
+ updateRow(row.id, { destinationId: item?.id ?? "" })
+ }
+ destinations={destinations}
+ getItemValue={(item) => item.id}
+ getItemTitle={destinationTitle}
+ share={row.share}
+ onShareChange={(share) => updateRow(row.id, { share })}
+ primary={row.primary}
+ onRemove={
+ row.primary
+ ? undefined
+ : () =>
+ setRows((current) =>
+ current.filter((item) => item.id !== row.id)
+ )
+ }
+ />
+ ))}
+
+ )
+}
+
+const meta: Meta
+
+ ),
+}
diff --git a/packages/shared-ui/src/components/spinner/index.tsx b/packages/shared-ui/src/components/spinner/index.tsx
new file mode 100644
index 0000000..2a9005d
--- /dev/null
+++ b/packages/shared-ui/src/components/spinner/index.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import * as React from "react";
+
+import UseAnimations from "react-useanimations";
+import loadingAnimation from "react-useanimations/lib/loading";
+
+interface Props extends Omit
+ {label ? (
+
+ ) : null}
+ {helpText ? (
+
+ {tags.map((item) => (
+ setTags(tags.filter((tagItem) => tagItem !== item))}
+ {...tag}
+ className={cn(tag.className)}
+ >
+ {item}
+
+ ))}
+
+ setPending(event.target.value)}
+ onKeyDown={handleKeyDown}
+ onBlur={addPending}
+ />
+
+ {disabled ? null : (
+
+ {
+ if (pending.trim()) addPending()
+ else
+ event.currentTarget
+ .closest("[data-slot=input-group]")
+ ?.querySelector("input")
+ ?.focus()
+ }}
+ >
+
+
+ )}
+
+
+ {error ? (
+
+ )
+}
+
+export { Tag, TagInput }
diff --git a/packages/shared-ui/src/components/tag-input/tag-input.stories.tsx b/packages/shared-ui/src/components/tag-input/tag-input.stories.tsx
new file mode 100644
index 0000000..0e3c36e
--- /dev/null
+++ b/packages/shared-ui/src/components/tag-input/tag-input.stories.tsx
@@ -0,0 +1,64 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Tag, TagInput } from "./index"
+
+const meta: Meta+ {helpText} +
+ ) : null} + ++ {error} +
+ ) : null} +
+ EU
+ EU
+
+ ),
+}
+
+export const States: Story = {
+ render: () => (
+
+
+ ),
+}
diff --git a/packages/shared-ui/src/components/timeline/index.tsx b/packages/shared-ui/src/components/timeline/index.tsx
new file mode 100644
index 0000000..ed25b78
--- /dev/null
+++ b/packages/shared-ui/src/components/timeline/index.tsx
@@ -0,0 +1,364 @@
+import { useMemo, useState, type ComponentType, type ReactNode } from "react"
+
+import { Check, ChevronDown, ChevronUp, ClockPlay, CloseX } from "../../icons"
+import { type MixinProps, splitProps } from "../../lib/mixin"
+import { cn } from "../../cn"
+import { Button } from "../../ui/button"
+import { Skeleton } from "../../ui/skeleton"
+
+type LinkComponentType = ComponentType<{
+ href: string
+ className?: string
+ target?: string
+ rel?: string
+ children?: ReactNode
+}>
+
+const DefaultLink: LinkComponentType = ({ href, children, ...props }) => (
+
+ {children}
+
+)
+
+export type TimelineStatus = "success" | "pending" | "error" | "complete"
+
+export interface TimelineEntry {
+ title: ReactNode
+ date?: ReactNode
+ source?: ReactNode
+ description?: ReactNode
+ status?: TimelineStatus
+ data?: Record{manualContent}
+ if (!data || summaryItems.length === 0) return null
+
+ return (
+
+ {summaryItems.reduce(
+ (prev, curr, i) =>
+ i === 0
+ ? [curr]
+ : [
+ ...prev,
+
+ •
+ ,
+ curr,
+ ],
+ []
+ )}
+
+ )
+}
+
+function getDiffRows(changes: Record
+ {rows.map((row) => (
+
+ )
+}
+
+function TimelineItem({
+ entry,
+ isLast,
+ routeMap,
+ LinkComponent,
+}: {
+ entry: TimelineEntry
+ isLast: boolean
+ routeMap?: Record
+ {formatLabel(row.key)}:
+
+ {row.from === null || row.from === "" || row.from === undefined ? "none" : String(row.from)}
+
+ →
+
+ {row.to === null || row.to === "" || row.to === undefined ? "none" : String(row.to)}
+
+
+ ))}
+
+ {!isLast ? (
+
+ ) : null}
+
+
+
+
+
+
+
+ {!isDetailed && entry.date ? (
+
+ ) : null}
+
+ {entry.description ? (
+ + {entry.title} +
+ {isDetailed ? ( + + {entry.date} + {entry.date && entry.source ? " - " : null} + {entry.source} + + ) : entry.source ? ( + {entry.source} + ) : null} +{entry.description}
+ ) : null} + +
+
+ )
+ }
+
+ if (!items?.length) {
+ return (
+ -
+ {Array.from({ length: skeletonRowCount }).map((_, i) => (
+
-
+ + {i < skeletonRowCount - 1 ? ( + + ) : null} ++
+ +++ +
+ ))}
+
+ {emptyMessage}
+
+ )
+ }
+
+ const displayItems = limit > 0 && items.length > limit && !isExpanded ? items.slice(0, limit) : items
+
+ return (
+
+
+ )
+}
+
+export { Timeline, TimelineStatusIcon }
+export type { LinkComponentType }
diff --git a/packages/shared-ui/src/components/timeline/timeline.stories.tsx b/packages/shared-ui/src/components/timeline/timeline.stories.tsx
new file mode 100644
index 0000000..cbe3541
--- /dev/null
+++ b/packages/shared-ui/src/components/timeline/timeline.stories.tsx
@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Timeline, type TimelineStatus } from "./index"
+
+type SampleItem = {
+ id: string
+ title: string
+ date: string
+ source?: string
+ description?: string
+ status?: TimelineStatus
+ data?: Record-
+ {displayItems.map((item, index) => {
+ const entry = renderItem(item, index)
+ return (
+
+
+
+ ) : null}
+
+
+ ),
+}
+
+export const WithData: Story = {
+ render: (args) => (
+
+
+ ),
+}
+
+export const WithLimit: Story = {
+ render: (args) => (
+
+
+ ),
+}
+
+export const Loading: Story = {
+ render: (args) => (
+
+
+ ),
+}
+
+export const Empty: Story = {
+ render: (args) => (
+
+
+ ),
+}
diff --git a/packages/shared-ui/src/components/wizard-stepper/index.tsx b/packages/shared-ui/src/components/wizard-stepper/index.tsx
new file mode 100644
index 0000000..564e1b6
--- /dev/null
+++ b/packages/shared-ui/src/components/wizard-stepper/index.tsx
@@ -0,0 +1,99 @@
+import { Fragment, type ComponentProps, type ReactNode } from "react"
+
+import { Check } from "../../icons"
+import { cn } from "../../cn"
+
+export type WizardStepStatus = "complete" | "current" | "upcoming"
+
+export interface WizardStepProps extends ComponentProps<"div"> {
+ status?: WizardStepStatus
+ step: number
+ label?: ReactNode
+}
+
+function WizardStep({
+ status = "upcoming",
+ step,
+ label,
+ className,
+ ...props
+}: WizardStepProps) {
+ return (
+
+
+ {status === "complete" ? (
+
+ )
+}
+
+export interface WizardStepperProps extends ComponentProps<"div"> {
+ steps: ReactNode[]
+ current?: number
+}
+
+function WizardStepper({ steps, current = 0, className, ...props }: WizardStepperProps) {
+ return (
+
+ {steps.map((label, index) => {
+ const status: WizardStepStatus =
+ index < current ? "complete" : index === current ? "current" : "upcoming"
+
+ return (
+
+
+ )
+ })}
+
+ )
+}
+
+export { WizardStep, WizardStepper }
diff --git a/packages/shared-ui/src/components/wizard-stepper/wizard-stepper.stories.tsx b/packages/shared-ui/src/components/wizard-stepper/wizard-stepper.stories.tsx
new file mode 100644
index 0000000..491aed9
--- /dev/null
+++ b/packages/shared-ui/src/components/wizard-stepper/wizard-stepper.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { WizardStep, WizardStepper } from "./index"
+
+const steps = ["Welcome", "Organization", "Provider", "Routing", "Checkout", "Finish"]
+
+const meta: Meta
+
+ ),
+}
diff --git a/packages/shared-ui/src/global.css b/packages/shared-ui/src/global.css
index b0b2415..6ca288e 100644
--- a/packages/shared-ui/src/global.css
+++ b/packages/shared-ui/src/global.css
@@ -8,7 +8,7 @@
--signal-blue-60: #7dafd9;
--signal-blue-40: #a8cae5;
--signal-blue-20: #d4e4f2;
-
+
--core-indigo-100: #100022;
--core-indigo-80: #40334e;
--core-indigo-60: #70667a;
@@ -27,6 +27,27 @@
--summit-sky-40: #f3f9fd;
--summit-sky-20: #f9fcfe;
+ --forest-green-100: #15803d;
+ --forest-green-80: #449964;
+ --forest-green-60: #73b38b;
+ --forest-green-40: #a1ccb1;
+ --forest-green-20: #d0e6d8;
+
+ --amber-orange-100: #b45309;
+ --amber-orange-80: #c3753a;
+ --amber-orange-60: #d2986b;
+ --amber-orange-40: #e1ba9d;
+ --amber-orange-20: #f0ddce;
+
+ --crimson-red-100: #bf3126;
+ --crimson-red-80: #cc5a51;
+ --crimson-red-60: #d9837d;
+ --crimson-red-40: #e5ada8;
+ --crimson-red-20: #f2d6d4;
+
+ --gradient-start: var(--signal-blue-80);
+ --gradient-end: var(--signal-blue-100);
+
--background: var(--summit-sky-40);
--foreground: var(--midnight-black-100);
--card: var(--summit-sky-20);
@@ -41,11 +62,34 @@
--muted-foreground: var(--midnight-black-60);
--accent: var(--signal-blue-20);
--accent-foreground: var(--signal-blue-100);
- --destructive: var(--core-indigo-100);
- --destructive-foreground: var(--summit-sky-20);
- --border: var(--summit-sky-80);
- --input: var(--summit-sky-80);
+ --success: var(--forest-green-100);
+ --success-foreground: var(--summit-sky-20);
+ --warning: var(--amber-orange-100);
+ --warning-foreground: var(--summit-sky-20);
+ --error: var(--crimson-red-100);
+ --error-foreground: var(--summit-sky-20);
+ --ring-error: var(--crimson-red-20);
+ --destructive: var(--error);
+ --destructive-foreground: var(--error-foreground);
+ --border: var(--core-indigo-20);
+ --input: var(--core-indigo-20);
--ring: var(--signal-blue-100);
+ --disabled: var(--core-indigo-20);
+ --disabled-foreground: var(--midnight-black-40);
+ --code: var(--midnight-black-100);
+ --code-foreground: var(--summit-sky-20);
+ --toast-info: color-mix(in srgb, var(--signal-blue-20) 55%, var(--summit-sky-20));
+ --toast-info-foreground: var(--signal-blue-100);
+ --toast-success: color-mix(in srgb, var(--forest-green-20) 55%, var(--summit-sky-20));
+ --toast-success-foreground: var(--forest-green-100);
+ --toast-warning: color-mix(in srgb, var(--amber-orange-20) 55%, var(--summit-sky-20));
+ --toast-warning-foreground: var(--amber-orange-100);
+ --toast-error: color-mix(in srgb, var(--crimson-red-20) 55%, var(--summit-sky-20));
+ --toast-error-foreground: var(--crimson-red-100);
+ --shadow-button-hover: 0 8px 16px -2px color-mix(in srgb, var(--primary) 40%, transparent);
+ --shadow-thumb: 0 4px 10px -2px color-mix(in srgb, var(--primary) 60%, transparent);
+ --shadow-ring-error: 0 0 0 4px var(--ring-error);
+ --shadow-elevation-md: 0px 10px 20px -30px color-mix(in srgb, var(--signal-blue-100) 20%, transparent);
--chart-1: var(--signal-blue-100);
--chart-2: var(--core-indigo-100);
--chart-3: var(--summit-sky-100);
@@ -106,6 +150,27 @@
--summit-sky-40: #f3f9fd;
--summit-sky-20: #f9fcfe;
+ --forest-green-100: #15803d;
+ --forest-green-80: #449964;
+ --forest-green-60: #73b38b;
+ --forest-green-40: #a1ccb1;
+ --forest-green-20: #d0e6d8;
+
+ --amber-orange-100: #b45309;
+ --amber-orange-80: #c3753a;
+ --amber-orange-60: #d2986b;
+ --amber-orange-40: #e1ba9d;
+ --amber-orange-20: #f0ddce;
+
+ --crimson-red-100: #bf3126;
+ --crimson-red-80: #cc5a51;
+ --crimson-red-60: #d9837d;
+ --crimson-red-40: #e5ada8;
+ --crimson-red-20: #f2d6d4;
+
+ --gradient-start: var(--signal-blue-80);
+ --gradient-end: #19609a;
+
--background: var(--core-indigo-100);
--foreground: var(--summit-sky-20);
--card: var(--core-indigo-80);
@@ -120,11 +185,34 @@
--muted-foreground: var(--core-indigo-20);
--accent: var(--signal-blue-20);
--accent-foreground: var(--signal-blue-100);
- --destructive: var(--midnight-black-80);
- --destructive-foreground: var(--summit-sky-20);
+ --success: var(--forest-green-100);
+ --success-foreground: var(--summit-sky-20);
+ --warning: var(--amber-orange-100);
+ --warning-foreground: var(--summit-sky-20);
+ --error: var(--crimson-red-100);
+ --error-foreground: var(--summit-sky-20);
+ --ring-error: var(--crimson-red-20);
+ --destructive: var(--error);
+ --destructive-foreground: var(--error-foreground);
--border: var(--core-indigo-80);
--input: var(--core-indigo-80);
--ring: var(--signal-blue-100);
+ --disabled: var(--core-indigo-60);
+ --disabled-foreground: var(--core-indigo-40);
+ --code: var(--midnight-black-100);
+ --code-foreground: var(--summit-sky-20);
+ --toast-info: color-mix(in srgb, var(--signal-blue-20) 55%, var(--summit-sky-20));
+ --toast-info-foreground: var(--signal-blue-100);
+ --toast-success: color-mix(in srgb, var(--forest-green-20) 55%, var(--summit-sky-20));
+ --toast-success-foreground: var(--forest-green-100);
+ --toast-warning: color-mix(in srgb, var(--amber-orange-20) 55%, var(--summit-sky-20));
+ --toast-warning-foreground: var(--amber-orange-100);
+ --toast-error: color-mix(in srgb, var(--crimson-red-20) 55%, var(--summit-sky-20));
+ --toast-error-foreground: var(--crimson-red-100);
+ --shadow-button-hover: 0 8px 16px -2px color-mix(in srgb, var(--primary) 45%, transparent);
+ --shadow-thumb: 0 4px 10px -2px color-mix(in srgb, var(--primary) 60%, transparent);
+ --shadow-ring-error: 0 0 0 4px var(--ring-error);
+ --shadow-elevation-md: 0px 10px 20px -30px color-mix(in srgb, var(--signal-blue-100) 20%, transparent);
--chart-1: var(--signal-blue-100);
--chart-2: var(--summit-sky-100);
--chart-3: var(--signal-blue-60);
@@ -163,6 +251,8 @@
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
+ --color-gradient-start: var(--gradient-start);
+ --color-gradient-end: var(--gradient-end);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
@@ -171,9 +261,28 @@
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
+ --color-success: var(--success);
+ --color-success-foreground: var(--success-foreground);
+ --color-warning: var(--warning);
+ --color-warning-foreground: var(--warning-foreground);
+ --color-error: var(--error);
+ --color-error-foreground: var(--error-foreground);
+ --color-ring-error: var(--ring-error);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
+ --color-disabled: var(--disabled);
+ --color-disabled-foreground: var(--disabled-foreground);
+ --color-code: var(--code);
+ --color-code-foreground: var(--code-foreground);
+ --color-toast-info: var(--toast-info);
+ --color-toast-info-foreground: var(--toast-info-foreground);
+ --color-toast-success: var(--toast-success);
+ --color-toast-success-foreground: var(--toast-success-foreground);
+ --color-toast-warning: var(--toast-warning);
+ --color-toast-warning-foreground: var(--toast-warning-foreground);
+ --color-toast-error: var(--toast-error);
+ --color-toast-error-foreground: var(--toast-error-foreground);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
@@ -205,6 +314,10 @@
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
+ --shadow-button-hover: var(--shadow-button-hover);
+ --shadow-thumb: var(--shadow-thumb);
+ --shadow-ring-error: var(--shadow-ring-error);
+ --shadow-elevation-md: var(--shadow-elevation-md);
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
diff --git a/packages/shared-ui/src/hooks/use-copy.ts b/packages/shared-ui/src/hooks/use-copy.ts
new file mode 100644
index 0000000..02e2a3b
--- /dev/null
+++ b/packages/shared-ui/src/hooks/use-copy.ts
@@ -0,0 +1,13 @@
+import { useState } from "react"
+
+export function useCopy(resetDelay = 2000) {
+ const [copied, setCopied] = useState(false)
+
+ const copy = async (text: string) => {
+ await navigator.clipboard.writeText(text)
+ setCopied(true)
+ window.setTimeout(() => setCopied(false), resetDelay)
+ }
+
+ return { copied, copy }
+}
diff --git a/packages/shared-ui/src/icons.tsx b/packages/shared-ui/src/icons.tsx
index 376b15e..12e72a2 100644
--- a/packages/shared-ui/src/icons.tsx
+++ b/packages/shared-ui/src/icons.tsx
@@ -1,3 +1,5 @@
+import type { SVGProps } from "react";
+
export function PayroutesLogo({ className }: { className?: string }) {
return (