@omni-design/components 0.14.0 → 0.14.2

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

@@ -0,0 +1,16 @@
+export function FieldGroup({ children, label, type, moreInfo, helperText, showHelper, validation, validationMessage, orientation, disabled, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    label: any;
+    type?: string;
+    moreInfo: any;
+    helperText: any;
+    showHelper?: boolean;
+    validation?: string;
+    validationMessage: any;
+    orientation?: string;
+    disabled?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export default FieldGroup;

package/dist/types/components/FieldGroup/index.d.ts

@@ -0,0 +1 @@
+export { FieldGroup, default } from "./FieldGroup";

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

@@ -0,0 +1,29 @@
+/**
+ * The ids a field should hand to its control, already in announcement order.
+ *
+ * Returns `{ helperId, messageId, describedBy }`. `describedBy` is undefined
+ * when there is nothing to describe, so it can be spread without producing an
+ * empty attribute.
+ */
+export function useFormHelperIds({ showHelper, validation }?: {
+    showHelper?: boolean;
+    validation?: string;
+}): {
+    helperId: string;
+    messageId: string;
+    describedBy: string;
+};
+export function FormHelper({ helperText, showHelper, validation, validationMessage, withIcon, helperId, messageId, className, sx, ...props }: {
+    [x: string]: any;
+    helperText: any;
+    showHelper?: boolean;
+    validation?: string;
+    validationMessage: any;
+    withIcon?: boolean;
+    helperId: any;
+    messageId: any;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export const FORM_HELPER_VALIDATIONS: string[];
+export default FormHelper;

package/dist/types/components/FormHelper/index.d.ts

@@ -0,0 +1 @@
+export { FormHelper, FORM_HELPER_VALIDATIONS, useFormHelperIds, default } from "./FormHelper";

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

@@ -0,0 +1,16 @@
+export function FormLabel({ children, htmlFor, type, as, moreInfo, disabled, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    htmlFor: any;
+    type?: string;
+    as?: string;
+    moreInfo: any;
+    disabled?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export namespace FORM_LABEL_MARKERS {
+    let required: string;
+    let optional: string;
+}
+export default FormLabel;

package/dist/types/components/FormLabel/index.d.ts

@@ -0,0 +1 @@
+export { FormLabel, FORM_LABEL_MARKERS, default } from "./FormLabel";

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

@@ -0,0 +1,20 @@
+export function InputMessage({ children, type, withIcon, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    type?: string;
+    withIcon?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export namespace MESSAGE_ICONS {
+    export { ErrorIcon as error };
+    export { WarningIcon as warning };
+    export { CheckCircleIcon as success };
+    export { InfoIcon as info };
+}
+export const INPUT_MESSAGE_TYPES: string[];
+export default InputMessage;
+import ErrorIcon from '@mui/icons-material/Error';
+import WarningIcon from '@mui/icons-material/Warning';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import InfoIcon from '@mui/icons-material/Info';

package/dist/types/components/InputMessage/index.d.ts

@@ -0,0 +1 @@
+export { InputMessage, INPUT_MESSAGE_TYPES, MESSAGE_ICONS, default } from "./InputMessage";

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

@@ -0,0 +1,33 @@
+/**
+ * Seconds as m:ss, or h:mm:ss once it runs past an hour.
+ *
+ * Written out rather than taken from Intl, because `Intl.NumberFormat` cannot
+ * do it and `Date` would need a timezone to not matter — and a track is a
+ * DURATION, not a time of day. The hour branch exists because a podcast is the
+ * ordinary case for a player like this, and 73:04 is not a readable number.
+ */
+export function formatTime(seconds: any): string;
+export function Player({ title, subtitle, avatarSrc, avatarInitials, position, defaultPosition, duration, onSeek, playing, defaultPlaying, onPlayPause, onPrevious, onNext, variant, size, disabled, showTime, className, sx, "aria-label": ariaLabel, ...props }: {
+    [x: string]: any;
+    title: any;
+    subtitle: any;
+    avatarSrc: any;
+    avatarInitials: any;
+    position: any;
+    defaultPosition?: number;
+    duration?: number;
+    onSeek: any;
+    playing: any;
+    defaultPlaying?: boolean;
+    onPlayPause: any;
+    onPrevious: any;
+    onNext: any;
+    variant?: string;
+    size?: string;
+    disabled?: boolean;
+    showTime?: boolean;
+    className?: string;
+    sx?: {};
+    "aria-label"?: string;
+}): JSX.Element;
+export default Player;

package/dist/types/components/Player/index.d.ts

@@ -0,0 +1 @@
+export { Player, formatTime, default } from "./Player";

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

@@ -18,13 +18,14 @@ export function Radio({ theme, surface, color, size, label, labelPlacement, chec
     "aria-describedby": any;
     inputProps?: {};
 }): JSX.Element;
-export function RadioGroup({ color, size, label, options, value, onChange, orientation, labelPlacement, disabled, spacing, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: {
+export function RadioGroup({ color, size, label, options, value, defaultValue, onChange, orientation, labelPlacement, disabled, spacing, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: {
     [x: string]: any;
     color?: string;
     size?: string;
     label: any;
     options?: any[];
     value: any;
+    defaultValue: any;
     onChange: any;
     orientation?: string;
     labelPlacement?: string;

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

@@ -1,4 +1,4 @@
-export function Select({ options, value: controlledValue, defaultValue, onChange, label, labelPosition, size, variant, color, selectionStyle, mode, placeholder, showDividers, showColorLabels, startDecoration, disabled, fullWidth, className, sx, ...props }: {
+export function Select({ options, value: controlledValue, defaultValue, onChange, label, labelPosition, size, variant, color, selectionStyle, mode, placeholder, showDividers, showColorLabels, startDecoration, disabled, fullWidth, minWidth, className, sx, ...props }: {
     [x: string]: any;
     options?: any[];
     value: any;
@@ -17,6 +17,7 @@ export function Select({ options, value: controlledValue, defaultValue, onChange
     startDecoration: any;
     disabled?: boolean;
     fullWidth?: boolean;
+    minWidth?: number;
     className?: string;
     sx?: {};
 }): JSX.Element;

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

@@ -0,0 +1,12 @@
+export function Sheet({ children, surface, variant, color, elevated, component, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    surface?: string;
+    variant: any;
+    color?: string;
+    elevated?: boolean;
+    component?: string;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export default Sheet;

package/dist/types/components/Sheet/SheetShowcase.d.ts

@@ -0,0 +1,2 @@
+export function SheetShowcase(): JSX.Element;
+export default SheetShowcase;

package/dist/types/components/Sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { SheetShowcase } from "./SheetShowcase";
+export { Sheet, default } from "./Sheet";

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

@@ -1,10 +1,12 @@
-export function SpeedDial({ actions, variant, color, direction, speed, showTooltips, open: controlledOpen, onOpen, onClose, icon, ariaLabel, className, sx, ...props }: {
+export function SpeedDial({ actions, variant, color, direction, size, speed, openOnHover, showTooltips, open: controlledOpen, onOpen, onClose, icon, ariaLabel, className, sx, ...props }: {
     [x: string]: any;
     actions?: any[];
     variant?: string;
     color?: string;
     direction?: string;
+    size?: string;
     speed?: number;
+    openOnHover?: boolean;
     showTooltips?: boolean;
     open: any;
     onOpen: any;

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

@@ -1,8 +1,9 @@
-export function Swatch({ color, label, size, selected, disabled, radio, onClick, className, sx, "aria-label": ariaLabel, ...props }: {
+export function Swatch({ color, label, size, fit, selected, disabled, radio, onClick, className, sx, "aria-label": ariaLabel, ...props }: {
     [x: string]: any;
     color: any;
     label: any;
     size?: string;
+    fit?: string;
     selected?: boolean;
     disabled?: boolean;
     radio?: boolean;

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

@@ -0,0 +1,11 @@
+export function TextAreaField({ label, type, moreInfo, id: idProp, disabled, className, sx, ...props }: {
+    [x: string]: any;
+    label: any;
+    type?: string;
+    moreInfo: any;
+    id: any;
+    disabled?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export default TextAreaField;

package/dist/types/components/TextAreaField/index.d.ts

@@ -0,0 +1 @@
+export { TextAreaField, default } from "./TextAreaField";

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

@@ -1,4 +1,4 @@
-export function Toolbar({ items, value: controlledValue, defaultValue, onChange, type, orientation, color, fab, className, sx, ...props }: {
+export function Toolbar({ items, value: controlledValue, defaultValue, onChange, type, orientation, color, surface, fab, className, sx, ...props }: {
     [x: string]: any;
     items?: any[];
     value: any;
@@ -7,8 +7,11 @@ export function Toolbar({ items, value: controlledValue, defaultValue, onChange,
     type?: string;
     orientation?: string;
     color?: string;
+    surface: any;
     fab: any;
     className?: string;
     sx?: {};
 }): JSX.Element;
+export const TOOLBAR_COLORS: string[];
+export const TOOLBAR_SURFACES: string[];
 export default Toolbar;

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

@@ -0,0 +1,17 @@
+export function TransferList({ theme, surface, leftItems: controlledLeft, rightItems: controlledRight, defaultLeftItems, defaultRightItems, onChange, leftTitle, rightTitle, mode, disabled, className, sx, ...props }: {
+    [x: string]: any;
+    theme: any;
+    surface: any;
+    leftItems: any;
+    rightItems: any;
+    defaultLeftItems?: any[];
+    defaultRightItems?: any[];
+    onChange: any;
+    leftTitle?: string;
+    rightTitle?: string;
+    mode?: string;
+    disabled?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export default TransferList;

package/dist/types/components/TransferList/TransferListShowcase.d.ts

@@ -0,0 +1,2 @@
+export function TransferListShowcase(): JSX.Element;
+export default TransferListShowcase;

package/dist/types/components/TransferList/index.d.ts

@@ -0,0 +1,2 @@
+export { TransferListShowcase } from "./TransferListShowcase";
+export { TransferList, default } from "./TransferList";

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

@@ -271,6 +271,16 @@ export const STYLE_MAP: {
         defaultColor: string;
         defaultWidth: string;
     };
+    'mobile-nav-label': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
     'label-extra-small': {
         component: string;
         fontFamily: string;
@@ -520,6 +530,7 @@ export function BodyLargeSemibold(p: any): JSX.Element;
 export function BodyLargeBold(p: any): JSX.Element;
 export function Caption(p: any): JSX.Element;
 export function CaptionBold(p: any): JSX.Element;
+export function MobileNavLabel(p: any): JSX.Element;
 export function LabelExtraSmall(p: any): JSX.Element;
 export function LabelSmall(p: any): JSX.Element;
 export function Label(p: any): JSX.Element;

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

@@ -1,2 +1,2 @@
 export { TypographyShowcase } from "./TypographyShowcase";
-export { TEXT_COLORS, HEADER_COLORS, Typography, TYPOGRAPHY_STYLES, STYLE_TOKENS, STYLE_DEFAULT_COLOR, CAP_HEIGHT_TRIM, H1, H2, H3, H4, H5, H6, Heading, DisplayLarge, DisplayMedium, DisplaySmall, AltDisplayLarge, AltDisplayMedium, AltDisplaySmall, Subtitle, SubtitleSmall, SubtitleMedium, SubtitleLarge, Subtitle1, Subtitle2, Body, BodySmall, BodyLarge, BodySemibold, BodyBold, BodySmallSemibold, BodySmallBold, BodyLargeSemibold, BodyLargeBold, Body1, Body2, Label, LabelSmall, LabelLarge, LabelExtraSmall, Caption, CaptionBold, Legal, LegalSemibold, Button, ButtonSmall, ButtonExtraSmall, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberLarge, NumberMedium, NumberSmall, default } from "./Typography";
+export { TEXT_COLORS, HEADER_COLORS, Typography, TYPOGRAPHY_STYLES, STYLE_TOKENS, STYLE_DEFAULT_COLOR, CAP_HEIGHT_TRIM, H1, H2, H3, H4, H5, H6, Heading, DisplayLarge, DisplayMedium, DisplaySmall, AltDisplayLarge, AltDisplayMedium, AltDisplaySmall, Subtitle, SubtitleSmall, SubtitleMedium, SubtitleLarge, Subtitle1, Subtitle2, Body, BodySmall, BodyLarge, BodySemibold, BodyBold, BodySmallSemibold, BodySmallBold, BodyLargeSemibold, BodyLargeBold, Body1, Body2, Label, LabelSmall, LabelLarge, LabelExtraSmall, MobileNavLabel, Caption, CaptionBold, Legal, LegalSemibold, Button, ButtonSmall, ButtonExtraSmall, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberLarge, NumberMedium, NumberSmall, default } from "./Typography";

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

@@ -0,0 +1,16 @@
+/** The colors a playground may offer on `theme`. Null means "no restriction". */
+export function allowedColors(theme: any): string[];
+/**
+ * Filter a showcase's COLOR_GROUPS for the surface it is being viewed on.
+ * Groups that empty out are dropped rather than left as a bare heading.
+ */
+export function colorGroupsFor(groups: any, theme: any): any;
+/**
+ * Move the selection somewhere legal when the surface changes under it.
+ *
+ * Without this the picker hides a color but the PREVIEW keeps rendering it,
+ * so the page shows a button the controls say is not available — and the one
+ * swatch that looks selected is not on screen.
+ */
+export function useRestrictedColor(color: any, setColor: any, theme: any): void;
+export const STATE_THEMES: string[];

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

@@ -9,6 +9,8 @@ export { Button } from "./Button";
 export { ButtonGroup } from "./ButtonGroup";
 export { ToggleButton } from "./ToggleButton";
 export { Input as TextInput } from "./Input";
+export { FieldGroup } from "./FieldGroup";
+export { TextAreaField } from "./TextAreaField";
 export { Checkbox } from "./Checkbox";
 export { Chip } from "./Chip";
 export { Container } from "./Container";
@@ -30,7 +32,7 @@ export { OmniStack as DynoStack } from "./Stack/Stack";
 export { OmniTreeView as DynoTreeView } from "./TreeView/TreeView";
 export * as chartGeometry from "./Charts/geometry";
 export { StateMessage } from "./StateMessage";
-export { Typography, CAP_HEIGHT_TRIM, Heading, DisplayLarge, DisplayMedium, AltDisplayLarge, AltDisplayMedium, AltDisplaySmall, DisplaySmall, H1, H2, H3, H4, H5, H6, Body, Body1, Body2, BodySemibold, BodyBold, BodySmall, BodySmallSemibold, BodySmallBold, BodyLarge, BodyLargeSemibold, BodyLargeBold, Caption, CaptionBold, Subtitle, Subtitle1, Subtitle2, SubtitleSmall, SubtitleMedium, SubtitleLarge, Legal, LegalSemibold, Label, LabelExtraSmall, LabelSmall, LabelLarge, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberSmall, NumberMedium, NumberLarge, Button as ButtonText, ButtonSmall } from "./Typography";
+export { Typography, CAP_HEIGHT_TRIM, Heading, DisplayLarge, DisplayMedium, AltDisplayLarge, AltDisplayMedium, AltDisplaySmall, DisplaySmall, H1, H2, H3, H4, H5, H6, Body, Body1, Body2, BodySemibold, BodyBold, BodySmall, BodySmallSemibold, BodySmallBold, BodyLarge, BodyLargeSemibold, BodyLargeBold, Caption, CaptionBold, Subtitle, Subtitle1, Subtitle2, SubtitleSmall, SubtitleMedium, SubtitleLarge, Legal, LegalSemibold, Label, LabelExtraSmall, MobileNavLabel, LabelSmall, LabelLarge, Eyebrow, EyebrowSmall, EyebrowMedium, EyebrowLarge, Overline, OverlineSmall, OverlineMedium, OverlineLarge, NumberSmall, NumberMedium, NumberLarge, Button as ButtonText, ButtonSmall } from "./Typography";
 export { Icon, IconShowcase } from "./Icon";
 export { Fab, FabShowcase } from "./Fab";
 export { Rail, RailShowcase } from "./Rail";
@@ -38,9 +40,13 @@ export { Toolbar, ToolbarShowcase } from "./Toolbar";
 export { NumberField, NumberFieldShowcase } from "./NumberField";
 export { ToggleButtonGroup, DefaultToggleButtonGroup, PrimaryToggleButtonGroup, SecondaryToggleButtonGroup, TertiaryToggleButtonGroup, NeutralToggleButtonGroup, BlackWhiteToggleButtonGroup, InfoToggleButtonGroup, SuccessToggleButtonGroup, WarningToggleButtonGroup, ErrorToggleButtonGroup } from "./ToggleButtonGroup/ToggleButtonGroup";
 export { TextField, EmailTextField, PasswordTextField, SearchTextField, NumberTextField, PhoneTextField, URLTextField, TextArea, TextFieldGroup } from "./TextField";
+export { FormLabel, FORM_LABEL_MARKERS } from "./FormLabel";
+export { InputMessage, INPUT_MESSAGE_TYPES, MESSAGE_ICONS } from "./InputMessage";
+export { FormHelper, FORM_HELPER_VALIDATIONS, useFormHelperIds } from "./FormHelper";
 export { Select, SelectShowcase } from "./Select";
 export { Autocomplete, AutocompleteShowcase } from "./Autocomplete";
 export { Radio, RadioGroup, RadioInput } from "./Radio";
+export { Player, formatTime } from "./Player";
 export { SwitchInput, SwitchInput as Switch } from "./Switch";
 export { SliderInput, RangeSlider, SliderInput as Slider } from "./Slider";
 export { RatingInput, RatingInput as Rating } from "./Rating";

package/dist/types/docs/DocPanels.d.ts

@@ -1,4 +1,25 @@
 export function docFor(component: any): {
+    name: string;
+    summary: string;
+    insteadUse: {
+        when: string;
+        use: string;
+    }[];
+    props: ({
+        name: string;
+        type: string;
+        default: string;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+    })[];
+    composition: string[];
+    accessibility: string[];
+    gotchas: string[];
+} | {
     name: any;
     summary: any;
     insteadUse: any;

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

@@ -265,7 +265,7 @@ export namespace BUTTON_GROUP_DOC {
     let gotchas_3: string[];
     export { gotchas_3 as gotchas };
 }
-export namespace TOGGLE_BUTTON_GROUP_DOC {
+export namespace TOGGLE_BUTTON_DOC {
     let name_4: string;
     export { name_4 as name };
     let summary_4: string;
@@ -280,6 +280,40 @@ export namespace TOGGLE_BUTTON_GROUP_DOC {
         type: string;
         default: string;
         note: string;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note?: undefined;
+    })[];
+    export { props_4 as props };
+    let states_4: {
+        state: string;
+        setBy: string;
+    }[];
+    export { states_4 as states };
+    let composition_4: string[];
+    export { composition_4 as composition };
+    let accessibility_4: string[];
+    export { accessibility_4 as accessibility };
+    let gotchas_4: string[];
+    export { gotchas_4 as gotchas };
+}
+export namespace TOGGLE_BUTTON_GROUP_DOC {
+    let name_5: string;
+    export { name_5 as name };
+    let summary_5: string;
+    export { summary_5 as summary };
+    let insteadUse_5: {
+        when: string;
+        use: string;
+    }[];
+    export { insteadUse_5 as insteadUse };
+    let props_5: ({
+        name: string;
+        type: string;
+        default: string;
+        note: string;
         values?: undefined;
     } | {
         name: string;
@@ -294,8 +328,8 @@ export namespace TOGGLE_BUTTON_GROUP_DOC {
         note?: undefined;
         values?: undefined;
     })[];
-    export { props_4 as props };
-    let states_4: ({
+    export { props_5 as props };
+    let states_5: ({
         state: string;
         setBy: string;
         note: string;
@@ -304,7 +338,7 @@ export namespace TOGGLE_BUTTON_GROUP_DOC {
         setBy: string;
         note?: undefined;
     })[];
-    export { states_4 as states };
+    export { states_5 as states };
     let theming_4: {
         collection: string;
         inCode: string;
@@ -318,14 +352,35 @@ export namespace TOGGLE_BUTTON_GROUP_DOC {
         figma: string;
     }[];
     export { tokens_4 as tokens };
-    let composition_4: string[];
-    export { composition_4 as composition };
-    let accessibility_4: string[];
-    export { accessibility_4 as accessibility };
-    let gotchas_4: string[];
-    export { gotchas_4 as gotchas };
+    let composition_5: string[];
+    export { composition_5 as composition };
+    let accessibility_5: string[];
+    export { accessibility_5 as accessibility };
+    let gotchas_5: string[];
+    export { gotchas_5 as gotchas };
 }
-export const COMPONENT_DOCS: {
+export const COMPONENT_DOCS: ({
+    name: string;
+    summary: string;
+    insteadUse: {
+        when: string;
+        use: string;
+    }[];
+    props: ({
+        name: string;
+        type: string;
+        default: string;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+    })[];
+    composition: string[];
+    accessibility: string[];
+    gotchas: string[];
+} | {
     name: any;
     summary: any;
     insteadUse: any;
@@ -340,4 +395,4 @@ export const COMPONENT_DOCS: {
     composition: any;
     accessibility: any;
     gotchas: any;
-}[];
+})[];