@harismawan/stamp-ui 0.1.0

package/dist/components/Stepper.d.ts

@@ -0,0 +1,11 @@
+export interface StepDef {
+    label: string;
+    description?: string;
+}
+export type StepperOrientation = 'horizontal' | 'vertical';
+export interface StepperProps {
+    steps: StepDef[];
+    active: number;
+    orientation?: StepperOrientation;
+}
+export declare function Stepper({ steps, active, orientation }: StepperProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Stepper.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+const List = styled.ol `
+  display: flex;
+  flex-direction: ${(p) => (p.$orientation === 'vertical' ? 'column' : 'row')};
+  align-items: ${(p) => (p.$orientation === 'vertical' ? 'stretch' : 'flex-start')};
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: ${(p) => p.theme.font.body};
+`;
+const Item = styled.li `
+  display: flex;
+  flex-direction: ${(p) => (p.$orientation === 'vertical' ? 'row' : 'column')};
+  align-items: ${(p) => (p.$orientation === 'vertical' ? 'flex-start' : 'center')};
+  flex: ${(p) => (p.$orientation === 'horizontal' && !p.$last ? '1' : '0 0 auto')};
+  gap: ${(p) => p.theme.space[2]};
+  position: relative;
+`;
+const Circle = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  border-radius: ${(p) => p.theme.radii.pill};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  box-shadow: ${(p) => p.theme.shadow.stampSm};
+  font-weight: 800;
+  font-size: 15px;
+  background: ${(p) => {
+    switch (p.$status) {
+        case 'complete':
+            return p.theme.colors.success;
+        case 'active':
+            return p.theme.colors.primary;
+        default:
+            return p.theme.colors.surface;
+    }
+}};
+  color: ${(p) => {
+    switch (p.$status) {
+        case 'complete':
+            return p.theme.colors.bg;
+        case 'active':
+            return p.theme.colors.primaryInk;
+        default:
+            return p.theme.colors.textMuted;
+    }
+}};
+`;
+const Connector = styled.span `
+  flex: 1;
+  align-self: ${(p) => (p.$orientation === 'vertical' ? 'stretch' : 'center')};
+  background: ${(p) => (p.$done ? p.theme.colors.success : p.theme.colors.borderSoft)};
+  ${(p) => p.$orientation === 'vertical'
+    ? `width: 2px; min-height: 24px; margin-left: 17px;`
+    : `height: 2px; min-width: 24px;`}
+`;
+const Labels = styled.div `
+  display: flex;
+  flex-direction: column;
+  text-align: ${(p) => (p.$orientation === 'vertical' ? 'left' : 'center')};
+  gap: 2px;
+`;
+const Label = styled.span `
+  font-weight: ${(p) => (p.$status === 'upcoming' ? 600 : 800)};
+  font-size: 14px;
+  color: ${(p) => p.$status === 'upcoming' ? p.theme.colors.textMuted : p.theme.colors.text};
+`;
+const Description = styled.span `
+  font-size: 12px;
+  font-weight: 500;
+  color: ${(p) => p.theme.colors.textSubtle};
+`;
+const StepRow = styled.div `
+  display: flex;
+  flex-direction: ${(p) => (p.$orientation === 'vertical' ? 'column' : 'row')};
+  align-items: ${(p) => (p.$orientation === 'vertical' ? 'flex-start' : 'center')};
+  ${(p) => (p.$orientation === 'horizontal' ? `width: 100%; justify-content: center;` : '')}
+  gap: ${(p) => p.theme.space[2]};
+`;
+function statusOf(index, active) {
+    if (index < active)
+        return 'complete';
+    if (index === active)
+        return 'active';
+    return 'upcoming';
+}
+export function Stepper({ steps, active, orientation = 'horizontal' }) {
+    return (_jsx(List, { "$orientation": orientation, children: steps.map((step, index) => {
+            const status = statusOf(index, active);
+            const isLast = index === steps.length - 1;
+            return (_jsxs(Item, { "$orientation": orientation, "$last": isLast, "data-status": status, "aria-current": status === 'active' ? 'step' : undefined, children: [_jsxs(StepRow, { "$orientation": orientation, children: [_jsx(Circle, { "$status": status, children: index + 1 }), _jsxs(Labels, { "$orientation": orientation, children: [_jsx(Label, { "$status": status, children: step.label }), step.description && _jsx(Description, { children: step.description })] })] }), !isLast && (_jsx(Connector, { "$orientation": orientation, "$done": index < active, "aria-hidden": "true" }))] }, step.label));
+        }) }));
+}

package/dist/components/Switch.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'onChange' | 'type' | 'role'> {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Switch.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled from 'styled-components';
+const Root = styled.label `
+  display: inline-flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[2]};
+  font-family: ${(p) => p.theme.font.body};
+  font-weight: 700;
+  color: ${(p) => p.theme.colors.text};
+  cursor: ${(p) => (p.$disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${(p) => (p.$disabled ? 0.55 : 1)};
+  user-select: none;
+`;
+const HiddenInput = styled.input `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+`;
+const Track = styled.span `
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 26px;
+  flex-shrink: 0;
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.pill};
+  background: ${(p) => (p.$checked ? p.theme.colors.primary : p.theme.colors.surfaceMuted)};
+  box-shadow: ${(p) => p.theme.shadow.stampSm};
+  transition: background 80ms ${(p) => p.theme.easing.out};
+
+  ${HiddenInput}:focus-visible + & {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 2px;
+  }
+`;
+const Thumb = styled.span `
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 20px;
+  height: 20px;
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.pill};
+  background: ${(p) => p.theme.colors.surface};
+  transform: translateX(${(p) => (p.$checked ? '22px' : '0')});
+  transition: transform 80ms ${(p) => p.theme.easing.out};
+`;
+export const Switch = React.forwardRef(({ checked, onChange, label, disabled, ...rest }, ref) => {
+    return (_jsxs(Root, { "$disabled": disabled, children: [_jsx(HiddenInput, { ref: ref, type: "checkbox", role: "switch", "aria-checked": checked, checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked), ...rest }), _jsx(Track, { "$checked": checked, "aria-hidden": "true", children: _jsx(Thumb, { "$checked": checked }) }), label != null ? _jsx("span", { children: label }) : null] }));
+});
+Switch.displayName = 'Switch';

package/dist/components/Table.d.ts

@@ -0,0 +1,6 @@
+export declare const Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>>> & string;
+export declare const THead: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>>> & string;
+export declare const TBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>>> & string;
+export declare const Tr: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>>> & string;
+export declare const Th: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>>> & string;
+export declare const Td: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>>> & string;

package/dist/components/Table.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+export const Table = styled.table `
+  width: 100%;
+  border-collapse: collapse;
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  overflow: hidden;
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 14px;
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => p.theme.colors.surface};
+`;
+export const THead = styled.thead `
+  background: ${(p) => p.theme.colors.surfaceMuted};
+`;
+export const TBody = styled.tbody ``;
+export const Tr = styled.tr `
+  transition: background 80ms ${(p) => p.theme.easing.out};
+
+  tbody &:hover {
+    background: ${(p) => p.theme.colors.surfaceSunken};
+  }
+`;
+export const Th = styled.th `
+  text-align: left;
+  font-weight: 800;
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]};
+  border-bottom: 2px solid ${(p) => p.theme.colors.border};
+  color: ${(p) => p.theme.colors.text};
+  white-space: nowrap;
+`;
+export const Td = styled.td `
+  text-align: left;
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]};
+  border-bottom: 1px solid ${(p) => p.theme.colors.borderSoft};
+  color: ${(p) => p.theme.colors.text};
+
+  tr:last-child & {
+    border-bottom: none;
+  }
+`;

package/dist/components/Tabs.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface TabsProps {
+    value: string;
+    onChange: (value: string) => void;
+    children: React.ReactNode;
+}
+export declare function Tabs({ value, onChange, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export interface TabListProps extends React.ComponentPropsWithoutRef<'div'> {
+    children: React.ReactNode;
+}
+export declare function TabList({ children, ...rest }: TabListProps): import("react/jsx-runtime").JSX.Element;
+export interface TabProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {
+    value: string;
+    children: React.ReactNode;
+}
+export declare function Tab({ value, children, onClick, onKeyDown, disabled, ...rest }: TabProps): import("react/jsx-runtime").JSX.Element;
+export interface TabPanelProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'> {
+    value: string;
+    children: React.ReactNode;
+}
+export declare function TabPanel({ value, children, ...rest }: TabPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useCallback, useMemo, useRef, } from 'react';
+import styled from 'styled-components';
+const TabsContext = createContext(null);
+function useTabsContext(component) {
+    const ctx = useContext(TabsContext);
+    if (!ctx) {
+        throw new Error(`<${component}> must be used within <Tabs>`);
+    }
+    return ctx;
+}
+let tabsIdCounter = 0;
+export function Tabs({ value, onChange, children }) {
+    const baseIdRef = useRef('');
+    if (!baseIdRef.current) {
+        tabsIdCounter += 1;
+        baseIdRef.current = `stamp-tabs-${tabsIdCounter}`;
+    }
+    // Preserve registration order of tab values for arrow navigation.
+    const orderRef = useRef([]);
+    const refsRef = useRef(new Map());
+    // Track each tab's disabled state so arrow navigation can skip disabled tabs.
+    const disabledRef = useRef(new Map());
+    const register = useCallback((v, disabled) => {
+        if (!orderRef.current.includes(v)) {
+            orderRef.current = [...orderRef.current, v];
+        }
+        disabledRef.current.set(v, disabled);
+    }, []);
+    const unregister = useCallback((v) => {
+        orderRef.current = orderRef.current.filter((x) => x !== v);
+        refsRef.current.delete(v);
+        disabledRef.current.delete(v);
+    }, []);
+    const isDisabled = useCallback((v) => disabledRef.current.get(v) === true, []);
+    const setTabRef = useCallback((v, el) => {
+        if (el) {
+            refsRef.current.set(v, el);
+        }
+        else {
+            refsRef.current.delete(v);
+        }
+    }, []);
+    const focusByValue = useCallback((v) => {
+        const el = refsRef.current.get(v);
+        if (el)
+            el.focus();
+    }, []);
+    const getOrderedValues = useCallback(() => orderRef.current.slice(), []);
+    const ctx = useMemo(() => ({
+        value,
+        onChange,
+        baseId: baseIdRef.current,
+        register,
+        unregister,
+        focusByValue,
+        setTabRef,
+        getOrderedValues,
+        isDisabled,
+    }), [value, onChange, register, unregister, focusByValue, setTabRef, getOrderedValues, isDisabled]);
+    return _jsx(TabsContext.Provider, { value: ctx, children: children });
+}
+const StyledTabList = styled.div `
+  display: flex;
+  gap: ${(p) => p.theme.space[2]};
+  border-bottom: 2px solid ${(p) => p.theme.colors.border};
+  margin-bottom: ${(p) => p.theme.space[4]};
+`;
+export function TabList({ children, ...rest }) {
+    return (_jsx(StyledTabList, { role: "tablist", ...rest, children: children }));
+}
+const StyledTab = styled.button `
+  appearance: none;
+  cursor: pointer;
+  font-family: ${(p) => p.theme.font.body};
+  font-weight: ${(p) => (p.$active ? 800 : 700)};
+  font-size: 0.95rem;
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[4]};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-bottom: none;
+  border-top-left-radius: ${(p) => p.theme.radii.md};
+  border-top-right-radius: ${(p) => p.theme.radii.md};
+  background: ${(p) => (p.$active ? p.theme.colors.surface : p.theme.colors.surfaceMuted)};
+  color: ${(p) => (p.$active ? p.theme.colors.text : p.theme.colors.textMuted)};
+  box-shadow: ${(p) => (p.$active ? p.theme.shadow.stampSm : p.theme.shadow.none)};
+  transition: background 80ms ${(p) => p.theme.easing.out},
+    color 80ms ${(p) => p.theme.easing.out};
+
+  &:hover:not(:disabled) {
+    color: ${(p) => p.theme.colors.text};
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+`;
+export function Tab({ value, children, onClick, onKeyDown, disabled, ...rest }) {
+    const ctx = useTabsContext('Tab');
+    const active = ctx.value === value;
+    React.useEffect(() => {
+        ctx.register(value, disabled === true);
+        return () => ctx.unregister(value);
+    }, [ctx, value, disabled]);
+    const handleClick = (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented)
+            ctx.onChange(value);
+    };
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        const order = ctx.getOrderedValues();
+        const idx = order.indexOf(value);
+        if (idx === -1)
+            return;
+        // Step over disabled tabs in the given direction (wrapping), so arrow
+        // navigation never lands on a disabled tab. Returns null if no enabled
+        // tab exists in that direction.
+        const seekEnabled = (start, step) => {
+            for (let i = 1; i <= order.length; i += 1) {
+                const candidate = (start + step * i + order.length * order.length) % order.length;
+                if (!ctx.isDisabled(order[candidate]))
+                    return candidate;
+            }
+            return null;
+        };
+        // Scan from one end inward for the first/last enabled tab (Home/End).
+        const firstEnabled = (step) => {
+            const begin = step > 0 ? 0 : order.length - 1;
+            for (let i = 0; i < order.length; i += 1) {
+                const candidate = begin + step * i;
+                if (!ctx.isDisabled(order[candidate]))
+                    return candidate;
+            }
+            return null;
+        };
+        let nextIdx = null;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            nextIdx = seekEnabled(idx, 1);
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            nextIdx = seekEnabled(idx, -1);
+        }
+        else if (e.key === 'Home') {
+            nextIdx = firstEnabled(1);
+        }
+        else if (e.key === 'End') {
+            nextIdx = firstEnabled(-1);
+        }
+        else {
+            return;
+        }
+        e.preventDefault();
+        if (nextIdx !== null) {
+            const nextValue = order[nextIdx];
+            ctx.onChange(nextValue);
+            ctx.focusByValue(nextValue);
+        }
+    };
+    return (_jsx(StyledTab, { type: "button", role: "tab", id: `${ctx.baseId}-tab-${value}`, "aria-selected": active, "aria-controls": `${ctx.baseId}-panel-${value}`, tabIndex: active ? 0 : -1, disabled: disabled, "$active": active, ref: (el) => ctx.setTabRef(value, el), onClick: handleClick, onKeyDown: handleKeyDown, ...rest, children: children }));
+}
+const StyledTabPanel = styled.div `
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.border};
+    outline-offset: 2px;
+  }
+`;
+export function TabPanel({ value, children, ...rest }) {
+    const ctx = useTabsContext('TabPanel');
+    const active = ctx.value === value;
+    return (_jsx(StyledTabPanel, { role: "tabpanel", id: `${ctx.baseId}-panel-${value}`, "aria-labelledby": `${ctx.baseId}-tab-${value}`, hidden: !active, tabIndex: 0, ...rest, children: children }));
+}

package/dist/components/Tag.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface TagProps extends React.ComponentPropsWithoutRef<'span'> {
+    children: React.ReactNode;
+    onRemove?: () => void;
+}
+export declare const Tag: React.FC<TagProps>;

package/dist/components/Tag.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { X } from 'lucide-react';
+const Root = styled.span `
+  display: inline-flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[1]};
+  padding: ${(p) => p.theme.space[1]} ${(p) => p.theme.space[2]};
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.4;
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => p.theme.colors.surfaceMuted};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.sm};
+`;
+const RemoveButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  margin: 0;
+  color: ${(p) => p.theme.colors.textMuted};
+  background: transparent;
+  border: none;
+  border-radius: ${(p) => p.theme.radii.xs};
+  cursor: pointer;
+  transition: color 80ms ${(p) => p.theme.easing.out},
+    background 80ms ${(p) => p.theme.easing.out};
+
+  &:hover {
+    color: ${(p) => p.theme.colors.text};
+    background: ${(p) => p.theme.colors.surfaceSunken};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 1px;
+  }
+`;
+export const Tag = ({ children, onRemove, ...rest }) => {
+    const label = typeof children === 'string' ? children : undefined;
+    return (_jsxs(Root, { ...rest, children: [_jsx("span", { children: children }), onRemove != null ? (_jsx(RemoveButton, { type: "button", "aria-label": label != null ? `Remove ${label}` : 'Remove', onClick: onRemove, children: _jsx(X, { size: 14, strokeWidth: 3, "aria-hidden": "true" }) })) : null] }));
+};

package/dist/components/Toast.d.ts

@@ -0,0 +1,26 @@
+export type ToastKind = 'success' | 'error' | 'info' | 'warn';
+export interface ToastItem {
+    id: number;
+    kind: ToastKind;
+    msg: string;
+    duration?: number;
+}
+interface ToastInput {
+    kind: ToastKind;
+    msg: string;
+    duration?: number;
+}
+interface ToastStore {
+    toasts: ToastItem[];
+    push: (toast: ToastInput) => void;
+    dismiss: (id: number) => void;
+}
+export declare const useToastStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ToastStore>>;
+export declare const toast: {
+    success: (msg: string) => void;
+    error: (msg: string) => void;
+    info: (msg: string) => void;
+    warn: (msg: string) => void;
+};
+export declare function ToastViewport(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Toast.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle2, Info, XCircle } from 'lucide-react';
+import styled, { keyframes } from 'styled-components';
+import { create } from 'zustand';
+let id = 0;
+export const useToastStore = create((set, get) => ({
+    toasts: [],
+    push: (toast) => {
+        const tid = ++id;
+        set({ toasts: [...get().toasts, { id: tid, ...toast }] });
+        setTimeout(() => {
+            set({ toasts: get().toasts.filter((t) => t.id !== tid) });
+        }, toast.duration ?? 4000);
+    },
+    dismiss: (tid) => set({ toasts: get().toasts.filter((t) => t.id !== tid) }),
+}));
+export const toast = {
+    success: (msg) => useToastStore.getState().push({ kind: 'success', msg }),
+    error: (msg) => useToastStore.getState().push({ kind: 'error', msg }),
+    info: (msg) => useToastStore.getState().push({ kind: 'info', msg }),
+    warn: (msg) => useToastStore.getState().push({ kind: 'warn', msg }),
+};
+const slide = keyframes `
+  from { transform: translateY(12px); opacity: 0; }
+  to { transform: none; opacity: 1; }
+`;
+const Stack = styled.div `
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 100;
+  pointer-events: none;
+`;
+const Pill = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: ${(p) => p.theme.radii.md};
+  background: ${(p) => p.theme.colors.surface};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  box-shadow: ${(p) => p.theme.shadow.stamp};
+  color: ${(p) => p.theme.colors.text};
+  font-size: 0.9375rem;
+  font-weight: 600;
+  animation: ${slide} 160ms ${(p) => p.theme.easing.out};
+  pointer-events: auto;
+  min-width: 240px;
+`;
+const ColoredPill = styled(Pill) `
+  background: ${(p) => p.$kind === 'success'
+    ? p.theme.colors.incomeSoft
+    : p.$kind === 'error'
+        ? p.theme.colors.expenseSoft
+        : p.$kind === 'warn'
+            ? p.theme.colors.primarySoft
+            : p.theme.colors.surface};
+`;
+const iconMap = {
+    success: CheckCircle2,
+    error: XCircle,
+    warn: AlertTriangle,
+    info: Info,
+};
+export function ToastViewport() {
+    const toasts = useToastStore((s) => s.toasts);
+    return (_jsx(Stack, { "aria-live": "polite", children: toasts.map((t) => {
+            const Icon = iconMap[t.kind] ?? iconMap.info;
+            return (_jsxs(ColoredPill, { "$kind": t.kind, children: [_jsx(Icon, { size: 18 }), _jsx("span", { children: t.msg })] }, t.id));
+        }) }));
+}

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { type Placement } from '@floating-ui/react';
+export interface TooltipProps {
+    content: React.ReactNode;
+    placement?: Placement;
+    children: React.ReactElement;
+}
+export declare function Tooltip({ content, placement, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal, } from '@floating-ui/react';
+const TooltipBubble = styled.div `
+  background: ${(p) => p.theme.colors.text};
+  color: ${(p) => p.theme.colors.bg};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.sm};
+  box-shadow: ${(p) => p.theme.shadow.stampSm};
+  padding: ${(p) => p.theme.space[1]} ${(p) => p.theme.space[2]};
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3;
+  max-width: 240px;
+  z-index: 1000;
+`;
+export function Tooltip({ content, placement = 'top', children }) {
+    const [open, setOpen] = React.useState(false);
+    const { refs, floatingStyles, context } = useFloating({
+        open,
+        onOpenChange: setOpen,
+        placement,
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(8), flip(), shift({ padding: 8 })],
+    });
+    const hover = useHover(context, { move: false });
+    const focus = useFocus(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: 'tooltip' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        hover,
+        focus,
+        dismiss,
+        role,
+    ]);
+    const child = React.Children.only(children);
+    return (_jsxs(_Fragment, { children: [React.cloneElement(child, getReferenceProps({
+                ref: refs.setReference,
+                ...child.props,
+            })), open && (_jsx(FloatingPortal, { children: _jsx(TooltipBubble, { ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: content }) }))] }));
+}