@guardian/stand 0.0.8 → 0.0.10

package/dist/tag-picker.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var TagTable = require('./components/tag-picker/TagTable.cjs');
+var TagAutocomplete = require('./components/tag-picker/TagAutocomplete.cjs');
+var tagTable = require('./styleD/build/typescript/component/tagTable.cjs');
+var tagAutocomplete = require('./styleD/build/typescript/component/tagAutocomplete.cjs');
+
+
+
+exports.TagTable = TagTable.TagTable;
+exports.TagAutocomplete = TagAutocomplete.TagAutocomplete;
+exports.componentTagTable = tagTable.componentTagTable;
+exports.componentTagAutocomplete = tagAutocomplete.componentTagAutocomplete;

package/dist/tag-picker.js

@@ -0,0 +1,4 @@
+export { TagTable } from './components/tag-picker/TagTable.js';
+export { TagAutocomplete } from './components/tag-picker/TagAutocomplete.js';
+export { componentTagTable } from './styleD/build/typescript/component/tagTable.js';
+export { componentTagAutocomplete } from './styleD/build/typescript/component/tagAutocomplete.js';

package/dist/types/avatar.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Avatar component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/avatar.css),
+ * you don't need to install these.
+ */
+export { Avatar } from './components/avatar/Avatar';
+export type { AvatarProps } from './components/avatar/types';
+export type { AvatarTheme } from './components/avatar/styles';
+export { componentAvatar } from './styleD/build/typescript/component/avatar';
+export type { ComponentAvatar } from './styleD/build/typescript/component/avatar';

package/dist/types/button.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Button component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `react-aria-components`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/button.css),
+ * you don't need to install these.
+ */
+export { Button } from './components/button/Button';
+export type { ButtonProps } from './components/button/types';
+export type { ButtonTheme } from './components/button/styles';
+export { componentButton } from './styleD/build/typescript/component/button';
+export type { ComponentButton } from './styleD/build/typescript/component/button';

package/dist/types/byline.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Byline component entry point
+ *
+ * Peer dependencies required to use this component:
+ * - `@emotion/react`
+ * - `@guardian/prosemirror-invisibles`
+ * - `prosemirror-dropcursor`
+ * - `prosemirror-history`
+ * - `prosemirror-keymap`
+ * - `prosemirror-model`
+ * - `prosemirror-state`
+ * - `prosemirror-view`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/byline.css), you don't need to install these.
+ */
+export { Byline } from './components/byline/Byline';
+export type { BylineModel } from './components/byline/lib';
+export type { PartialBylineTheme } from './components/byline/theme';
+export { componentByline } from './styleD/build/typescript/component/byline';
+export type { ComponentByline } from './styleD/build/typescript/component/byline';

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/Byline.d.ts

@@ -1,6 +1,6 @@
 import type { FocusEventHandler } from 'react';
 import type { ComponentByline } from '../../styleD/build/typescript/component/byline';
-import type { DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 import type { BylineModel, TaggedContributor } from './lib';
 type BylineProps = {
     /** `theme` - Used to customise the look and feel of the Byline component */

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/byline/styles.d.ts

@@ -1,7 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { Node } from 'prosemirror-model';
 import { type ComponentByline } from '../../styleD/build/typescript/component/byline';
-import type { DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 export declare const bylineContainerStyles: SerializedStyles;
 export declare const bylineEditorStyles: (partialTheme?: DeepPartial<ComponentByline>) => SerializedStyles;
 export declare const dropdownContainerStyles: (showDropdown: boolean, partialTheme?: DeepPartial<ComponentByline['dropdown']>) => SerializedStyles;

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

@@ -1,3 +1,3 @@
 import type { ComponentByline } from '../../styleD/build/typescript/component/byline';
-import type { DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 export type PartialBylineTheme = DeepPartial<ComponentByline>;

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/tag-picker/TagAutocomplete.d.ts

@@ -1,7 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ReactElement } from 'react';
 import type { ComponentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete';
-import type { DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 import type { Tag } from './types';
 interface TagAutocompleteProps<T extends Tag = Tag> {
     /** `addTag` - Function called when an option is picked from the dropdown */

package/dist/types/components/tag-picker/TagTable.d.ts

@@ -2,7 +2,7 @@ import type { SerializedStyles } from '@emotion/react';
 import { type ReactElement } from 'react';
 import { Row } from 'react-aria-components';
 import type { ComponentTagTable } from '../../styleD/build/typescript/component/tagTable';
-import type { DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 import type { TagRow } from './types';
 type Row = TagRow | {
     tag: TagRow;

package/dist/types/components/tag-picker/styles.d.ts

@@ -1,7 +1,7 @@
 import type { SerializedStyles } from '@emotion/react';
 import { type ComponentTagAutocomplete } from '../../styleD/build/typescript/component/tagAutocomplete';
 import { type ComponentTagTable } from '../../styleD/build/typescript/component/tagTable';
-import { type DeepPartial } from '../util';
+import type { DeepPartial } from '../../util/types';
 export declare const tagAutocompleteInputStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
 export declare const listboxStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;
 export declare const listboxItemStyles: (partialTheme?: DeepPartial<ComponentTagAutocomplete>) => SerializedStyles;

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;
+}