@snacky/ui 0.10.0 → 0.12.0

package/dist/index.d.cts

@@ -230,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;
@@ -562,7 +585,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 }
 
 declare const account$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
-declare const address: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const address$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const back: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const balance$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const bell$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
@@ -604,7 +627,6 @@ declare const trash: ({ width, height, color, ...rest }: IconProps) => react.JSX
 declare const truck$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const unsent: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 
-declare const outline_address: typeof address;
 declare const outline_back: typeof back;
 declare const outline_calendar: typeof calendar;
 declare const outline_camera: typeof camera;
@@ -638,10 +660,11 @@ declare const outline_smartphone: typeof smartphone;
 declare const outline_trash: typeof trash;
 declare const outline_unsent: typeof unsent;
 declare namespace outline {
-  export { account$1 as account, outline_address as address, outline_back as back, balance$1 as balance, bell$1 as bell, outline_calendar as calendar, outline_camera as camera, cart$1 as cart, outline_cartAdd as cartAdd, category$1 as category, outline_chat as chat, outline_chevronDown as chevronDown, outline_chevronRight as chevronRight, outline_chevronUp as chevronUp, outline_close as close, outline_closeInput as closeInput, 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, history$1 as history, home$1 as home, outline_key as key, outline_lock as lock, outline_logout as logout, outline_map as map, outline_messageSquare as messageSquare, outline_minus as minus, outline_phone as phone, outline_plus as plus, outline_referral as referral, outline_search as search, outline_send as send, outline_sent as sent, outline_share as share, outline_smartphone as smartphone, outline_trash as trash, truck$1 as truck, outline_unsent as unsent };
+  export { account$1 as account, address$1 as address, outline_back as back, balance$1 as balance, bell$1 as bell, outline_calendar as calendar, outline_camera as camera, cart$1 as cart, outline_cartAdd as cartAdd, category$1 as category, outline_chat as chat, outline_chevronDown as chevronDown, outline_chevronRight as chevronRight, outline_chevronUp as chevronUp, outline_close as close, outline_closeInput as closeInput, 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, history$1 as history, home$1 as home, outline_key as key, outline_lock as lock, outline_logout as logout, outline_map as map, outline_messageSquare as messageSquare, outline_minus as minus, outline_phone as phone, outline_plus as plus, outline_referral as referral, outline_search as search, outline_send as send, outline_sent as sent, outline_share as share, outline_smartphone as smartphone, outline_trash as trash, truck$1 as truck, outline_unsent as unsent };
 }
 
 declare const account: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const address: ({ 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;
@@ -655,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_address: typeof address;
 declare const solid_angleSmallRight: typeof angleSmallRight;
 declare const solid_balance: typeof balance;
 declare const solid_bell: typeof bell;
@@ -667,7 +691,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_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 };
+  export { solid_account as account, solid_address as address, 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. */
@@ -676,4 +700,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 };

package/dist/index.d.ts

@@ -230,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;
@@ -562,7 +585,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 }
 
 declare const account$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
-declare const address: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const address$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const back: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const balance$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const bell$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
@@ -604,7 +627,6 @@ declare const trash: ({ width, height, color, ...rest }: IconProps) => react.JSX
 declare const truck$1: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 declare const unsent: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
 
-declare const outline_address: typeof address;
 declare const outline_back: typeof back;
 declare const outline_calendar: typeof calendar;
 declare const outline_camera: typeof camera;
@@ -638,10 +660,11 @@ declare const outline_smartphone: typeof smartphone;
 declare const outline_trash: typeof trash;
 declare const outline_unsent: typeof unsent;
 declare namespace outline {
-  export { account$1 as account, outline_address as address, outline_back as back, balance$1 as balance, bell$1 as bell, outline_calendar as calendar, outline_camera as camera, cart$1 as cart, outline_cartAdd as cartAdd, category$1 as category, outline_chat as chat, outline_chevronDown as chevronDown, outline_chevronRight as chevronRight, outline_chevronUp as chevronUp, outline_close as close, outline_closeInput as closeInput, 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, history$1 as history, home$1 as home, outline_key as key, outline_lock as lock, outline_logout as logout, outline_map as map, outline_messageSquare as messageSquare, outline_minus as minus, outline_phone as phone, outline_plus as plus, outline_referral as referral, outline_search as search, outline_send as send, outline_sent as sent, outline_share as share, outline_smartphone as smartphone, outline_trash as trash, truck$1 as truck, outline_unsent as unsent };
+  export { account$1 as account, address$1 as address, outline_back as back, balance$1 as balance, bell$1 as bell, outline_calendar as calendar, outline_camera as camera, cart$1 as cart, outline_cartAdd as cartAdd, category$1 as category, outline_chat as chat, outline_chevronDown as chevronDown, outline_chevronRight as chevronRight, outline_chevronUp as chevronUp, outline_close as close, outline_closeInput as closeInput, 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, history$1 as history, home$1 as home, outline_key as key, outline_lock as lock, outline_logout as logout, outline_map as map, outline_messageSquare as messageSquare, outline_minus as minus, outline_phone as phone, outline_plus as plus, outline_referral as referral, outline_search as search, outline_send as send, outline_sent as sent, outline_share as share, outline_smartphone as smartphone, outline_trash as trash, truck$1 as truck, outline_unsent as unsent };
 }
 
 declare const account: ({ width, height, color, ...rest }: IconProps) => react.JSX.Element;
+declare const address: ({ 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;
@@ -655,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_address: typeof address;
 declare const solid_angleSmallRight: typeof angleSmallRight;
 declare const solid_balance: typeof balance;
 declare const solid_bell: typeof bell;
@@ -667,7 +691,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_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 };
+  export { solid_account as account, solid_address as address, 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. */
@@ -676,4 +700,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 };