@xenide-io/the-old-ui-theme 0.2.3

package/dist/src/index.d.mts

@@ -0,0 +1,893 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, ComponentPropsWithoutRef, CSSProperties, SVGAttributes } from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "signal" | "accent" | "neutral" | "info" | "success" | "warning" | "danger" | "ghost" | "link";
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+type ButtonShape = "default" | "circle" | "square" | "wide";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    outline?: boolean;
+    /** Toolbar split control (Run ▾) — adds divider before trailing icon slot */
+    split?: boolean;
+    icon?: ReactNode;
+    sideIcon?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * PostHog LemonButton parity — primary/secondary use ::before border ring + ::after face/ridge
+ * (see PostHog `LemonButton.scss`). Prefer this over raw `<button className="ph-btn …">`.
+ */
+declare function Button({ variant, size, shape, outline, split, icon, sideIcon, className, children, type, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonChromeProps {
+    label?: ReactNode;
+    icon?: ReactNode;
+    sideIcon?: ReactNode;
+    split?: boolean;
+}
+/** Inner face for Lemon primary/secondary — keeps labels above ::after ridge. */
+declare function ButtonChrome({ label, icon, sideIcon, split }: ButtonChromeProps): react_jsx_runtime.JSX.Element;
+
+type AlertStatus = "info" | "success" | "warning" | "danger";
+interface AlertProps {
+    status?: AlertStatus;
+    title?: string;
+    description?: string;
+    icon?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    onDismiss?: () => void;
+}
+declare function Alert({ status, title, description, icon, children, className, onDismiss, }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = "brand" | "neutral" | "success" | "warning" | "danger" | "info" | "outline";
+type BadgeSize = "sm" | "md";
+interface BadgeProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    children?: ReactNode;
+    className?: string;
+}
+declare function Badge({ variant, size, children, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type CardVariant = "default" | "outlined" | "elevated" | "highlighted";
+interface CardProps {
+    children?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    footer?: ReactNode;
+    media?: ReactNode;
+    variant?: CardVariant;
+    className?: string;
+    bodyClassName?: string;
+}
+declare function Card({ children, title, description, actions, footer, media, variant, className, bodyClassName, }: CardProps): react_jsx_runtime.JSX.Element;
+
+type DrawerSide = "left" | "right";
+type DrawerSize = "sm" | "md" | "lg";
+interface DrawerProps {
+    open?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    side?: DrawerSide;
+    size?: DrawerSize;
+    className?: string;
+    showCloseButton?: boolean;
+}
+declare function Drawer({ open, onClose, title, children, footer, side, size, className, showCloseButton, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+
+type KbdVariant = "shortcut" | "key" | "token";
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    variant?: KbdVariant;
+    keys?: ReactNode[];
+    children?: ReactNode;
+}
+declare function Kbd({ variant, keys, children, className, ...props }: KbdProps): react_jsx_runtime.JSX.Element;
+
+type DropdownAlign = "start" | "end";
+interface DropdownMenuProps extends HTMLAttributes<HTMLDetailsElement> {
+    /** Custom trigger node (avatar, icon chip, etc.) */
+    trigger: ReactNode;
+    /** Accessible name when trigger has no visible text */
+    "aria-label": string;
+    children: ReactNode;
+    align?: DropdownAlign;
+    panelClassName?: string;
+}
+interface DropdownButtonProps extends Omit<HTMLAttributes<HTMLDetailsElement>, "children"> {
+    /** Visible button label */
+    label: string;
+    variant?: "primary" | "secondary" | "accent";
+    outline?: boolean;
+    size?: ButtonSize;
+    /** Split control (Run ▾) — divider before trailing chevron */
+    split?: boolean;
+    icon?: ReactNode;
+    /** Defaults to chevron when omitted */
+    sideIcon?: ReactNode;
+    children: ReactNode;
+    align?: DropdownAlign;
+    panelClassName?: string;
+    /** Overrides accessible name; defaults to `label` */
+    "aria-label"?: string;
+}
+/** Generic `<details>` menu — pass any trigger (avatar, icon chip, etc.). */
+declare function DropdownMenu({ trigger, children, align, className, panelClassName, "aria-label": ariaLabel, ...props }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+/** Lemon-styled dropdown trigger (primary / secondary / accent) with labelled chrome. */
+declare function DropdownButton({ label, variant, outline, size, split, icon, sideIcon, children, align, className, panelClassName, "aria-label": ariaLabel, ...props }: DropdownButtonProps): react_jsx_runtime.JSX.Element;
+declare function DropdownItem({ className, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+
+type InputSize = "sm" | "md" | "lg";
+type InputVariant = "default" | "ghost";
+interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
+    label?: string;
+    hideLabel?: boolean;
+    error?: string;
+    helperText?: string;
+    size?: InputSize;
+    variant?: InputVariant;
+    wrapperClassName?: string;
+}
+declare function Input({ id: idProp, label, hideLabel, error, helperText, size, variant, className, wrapperClassName, disabled, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+interface SelectProps extends Omit<ComponentPropsWithoutRef<"select">, "size"> {
+    label?: string;
+    hideLabel?: boolean;
+    error?: string;
+    helperText?: string;
+    size?: InputSize;
+    wrapperClassName?: string;
+    children: ReactNode;
+}
+declare function Select({ id: idProp, label, hideLabel, error, helperText, size, className, wrapperClassName, disabled, children, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+interface TextareaProps extends Omit<ComponentPropsWithoutRef<"textarea">, "size"> {
+    label?: string;
+    hideLabel?: boolean;
+    error?: string;
+    helperText?: string;
+    size?: InputSize;
+    wrapperClassName?: string;
+}
+declare function Textarea({ id: idProp, label, hideLabel, error, helperText, size, className, wrapperClassName, disabled, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
+interface CheckboxProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+    label?: ReactNode;
+    error?: string;
+    helperText?: string;
+    wrapperClassName?: string;
+}
+declare function Checkbox({ id: idProp, label, error, helperText, className, wrapperClassName, disabled, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+interface RadioProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+    label?: ReactNode;
+    wrapperClassName?: string;
+}
+declare function Radio({ id: idProp, label, className, wrapperClassName, disabled, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+interface ToggleProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+    label?: ReactNode;
+    wrapperClassName?: string;
+}
+declare function Toggle({ id: idProp, label, className, wrapperClassName, disabled, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
+interface RangeProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+    label?: string;
+    minLabel?: string;
+    maxLabel?: string;
+    valueLabel?: string;
+    wrapperClassName?: string;
+}
+declare function Range({ label, minLabel, maxLabel, valueLabel, wrapperClassName, className, ...props }: RangeProps): react_jsx_runtime.JSX.Element;
+interface FileUploadProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+    label?: string;
+    prompt?: string;
+    wrapperClassName?: string;
+}
+declare function FileUpload({ label, prompt, wrapperClassName, className, ...props }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+interface ModalProps {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+    description?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    size?: ModalSize;
+    className?: string;
+    showCloseButton?: boolean;
+}
+declare function Modal({ open, onClose, title, description, children, footer, size, className, showCloseButton, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    current?: boolean;
+}
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    label?: string;
+    className?: string;
+}
+declare function Breadcrumbs({ items, label, className }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+interface PaginationProps {
+    page: number;
+    totalPages: number;
+    onPageChange?: (page: number) => void;
+    label?: string;
+    compact?: boolean;
+    className?: string;
+}
+declare function Pagination({ page, totalPages, onPageChange, label, compact, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+interface PanelProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+}
+declare function Panel({ title, description, children, className, ...props }: PanelProps): react_jsx_runtime.JSX.Element;
+
+interface RatingProps extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+    label?: string;
+    value?: number;
+    max?: number;
+    readOnly?: boolean;
+    onChange?: (value: number) => void;
+    wrapperClassName?: string;
+}
+declare function Rating({ label, value, max, readOnly, onChange, className, wrapperClassName, ...props }: RatingProps): react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+    /** Associated label text — always rendered (visually hidden when `hideLabel`) */
+    label?: string;
+    hideLabel?: boolean;
+    /** Optional shortcut hint shown inside the field (e.g. "⌘K") */
+    shortcut?: string;
+    density?: "default" | "compact";
+    wrapperClassName?: string;
+}
+/** Labelled search field — use in nav bars and toolbars. */
+declare function SearchInput({ id: idProp, label, hideLabel, shortcut, density, className, wrapperClassName, placeholder, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
+interface SearchGroupProps extends Omit<ComponentPropsWithoutRef<"input">, "type"> {
+    label?: string;
+    submitLabel?: string;
+    wrapperClassName?: string;
+}
+/** Input + primary search — one control shell, 1px vertical seam, matched height to `ph-input`. */
+declare function SearchGroup({ id: idProp, label, submitLabel, placeholder, wrapperClassName, className, ...props }: SearchGroupProps): react_jsx_runtime.JSX.Element;
+
+interface TableColumn<T> {
+    key: string;
+    header: ReactNode;
+    cell: (row: T) => ReactNode;
+    className?: string;
+}
+interface TableProps<T> {
+    data: T[];
+    columns: TableColumn<T>[];
+    zebra?: boolean;
+    compact?: boolean;
+    ribbon?: boolean;
+    getRowStyle?: (row: T) => CSSProperties | undefined;
+    className?: string;
+    caption?: string;
+}
+declare function Table<T>({ data, columns, zebra, compact, ribbon, getRowStyle, className, caption, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+type StatTone = "default" | "brand" | "blue" | "purple" | "warning";
+interface StatProps extends ComponentPropsWithoutRef<"article"> {
+    icon?: ReactNode;
+    label: ReactNode;
+    value: ReactNode;
+    footer?: ReactNode;
+    tone?: StatTone;
+}
+declare function Stat({ icon, label, value, footer, tone, className, ...props }: StatProps): react_jsx_runtime.JSX.Element;
+
+type ToastStatus = "info" | "success" | "warning" | "danger";
+interface ToastProps {
+    status?: ToastStatus;
+    title: string;
+    description?: string;
+    onDismiss?: () => void;
+    className?: string;
+}
+declare function Toast({ status, title, description, onDismiss, className, }: ToastProps): react_jsx_runtime.JSX.Element;
+interface ToastStackProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function ToastStack({ children, className }: ToastStackProps): react_jsx_runtime.JSX.Element;
+
+interface TabItem {
+    value: string;
+    label: string;
+}
+type TabsVariant = "pill" | "underline";
+interface TabsProps {
+    items: TabItem[];
+    value: string;
+    onChange: (value: string) => void;
+    variant?: TabsVariant;
+    className?: string;
+}
+declare function Tabs({ items, value, onChange, variant, className }: TabsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Re-applies `html[data-theme]` after React commits. Hydration can clear attributes
+ * that were set only by `THEME_INIT_SCRIPT` — without this sync, `:root`-scoped
+ * light tokens effectively win visually.
+ */
+declare function ThemeDomSync(): null;
+
+interface ThemeManagerProps {
+    children?: ReactNode;
+}
+/** Client wrapper that keeps html[data-theme] synced with localStorage. */
+declare function ThemeManager({ children }: ThemeManagerProps): react_jsx_runtime.JSX.Element;
+
+interface ThemeSwitcherProps {
+    className?: string;
+}
+/** Colour-only theme picker — persists to localStorage and sets html[data-theme]. */
+declare function ThemeSwitcher({ className }: ThemeSwitcherProps): react_jsx_runtime.JSX.Element;
+
+interface IconProps extends SVGAttributes<SVGSVGElement> {
+    /** Pixel size or CSS length — defaults to `1em` (Lemon parity). */
+    size?: number | string;
+}
+/** Base SVG wrapper — mirrors PostHog `LemonIconBase` + `.LemonIcon` metrics. */
+declare function IconBase({ className, size, children, viewBox, fill, xmlns, focusable, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+
+interface IconBaseDefinition {
+    viewBox?: string;
+    paths: ReactNode;
+}
+/** Factory for filled Lemon-style glyphs (Material / PostHog paths). */
+declare function createIconBase({ viewBox, paths }: IconBaseDefinition): (props: IconProps) => react_jsx_runtime.JSX.Element;
+/** Shorthand for single-path filled icons. */
+declare function createIconBasePath(d: string, viewBox?: string): (props: IconProps) => react_jsx_runtime.JSX.Element;
+
+declare const IconAreaChart: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconCumulativeChart: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconTableChart: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconHandClick: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconSurveys: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconCohort: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconRecording: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconFlare: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconSelectEvents: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconClipboardEdit: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconQueryEditor: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconTuning: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconSync: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconPlayCircle: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconGridView: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconListView: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconPremium: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconGift: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconRobot: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconExclamation: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconErrorOutline: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconCancel: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconCheckCircle: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconArrowUp: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconArrowDown: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconChevronLeft: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconChevronRight: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconChevronDown: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconSubArrowRight: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconSearch: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconBell: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconBellOff: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconPerson: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconHome: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconPanelRight: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconPlus: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconCheck: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconClose: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconTrash: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconDownload: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconUpload: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconSave: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconCopy: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconEdit: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconLogout: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconStar: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconMail: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconShoppingCart: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconMoon: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconSun: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconVolume: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconVolumeOff: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconFlag: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconDatabase: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconLayers: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconBox: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconBolt: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconRadar: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconToggle: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconRocket: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconTerminal: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconActivity: (props: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconFlask: (props: IconProps) => react_jsx_runtime.JSX.Element;
+/** Busy-state spinner — PostHog `IconSync` with spin animation. */
+declare function IconSpinner({ className, ...props }: IconProps): react_jsx_runtime.JSX.Element;
+/** Alias map for showcase / migration from Lucide names. */
+declare const PH_ICONS: {
+    readonly activity: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly areaChart: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly arrowDown: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly arrowUp: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly bell: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly bellOff: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly bolt: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly box: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly cancel: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly check: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly checkCircle: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly chevronDown: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly chevronLeft: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly chevronRight: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly clipboard: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly close: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly cohort: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly copy: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly cumulativeChart: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly database: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly download: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly edit: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly errorOutline: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly exclamation: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly flag: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly flare: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly flask: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly gift: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly grid: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly handClick: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly home: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly info: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly layers: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly list: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly logout: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly mail: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly moon: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly panelRight: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly person: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly play: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly plus: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly premium: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly queryEditor: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly radar: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly recording: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly robot: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly rocket: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly save: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly search: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly selectEvents: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly settings: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly shoppingCart: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly spinner: typeof IconSpinner;
+    readonly star: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly subArrowRight: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly sun: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly surveys: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly sync: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly tableChart: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly terminal: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly toggle: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly trash: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly trendingUp: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly upload: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly volume: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly volumeOff: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly warning: (props: IconProps) => react_jsx_runtime.JSX.Element;
+    readonly xCircle: (props: IconProps) => react_jsx_runtime.JSX.Element;
+};
+type IconName = keyof typeof PH_ICONS;
+declare function IconByName({ name, ...props }: IconProps & {
+    name: IconName;
+}): react_jsx_runtime.JSX.Element;
+
+interface AccordionItem {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    allowMultiple?: boolean;
+    defaultOpen?: string[];
+    className?: string;
+}
+declare function Accordion({ items, allowMultiple, defaultOpen, className, }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+interface Step {
+    id: string;
+    label: string;
+    description?: string;
+    status?: "pending" | "current" | "completed" | "error";
+}
+interface StepperProps {
+    steps: Step[];
+    currentStep: number;
+    className?: string;
+}
+declare function Stepper({ steps, currentStep, className }: StepperProps): react_jsx_runtime.JSX.Element;
+
+interface SegmentedControlOption {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+interface SegmentedControlProps {
+    options: SegmentedControlOption[];
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+}
+declare function SegmentedControl({ options, value, onChange, className }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
+
+interface CommandItem {
+    id: string;
+    label: string;
+    shortcut?: string;
+    icon?: React.ReactNode;
+    onSelect: () => void;
+}
+interface CommandPaletteProps {
+    items: CommandItem[];
+    isOpen: boolean;
+    onClose: () => void;
+    placeholder?: string;
+    className?: string;
+}
+declare function CommandPalette({ items, isOpen, onClose, placeholder, className, }: CommandPaletteProps): react_jsx_runtime.JSX.Element | null;
+
+interface CalendarProps {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    className?: string;
+}
+declare function Calendar({ value, onChange, className }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+interface HoverCardProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function HoverCard({ trigger, children, className }: HoverCardProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, action, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface FilterChip {
+    id: string;
+    label: string;
+    active?: boolean;
+}
+interface FilterChipsProps {
+    chips: FilterChip[];
+    onToggle: (id: string) => void;
+    onRemove: (id: string) => void;
+    className?: string;
+}
+declare function FilterChips({ chips, onToggle, onRemove, className }: FilterChipsProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps {
+    code: string;
+    language?: string;
+    filename?: string;
+    className?: string;
+}
+declare function CodeBlock({ code, language, filename, className }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+interface ComponentPropRow {
+    name: string;
+    type: string;
+    defaultValue?: string;
+    description: ReactNode;
+}
+interface ComponentDocsProps {
+    title?: string;
+    rows: ComponentPropRow[];
+    defaultOpen?: boolean;
+    className?: string;
+}
+declare function ComponentDocs({ title, rows, defaultOpen, className }: ComponentDocsProps): react_jsx_runtime.JSX.Element;
+
+interface ShowcaseWrapperProps {
+    id?: string;
+    title: string;
+    description?: string;
+    docs?: ReactNode;
+    code: string;
+    filename?: string;
+    children: ReactNode;
+    className?: string;
+}
+declare function ShowcaseWrapper({ id, title, description, docs, code, filename, children, className, }: ShowcaseWrapperProps): react_jsx_runtime.JSX.Element;
+
+interface CollapsibleSectionProps {
+    title: string;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    id?: string;
+}
+declare function CollapsibleSection({ title, children, defaultOpen, id }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element;
+
+type TextTone = "default" | "muted" | "subtle" | "brand" | "danger" | "success" | "warning" | "info" | "inherit";
+type TextWeight = "normal" | "medium" | "semibold" | "bold" | "extrabold";
+interface TextBaseProps {
+    tone?: TextTone;
+    weight?: TextWeight;
+    className?: string;
+    children?: ReactNode;
+    truncate?: boolean;
+}
+/** Display text — largest heading, use once per page */
+declare function Display({ children, tone, weight, truncate, className, }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** H1 — page title */
+declare function H1({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** H2 — section title */
+declare function H2({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** H3 — subsection title */
+declare function H3({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** H4 — card / panel title */
+declare function H4({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** H5 — small heading */
+declare function H5({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** Body — default paragraph text */
+declare function P({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** Small body text */
+declare function Small({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** Extra small text — captions, meta */
+declare function Caption({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** Overline — tiny eyebrow text */
+declare function Overline({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** Lead — intro paragraph, larger and muted */
+declare function Lead({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** Mono — code, data, technical text */
+declare function Mono({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+/** Label — form labels, tags */
+declare function Label({ children, tone, weight, truncate, className }: TextBaseProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+type AvatarStatus = "online" | "offline" | "away" | "busy";
+interface AvatarProps extends ComponentPropsWithoutRef<"div"> {
+    /** Text initials or label (e.g. "JD") */
+    label?: string;
+    /** Optional icon or image */
+    icon?: ReactNode;
+    /** Size preset */
+    size?: AvatarSize;
+    /** Background colour class */
+    color?: string;
+    /** Status indicator dot */
+    status?: AvatarStatus;
+    /** Badge count or text */
+    badge?: string;
+}
+declare function Avatar({ label, icon, size, color, status, badge, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+interface AvatarGroupProps extends ComponentPropsWithoutRef<"div"> {
+    children?: ReactNode;
+    max?: number;
+}
+declare function AvatarGroup({ children, max, className, ...props }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressProps extends ComponentPropsWithoutRef<"div"> {
+    /** Current value (0-100) */
+    value: number;
+    /** Maximum value (default 100) */
+    max?: number;
+    /** Color class for the bar */
+    color?: string;
+    /** Optional label shown above */
+    label?: string;
+    /** Show percentage text */
+    showPercentage?: boolean;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+}
+declare function Progress({ value, max, color, label, showPercentage, size, className, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+type ChatBubbleVariant = "from" | "self";
+interface ChatBubbleProps extends ComponentPropsWithoutRef<"div"> {
+    /** Message content */
+    children?: ReactNode;
+    /** Avatar or icon */
+    avatar?: ReactNode;
+    /** Sender name */
+    name?: string;
+    /** Timestamp */
+    time?: string;
+    /** "from" = left/grey, "self" = right/brand */
+    variant?: ChatBubbleVariant;
+    /** Footer text (e.g. "Synced with...") */
+    footer?: ReactNode;
+}
+declare function ChatBubble({ children, avatar, name, time, variant, footer, className, ...props }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
+
+interface TerminalProps extends ComponentPropsWithoutRef<"div"> {
+    /** Window title */
+    title?: string;
+    /** Terminal lines — array of { text, color? } or plain strings */
+    lines?: Array<{
+        text: string;
+        color?: string;
+    } | string>;
+    /** Custom content instead of lines */
+    children?: ReactNode;
+}
+declare function Terminal({ title, lines, children, className, ...props }: TerminalProps): react_jsx_runtime.JSX.Element;
+
+type IndicatorPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+interface IndicatorProps extends ComponentPropsWithoutRef<"div"> {
+    /** The element to attach the indicator to */
+    children: ReactNode;
+    /** Badge content (number, text, or "!") */
+    badge?: ReactNode;
+    /** Indicator colour */
+    color?: string;
+    /** Position of the indicator dot */
+    position?: IndicatorPosition;
+    /** Show a simple dot instead of a badge */
+    dot?: boolean;
+    /** Offset from corner (default: 2px) */
+    offset?: number;
+}
+declare function Indicator({ children, badge, color, position, dot, className, ...props }: IndicatorProps): react_jsx_runtime.JSX.Element;
+
+interface TimelineEvent {
+    id: string;
+    title: string;
+    description?: string;
+    time?: string;
+    icon?: ReactNode;
+    color?: string;
+}
+interface TimelineProps extends ComponentPropsWithoutRef<"ol"> {
+    events: TimelineEvent[];
+    /** Alternate left/right layout on large screens */
+    alternate?: boolean;
+}
+declare function Timeline({ events, alternate, className, ...props }: TimelineProps): react_jsx_runtime.JSX.Element;
+
+type ThemeId = "hedgehog-light" | "hedgehog-dark" | "catppuccin-light" | "catppuccin-dark" | "sheets" | "sheets-dark" | "socials" | "socials-dark" | "xenide-light" | "xenide-dark" | "chats-light" | "chats-dark" | "bikini-bottom" | "bikini-bottom-dark" | "turtletime" | "turtletime-dark" | "note" | "note-dark" | "presentation" | "presentation-dark" | "github-light" | "github-dark" | "rosepine-light" | "rosepine-dark";
+interface ThemeDefinition {
+    id: ThemeId;
+    name: string;
+    description: string;
+    colorScheme: "light" | "dark";
+    group: string;
+}
+
+declare const DEFAULT_THEME_ID: ThemeId;
+declare const THEMES: ThemeDefinition[];
+declare const THEME_GROUPS: string[];
+declare function isThemeId(value: string): value is ThemeId;
+declare function getTheme(id: string): ThemeDefinition | undefined;
+
+/** Inline script — runs before paint to avoid theme flash. */
+declare const THEME_INIT_SCRIPT: string;
+declare function persistTheme(themeId: string): void;
+declare function readStoredTheme(): string;
+
+/**
+ * Canvas + `d3-scale` trend — same **model** as PostHog `lib/hog-charts` (MIT), not a pixel-perfect port.
+ */
+declare function HogTrendLineChart(): react_jsx_runtime.JSX.Element;
+declare function InsightVerticalBarChart(): react_jsx_runtime.JSX.Element;
+declare function InsightHorizontalBarChart(): react_jsx_runtime.JSX.Element;
+declare function InsightStackedBarChart(): react_jsx_runtime.JSX.Element;
+declare function InsightDoughnutChart(): react_jsx_runtime.JSX.Element;
+declare function InsightPolarAreaChart(): react_jsx_runtime.JSX.Element;
+
+/**
+ * Any CSS `<color>` usable in `background`, e.g. `var(--ph-product-session-replay)` or `#1d4aff`.
+ */
+type RibbonColour = string;
+
+interface DashboardWellProps extends ComponentPropsWithoutRef<"div"> {
+}
+declare function DashboardWell({ className, ...props }: DashboardWellProps): react_jsx_runtime.JSX.Element;
+
+interface DashboardToolbarProps {
+    /** Dashboard / tab title (matches PostHog H3 weight on canvases). */
+    title: string;
+    description?: string;
+    /** Right-aligned actions slot (buttons, dropdown triggers, etc.). */
+    actions?: ReactNode;
+    className?: string;
+}
+declare function DashboardToolbar({ title, description, actions, className }: DashboardToolbarProps): react_jsx_runtime.JSX.Element;
+
+interface DashboardGridProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Preset breakpoints: 1 col → md:2 cols → xl:3 (matches common insight grids).
+     * Override with your own `className` if you need 4-up or single column.
+     */
+    preset?: "insights" | "dense";
+}
+declare function DashboardGrid({ preset, className, ...props }: DashboardGridProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Raised strip reminiscent of dashboard date-range / cohort / breakdown controls.
+ * Pass pills or selects as children.
+ */
+declare function DashboardFiltersBar({ className, ...props }: ComponentPropsWithoutRef<"div">): react_jsx_runtime.JSX.Element;
+
+interface DashboardKpiCardProps extends ComponentPropsWithoutRef<"article"> {
+    /** Upper label (tabular small caps styling via `.ph-stat-label`). */
+    label: ReactNode;
+    /** Main KPI value. */
+    value: ReactNode;
+    /** Supporting line beneath the value (Δ %, qualifier, etc.). */
+    footer?: ReactNode;
+    /** Optional decorative icon aligned with headline stats across the PostHog app. */
+    icon?: ReactNode;
+}
+declare function DashboardKpiCard({ label, value, footer, icon, className, children, ...props }: DashboardKpiCardProps): react_jsx_runtime.JSX.Element;
+
+interface DashboardInsightPlaceholderProps extends ComponentPropsWithoutRef<"button"> {
+    /** Accessible name when `children` does not include visible text. */
+    label?: string;
+}
+/**
+ * Mimics PostHog’s empty dashboard slot (“add insight”).
+ * Renders `<button>` so you can wire `onClick` → palette / modal.
+ *
+ * **`onClick` and other event props:** use this inside a Client Component (or a wrapper
+ * marked `'use client'`). Server Components cannot serialise function props.
+ */
+declare function DashboardInsightPlaceholder({ label, className, children, type, ...props }: DashboardInsightPlaceholderProps): react_jsx_runtime.JSX.Element;
+
+interface InsightShellProps extends ComponentPropsWithoutRef<"article"> {
+    /**
+     * Left ribbon fill; omit or pass empty string for a flat card (no ribbon column).
+     * Prefer `var(--ph-product-*)` or `var(--ph-data-*)` tokens from `globals.css`.
+     */
+    ribbonColour?: RibbonColour | null;
+    /** Extra classes on the padded body column (e.g. `gap-4`). */
+    bodyClassName?: string;
+}
+declare function InsightShell({ ribbonColour, bodyClassName, className, children, ...props }: InsightShellProps): react_jsx_runtime.JSX.Element;
+
+interface InsightShellHeaderProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Trailing widgets (menus, fullscreen, cohort badge). */
+    actions?: ReactNode;
+    className?: string;
+}
+declare function InsightShellHeader({ title, subtitle, actions, className }: InsightShellHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface MiniTrendBarsProps {
+    /** Normalised heights 0–100 for each bar (% of chart row). */
+    heights: readonly number[];
+    /** Tailwind height of the bars row (flex align-end). Default matches gallery `h-28`. */
+    rowClassName?: string;
+    /**
+     * Map bar index → CSS `--ph-data-*` token index (1–7).
+     * Default cycles through PostHog’s default trend palette.
+     */
+    seriesResolver?: (index: number, height: number) => number;
+    className?: string;
+}
+declare function MiniTrendBars({ heights, rowClassName, seriesResolver, className, }: MiniTrendBarsProps): react_jsx_runtime.JSX.Element;
+
+interface InsightMiniCardProps extends Omit<InsightShellProps, "children"> {
+    title: string;
+    subtitle?: string;
+    heights: readonly number[];
+}
+/** Opinionated insight tile: coloured ribbon + headline + subtitle + mini Hog-style bar sparkline. */
+declare function InsightMiniCard({ title, subtitle, heights, ribbonColour, ...shellProps }: InsightMiniCardProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, Alert, type AlertProps, type AlertStatus, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonChrome, type ButtonChromeProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, Caption, Card, type CardProps, type CardVariant, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, Checkbox, type CheckboxProps, CodeBlock, CollapsibleSection, CommandPalette, ComponentDocs, type ComponentDocsProps, type ComponentPropRow, DEFAULT_THEME_ID, DashboardFiltersBar, DashboardGrid, type DashboardGridProps, DashboardInsightPlaceholder, type DashboardInsightPlaceholderProps, DashboardKpiCard, type DashboardKpiCardProps, DashboardToolbar, type DashboardToolbarProps, DashboardWell, type DashboardWellProps, Display, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, type DropdownAlign, DropdownButton, type DropdownButtonProps, DropdownItem, DropdownMenu, type DropdownMenuProps, EmptyState, FileUpload, type FileUploadProps, FilterChips, H1, H2, H3, H4, H5, HogTrendLineChart, HoverCard, IconBase as Icon, IconActivity, IconAreaChart, IconArrowDown, IconArrowUp, IconBase, IconBell, IconBellOff, IconBolt, IconBox, IconByName, IconCancel, IconCheck, IconCheckCircle, IconChevronDown, IconChevronLeft, IconChevronRight, IconClipboardEdit, IconClose, IconCohort, IconCopy, IconCumulativeChart, IconDatabase, IconDownload, IconEdit, IconErrorOutline, IconExclamation, IconFlag, IconFlare, IconFlask, IconGift, IconGridView, IconHandClick, IconHome, IconLayers, IconListView, IconLogout, IconMail, IconMoon, type IconName, IconPanelRight, IconPerson, IconPlayCircle, IconPlus, IconPremium, type IconProps, IconQueryEditor, IconRadar, IconRecording, IconRobot, IconRocket, IconSave, IconSearch, IconSelectEvents, IconShoppingCart, IconSpinner, IconStar, IconSubArrowRight, IconSun, IconSurveys, IconSync, IconTableChart, IconTerminal, IconToggle, IconTrash, IconTuning, IconUpload, IconVolume, IconVolumeOff, Indicator, type IndicatorPosition, type IndicatorProps, Input, type InputProps, type InputSize, type InputVariant, InsightDoughnutChart, InsightHorizontalBarChart, InsightMiniCard, type InsightMiniCardProps, InsightPolarAreaChart, InsightShell, InsightShellHeader, type InsightShellHeaderProps, type InsightShellProps, InsightStackedBarChart, InsightVerticalBarChart, Kbd, type KbdProps, type KbdVariant, Label, Lead, MiniTrendBars, type MiniTrendBarsProps, Modal, type ModalProps, type ModalSize, Mono, Overline, P, PH_ICONS, Pagination, type PaginationProps, Panel, type PanelProps, Progress, type ProgressProps, Radio, type RadioProps, Range, type RangeProps, Rating, type RatingProps, SearchGroup, type SearchGroupProps, SearchInput, type SearchInputProps, SegmentedControl, Select, type SelectProps, ShowcaseWrapper, Small, Stat, type StatProps, type StatTone, Stepper, THEMES, THEME_GROUPS, THEME_INIT_SCRIPT, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TabsVariant, Terminal, type TerminalProps, Textarea, type TextareaProps, type ThemeDefinition, ThemeDomSync, type ThemeId, ThemeManager, type ThemeManagerProps, ThemeSwitcher, type ThemeSwitcherProps, Timeline, type TimelineEvent, type TimelineProps, Toast, type ToastProps, ToastStack, type ToastStackProps, type ToastStatus, Toggle, type ToggleProps, createIconBase, createIconBasePath, getTheme, isThemeId, persistTheme, readStoredTheme };