@omni-design/components 0.7.0

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

@@ -0,0 +1,79 @@
+export function Slider({ variant, size, value, defaultValue, onChange, onChangeCommitted, min, max, step, marks, valueLabelDisplay, orientation, track, disabled, label, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
+    [x: string]: any;
+    variant?: string;
+    size?: string;
+    value: any;
+    defaultValue: any;
+    onChange: any;
+    onChangeCommitted: any;
+    min?: number;
+    max?: number;
+    step?: number;
+    marks?: boolean;
+    valueLabelDisplay?: string;
+    orientation?: string;
+    track?: string;
+    disabled?: boolean;
+    label: any;
+    name: any;
+    className?: string;
+    sx?: {};
+    "aria-label": any;
+    "aria-labelledby": any;
+}): JSX.Element;
+export function DefaultSlider(p: any): JSX.Element;
+export function PrimarySlider(p: any): JSX.Element;
+export function SecondarySlider(p: any): JSX.Element;
+export function TertiarySlider(p: any): JSX.Element;
+export function NeutralSlider(p: any): JSX.Element;
+export function InfoSlider(p: any): JSX.Element;
+export function SuccessSlider(p: any): JSX.Element;
+export function WarningSlider(p: any): JSX.Element;
+export function ErrorSlider(p: any): JSX.Element;
+export function SliderInput({ variant, size, value, defaultValue, onChange, onChangeCommitted, min, max, step, marks, valueLabelDisplay, orientation, track, disabled, label, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
+    [x: string]: any;
+    variant?: string;
+    size?: string;
+    value: any;
+    defaultValue: any;
+    onChange: any;
+    onChangeCommitted: any;
+    min?: number;
+    max?: number;
+    step?: number;
+    marks?: boolean;
+    valueLabelDisplay?: string;
+    orientation?: string;
+    track?: string;
+    disabled?: boolean;
+    label: any;
+    name: any;
+    className?: string;
+    sx?: {};
+    "aria-label": any;
+    "aria-labelledby": any;
+}): JSX.Element;
+export function RangeSlider({ variant, size, value, defaultValue, onChange, onChangeCommitted, min, max, step, marks, valueLabelDisplay, orientation, track, disabled, label, name, className, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: {
+    [x: string]: any;
+    variant?: string;
+    size?: string;
+    value: any;
+    defaultValue: any;
+    onChange: any;
+    onChangeCommitted: any;
+    min?: number;
+    max?: number;
+    step?: number;
+    marks?: boolean;
+    valueLabelDisplay?: string;
+    orientation?: string;
+    track?: string;
+    disabled?: boolean;
+    label: any;
+    name: any;
+    className?: string;
+    sx?: {};
+    "aria-label": any;
+    "aria-labelledby": any;
+}): JSX.Element;
+export default Slider;

package/dist/types/components/Slider/SliderShowcase.d.ts

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

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

@@ -0,0 +1,2 @@
+export { SliderShowcase } from "./SliderShowcase";
+export { Slider, SliderInput, RangeSlider, DefaultSlider, PrimarySlider, SecondarySlider, TertiarySlider, NeutralSlider, InfoSlider, SuccessSlider, WarningSlider, ErrorSlider, default } from "./Slider";

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

@@ -0,0 +1,17 @@
+export function Snackbar({ children, open, onClose, variant, color, size, anchor, autoHideDuration, startDecorator, endDecorator, action, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    open?: boolean;
+    onClose: any;
+    variant?: string;
+    color?: string;
+    size?: string;
+    anchor?: string;
+    autoHideDuration: any;
+    startDecorator: any;
+    endDecorator: any;
+    action: any;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export default Snackbar;

package/dist/types/components/Snackbar/SnackbarShowcase.d.ts

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

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

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

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

@@ -0,0 +1,16 @@
+/**
+ * Spacing Component - Design System Documentation
+ *
+ * Displays the design system spacing and sizing scales
+ *
+ * WCAG 2.1 Accessibility Best Practices:
+ * - Visual demos use aria-hidden="true" to hide from screen readers
+ * - No empty decorative <div> elements in DOM
+ * - Semantic HTML for all content
+ * - CSS-based spacing (margin/padding) for actual layout
+ * - aria-hidden only on non-focusable, decorative elements
+ *
+ * @returns {React.ReactNode} Spacing scale documentation
+ */
+export function Spacing(): React.ReactNode;
+export default Spacing;

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

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

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

@@ -0,0 +1,17 @@
+export function SpeedDial({ actions, variant, color, direction, speed, showTooltips, open: controlledOpen, onOpen, onClose, icon, ariaLabel, className, sx, ...props }: {
+    [x: string]: any;
+    actions?: any[];
+    variant?: string;
+    color?: string;
+    direction?: string;
+    speed?: number;
+    showTooltips?: boolean;
+    open: any;
+    onOpen: any;
+    onClose: any;
+    icon: any;
+    ariaLabel?: string;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export default SpeedDial;

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

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

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

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

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

@@ -0,0 +1,52 @@
+export function OmniStack({ children, gap, spacing, direction, enforceMinGap, minGapToken, divider, flexWrap, useFlexGap, alignItems, justifyContent, sx, className, ...props }: {
+    [x: string]: any;
+    children: any;
+    gap: any;
+    spacing: any;
+    direction?: string;
+    enforceMinGap?: boolean;
+    minGapToken?: string;
+    divider: any;
+    flexWrap: any;
+    useFlexGap?: boolean;
+    alignItems: any;
+    justifyContent: any;
+    sx?: {};
+    className?: string;
+}): JSX.Element;
+export function HStack(p: any): JSX.Element;
+export function VStack(p: any): JSX.Element;
+export function CenteredStack(p: any): JSX.Element;
+export function SpaceBetweenStack(p: any): JSX.Element;
+export function WrapStack(p: any): JSX.Element;
+export function ResponsiveStack({ breakpoint, ...p }: {
+    [x: string]: any;
+    breakpoint?: string;
+}): JSX.Element;
+export function Stack({ children, gap, spacing, direction, enforceMinGap, minGapToken, divider, flexWrap, useFlexGap, alignItems, justifyContent, sx, className, ...props }: {
+    [x: string]: any;
+    children: any;
+    gap: any;
+    spacing: any;
+    direction?: string;
+    enforceMinGap?: boolean;
+    minGapToken?: string;
+    divider: any;
+    flexWrap: any;
+    useFlexGap?: boolean;
+    alignItems: any;
+    justifyContent: any;
+    sx?: {};
+    className?: string;
+}): JSX.Element;
+export function GridStack(p: any): JSX.Element;
+export function StackDivider(p: any): JSX.Element;
+export function InsetStack({ sx: sxProp, ...p }: {
+    [x: string]: any;
+    sx: any;
+}): JSX.Element;
+export function ScrollStack({ sx: sxProp, ...p }: {
+    [x: string]: any;
+    sx: any;
+}): JSX.Element;
+export default OmniStack;

package/dist/types/components/Stack/StackShowcase.d.ts

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

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

@@ -0,0 +1,2 @@
+export { StackShowcase } from "./StackShowcase";
+export { OmniStack, HStack, VStack, CenteredStack, SpaceBetweenStack, WrapStack, ResponsiveStack, Stack, GridStack, StackDivider, InsetStack, ScrollStack, default } from "./Stack";

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

@@ -0,0 +1,33 @@
+export function Stepper({ children, orientation, size, color, activeStep, clickable, onStepClick, dashedIncomplete, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    orientation?: string;
+    size?: string;
+    color?: string;
+    activeStep?: number;
+    clickable?: boolean;
+    onStepClick: any;
+    dashedIncomplete?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export function Step({ children, icon, label, _index, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    icon: any;
+    label: any;
+    _index?: number;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export function useStepperContext(): {
+    orientation: string;
+    size: string;
+    color: string;
+    activeStep: number;
+    clickable: boolean;
+    onStepClick: any;
+    dashedIncomplete: boolean;
+    totalSteps: number;
+};
+export default Stepper;

package/dist/types/components/Stepper/StepperShowcase.d.ts

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

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

@@ -0,0 +1,2 @@
+export { StepperShowcase } from "./StepperShowcase";
+export { Stepper, Step, useStepperContext, default } from "./Stepper";

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

@@ -0,0 +1,65 @@
+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;
+    size?: string;
+    checked: any;
+    defaultChecked: any;
+    onChange: any;
+    disabled?: boolean;
+    label: any;
+    labelPlacement?: string;
+    name: any;
+    value: any;
+    icon: any;
+    iconOn: any;
+    iconOff: any;
+    className?: string;
+    sx?: {};
+    "aria-label": any;
+    "aria-labelledby": any;
+}): JSX.Element;
+export function PrimarySwitch(p: any): JSX.Element;
+export function SecondarySwitch(p: any): JSX.Element;
+export function TertiarySwitch(p: any): JSX.Element;
+export function NeutralSwitch(p: any): JSX.Element;
+export function InfoSwitch(p: any): JSX.Element;
+export function SuccessSwitch(p: any): JSX.Element;
+export function WarningSwitch(p: any): JSX.Element;
+export function ErrorSwitch(p: any): JSX.Element;
+export function PrimaryOutlineSwitch(p: any): JSX.Element;
+export function SecondaryOutlineSwitch(p: any): JSX.Element;
+export function TertiaryOutlineSwitch(p: any): JSX.Element;
+export function NeutralOutlineSwitch(p: any): JSX.Element;
+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;
+    size?: string;
+    checked: any;
+    defaultChecked: any;
+    onChange: any;
+    disabled?: boolean;
+    label: any;
+    labelPlacement?: string;
+    name: any;
+    value: any;
+    icon: any;
+    iconOn: any;
+    iconOff: any;
+    className?: string;
+    sx?: {};
+    "aria-label": any;
+    "aria-labelledby": any;
+}): JSX.Element;
+export default Switch;

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

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

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

@@ -0,0 +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";

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

@@ -0,0 +1,20 @@
+export function Table({ children, columns, rows, footerRows, variant, color, size, stripe, stickyHeader, stickyFooter, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    columns: any;
+    rows: any;
+    footerRows: any;
+    variant?: string;
+    color?: string;
+    size?: string;
+    stripe?: string;
+    stickyHeader?: boolean;
+    stickyFooter?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export function DefaultTable(p: any): JSX.Element;
+export function OutlinedTable(p: any): JSX.Element;
+export function LightTable(p: any): JSX.Element;
+export function SolidTable(p: any): JSX.Element;
+export default Table;

package/dist/types/components/Table/TableShowcase.d.ts

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

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

@@ -0,0 +1,2 @@
+export { TableShowcase } from "./TableShowcase";
+export { Table, DefaultTable, OutlinedTable, LightTable, SolidTable, default } from "./Table";

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

@@ -0,0 +1,51 @@
+export function Tabs({ children, defaultValue, value: controlledValue, onChange, variant, color, size, orientation, scrollable, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    defaultValue?: number;
+    value: any;
+    onChange: any;
+    variant?: string;
+    color?: string;
+    size?: string;
+    orientation?: string;
+    scrollable?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export function TabList({ children, rounded, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    rounded?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export function Tab({ children, value: tabValue, _index, disabled, startDecorator, endDecorator, iconOnly, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    value: any;
+    _index?: number;
+    disabled?: boolean;
+    startDecorator: any;
+    endDecorator: any;
+    iconOnly?: boolean;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export function TabPanel({ children, value: panelValue, className, sx, ...props }: {
+    [x: string]: any;
+    children: any;
+    value: any;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export function useTabsContext(): {
+    value: number;
+    setValue: () => void;
+    variant: string;
+    color: string;
+    size: string;
+    orientation: string;
+    scrollable: boolean;
+    tabsId: string;
+};
+export default Tabs;

package/dist/types/components/Tabs/TabsShowcase.d.ts

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

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

@@ -0,0 +1,2 @@
+export { TabsShowcase } from "./TabsShowcase";
+export { Tabs, Tab, TabList, TabPanel, useTabsContext, default } from "./Tabs";

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

@@ -0,0 +1,57 @@
+export function Tag({ color, width, allCaps, children, className, sx, ...props }: {
+    [x: string]: any;
+    color?: string;
+    width?: string;
+    allCaps?: boolean;
+    children: any;
+    className?: string;
+    sx?: {};
+}): JSX.Element;
+export function PrimaryTag(p: any): JSX.Element;
+export function SecondaryTag(p: any): JSX.Element;
+export function TertiaryTag(p: any): JSX.Element;
+export function NeutralTag(p: any): JSX.Element;
+export function InfoTag(p: any): JSX.Element;
+export function SuccessTag(p: any): JSX.Element;
+export function WarningTag(p: any): JSX.Element;
+export function ErrorTag(p: any): JSX.Element;
+export default Tag;
+/**
+ * Tag Component
+ *
+ * A compact label used for status, categorization, and metadata.
+ *
+ * SPECS:
+ *   Height:        24px
+ *   Padding:       0 8px (left/right only)
+ *   Border-radius: 0 (sharp corners)
+ *   Typography:    BodySmall, line-height 24px, weight 600
+ *   Background:    var(--Tag-{Theme}-BG)
+ *   Text:          var(--Tag-{Theme}-Text)
+ *
+ * COLORS:
+ *   primary | secondary | tertiary | neutral
+ *   info    | success   | warning  | error
+ *
+ * PROPS:
+ *   color      string    One of the above colors (default: 'primary')
+ *   width      string    'hug' (default) fits content, 'fill' stretches to container
+ *   allCaps    boolean   Transforms text to uppercase (default: false)
+ *   children   node      Tag label text
+ *   className  string
+ *   sx         object    MUI sx overrides
+ */
+declare const COLORS: string[];
+declare namespace COLOR_TOKEN_MAP {
+    let _default: string;
+    export { _default as default };
+    export let primary: string;
+    export let secondary: string;
+    export let tertiary: string;
+    export let neutral: string;
+    export let info: string;
+    export let success: string;
+    export let warning: string;
+    export let error: string;
+}
+export { COLORS as TAG_COLORS, COLOR_TOKEN_MAP as TAG_COLOR_TOKEN_MAP };

package/dist/types/components/Tag/TagShowcase.d.ts

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

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

@@ -0,0 +1,2 @@
+export { TagShowcase } from "./TagShowcase";
+export { Tag, TAG_COLORS, TAG_COLOR_TOKEN_MAP, PrimaryTag, SecondaryTag, TertiaryTag, NeutralTag, InfoTag, SuccessTag, WarningTag, ErrorTag, default } from "./Tag";

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

@@ -0,0 +1,105 @@
+/**
+ * TextField Component - Design System Implementation
+ *
+ * Uses Material-UI TextField with custom design system styling
+ * Implements WCAG 2.1 AA accessibility standards with color contrast requirements:
+ * - Border: 3.1:1 contrast ratio against background
+ * - Text: 4.5:1 contrast ratio against background
+ * - Error state uses error colors
+ *
+ * @param {string} label - Field label text
+ * @param {string} value - Input value
+ * @param {function} onChange - Change handler
+ * @param {string} placeholder - Placeholder text
+ * @param {string} error - Error message (empty = no error)
+ * @param {boolean} disabled - Disabled state
+ * @param {string} helperText - Helper text below field
+ * @param {string} variant - Variant: outlined, filled, standard (default: outlined)
+ * @param {string} size - Size: small, medium (default: medium)
+ * @param {string} type - Input type: text, email, password, number, etc
+ * @param {boolean} required - Required field
+ * @param {object} sx - Additional MUI sx props
+ * @param {object} ...props - Other MUI TextField props
+ */
+export function TextField({ label, value, onChange, placeholder, error, errorMessage, disabled, helperText, variant, size, type, required, fullWidth, startAdornment, endAdornment, sx, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: string): JSX.Element;
+/**
+ * Email TextField
+ * Pre-configured for email input with validation
+ */
+export function EmailTextField({ label, ...props }: {
+    [x: string]: any;
+    label?: string;
+}): JSX.Element;
+/**
+ * Password TextField
+ * Pre-configured for password input
+ */
+export function PasswordTextField({ label, ...props }: {
+    [x: string]: any;
+    label?: string;
+}): JSX.Element;
+/**
+ * Search TextField
+ * Pre-configured for search input
+ */
+export function SearchTextField({ label, placeholder, ...props }: {
+    [x: string]: any;
+    label?: string;
+    placeholder?: string;
+}): JSX.Element;
+/**
+ * Number TextField
+ * Pre-configured for numeric input
+ */
+export function NumberTextField({ label, ...props }: {
+    [x: string]: any;
+    label?: string;
+}): JSX.Element;
+/**
+ * Phone TextField
+ * Pre-configured for phone number input
+ */
+export function PhoneTextField({ label, placeholder, ...props }: {
+    [x: string]: any;
+    label?: string;
+    placeholder?: string;
+}): JSX.Element;
+/**
+ * URL TextField
+ * Pre-configured for URL input
+ */
+export function URLTextField({ label, placeholder, ...props }: {
+    [x: string]: any;
+    label?: string;
+    placeholder?: string;
+}): JSX.Element;
+/**
+ * Textarea Component
+ * Multi-line text input
+ */
+export function TextArea({ label, value, onChange, placeholder, error, errorMessage, disabled, helperText, rows, required, fullWidth, sx, ...props }: {
+    [x: string]: any;
+    label: any;
+    value?: string;
+    onChange: any;
+    placeholder: any;
+    error?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    helperText?: string;
+    rows?: number;
+    required?: boolean;
+    fullWidth?: boolean;
+    sx?: {};
+}): JSX.Element;
+/**
+ * TextFieldGroup Component
+ * Multiple text fields grouped together
+ */
+export function TextFieldGroup({ fields, spacing, sx, ...props }: {
+    [x: string]: any;
+    fields?: any[];
+    spacing?: number;
+    sx?: {};
+}): JSX.Element;
+export default TextField;

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

@@ -0,0 +1 @@
+export { TextField, EmailTextField, PasswordTextField, SearchTextField, NumberTextField, PhoneTextField, URLTextField, TextArea, TextFieldGroup, default } from "./TextField";