@harismawan/stamp-ui 0.1.0

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface EmptyStateProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+}
+export declare const EmptyState: React.FC<EmptyStateProps>;

package/dist/components/EmptyState.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+const Root = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: ${(p) => p.theme.space[3]};
+  padding: ${(p) => p.theme.space[8]} ${(p) => p.theme.space[5]};
+  font-family: ${(p) => p.theme.font.body};
+`;
+const IconWrap = styled.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  color: ${(p) => p.theme.colors.textMuted};
+  background: ${(p) => p.theme.colors.surfaceMuted};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  box-shadow: ${(p) => p.theme.shadow.stampSm};
+`;
+const Title = styled.h3 `
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  color: ${(p) => p.theme.colors.text};
+`;
+const Description = styled.p `
+  margin: 0;
+  max-width: 42ch;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${(p) => p.theme.colors.textMuted};
+`;
+const ActionWrap = styled.div `
+  margin-top: ${(p) => p.theme.space[1]};
+`;
+export const EmptyState = ({ icon, title, description, action, ...rest }) => {
+    return (_jsxs(Root, { ...rest, children: [icon != null ? _jsx(IconWrap, { "aria-hidden": "true", children: icon }) : null, _jsx(Title, { children: title }), description != null ? _jsx(Description, { children: description }) : null, action != null ? _jsx(ActionWrap, { children: action }) : null] }));
+};

package/dist/components/IconPicker.d.ts

@@ -0,0 +1,7 @@
+export declare const DEFAULT_ICONS: string[];
+export interface IconPickerProps {
+    value?: string;
+    onChange: (name: string) => void;
+    icons?: string[];
+}
+export declare function IconPicker({ value, onChange, icons }: IconPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/IconPicker.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as LucideIcons from 'lucide-react';
+import styled from 'styled-components';
+export const DEFAULT_ICONS = [
+    'Star',
+    'Heart',
+    'Tag',
+    'Folder',
+    'Bookmark',
+    'Bell',
+    'Flag',
+    'Home',
+    'Settings',
+    'Zap',
+    'Smile',
+    'Globe',
+];
+const Grid = styled.div `
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: ${(p) => p.theme.space[2]};
+`;
+const Tile = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: ${(p) => p.theme.radii.sm};
+  background: ${(p) => (p.$active ? p.theme.colors.primary : p.theme.colors.surface)};
+  border: ${(p) => (p.$active ? '3px' : '2px')} solid ${(p) => p.theme.colors.border};
+  color: ${(p) => p.theme.colors.text};
+  cursor: pointer;
+  transition: transform 80ms ${(p) => p.theme.easing.out};
+  &:hover {
+    transform: translate(-1px, -1px);
+  }
+`;
+const registry = LucideIcons;
+export function IconPicker({ value, onChange, icons = DEFAULT_ICONS }) {
+    return (_jsx(Grid, { children: icons.map((name) => {
+            const Icon = registry[name] ?? registry.CircleAlert;
+            const active = value === name;
+            return (_jsx(Tile, { type: "button", "$active": active, "aria-pressed": active, "aria-label": name, onClick: () => onChange(name), children: _jsx(Icon, { size: 18, strokeWidth: 2.2 }) }, name));
+        }) }));
+}

package/dist/components/Input.d.ts

@@ -0,0 +1,6 @@
+export declare const FieldWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>> & string;
+export declare const FieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>> & string;
+export declare const Select: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>>> & string;
+export declare const Textarea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>>> & string;
+export declare const FieldError: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;

package/dist/components/Input.js

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components';
+export const FieldWrap = styled.label `
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.space[2]};
+`;
+export const FieldLabel = styled.span `
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: ${(p) => p.theme.colors.text};
+`;
+const baseInput = css `
+  font-family: inherit;
+  font-size: 1rem;
+  width: 100%;
+  min-width: 0;
+  background: ${(p) => p.theme.colors.surface};
+  color: ${(p) => p.theme.colors.text};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  padding: 11px 14px;
+  transition: box-shadow 80ms ${(p) => p.theme.easing.out};
+
+  &::placeholder {
+    color: ${(p) => p.theme.colors.textSubtle};
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: ${(p) => p.theme.shadow.stamp};
+  }
+
+  &:disabled {
+    opacity: 0.6;
+  }
+`;
+export const Input = styled.input `
+  ${baseInput};
+`;
+export const Select = styled.select `
+  ${baseInput};
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 18px) 50%,
+    calc(100% - 13px) 50%;
+  background-size:
+    5px 5px,
+    5px 5px;
+  background-repeat: no-repeat;
+  padding-right: 36px;
+`;
+export const Textarea = styled.textarea `
+  ${baseInput};
+  min-height: 96px;
+  resize: vertical;
+`;
+export const FieldError = styled.span `
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.danger};
+`;

package/dist/components/Modal.d.ts

@@ -0,0 +1,8 @@
+export interface ModalProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    children?: React.ReactNode;
+}
+export declare function Modal({ open, onClose, title, size, children }: ModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Modal.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { useEffect, useId, useRef } from 'react';
+import styled from 'styled-components';
+const Overlay = styled.div `
+  position: fixed;
+  inset: 0;
+  background: ${(p) => p.theme.colors.overlay};
+  display: grid;
+  place-items: center;
+  z-index: 50;
+  padding: ${(p) => p.theme.space[5]};
+  animation: rfade 120ms ${(p) => p.theme.easing.out};
+
+  @keyframes rfade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const Panel = styled.div `
+  background: ${(p) => p.theme.colors.surface};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.lg};
+  box-shadow: ${(p) => p.theme.shadow.stampLg};
+  width: 100%;
+  max-width: ${(p) => (p.$size === 'lg' ? '720px' : p.$size === 'md' ? '600px' : '440px')};
+  max-height: calc(100vh - 32px);
+  display: flex;
+  flex-direction: column;
+  animation: rrise 140ms ${(p) => p.theme.easing.out};
+
+  @keyframes rrise {
+    from {
+      transform: translate(-4px, -4px);
+    }
+    to {
+      transform: none;
+    }
+  }
+`;
+const Header = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${(p) => p.theme.space[5]} ${(p) => p.theme.space[6]};
+  border-bottom: 2px solid ${(p) => p.theme.colors.border};
+`;
+const Title = styled.h3 `
+  font-size: 1.125rem;
+  font-weight: 800;
+`;
+const Body = styled.div `
+  padding: ${(p) => p.theme.space[6]};
+  overflow-y: auto;
+`;
+const CloseBtn = styled.button `
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.sm};
+  background: ${(p) => p.theme.colors.danger};
+  color: ${(p) => p.theme.colors.surface};
+  box-shadow: ${(p) => p.theme.shadow.stamp};
+  transition:
+    transform 80ms ${(p) => p.theme.easing.out},
+    box-shadow 80ms ${(p) => p.theme.easing.out},
+    background 80ms ${(p) => p.theme.easing.out};
+  &:hover {
+    transform: translate(2px, 2px);
+    box-shadow: ${(p) => p.theme.shadow.stampSm};
+  }
+  &:active {
+    transform: translate(4px, 4px);
+    box-shadow: none;
+  }
+`;
+export function Modal({ open, onClose, title, size = 'md', children }) {
+    const panelRef = useRef(null);
+    const titleId = useId();
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                onClose?.();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [open, onClose]);
+    useEffect(() => {
+        if (open && panelRef.current) {
+            panelRef.current.focus();
+        }
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsx(Overlay, { onClick: () => onClose?.(), children: _jsxs(Panel, { ref: panelRef, "$size": size, onClick: (e) => e.stopPropagation(), role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, children: [_jsxs(Header, { children: [_jsx(Title, { id: titleId, children: title }), _jsx(CloseBtn, { type: "button", onClick: () => onClose?.(), "aria-label": "Close", children: _jsx(X, { size: 16, strokeWidth: 2.5 }) })] }), _jsx(Body, { children: children })] }) }));
+}

package/dist/components/NumberInput.d.ts

@@ -0,0 +1,23 @@
+export interface NumberInputProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'value' | 'onChange'> {
+    value?: string | number;
+    onChange?: (e: {
+        target: {
+            value: string;
+        };
+    }) => void;
+    thousandSep?: string;
+    decimalSep?: string;
+}
+/**
+ * Integer-only text input that groups the value with a thousand separator
+ * (default '.'). Stores/emits the raw integer-digit string via
+ * onChange({ target: { value } }). A typed-friendly, generalized replacement
+ * for a money/number field.
+ *
+ * Decimals are out of scope: this field formats and emits integers only. If a
+ * non-integer value is supplied (e.g. 1234.56), the fractional part is dropped
+ * (-> "1234") rather than merged into the integer. The decimalSep prop is
+ * accepted for API symmetry and is honoured when splitting off that fractional
+ * part from the incoming value.
+ */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/NumberInput.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from 'react';
+import { Input } from './Input';
+/**
+ * Reduce a string to its signed integer digits ('-' optional, digits only).
+ * The caller is responsible for having already discarded any fractional part;
+ * this is the single source of truth for digit/sign extraction.
+ */
+function keepIntegerDigits(s) {
+    const neg = s.trim().startsWith('-');
+    const digits = s.replace(/\D/g, '');
+    if (!digits)
+        return neg ? '-' : '';
+    return (neg ? '-' : '') + digits;
+}
+/**
+ * Normalize the controlled `value` prop into a raw integer-digit string.
+ * The prop is an ordinary number-like value, so a decimal separator ('.' for
+ * JS numbers, or the configured decimalSep) splits off a fractional part that
+ * this integer-only field intentionally drops — e.g. 1234.56 -> "1234".
+ */
+function propToRaw(value, decimalSep) {
+    if (value == null || value === '')
+        return '';
+    let s = String(value);
+    // Split at the first decimal boundary and discard the fractional digits.
+    const dot = s.indexOf('.');
+    const sep = decimalSep ? s.indexOf(decimalSep) : -1;
+    const cut = dot === -1 ? sep : sep === -1 ? dot : Math.min(dot, sep);
+    if (cut !== -1)
+        s = s.slice(0, cut);
+    return keepIntegerDigits(s);
+}
+/**
+ * Normalize what the user typed into the field back into raw integer digits.
+ * The displayed value only ever contains digits, a sign and thousand
+ * separators (never a decimal), so every non-digit is stripped.
+ */
+function inputToRaw(formatted) {
+    if (formatted == null || formatted === '')
+        return '';
+    return keepIntegerDigits(String(formatted));
+}
+/**
+ * Group a raw integer-digit string into thousands for display.
+ */
+function formatThousand(raw, thousandSep) {
+    if (!raw || raw === '-')
+        return raw;
+    const neg = raw.startsWith('-');
+    const body = neg ? raw.slice(1) : raw;
+    if (!body)
+        return neg ? '-' : '';
+    return (neg ? '-' : '') + body.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSep);
+}
+/**
+ * Integer-only text input that groups the value with a thousand separator
+ * (default '.'). Stores/emits the raw integer-digit string via
+ * onChange({ target: { value } }). A typed-friendly, generalized replacement
+ * for a money/number field.
+ *
+ * Decimals are out of scope: this field formats and emits integers only. If a
+ * non-integer value is supplied (e.g. 1234.56), the fractional part is dropped
+ * (-> "1234") rather than merged into the integer. The decimalSep prop is
+ * accepted for API symmetry and is honoured when splitting off that fractional
+ * part from the incoming value.
+ */
+export const NumberInput = forwardRef(function NumberInput({ value, onChange, thousandSep = '.', decimalSep = ',', ...rest }, ref) {
+    // Track the raw digit-string internally so masking survives a controlled
+    // `value` that is not echoed back synchronously per keystroke. The buffer is
+    // re-seeded whenever the incoming `value` prop diverges from it.
+    const propRaw = propToRaw(value, decimalSep);
+    const [raw, setRaw] = useState(propRaw);
+    useEffect(() => {
+        setRaw((prev) => (prev === propRaw ? prev : propRaw));
+    }, [propRaw]);
+    const display = formatThousand(raw, thousandSep);
+    return (_jsx(Input, { ref: ref, type: "text", inputMode: "numeric", autoComplete: "off", value: display, onChange: (e) => {
+            const next = inputToRaw(e.target.value);
+            setRaw(next);
+            onChange?.({ target: { value: next } });
+        }, ...rest }));
+});

package/dist/components/Pagination.d.ts

@@ -0,0 +1,7 @@
+export interface PaginationProps {
+    page: number;
+    pageCount: number;
+    onChange: (page: number) => void;
+    siblingCount?: number;
+}
+export declare function Pagination({ page, pageCount, onChange, siblingCount }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Pagination.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+const ELLIPSIS = '…';
+function range(start, end) {
+    const out = [];
+    for (let i = start; i <= end; i++)
+        out.push(i);
+    return out;
+}
+function buildPages(page, pageCount, siblingCount) {
+    // boundary pages (1, last) + current +/- siblings + 2 ellipsis slots
+    const totalSlots = siblingCount * 2 + 5;
+    if (pageCount <= totalSlots) {
+        return range(1, pageCount);
+    }
+    const leftSibling = Math.max(page - siblingCount, 1);
+    const rightSibling = Math.min(page + siblingCount, pageCount);
+    const showLeftEllipsis = leftSibling > 2;
+    const showRightEllipsis = rightSibling < pageCount - 1;
+    if (!showLeftEllipsis && showRightEllipsis) {
+        const leftCount = 3 + 2 * siblingCount;
+        return [...range(1, leftCount), ELLIPSIS, pageCount];
+    }
+    if (showLeftEllipsis && !showRightEllipsis) {
+        const rightCount = 3 + 2 * siblingCount;
+        return [1, ELLIPSIS, ...range(pageCount - rightCount + 1, pageCount)];
+    }
+    return [1, ELLIPSIS, ...range(leftSibling, rightSibling), ELLIPSIS, pageCount];
+}
+const Nav = styled.nav `
+  display: flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[1]};
+  font-family: ${(p) => p.theme.font.body};
+`;
+const PageButton = styled.button `
+  min-width: 36px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 14px;
+  color: ${(p) => (p.$active ? p.theme.colors.primaryInk : p.theme.colors.text)};
+  background: ${(p) => (p.$active ? p.theme.colors.primary : p.theme.colors.surface)};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  box-shadow: ${(p) => (p.$active ? p.theme.shadow.none : p.theme.shadow.stampSm)};
+  padding: 0 ${(p) => p.theme.space[2]};
+  cursor: pointer;
+  transition: transform 80ms ${(p) => p.theme.easing.out},
+    box-shadow 80ms ${(p) => p.theme.easing.out};
+
+  &:hover:not(:disabled) {
+    transform: translate(2px, 2px);
+    box-shadow: ${(p) => p.theme.shadow.none};
+  }
+  &:active:not(:disabled) {
+    transform: translate(4px, 4px);
+    box-shadow: ${(p) => p.theme.shadow.none};
+  }
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    transform: none;
+  }
+`;
+const Ellipsis = styled.span `
+  min-width: 36px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  color: ${(p) => p.theme.colors.textSubtle};
+`;
+export function Pagination({ page, pageCount, onChange, siblingCount = 1 }) {
+    const pages = buildPages(page, pageCount, siblingCount);
+    return (_jsxs(Nav, { "aria-label": "Pagination", children: [_jsx(PageButton, { type: "button", "aria-label": "Previous page", disabled: page <= 1, onClick: () => onChange(page - 1), children: _jsx(ChevronLeft, { size: 18 }) }), pages.map((p, i) => p === ELLIPSIS ? (_jsx(Ellipsis, { "aria-hidden": "true", children: ELLIPSIS }, `e-${i}`)) : (_jsx(PageButton, { type: "button", "$active": p === page, "aria-current": p === page ? 'page' : undefined, onClick: () => onChange(p), children: p }, p))), _jsx(PageButton, { type: "button", "aria-label": "Next page", disabled: page >= pageCount, onClick: () => onChange(page + 1), children: _jsx(ChevronRight, { size: 18 }) })] }));
+}

package/dist/components/Popover.d.ts

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

package/dist/components/Popover.js

@@ -0,0 +1,39 @@
+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, useClick, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, } from '@floating-ui/react';
+const Panel = styled.div `
+  background: ${(p) => p.theme.colors.surface};
+  color: ${(p) => p.theme.colors.text};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  box-shadow: ${(p) => p.theme.shadow.stamp};
+  padding: ${(p) => p.theme.space[4]};
+  font-family: ${(p) => p.theme.font.body};
+  min-width: 200px;
+  z-index: 1000;
+  outline: none;
+`;
+export function Popover({ trigger, children, placement = 'bottom' }) {
+    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 click = useClick(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: 'dialog' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        click,
+        dismiss,
+        role,
+    ]);
+    const child = React.Children.only(trigger);
+    return (_jsxs(_Fragment, { children: [React.cloneElement(child, getReferenceProps({
+                ref: refs.setReference,
+                ...child.props,
+            })), open && (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, children: _jsx(Panel, { ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: children }) }) }))] }));
+}

package/dist/components/Progress.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type ProgressVariant = 'primary' | 'success' | 'danger';
+export interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'role'> {
+    value: number;
+    max?: number;
+    $variant?: ProgressVariant;
+    label?: string;
+}
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Progress.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled from 'styled-components';
+const variantColor = {
+    primary: (p) => p.theme.colors.primary,
+    success: (p) => p.theme.colors.income,
+    danger: (p) => p.theme.colors.expense,
+};
+const Wrap = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.space[1]};
+  width: 100%;
+  font-family: ${(p) => p.theme.font.body};
+`;
+const Label = styled.span `
+  font-size: 13px;
+  font-weight: 700;
+  color: ${(p) => p.theme.colors.textMuted};
+`;
+const Track = styled.div `
+  width: 100%;
+  height: 18px;
+  overflow: hidden;
+  background: ${(p) => p.theme.colors.surfaceMuted};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.pill};
+  box-shadow: ${(p) => p.theme.shadow.stampSm};
+`;
+const Fill = styled.div `
+  height: 100%;
+  background: ${(p) => variantColor[p.$variant](p)};
+  border-right: 2px solid ${(p) => p.theme.colors.border};
+  transition: width 80ms ${(p) => p.theme.easing.out};
+`;
+export const Progress = React.forwardRef(({ value, max = 100, $variant = 'primary', label, ...rest }, ref) => {
+    const clamped = Math.max(0, Math.min(value, max));
+    const pct = max > 0 ? (clamped / max) * 100 : 0;
+    return (_jsxs(Wrap, { ref: ref, ...rest, children: [label != null ? _jsx(Label, { children: label }) : null, _jsx(Track, { role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label, children: _jsx(Fill, { "$variant": $variant, "data-testid": "progress-fill", style: { width: `${pct}%` } }) })] }));
+});
+Progress.displayName = 'Progress';

package/dist/components/Radio.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface RadioGroupProps {
+    name: string;
+    value: string;
+    onChange: (value: string) => void;
+    children: React.ReactNode;
+}
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+export interface RadioProps {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;