@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib/src/behaviors/focusZone.d.ts

@@ -0,0 +1,137 @@
+export declare type Direction = 'previous' | 'next' | 'start' | 'end';
+export declare type FocusMovementKeys = 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'ArrowRight' | 'h' | 'j' | 'k' | 'l' | 'a' | 's' | 'w' | 'd' | 'Tab' | 'Home' | 'End' | 'PageUp' | 'PageDown';
+export declare enum FocusKeys {
+    ArrowHorizontal = 1,
+    ArrowVertical = 2,
+    JK = 4,
+    HL = 8,
+    HomeAndEnd = 16,
+    PageUpDown = 256,
+    WS = 32,
+    AD = 64,
+    Tab = 128,
+    ArrowAll = 3,
+    HJKL = 12,
+    WASD = 96,
+    All = 511
+}
+/**
+ * Options that control the behavior of the arrow focus behavior.
+ */
+export interface FocusZoneSettings {
+    /**
+     * Choose the behavior applied in cases where focus is currently at either the first or
+     * last element of the container.
+     *
+     * "stop" - do nothing and keep focus where it was
+     * "wrap" - wrap focus around to the first element from the last, or the last element from the first
+     *
+     * Default: "stop"
+     */
+    focusOutBehavior?: 'stop' | 'wrap';
+    /**
+     * If set, this will be called to get the next focusable element. If this function
+     * returns null, we will try to determine the next direction ourselves. Use the
+     * `bindKeys` option to customize which keys are listened to.
+     *
+     * The function can accept a Direction, indicating the direction focus should move,
+     * the HTMLElement that was previously focused, and lastly the `KeyboardEvent` object
+     * created by the original `"keydown"` event.
+     */
+    getNextFocusable?: (direction: Direction, from: Element | undefined, event: KeyboardEvent) => HTMLElement | undefined;
+    /**
+     * Called to decide if a focusable element is allowed to participate in the arrow
+     * key focus behavior.
+     *
+     * By default, all focusable elements within the given container will participate
+     * in the arrow key focus behavior. If you need to withhold some elements from
+     * participation, implement this callback to return false for those elements.
+     */
+    focusableElementFilter?: (element: HTMLElement) => boolean;
+    /**
+     * Bit flags that identify keys that will be bound to. Each available key either
+     * moves focus to the "next" element or the "previous" element, so it is best
+     * to only bind the keys that make sense to move focus in your UI. Use the `FocusKeys`
+     * object to discover supported keys.
+     *
+     * Use the bitwise "OR" operator (`|`) to combine key types. For example,
+     * `FocusKeys.WASD | FocusKeys.HJKL` represents all of W, A, S, D, H, J, K, and L.
+     *
+     * A note on FocusKeys.PageUpDown: This behavior does not support paging, so by default
+     * using these keys will result in the same behavior as Home and End. To override this
+     * behavior, implement `getNextFocusable`.
+     *
+     * The default for this setting is `FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd`, unless
+     * `getNextFocusable` is provided, in which case `FocusKeys.ArrowAll | FocusKeys.HomeAndEnd`
+     * is used as the default.
+     */
+    bindKeys?: FocusKeys;
+    /**
+     * If provided, this signal can be used to disable the behavior and remove any
+     * event listeners.
+     */
+    abortSignal?: AbortSignal;
+    /**
+     * If `activeDescendantControl` is supplied, do not move focus or alter `tabindex` on
+     * any element. Instead, manage `aria-activedescendant` according to the ARIA best
+     * practices guidelines.
+     * @see https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant
+     *
+     * The given `activeDescendantControl` will be given an `aria-controls` attribute that
+     * references the ID of the `container`. Additionally, it will be given an
+     * `aria-activedescendant` attribute that references the ID of the currently-active
+     * descendant.
+     *
+     * This element will retain DOM focus as arrow keys are pressed.
+     */
+    activeDescendantControl?: HTMLElement;
+    /**
+     * Called each time the active descendant changes. Note that either of the parameters
+     * may be undefined, e.g. when an element in the container first becomes active, or
+     * when the controlling element becomes unfocused.
+     */
+    onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
+    /**
+     * This option allows customization of the behavior that determines which of the
+     * focusable elements should be focused when focus enters the container via the Tab key.
+     *
+     * When set to "first", whenever focus enters the container via Tab, we will focus the
+     * first focusable element. When set to "previous", the most recently focused element
+     * will be focused (fallback to first if there was no previous).
+     *
+     * The "closest" strategy works like "first", except either the first or the last element
+     * of the container will be focused, depending on the direction from which focus comes.
+     *
+     * If a function is provided, this function should return the HTMLElement intended
+     * to receive focus. This is useful if you want to focus the currently "selected"
+     * item or element.
+     *
+     * Default: "previous"
+     *
+     * For more information, @see https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_general_within
+     */
+    focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
+}
+export declare const isActiveDescendantAttribute = "data-is-active-descendant";
+/**
+ * A value of activated-directly for data-is-active-descendant indicates the descendant was activated
+ * by a manual user interaction with intent to move active descendant.  This usually translates to the
+ * user pressing one of the bound keys (up/down arrow, etc) to move through the focus zone.  This is
+ * intended to be roughly equivalent to the :focus-visible pseudo-class
+ **/
+export declare const activeDescendantActivatedDirectly = "activated-directly";
+/**
+ * A value of activated-indirectly for data-is-active-descendant indicates the descendant was activated
+ * implicitly, and not by a direct key press.  This includes focus zone being created from scratch, focusable
+ * elements being added/removed, and mouseover events. This is intended to be roughly equivalent
+ * to :focus:not(:focus-visible)
+ **/
+export declare const activeDescendantActivatedIndirectly = "activated-indirectly";
+export declare const hasActiveDescendantAttribute = "data-has-active-descendant";
+/**
+ * Sets up the arrow key focus behavior for all focusable elements in the given `container`.
+ * @param container
+ * @param settings
+ * @returns
+ */
+export declare function focusZone(container: HTMLElement, settings?: FocusZoneSettings): AbortController;

package/lib/src/behaviors/scrollIntoViewingArea.d.ts

@@ -0,0 +1 @@
+export declare const scrollIntoViewingArea: (child: HTMLElement, viewingArea: HTMLElement, direction?: 'horizontal' | 'vertical', startMargin?: number, endMargin?: number, behavior?: ScrollBehavior) => void;

package/lib/src/constants.d.ts

@@ -0,0 +1,20 @@
+import * as styledSystem from 'styled-system';
+export declare const get: (key: string) => (props: any) => any;
+export declare const COMMON: styledSystem.styleFn;
+export interface SystemCommonProps extends styledSystem.ColorProps, styledSystem.SpaceProps, styledSystem.DisplayProps {
+}
+export declare const TYPOGRAPHY: styledSystem.styleFn;
+export interface SystemTypographyProps extends styledSystem.TypographyProps {
+    whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line';
+}
+export declare const BORDER: styledSystem.styleFn;
+export interface SystemBorderProps extends styledSystem.BorderProps, styledSystem.ShadowProps {
+}
+export declare const LAYOUT: styledSystem.styleFn;
+export declare type SystemLayoutProps = styledSystem.LayoutProps;
+export declare const POSITION: styledSystem.styleFn;
+export declare type SystemPositionProps = styledSystem.PositionProps;
+export declare const FLEX: styledSystem.styleFn;
+export declare type SystemFlexProps = styledSystem.FlexboxProps;
+export declare const GRID: styledSystem.styleFn;
+export declare type SystemGridProps = styledSystem.GridProps;

package/lib/src/drafts.d.ts

@@ -0,0 +1,8 @@
+/** This is the place where we keep components that are not part of the public
+ *  api yet (not in main bundle). We don't recommend using it in production.
+ *
+ *  But, they are published on npm and you can import them for experimentation/feedback.
+ *  example: import {ActionList} from '@primer/components/drafts
+ */
+export * from './ActionList2';
+export * from './NewButton';

package/lib/src/hooks/index.d.ts

@@ -0,0 +1,11 @@
+export { useOnOutsideClick } from './useOnOutsideClick';
+export type { UseOnOutsideClickSettings, TouchOrMouseEvent } from './useOnOutsideClick';
+export { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
+export { useOnEscapePress } from './useOnEscapePress';
+export { useOpenAndCloseFocus } from './useOpenAndCloseFocus';
+export type { UseOpenAndCloseFocusSettings } from './useOpenAndCloseFocus';
+export type { AnchoredPositionHookSettings } from './useAnchoredPosition';
+export { useAnchoredPosition } from './useAnchoredPosition';
+export { useOverlay } from './useOverlay';
+export type { UseOverlaySettings } from './useOverlay';
+export { useRenderForcingRef } from './useRenderForcingRef';

package/lib/src/hooks/useAnchoredPosition.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PositionSettings, AnchorPosition } from '../behaviors/anchoredPosition';
+export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
+    floatingElementRef?: React.RefObject<Element>;
+    anchorElementRef?: React.RefObject<Element>;
+}
+/**
+ * Calculates the top and left values for an absolutely-positioned floating element
+ * to be anchored to some anchor element. Returns refs for the floating element
+ * and the anchor element, along with the position.
+ * @param settings Settings for calculating the anchored position.
+ * @param dependencies Dependencies to determine when to re-calculate the position.
+ * @returns An object of {top: number, left: number} to absolutely-position the
+ * floating element.
+ */
+export declare function useAnchoredPosition(settings?: AnchoredPositionHookSettings, dependencies?: React.DependencyList): {
+    floatingElementRef: React.RefObject<Element>;
+    anchorElementRef: React.RefObject<Element>;
+    position: AnchorPosition | undefined;
+};

package/lib/src/hooks/useCombinedRefs.d.ts

@@ -0,0 +1,10 @@
+import { ForwardedRef } from 'react';
+/**
+ * Creates a ref by combining multiple constituent refs. The ref returned by this hook
+ * should be passed as the ref for the element that needs to be shared. This is
+ * particularly useful when you are using `React.forwardRef` in your component but you
+ * also want to be able to access the local element. This is a small anti-pattern,
+ * though, as it breaks encapsulation.
+ * @param refs
+ */
+export declare function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]): import("react").MutableRefObject<T | null>;

package/lib/src/hooks/useDetails.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+declare type UseDetailsParameters = {
+    ref?: React.RefObject<HTMLElement>;
+    closeOnOutsideClick?: boolean;
+    defaultOpen?: boolean;
+    onClickOutside?: (event: MouseEvent) => void;
+};
+declare function useDetails({ ref, closeOnOutsideClick, defaultOpen, onClickOutside }: UseDetailsParameters): {
+    open: boolean | undefined;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
+    getDetailsProps: () => {
+        onToggle: (e: React.SyntheticEvent<HTMLElement, Event>) => void;
+        open: boolean | undefined;
+        ref: import("react").RefObject<HTMLElement>;
+    };
+};
+export default useDetails;

package/lib/src/hooks/useDialog.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+declare type UseDialogParameters = {
+    modalRef: React.RefObject<HTMLElement>;
+    overlayRef: React.RefObject<HTMLElement>;
+    isOpen?: boolean;
+    onDismiss?: () => void;
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    closeButtonRef?: React.RefObject<HTMLElement>;
+    returnFocusRef?: React.RefObject<HTMLElement>;
+};
+declare function useDialog({ modalRef, overlayRef, isOpen, onDismiss, initialFocusRef, closeButtonRef }: UseDialogParameters): {
+    getDialogProps: () => {
+        onKeyDown: (event: any) => void;
+    };
+};
+export default useDialog;

package/lib/src/hooks/useFocusTrap.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+export interface FocusTrapHookSettings {
+    /**
+     * Ref that will be used for the trapping container. If not provided, one will
+     * be created by this hook and returned.
+     */
+    containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * Ref for the element that should receive focus when the focus trap is first enabled. If
+     * not provided, one will be created by this hook and returned. Its use is optional.
+     */
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    /**
+     * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at
+     * any time.
+     */
+    disabled?: boolean;
+    /**
+     * If true, when this focus trap is cleaned up, restore focus to the element that had
+     * focus immediately before the focus trap was enabled. (Default: false)
+     */
+    restoreFocusOnCleanUp?: boolean;
+}
+/**
+ * Hook used to trap focus inside a container. Returns a ref that can be added to the container
+ * that should trap focus.
+ * @param settings {FocusTrapHookSettings}
+ */
+export declare function useFocusTrap(settings?: FocusTrapHookSettings, dependencies?: React.DependencyList): {
+    containerRef: React.RefObject<HTMLElement>;
+    initialFocusRef: React.RefObject<HTMLElement>;
+};

package/lib/src/hooks/useFocusZone.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FocusZoneSettings } from '../behaviors/focusZone';
+export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDescendantControl'> {
+    /**
+     * Optional ref for the container that holds all elements participating in arrow key focus.
+     * If one is not passed, we will create one for you and return it from the hook.
+     */
+    containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * If using the "active descendant" focus pattern, pass `true` or a ref to the controlling
+     * element. If a ref object is not passed, we will create one for you.
+     */
+    activeDescendantFocus?: boolean | React.RefObject<HTMLElement>;
+    /**
+     * Set to true to disable the focus zone and clean up listeners. Can be re-enabled at
+     * any time.
+     */
+    disabled?: boolean;
+}
+export declare function useFocusZone(settings?: FocusZoneHookSettings, dependencies?: React.DependencyList): {
+    containerRef: React.RefObject<HTMLElement>;
+    activeDescendantControlRef: React.RefObject<HTMLElement>;
+};

package/lib/src/hooks/useOnEscapePress.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+/**
+ * Sets up a `keydown` listener on `window.document`. If
+ * 1) The pressed key is "Escape", and
+ * 2) The event has not had `.preventDefault()` called
+ * The given callback will be executed.
+ *
+ * Note: If multiple `useOnEscapePress` hooks are active simultaneously, the
+ * callbacks will occur in reverse order. In other words, if a parent component
+ * and a child component both call `useOnEscapePress`, when the user presses
+ * Escape, the child component's callback will execute, followed by the parent's
+ * callback. Each callback has the chance to call `.preventDefault()` on the
+ * event to prevent further callbacks.
+ *
+ * @param callback {(e: KeyboardEvent) => void} The callback that gets executed
+ * when the Escape key is pressed. The KeyboardEvent generated by the Escape
+ * keypress is passed as the only argument.
+ *
+ * @param callbackDependencies {React.DependencyList} The dependencies of the given
+ * `onEscape` callback for memoization. Omit this param if the callback is already
+ * memoized. See `React.useCallback` for more info on memoization.
+ */
+export declare const useOnEscapePress: (onEscape: (e: KeyboardEvent) => void, callbackDependencies?: import("react").DependencyList) => void;

package/lib/src/hooks/useOnOutsideClick.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type TouchOrMouseEvent = MouseEvent | TouchEvent;
+export declare type UseOnOutsideClickSettings = {
+    containerRef: React.RefObject<HTMLDivElement>;
+    ignoreClickRefs?: React.RefObject<HTMLElement>[];
+    onClickOutside: (e: TouchOrMouseEvent) => void;
+};
+export declare const useOnOutsideClick: ({ containerRef, ignoreClickRefs, onClickOutside }: UseOnOutsideClickSettings) => void;

package/lib/src/hooks/useOpenAndCloseFocus.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type UseOpenAndCloseFocusSettings = {
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    containerRef: React.RefObject<HTMLElement>;
+    returnFocusRef: React.RefObject<HTMLElement>;
+    preventFocusOnOpen?: boolean;
+};
+export declare function useOpenAndCloseFocus({ initialFocusRef, returnFocusRef, containerRef, preventFocusOnOpen }: UseOpenAndCloseFocusSettings): void;

package/lib/src/hooks/useOverlay.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { TouchOrMouseEvent } from './useOnOutsideClick';
+export declare type UseOverlaySettings = {
+    ignoreClickRefs?: React.RefObject<HTMLElement>[];
+    initialFocusRef?: React.RefObject<HTMLElement>;
+    returnFocusRef: React.RefObject<HTMLElement>;
+    onEscape: (e: KeyboardEvent) => void;
+    onClickOutside: (e: TouchOrMouseEvent) => void;
+    overlayRef?: React.RefObject<HTMLDivElement>;
+    preventFocusOnOpen?: boolean;
+};
+export declare type OverlayReturnProps = {
+    ref: React.RefObject<HTMLDivElement>;
+};
+export declare const useOverlay: ({ overlayRef: _overlayRef, returnFocusRef, initialFocusRef, onEscape, ignoreClickRefs, onClickOutside, preventFocusOnOpen }: UseOverlaySettings) => OverlayReturnProps;

package/lib/src/hooks/useProvidedRefOrCreate.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * There are some situations where we only want to create a new ref if one is not provided to a component
+ * or hook as a prop. However, due to the `rules-of-hooks`, we cannot conditionally make a call to `React.useRef`
+ * only in the situations where the ref is not provided as a prop.
+ * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
+ * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
+ * @type TRef The type of the RefObject which should be created.
+ */
+export declare function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef>): React.RefObject<TRef>;

package/lib/src/hooks/useProvidedStateOrCreate.d.ts

@@ -0,0 +1,10 @@
+/**
+ * There are some situations where we want to give users the option to control state externally with their own state handlers
+ * or default to using internal state handlers. Because of the 'rules-of-hooks', we cannot conditionally make a call to `React.useState`
+ * only in the situations where the state is not provided as a prop.
+ * This hook aims to encapsulate that logic, so the consumer doesn't need to be concerned with violating `rules-of-hooks`.
+ * @param externalState The state to use - if undefined, will use the state from a call to React.useState
+ * @param setExternalState The setState to use - if undefined, will use the setState from a call to React.useState
+ * @param defaultState The defaultState to use, if using internal state.
+ */
+export declare function useProvidedStateOrCreate<T>(externalState: T | undefined, setExternalState: ((s: T) => void) | undefined, defaultState: T): readonly [T, (s: T) => void];

package/lib/src/hooks/useRenderForcingRef.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * There are certain situations where a ref might be set after the current render cycle for a
+ * component has finished.  e.g. a forward ref from a conditionally rendered child component.
+ * In these situations, we need to force a re-render, which is done here by the useState hook.
+ * @type TRef The type of the RefObject which should be created.
+ */
+export declare function useRenderForcingRef<TRef>(): readonly [RefObject<TRef>, (newRef: TRef | null) => void];

package/lib/src/hooks/useResizeObserver.d.ts

@@ -0,0 +1 @@
+export declare function useResizeObserver(callback: () => void): void;

package/lib/src/hooks/useSafeTimeout.d.ts

@@ -0,0 +1,12 @@
+declare type SetTimeout = (handler: TimerHandler, timeout?: number, ...args: unknown[]) => number;
+declare type ClearTimeout = (id: number) => void;
+/**
+ * Safely call `setTimeout` and `clearTimeout` within a component.
+ *
+ * This hook ensures that all timeouts are cleared when the component unmounts.
+ */
+export default function useSafeTimeout(): {
+    safeSetTimeout: SetTimeout;
+    safeClearTimeout: ClearTimeout;
+};
+export {};

package/lib/src/hooks/useScrollFlash.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * This hook will flash the scrollbars for a ref of a container that has scrollable overflow
+ * @param scrollContainerRef The ref of the scrollable content
+ */
+export default function useScrollFlash(scrollContainerRef: React.RefObject<HTMLElement>): void;

package/lib/src/index.d.ts

@@ -0,0 +1,120 @@
+export { default as theme } from './theme';
+export { get as themeGet } from './constants';
+export { default as BaseStyles } from './BaseStyles';
+export type { BaseStylesProps } from './BaseStyles';
+export { default as ThemeProvider, useTheme, useColorSchemeVar } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+export { default as BorderBox } from './BorderBox';
+export type { BorderBoxProps } from './BorderBox';
+export { default as Box } from './Box';
+export type { BoxProps } from './Box';
+export { default as Flex } from './Flex';
+export type { FlexProps } from './Flex';
+export { default as Grid } from './Grid';
+export type { GridProps } from './Grid';
+export { default as Position, Absolute, Fixed, Relative, Sticky } from './Position';
+export type { PositionProps, AbsoluteProps, FixedProps, RelativeProps, StickyProps } from './Position';
+export { default as useDetails } from './hooks/useDetails';
+export { default as useSafeTimeout } from './hooks/useSafeTimeout';
+export { useOnOutsideClick } from './hooks/useOnOutsideClick';
+export { useOpenAndCloseFocus } from './hooks/useOpenAndCloseFocus';
+export { useOnEscapePress } from './hooks/useOnEscapePress';
+export { useOverlay } from './hooks/useOverlay';
+export { useConfirm } from './Dialog/ConfirmationDialog';
+export { ActionList } from './ActionList';
+export { ActionMenu } from './ActionMenu';
+export type { ActionMenuProps } from './ActionMenu';
+export { default as Autocomplete } from './Autocomplete';
+export type { AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps } from './Autocomplete';
+export { default as Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+export { default as AvatarPair } from './AvatarPair';
+export type { AvatarPairProps } from './AvatarPair';
+export { default as AvatarStack } from './AvatarStack';
+export type { AvatarStackProps } from './AvatarStack';
+export { default as BranchName } from './BranchName';
+export type { BranchNameProps } from './BranchName';
+export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbsItemProps, BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumbs';
+export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
+export { NewButton } from './NewButton';
+export type { NewButtonProps } from './NewButton';
+export type { ButtonProps, ButtonDangerProps, ButtonOutlineProps, ButtonPrimaryProps, ButtonInvisibleProps, ButtonTableListProps, ButtonCloseProps, ButtonGroupProps } from './Button';
+export { default as Caret } from './Caret';
+export type { CaretProps } from './Caret';
+export { default as CircleBadge } from './CircleBadge';
+export type { CircleBadgeProps, CircleBadgeIconProps } from './CircleBadge';
+export { default as CircleOcticon } from './CircleOcticon';
+export type { CircleOcticonProps } from './CircleOcticon';
+export { default as CounterLabel } from './CounterLabel';
+export type { CounterLabelProps } from './CounterLabel';
+export { default as Details } from './Details';
+export type { DetailsProps } from './Details';
+export { default as Dialog } from './Dialog';
+export type { DialogProps, DialogHeaderProps } from './Dialog';
+export { ConfirmationDialog } from './Dialog/ConfirmationDialog';
+export { default as Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownCaretProps, DropdownButtonProps, DropdownItemProps, DropdownMenuProps } from './Dropdown';
+export { DropdownButton, DropdownMenu } from './DropdownMenu';
+export { default as FilteredSearch } from './FilteredSearch';
+export type { FilteredSearchProps } from './FilteredSearch';
+export { default as FilterList } from './FilterList';
+export type { FilterListProps, FilterListItemProps } from './FilterList';
+export { default as Flash } from './Flash';
+export type { FlashProps } from './Flash';
+export { default as FormGroup } from './FormGroup';
+export type { FormGroupProps, FormGroupLabelProps } from './FormGroup';
+export { default as Header } from './Header';
+export type { HeaderProps, HeaderItemProps, HeaderLinkProps } from './Header';
+export { default as Heading } from './Heading';
+export type { HeadingProps } from './Heading';
+export { default as LabelGroup } from './LabelGroup';
+export type { LabelGroupProps } from './LabelGroup';
+export { default as Label } from './Label';
+export type { LabelProps } from './Label';
+export { default as Link } from './Link';
+export type { LinkProps } from './Link';
+export { default as Overlay } from './Overlay';
+export type { OverlayProps } from './Overlay';
+export { default as Pagehead } from './Pagehead';
+export type { PageheadProps } from './Pagehead';
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+export { default as PointerBox } from './PointerBox';
+export type { PointerBoxProps } from './PointerBox';
+export { default as Popover } from './Popover';
+export type { PopoverProps, PopoverContentProps } from './Popover';
+export { default as ProgressBar } from './ProgressBar';
+export type { ProgressBarProps } from './ProgressBar';
+export { default as SelectMenu } from './SelectMenu';
+export type { SelectMenuProps, SelectMenuDividerProps, SelectMenuFilterProps, SelectMenuFooterProps, SelectMenuItemProps, SelectMenuListProps, SelectMenuModalProps, SelectMenuTabsProps, SelectMenuHeaderProps, SelectMenuTabProps, SelectMenuTabPanelProps, SelectMenuLoadingAnimationProps } from './SelectMenu';
+export { default as SideNav } from './SideNav';
+export type { SideNavProps, SideNavLinkProps } from './SideNav';
+export { default as Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+export { default as StateLabel } from './StateLabel';
+export type { StateLabelProps } from './StateLabel';
+export { default as StyledOcticon } from './StyledOcticon';
+export type { StyledOcticonProps } from './StyledOcticon';
+export { default as SubNav } from './SubNav';
+export type { SubNavProps, SubNavLinkProps, SubNavLinksProps } from './SubNav';
+export { default as TabNav } from './TabNav';
+export type { TabNavProps, TabNavLinkProps } from './TabNav';
+export { default as TextInput } from './TextInput';
+export type { TextInputProps } from './TextInput';
+export { default as TextInputWithTokens } from './TextInputWithTokens';
+export type { TextInputWithTokensProps } from './TextInputWithTokens';
+export { default as Text } from './Text';
+export type { TextProps } from './Text';
+export { default as Timeline } from './Timeline';
+export type { TimelineProps, TimelineBadgeProps, TimelineBodyProps, TimelineBreakProps, TimelineItemsProps } from './Timeline';
+export { default as Token, IssueLabelToken, AvatarToken } from './Token';
+export { default as Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+export { default as Truncate } from './Truncate';
+export type { TruncateProps } from './Truncate';
+export { default as UnderlineNav } from './UnderlineNav';
+export type { UnderlineNavProps, UnderlineNavLinkProps } from './UnderlineNav';
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { SSRProvider, useSSRSafeId } from './utils/ssr';

package/lib/src/polyfills/eventListenerSignal.d.ts

@@ -0,0 +1,6 @@
+export declare function polyfill(): void;
+declare global {
+    interface AddEventListenerOptions {
+        signal?: AbortSignal;
+    }
+}

package/lib/src/sx.d.ts

@@ -0,0 +1,14 @@
+import { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
+import { ThemeColorPaths, ThemeShadowPaths } from './theme';
+import { ColorProps, ShadowProps } from 'styled-system';
+import merge from 'deepmerge';
+export declare type BetterCssProperties = {
+    [K in keyof SystemCssProperties]: K extends keyof ColorProps ? ThemeColorPaths | SystemCssProperties[K] : K extends keyof ShadowProps ? ThemeShadowPaths | SystemCssProperties[K] : SystemCssProperties[K];
+};
+export declare type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject;
+export interface SxProp {
+    sx?: BetterSystemStyleObject;
+}
+declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
+export default sx;
+export { merge };

package/lib/src/theme-preval.d.ts

@@ -0,0 +1,49 @@
+export namespace theme {
+    export { animation };
+    export { borderWidths };
+    export { breakpoints };
+    export { fonts };
+    export { fontSizes };
+    export { fontWeights };
+    export { lineHeights };
+    export { radii };
+    export { sizes };
+    export { space };
+    export { colorSchemes };
+}
+declare namespace animation {
+    const easeOutCubic: string;
+}
+declare const borderWidths: (string | number)[];
+declare const breakpoints: string[];
+declare namespace fonts {
+    const normal: any;
+    const mono: any;
+}
+declare const fontSizes: string[];
+declare namespace fontWeights {
+    export const light: number;
+    const normal_1: number;
+    export { normal_1 as normal };
+    export const semibold: number;
+    export const bold: number;
+}
+declare const lineHeights: {
+    condensedUltra: number;
+    condensed: number;
+    default: number;
+};
+declare const radii: string[];
+declare namespace sizes {
+    const small: string;
+    const medium: string;
+    const large: string;
+    const xlarge: string;
+}
+declare const space: string[];
+/**
+ * @type Record<keyof typeof primitives.colors, Record<'colors' | 'shadows', Partial<typeof primitives.colors.light>>
+ */
+declare const colorSchemes: Record<keyof typeof primitives.colors, Record<'colors' | 'shadows', Partial<typeof primitives.colors.light>>>;
+import { default as primitives } from "@primer/primitives";
+export {};