@omni-design/components 0.7.8 → 0.8.0

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

@@ -1,4 +1,4 @@
-export function BottomNavigation({ items, value: controlledValue, defaultValue, onChange, showLabels, variant, orientation, barColor, fixed, "aria-label": ariaLabel, className, sx, ...props }: {
+export function BottomNavigation({ items, value: controlledValue, defaultValue, onChange, showLabels, variant, orientation, barColor, fabAction, fabPosition, fixed, "aria-label": ariaLabel, className, sx, ...props }: {
     [x: string]: any;
     items?: any[];
     value: any;
@@ -8,6 +8,8 @@ export function BottomNavigation({ items, value: controlledValue, defaultValue,
     variant?: string;
     orientation?: string;
     barColor?: string;
+    fabAction: any;
+    fabPosition?: string;
     fixed?: boolean;
     "aria-label"?: string;
     className?: string;

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/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/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

@@ -11,11 +11,12 @@ export function Stepper({ children, orientation, size, color, activeStep, clicka
     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?: {};

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.8",
+  "version": "0.8.0",
   "description": "DynoDesign adaptive component library — token-driven React components with customizable CSS theming",
   "author": "Lise Noble",
   "license": "Apache-2.0",