/** VERSION: 0.0.0 **/ /* eslint-disable import-x/extensions */ /* eslint-disable @typescript-eslint/no-namespace */ /* eslint-disable @typescript-eslint/member-ordering */ /* eslint-disable line-comment-position */ /* eslint-disable @typescript-eslint/unified-signatures */ /* eslint-disable no-var */ /* eslint-disable import-x/namespace */ // eslint-disable-next-line @typescript-eslint/triple-slash-reference, spaced-comment /// /** * TODO: Update `any` type here after this is resolved * https://github.com/Shopify/ui-api-design/issues/139 */ export type ComponentChildren = any; export type StringChildren = string; export interface GlobalProps { /** * A unique identifier for the element. */ id?: string; } interface AbbreviationProps$1 extends GlobalProps { /** * The content of the abbreviation or acronym. */ children?: ComponentChildren; /** * Defines the full expansion of the abbreviation or acronym. * * Helps user agents and users understand the meaning of the abbreviated text. * * @default '' * * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr */ title?: string; } export interface ActionSlots { /** * The primary action to perform, provided as a button or link type element. */ primaryAction?: ComponentChildren; /** * The secondary actions to perform, provided as button or link type elements. */ secondaryActions?: ComponentChildren; } export interface BaseOverlayProps { /** * Callback fired after the overlay is shown. */ onShow?: (event: Event) => void; /** * Callback fired when the overlay is shown **after** any animations to show the overlay have finished. */ onAfterShow?: (event: Event) => void; /** * Callback fired after the overlay is hidden. */ onHide?: (event: Event) => void; /** * Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished. */ onAfterHide?: (event: Event) => void; } /** * Shared interfaces for web component methods. * * Methods are required (not optional) because: * - Components implementing this interface must provide all methods * - Unlike props/attributes, methods are not rendered in HTML but are JavaScript APIs * - Consumers expect these methods to be consistently available on all instances */ export interface BaseOverlayMethods { /** * Method to show an overlay. * * @implementation This is a method to be called on the element and not a callback and should hence be camelCase */ showOverlay: () => void; /** * Method to hide an overlay. * * @implementation This is a method to be called on the element and not a callback and should hence be camelCase */ hideOverlay: () => void; /** * Method to toggle the visiblity of an overlay. * * @implementation This is a method to be called on the element and not a callback and should hence be camelCase */ toggleOverlay: () => void; } export interface FocusEventProps { /** * Callback when the element loses focus. * * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event */ onBlur?: (event: FocusEvent) => void; /** * Callback when the element receives focus. * * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event */ onFocus?: (event: FocusEvent) => void; } export interface ToggleEventProps { /** * Callback fired when the element state changes **after** any animations have finished. * * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the * `newState` property will be set to `open`. * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the * `newState` will be `closed`. * * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState */ onAfterToggle?: (event: ToggleEvent$1) => void; /** * Callback straight after the element state changes. * * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the * `newState` property will be set to `open`. * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the * `newState` will be `closed`. * * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState */ onToggle?: (event: ToggleEvent$1) => void; } export type ToggleState = "open" | "closed"; interface ToggleEvent$1 extends Event { readonly newState: ToggleState; readonly oldState: ToggleState; } export interface ExtendableEvent extends Event { /** * Provide a promise that signals the length, and eventual success or failure of actions relating to the event. * * This may be called many times, which adds promises to the event. * * However, this may only be called synchronously during the dispatch of the event. * As in, you cannot call it after a `setTimeout` or microtask. */ waitUntil?: (promise: Promise) => void; } interface AnnouncementProps$1 extends GlobalProps, ToggleEventProps { /** * The content of the announcement. */ children?: ComponentChildren; /** * Callback fired when the announcement is dismissed by the user * (either via the built-in dismiss button or programmatically). */ onDismiss?: (event: Event) => void; /** * Method to programmatically dismiss the announcement. */ dismiss: () => void; } export type SizeKeyword = "small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500"; export type ColorKeyword = "subdued" | "base" | "strong"; export type BackgroundColorKeyword = "transparent" | ColorKeyword; export interface BackgroundProps { /** * Adjust the background of the element. * * @default 'transparent' */ background?: BackgroundColorKeyword; } /** * Tone is a property for defining the color treatment of a component. * * A tone can apply a grouping of colors to a component. For example, * critical may have a specific text color and background color. * * In some cases, like for Banner, the tone may also affect the semantic and accessibility treatment of the component. * * @default 'auto' */ export type ToneKeyword = "auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical" | "accent" | "custom"; declare const privateIconArray: readonly [ "adjust", "affiliate", "airplane", "alert-bubble", "alert-circle", "alert-diamond", "alert-location", "alert-octagon", "alert-octagon-filled", "alert-triangle", "alert-triangle-filled", "app-extension", "apps", "archive", "arrow-down", "arrow-down-circle", "arrow-down-right", "arrow-left", "arrow-left-circle", "arrow-right", "arrow-right-circle", "arrow-up", "arrow-up-circle", "arrow-up-right", "arrows-in-horizontal", "arrows-out-horizontal", "attachment", "automation", "backspace", "bag", "bank", "barcode", "battery-low", "bill", "blank", "blog", "bolt", "bolt-filled", "book", "book-open", "bug", "bullet", "business-entity", "button", "button-press", "calculator", "calendar", "calendar-check", "calendar-compare", "calendar-list", "calendar-time", "camera", "camera-flip", "caret-down", "caret-left", "caret-right", "caret-up", "cart", "cart-abandoned", "cart-discount", "cart-down", "cart-filled", "cart-sale", "cart-send", "cart-up", "cash-dollar", "cash-euro", "cash-pound", "cash-rupee", "cash-yen", "catalog-product", "categories", "channels", "chart-cohort", "chart-donut", "chart-funnel", "chart-histogram-first", "chart-histogram-first-last", "chart-histogram-flat", "chart-histogram-full", "chart-histogram-growth", "chart-histogram-last", "chart-histogram-second-last", "chart-horizontal", "chart-line", "chart-popular", "chart-stacked", "chart-vertical", "chat", "chat-new", "chat-referral", "check", "check-circle", "check-circle-filled", "checkbox", "chevron-down", "chevron-down-circle", "chevron-left", "chevron-left-circle", "chevron-right", "chevron-right-circle", "chevron-up", "chevron-up-circle", "circle", "circle-dashed", "clipboard", "clipboard-check", "clipboard-checklist", "clock", "clock-revert", "code", "code-add", "collection", "collection-featured", "collection-list", "collection-reference", "color", "color-none", "compass", "complete", "compose", "confetti", "connect", "content", "contract", "corner-pill", "corner-round", "corner-square", "credit-card", "credit-card-cancel", "credit-card-percent", "credit-card-reader", "credit-card-reader-chip", "credit-card-reader-tap", "credit-card-secure", "credit-card-tap-chip", "crop", "currency-convert", "cursor", "cursor-banner", "cursor-option", "data-presentation", "data-table", "database", "database-add", "database-connect", "delete", "delivered", "delivery", "desktop", "disabled", "disabled-filled", "discount", "discount-add", "discount-automatic", "discount-code", "discount-remove", "dns-settings", "dock-floating", "dock-side", "domain", "domain-landing-page", "domain-new", "domain-redirect", "download", "drag-drop", "drag-handle", "drawer", "duplicate", "edit", "email", "email-follow-up", "email-newsletter", "empty", "enabled", "enter", "envelope", "envelope-soft-pack", "eraser", "exchange", "exit", "export", "external", "eye-check-mark", "eye-dropper", "eye-dropper-list", "eye-first", "eyeglasses", "fav", "favicon", "file", "file-list", "filter", "filter-active", "flag", "flip-horizontal", "flip-vertical", "flower", "folder", "folder-add", "folder-down", "folder-remove", "folder-up", "food", "foreground", "forklift", "forms", "games", "gauge", "geolocation", "gift", "gift-card", "git-branch", "git-commit", "git-repository", "globe", "globe-asia", "globe-europe", "globe-lines", "globe-list", "graduation-hat", "grid", "hashtag", "hashtag-decimal", "hashtag-list", "heart", "hide", "hide-filled", "home", "home-filled", "icons", "identity-card", "image", "image-add", "image-alt", "image-explore", "image-magic", "image-none", "image-with-text-overlay", "images", "import", "in-progress", "incentive", "incoming", "incomplete", "info", "info-filled", "inheritance", "inventory", "inventory-edit", "inventory-list", "inventory-transfer", "inventory-updated", "iq", "key", "keyboard", "keyboard-filled", "keyboard-hide", "keypad", "label-printer", "language", "language-translate", "layout-block", "layout-buy-button", "layout-buy-button-horizontal", "layout-buy-button-vertical", "layout-column-1", "layout-columns-2", "layout-columns-3", "layout-footer", "layout-header", "layout-logo-block", "layout-popup", "layout-rows-2", "layout-section", "layout-sidebar-left", "layout-sidebar-right", "lightbulb", "link", "link-list", "list-bulleted", "list-bulleted-filled", "list-numbered", "live", "live-critical", "live-none", "location", "location-none", "lock", "map", "markets", "markets-euro", "markets-rupee", "markets-yen", "maximize", "measurement-size", "measurement-size-list", "measurement-volume", "measurement-volume-list", "measurement-weight", "measurement-weight-list", "media-receiver", "megaphone", "mention", "menu", "menu-filled", "menu-horizontal", "menu-vertical", "merge", "metafields", "metaobject", "metaobject-list", "metaobject-reference", "microphone", "minimize", "minus", "minus-circle", "mobile", "money", "money-none", "money-split", "moon", "nature", "note", "note-add", "notification", "order", "order-batches", "order-draft", "order-filled", "order-first", "order-fulfilled", "order-repeat", "order-unfulfilled", "orders-status", "organization", "outdent", "outgoing", "package", "package-cancel", "package-fulfilled", "package-on-hold", "package-reassign", "package-returned", "page", "page-add", "page-attachment", "page-clock", "page-down", "page-heart", "page-list", "page-reference", "page-remove", "page-report", "page-up", "pagination-end", "pagination-start", "paint-brush-flat", "paint-brush-round", "paper-check", "partially-complete", "passkey", "paste", "pause-circle", "payment", "payment-capture", "payout", "payout-dollar", "payout-euro", "payout-pound", "payout-rupee", "payout-yen", "person", "person-add", "person-exit", "person-filled", "person-list", "person-lock", "person-remove", "person-segment", "personalized-text", "phablet", "phone", "phone-in", "phone-out", "pin", "pin-remove", "plan", "play", "play-circle", "plus", "plus-circle", "plus-circle-down", "plus-circle-filled", "plus-circle-up", "point-of-sale", "point-of-sale-register", "price-list", "print", "product", "product-add", "product-cost", "product-filled", "product-list", "product-reference", "product-remove", "product-return", "product-unavailable", "profile", "profile-filled", "question-circle", "question-circle-filled", "receipt", "receipt-dollar", "receipt-euro", "receipt-folded", "receipt-paid", "receipt-pound", "receipt-refund", "receipt-rupee", "receipt-yen", "receivables", "redo", "referral-code", "refresh", "remove-background", "reorder", "replace", "replay", "reset", "return", "reward", "rocket", "rotate-left", "rotate-right", "sandbox", "save", "savings", "scan-qr-code", "search", "search-add", "search-list", "search-recent", "search-resource", "select", "send", "settings", "share", "shield-check-mark", "shield-none", "shield-pending", "shield-person", "shipping-label", "shipping-label-cancel", "shopcodes", "slideshow", "smiley-happy", "smiley-joy", "smiley-neutral", "smiley-sad", "social-ad", "social-post", "sort", "sort-ascending", "sort-descending", "sound", "sports", "star", "star-circle", "star-filled", "star-half", "star-list", "status", "status-active", "stop-circle", "store", "store-import", "store-managed", "store-online", "sun", "table", "table-masonry", "tablet", "target", "tax", "team", "text", "text-align-center", "text-align-left", "text-align-right", "text-block", "text-bold", "text-color", "text-font", "text-font-list", "text-grammar", "text-in-columns", "text-in-rows", "text-indent", "text-indent-remove", "text-italic", "text-quote", "text-title", "text-underline", "text-with-image", "theme", "theme-edit", "theme-store", "theme-template", "three-d-environment", "thumbs-down", "thumbs-up", "tip-jar", "toggle-off", "toggle-on", "transaction", "transaction-fee-add", "transaction-fee-dollar", "transaction-fee-euro", "transaction-fee-pound", "transaction-fee-rupee", "transaction-fee-yen", "transfer", "transfer-in", "transfer-internal", "transfer-out", "truck", "undo", "unknown-device", "unlock", "upload", "variant", "view", "viewport-narrow", "viewport-short", "viewport-tall", "viewport-wide", "wallet", "wand", "watch", "wifi", "work", "work-list", "wrench", "x", "x-circle", "x-circle-filled" ]; export type IconType = (typeof privateIconArray)[number]; /** * Like `Extract`, but ensures that the extracted type is a strict subtype of the input type. */ export type ExtractStrict = Extract; export type MaybeAllValuesShorthandProperty = T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`; export type MaybeTwoValuesShorthandProperty = T | `${T} ${T}`; export type MaybeResponsive = T | `@container${string}`; /** * Prevents widening string literal types in a union to `string`. * @example * type PropName = 'foo' | 'bar' | string * // ^? string * type PropName = 'foo' | 'bar' | (string & {}) * // ^? 'foo' | 'bar' | (string & {}) */ export type AnyString = string & {}; /** * This is purely to give the ability * to have a space or not in the string literal types. * * For example in the `aspectRatio` property, `16/9` and `16 / 9` are both valid. */ export type optionalSpace = "" | " "; interface BadgeProps$1 extends GlobalProps { /** * The content of the Badge. */ children?: ComponentChildren; /** * Sets the tone of the Badge, based on the intention of the information being conveyed. * * @default 'auto' */ tone?: ToneKeyword; /** * Modify the color to be more or less intense. * * @default 'base' */ color?: ColorKeyword; /** * The type of icon to be displayed in the badge. * * @default '' */ icon?: IconType | AnyString; /** * The position of the icon in relation to the text. */ iconPosition?: "start" | "end"; /** * Adjusts the size. * * @default 'base' */ size?: SizeKeyword; } interface BannerProps$1 extends GlobalProps, ActionSlots { /** * The title of the banner. * * @default '' */ heading?: string; /** * The content of the Banner. */ children?: ComponentChildren; /** * Sets the tone of the Banner, based on the intention of the information being conveyed. * * The banner is a live region and the type of status will be dictated by the Tone selected. * * - `critical` creates an [assertive live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) that is announced by screen readers immediately. * - `neutral`, `info`, `success`, `warning` and `caution` creates an [informative live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) that is announced by screen readers after the current message. * * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role * * @default 'auto' */ tone?: ToneKeyword; /** * Makes the content collapsible. * A collapsible banner will conceal child elements initially, but allow the user to expand the banner to see them. * * @default false */ collapsible?: boolean; /** * Determines whether the close button of the banner is present. * * When the close button is pressed, the `dismiss` event will fire, * then `hidden` will be true, * any animation will complete, * and the `afterhide` event will fire. * * @default false */ dismissible?: boolean; /** * Event handler when the banner is dismissed by the user. * * This does not fire when setting `hidden` manually. * * The `hidden` property will be `false` when this event fires. */ onDismiss?: (event: Event) => void; /** * Event handler when the banner has fully hidden. * * The `hidden` property will be `true` when this event fires. * * @implementation If implementations animate the hiding of the banner, * this event must fire after the banner has fully hidden. * We can add an `onHide` event in future if we want to provide a hook for the start of the animation. */ onAfterHide?: (event: Event) => void; /** * Determines whether the banner is hidden. * * If this property is being set on each framework render (as in 'controlled' usage), * and the banner is `dismissible`, * ensure you update app state for this property when the `dismiss` event fires. * * If the banner is not `dismissible`, it can still be hidden by setting this property. * * @default false */ hidden?: boolean; } export interface DisplayProps { /** * Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout). * * - `auto`: the component’s initial value. The actual value depends on the component and context. * - `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers. * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display * @default 'auto' */ display?: MaybeResponsive<"auto" | "none">; } export interface AccessibilityRoleProps { /** * Sets the semantic meaning of the component’s content. When set, * the role will be used by assistive technologies to help users * navigate the page. * * @implementation Although, in HTML hosts, this property changes the element used, * changing this property must not impact the visual styling of inside or outside of the box. * * @default 'generic' */ accessibilityRole?: AccessibilityRole; } export type AccessibilityRole = /** * Used to indicate the primary content. * * In an HTML host, `main` will render a `
` element. * Learn more about the [`
` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs. */ "main" /** * Used to indicate the component is a header. * * In an HTML host `header` will render a `
` element. * Learn more about the [`
` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) and its [implicit role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) in the MDN web docs. */ | "header" /** * Used to display information such as copyright information, navigation links, and privacy statements. * * In an HTML host `footer` will render a `