@snacky/ui 0.9.1 → 0.11.0

package/dist/index.d.ts

@@ -25,7 +25,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
 type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: IconButtonVariant;
-    /** 24px (default) or 16px (small) circle - only meaningful on the primary variant. */
+    /** 32px circle with a 16px icon (default) or 24px circle with a full-size 24px icon (small), primary only. */
     size?: 'default' | 'small';
     icon: ReactNode;
     /** Toggled/favorited state on the Secondary variant - tints the icon with icon-active, fill unchanged. */
@@ -40,7 +40,8 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface UploadButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    icon: ReactNode;
+    /** Defaults to the camera glyph Figma draws in this button (its `picture` icon). */
+    icon?: ReactNode;
     ariaLabel?: string;
 }
 /** Snacky Upload Button - circular dashed-border image drop zone. */
@@ -229,6 +230,29 @@ interface AlertBannerProps {
 /** Snacky Alert Banner - inline info/warning strip, optionally with a countdown. */
 declare function AlertBanner({ message, countdown, className }: AlertBannerProps): react.JSX.Element;
 
+interface PageIndicatorProps {
+    /** How many pages the carousel has. */
+    count: number;
+    /** Zero-based index of the page currently shown. */
+    activeIndex: number;
+    /**
+     * Announced to screen readers, defaulting to "Page 2 of 3". Pass your own
+     * when the pages are not pages (a step counter, an onboarding sequence).
+     */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Snacky Page Indicator - the dot row under a carousel. Figma draws the current
+ * page as a 28x8 pill and every other page as an 8x8 dot, 4 apart, and the Home
+ * hero carousel sits it 10 below the banner, centred.
+ *
+ * It reports position, it does not change it: the dots are decoration to a
+ * screen reader and the row carries the label instead. Make the carousel itself
+ * keyboard operable; do not wire clicks onto these.
+ */
+declare function PageIndicator({ count, activeIndex, ariaLabel, className }: PageIndicatorProps): react.JSX.Element;
+
 interface NotificationBadgeProps {
     count: number;
     max?: number;
@@ -339,9 +363,11 @@ interface BottomSheetProps {
     open: boolean;
     onDismiss: () => void;
     children: ReactNode;
-    /** Show the drag-handle bar. Confirmed against Figma: none of the 9
-     *  documented Modal variants show one, so this defaults to false - opt
-     *  in only if a future variant actually needs it. */
+    /** Show the drag-handle bar. Defaults to false because 8 of Figma's 9
+     *  Modal variants have no handle. The `driver` variant does: it draws a
+     *  visible 40x4 `Driver Slider` (node 8693:6233). An earlier pass read
+     *  that as "no variant shows one", which was wrong, so a Driver Tracking
+     *  composition should pass showHandle. */
     showHandle?: boolean;
     className?: string;
 }
@@ -357,7 +383,7 @@ declare function BottomSheet({ open, onDismiss, children, showHandle, className
 
 interface SectionProps {
     title: string;
-    /** Small circular chevron button in the header, shown when provided (e.g. "see more"). */
+    /** "See more" action, shown when provided: Figma's small Icon-Button (24px circle, full-size angle chevron). */
     onAction?: () => void;
     children: ReactNode;
     className?: string;
@@ -639,6 +665,7 @@ declare namespace outline {
 }
 
 declare const account: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const angleSmallRight: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const balance: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const bell: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const cart: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
@@ -651,6 +678,7 @@ declare const star: ({ width, height, color, ...rest }: IconProps) => react.JSX.
 declare const truck: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 
 declare const solid_account: typeof account;
+declare const solid_angleSmallRight: typeof angleSmallRight;
 declare const solid_balance: typeof balance;
 declare const solid_bell: typeof bell;
 declare const solid_cart: typeof cart;
@@ -662,7 +690,7 @@ declare const solid_points: typeof points;
 declare const solid_star: typeof star;
 declare const solid_truck: typeof truck;
 declare namespace solid {
-  export { solid_account as account, solid_balance as balance, solid_bell as bell, solid_cart as cart, solid_category as category, solid_heart as heart, solid_history as history, solid_home as home, solid_points as points, solid_star as star, solid_truck as truck };
+  export { solid_account as account, solid_angleSmallRight as angleSmallRight, solid_balance as balance, solid_bell as bell, solid_cart as cart, solid_category as category, solid_heart as heart, solid_history as history, solid_home as home, solid_points as points, solid_star as star, solid_truck as truck };
 }
 
 /** Matches the `<SnackyIcons.outline.home />` / `<SnackyIcons.solid.home />` namespace used throughout the design system's documented code samples. */
@@ -671,4 +699,4 @@ declare const SnackyIcons: {
     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, Calendar, type CalendarProps, 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, ImagePlaceholder, type ImagePlaceholderProps, InfoBadge, type InfoBadgeProps, 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, type Step, type StepState, Stepper, type StepperProps, TabRow, type TabRowProps, TextField, type TextFieldProps, Toggle, type ToggleProps, UploadButton, type UploadButtonProps, VariantBadge, type VariantBadgeProps, typography };
+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, Calendar, type CalendarProps, 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, ImagePlaceholder, type ImagePlaceholderProps, InfoBadge, type InfoBadgeProps, NavBar, type NavBarProps, type NavItem, NotificationBadge, type NotificationBadgeProps, NotificationListItem, type NotificationListItemProps, OrderListItem, type OrderListItemProps, type OrderStatus, OtpField, type OtpFieldProps, PageIndicator, type PageIndicatorProps, 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, type Step, type StepState, Stepper, type StepperProps, TabRow, type TabRowProps, TextField, type TextFieldProps, Toggle, type ToggleProps, UploadButton, type UploadButtonProps, VariantBadge, type VariantBadgeProps, typography };