@harismawan/stamp-ui 0.1.0

package/dist/components/Button.js

@@ -0,0 +1,95 @@
+import styled, { css } from 'styled-components';
+const sizeMap = {
+    sm: css `
+    padding: 8px 14px;
+    font-size: 0.875rem;
+    border-radius: ${(p) => p.theme.radii.md};
+  `,
+    md: css `
+    padding: 11px 20px;
+    font-size: 0.9375rem;
+    border-radius: ${(p) => p.theme.radii.md};
+  `,
+    lg: css `
+    padding: 14px 26px;
+    font-size: 1rem;
+    border-radius: ${(p) => p.theme.radii.md};
+  `,
+};
+const stamp = css `
+  border: 2px solid ${(p) => p.theme.colors.border};
+  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:not(:disabled):not([aria-disabled='true']) {
+    transform: translate(2px, 2px);
+    box-shadow: ${(p) => p.theme.shadow.stampSm};
+  }
+  &:active:not(:disabled):not([aria-disabled='true']) {
+    transform: translate(4px, 4px);
+    box-shadow: none;
+  }
+`;
+const variantMap = {
+    primary: css `
+    ${stamp};
+    background: ${(p) => p.theme.colors.primary};
+    color: ${(p) => p.theme.colors.primaryInk};
+    &:hover:not(:disabled):not([aria-disabled='true']) {
+      background: ${(p) => p.theme.colors.primaryHover};
+      color: ${(p) => p.theme.colors.primaryInk};
+    }
+  `,
+    ghost: css `
+    background: transparent;
+    color: ${(p) => p.theme.colors.text};
+    border: 2px solid transparent;
+    &:hover:not(:disabled):not([aria-disabled='true']) {
+      background: ${(p) => p.theme.colors.surfaceMuted};
+      color: ${(p) => p.theme.colors.text};
+    }
+  `,
+    outline: css `
+    ${stamp};
+    background: ${(p) => p.theme.colors.surface};
+    color: ${(p) => p.theme.colors.text};
+    &:hover:not(:disabled):not([aria-disabled='true']) {
+      color: ${(p) => p.theme.colors.text};
+    }
+  `,
+    danger: css `
+    ${stamp};
+    background: ${(p) => p.theme.colors.danger};
+    color: ${(p) => p.theme.colors.surface};
+    &:hover:not(:disabled):not([aria-disabled='true']) {
+      color: ${(p) => p.theme.colors.surface};
+    }
+  `,
+};
+export const Button = styled.button.attrs((p) => p.as === 'a'
+    ? {}
+    : { type: p.type ?? 'button' }) `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${(p) => p.theme.space[2]};
+  font-family: inherit;
+  font-weight: 700;
+  letter-spacing: -0.005em;
+  white-space: nowrap;
+  text-decoration: none;
+  ${(p) => sizeMap[p.$size ?? 'md']};
+  ${(p) => variantMap[p.$variant ?? 'primary']};
+  ${(p) => p.$full && 'width: 100%;'}
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    opacity: 0.55;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
+`;

package/dist/components/Card.d.ts

@@ -0,0 +1,8 @@
+export interface CardProps {
+    $hover?: boolean;
+    $accent?: boolean;
+    $flat?: boolean;
+}
+export declare const Card: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CardProps> & CardProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof CardProps> & CardProps, never>>> & string;
+export declare const CardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const CardValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/dist/components/Card.js

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+export const Card = styled.div `
+  background: ${(p) => p.theme.colors.surface};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.lg};
+  padding: ${(p) => p.theme.space[6]};
+  min-width: 0;
+  overflow: hidden;
+  container-type: inline-size;
+  box-shadow: ${(p) => p.theme.shadow.stamp};
+  transition:
+    transform 120ms ${(p) => p.theme.easing.out},
+    box-shadow 120ms ${(p) => p.theme.easing.out};
+
+  ${(p) => p.$hover &&
+    `
+    cursor: pointer;
+    &:hover {
+      transform: translate(-1px, -1px);
+      box-shadow: ${p.theme.shadow.stampLg};
+    }
+  `}
+
+  ${(p) => p.$accent &&
+    `
+    background: ${p.theme.colors.primary};
+    color: ${p.theme.colors.primaryInk};
+  `}
+
+  ${(p) => p.$flat &&
+    `
+    box-shadow: none;
+  `}
+`;
+export const CardTitle = styled.div `
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: ${(p) => p.theme.colors.textMuted};
+  margin-bottom: ${(p) => p.theme.space[2]};
+`;
+export const CardValue = styled.div `
+  font-family: ${(p) => p.theme.font.mono};
+  font-size: clamp(1.25rem, 2.4cqi + 0.6rem, 1.75rem);
+  font-weight: 700;
+  color: ${(p) => p.theme.colors.text};
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;

package/dist/components/Checkbox.d.ts

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

package/dist/components/Checkbox.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled from 'styled-components';
+import { Check } from 'lucide-react';
+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 Box = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.sm};
+  background: ${(p) => (p.$checked ? p.theme.colors.primary : p.theme.colors.surface)};
+  box-shadow: ${(p) => p.theme.shadow.stampSm};
+  color: ${(p) => p.theme.colors.primaryInk};
+  transition: background 80ms ${(p) => p.theme.easing.out};
+
+  ${HiddenInput}:focus-visible + & {
+    outline: 2px solid ${(p) => p.theme.colors.accent};
+    outline-offset: 2px;
+  }
+`;
+export const Checkbox = React.forwardRef(({ checked, onChange, label, disabled, ...rest }, ref) => {
+    return (_jsxs(Root, { "$disabled": disabled, children: [_jsx(HiddenInput, { ref: ref, type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked), ...rest }), _jsx(Box, { "$checked": checked, "$disabled": disabled, "aria-hidden": "true", children: checked ? _jsx(Check, { size: 16, strokeWidth: 3 }) : null }), label != null ? _jsx("span", { children: label }) : null] }));
+});
+Checkbox.displayName = 'Checkbox';

package/dist/components/ColorPicker.d.ts

@@ -0,0 +1,7 @@
+export declare const DEFAULT_SWATCHES: string[];
+export interface ColorPickerProps {
+    value?: string;
+    onChange: (hex: string) => void;
+    swatches?: string[];
+}
+export declare function ColorPicker({ value, onChange, swatches }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ColorPicker.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import styled from 'styled-components';
+export const DEFAULT_SWATCHES = [
+    '#111111',
+    '#6B7280',
+    '#EF4444',
+    '#F59E0B',
+    '#10B981',
+    '#3B82F6',
+    '#8B5CF6',
+    '#EC4899',
+];
+// Relative luminance (WCAG-ish) of a hex color, 0 (black) .. 1 (white).
+// Used to pick a contrasting check-mark color on each swatch.
+function luminance(hex) {
+    const m = hex.replace('#', '');
+    const full = m.length === 3
+        ? m
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : m.padEnd(6, '0').slice(0, 6);
+    const r = parseInt(full.slice(0, 2), 16) / 255;
+    const g = parseInt(full.slice(2, 4), 16) / 255;
+    const b = parseInt(full.slice(4, 6), 16) / 255;
+    const lin = (c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+// Dark swatches get a white check; light swatches get a near-black check so the
+// 'selected' indicator stays visible regardless of the swatch color.
+function checkColor(hex) {
+    return luminance(hex) < 0.5 ? '#fff' : '#111';
+}
+const Grid = styled.div `
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: ${(p) => p.theme.space[2]};
+`;
+const Swatch = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  border-radius: ${(p) => p.theme.radii.sm};
+  background: ${(p) => p.$bg};
+  border: ${(p) => (p.$active ? '3px' : '2px')} solid ${(p) => p.theme.colors.border};
+  color: ${(p) => p.$check};
+  cursor: pointer;
+  transition: transform 80ms ${(p) => p.theme.easing.out};
+  &:hover {
+    transform: translate(-1px, -1px);
+  }
+`;
+export function ColorPicker({ value, onChange, swatches = DEFAULT_SWATCHES }) {
+    const cur = (value ?? '').toUpperCase();
+    return (_jsx(Grid, { children: swatches.map((hex) => {
+            const active = cur === hex.toUpperCase();
+            return (_jsx(Swatch, { type: "button", "$bg": hex, "$active": active, "$check": checkColor(hex), "aria-pressed": active, "aria-label": hex, onClick: () => onChange(hex), children: active && _jsx(Check, { size: 16, strokeWidth: 2.6 }) }, hex));
+        }) }));
+}

package/dist/components/ConfirmDialog.d.ts

@@ -0,0 +1,9 @@
+export interface ConfirmOptions {
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+}
+export declare function confirmDialog(opts?: ConfirmOptions): Promise<boolean>;
+export declare function ConfirmViewport(): import("react/jsx-runtime").JSX.Element;

package/dist/components/ConfirmDialog.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle } from 'lucide-react';
+import styled from 'styled-components';
+import { create } from 'zustand';
+import { Button } from './Button';
+import { Modal } from './Modal';
+const useConfirmStore = create((set, get) => ({
+    pending: null,
+    open: (opts) => new Promise((resolve) => {
+        const prev = get().pending;
+        if (prev)
+            prev.resolve(false);
+        set({ pending: { ...opts, resolve } });
+    }),
+    resolve: (result) => {
+        const p = get().pending;
+        if (!p)
+            return;
+        p.resolve(result);
+        set({ pending: null });
+    },
+}));
+export function confirmDialog(opts = {}) {
+    return useConfirmStore.getState().open(opts);
+}
+const Body = styled.div `
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  margin-bottom: 20px;
+`;
+const IconWrap = styled.div `
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: ${(p) => p.theme.radii.md};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  background: ${(p) => p.theme.colors.expenseSoft ?? p.theme.colors.surfaceMuted};
+  color: ${(p) => p.theme.colors.expense ?? p.theme.colors.text};
+`;
+const Message = styled.div `
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: ${(p) => p.theme.colors.text};
+`;
+const Actions = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+`;
+export function ConfirmViewport() {
+    const pending = useConfirmStore((s) => s.pending);
+    const resolve = useConfirmStore((s) => s.resolve);
+    const open = !!pending;
+    return (_jsxs(Modal, { open: open, onClose: () => resolve(false), title: pending?.title ?? 'Are you sure?', children: [_jsxs(Body, { children: [_jsx(IconWrap, { children: _jsx(AlertTriangle, { size: 20, strokeWidth: 2.5 }) }), _jsx(Message, { children: pending?.message ?? 'This action cannot be undone.' })] }), _jsxs(Actions, { children: [_jsx(Button, { type: "button", "$variant": "outline", onClick: () => resolve(false), children: pending?.cancelLabel ?? 'Cancel' }), _jsx(Button, { type: "button", "$variant": pending?.destructive === false ? 'primary' : 'danger', onClick: () => resolve(true), children: pending?.confirmLabel ?? 'Delete' })] })] }));
+}

package/dist/components/Divider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface DividerProps extends React.ComponentPropsWithoutRef<'div'> {
+    orientation?: 'horizontal' | 'vertical';
+    label?: string;
+}
+export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Divider.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import styled from 'styled-components';
+const Vertical = styled.div `
+  align-self: stretch;
+  width: 0;
+  min-height: 16px;
+  border-left: 2px solid ${(p) => p.theme.colors.border};
+`;
+const Horizontal = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[3]};
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    border-top: 2px solid ${(p) => p.theme.colors.border};
+  }
+`;
+const PlainHorizontal = styled.div `
+  width: 100%;
+  height: 0;
+  border-top: 2px solid ${(p) => p.theme.colors.border};
+`;
+const Label = styled.span `
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: ${(p) => p.theme.colors.textMuted};
+`;
+export const Divider = React.forwardRef(({ orientation = 'horizontal', label, ...rest }, ref) => {
+    if (orientation === 'vertical') {
+        return _jsx(Vertical, { ref: ref, role: "separator", "aria-orientation": "vertical", ...rest });
+    }
+    if (label != null) {
+        return (_jsx(Horizontal, { ref: ref, role: "separator", "aria-orientation": "horizontal", ...rest, children: _jsx(Label, { children: label }) }));
+    }
+    return _jsx(PlainHorizontal, { ref: ref, role: "separator", "aria-orientation": "horizontal", ...rest });
+});
+Divider.displayName = 'Divider';

package/dist/components/Drawer.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    side?: DrawerSide;
+    title?: string;
+    children: React.ReactNode;
+}
+export declare function Drawer({ open, onClose, side, title, children }: DrawerProps): React.ReactPortal | null;

package/dist/components/Drawer.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+const Overlay = styled.div `
+  position: fixed;
+  inset: 0;
+  background: ${(p) => p.theme.colors.overlay};
+  z-index: 1100;
+  display: flex;
+`;
+const Panel = styled.div `
+  position: fixed;
+  background: ${(p) => p.theme.colors.surface};
+  color: ${(p) => p.theme.colors.text};
+  font-family: ${(p) => p.theme.font.body};
+  box-shadow: ${(p) => p.theme.shadow.stampLg};
+  display: flex;
+  flex-direction: column;
+  z-index: 1101;
+  outline: none;
+  transition: transform 80ms ${(p) => p.theme.easing.out};
+
+  ${(p) => {
+    switch (p.$side) {
+        case 'left':
+            return `
+          top: 0; left: 0; bottom: 0;
+          width: min(360px, 90vw);
+          border-right: 2px solid ${p.theme.colors.border};
+        `;
+        case 'top':
+            return `
+          top: 0; left: 0; right: 0;
+          height: min(360px, 90vh);
+          border-bottom: 2px solid ${p.theme.colors.border};
+        `;
+        case 'bottom':
+            return `
+          bottom: 0; left: 0; right: 0;
+          height: min(360px, 90vh);
+          border-top: 2px solid ${p.theme.colors.border};
+        `;
+        case 'right':
+        default:
+            return `
+          top: 0; right: 0; bottom: 0;
+          width: min(360px, 90vw);
+          border-left: 2px solid ${p.theme.colors.border};
+        `;
+    }
+}}
+`;
+const Header = styled.div `
+  display: flex;
+  align-items: center;
+  padding: ${(p) => p.theme.space[4]};
+  border-bottom: 2px solid ${(p) => p.theme.colors.border};
+  font-weight: 800;
+  font-size: 18px;
+`;
+const Body = styled.div `
+  padding: ${(p) => p.theme.space[4]};
+  overflow: auto;
+  flex: 1;
+`;
+export function Drawer({ open, onClose, side = 'right', title, children }) {
+    const panelRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [open, onClose]);
+    React.useEffect(() => {
+        if (open && panelRef.current) {
+            panelRef.current.focus();
+        }
+    }, [open]);
+    if (!open)
+        return null;
+    return createPortal(_jsx(Overlay, { "data-testid": "drawer-overlay", onMouseDown: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, children: _jsxs(Panel, { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, "data-side": side, "$side": side, tabIndex: -1, onMouseDown: (e) => e.stopPropagation(), children: [title && _jsx(Header, { children: title }), _jsx(Body, { children: children })] }) }), document.body);
+}

package/dist/components/DropdownMenu.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type Placement } from '@floating-ui/react';
+export interface MenuProps {
+    children: React.ReactNode;
+    placement?: Placement;
+}
+export declare function Menu({ children, placement }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export interface MenuButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+    children: React.ReactNode;
+}
+export declare const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface MenuListProps {
+    children: React.ReactNode;
+}
+export declare function MenuList({ children }: MenuListProps): import("react/jsx-runtime").JSX.Element | null;
+export interface MenuItemProps {
+    onSelect: () => void;
+    children: React.ReactNode;
+}
+export declare function MenuItem({ onSelect, children }: MenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DropdownMenu.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useRole, useListNavigation, useInteractions, useListItem, FloatingList, FloatingPortal, FloatingFocusManager, } from '@floating-ui/react';
+const MenuContext = React.createContext(null);
+function useMenuContext() {
+    const ctx = React.useContext(MenuContext);
+    if (!ctx) {
+        throw new Error('DropdownMenu compound components must be used within <Menu>');
+    }
+    return ctx;
+}
+export function Menu({ children, placement = 'bottom-start' }) {
+    const [open, setOpen] = React.useState(false);
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    const listRef = React.useRef([]);
+    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: 'menu' });
+    const listNavigation = useListNavigation(context, {
+        listRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        loop: true,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
+        click,
+        dismiss,
+        role,
+        listNavigation,
+    ]);
+    const value = React.useMemo(() => ({
+        open,
+        setOpen,
+        activeIndex,
+        setActiveIndex,
+        getReferenceProps,
+        getFloatingProps,
+        getItemProps,
+        refs,
+        floatingStyles,
+        context,
+        listRef,
+    }), [open, activeIndex, getReferenceProps, getFloatingProps, getItemProps, refs, floatingStyles, context]);
+    return _jsx(MenuContext.Provider, { value: value, children: children });
+}
+const TriggerButton = styled.button `
+  font-family: ${(p) => p.theme.font.body};
+  font-weight: 800;
+  font-size: 14px;
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => p.theme.colors.surface};
+  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[2]} ${(p) => p.theme.space[3]};
+  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.stampSm};
+  }
+  &:active:not(:disabled) {
+    transform: translate(4px, 4px);
+    box-shadow: ${(p) => p.theme.shadow.none};
+  }
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+`;
+export const MenuButton = React.forwardRef(function MenuButton({ children, ...rest }, ref) {
+    const { refs, getReferenceProps } = useMenuContext();
+    return (_jsx(TriggerButton, { type: "button", ref: (node) => {
+            refs.setReference(node);
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, ...getReferenceProps(rest), children: children }));
+});
+const List = styled.div `
+  background: ${(p) => p.theme.colors.surface};
+  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[1]};
+  min-width: 180px;
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.space[1]};
+  z-index: 1000;
+  outline: none;
+`;
+export function MenuList({ children }) {
+    const { open, refs, floatingStyles, context, getFloatingProps, listRef, setActiveIndex } = useMenuContext();
+    if (!open)
+        return null;
+    return (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, children: _jsx(List, { ref: refs.setFloating, style: floatingStyles, ...getFloatingProps(), children: _jsx(FloatingList, { elementsRef: listRef, children: children }) }) }) }));
+}
+const Item = styled.div `
+  font-family: ${(p) => p.theme.font.body};
+  font-weight: 700;
+  font-size: 14px;
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => (p.$active ? p.theme.colors.primarySoft : 'transparent')};
+  border-radius: ${(p) => p.theme.radii.sm};
+  padding: ${(p) => p.theme.space[2]} ${(p) => p.theme.space[3]};
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+`;
+export function MenuItem({ onSelect, children }) {
+    const { activeIndex, getItemProps, setOpen } = useMenuContext();
+    const { ref, index } = useListItem();
+    const isActive = activeIndex === index;
+    const handleSelect = () => {
+        onSelect();
+        setOpen(false);
+    };
+    return (_jsx(Item, { role: "menuitem", tabIndex: isActive ? 0 : -1, "$active": isActive, ref: ref, ...getItemProps({
+            onClick: handleSelect,
+            onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleSelect();
+                }
+            },
+        }), children: children }));
+}