@guardian/stand 0.0.9 → 0.0.10

package/dist/types/components/TitleText.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export declare const TitleText: ({ headingLevel, children, className, }: {
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    children: ReactNode;
+    className?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/avatar/Avatar.d.ts

@@ -0,0 +1,2 @@
+import { type AvatarProps } from './types';
+export declare function Avatar({ src, initials, alt, size, color, theme, cssOverrides, ...props }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/avatar/styles.d.ts

@@ -0,0 +1,8 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentAvatar } from '../../styleD/build/typescript/component/avatar';
+import type { Prettify } from '../../util/types';
+import type { AvatarProps } from './types';
+export type AvatarTheme = Prettify<ComponentAvatar>;
+export declare const defaultAvatarTheme: AvatarTheme;
+export declare const avatarImageStyles: SerializedStyles;
+export declare const avatarStyles: (theme: AvatarTheme, { size, color }: Required<Pick<AvatarProps, 'size' | 'color'>>) => SerializedStyles;

package/dist/types/components/avatar/types.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentAvatar } from '../../styleD/build/typescript/component/avatar';
+import type { DefaultProps } from '../../util/types';
+import type { AvatarTheme } from './styles';
+export type AvatarColors = keyof ComponentAvatar['shared']['color'];
+export declare const avatarColors: AvatarColors[];
+interface AvatarBaseProps extends DefaultProps<AvatarTheme> {
+    /**
+     * Size variant of the avatar
+     */
+    size?: keyof Omit<AvatarTheme, 'shared'>;
+    /**
+     * Color variant of the avatar
+     */
+    color?: AvatarColors;
+}
+interface AvatarWithImage extends AvatarBaseProps {
+    /**
+     * Image URL for the avatar
+     */
+    src: string;
+    /**
+     * Alternative text for the image (required when src is provided)
+     */
+    alt: string;
+    /**
+     * Initials to display when image fails to load (optional)
+     */
+    initials?: string;
+}
+interface AvatarWithInitials extends AvatarBaseProps {
+    /**
+     * Image URL for the avatar (optional)
+     */
+    src?: never;
+    /**
+     * Alternative text for the image (optional)
+     */
+    alt?: string;
+    /**
+     * Initials to display (required, typically 1-2 characters)
+     */
+    initials: string;
+}
+export type AvatarProps = AvatarWithImage | AvatarWithInitials;
+export {};

package/dist/types/components/button/Button.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonProps } from './types';
+export declare function Button({ variant, size, theme, cssOverrides, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/button/styles.d.ts

@@ -0,0 +1,7 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentButton } from '../../styleD/build/typescript/component/button';
+import type { Prettify } from '../../util/types';
+import type { ButtonProps } from './types';
+export type ButtonTheme = Prettify<ComponentButton>;
+export declare const defaultButtonTheme: ButtonTheme;
+export declare const buttonStyles: (theme: ButtonTheme, { size, variant }: Required<Pick<ButtonProps, 'size' | 'variant'>>) => SerializedStyles;

package/dist/types/components/button/types.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonProps as RACButtonProps } from 'react-aria-components';
+import type { DefaultProps } from '../../util/types';
+import type { ButtonTheme } from './styles';
+export interface ButtonProps extends DefaultProps<ButtonTheme, RACButtonProps['className']>, RACButtonProps {
+    /**
+     * Size variant of the button
+     */
+    size?: keyof Omit<ButtonTheme['emphasised-primary'], 'shared'>;
+    /**
+     * Variant of the button
+     */
+    variant?: keyof Omit<ButtonTheme, 'shared'>;
+}

package/dist/types/components/byline/schema.d.ts

@@ -1,2 +1,2 @@
 import { Schema } from 'prosemirror-model';
-export declare const bylineEditorSchema: Schema<"doc" | "chip" | "text", any>;
+export declare const bylineEditorSchema: Schema<"text" | "doc" | "chip", any>;

package/dist/types/components/icon/Icon.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from './types';
+export declare function Icon({ children, size, fill, alt, symbol, theme, cssOverrides, className, }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/icon/styles.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentIcon } from '../../styleD/build/typescript/component/icon';
+import type { Prettify } from '../../util/types';
+import type { IconProps } from './types';
+export type IconTheme = Prettify<ComponentIcon>;
+export declare const defaultIconTheme: IconTheme;
+export declare const iconStyles: (theme: IconTheme, { size, fill, mode, }: Required<Pick<IconProps, "size">> & Pick<IconProps, "fill"> & {
+    mode: 'text' | 'svg';
+}) => import("@emotion/react").SerializedStyles;

package/dist/types/components/icon/types.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import type { MaterialSymbol } from '../../fonts/material-symbols-types';
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { IconTheme } from './styles';
+export type { MaterialSymbol } from '../../fonts/material-symbols-types';
+export interface IconProps extends DefaultPropsWithChildren<IconTheme, undefined, MaterialSymbol | Exclude<React.ReactNode, string>> {
+    /**
+     * Size variant of the icon
+     */
+    size?: keyof Omit<IconTheme, 'shared'>;
+    /**
+     * Fill/color of the icon. Default is to inherit from text color or icon defaults.
+     */
+    fill?: string;
+    /**
+     * Alternative text for the icon, used for accessibility.
+     * This must be provided if the icon is not purely decorative, and should describe the meaning or function of the icon.
+     */
+    alt?: string;
+    /**
+     * Alternative to using the `children` prop for rendering Material Symbol icons,
+     * you can use the `symbol` prop to specify the icon by its symbol name.
+     * This is a convenience for font icons, allowing you to simply provide the symbol name in a type-safe way without needing to pass it as a child string.
+     * For example, instead of `<Icon>home</Icon>`, you can use `<Icon symbol="home" />`.
+     * This prop is mutually exclusive with `children` when rendering font icons, and takes precedence over `children` if both are provided.
+     */
+    symbol?: MaterialSymbol;
+}

package/dist/types/components/link-button/LinkButton.d.ts

@@ -0,0 +1,2 @@
+import type { LinkButtonProps } from './types';
+export declare function LinkButton({ variant, size, theme, cssOverrides, ...props }: LinkButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/link-button/styles.d.ts

@@ -0,0 +1,330 @@
+import type { ButtonTheme } from '../button/styles';
+export type LinkButtonTheme = ButtonTheme;
+export declare const defaultLinkButtonTheme: ButtonTheme;
+export declare const linkButtonStyles: (theme: {
+    shared: {
+        display: string;
+        '-webkit-appearance': string;
+        'text-align': string;
+        'box-shadow': string;
+        cursor: string;
+        'justify-content': string;
+        'align-items': string;
+        'text-decoration': string;
+        ':disabled': {
+            cursor: string;
+        };
+        ':focus-visible': {
+            outline: string;
+            'outline-offset': string;
+        };
+    };
+    'emphasised-primary': {
+        shared: {
+            color: string;
+            backgroundColor: string;
+            borderRadius: string;
+            border: string;
+            ':hover': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':active': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':disabled': {
+                color: string;
+                backgroundColor: string;
+                border: string;
+            };
+        };
+        xs: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        sm: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        md: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        lg: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
+    'emphasised-secondary': {
+        shared: {
+            color: string;
+            backgroundColor: string;
+            borderRadius: string;
+            border: string;
+            ':hover': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':active': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':disabled': {
+                color: string;
+                backgroundColor: string;
+                border: string;
+            };
+        };
+        xs: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        sm: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        md: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        lg: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
+    'neutral-primary': {
+        shared: {
+            color: string;
+            backgroundColor: string;
+            borderRadius: string;
+            border: string;
+            ':hover': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':active': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':disabled': {
+                color: string;
+                backgroundColor: string;
+                border: string;
+            };
+        };
+        xs: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        sm: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        md: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        lg: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
+    'neutral-secondary': {
+        shared: {
+            color: string;
+            backgroundColor: string;
+            borderRadius: string;
+            border: string;
+            ':hover': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':active': {
+                backgroundColor: string;
+                border: string;
+            };
+            ':disabled': {
+                color: string;
+                backgroundColor: string;
+                border: string;
+            };
+        };
+        xs: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        sm: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        md: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+        lg: {
+            height: string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
+}, { size, variant }: Required<Pick<import("../button/types").ButtonProps, "size" | "variant">>) => import("@emotion/react").SerializedStyles;

package/dist/types/components/link-button/types.d.ts

@@ -0,0 +1,13 @@
+import type { LinkProps as RACLinkProps } from 'react-aria-components';
+import type { DefaultProps } from '../../util/types';
+import type { LinkButtonTheme } from './styles';
+export interface LinkButtonProps extends DefaultProps<LinkButtonTheme, RACLinkProps['className']>, RACLinkProps {
+    /**
+     * Size variant of the link button
+     */
+    size?: keyof Omit<LinkButtonTheme['emphasised-primary'], 'shared'>;
+    /**
+     * Variant of the button
+     */
+    variant?: keyof Omit<LinkButtonTheme, 'shared'>;
+}

package/dist/types/components/typography/Typography.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { TypographyProps } from './types';
+export declare const Typography: ({ element, variant, children, cssOverrides, theme, ...props }: TypographyProps) => import("react").DetailedReactHTMLElement<{
+    className?: string | undefined;
+    css: (import("@emotion/react").SerializedStyles | import("@emotion/react").SerializedStyles[] | undefined)[];
+}, HTMLElement>;

package/dist/types/components/typography/styles.d.ts

@@ -0,0 +1,7 @@
+import type { SerializedStyles } from '@emotion/react';
+import { type ComponentTypography } from '../../styleD/build/typescript/component/typography';
+import type { Prettify } from '../../util/types';
+import type { TypographyProps } from './types';
+export type TypographyTheme = Prettify<ComponentTypography>;
+export declare const defaultTypographyTheme: TypographyTheme;
+export declare const typographyStyles: (theme: TypographyTheme, { variant }: Required<Pick<TypographyProps, 'variant'>>) => SerializedStyles;

package/dist/types/components/typography/types.d.ts

@@ -0,0 +1,13 @@
+import type { SemanticTypography } from '../..';
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { TypographyTheme } from './styles';
+export interface TypographyProps extends DefaultPropsWithChildren<TypographyTheme> {
+    /**
+     * HTML element to render with font applied to
+     */
+    element?: 'div' | 'span' | 'p' | 'b' | 'i' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Font variant to apply as a CSS style to the element
+     */
+    variant?: keyof SemanticTypography;
+}

package/dist/types/components/user-menu/PreferenceRadioGroup.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentUserMenu } from '../../styleD/build/typescript/component/userMenu';
+import type { DeepPartial } from '../../util/types';
+import type { Option } from './model';
+interface PreferenceRadioGroupProps {
+    theme?: DeepPartial<ComponentUserMenu>;
+    options: Option[];
+    name: string;
+    currentValue?: string;
+    changeValue: {
+        (value: string): void;
+    };
+    format?: 'stack' | 'rows';
+}
+export declare function PreferenceRadioGroup({ name, options, currentValue, changeValue, theme, format, }: PreferenceRadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/user-menu/UserMenu.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentUserMenu } from '../../styleD/build/typescript/component/userMenu';
+import type { DeepPartial } from '../../util/types';
+import type { Option } from './model';
+import type { UserPreferences } from './types';
+export interface UserMenuProps {
+    theme?: DeepPartial<ComponentUserMenu>;
+    feedBacklink?: string;
+    preferences: UserPreferences;
+    updatePreferences: {
+        (mod: Partial<UserPreferences>): void;
+    };
+    textSizeOptions?: Option[];
+    fontFamilyOptions?: Option[];
+    colorSchemeOptions?: Option[];
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+export declare function UserMenu({ theme, feedBacklink, preferences, updatePreferences, textSizeOptions, fontFamilyOptions, colorSchemeOptions, headingLevel, }: UserMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/user-menu/default-options.d.ts

@@ -0,0 +1,5 @@
+import type { Option } from './model';
+declare const textSizes: Option[];
+declare const fontFamilies: Option[];
+declare const colorSchemes: Option[];
+export { colorSchemes, fontFamilies, textSizes };

package/dist/types/components/user-menu/model.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+export type Option = {
+    id: string;
+    label?: string;
+    description?: string;
+    labelStyle?: CSSProperties;
+    buttonStyle?: CSSProperties;
+    isDefault?: boolean;
+};

package/dist/types/components/user-menu/styles.d.ts

@@ -0,0 +1,9 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentUserMenu } from '../../styleD/build/typescript/component/userMenu';
+import type { DeepPartial } from '../../util/types';
+export declare const userMenuStyles: (partialTheme?: DeepPartial<ComponentUserMenu>) => SerializedStyles;
+export declare const userMenuHeadingStyles: (partialTheme?: DeepPartial<ComponentUserMenu>) => SerializedStyles;
+export declare const toggleButtonStackedGroupStyles: (partialTheme?: DeepPartial<ComponentUserMenu>) => SerializedStyles;
+export declare const radioGroupLabelStyles: (partialTheme?: DeepPartial<ComponentUserMenu>) => SerializedStyles;
+export declare const toggleButtonRowsGroupStyles: (partialTheme?: DeepPartial<ComponentUserMenu>) => SerializedStyles;
+export declare const toggleButtonStyles: (partialTheme?: DeepPartial<ComponentUserMenu>) => SerializedStyles;

package/dist/types/components/user-menu/theme.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentUserMenu } from '../../styleD/build/typescript/component/userMenu';
+import type { DeepPartial } from '../../util/types';
+export type PartialUserMenuTheme = DeepPartial<ComponentUserMenu>;

package/dist/types/components/user-menu/types.d.ts

@@ -0,0 +1,5 @@
+export type UserPreferences = {
+    fontpreferences?: string;
+    colorScheme?: string;
+    fontType?: string;
+};