@omni-design/components 0.7.10 → 0.9.0

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

@@ -1,7 +1,9 @@
-export function Badge({ variant, size, badgeContent, max, showZero, invisible, dot, overlap, anchorOrigin, children, className, sx, ...props }: {
+export function normalizeBadgeVariant(variant: any): string;
+export function Badge({ variant, size, type, badgeContent, max, showZero, invisible, dot, overlap, anchorOrigin, children, className, sx, ...props }: {
     [x: string]: any;
     variant?: string;
-    size?: string;
+    size: any;
+    type?: string;
     badgeContent: any;
     max?: number;
     showZero?: boolean;
@@ -32,12 +34,4 @@ export function InfoOutlineBadge(p: any): JSX.Element;
 export function SuccessOutlineBadge(p: any): JSX.Element;
 export function WarningOutlineBadge(p: any): JSX.Element;
 export function ErrorOutlineBadge(p: any): JSX.Element;
-export function PrimaryLightBadge(p: any): JSX.Element;
-export function SecondaryLightBadge(p: any): JSX.Element;
-export function TertiaryLightBadge(p: any): JSX.Element;
-export function NeutralLightBadge(p: any): JSX.Element;
-export function InfoLightBadge(p: any): JSX.Element;
-export function SuccessLightBadge(p: any): JSX.Element;
-export function WarningLightBadge(p: any): JSX.Element;
-export function ErrorLightBadge(p: any): JSX.Element;
 export default Badge;

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

@@ -1,2 +1,2 @@
 export { BadgeShowcase } from "./BadgeShowcase";
-export { Badge, PrimaryBadge, SecondaryBadge, TertiaryBadge, NeutralBadge, InfoBadge, SuccessBadge, WarningBadge, ErrorBadge, PrimaryOutlineBadge, SecondaryOutlineBadge, TertiaryOutlineBadge, NeutralOutlineBadge, InfoOutlineBadge, SuccessOutlineBadge, WarningOutlineBadge, ErrorOutlineBadge, PrimaryLightBadge, SecondaryLightBadge, TertiaryLightBadge, NeutralLightBadge, InfoLightBadge, SuccessLightBadge, WarningLightBadge, ErrorLightBadge, default } from "./Badge";
+export { Badge, PrimaryBadge, SecondaryBadge, TertiaryBadge, NeutralBadge, InfoBadge, SuccessBadge, WarningBadge, ErrorBadge, PrimaryOutlineBadge, SecondaryOutlineBadge, TertiaryOutlineBadge, NeutralOutlineBadge, InfoOutlineBadge, SuccessOutlineBadge, WarningOutlineBadge, ErrorOutlineBadge, default } from "./Badge";

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

@@ -1,4 +1,4 @@
-export function Card({ children, variant, color, surface, size, orientation, clickable, selected, elevated, draggable: draggableProp, onClick, href, className, sx, ...props }: {
+export function Card({ children, variant, color, surface, size, orientation, clickable, selected, elevated, draggable: draggableProp, onClick, disabled, href, className, sx, ...props }: {
     [x: string]: any;
     children: any;
     variant?: string;
@@ -11,6 +11,7 @@ export function Card({ children, variant, color, surface, size, orientation, cli
     elevated?: boolean;
     draggable?: boolean;
     onClick: any;
+    disabled?: boolean;
     href: any;
     className?: string;
     sx?: {};

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

@@ -1,3 +1,4 @@
+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;
@@ -31,12 +32,4 @@ export function InfoOutlineChip(p: any): JSX.Element;
 export function SuccessOutlineChip(p: any): JSX.Element;
 export function WarningOutlineChip(p: any): JSX.Element;
 export function ErrorOutlineChip(p: any): JSX.Element;
-export function PrimaryLightChip(p: any): JSX.Element;
-export function SecondaryLightChip(p: any): JSX.Element;
-export function TertiaryLightChip(p: any): JSX.Element;
-export function NeutralLightChip(p: any): JSX.Element;
-export function InfoLightChip(p: any): JSX.Element;
-export function SuccessLightChip(p: any): JSX.Element;
-export function WarningLightChip(p: any): JSX.Element;
-export function ErrorLightChip(p: any): JSX.Element;
 export default Chip;

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

@@ -1,2 +1,2 @@
 export { ChipShowcase } from "./ChipShowcase";
-export { Chip, PrimaryChip, SecondaryChip, TertiaryChip, NeutralChip, InfoChip, SuccessChip, WarningChip, ErrorChip, PrimaryOutlineChip, SecondaryOutlineChip, TertiaryOutlineChip, NeutralOutlineChip, InfoOutlineChip, SuccessOutlineChip, WarningOutlineChip, ErrorOutlineChip, PrimaryLightChip, SecondaryLightChip, TertiaryLightChip, NeutralLightChip, InfoLightChip, SuccessLightChip, WarningLightChip, ErrorLightChip, default } from "./Chip";
+export { Chip, PrimaryChip, SecondaryChip, TertiaryChip, NeutralChip, InfoChip, SuccessChip, WarningChip, ErrorChip, PrimaryOutlineChip, SecondaryOutlineChip, TertiaryOutlineChip, NeutralOutlineChip, InfoOutlineChip, SuccessOutlineChip, WarningOutlineChip, ErrorOutlineChip, default } from "./Chip";

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

@@ -47,6 +47,13 @@ export namespace dialogButtonStyles {
         '&:hover': {
             backgroundColor: string;
         };
+        '&:active': {
+            backgroundColor: string;
+        };
+        '&:disabled': {
+            opacity: string;
+            cursor: string;
+        };
         fontFamily: string;
         fontWeight: number;
         fontSize: string;
@@ -66,6 +73,13 @@ export namespace dialogButtonStyles {
         '&:hover': {
             backgroundColor: string;
         };
+        '&:active': {
+            backgroundColor: string;
+        };
+        '&:disabled': {
+            opacity: string;
+            cursor: string;
+        };
         fontFamily: string;
         fontWeight: number;
         fontSize: string;

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

@@ -11,7 +11,6 @@ export function Icon({ children, color, size, fontSize: customFontSize, disabled
     "aria-label": any;
 }): JSX.Element;
 export namespace ICON_SIZE_MAP {
-    let xs: string;
     let small: string;
     let medium: string;
     let large: string;

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

@@ -144,11 +144,6 @@ 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/List/List.d.ts

@@ -32,7 +32,7 @@ export function ListItem({ children, startDecorator, endDecorator, startDecorato
     rightBorder?: boolean;
     sx?: {};
 }): JSX.Element;
-export function List({ children, items, variant, color, size, orientation, dividers, selectionMode, selectedIndices, onSelectionChange, clickable, component, className, sx, ...props }: {
+export function List({ children, items, variant, color, size, orientation, dividers, selectionMode, loading, skeletonRows, empty, error, selectedIndices, onSelectionChange, clickable, component, className, sx, ...props }: {
     [x: string]: any;
     children: any;
     items: any;
@@ -42,6 +42,10 @@ export function List({ children, items, variant, color, size, orientation, divid
     orientation?: string;
     dividers?: boolean;
     selectionMode?: string;
+    loading?: boolean;
+    skeletonRows?: number;
+    empty: any;
+    error: any;
     selectedIndices?: any[];
     onSelectionChange: any;
     clickable?: boolean;

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

@@ -41,7 +41,7 @@ export function Paper({ children, surface, outlined, variant, sx, ...props }: st
  * @param {boolean} hoverable - Enable hover elevation
  * @param {object} props - Additional props
  */
-export function InteractivePaper({ children, surface, onClick, hoverable, sx, ...props }: string): JSX.Element;
+export function InteractivePaper({ children, surface, onClick, disabled, hoverable, sx, ...props }: string): JSX.Element;
 /**
  * ElevatedPaper Component
  * Paper with explicit elevation control

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

@@ -0,0 +1,11 @@
+/**
+ * @param {'empty'|'no-results'|'error'} type
+ * @param {ReactNode} icon    overrides the type's default
+ * @param {string}    title   the headline. Required — a state with no words is
+ *                            an empty box, which is what this replaces.
+ * @param {ReactNode} body    one line of explanation. Optional.
+ * @param {ReactNode} action  a Button. Optional, but an error without a way
+ *                            forward is just bad news.
+ */
+export function StateMessage({ type, icon, title, body, action, size, className, sx, ...props }: "empty" | "no-results" | "error"): JSX.Element;
+export default StateMessage;

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

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

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

@@ -1,4 +1,4 @@
-export function Stepper({ children, orientation, size, color, activeStep, clickable, onStepClick, dashedIncomplete, className, sx, ...props }: {
+export function Stepper({ children, orientation, size, color, activeStep, clickable, onStepClick, dashedIncomplete, variant, className, sx, ...props }: {
     [x: string]: any;
     children: any;
     orientation?: string;
@@ -8,14 +8,16 @@ export function Stepper({ children, orientation, size, color, activeStep, clicka
     clickable?: boolean;
     onStepClick: any;
     dashedIncomplete?: boolean;
+    variant?: string;
     className?: string;
     sx?: {};
 }): JSX.Element;
-export function Step({ children, icon, label, _index, className, sx, ...props }: {
+export function Step({ children, icon, label, disabled, _index, className, sx, ...props }: {
     [x: string]: any;
     children: any;
     icon: any;
     label: any;
+    disabled?: boolean;
     _index?: number;
     className?: string;
     sx?: {};
@@ -29,5 +31,6 @@ export function useStepperContext(): {
     onStepClick: any;
     dashedIncomplete: boolean;
     totalSteps: number;
+    variant: string;
 };
 export default Stepper;

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

@@ -1,4 +1,4 @@
-export function Table({ children, columns, rows, footerRows, variant, color, size, stripe, stickyHeader, stickyFooter, className, sx, ...props }: {
+export function Table({ children, columns, rows, footerRows, variant, color, loading, skeletonRows, empty, error, size, stripe, stickyHeader, stickyFooter, className, sx, ...props }: {
     [x: string]: any;
     children: any;
     columns: any;
@@ -6,6 +6,10 @@ export function Table({ children, columns, rows, footerRows, variant, color, siz
     footerRows: any;
     variant?: string;
     color?: string;
+    loading?: boolean;
+    skeletonRows?: number;
+    empty: any;
+    error: any;
     size?: string;
     stripe?: string;
     stickyHeader?: boolean;

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

@@ -0,0 +1,37 @@
+/** The ghost options for this subtree, or null when not ghosting. */
+export function useGhost(): any;
+/**
+ * The block itself.
+ *
+ * `currentColor` is deliberate: the sweep is the SURFACE showing through the
+ * block, so it needs no second token and cannot disagree with the background
+ * it sits on.
+ */
+export function ghostBlockSx({ radius, animate }?: {
+    radius?: string;
+    animate?: boolean;
+}): {
+    backgroundImage: string;
+    backgroundSize: string;
+    backgroundRepeat: string;
+    animation: string;
+    '@media (prefers-reduced-motion: reduce)': {
+        backgroundImage: string;
+        animation: string;
+    };
+    backgroundColor: string;
+    borderRadius: string;
+    color: string;
+    userSelect: string;
+    pointerEvents: string;
+};
+/**
+ * Marks a region as loading. Everything inside renders as a placeholder.
+ *
+ * @param {boolean} active     ghost while true; render normally when false
+ * @param {boolean} animate    sweep; false for a static block
+ * @param {string}  label      announced while loading
+ */
+export function Ghost({ active, animate, label, children, ...props }: boolean): JSX.Element;
+export const GHOST_KEYFRAMES: "\n@keyframes omni-ghost-sweep {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n";
+export default Ghost;

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

@@ -0,0 +1,67 @@
+/**
+ * The four states for a transparent control.
+ *
+ * @param {object}  [opts]
+ * @param {string}  [opts.selectedBg]    resting fill when selected
+ * @param {string}  [opts.selectedText]  text colour when selected
+ * @param {string}  [opts.selectedHover] fill on hover while selected
+ * @param {string}  [opts.selectedPressed] fill on press while selected
+ * @param {string}  [opts.muiPrefix]     'Mui' to use MUI's class-based
+ *                                       selectors (.Mui-disabled /
+ *                                       .Mui-focusVisible) instead of the
+ *                                       pseudo-classes. MUI sets `disabled` on
+ *                                       a real <button>, but its own
+ *                                       components carry the class and often
+ *                                       nothing else, so the plain selector
+ *                                       silently matches nothing there.
+ */
+export function scrimStates(opts?: {
+    selectedBg?: string;
+    selectedText?: string;
+    selectedHover?: string;
+    selectedPressed?: string;
+    muiPrefix?: string;
+}): {
+    [x: string]: {
+        outline: string;
+        outlineOffset: string;
+    } | {
+        backgroundColor: string;
+    } | {
+        color: string;
+        opacity: string;
+        cursor: string;
+        backgroundColor?: undefined;
+    };
+    '&:hover': {
+        backgroundColor: string;
+    };
+    '&:active': {
+        backgroundColor: string;
+    };
+} | {
+    '&.Mui-selected': {
+        '&:hover': {
+            backgroundColor: string;
+        };
+        '&:active': {
+            backgroundColor: string;
+        };
+        color?: string;
+        backgroundColor: string;
+    };
+    '&:hover': {
+        backgroundColor: string;
+    };
+    '&:active': {
+        backgroundColor: string;
+    };
+};
+export namespace FOCUS_RING {
+    let outline: string;
+    let outlineOffset: string;
+}
+export namespace DISABLED_STATE {
+    let opacity: string;
+    let cursor: string;
+}

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

@@ -17,7 +17,6 @@ export { DropZone } from "./DropZone";
 export { Divider } from "./Divider";
 export { Table } from "./Table";
 export { Tooltip } from "./Tooltip";
-export { Header } from "./Header";
 export { Sidebar } from "./Sidebar";
 export { MainLayout } from "./MainLayout";
 export { Link } from "./Link";
@@ -27,6 +26,7 @@ export default _default;
 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, 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 { Icon, IconShowcase } from "./Icon";
 export { Fab, FabShowcase } from "./Fab";
@@ -74,3 +74,4 @@ export { OmniTreeView, SolidTreeView, LightTreeView, DEFAULT_ITEMS, TreeBranch,
 export { OmniDesignProvider, useOmniDesign, ThemedZone, Surfaced } from "../OmniDesignProvider";
 export { CodeBlock, CopyButton } from "./CodeBlock/CodeBlock";
 export { BarChart, LineChart, PieChart, CHART_TOKENS, CHART_LABEL_TYPE } from "./Charts";
+export { Ghost, useGhost, ghostBlockSx } from "./_ghost";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omni-design/components",
-  "version": "0.7.10",
+  "version": "0.9.0",
   "description": "DynoDesign adaptive component library — token-driven React components with customizable CSS theming",
   "author": "Lise Noble",
   "license": "Apache-2.0",
@@ -39,7 +39,7 @@
     "start": "react-scripts start",
     "dev-api": "node dev-server.js",
     "build:app": "react-scripts build",
-    "build:lib": "rollup -c rollup.config.js && npm run build:types",
+    "build:lib": "npm run clean:lib && rollup -c rollup.config.js && npm run build:types",
     "build": "npm run build:lib",
     "test": "react-scripts test",
     "test:coverage": "react-scripts test --coverage --watchAll=false",
@@ -50,7 +50,8 @@
     "prepublishOnly": "npm run build:lib",
     "predeploy": "npm run build:app",
     "deploy": "gh-pages -d build",
-    "build:types": "npx -y -p typescript@5.9 tsc -p tsconfig.dts.json"
+    "build:types": "npx -y -p typescript@5.9 tsc -p tsconfig.dts.json",
+    "clean:lib": "rm -rf dist"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.0.0",
@@ -119,5 +120,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "^react-router/dom$": "<rootDir>/node_modules/react-router/dist/development/dom-export.js",
+      "^react-router-dom$": "<rootDir>/node_modules/react-router-dom/dist/index.js"
+    }
   }
 }

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

@@ -1,53 +0,0 @@
-/**
- * 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

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