@omni-design/components 0.7.0

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

@@ -0,0 +1,492 @@
+export function Typography({ children, textStyle, color, width, component, noWrap, gutterBottom, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    textStyle?: string;
+    color: any;
+    width: any;
+    component: any;
+    noWrap?: boolean;
+    gutterBottom?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export const STYLE_MAP: {
+    'display-large': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'display-medium': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'display-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    h1: {
+        component: string;
+        fontFamily: string;
+        fontVariationSettings: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    h2: {
+        component: string;
+        fontFamily: string;
+        fontVariationSettings: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    h3: {
+        component: string;
+        fontFamily: string;
+        fontVariationSettings: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    h4: {
+        component: string;
+        fontFamily: string;
+        fontVariationSettings: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    h5: {
+        component: string;
+        fontFamily: string;
+        fontVariationSettings: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    h6: {
+        component: string;
+        fontFamily: string;
+        fontVariationSettings: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'subtitle-large': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    subtitle: {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'subtitle-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'body-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'body-small-semibold': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    body: {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'body-medium': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'body-semibold': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'body-medium-semibold': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'body-large': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'body-large-semibold': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    caption: {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'caption-bold': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'label-extra-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'label-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    label: {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'label-medium': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'label-large': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    legal: {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'legal-semibold': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'eyebrow-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        textTransform: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    eyebrow: {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        textTransform: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'eyebrow-large': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        textTransform: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'number-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        fontVariantNumeric: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'number-medium': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        fontVariantNumeric: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'number-large': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        fontVariantNumeric: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'button-extra-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'button-small': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    button: {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+    'button-standard': {
+        component: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        letterSpacing: string;
+        defaultColor: string;
+        defaultWidth: string;
+    };
+};
+export const STYLE_ALIASES: {
+    'overline-small': string;
+    overline: string;
+    'overline-medium': string;
+    'overline-large': string;
+    'eyebrow-medium': string;
+    'body-small-bold': string;
+    'body-bold': string;
+    'body-medium-bold': string;
+    'body-large-bold': string;
+    'subtitle-medium': string;
+};
+export const TYPOGRAPHY_STYLES: string[];
+export const HEADER_COLORS: string[];
+export const TEXT_COLORS: string[];
+export const CAP_HEIGHT_TRIM: {
+    '@supports (text-box-edge: cap alphabetic)': {
+        textBoxTrim: string;
+        textBoxEdge: string;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};
+export function DisplayLarge(p: any): JSX.Element;
+export function DisplayMedium(p: any): JSX.Element;
+export function DisplaySmall(p: any): JSX.Element;
+export function H1(p: any): JSX.Element;
+export function H2(p: any): JSX.Element;
+export function H3(p: any): JSX.Element;
+export function H4(p: any): JSX.Element;
+export function H5(p: any): JSX.Element;
+export function H6(p: any): JSX.Element;
+export function Heading(p: any): JSX.Element;
+export function SubtitleLarge(p: any): JSX.Element;
+export function Subtitle(p: any): JSX.Element;
+export function SubtitleSmall(p: any): JSX.Element;
+export function SubtitleMedium(p: any): JSX.Element;
+export function Subtitle1(p: any): JSX.Element;
+export function Subtitle2(p: any): JSX.Element;
+export function BodySmall(p: any): JSX.Element;
+export function BodySmallSemibold(p: any): JSX.Element;
+export function BodySmallBold(p: any): JSX.Element;
+export function Body(p: any): JSX.Element;
+export function BodyMedium(p: any): JSX.Element;
+export function BodySemibold(p: any): JSX.Element;
+export function BodyBold(p: any): JSX.Element;
+export function Body1(p: any): JSX.Element;
+export function Body2(p: any): JSX.Element;
+export function BodyLarge(p: any): JSX.Element;
+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 LabelExtraSmall(p: any): JSX.Element;
+export function LabelSmall(p: any): JSX.Element;
+export function Label(p: any): JSX.Element;
+export function LabelMedium(p: any): JSX.Element;
+export function LabelLarge(p: any): JSX.Element;
+export function Legal(p: any): JSX.Element;
+export function LegalSemibold(p: any): JSX.Element;
+export function EyebrowSmall(p: any): JSX.Element;
+export function Eyebrow(p: any): JSX.Element;
+export function EyebrowMedium(p: any): JSX.Element;
+export function EyebrowLarge(p: any): JSX.Element;
+export function OverlineSmall(p: any): JSX.Element;
+export function Overline(p: any): JSX.Element;
+export function OverlineMedium(p: any): JSX.Element;
+export function OverlineLarge(p: any): JSX.Element;
+export function NumberSmall(p: any): JSX.Element;
+export function NumberMedium(p: any): JSX.Element;
+export function NumberLarge(p: any): JSX.Element;
+export function ButtonExtraSmall(p: any): JSX.Element;
+export function ButtonSmall(p: any): JSX.Element;
+export function ButtonTypography(p: any): JSX.Element;
+export function Button(p: any): JSX.Element;
+export default Typography;

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

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

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

@@ -0,0 +1,2 @@
+export { TypographyShowcase } from "./TypographyShowcase";
+export { Typography, TYPOGRAPHY_STYLES, CAP_HEIGHT_TRIM, H1, H2, H3, H4, H5, H6, Heading, DisplayLarge, DisplayMedium, DisplaySmall, 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";

package/dist/types/components/_a11y/ContrastCheck.d.ts

@@ -0,0 +1,15 @@
+/**
+ * ContrastCheck — given a ref to a DOM element, reads its background-color
+ * and color and shows a pass/fail row.
+ *
+ * Props:
+ *   targetRef — a React ref pointing at a rendered DOM element.
+ *   label     — what this row is checking (e.g. "Footer body", "Copyright").
+ *   deps      — array of values that, when changed, re-runs the check.
+ */
+export function ContrastCheck({ targetRef, label, deps }: {
+    targetRef: any;
+    label: any;
+    deps?: any[];
+}): JSX.Element;
+export default ContrastCheck;

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

@@ -0,0 +1,92 @@
+export function resolveBevelConfig(preset: any, custom: any): any;
+export function bevelColor(theme: any, slot: any): string;
+/**
+ * The small-text fallback color for a given bevel theme.
+ *
+ * The bevel's `--Buttons-{Theme}-Button` fill is tuned for button bodies and
+ * pairs with the Highlight / Lowlight at the WCAG 3:1 large-text minimum.
+ * Once rendered text drops below 19px, contrast needs to hit 4.5:1 — at that
+ * size we swap the bevel fill for `--Text-{Theme}` (or plain `--Text` for
+ * Default), which IS contrast-tuned for body text.
+ */
+export function textFallbackColor(theme: any): string;
+export function angleToOffset(deg: any, dist: any): {
+    dx: number;
+    dy: number;
+};
+export const BEVEL_THEMES: string[];
+export const BEVEL_PRESETS: {
+    Classic: {
+        name: string;
+        description: string;
+        angle: number;
+        bevel: boolean;
+        depth: number;
+        softness: number;
+        shadow: boolean;
+        shadowDistance: number;
+        shadowBlur: number;
+        shadowOpacity: number;
+    };
+    Carved: {
+        name: string;
+        description: string;
+        angle: number;
+        bevel: boolean;
+        depth: number;
+        softness: number;
+        shadow: boolean;
+        shadowDistance: number;
+        shadowBlur: number;
+        shadowOpacity: number;
+    };
+    Embossed: {
+        name: string;
+        description: string;
+        angle: number;
+        bevel: boolean;
+        depth: number;
+        softness: number;
+        shadow: boolean;
+        shadowDistance: number;
+        shadowBlur: number;
+        shadowOpacity: number;
+    };
+    Stamp: {
+        name: string;
+        description: string;
+        angle: number;
+        bevel: boolean;
+        depth: number;
+        softness: number;
+        shadow: boolean;
+        shadowDistance: number;
+        shadowBlur: number;
+        shadowOpacity: number;
+    };
+    'Night Cut': {
+        name: string;
+        description: string;
+        angle: number;
+        bevel: boolean;
+        depth: number;
+        softness: number;
+        shadow: boolean;
+        shadowDistance: number;
+        shadowBlur: number;
+        shadowOpacity: number;
+    };
+    'Shadow Only': {
+        name: string;
+        description: string;
+        angle: number;
+        bevel: boolean;
+        depth: number;
+        softness: number;
+        shadow: boolean;
+        shadowDistance: number;
+        shadowBlur: number;
+        shadowOpacity: number;
+    };
+};
+export const BEVEL_PRESET_NAMES: string[];

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

@@ -0,0 +1,32 @@
+/**
+ * The bevel's two inset shadows.
+ *
+ * `size` ('small' | 'medium' | 'large') opts into the design system's
+ * per-size geometry tokens — eight literal lengths per size, generated from
+ * the same module that writes the Figma variables, so the two artifacts carry
+ * identical numbers. Each one falls back to the value the lib derives from
+ * --_bevel, which is what older design systems (and any caller with no size
+ * token to point at) keep using.
+ *
+ * Callers with a height that no size token describes — the Fab's diameter, the
+ * Slider's thumb — pass no size and stay entirely on the derived path.
+ */
+export function bevelShadow(color: any, size: any): string;
+export const SHADOW_LEVEL_0: "none";
+export const SHADOW_LEVEL_1: any;
+export const SHADOW_LEVEL_2: any;
+export const SHADOW_LEVEL_3: any;
+export const SHADOW_LEVEL_4: any;
+export const SHADOW_LEVEL_5: any;
+export const SHADOWS: {
+    0: string;
+    1: any;
+    2: any;
+    3: any;
+    4: any;
+    5: any;
+};
+export const TOKEN_SEGMENT: {
+    'black-white': string;
+};
+export function tokenSegment(color: any): any;