@omni-design/components 0.11.0 → 0.12.0

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

@@ -1,5 +1,5 @@
 export function normalizeButtonVariant(variant: any): string;
-export function Button({ variant, size, elevated, selected, fullWidth, disabled, iconOnly, letterNumber, avatar, swatch, swatchColor, startIcon, endIcon, startDecorator, endDecorator, badge, badgeContent, badgeVariant, badgeSize, badgeDot, badgeMax, badgeAnchorOrigin, children, className, sx, ...props }: {
+export function Button({ variant, size, elevated, selected, fullWidth, disabled, contentType, iconOnly, letterNumber, avatar, swatch, swatchColor, startIcon, endIcon, startDecorator, endDecorator, badge, badgeContent, badgeVariant, badgeSize, badgeDot, badgeMax, badgeAnchorOrigin, children, className, sx, ...props }: {
     [x: string]: any;
     variant?: string;
     size?: string;
@@ -7,6 +7,7 @@ export function Button({ variant, size, elevated, selected, fullWidth, disabled,
     selected?: boolean;
     fullWidth?: boolean;
     disabled?: boolean;
+    contentType: any;
     iconOnly?: boolean;
     letterNumber?: boolean;
     avatar?: boolean;
@@ -30,6 +31,7 @@ export function Button({ variant, size, elevated, selected, fullWidth, disabled,
     className?: string;
     sx?: {};
 }): JSX.Element;
+export const BUTTON_CONTENT_TYPES: string[];
 export function DefaultButton(p: any): JSX.Element;
 export function DefaultOutlineButton(p: any): JSX.Element;
 export function PrimaryButton(p: any): JSX.Element;

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

@@ -1,11 +1,12 @@
-export function ButtonGroup({ variant, color, size, disabled, orientation, spacing, fit, fullWidth, equalWidth, multiple, value: controlledValue, defaultValue, onChange, children, className, sx, "aria-label": ariaLabel, ...props }: {
+export function ButtonGroup({ variant, color, size, disabled, orientation, separated, spacing, fit, fullWidth, equalWidth, multiple, value: controlledValue, defaultValue, onChange, children, className, sx, "aria-label": ariaLabel, ...props }: {
     [x: string]: any;
     variant?: string;
     color?: string;
     size?: string;
     disabled?: boolean;
     orientation?: string;
-    spacing?: number;
+    separated?: boolean;
+    spacing: any;
     fit: any;
     fullWidth?: boolean;
     equalWidth?: boolean;

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

@@ -2,7 +2,7 @@ export function normalizeChipVariant(variant: any): string;
 export function Chip({ variant, size: sizeProp, label, clickable, disabled, selected, selectionMode, onDelete, onClick, startDecorator, endDecorator, children, className, sx, ...props }: {
     [x: string]: any;
     variant?: string;
-    size?: string;
+    size: any;
     label: any;
     clickable?: boolean;
     disabled?: boolean;

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

@@ -3,7 +3,7 @@ export function IconBadge({ children, color, variant, size, className, sx, ...pr
     children: any;
     color?: string;
     variant?: string;
-    size?: string;
+    size: any;
     className?: string;
     sx?: {};
 }): JSX.Element;

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

@@ -0,0 +1,66 @@
+export function Loader({ theme, surface, size, color, message, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
+    [x: string]: any;
+    theme: any;
+    surface: any;
+    size?: string;
+    color?: string;
+    message?: string;
+    sx?: {};
+    "aria-label"?: string;
+    "aria-labelledby": any;
+}): JSX.Element;
+/**
+ * LinearLoader Component
+ * Linear progress bar
+ *
+ * @param {number} value - Progress value 0-100
+ * @param {string} label - Optional label
+ * @param {object} props - Additional props
+ */
+export function LinearLoader({ value, label, sx, ...props }: number): JSX.Element;
+/**
+ * SkeletonLoader Component
+ * Skeleton placeholder for loading content
+ *
+ * @param {number} rows - Number of skeleton rows
+ * @param {number} height - Height of each skeleton
+ * @param {object} props - Additional props
+ */
+export function SkeletonLoader({ rows, height, spacing, sx, ...props }: number): JSX.Element;
+/**
+ * DotsLoader Component
+ * Animated dots loader
+ *
+ * @param {string} message - Loading message
+ * @param {object} props - Additional props
+ */
+export function DotsLoader({ message, sx, ...props }: string): JSX.Element;
+/**
+ * PageLoader Component
+ * Full page loader overlay
+ *
+ * @param {string} message - Loading message
+ * @param {number} size - Loader size
+ * @param {object} props - Additional props
+ */
+export function PageLoader({ message, size, sx, ...props }: string): JSX.Element;
+/**
+ * SkeletonCard Component
+ * Skeleton loading state for cards
+ *
+ * @param {number} lines - Number of text lines
+ * @param {boolean} showImage - Show image skeleton
+ * @param {object} props - Additional props
+ */
+export function SkeletonCard({ lines, showImage, sx, ...props }: number): JSX.Element;
+/**
+ * OverlayLoader Component
+ * Loader overlay for async operations
+ *
+ * @param {boolean} isLoading - Show loader
+ * @param {string} message - Loading message
+ * @param {ReactNode} children - Content to overlay
+ * @param {object} props - Additional props
+ */
+export function OverlayLoader({ isLoading, message, children, sx, ...props }: boolean): JSX.Element;
+export default Loader;

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

@@ -0,0 +1 @@
+export { Loader, LinearLoader, SkeletonLoader, DotsLoader, PageLoader, SkeletonCard, OverlayLoader, default } from "./Loader";

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

@@ -0,0 +1,7 @@
+export function MiniSwatch({ color, className, sx, ...props }: {
+    [x: string]: any;
+    color: any;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export default MiniSwatch;

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

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

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

@@ -0,0 +1,14 @@
+export function Swatch({ color, label, size, selected, disabled, radio, onClick, className, sx, "aria-label": ariaLabel, ...props }: {
+    [x: string]: any;
+    color: any;
+    label: any;
+    size?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    radio?: boolean;
+    onClick: any;
+    className?: string;
+    sx?: {};
+    "aria-label": any;
+}): JSX.Element;
+export default Swatch;

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

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

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

@@ -1,3 +1,27 @@
+export function themedStyles(): {
+    type: string;
+    trackOff: string;
+    trackOffBorder: string;
+    trackOn: string;
+    trackOnBorder: string;
+    dotOff: string;
+    dotOn: string;
+    iconOff: string;
+    iconOn: string;
+};
+export function outlineStyles(color: any): {
+    type: string;
+    color: any;
+    trackOff: string;
+    trackOffBorder: string;
+    trackOn: string;
+    trackOnBorder: string;
+    dotOff: string;
+    dotOn: string;
+    iconOff: string;
+    iconOn: string;
+};
+export function normalizeSwitchVariant(variant: any): string;
 export function Switch({ variant, size, checked, defaultChecked, onChange, disabled, label, labelPlacement, name, value, icon, iconOn, iconOff, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
     [x: string]: any;
     variant?: string;
@@ -34,14 +58,6 @@ export function InfoOutlineSwitch(p: any): JSX.Element;
 export function SuccessOutlineSwitch(p: any): JSX.Element;
 export function WarningOutlineSwitch(p: any): JSX.Element;
 export function ErrorOutlineSwitch(p: any): JSX.Element;
-export function PrimaryLightSwitch(p: any): JSX.Element;
-export function SecondaryLightSwitch(p: any): JSX.Element;
-export function TertiaryLightSwitch(p: any): JSX.Element;
-export function NeutralLightSwitch(p: any): JSX.Element;
-export function InfoLightSwitch(p: any): JSX.Element;
-export function SuccessLightSwitch(p: any): JSX.Element;
-export function WarningLightSwitch(p: any): JSX.Element;
-export function ErrorLightSwitch(p: any): JSX.Element;
 export function SwitchInput({ variant, size, checked, defaultChecked, onChange, disabled, label, labelPlacement, name, value, icon, iconOn, iconOff, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
     [x: string]: any;
     variant?: string;

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

@@ -1,2 +1,2 @@
 export { SwitchShowcase } from "./SwitchShowcase";
-export { Switch, SwitchInput, PrimarySwitch, SecondarySwitch, TertiarySwitch, NeutralSwitch, InfoSwitch, SuccessSwitch, WarningSwitch, ErrorSwitch, PrimaryOutlineSwitch, SecondaryOutlineSwitch, TertiaryOutlineSwitch, NeutralOutlineSwitch, InfoOutlineSwitch, SuccessOutlineSwitch, WarningOutlineSwitch, ErrorOutlineSwitch, PrimaryLightSwitch, SecondaryLightSwitch, TertiaryLightSwitch, NeutralLightSwitch, InfoLightSwitch, SuccessLightSwitch, WarningLightSwitch, ErrorLightSwitch, default } from "./Switch";
+export { Switch, SwitchInput, PrimarySwitch, SecondarySwitch, TertiarySwitch, NeutralSwitch, InfoSwitch, SuccessSwitch, WarningSwitch, ErrorSwitch, PrimaryOutlineSwitch, SecondaryOutlineSwitch, TertiaryOutlineSwitch, NeutralOutlineSwitch, InfoOutlineSwitch, SuccessOutlineSwitch, WarningOutlineSwitch, ErrorOutlineSwitch, default } from "./Switch";

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

@@ -1,5 +1,7 @@
 export { Colors } from "./Colors";
 export { Spacing } from "./Spacing";
+export { Swatch } from "./Swatch";
+export { MiniSwatch } from "./MiniSwatch";
 export { IconBadge } from "./IconBadge";
 export { IconBadgeShowcase } from "./IconBadge/IconBadgeShowcase";
 export { Button } from "./Button";
@@ -42,6 +44,7 @@ export { SwitchInput, SwitchInput as Switch } from "./Switch";
 export { SliderInput, RangeSlider, SliderInput as Slider } from "./Slider";
 export { RatingInput, RatingInput as Rating } from "./Rating";
 export { SearchField, SearchFieldShowcase } from "./SearchField";
+export { Tag, TAG_COLORS, TAG_COLOR_TOKEN_MAP, PrimaryTag, SecondaryTag, TertiaryTag, NeutralTag, InfoTag, SuccessTag, WarningTag, ErrorTag, TagShowcase } from "./Tag";
 export { OmniStack, Stack, HStack, VStack, CenteredStack, SpaceBetweenStack, WrapStack, ResponsiveStack, GridStack, StackDivider, InsetStack, ScrollStack, StackShowcase } from "./Stack";
 export { Box, BoxShowcase } from "./Box";
 export { Section, SectionShowcase } from "./Section";
@@ -61,6 +64,7 @@ export { Alert, AlertShowcase } from "./Alert";
 export { Snackbar, SnackbarShowcase } from "./Snackbar";
 export { CircularProgress, CircularProgressShowcase } from "./CircularProgress";
 export { LinearProgress, LinearProgressShowcase } from "./LinearProgress";
+export { Loader, LinearLoader, SkeletonLoader, DotsLoader, PageLoader, SkeletonCard, OverlayLoader } from "./Loader";
 export { Avatar, AvatarGroup, AvatarShowcase, DEFAULT_AVATAR_SRC } from "./Avatar";
 export { Badge, BadgeShowcase } from "./Badge";
 export { List, ListItem, ListItemDecorator } from "./List";
@@ -75,3 +79,4 @@ export { OmniDesignProvider, useOmniDesign, ThemedZone, Surfaced } from "../Omni
 export { CodeBlock, CopyButton } from "./CodeBlock/CodeBlock";
 export { BarChart, LineChart, PieChart, CHART_TOKENS, CHART_LABEL_TYPE } from "./Charts";
 export { Ghost, useGhost, ghostBlockSx } from "./_ghost";
+export { COMPONENT_DOCS, FOUNDATIONS, renderFoundations, renderColourSystem, renderComponentDoc, COLOUR_COLLECTIONS, docsSlug, componentDocsUrl, componentDocsIndexUrl, DOCS_ORIGIN, EXAMPLES, hasExample } from "../docs";

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

@@ -0,0 +1,39 @@
+export function docFor(component: any): {
+    name: any;
+    summary: any;
+    insteadUse: any;
+    props: any;
+    states: any;
+    theming: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    tokens: any;
+    composition: any;
+    accessibility: any;
+    gotchas: any;
+};
+/**
+ * Everything written about the component, in reading order — led by ONE live
+ * example.
+ *
+ * The example is here because a page of prose gives no recognition: you cannot
+ * tell what a component IS from its prop table. It renders in the theme and
+ * surface currently selected, so the picture matches the pickers rather than
+ * showing some other configuration. It is the default instance and is not
+ * interactive — the Playground tab is where you change things.
+ *
+ * Components that need state or a portal to be shown honestly (Modal, Drawer,
+ * Snackbar) have no example, and simply lead with the summary instead of
+ * rendering a half-working one.
+ */
+export function DocSummary({ component, theme, surface }: {
+    component: any;
+    theme?: any;
+    surface?: string;
+}): JSX.Element;
+/** Breaking and silent changes, newest first, plus a way to report one. */
+export function DocChanges({ component }: {
+    component: any;
+}): JSX.Element;

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

@@ -0,0 +1,212 @@
+export namespace BUTTON_DOC {
+    let name: string;
+    let summary: string;
+    let insteadUse: {
+        when: string;
+        use: string;
+    }[];
+    let props: ({
+        name: string;
+        type: string;
+        default: string;
+        values: string[];
+        note: string;
+    } | {
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+        values?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        values?: undefined;
+        note?: undefined;
+    })[];
+    let states: ({
+        state: string;
+        setBy: string;
+        note?: undefined;
+    } | {
+        state: string;
+        setBy: string;
+        note: string;
+    })[];
+    let theming: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    let themingNotes: string[];
+    let tokens: {
+        name: string;
+        sets: string;
+        variesWith: string;
+        figma: string;
+    }[];
+    let composition: string[];
+    let accessibility: string[];
+    let gotchas: string[];
+    let changes: ({
+        version: string;
+        change: string;
+        migrate: string;
+        silent: boolean;
+    } | {
+        version: string;
+        change: string;
+        silent: boolean;
+        migrate?: undefined;
+    })[];
+}
+export namespace TABS_DOC {
+    let name_1: string;
+    export { name_1 as name };
+    let summary_1: string;
+    export { summary_1 as summary };
+    let insteadUse_1: {
+        when: string;
+        use: string;
+    }[];
+    export { insteadUse_1 as insteadUse };
+    let props_1: ({
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+        values?: undefined;
+    } | {
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note: string;
+    } | {
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note?: undefined;
+        values?: undefined;
+    })[];
+    export { props_1 as props };
+    let states_1: ({
+        state: string;
+        setBy: string;
+        note: string;
+    } | {
+        state: string;
+        setBy: string;
+        note?: undefined;
+    })[];
+    export { states_1 as states };
+    let theming_1: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    export { theming_1 as theming };
+    let tokens_1: {
+        name: string;
+        sets: string;
+        variesWith: string;
+        figma: string;
+    }[];
+    export { tokens_1 as tokens };
+    let composition_1: string[];
+    export { composition_1 as composition };
+    let accessibility_1: string[];
+    export { accessibility_1 as accessibility };
+    let gotchas_1: string[];
+    export { gotchas_1 as gotchas };
+}
+export namespace CARD_DOC {
+    let name_2: string;
+    export { name_2 as name };
+    let summary_2: string;
+    export { summary_2 as summary };
+    let insteadUse_2: {
+        when: string;
+        use: string;
+    }[];
+    export { insteadUse_2 as insteadUse };
+    let props_2: ({
+        name: string;
+        type: string;
+        values: string[];
+        default: string;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        values?: undefined;
+        note?: undefined;
+    } | {
+        name: string;
+        type: string;
+        default: string;
+        note: string;
+        values?: undefined;
+    })[];
+    export { props_2 as props };
+    let states_2: ({
+        state: string;
+        setBy: string;
+        note: string;
+    } | {
+        state: string;
+        setBy: string;
+        note?: undefined;
+    })[];
+    export { states_2 as states };
+    let theming_2: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    export { theming_2 as theming };
+    let themingNotes_1: string[];
+    export { themingNotes_1 as themingNotes };
+    let tokens_2: {
+        name: string;
+        sets: string;
+        variesWith: string;
+        figma: string;
+    }[];
+    export { tokens_2 as tokens };
+    let composition_2: string[];
+    export { composition_2 as composition };
+    let accessibility_2: string[];
+    export { accessibility_2 as accessibility };
+    let gotchas_2: string[];
+    export { gotchas_2 as gotchas };
+}
+export const COMPONENT_DOCS: {
+    name: any;
+    summary: any;
+    insteadUse: any;
+    props: any;
+    states: any;
+    theming: {
+        collection: string;
+        inCode: string;
+        inFigma: string;
+    }[];
+    tokens: any;
+    composition: any;
+    accessibility: any;
+    gotchas: any;
+}[];