@omni-design/components 0.7.0

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

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

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

@@ -0,0 +1,17 @@
+export function Fab({ children, icon, label, variant, color, size, extended, animate, disabled, onClick, ariaLabel, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    icon: any;
+    label: any;
+    variant?: string;
+    color?: string;
+    size?: string;
+    extended?: boolean;
+    animate?: boolean;
+    disabled?: boolean;
+    onClick: any;
+    ariaLabel: any;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export default Fab;

package/dist/types/components/Fab/FabShowcase.d.ts

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

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

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

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

@@ -0,0 +1,14 @@
+export function Footer({ color, brand, address, columns, socialLinks, subscribe, copyrightName, copyrightYear, className, style, ...rest }: {
+    [x: string]: any;
+    color?: string;
+    brand: any;
+    address: any;
+    columns?: any[];
+    socialLinks?: any[];
+    subscribe: any;
+    copyrightName: any;
+    copyrightYear: any;
+    className: any;
+    style: any;
+}): JSX.Element;
+export default Footer;

package/dist/types/components/Footer/FooterShowcase.d.ts

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

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

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

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

@@ -0,0 +1,38 @@
+/**
+ * Gradient Component
+ *
+ * Three variants:
+ *   linear     CSS linear-gradient with configurable angle + stops.
+ *   mesh       Simulated mesh gradient (stacked radial-gradients).
+ *   meshCard   Mesh gradient background with a Card overlay for content.
+ *
+ * ACCESSIBILITY:
+ *   linear & mesh enforce an accessibility zone — all tones must be in the
+ *   same zone (1-5 dark or 6-12 light) so a single text color works across
+ *   the entire surface. meshCard is exempt because content lives inside the
+ *   Card, which provides its own themed background.
+ *
+ * COLORS:
+ *   Each stop/blob has a `family` (primary, secondary, tertiary, neutral,
+ *   black, white, info, success, warning, error) and a `tone` (1-12).
+ *   Cross-family gradients are supported.
+ */
+export function Gradient({ variant, color, angle, stops, position, blobs, cardProps, minHeight, children, className, sx, ...props }: {
+    [x: string]: any;
+    variant?: string;
+    color?: string;
+    angle?: number;
+    stops?: any;
+    position?: any;
+    blobs?: any;
+    cardProps?: {};
+    minHeight?: number;
+    children: any;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export function LinearGradient(p: any): JSX.Element;
+export function RadialGradient(p: any): JSX.Element;
+export function MeshGradient(p: any): JSX.Element;
+export function MeshCardGradient(p: any): JSX.Element;
+export default Gradient;

package/dist/types/components/Gradient/GradientShowcase.d.ts

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

package/dist/types/components/Gradient/gradientUtils.d.ts

@@ -0,0 +1,185 @@
+export namespace FAMILY_PREFIX {
+    let primary: string;
+    let secondary: string;
+    let tertiary: string;
+    let neutral: string;
+    let black: string;
+    let white: string;
+}
+export const FAMILIES: string[];
+export const DARK_TONES: number[];
+export const LIGHT_TONES: number[];
+export const ALL_TONES: number[];
+export namespace COLOR_PRESETS {
+    export namespace primary_1 {
+        let linear: {
+            family: string;
+            tone: number;
+            position: number;
+        }[];
+        let radial: {
+            family: string;
+            tone: number;
+            position: number;
+        }[];
+        let mesh: {
+            family: string;
+            tone: number;
+            x: number;
+            y: number;
+            spread: number;
+        }[];
+        let meshCard: {
+            family: string;
+            tone: number;
+            x: number;
+            y: number;
+            spread: number;
+        }[];
+    }
+    export { primary_1 as primary };
+    export namespace secondary_1 {
+        let linear_1: {
+            family: string;
+            tone: number;
+            position: number;
+        }[];
+        export { linear_1 as linear };
+        let radial_1: {
+            family: string;
+            tone: number;
+            position: number;
+        }[];
+        export { radial_1 as radial };
+        let mesh_1: {
+            family: string;
+            tone: number;
+            x: number;
+            y: number;
+            spread: number;
+        }[];
+        export { mesh_1 as mesh };
+        let meshCard_1: {
+            family: string;
+            tone: number;
+            x: number;
+            y: number;
+            spread: number;
+        }[];
+        export { meshCard_1 as meshCard };
+    }
+    export { secondary_1 as secondary };
+    export namespace tertiary_1 {
+        let linear_2: {
+            family: string;
+            tone: number;
+            position: number;
+        }[];
+        export { linear_2 as linear };
+        let radial_2: {
+            family: string;
+            tone: number;
+            position: number;
+        }[];
+        export { radial_2 as radial };
+        let mesh_2: {
+            family: string;
+            tone: number;
+            x: number;
+            y: number;
+            spread: number;
+        }[];
+        export { mesh_2 as mesh };
+        let meshCard_2: {
+            family: string;
+            tone: number;
+            x: number;
+            y: number;
+            spread: number;
+        }[];
+        export { meshCard_2 as meshCard };
+    }
+    export { tertiary_1 as tertiary };
+    export namespace black_1 {
+        let linear_3: {
+            family: string;
+            tone: number;
+            position: number;
+        }[];
+        export { linear_3 as linear };
+        let radial_3: {
+            family: string;
+            tone: number;
+            position: number;
+        }[];
+        export { radial_3 as radial };
+        let mesh_3: {
+            family: string;
+            tone: number;
+            x: number;
+            y: number;
+            spread: number;
+        }[];
+        export { mesh_3 as mesh };
+        let meshCard_3: {
+            family: string;
+            tone: number;
+            x: number;
+            y: number;
+            spread: number;
+        }[];
+        export { meshCard_3 as meshCard };
+    }
+    export { black_1 as black };
+    export namespace white_1 {
+        let linear_4: {
+            family: string;
+            tone: number;
+            position: number;
+        }[];
+        export { linear_4 as linear };
+        let radial_4: {
+            family: string;
+            tone: number;
+            position: number;
+        }[];
+        export { radial_4 as radial };
+        let mesh_4: {
+            family: string;
+            tone: number;
+            x: number;
+            y: number;
+            spread: number;
+        }[];
+        export { mesh_4 as mesh };
+        let meshCard_4: {
+            family: string;
+            tone: number;
+            x: number;
+            y: number;
+            spread: number;
+        }[];
+        export { meshCard_4 as meshCard };
+    }
+    export { white_1 as white };
+}
+/**
+ * Get the visual zone for a tone.
+ * For most families: tones 1-5 = dark, 6-12 = light.
+ * BW is inverted: tones 1-5 = white (light), 6-12 = black (dark).
+ */
+export function getZone(tone: any, family: any): "light" | "dark";
+export function getAllowedTones(heroTone: any, heroFamily: any): number[];
+/**
+ * Get allowed tones for a given zone.
+ * For brand families: dark = 1-5, light = 6-12.
+ * For BW: dark = 6-12, light = 1-5.
+ */
+export function getAllowedTonesForFamily(zone: any, family: any): number[];
+export function getTextColor(zone: any): "var(--BW-Color-1)" | "var(--BW-Color-6)";
+export function validateZone(items: any): any;
+export function getColorVar(family: any, tone: any): string;
+export function buildLinearCSS(stops: any, angle: any): string;
+export function buildRadialCSS(stops: any, position: any): string;
+export function buildMeshCSS(blobs: any): any;
+export function getPreset(color: any, variant: any): any;

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

@@ -0,0 +1,3 @@
+export { GradientShowcase } from "./GradientShowcase";
+export { Gradient, LinearGradient, RadialGradient, MeshGradient, MeshCardGradient, default } from "./Gradient";
+export { buildLinearCSS, buildRadialCSS, buildMeshCSS, getZone, getAllowedTones, getTextColor, getColorVar } from "./gradientUtils";

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

@@ -0,0 +1,112 @@
+/**
+ * Grid Component
+ * Responsive grid container and item wrapper
+ * Uses MUI Grid system with design system styling
+ *
+ * @param {boolean} container - Use as grid container (default: false)
+ * @param {boolean} item - Use as grid item (default: false)
+ * @param {number} xs - Columns on extra small screens (1-12)
+ * @param {number} sm - Columns on small screens (1-12)
+ * @param {number} md - Columns on medium screens (1-12)
+ * @param {number} lg - Columns on large screens (1-12)
+ * @param {number} xl - Columns on extra large screens (1-12)
+ * @param {string} spacing - Spacing between items: 0-10
+ * @param {ReactNode} children - Grid content
+ * @param {object} props - Additional MUI Grid props
+ */
+export function Grid({ children, container, item, spacing, sx, ...props }: boolean): JSX.Element;
+/**
+ * GridContainer Component
+ * Pre-configured grid container
+ *
+ * @param {number} spacing - Spacing between items (default: 2)
+ * @param {boolean} fullWidth - Take full width
+ * @param {ReactNode} children - Grid content
+ * @param {object} props - Additional props
+ */
+export function GridContainer({ children, spacing, fullWidth, sx, ...props }: number): JSX.Element;
+/**
+ * GridItem Component
+ * Pre-configured grid item
+ *
+ * @param {number} xs - Columns on extra small screens
+ * @param {number} sm - Columns on small screens
+ * @param {number} md - Columns on medium screens
+ * @param {number} lg - Columns on large screens
+ * @param {number} xl - Columns on extra large screens
+ * @param {ReactNode} children - Item content
+ * @param {object} props - Additional props
+ */
+export function GridItem({ children, xs, sm, md, lg, xl, sx, ...props }: number): JSX.Element;
+/**
+ * FullWidthGrid Component
+ * Grid item that spans full width
+ *
+ * @param {ReactNode} children - Item content
+ * @param {object} props - Additional props
+ */
+export function FullWidthGrid({ children, sx, ...props }: ReactNode): JSX.Element;
+/**
+ * HalfWidthGrid Component
+ * Grid item that spans half width on medium+ screens
+ *
+ * @param {ReactNode} children - Item content
+ * @param {object} props - Additional props
+ */
+export function HalfWidthGrid({ children, sx, ...props }: ReactNode): JSX.Element;
+/**
+ * ThirdWidthGrid Component
+ * Grid item that spans one-third width on medium+ screens
+ *
+ * @param {ReactNode} children - Item content
+ * @param {object} props - Additional props
+ */
+export function ThirdWidthGrid({ children, sx, ...props }: ReactNode): JSX.Element;
+/**
+ * QuarterWidthGrid Component
+ * Grid item that spans one-quarter width on medium+ screens
+ *
+ * @param {ReactNode} children - Item content
+ * @param {object} props - Additional props
+ */
+export function QuarterWidthGrid({ children, sx, ...props }: ReactNode): JSX.Element;
+/**
+ * ResponsiveGrid Component
+ * Grid with responsive column configuration
+ *
+ * @param {number} columns - Number of columns on desktop
+ * @param {number} mobileColumns - Number of columns on mobile
+ * @param {number} spacing - Spacing between items
+ * @param {ReactNode} children - Grid content
+ * @param {object} props - Additional props
+ */
+export function ResponsiveGrid({ children, columns, mobileColumns, spacing, sx, ...props }: number): JSX.Element;
+/**
+ * AutoGrid Component
+ * Auto-sizing grid items
+ *
+ * @param {number} minWidth - Minimum item width in pixels
+ * @param {number} spacing - Spacing between items
+ * @param {ReactNode} children - Grid content
+ * @param {object} props - Additional props
+ */
+export function AutoGrid({ children, minWidth, spacing, sx, ...props }: number): JSX.Element;
+/**
+ * CenteredGrid Component
+ * Grid with centered content
+ *
+ * @param {number} spacing - Spacing between items
+ * @param {ReactNode} children - Grid content
+ * @param {object} props - Additional props
+ */
+export function CenteredGrid({ children, spacing, sx, ...props }: number): JSX.Element;
+/**
+ * ColumnGrid Component
+ * Grid item that takes specific column width
+ *
+ * @param {number} columns - Column width (1-12)
+ * @param {ReactNode} children - Item content
+ * @param {object} props - Additional props
+ */
+export function ColumnGrid({ children, columns, sx, ...props }: number): JSX.Element;
+export default Grid;

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

@@ -0,0 +1 @@
+export { Grid, GridContainer, GridItem, FullWidthGrid, HalfWidthGrid, ThirdWidthGrid, QuarterWidthGrid, ResponsiveGrid, AutoGrid, CenteredGrid, ColumnGrid, default } from "./Grid";

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

@@ -0,0 +1,53 @@
+/**
+ * Header Component
+ * App header with navigation and theme toggle
+ * Uses design system variables for styling
+ *
+ * @param {string} title - App title/brand name
+ * @param {string} mode - Theme mode: light or dark
+ * @param {Array} navItems - Navigation menu items
+ * @param {ReactNode} rightContent - Right side content
+ * @param {object} props - Additional props
+ */
+export function Header({ title, mode, navItems, rightContent, sx, ...props }: string): JSX.Element;
+/**
+ * SimpleHeader Component
+ * Minimal header with just title and theme toggle
+ *
+ * @param {string} title - App title
+ * @param {string} mode - Theme mode
+ * @param {function} onModeChange - Theme toggle handler
+ * @param {object} props - Additional props
+ */
+export function SimpleHeader({ title, mode, onModeChange, sx, ...props }: string): JSX.Element;
+/**
+ * MinimalHeader Component
+ * Very minimal header with just title
+ *
+ * @param {string} title - App title
+ * @param {object} props - Additional props
+ */
+export function MinimalHeader({ title, sx, ...props }: string): JSX.Element;
+/**
+ * CenteredHeader Component
+ * Header with centered navigation
+ *
+ * @param {string} title - App title
+ * @param {Array} navItems - Navigation items
+ * @param {string} mode - Theme mode
+ * @param {function} onModeChange - Theme toggle handler
+ * @param {object} props - Additional props
+ */
+export function CenteredHeader({ title, navItems, mode, onModeChange, sx, ...props }: string): JSX.Element;
+/**
+ * StickyHeader Component
+ * Header that sticks to top on scroll
+ *
+ * @param {string} title - App title
+ * @param {Array} navItems - Navigation items
+ * @param {string} mode - Theme mode
+ * @param {function} onModeChange - Theme toggle handler
+ * @param {object} props - Additional props
+ */
+export function StickyHeader({ title, navItems, mode, onModeChange, sx, ...props }: string): JSX.Element;
+export default Header;

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

@@ -0,0 +1 @@
+export { Header, SimpleHeader, MinimalHeader, CenteredHeader, StickyHeader, default } from "./Header";

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

@@ -0,0 +1,19 @@
+export function Icon({ children, color, size, fontSize: customFontSize, disabled, twoTone, className, sx, "aria-label": ariaLabel, ...props }: {
+    [x: string]: any;
+    children: any;
+    color?: string;
+    size?: string;
+    fontSize: any;
+    disabled?: boolean;
+    twoTone?: boolean;
+    className?: string;
+    sx?: {};
+    "aria-label": any;
+}): JSX.Element;
+export namespace ICON_SIZE_MAP {
+    let xs: string;
+    let small: string;
+    let medium: string;
+    let large: string;
+}
+export default Icon;

package/dist/types/components/Icon/IconShowcase.d.ts

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

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

@@ -0,0 +1,2 @@
+export { IconShowcase } from "./IconShowcase";
+export { Icon, ICON_SIZE_MAP, default } from "./Icon";

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+export function Input({ variant, size, label, labelPosition, placeholder, helperText, validation, validationMessage, disabled, value, defaultValue, onChange, name, type, multiline, rows, maxRows, startAdornment, endAdornment, fullWidth, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-required": ariaRequired, "aria-invalid": ariaInvalid, inputProps: inputPropsProp, ...props }: {
+    [x: string]: any;
+    variant?: string;
+    size?: string;
+    label: any;
+    labelPosition?: string;
+    placeholder: any;
+    helperText: any;
+    validation: any;
+    validationMessage: any;
+    disabled?: boolean;
+    value: any;
+    defaultValue: any;
+    onChange: any;
+    name: any;
+    type?: string;
+    multiline?: boolean;
+    rows: any;
+    maxRows: any;
+    startAdornment: any;
+    endAdornment: any;
+    fullWidth?: boolean;
+    className?: string;
+    sx?: {};
+    "aria-label": any;
+    "aria-labelledby": any;
+    "aria-describedby": any;
+    "aria-required": any;
+    "aria-invalid": any;
+    inputProps?: {};
+}): JSX.Element;
+export function PrimaryOutlineInput(p: any): JSX.Element;
+export function SecondaryOutlineInput(p: any): JSX.Element;
+export function TertiaryOutlineInput(p: any): JSX.Element;
+export function NeutralOutlineInput(p: any): JSX.Element;
+export function InfoOutlineInput(p: any): JSX.Element;
+export function SuccessOutlineInput(p: any): JSX.Element;
+export function WarningOutlineInput(p: any): JSX.Element;
+export function ErrorOutlineInput(p: any): JSX.Element;
+export function PrimaryLightInput(p: any): JSX.Element;
+export function SecondaryLightInput(p: any): JSX.Element;
+export function TertiaryLightInput(p: any): JSX.Element;
+export function NeutralLightInput(p: any): JSX.Element;
+export function OutlineInput(p: any): JSX.Element;
+export function PrimaryInput(p: any): JSX.Element;
+export function LightInput(p: any): JSX.Element;
+export default Input;

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

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

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

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

package/dist/types/components/LinearProgress/LinearProgressShowcase.d.ts

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

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

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

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

@@ -0,0 +1,16 @@
+export function Link({ children, href, target, rel, textStyle, color, disabled, onClick, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    href: any;
+    target: any;
+    rel: any;
+    textStyle?: string;
+    color?: string;
+    disabled?: boolean;
+    onClick: any;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export const LINK_STYLES: string[];
+export const LINK_COLORS: string[];
+export default Link;

package/dist/types/components/Link/LinkShowcase.d.ts

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

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

@@ -0,0 +1,2 @@
+export { LinkShowcase } from "./LinkShowcase";
+export { Link, LINK_STYLES, LINK_COLORS, default } from "./Link";

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

@@ -0,0 +1,55 @@
+export function ListItemDecorator({ children, size, isButton, onAction, ariaLabel }: {
+    children: any;
+    size?: string;
+    isButton?: boolean;
+    onAction: any;
+    ariaLabel: any;
+}): JSX.Element;
+export function ListItem({ children, startDecorator, endDecorator, startDecoratorIsButton, endDecoratorIsButton, onStartDecoratorAction, onEndDecoratorAction, startDecoratorAriaLabel, endDecoratorAriaLabel, size, variant, color, eyebrow, overline, secondary, clickable, disabled, selected, selectionMode, onSelect, onClick, bottomBorder, rightBorder, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    startDecorator: any;
+    endDecorator: any;
+    startDecoratorIsButton?: boolean;
+    endDecoratorIsButton?: boolean;
+    onStartDecoratorAction: any;
+    onEndDecoratorAction: any;
+    startDecoratorAriaLabel: any;
+    endDecoratorAriaLabel: any;
+    size?: string;
+    variant?: string;
+    color: any;
+    eyebrow: any;
+    overline: any;
+    secondary: any;
+    clickable?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    selectionMode?: string;
+    onSelect: any;
+    onClick: any;
+    bottomBorder?: boolean;
+    rightBorder?: boolean;
+    sx?: {};
+}): JSX.Element;
+export function List({ children, items, variant, color, size, orientation, dividers, selectionMode, selectedIndices, onSelectionChange, clickable, component, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    items: any;
+    variant?: string;
+    color?: string;
+    size?: string;
+    orientation?: string;
+    dividers?: boolean;
+    selectionMode?: string;
+    selectedIndices?: any[];
+    onSelectionChange: any;
+    clickable?: boolean;
+    component?: string;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export function DefaultList(p: any): JSX.Element;
+export function SolidList(p: any): JSX.Element;
+export function LightList(p: any): JSX.Element;
+export default List;

package/dist/types/components/List/ListShowcase.d.ts

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

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

@@ -0,0 +1,2 @@
+export { ListShowcase } from "./ListShowcase";
+export { List, ListItem, ListItemDecorator, DefaultList, SolidList, LightList, default } from "./List";