@harismawan/stamp-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Harismawan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,83 @@
+# @harismawan/stamp-ui
+
+A brand-agnostic React component library in the **"stamp" aesthetic** — chunky 2px
+borders, hard offset shadows, flat fills, no gradients. Built with TypeScript +
+styled-components.
+
+## Install
+
+```bash
+bun add @harismawan/stamp-ui
+# peers (provide your own):
+bun add react react-dom styled-components
+```
+
+`react`, `react-dom`, and `styled-components` are **peer dependencies** — the
+library expects a single shared instance of each (the theme is delivered through
+styled-components' `ThemeProvider`).
+
+## Quick start
+
+Wrap your app in `StampProvider` (it sets up the theme + global styles), then use
+components anywhere:
+
+```tsx
+import { StampProvider, Button, Card, CardTitle, CardValue } from '@harismawan/stamp-ui';
+
+export function App() {
+  return (
+    <StampProvider mode="light">
+      <Card>
+        <CardTitle>Hello</CardTitle>
+        <CardValue>stamp-ui</CardValue>
+      </Card>
+      <Button $variant="primary">Click me</Button>
+    </StampProvider>
+  );
+}
+```
+
+## Theming
+
+The library ships a default palette. Rebrand by passing your own theme (it must
+satisfy the exported `Theme` type) to `StampProvider`:
+
+```tsx
+import { StampProvider, lightTheme, type Theme } from '@harismawan/stamp-ui';
+
+const myTheme: Theme = { ...lightTheme, colors: { ...lightTheme.colors, primary: '#3B82F6' } };
+
+<StampProvider theme={myTheme}>{/* ... */}</StampProvider>;
+```
+
+Light/dark mode is managed by the built-in `useThemeStore` (persisted). Omit
+`mode` on `StampProvider` to let the store drive it.
+
+## Components
+
+- **Form:** `Button`, `Input`/`Select`/`Textarea`/`FieldWrap`/`FieldLabel`/`FieldError`, `NumberInput`, `Checkbox`, `Radio`/`RadioGroup`, `Switch`, `Slider`, `ColorPicker`, `IconPicker`
+- **Display:** `Card`, `Badge`, `Tag`, `Avatar`/`AvatarGroup`, `Stat`, `EmptyState`, `Divider`, `Progress`, `Spinner`, `Skeleton`/`SkeletonText`/`SkeletonCircle`/`SkeletonGroup`, `Table` primitives
+- **Overlays:** `Modal`, `Drawer`, `ConfirmDialog` (`confirmDialog`/`ConfirmViewport`), `Toast` (`toast`/`ToastViewport`), `Tooltip`, `Popover`, `Menu`/`MenuButton`/`MenuList`/`MenuItem`, `Alert`
+- **Disclosure & nav:** `Tabs`, `Accordion`, `Breadcrumb`, `Pagination`, `Stepper`
+- **Layout:** `Box`, `Stack`/`HStack`/`VStack`, `Grid`, `Container`
+- **Hooks:** `useThemeStore`, `useDisclosure`, `useClickOutside`
+
+## Development
+
+```bash
+bun install
+bun test            # unit + a11y tests (happy-dom + @testing-library/react)
+bun run typecheck   # tsc --noEmit
+bun run build       # tsc -> dist/ (ESM + .d.ts)
+bunx vite --config example/vite.config.ts example   # visual gallery of every component
+```
+
+## Publishing
+
+Releases publish on a `v*` git tag via `.github/workflows/release.yml`. The repo
+needs an `NPM_TOKEN` secret (an npm automation token with publish rights to the
+`@harismawan` scope).
+
+## License
+
+MIT

package/dist/GlobalStyles.d.ts

@@ -0,0 +1 @@
+export declare const GlobalStyles: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/dist/GlobalStyles.js

@@ -0,0 +1,96 @@
+import { createGlobalStyle } from 'styled-components';
+export const GlobalStyles = createGlobalStyle `
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  html, body, #root {
+    margin: 0;
+    padding: 0;
+    min-height: 100%;
+  }
+
+  body {
+    font-family: ${(p) => p.theme.font.body};
+    background: ${(p) => p.theme.colors.bg};
+    color: ${(p) => p.theme.colors.text};
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
+    transition: background 200ms ${(p) => p.theme.easing.out},
+      color 200ms ${(p) => p.theme.easing.out};
+  }
+
+  a {
+    color: ${(p) => p.theme.colors.accentDark};
+    text-decoration: none;
+    transition: color 120ms ${(p) => p.theme.easing.out};
+    /*
+     * Hover uses the body text color (theme-aware: ink on cream ~18:1,
+     * cream-white on dark ~17:1), so links stay highly readable on interaction.
+     * The previous primaryHover (bright yellow #FFCB05) dropped to ~1.5:1 on the
+     * cream bg — illegible. An underline provides a non-color affordance too.
+     */
+    &:hover {
+      color: ${(p) => p.theme.colors.text};
+      text-decoration: underline;
+    }
+  }
+
+  button {
+    font-family: inherit;
+    cursor: pointer;
+    border: none;
+    background: none;
+  }
+
+  button:focus-visible, a:focus-visible, input:focus-visible,
+  select:focus-visible, textarea:focus-visible {
+    outline: 2px solid ${(p) => p.theme.colors.border};
+    outline-offset: 2px;
+  }
+
+  h1, h2, h3, h4 {
+    margin: 0;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: -0.01em;
+  }
+
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.5rem; }
+  h3 { font-size: 1.125rem; }
+
+  p { margin: 0; }
+
+  ::selection {
+    background: ${(p) => p.theme.colors.primary};
+    color: ${(p) => p.theme.colors.primaryInk};
+  }
+
+  /* Saweria-flavored cream "tape" dot pattern under hero sections. */
+  .stamp-noise {
+    position: relative;
+    isolation: isolate;
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background-image: radial-gradient(
+          circle at 1px 1px,
+          ${(p) => p.theme.colors.borderStrong} 1px,
+          transparent 0
+        );
+      background-size: 18px 18px;
+      opacity: 0.5;
+      z-index: -1;
+    }
+  }
+
+  .money {
+    font-family: ${(p) => p.theme.font.mono};
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+  }
+`;

package/dist/components/Accordion.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface AccordionProps {
+    type?: 'single' | 'multiple';
+    children: React.ReactNode;
+}
+export declare function Accordion({ type, children }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export interface AccordionItemProps {
+    value: string;
+    title: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare function AccordionItem({ value, title, children }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useCallback, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { ChevronDown } from 'lucide-react';
+const AccordionContext = createContext(null);
+function useAccordionContext(component) {
+    const ctx = useContext(AccordionContext);
+    if (!ctx) {
+        throw new Error(`<${component}> must be used within <Accordion>`);
+    }
+    return ctx;
+}
+let accordionIdCounter = 0;
+const StyledAccordion = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${(p) => p.theme.space[2]};
+`;
+export function Accordion({ type = 'single', children }) {
+    const baseIdRef = useRef('');
+    if (!baseIdRef.current) {
+        accordionIdCounter += 1;
+        baseIdRef.current = `stamp-accordion-${accordionIdCounter}`;
+    }
+    const [openValues, setOpenValues] = useState([]);
+    const isOpen = useCallback((value) => openValues.includes(value), [openValues]);
+    const toggle = useCallback((value) => {
+        setOpenValues((prev) => {
+            const currentlyOpen = prev.includes(value);
+            if (type === 'single') {
+                return currentlyOpen ? [] : [value];
+            }
+            return currentlyOpen ? prev.filter((v) => v !== value) : [...prev, value];
+        });
+    }, [type]);
+    const ctx = useMemo(() => ({ isOpen, toggle, baseId: baseIdRef.current }), [isOpen, toggle]);
+    return (_jsx(AccordionContext.Provider, { value: ctx, children: _jsx(StyledAccordion, { children: children }) }));
+}
+const Item = styled.div `
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  background: ${(p) => p.theme.colors.surface};
+  box-shadow: ${(p) => p.theme.shadow.stampSm};
+  overflow: hidden;
+`;
+const Header = styled.button `
+  appearance: none;
+  cursor: pointer;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${(p) => p.theme.space[3]};
+  font-family: ${(p) => p.theme.font.body};
+  font-weight: 800;
+  font-size: 1rem;
+  text-align: left;
+  padding: ${(p) => p.theme.space[3]} ${(p) => p.theme.space[4]};
+  border: none;
+  background: ${(p) => (p.$open ? p.theme.colors.surfaceMuted : p.theme.colors.surface)};
+  color: ${(p) => p.theme.colors.text};
+  transition: background 80ms ${(p) => p.theme.easing.out};
+
+  &:hover {
+    background: ${(p) => p.theme.colors.surfaceMuted};
+  }
+
+  & svg {
+    flex: none;
+    transition: transform 80ms ${(p) => p.theme.easing.out};
+    transform: rotate(${(p) => (p.$open ? '180deg' : '0deg')});
+  }
+`;
+const Region = styled.div `
+  padding: ${(p) => p.theme.space[4]};
+  border-top: 2px solid ${(p) => p.theme.colors.border};
+  color: ${(p) => p.theme.colors.text};
+`;
+export function AccordionItem({ value, title, children }) {
+    const ctx = useAccordionContext('AccordionItem');
+    const open = ctx.isOpen(value);
+    const headerId = `${ctx.baseId}-header-${value}`;
+    const regionId = `${ctx.baseId}-region-${value}`;
+    return (_jsxs(Item, { children: [_jsxs(Header, { type: "button", id: headerId, "$open": open, "aria-expanded": open, "aria-controls": regionId, onClick: () => ctx.toggle(value), children: [_jsx("span", { children: title }), _jsx(ChevronDown, { size: 18, "aria-hidden": "true" })] }), _jsx(Region, { role: "region", id: regionId, "aria-labelledby": headerId, hidden: !open, children: children })] }));
+}

package/dist/components/Alert.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export type AlertVariant = 'info' | 'success' | 'warn' | 'danger';
+export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
+    $variant?: AlertVariant;
+    title?: string;
+    onClose?: () => void;
+    children?: React.ReactNode;
+}
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Alert.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { Info, CheckCircle2, AlertTriangle, XCircle, X } from 'lucide-react';
+const variantColor = (theme, variant) => {
+    switch (variant) {
+        case 'success':
+            return theme.colors.success;
+        case 'warn':
+            return theme.colors.warning;
+        case 'danger':
+            return theme.colors.danger;
+        case 'info':
+        default:
+            return theme.colors.primary;
+    }
+};
+const variantBg = (theme, variant) => {
+    switch (variant) {
+        case 'success':
+            return theme.colors.incomeSoft;
+        case 'danger':
+            return theme.colors.expenseSoft;
+        case 'warn':
+            return theme.colors.surfaceMuted;
+        case 'info':
+        default:
+            return theme.colors.primarySoft;
+    }
+};
+const Root = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: ${(p) => p.theme.space[3]};
+  font-family: ${(p) => p.theme.font.body};
+  color: ${(p) => p.theme.colors.text};
+  background: ${(p) => variantBg(p.theme, p.$variant)};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.md};
+  box-shadow: ${(p) => p.theme.shadow.stampSm};
+  padding: ${(p) => p.theme.space[3]} ${(p) => p.theme.space[4]};
+`;
+const IconWrap = styled.span `
+  display: inline-flex;
+  flex-shrink: 0;
+  color: ${(p) => variantColor(p.theme, p.$variant)};
+  margin-top: 2px;
+`;
+const Content = styled.div `
+  flex: 1;
+  min-width: 0;
+`;
+const Title = styled.div `
+  font-weight: 800;
+  font-size: 15px;
+  margin-bottom: ${(p) => p.theme.space[1]};
+`;
+const Message = styled.div `
+  font-size: 14px;
+  font-weight: 500;
+  color: ${(p) => p.theme.colors.textMuted};
+`;
+const CloseButton = styled.button `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  color: ${(p) => p.theme.colors.textMuted};
+  cursor: pointer;
+  padding: 2px;
+  border-radius: ${(p) => p.theme.radii.xs};
+
+  &:hover {
+    color: ${(p) => p.theme.colors.text};
+  }
+`;
+const ICONS = {
+    info: Info,
+    success: CheckCircle2,
+    warn: AlertTriangle,
+    danger: XCircle,
+};
+export const Alert = React.forwardRef(function Alert({ $variant = 'info', title, onClose, children, ...rest }, ref) {
+    const Icon = ICONS[$variant];
+    return (_jsxs(Root, { ref: ref, role: "alert", "$variant": $variant, ...rest, children: [_jsx(IconWrap, { "$variant": $variant, "aria-hidden": "true", children: _jsx(Icon, { size: 20 }) }), _jsxs(Content, { children: [title && _jsx(Title, { children: title }), children && _jsx(Message, { children: children })] }), onClose && (_jsx(CloseButton, { type: "button", "aria-label": "Close", onClick: onClose, children: _jsx(X, { size: 18 }) }))] }));
+});

package/dist/components/Avatar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    src?: string;
+    name: string;
+    size?: number;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+export interface AvatarGroupProps extends React.ComponentPropsWithoutRef<'div'> {
+    max?: number;
+    children: React.ReactNode;
+}
+export declare const AvatarGroup: React.FC<AvatarGroupProps>;

package/dist/components/Avatar.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled from 'styled-components';
+function initials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return '?';
+    if (parts.length === 1)
+        return parts[0].charAt(0).toUpperCase();
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+const Root = styled.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  flex-shrink: 0;
+  overflow: hidden;
+  font-family: ${(p) => p.theme.font.body};
+  font-size: ${(p) => Math.round(p.$size * 0.38)}px;
+  font-weight: 800;
+  color: ${(p) => p.theme.colors.primaryInk};
+  background: ${(p) => p.theme.colors.primarySoft};
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.pill};
+  box-shadow: ${(p) => p.theme.shadow.stampSm};
+`;
+const Img = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+export const Avatar = React.forwardRef(({ src, name, size = 40, ...rest }, ref) => {
+    return (_jsx(Root, { ref: ref, "$size": size, ...rest, children: src != null ? _jsx(Img, { src: src, alt: name }) : _jsx("span", { "aria-hidden": "true", children: initials(name) }) }));
+});
+Avatar.displayName = 'Avatar';
+const GroupRoot = styled.div `
+  display: inline-flex;
+  align-items: center;
+
+  & > * + * {
+    margin-left: -12px;
+  }
+`;
+const Overflow = styled.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 14px;
+  font-weight: 800;
+  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.pill};
+  box-shadow: ${(p) => p.theme.shadow.stampSm};
+`;
+export const AvatarGroup = ({ max = 3, children, ...rest }) => {
+    const items = React.Children.toArray(children);
+    const visible = items.slice(0, max);
+    const overflow = items.length - visible.length;
+    return (_jsxs(GroupRoot, { ...rest, children: [visible, overflow > 0 ? _jsx(Overflow, { "aria-hidden": "false", children: `+${overflow}` }) : null] }));
+};

package/dist/components/Badge.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type BadgeVariant = 'primary' | 'neutral' | 'success' | 'danger' | 'warning';
+export interface BadgeProps extends React.ComponentPropsWithoutRef<'span'> {
+    $variant?: BadgeVariant;
+    children: React.ReactNode;
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/Badge.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+const variantStyles = {
+    primary: css `
+    background: ${(p) => p.theme.colors.primary};
+    color: ${(p) => p.theme.colors.primaryInk};
+  `,
+    neutral: css `
+    background: ${(p) => p.theme.colors.surfaceMuted};
+    color: ${(p) => p.theme.colors.text};
+  `,
+    success: css `
+    background: ${(p) => p.theme.colors.incomeSoft};
+    color: ${(p) => p.theme.colors.income};
+  `,
+    danger: css `
+    background: ${(p) => p.theme.colors.expenseSoft};
+    color: ${(p) => p.theme.colors.expense};
+  `,
+    warning: css `
+    background: ${(p) => p.theme.colors.warning};
+    color: ${(p) => p.theme.colors.primaryInk};
+  `,
+};
+const Root = styled.span `
+  display: inline-flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[1]};
+  padding: 2px ${(p) => p.theme.space[2]};
+  font-family: ${(p) => p.theme.font.body};
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.4;
+  border: 2px solid ${(p) => p.theme.colors.border};
+  border-radius: ${(p) => p.theme.radii.pill};
+  ${(p) => variantStyles[p.$variant]}
+`;
+export const Badge = ({ $variant = 'neutral', children, ...rest }) => {
+    return (_jsx(Root, { "$variant": $variant, ...rest, children: children }));
+};

package/dist/components/Breadcrumb.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface BreadcrumbItemProps {
+    href?: string;
+    children: React.ReactNode;
+}
+export declare function BreadcrumbItem({ href, children }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+export interface BreadcrumbProps {
+    children: React.ReactNode;
+}
+export declare function Breadcrumb({ children }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Breadcrumb.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import styled from 'styled-components';
+import { ChevronRight } from 'lucide-react';
+const Nav = styled.nav `
+  font-family: ${(p) => p.theme.font.body};
+`;
+const List = styled.ol `
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${(p) => p.theme.space[1]};
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+const ItemWrap = styled.li `
+  display: inline-flex;
+  align-items: center;
+  gap: ${(p) => p.theme.space[1]};
+  font-size: 14px;
+  font-weight: 700;
+`;
+const Separator = styled.span `
+  display: inline-flex;
+  align-items: center;
+  color: ${(p) => p.theme.colors.textSubtle};
+`;
+const Link = styled.a `
+  color: ${(p) => p.theme.colors.textMuted};
+  text-decoration: none;
+
+  &:hover {
+    color: ${(p) => p.theme.colors.primary};
+    text-decoration: underline;
+  }
+`;
+const Current = styled.span `
+  color: ${(p) => p.theme.colors.text};
+`;
+export function BreadcrumbItem({ href, children }) {
+    if (href) {
+        return _jsx(Link, { href: href, children: children });
+    }
+    return _jsx(Current, { "aria-current": "page", children: children });
+}
+export function Breadcrumb({ children }) {
+    const items = React.Children.toArray(children).filter(React.isValidElement);
+    return (_jsx(Nav, { "aria-label": "Breadcrumb", children: _jsx(List, { children: items.map((item, index) => (_jsxs(ItemWrap, { children: [item, index < items.length - 1 && (_jsx(Separator, { "aria-hidden": "true", children: _jsx(ChevronRight, { size: 16 }) }))] }, index))) }) }));
+}

package/dist/components/Button.d.ts

@@ -0,0 +1,6 @@
+export interface ButtonProps {
+    $variant?: 'primary' | 'ghost' | 'outline' | 'danger';
+    $size?: 'sm' | 'md' | 'lg';
+    $full?: boolean;
+}
+export declare const Button: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import("react").ClassAttributes<HTMLButtonElement> | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonProps> & ButtonProps, keyof ButtonProps> & ButtonProps, "children" | "ref" | "form" | "slot" | "$variant" | "$size" | "$full" | "key" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof import("react").ClassAttributes<HTMLButtonElement> | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonProps> & ButtonProps, keyof ButtonProps> & ButtonProps, "children" | "ref" | "form" | "slot" | "$variant" | "$size" | "$full" | "key" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture">>> & string;