@arc-ui/components 10.8.0 → 11.0.0

package/dist/_shared/esm/Image-7e4948f6.d.ts

@@ -0,0 +1,94 @@
+import { FC, HTMLAttributes, ReactNode } from "react";
+import { anchorPoints } from "./index-9483ad5f";
+/**
+ * Use `Image` to render a single image, or set of images, with support for
+ * image fitting and art direction.
+ */
+declare const Image: FC<ImageProps> & {
+    Source: typeof ImageSource;
+};
+declare const ImageSource: FC<ImageSourceProps>;
+interface ImageSourceProps {
+    /**
+     * The intrinsic height of the ImageSource, in pixels
+     */
+    height?: number;
+    /**
+     * Media condition (similar to a media query) that the user agent will evaluate for each ImageSource element. Same format as [media](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-media), i.e. `(min-width: 600px)`
+     */
+    media?: string;
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-sizes) attribute. Only required if srcSet is switching widths.
+     */
+    sizes?: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the ImageSource element. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-srcset), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    srcSet: string;
+    /**
+     * MIME type for the resource URL(s) in the ImageSource element's srcset attribute. If the user agent does not support the given type, the element is skipped. Same format as [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attr-type), i.e. `image/jpeg`.
+     */
+    type?: string;
+    /**
+     * The intrinsic width of the ImageSource, in pixels
+     */
+    width?: number;
+}
+declare const fitOptions: readonly ["cover"];
+declare const loadingOptions: readonly ["eager", "lazy"];
+declare const overlayOptions: readonly ["scrimBottomDark"];
+interface ImageProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Alternative text for the Image, shown if the image cannot be displayed.
+     */
+    alt?: string;
+    /**
+     * Anchor point for the Image if using fit="cover".
+     */
+    anchor?: typeof anchorPoints[number];
+    /**
+     * Optionally enable HTML <picture> functionality by passing `Image.Source`
+     * components as children.
+     */
+    children?: ReactNode;
+    /**
+     * Fallback hexadecimal fill color. The intent is to increase perceived loading speed. Do not use on images with transparency. Requires that an explicit width and height be set for the image.
+     */
+    fillColor?: string;
+    /**
+     * Fit of the Image.
+     */
+    fit?: typeof fitOptions[number];
+    /**
+     * Height dimension of the Image, in pixels. If fit="cover", the height in which
+     * to fit the Image. Otherwise, the intrinsic height of the Image element.
+     */
+    height?: number;
+    /**
+     * Loading behaviour of the Image.
+     */
+    loading?: typeof loadingOptions[number];
+    /**
+     * Apply an overlay to the Image, e.g. a scrim gradient for text legibility.
+     * Should not be used if the image has a rasterized overlay.
+     */
+    overlay?: typeof overlayOptions[number];
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute. Only required if srcSet is switching widths. Ignored if `children` (<source> elements) are present.
+     */
+    sizes?: string;
+    /**
+     * Image `src`. Used if srcSet is not defined, or as a fallback.
+     */
+    src: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`. Ignored if `children` (<source> elements) are present.
+     */
+    srcSet?: string;
+    /**
+     * Width dimension of the Image, in pixels. If fit="cover", the width in which
+     * to fit the Image. Otherwise, the intrinsic width of the Image element.
+     */
+    width?: number;
+}
+export { Image, ImageSource, ImageSourceProps, fitOptions, loadingOptions, overlayOptions, ImageProps };

package/dist/_shared/{Image-a3225049.js → esm/Image-7e4948f6.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { useEffect } from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
 
 /**
  * Use `Image` to render a single image, or set of images, with support for

package/dist/_shared/esm/Section-f1256c87.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Section` to compose content into vertical page layouts.
+ */
+declare const Section: FC<SectionProps>;
+interface SectionProps {
+    /**
+     * Content to display in the Section.
+     */
+    children: ReactNode;
+    /**
+     * Should the Section be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Should the width of this Section be unconstrained (filling the viewport)?
+     */
+    isFullWidth?: boolean;
+}
+export { Section, SectionProps };

package/dist/_shared/{Section-927988cb.js → esm/Section-f1256c87.js}

@@ -1,5 +1,5 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React from 'react';
 
 /**

package/dist/_shared/esm/Surface-d515d212.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, HTMLAttributes } from "react";
+type SurfaceBackground = "light" | "dark";
+declare const Context: React.Context<{
+    surface: SurfaceBackground;
+}>;
+/**
+ * Use `Surface` to compose content using the Arc system.
+ */
+declare const Surface: FC<SurfaceProps>;
+declare const backgrounds: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
+declare const backgroundsBT: readonly ["black", "brand", "brand-flat", "dark", "darker", "coral", "turquoise", "light", "lighter", "white"];
+type SurfacePadding = "8" | "12" | "16" | "24" | "32" | "48" | "64";
+interface SurfaceProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Background colour of the Surface. Contents will change colour to meet
+     * accessibility requirements.
+     */
+    background?: typeof backgrounds[number];
+    /**
+     * Content to display on the Surface.
+     */
+    children?: any;
+    /**
+     * Should the Surface grow to take up all the available vertical space? Most
+     * of the time this should not be required, but useful to fix issues in
+     * certain layout combinations.
+     */
+    growVertically?: boolean;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the padding applied to all sides of the Surface. Use to prevent margin collapsing issues.
+     */
+    padding?: SurfacePadding;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the horizontal padding applied to the left and right of the Surface.
+     */
+    paddingHorizontal?: SurfacePadding;
+    /**
+     * _Caution: This is an experimental property and may be removed at any time._
+     *
+     * Size of the vertical padding applied to the top and bottom of the Surface.
+     */
+    paddingVertical?: SurfacePadding;
+}
+export { Surface, backgrounds, backgroundsBT, SurfacePadding, SurfaceProps, Context as SurfaceContext };

package/dist/_shared/{Surface-3fe44a2a.js → esm/Surface-d515d212.js}

@@ -1,5 +1,5 @@
-import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { b as __spreadArray, _ as __rest, a as __assign, c as camelCase, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { createContext } from 'react';
 
 var defaultContext = { surface: "light" };

package/dist/_shared/esm/Text-d8988620.d.ts

@@ -0,0 +1,34 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Text` to display text.
+ */
+declare const Text: FC<TextProps>;
+type Tone = "default" | "supporting" | "muted";
+type TextSize = "xs" | "s" | "m" | "l";
+interface TextProps {
+    /**
+     * Alignment of the Text.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Text and inline markup to display.
+     */
+    children: ReactNode;
+    /**
+     * Should the Text component be styled as an inline element?
+     */
+    isInline?: boolean;
+    /**
+     * Should the Text width be constrained to a typographic measure?
+     */
+    isMeasured?: boolean;
+    /**
+     * Typographic Text size.
+     */
+    size?: TextSize;
+    /**
+     * Visual emphasis of the Text.
+     */
+    tone?: Tone;
+}
+export { Text, Tone, TextSize, TextProps };

package/dist/_shared/{Text-1c43d82b.js → esm/Text-d8988620.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
-import { C as Context } from './Surface-3fe44a2a.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { C as Context } from './Surface-d515d212.js';
 
 /**
  * Use `Text` to display text.

package/dist/_shared/esm/arc-icon-17594b2f.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SVGProps } from "react";
+type ArcIcon = React.FC<SVGProps<SVGSVGElement>>;
+export { ArcIcon };

package/dist/_shared/esm/handle-link-click-f64f55a2.d.ts

@@ -0,0 +1,7 @@
+import { MouseEvent } from "react";
+interface IHandleLinkClick {
+    handler?: () => void;
+    preventDefault?: boolean;
+}
+declare const handleLinkClick: ({ handler, preventDefault }: IHandleLinkClick) => (e: MouseEvent<HTMLAnchorElement>) => void;
+export { handleLinkClick };

package/dist/_shared/esm/index-229fc864.d.ts

@@ -0,0 +1,2 @@
+declare const filterDataAttrs: (props: Object) => {};
+export { filterDataAttrs };

package/dist/_shared/esm/index-9483ad5f.d.ts

@@ -0,0 +1,14 @@
+declare const anchorPoints: readonly [
+    "N",
+    "NE",
+    "E",
+    "SE",
+    "S",
+    "SW",
+    "W",
+    "NW",
+    "C"
+];
+export { anchorPoints };
+export * from "./index-229fc864";
+export * from "./suffix-modifier-f5e28822";

package/dist/_shared/esm/index-c81c9401.d.ts

@@ -0,0 +1,4 @@
+export * from "./FormControl-feedc495";
+export * from "../../Card/Card.esm";
+export * from "./index.es-00cb3bcb";
+export * from "../../TextInput/TextInput.esm";

package/dist/_shared/esm/index.es-00cb3bcb.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @typedef MediaQueryOutputs
+ * @param {boolean} matches - does the document match the media query?
+ */
+/**
+ * Handle with care!
+ *
+ * If you need to change something in the browser based on @media query, you
+ * probably don’t need this hook. Use CSS media queries instead.
+ *
+ * Sometimes UI requirements are not achievable with CSS media queries alone. In
+ * these rare cases, use this hook to make media query matches available
+ * to React JavaScript code.
+ *
+ * @param {string} mediaQuery - the media query to parse
+ * @returns {MediaQueryOutputs}
+ */
+declare const useMediaQuery: (mediaQuery: string) => boolean;
+export { useMediaQuery as default };

package/dist/_shared/{use-media-query-f11805d4.js → esm/index.es-00cb3bcb.js}

@@ -36,4 +36,11 @@ var useMediaQuery = function (mediaQuery) {
     return matches;
 };
 
-export { useMediaQuery as u };
+/**
+ * Do not edit directly
+ * Generated file
+ */
+var ArcBreakpointM = 768;
+var ArcBreakpointL = 1024;
+
+export { ArcBreakpointM as A, ArcBreakpointL as a, useMediaQuery as u };

package/dist/_shared/esm/suffix-modifier-f5e28822.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Suffixes a modifier value onto the end of a className, converting it to
+ * pascal case. i.e. turns suffixModifier("MyComponent--display", display)
+ * returns MyComponent--displayBlock.
+ *
+ * @param rootClassName The root className to append the suffix onto
+ * @param suffix The suffix to convert into pascal case.
+ */
+declare const suffixModifier: (rootClassName: string, suffix: string) => string;
+export { suffixModifier };

package/dist/_shared/{suffix-modifier-2a93822c.js → esm/suffix-modifier-f5e28822.js}

@@ -1,4 +1,4 @@
-import { c as camelCase } from './index-e3c83626.js';
+import { c as camelCase } from './index-229fc864.js';
 
 /**
  * Suffixes a modifier value onto the end of a className, converting it to