@stoovles/gap-kit 1.0.0 → 1.1.0

package/dist/index.d.ts

@@ -0,0 +1,637 @@
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+export declare function Accordion({ children, className }: AccordionProps): JSX.Element;
+
+export declare function AccordionItem({ title, count, subtitle, attributes, defaultExpanded, children, className, }: AccordionItemProps): JSX.Element;
+
+export declare interface AccordionItemProps {
+    title: string;
+    count?: string | number;
+    subtitle?: string;
+    /** Text shown in expanded header instead of subtitle (e.g. selected filter values) */
+    attributes?: string;
+    defaultExpanded?: boolean;
+    children?: default_2.ReactNode;
+    className?: string;
+}
+
+export declare interface AccordionProps {
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+export declare interface ActiveFilter {
+    label: string;
+    value: string;
+}
+
+export declare function BopisSwitch({ checked, onChange, storeName, storeHref, description, className, }: BopisSwitchProps): JSX.Element;
+
+export declare interface BopisSwitchProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    storeName?: string;
+    storeHref?: string;
+    description?: string;
+    className?: string;
+}
+
+export declare interface BrandLink {
+    label: string;
+    href: string;
+}
+
+export declare function Breadcrumb({ items, className }: BreadcrumbProps): JSX.Element | null;
+
+export declare interface BreadcrumbItem {
+    label: string;
+    href: string;
+}
+
+export declare interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+}
+
+export declare function Button({ variant, loading, fullWidth, disabled, children, className, ...rest }: ButtonProps): JSX.Element;
+
+export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    loading?: boolean;
+    fullWidth?: boolean;
+    children: default_2.ReactNode;
+}
+
+export declare type ButtonVariant = "critical" | "primary" | "secondary";
+
+export declare function Checkbox({ label, error, disabled, className, id: idProp, ...rest }: CheckboxProps): JSX.Element;
+
+export declare function CheckboxGroup({ children, label, error, className, }: CheckboxGroupProps): JSX.Element;
+
+export declare interface CheckboxGroupProps {
+    children: default_2.ReactNode;
+    label?: string;
+    error?: boolean;
+    className?: string;
+}
+
+export declare interface CheckboxProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: default_2.ReactNode;
+    error?: boolean;
+}
+
+export declare function Chip({ label, onDismiss, swatch, className }: ChipProps): JSX.Element;
+
+export declare function ChipGroup({ children, onClearAll, clearAllLabel, className, }: ChipGroupProps): JSX.Element;
+
+export declare interface ChipGroupProps {
+    children: default_2.ReactNode;
+    onClearAll?: () => void;
+    clearAllLabel?: string;
+    className?: string;
+}
+
+export declare interface ChipProps {
+    label: string;
+    onDismiss?: () => void;
+    swatch?: string;
+    className?: string;
+}
+
+export declare function Divider({ variant, className }: DividerProps): JSX.Element;
+
+export declare interface DividerProps {
+    variant?: "default" | "subtle";
+    className?: string;
+}
+
+export declare function Dropdown({ label, options, value, defaultValue, onChange, error, disabled, className, id: idProp, }: DropdownProps): JSX.Element;
+
+export declare interface DropdownOption {
+    label: string;
+    value: string;
+}
+
+export declare interface DropdownProps {
+    label: string;
+    options: DropdownOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    error?: boolean;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+}
+
+export declare interface FilterChip {
+    label: string;
+    value: string;
+    /** If true, chip has a dropdown chevron */
+    hasDropdown?: boolean;
+}
+
+export declare function FilterControls({ chips, activeChip, onChipClick, activeFilters, onRemoveFilter, onClearAll, resultCount, className, }: FilterControlsProps): JSX.Element;
+
+export declare interface FilterControlsProps {
+    /** Available filter chips (e.g. Category, Size, Color) */
+    chips?: FilterChip[];
+    /** Currently active chip value */
+    activeChip?: string;
+    /** Called when a chip is clicked */
+    onChipClick?: (value: string) => void;
+    /** Active filter tags */
+    activeFilters?: ActiveFilter[];
+    /** Called when an active filter's X is clicked */
+    onRemoveFilter?: (value: string) => void;
+    /** Called when "Clear all" is clicked */
+    onClearAll?: () => void;
+    /** Result count text, e.g. "128 Results" */
+    resultCount?: string;
+    className?: string;
+}
+
+export declare function FilterDrawer({ open, title, onClose, sections, applyLabel, onApply, className, }: FilterDrawerProps): JSX.Element | null;
+
+export declare interface FilterDrawerProps {
+    /** Whether the drawer is open */
+    open: boolean;
+    /** Drawer header title */
+    title?: string;
+    /** Called when the drawer should close */
+    onClose: () => void;
+    /** Filter sections displayed as accordion rows */
+    sections?: FilterSection[];
+    /** Label for the apply button */
+    applyLabel?: string;
+    /** Called when the apply button is clicked */
+    onApply?: () => void;
+    className?: string;
+}
+
+export declare interface FilterSection {
+    title: string;
+    count?: number;
+    subtitle?: string;
+    children?: default_2.ReactNode;
+}
+
+export declare interface FooterBlock {
+    title: string;
+    content: default_2.ReactNode;
+}
+
+export declare interface FooterNavColumn {
+    title: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+
+export declare function Fulfillment({ children, className }: FulfillmentProps): JSX.Element;
+
+export declare interface FulfillmentProps {
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+export declare function FulfillmentTile({ title, selected, availability, children, onClick, className, }: FulfillmentTileProps): JSX.Element;
+
+export declare interface FulfillmentTileProps {
+    /** Tile heading text */
+    title: string;
+    /** Whether this tile is selected */
+    selected?: boolean;
+    /** Availability text, e.g. "In Stock" */
+    availability?: string;
+    children?: default_2.ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+
+export declare function GapLogo({ color, height, className, "aria-label": ariaLabel, }: GapLogoProps): JSX.Element;
+
+export declare interface GapLogoProps {
+    color?: "dark" | "light";
+    height?: number;
+    className?: string;
+    "aria-label"?: string;
+}
+
+export declare function GlobalFooter({ blocks, navColumns, socialLinks, legalLines, className, }: GlobalFooterProps): JSX.Element;
+
+export declare interface GlobalFooterProps {
+    /** Top promotional blocks (email signup, credit card, app) */
+    blocks?: FooterBlock[];
+    /** Navigation columns (Customer Support, Rewards, About, Find Us) */
+    navColumns?: FooterNavColumn[];
+    /** Social media icons shown below the last nav column */
+    socialLinks?: SocialLink[];
+    /** Legal text lines rendered at the bottom */
+    legalLines?: (string | default_2.ReactNode)[];
+    className?: string;
+}
+
+export declare function GlobalHeader({ brands, promoText, promoLinks, bagCount, onBagClick, onAccountClick, onLogoClick, className, }: GlobalHeaderProps): JSX.Element;
+
+export declare interface GlobalHeaderProps {
+    /** Sister brand links (e.g. Gap, Old Navy, etc.) */
+    brands?: BrandLink[];
+    /** Promotional banner text */
+    promoText?: string;
+    /** Links shown after the promo text */
+    promoLinks?: {
+        label: string;
+        href: string;
+    }[];
+    /** Number of items in the shopping bag */
+    bagCount?: number;
+    /** Callback when bag icon is clicked */
+    onBagClick?: () => void;
+    /** Callback when account icon is clicked */
+    onAccountClick?: () => void;
+    /** Callback when the logo is clicked */
+    onLogoClick?: () => void;
+    className?: string;
+}
+
+export declare function HamburgerNav({ open, onClose, sections, headerSlot, searchPlaceholder, onSearch, className, }: HamburgerNavProps): JSX.Element | null;
+
+export declare interface HamburgerNavItem {
+    label: string;
+    href?: string;
+    /** Whether to show a right chevron indicating sub-navigation */
+    hasChildren?: boolean;
+    onClick?: () => void;
+}
+
+export declare interface HamburgerNavProps {
+    /** Whether the drawer is open */
+    open: boolean;
+    /** Called when the drawer should close */
+    onClose: () => void;
+    /** Primary navigation sections */
+    sections: HamburgerNavSection[];
+    /** Content rendered above the primary nav (e.g. promo banners) */
+    headerSlot?: default_2.ReactNode;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Called when a search is submitted */
+    onSearch?: (value: string) => void;
+    className?: string;
+}
+
+export declare interface HamburgerNavSection {
+    items: HamburgerNavItem[];
+    /** If true, section renders on a subtle gray background */
+    secondary?: boolean;
+}
+
+export declare function Handle({ size, className }: HandleProps): JSX.Element;
+
+export declare interface HandleProps {
+    size?: HandleSize;
+    className?: string;
+}
+
+export declare type HandleSize = "large" | "small";
+
+export declare function Icon({ name, size, color, className, "aria-label": ariaLabel, }: IconProps): JSX.Element;
+
+export declare type IconName = "alert-circle" | "bag" | "checkmark-filled" | "checkmark-outlined" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "email-outlined" | "filter" | "fire" | "info" | "info-circle" | "loader" | "location-filled" | "location-outlined" | "menu" | "pause" | "phone" | "play" | "profile" | "quickadd" | "search" | "show" | "star-empty" | "star-filled" | "star-half" | "swatch" | "volume-off" | "volume-on" | "x";
+
+export declare interface IconProps {
+    name: IconName;
+    size?: IconSize;
+    color?: "dark" | "light";
+    className?: string;
+    "aria-label"?: string;
+}
+
+export declare type IconSize = 12 | 16 | 24 | 32;
+
+export declare function Link({ variant, children, className, ...rest }: LinkProps): JSX.Element;
+
+export declare interface LinkProps extends default_2.AnchorHTMLAttributes<HTMLAnchorElement> {
+    variant?: "inline" | "subtle";
+    children: default_2.ReactNode;
+}
+
+export declare function MegaNav({ logo, onLogoClick, departments, utilityLinks, searchSlot, className, }: MegaNavProps): JSX.Element;
+
+export declare interface MegaNavCategory {
+    title: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+
+export declare interface MegaNavDepartment {
+    label: string;
+    href?: string;
+    /** If true, label renders in sale/red color */
+    sale?: boolean;
+    /** Category columns shown in the dropdown when hovered */
+    categories?: MegaNavCategory[];
+    /** Marketing images shown alongside the categories */
+    marketingImages?: MegaNavMarketingImage[];
+}
+
+export declare interface MegaNavMarketingImage {
+    imageUrl: string;
+    alt?: string;
+    label: string;
+    href: string;
+}
+
+export declare interface MegaNavProps {
+    /** Logo node (can be GapLogo or any ReactNode) */
+    logo?: default_2.ReactNode;
+    /** Callback when logo is clicked */
+    onLogoClick?: () => void;
+    /** Department links */
+    departments: MegaNavDepartment[];
+    /** Utility links (top-right: Find a Store, Rewards, etc.) */
+    utilityLinks?: {
+        label: string;
+        href: string;
+    }[];
+    /** Slot for the search input on the far right */
+    searchSlot?: default_2.ReactNode;
+    className?: string;
+}
+
+declare function Notification_2({ type, variant, children, showIcon, onDismiss, className, }: NotificationProps): JSX.Element;
+export { Notification_2 as Notification }
+
+export declare interface NotificationProps {
+    type?: NotificationType;
+    variant?: NotificationVariant;
+    children: default_2.ReactNode;
+    showIcon?: boolean;
+    onDismiss?: () => void;
+    className?: string;
+}
+
+export declare type NotificationType = "info" | "warning" | "success" | "error";
+
+export declare type NotificationVariant = "banner" | "inline" | "bare";
+
+export declare function Pagination({ shown, total, moreCount, loading, onLoadMore, showBackToTop, onBackToTop, className, }: PaginationProps): JSX.Element;
+
+export declare interface PaginationProps {
+    /** Number of items currently shown */
+    shown: number;
+    /** Total number of items */
+    total: number;
+    /** Number of additional items to load — renders "View N more" button */
+    moreCount?: number;
+    /** Whether more items are currently loading */
+    loading?: boolean;
+    /** Callback when "View more" is clicked */
+    onLoadMore?: () => void;
+    /** Whether to show a "Back to Top" button instead of "View more" */
+    showBackToTop?: boolean;
+    /** Callback when "Back to Top" is clicked */
+    onBackToTop?: () => void;
+    className?: string;
+}
+
+export declare function Popover({ position, align, children, className, }: PopoverProps): JSX.Element;
+
+export declare type PopoverAlign = "start" | "center" | "end";
+
+export declare type PopoverPosition = "top" | "bottom" | "left" | "right";
+
+export declare interface PopoverProps {
+    /** Which side the popover appears on (arrow points opposite) */
+    position?: PopoverPosition;
+    /** Where the arrow sits along the edge */
+    align?: PopoverAlign;
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+export declare function Price({ amount, originalAmount, discount, rangeEnd, layout, className, }: PriceProps): JSX.Element;
+
+export declare function PriceFilter({ min, max, low, high, defaultLow, defaultHigh, step, onChange, onReset, className, }: PriceFilterProps): JSX.Element;
+
+export declare interface PriceFilterProps {
+    min: number;
+    max: number;
+    low?: number;
+    high?: number;
+    defaultLow?: number;
+    defaultHigh?: number;
+    step?: number;
+    onChange?: (low: number, high: number) => void;
+    onReset?: () => void;
+    className?: string;
+}
+
+export declare interface PriceProps {
+    amount: string;
+    originalAmount?: string;
+    discount?: string;
+    rangeEnd?: string;
+    layout?: "inline" | "stacked";
+    className?: string;
+}
+
+export declare function ProductCard({ imageUrl, imageAlt, name, badge, originalPrice, salePrice, discount, marketingFlag, rating, reviewCount, swatches, moreSwatches, variant, onClick, className, }: ProductCardProps): JSX.Element;
+
+export declare interface ProductCardProps {
+    /** Product image URL */
+    imageUrl?: string;
+    /** Alt text for the product image */
+    imageAlt?: string;
+    /** Product name */
+    name: string;
+    /** Badge text (e.g. "New", "Sale") */
+    badge?: string;
+    /** Original/strikethrough price */
+    originalPrice?: string;
+    /** Sale price */
+    salePrice?: string;
+    /** Discount percentage text (e.g. "30% off") */
+    discount?: string;
+    /** Marketing flag text */
+    marketingFlag?: string;
+    /** Star rating 0–5 */
+    rating?: number;
+    /** Number of reviews */
+    reviewCount?: number;
+    /** Color swatches to display */
+    swatches?: ProductCardSwatch[];
+    /** Overflow swatch count (e.g. "+6") */
+    moreSwatches?: number;
+    /** Card variant */
+    variant?: "default" | "mini";
+    /** Click handler for the entire card */
+    onClick?: () => void;
+    className?: string;
+}
+
+export declare interface ProductCardSwatch {
+    color: string;
+    label: string;
+}
+
+export declare function Radio({ label, error, disabled, className, id: idProp, ...rest }: RadioProps): JSX.Element;
+
+export declare function RadioGroup({ children, label, name, error, className, }: RadioGroupProps): JSX.Element;
+
+export declare interface RadioGroupProps {
+    children: default_2.ReactNode;
+    label?: string;
+    name: string;
+    error?: boolean;
+    className?: string;
+}
+
+export declare interface RadioProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label?: default_2.ReactNode;
+    error?: boolean;
+}
+
+export declare function RangeSlider({ min, max, low, high, defaultLow, defaultHigh, step, onChange, "aria-label": ariaLabel, className, }: RangeSliderProps): JSX.Element;
+
+export declare interface RangeSliderProps {
+    min: number;
+    max: number;
+    low?: number;
+    high?: number;
+    defaultLow?: number;
+    defaultHigh?: number;
+    step?: number;
+    onChange?: (low: number, high: number) => void;
+    "aria-label"?: string;
+    className?: string;
+}
+
+export declare function SearchInput({ value, defaultValue, placeholder, onChange, onSubmit, onClear, className, }: SearchInputProps): JSX.Element;
+
+export declare interface SearchInputProps {
+    /** Current search value (controlled) */
+    value?: string;
+    /** Default value (uncontrolled) */
+    defaultValue?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Called when value changes */
+    onChange?: (value: string) => void;
+    /** Called when user submits (Enter key or search icon click) */
+    onSubmit?: (value: string) => void;
+    /** Called when Clear is clicked */
+    onClear?: () => void;
+    className?: string;
+}
+
+export declare function Selector({ options, value, defaultValue, onChange, className, }: SelectorProps): JSX.Element;
+
+export declare function SelectorGroup({ label, selectedLabel, children, className, }: SelectorGroupProps): JSX.Element;
+
+export declare interface SelectorGroupProps {
+    label: string;
+    /** Currently selected value label shown after the header */
+    selectedLabel?: string;
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+export declare interface SelectorOption {
+    label: string;
+    value: string;
+    unavailable?: boolean;
+    disabled?: boolean;
+}
+
+export declare interface SelectorProps {
+    options: SelectorOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+
+export declare function SelectorSwatch({ color, active, focused, unavailable, label, size, "aria-label": ariaLabel, onClick, className, }: SelectorSwatchProps): JSX.Element;
+
+export declare interface SelectorSwatchProps {
+    /** CSS color value displayed inside the swatch circle */
+    color: string;
+    /** Whether this swatch is the active/selected one */
+    active?: boolean;
+    /** Whether the swatch is keyboard-focused */
+    focused?: boolean;
+    /** Whether the color is unavailable (shows diagonal strikethrough) */
+    unavailable?: boolean;
+    /** Optional text label below the swatch */
+    label?: string;
+    /** Swatch diameter */
+    size?: SwatchSize;
+    /** Accessible name for the color */
+    "aria-label"?: string;
+    onClick?: () => void;
+    className?: string;
+}
+
+export declare interface SocialLink {
+    label: string;
+    href: string;
+    icon: default_2.ReactNode;
+}
+
+export declare function SwatchGrid({ children, className }: SwatchGridProps): JSX.Element;
+
+export declare interface SwatchGridProps {
+    children: default_2.ReactNode;
+    showLabels?: boolean;
+    className?: string;
+}
+
+export declare type SwatchSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export declare function Switch({ checked, defaultChecked, onChange, showLabel, disabled, className, "aria-label": ariaLabel, }: SwitchProps): JSX.Element;
+
+export declare interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    showLabel?: boolean;
+    disabled?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+
+export declare interface Tab {
+    label: string;
+    value: string;
+}
+
+export declare function Tabs({ title, tabs, value, defaultValue, onChange, className, }: TabsProps): JSX.Element;
+
+export declare interface TabsProps {
+    /** Header text above the tab bar */
+    title?: string;
+    tabs: Tab[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+}
+
+export declare function TextInput({ label, error, helperText, errorText, maxLength, className, id: idProp, disabled, value, defaultValue, onFocus, onBlur, onChange, ...rest }: TextInputProps): JSX.Element;
+
+export declare interface TextInputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label: string;
+    error?: boolean;
+    helperText?: string;
+    errorText?: string;
+    maxLength?: number;
+    className?: string;
+}
+
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoovles/gap-kit",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Gap 1.0.0 MakeKit for Figma Make",
   "type": "module",
   "main": "dist/index.js",
@@ -33,6 +33,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.4"
   }
 }