@snacky/ui 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,541 @@
+import * as react from 'react';
+import { CSSProperties, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SVGProps } from 'react';
+
+declare const typography: Record<string, Record<string, CSSProperties>>;
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type ButtonSize = 'default' | 'small';
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    /** Hierarchy. Danger is a separate intent that layers onto any of these - it is not a fourth hierarchy. */
+    variant?: ButtonVariant;
+    /** Danger intent - a filled/outlined/text red treatment layered onto `variant`. */
+    danger?: boolean;
+    size?: ButtonSize;
+    /** Optional 24x24 leading icon or social logo slot. */
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Snacky Button - Primary/Secondary/Tertiary hierarchy, each with an optional
+ * Danger intent, in two sizes. Hover/pressed are real CSS pseudo-classes, not
+ * JS-tracked state, matching the design system's documented interaction model.
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: IconButtonVariant;
+    /** 24px (default) or 16px (small) circle - only meaningful on the primary variant. */
+    size?: 'default' | 'small';
+    icon: ReactNode;
+    /** Toggled/favorited state on the Secondary variant - tints the icon with icon-active, fill unchanged. */
+    selected?: boolean;
+    /** Accessible label - required since the button has no visible text. */
+    ariaLabel: string;
+}
+/**
+ * Snacky Icon Button - compact circular touch target for a single icon.
+ * Secondary doubles as a toggle control via `selected` (e.g. Favorite).
+ */
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface UploadButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: ReactNode;
+    ariaLabel?: string;
+}
+/** Snacky Upload Button - circular dashed-border image drop zone. */
+declare const UploadButton: react.ForwardRefExoticComponent<UploadButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+    value: string;
+    onChange: (value: string) => void;
+    label?: string;
+    /** Leading (left) icon or logo - e.g. a marker or payment-method logo. */
+    leadingIcon?: ReactNode;
+    /** Trailing (right) icon - e.g. eye toggle, chevron, calendar, clear. */
+    trailingIcon?: ReactNode;
+    /** Rotates the trailing icon 180deg - used by Dropdown while open. */
+    trailingIconRotated?: boolean;
+    error?: boolean | string;
+}
+/**
+ * Snacky Text Field - the shared 312x48 field used for Text, Password
+ * (type="password" + trailingIcon), Dropdown (trailingIcon chevron, readOnly),
+ * Date Picker (trailingIcon calendar, readOnly) and Address (leading/trailing
+ * marker). Focus/error borders are real CSS (:focus-within, .snacky-field--error),
+ * not JS-tracked state.
+ */
+declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
+
+interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    value: string;
+    onChange: (value: string) => void;
+    searchIcon?: ReactNode;
+    onClear?: () => void;
+}
+/** Snacky Search Field - compact 40px field with a leading search icon and a clear button once filled. */
+declare const SearchField: react.ForwardRefExoticComponent<SearchFieldProps & react.RefAttributes<HTMLInputElement>>;
+
+interface OtpFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    length?: number;
+    disabled?: boolean;
+}
+/** Snacky OTP Field - N individual 48x48 cells with auto-advance and backspace-to-previous. */
+declare function OtpField({ value, onChange, length, disabled }: OtpFieldProps): react.JSX.Element;
+
+interface CopyFieldProps {
+    value: string;
+    onCopy?: (value: string) => void;
+    className?: string;
+}
+/** Snacky Copy Field - a read-only value with a "Copy" link that flips to "Copied" briefly. */
+declare function CopyField({ value, onCopy, className }: CopyFieldProps): react.JSX.Element;
+
+interface ChatInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    value: string;
+    onChange: (value: string) => void;
+    onSend: () => void;
+    sendIcon?: ReactNode;
+}
+/** Snacky Chat Input - message compose bar with an inline 48x48 send button. */
+declare function ChatInput({ value, onChange, onSend, sendIcon, className, placeholder, ...rest }: ChatInputProps): react.JSX.Element;
+
+interface AddressResultProps {
+    icon?: ReactNode;
+    title: string;
+    subtitle: string;
+    onClick?: () => void;
+    className?: string;
+}
+/** Snacky Address Search Result row - selected address entry in a results list. */
+declare function AddressResult({ icon, title, subtitle, onClick, className }: AddressResultProps): react.JSX.Element;
+
+interface ProductChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+    selected: boolean;
+    thumbnail: ReactNode;
+}
+/** Snacky Product Chip - pill chip with a 24x24 thumbnail (e.g. weight/variant picker). */
+declare function ProductChip({ label, selected, thumbnail, onClick, className, ...rest }: ProductChipProps): react.JSX.Element;
+
+interface FilterChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label: string;
+    selected: boolean;
+}
+/** Snacky Filter Chip - text-only pill toggle, e.g. category/sort filters. */
+declare function FilterChip({ label, selected, onClick, className, ...rest }: FilterChipProps): react.JSX.Element;
+
+interface RadioOptionProps {
+    label: string;
+    selected: boolean;
+    onClick: () => void;
+    disabled?: boolean;
+    name?: string;
+    className?: string;
+}
+/** Snacky Radio Option - single-selection control. Always use within a group of 2+ options. */
+declare function RadioOption({ label, selected, onClick, disabled, name, className }: RadioOptionProps): react.JSX.Element;
+
+interface CheckboxProps {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+/** Snacky Checkbox - binary on/off selection control. */
+declare function Checkbox({ label, checked, onChange, disabled, className }: CheckboxProps): react.JSX.Element;
+
+interface ToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+    className?: string;
+}
+/** Snacky Toggle - switch for settings that take effect immediately, no confirm step. */
+declare function Toggle({ checked, onChange, disabled, ariaLabel, className }: ToggleProps): react.JSX.Element;
+
+interface NavItem {
+    label: string;
+    icon: ReactNode;
+    activeIcon?: ReactNode;
+}
+interface NavBarProps {
+    items: NavItem[];
+    selected: number;
+    onSelect: (index: number) => void;
+    className?: string;
+}
+/** Snacky Nav Bar - bottom navigation, 5 tabs for the customer flow. */
+declare function NavBar({ items, selected, onSelect, className }: NavBarProps): react.JSX.Element;
+
+interface TabRowProps {
+    tabs: string[];
+    selected: number;
+    onSelect: (index: number) => void;
+    className?: string;
+}
+/** Snacky Tab Row - inline tab selector with a 2px accent underline on the active tab. */
+declare function TabRow({ tabs, selected, onSelect, className }: TabRowProps): react.JSX.Element;
+
+type HeaderLeadingIcon = 'back' | 'close';
+interface HeaderProps {
+    title: string;
+    /** Back drills deeper into a flow (goes to the previous screen); Close dismisses it entirely. */
+    leadingIcon?: HeaderLeadingIcon;
+    onLeadingClick?: () => void;
+    /** Only ever pairs with leadingIcon="close", never "back", per the documented variants. */
+    trailingIcon?: ReactNode;
+    onTrailingClick?: () => void;
+    className?: string;
+}
+/**
+ * Snacky Header - page header bar. Title always centers in the remaining
+ * space - when a leading icon is present but there's no trailing action,
+ * the title row gets matching right padding so it stays optically centered
+ * against the whole bar, not just the leftover space next to the icon.
+ */
+declare function Header({ title, leadingIcon, onLeadingClick, trailingIcon, onTrailingClick, className }: HeaderProps): react.JSX.Element;
+
+interface ImageBannerProps {
+    imageUrl: string;
+    alt: string;
+    onClick?: () => void;
+    className?: string;
+}
+/** Snacky Hero Banner - main promo carousel image. */
+declare function HeroBanner({ imageUrl, alt, onClick, className }: ImageBannerProps): react.JSX.Element;
+/** Snacky Square Banner - featured category tile (Discount / Favourites / Deals). */
+declare function SquareBanner({ imageUrl, alt, onClick, className }: ImageBannerProps): react.JSX.Element;
+/** Snacky Full-width Banner - prominent promotional banner on detail pages. */
+declare function FullWidthBanner({ imageUrl, alt, onClick, className }: ImageBannerProps): react.JSX.Element;
+interface PointBalanceBannerProps {
+    pointsIcon: ReactNode;
+    points: string;
+    balanceIcon: ReactNode;
+    balance: string;
+    className?: string;
+}
+/** Snacky Point Balance Banner - loyalty points + wallet balance summary strip. */
+declare function PointBalanceBanner({ pointsIcon, points, balanceIcon, balance, className }: PointBalanceBannerProps): react.JSX.Element;
+interface AlertBannerProps {
+    message: string;
+    countdown?: string;
+    className?: string;
+}
+/** Snacky Alert Banner - inline info/warning strip, optionally with a countdown. */
+declare function AlertBanner({ message, countdown, className }: AlertBannerProps): react.JSX.Element;
+
+interface NotificationBadgeProps {
+    count: number;
+    max?: number;
+    children: ReactNode;
+    className?: string;
+}
+/** Snacky Notification Badge - numeric count overlay on an icon (e.g. cart). */
+declare function NotificationBadge({ count, max, children, className }: NotificationBadgeProps): react.JSX.Element;
+interface DiscountTagProps {
+    label: string;
+    className?: string;
+}
+/** Snacky Discount Tag - inline promo/percentage-off tag, e.g. on Product Card. */
+declare function DiscountTag({ label, className }: DiscountTagProps): react.JSX.Element;
+interface SoldOutBadgeProps {
+    className?: string;
+}
+/** Snacky Sold Out Badge - absolute overlay on a product image. Position it with your own layout. */
+declare function SoldOutBadge({ className }: SoldOutBadgeProps): react.JSX.Element;
+interface VariantBadgeProps {
+    label: string;
+    className?: string;
+}
+/** Snacky Variant Badge - static, non-interactive label for the currently selected product variant. */
+declare function VariantBadge({ label, className }: VariantBadgeProps): react.JSX.Element;
+
+type CalloutVariant = 'received' | 'sent' | 'pending';
+interface CalloutProps {
+    message: string;
+    timestamp: string;
+    variant: CalloutVariant;
+    /** Sent shows a checkmark, Pending a clock - pass your own icon for either. */
+    statusIcon?: ReactNode;
+    className?: string;
+}
+/** Snacky Callout - chat message bubble. Received aligns left/white, Sent/Pending align right/accent. */
+declare function Callout({ message, timestamp, variant, statusIcon, className }: CalloutProps): react.JSX.Element;
+
+type OrderStatus = 'waiting' | 'process' | 'processCod' | 'shipped' | 'received' | 'cancelled';
+interface OrderListItemProps {
+    productImage: string;
+    /** The first/representative product in the order, shown next to the status. */
+    productName: string;
+    status: OrderStatus;
+    /** e.g. "2 products" */
+    itemsSummary: string;
+    /** e.g. "Rp 8,000" */
+    total: string;
+    /** Waiting status only, e.g. "Dec 30, 11:00" */
+    paymentDeadline?: string;
+    /** Overrides the status-derived CTA label (Track Shipment / Buy Again). */
+    actionLabel?: string;
+    onAction?: () => void;
+    /** Card click, e.g. to open order detail. */
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * Snacky Order List Item - order summary card. Layout, CTA, and the COD chip
+ * / payment-deadline banner are all driven by `status`, matching the real
+ * per-status variants (Waiting/Process/Process COD/Shipped/Received/Cancelled).
+ */
+declare function OrderListItem({ productImage, productName, status, itemsSummary, total, paymentDeadline, actionLabel, onAction, onClick, className, }: OrderListItemProps): react.JSX.Element;
+interface NotificationListItemProps {
+    title: string;
+    message: string;
+    unread?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+/** Snacky Notification List Item - accent-tinted background for unread items. */
+declare function NotificationListItem({ title, message, unread, onClick, className }: NotificationListItemProps): react.JSX.Element;
+
+interface AccordionProps {
+    title: string;
+    /** When passed, uses the compact 12px title with no border (elevation only) - e.g. a payment-method logo. */
+    leadingIcon?: ReactNode;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+}
+/**
+ * Snacky Accordion - one component whose header border and title size respond
+ * automatically to whether `leadingIcon` is passed (matches the Figma source,
+ * which models icon presence as a real variant rather than optional content).
+ */
+declare function Accordion({ title, leadingIcon, children, defaultOpen, className }: AccordionProps): react.JSX.Element;
+
+interface BottomSheetProps {
+    open: boolean;
+    onDismiss: () => void;
+    children: ReactNode;
+    /** Hide the drag-handle bar, e.g. for content that supplies its own header. */
+    hideHandle?: boolean;
+    className?: string;
+}
+/**
+ * Snacky Bottom Sheet - the shared modal shell every documented Modal
+ * "variant" (Welcome, Success, Confirmation, Calendar, Variants Selector,
+ * Payment Methods, Buyer Reviews, Driver Tracking) composes from, matching
+ * `SnackyBottomSheet(onDismiss = {...}) { ...content... }` in the code samples.
+ * 20px radius on top corners only, dim overlay backdrop, dismiss on
+ * backdrop click or Escape.
+ */
+declare function BottomSheet({ open, onDismiss, children, hideHandle, className }: BottomSheetProps): react.JSX.Element | null;
+
+interface SectionProps {
+    title: string;
+    /** Small circular chevron button in the header, shown when provided (e.g. "see more"). */
+    onAction?: () => void;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Snacky Section - the shared content-block shell every documented Section
+ * "variant" (Variant Selector, Product Description, Buyer Reviews, product
+ * rows, Order Summary, etc.) composes from, matching
+ * `SnackySection(title = "...", onAction = {...}) { ...content... }`.
+ */
+declare function Section({ title, onAction, children, className }: SectionProps): react.JSX.Element;
+
+type AvatarSize = 'sm' | 'md' | 'lg';
+interface AvatarProps {
+    src: string;
+    alt: string;
+    size?: AvatarSize;
+    className?: string;
+}
+/** Snacky Avatar - circular profile photo in three fixed sizes (32 / 56 / 72px). */
+declare function Avatar({ src, alt, size, className }: AvatarProps): react.JSX.Element;
+
+type IllustrationVariant = 'empty' | 'createAccount' | 'welcome' | 'success' | 'discountReferral';
+interface IllustrationProps {
+    variant: IllustrationVariant;
+    /** Host your own export of this illustration (this package ships no artwork). */
+    src: string;
+    alt: string;
+    className?: string;
+}
+/** Snacky Illustration - decorative spot illustration for empty states, onboarding, confirmations. */
+declare function Illustration({ variant, src, alt, className }: IllustrationProps): react.JSX.Element;
+
+type ProductImageUsage = 'product-card' | 'product-details' | 'list' | 'review' | 'variant' | 'accordion-modal';
+interface ProductImageProps {
+    src: string;
+    alt: string;
+    usage: ProductImageUsage;
+    /** Overlays a centered "Sold Out" badge - product-card and product-details only. */
+    sold?: boolean;
+    className?: string;
+}
+/**
+ * Snacky Product Image - adapts its frame size/border to where it appears:
+ * product-card (128) and product-details (200) are bare transparent images;
+ * list (56/48 inner) and review (48/40 inner, bordered) wrap in a padded
+ * frame; variant (88) is a bordered selection frame; accordion-modal (24)
+ * renders a payment-method logo instead of a product photo.
+ */
+declare function ProductImage({ src, alt, usage, sold, className }: ProductImageProps): react.JSX.Element;
+
+interface BaseProductCardProps {
+    productName: string;
+    imageUrl: string;
+    price: string;
+    rating: number;
+    onClick?: () => void;
+    className?: string;
+}
+interface ProductCardListProps extends BaseProductCardProps {
+    variant?: 'list';
+    originalPrice?: string;
+    discountLabel?: string;
+    onAddToCart: () => void;
+    cartIcon?: ReactNode;
+    ratingIcon?: ReactNode;
+}
+interface ProductCardDetailsProps extends BaseProductCardProps {
+    variant: 'details';
+    originalPrice?: string;
+    discountLabel?: string;
+    ratingCount: number;
+    favorited: boolean;
+    onFavoriteClick: () => void;
+    onShareClick: () => void;
+    onChatClick: () => void;
+    sold?: boolean;
+    ratingIcon?: ReactNode;
+    favoriteIcon?: ReactNode;
+    shareIcon?: ReactNode;
+    chatIcon?: ReactNode;
+}
+type ProductCardProps = ProductCardListProps | ProductCardDetailsProps;
+/**
+ * Snacky Product Card - `list` (default) for horizontal carousels/2-column
+ * grids, `details` for the product detail page with rating count and
+ * Favorite/Share/Chat actions.
+ */
+declare function ProductCard(props: ProductCardProps): react.JSX.Element;
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+    width?: number | string;
+    height?: number | string;
+    color?: string;
+}
+
+declare const home$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const category$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const cart$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const cartAdd: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const history: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const account: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const eye: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const eyeOff: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const chevronDown: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const chevronUp: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const chevronRight: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const back: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const close: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const closeCircle: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const calendar: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const search: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const location: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const pin: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const send: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const chat: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const messageSquare: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const heart$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const bell: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const check: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const plus: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const minus: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const trash: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const edit: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const share: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const camera: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const phone: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const lock: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const document: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const creditCard: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const receipt: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const smartphone: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const key: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const help: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const logout: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const truck: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const cash: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const clock: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+
+declare const outline_account: typeof account;
+declare const outline_back: typeof back;
+declare const outline_bell: typeof bell;
+declare const outline_calendar: typeof calendar;
+declare const outline_camera: typeof camera;
+declare const outline_cartAdd: typeof cartAdd;
+declare const outline_cash: typeof cash;
+declare const outline_chat: typeof chat;
+declare const outline_check: typeof check;
+declare const outline_chevronDown: typeof chevronDown;
+declare const outline_chevronRight: typeof chevronRight;
+declare const outline_chevronUp: typeof chevronUp;
+declare const outline_clock: typeof clock;
+declare const outline_close: typeof close;
+declare const outline_closeCircle: typeof closeCircle;
+declare const outline_creditCard: typeof creditCard;
+declare const outline_document: typeof document;
+declare const outline_edit: typeof edit;
+declare const outline_eye: typeof eye;
+declare const outline_eyeOff: typeof eyeOff;
+declare const outline_help: typeof help;
+declare const outline_history: typeof history;
+declare const outline_key: typeof key;
+declare const outline_location: typeof location;
+declare const outline_lock: typeof lock;
+declare const outline_logout: typeof logout;
+declare const outline_messageSquare: typeof messageSquare;
+declare const outline_minus: typeof minus;
+declare const outline_phone: typeof phone;
+declare const outline_pin: typeof pin;
+declare const outline_plus: typeof plus;
+declare const outline_receipt: typeof receipt;
+declare const outline_search: typeof search;
+declare const outline_send: typeof send;
+declare const outline_share: typeof share;
+declare const outline_smartphone: typeof smartphone;
+declare const outline_trash: typeof trash;
+declare const outline_truck: typeof truck;
+declare namespace outline {
+  export { outline_account as account, outline_back as back, outline_bell as bell, outline_calendar as calendar, outline_camera as camera, cart$1 as cart, outline_cartAdd as cartAdd, outline_cash as cash, category$1 as category, outline_chat as chat, outline_check as check, outline_chevronDown as chevronDown, outline_chevronRight as chevronRight, outline_chevronUp as chevronUp, outline_clock as clock, outline_close as close, outline_closeCircle as closeCircle, outline_creditCard as creditCard, outline_document as document, outline_edit as edit, outline_eye as eye, outline_eyeOff as eyeOff, heart$1 as heart, outline_help as help, outline_history as history, home$1 as home, outline_key as key, outline_location as location, outline_lock as lock, outline_logout as logout, outline_messageSquare as messageSquare, outline_minus as minus, outline_phone as phone, outline_pin as pin, outline_plus as plus, outline_receipt as receipt, outline_search as search, outline_send as send, outline_share as share, outline_smartphone as smartphone, outline_trash as trash, outline_truck as truck };
+}
+
+declare const home: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const category: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const cart: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const heart: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+
+declare const solid_cart: typeof cart;
+declare const solid_category: typeof category;
+declare const solid_heart: typeof heart;
+declare const solid_home: typeof home;
+declare namespace solid {
+  export { solid_cart as cart, solid_category as category, solid_heart as heart, solid_home as home };
+}
+
+/** Matches the `<SnackyIcons.outline.home />` / `<SnackyIcons.solid.home />` namespace used throughout the design system's documented code samples. */
+declare const SnackyIcons: {
+    outline: typeof outline;
+    solid: typeof solid;
+};
+
+export { Accordion, type AccordionProps, AddressResult, type AddressResultProps, AlertBanner, type AlertBannerProps, Avatar, type AvatarProps, type AvatarSize, BottomSheet, type BottomSheetProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, CopyField, type CopyFieldProps, DiscountTag, type DiscountTagProps, FilterChip, type FilterChipProps, FullWidthBanner, Header, type HeaderLeadingIcon, type HeaderProps, HeroBanner, IconButton, type IconButtonProps, type IconButtonVariant, type IconProps, Illustration, type IllustrationProps, type IllustrationVariant, type ImageBannerProps, NavBar, type NavBarProps, type NavItem, NotificationBadge, type NotificationBadgeProps, NotificationListItem, type NotificationListItemProps, OrderListItem, type OrderListItemProps, type OrderStatus, OtpField, type OtpFieldProps, PointBalanceBanner, type PointBalanceBannerProps, ProductCard, type ProductCardDetailsProps, type ProductCardListProps, type ProductCardProps, ProductChip, type ProductChipProps, ProductImage, type ProductImageProps, type ProductImageUsage, RadioOption, type RadioOptionProps, SearchField, type SearchFieldProps, Section, type SectionProps, SnackyIcons, SoldOutBadge, type SoldOutBadgeProps, SquareBanner, TabRow, type TabRowProps, TextField, type TextFieldProps, Toggle, type ToggleProps, UploadButton, type UploadButtonProps, VariantBadge, type VariantBadgeProps, typography };