@veritone-ce/design-system 2.8.9 → 2.9.0-next.0

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

@@ -12,10 +12,6 @@ export interface DialogOptions {
     preventEscapeDismiss?: boolean;
 }
 export declare function useDialog({ open, onDismiss: dismissDialog, preventOutsideDismiss, preventEscapeDismiss }: DialogOptions): {
-    labelId: string | undefined;
-    descriptionId: string | undefined;
-    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
     placement: import("@floating-ui/utils").Placement;
     strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
@@ -61,16 +57,9 @@ export declare function useDialog({ open, onDismiss: dismissDialog, preventOutsi
     open: boolean;
     dismiss: () => void;
 };
-export type DialogContextType = (ReturnType<typeof useDialog> & {
-    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
-}) | null;
+export type DialogContextType = ReturnType<typeof useDialog> | null;
 export declare const DialogContext: React.Context<DialogContextType>;
 export declare const useDialogContext: () => {
-    labelId: string | undefined;
-    descriptionId: string | undefined;
-    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
     placement: import("@floating-ui/utils").Placement;
     strategy: import("@floating-ui/utils").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
@@ -115,7 +104,4 @@ export declare const useDialogContext: () => {
     }) | undefined) => Record<string, unknown>;
     open: boolean;
     dismiss: () => void;
-} & {
-    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
-    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
 };

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

@@ -15,4 +15,4 @@ export type TablePaginationProps = {
     showPageNumberInput?: boolean;
     className?: string;
 };
-export default function TablePagination({ page, count, rowsPerPage, rowsPerPageOptions, rowsPerPageLabel, rowsPerPageVariant, showPageNumberInput, ...props }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export default function TablePagination({ page, count, rowsPerPage, rowsPerPageOptions, rowsPerPageLabel, rowsPerPageVariant, showPageNumberInput, onChangePage, onRowsPerPageChange, 'data-pendo-prev': dataPendoPrev, 'data-pendo-next': dataPendoNext, 'data-pendo-select': dataPendoSelect, className, ...props }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/styles/createPalette.d.ts

@@ -1,3 +1,14 @@
-import type { Palette } from './palette.js';
-import { type PaletteOptions } from './themeOptions.js';
+import type { Palette, PaletteAction, PaletteActionVariantsColors, PaletteBackground, PaletteBrand, PaletteColor, PaletteIndicator, PaletteStroke, PaletteSurfaceColors, PaletteTable, PaletteText, PaletteTooltip } from './palette.js';
+import { type PaletteActionOptions, type PaletteActionVariantsColorsOptions, type PaletteBackgroundOptions, type PaletteBrandOptions, type PaletteColorOptions, type PaletteIndicatorOptions, type PaletteOptions, type PaletteStrokeOptions, type PaletteSurfaceColorsOptions, type PaletteTableOptions, type PaletteTextOptions, type PaletteTooltipOptions } from './themeOptions.js';
+export declare function createPaletteColor(options: PaletteColorOptions): PaletteColor;
+export declare function createPaletteSurfaceColors(options: PaletteSurfaceColorsOptions): PaletteSurfaceColors;
+export declare function createPaletteActionVariantsColors(options: PaletteActionVariantsColorsOptions, disabled: PaletteSurfaceColors): PaletteActionVariantsColors;
+export declare function createPaletteBrand(options: PaletteBrandOptions, disabled: PaletteSurfaceColors): PaletteBrand;
+export declare function createPaletteText(options: PaletteTextOptions): PaletteText;
+export declare function createPaletteAction(options: PaletteActionOptions, disabled: PaletteSurfaceColors, text: PaletteColor): PaletteAction;
+export declare function createPaletteIndicator(options: PaletteIndicatorOptions, disabled: PaletteSurfaceColors): PaletteIndicator;
+export declare function createPaletteTable(options: PaletteTableOptions, disabled: PaletteSurfaceColors): PaletteTable;
+export declare function createPaletteTooltip(options: PaletteTooltipOptions): PaletteTooltip;
+export declare function createPaletteBackground(options: PaletteBackgroundOptions): PaletteBackground;
+export declare function createPaletteStroke(options: PaletteStrokeOptions): PaletteStroke;
 export declare function createPalette(options?: PaletteOptions): Palette;

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

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { type PaletteSurfaceColors } from '../../styles/index.js';
+import { type TypographyProps } from '../../Typography/index.js';
+import { type TabsProps } from '../Tabs/index.js';
+export type CardInset = 'small' | 'medium';
+export type DisableInset = 'horizontal' | 'vertical' | boolean;
+export type CardProps = React.ComponentPropsWithoutRef<'div'> & {
+    inset?: CardInset;
+    palette?: PaletteSurfaceColors;
+};
+declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    inset?: CardInset | undefined;
+    palette?: PaletteSurfaceColors | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default Card;
+export type CardStartProps = React.ComponentPropsWithoutRef<'div'> & {
+    disableInset?: DisableInset;
+};
+export declare const CardStart: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    disableInset?: DisableInset | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export type CardContentProps = React.ComponentPropsWithoutRef<'div'> & {
+    disableInset?: DisableInset;
+};
+export declare const CardContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    disableInset?: DisableInset | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export type CardEndProps = TypographyProps & {
+    disableInset?: DisableInset;
+};
+export declare const CardEnd: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    as?: keyof React.JSX.IntrinsicElements | undefined;
+    variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
+    color?: "inherit" | "disabled" | keyof import("../../styles/palette.js").PaletteText | undefined;
+    leadingTrim?: boolean | undefined;
+    children?: React.ReactNode;
+    'data-testid'?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+} & {
+    disableInset?: DisableInset | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export type CardTitleProps = TypographyProps & {
+    start?: React.ReactNode;
+    actions?: React.ReactNode;
+    containerProps?: CardStartProps;
+};
+export declare const CardTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    as?: keyof React.JSX.IntrinsicElements | undefined;
+    variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
+    color?: "inherit" | "disabled" | keyof import("../../styles/palette.js").PaletteText | undefined;
+    leadingTrim?: boolean | undefined;
+    children?: React.ReactNode;
+    'data-testid'?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+} & {
+    start?: React.ReactNode;
+    actions?: React.ReactNode;
+    containerProps?: CardStartProps | undefined;
+} & React.RefAttributes<HTMLHeadingElement>>;
+export type CardTabsProps = TabsProps & {
+    align?: 'start' | 'center';
+    actions?: React.ReactNode;
+};
+export declare function CardTabs({ align, actions, className, style, ...props }: CardTabsProps): import("react/jsx-runtime").JSX.Element;
+export type CardTypographyProps = TypographyProps;
+export declare const CardTypography: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    as?: keyof React.JSX.IntrinsicElements | undefined;
+    variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
+    color?: "inherit" | "disabled" | keyof import("../../styles/palette.js").PaletteText | undefined;
+    leadingTrim?: boolean | undefined;
+    children?: React.ReactNode;
+    'data-testid'?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLParagraphElement>>;
+export type CardDescriptionProps = TypographyProps;
+export declare const CardDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    as?: keyof React.JSX.IntrinsicElements | undefined;
+    variant?: "title" | "h1" | "h2" | "h3" | "h4" | "label" | "paragraph1" | "paragraph2" | "paragraph3" | "button" | "buttonSmall" | "input" | "statusChip" | undefined;
+    color?: "inherit" | "disabled" | keyof import("../../styles/palette.js").PaletteText | undefined;
+    leadingTrim?: boolean | undefined;
+    children?: React.ReactNode;
+    'data-testid'?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLParagraphElement>>;
+export type CardActionsProps = React.ComponentPropsWithoutRef<'div'>;
+export declare const CardActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/unstable/Card/index.d.ts

@@ -1,11 +1,2 @@
-import React from 'react';
-export type CardInset = 'small' | 'medium';
-export type CardProps = {
-    children?: React.ReactNode;
-    inset?: CardInset;
-    'data-testid'?: string;
-    style?: React.CSSProperties;
-    className?: string;
-};
-declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
-export default Card;
+export * from './components.js';
+export { default } from './components.js';

package/dist/types/unstable/Card/state.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export declare function useCard(): {
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+export type CardContextType = ReturnType<typeof useCard>;
+export declare const CardContext: React.Context<{
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+}>;
+export declare const useCardContext: () => {
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};

package/dist/types/unstable/StatCard/index.d.ts

@@ -0,0 +1,33 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { LoadingBoundaryProps } from '../suspense/index.js';
+import { CardProps } from '../Card/index.js';
+import { type PaletteSurfaceColors } from '../../styles/index.js';
+import { type ButtonProps } from '../../Button/index.js';
+export type StatCardProps = Omit<CardProps, 'inset'> & {
+    palette?: PaletteSurfaceColors;
+    selected?: boolean;
+    onSelect?(): void;
+};
+export declare function StatCard({ className, selected, onSelect, children, palette, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatCardSkeleton({ className, children, ...props }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export type StatCardContentProps = {
+    stat: ReactNode;
+    unit?: ReactNode;
+    size?: 'medium' | 'small';
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function Stat({ stat, size, unit, className, style }: StatCardContentProps): import("react/jsx-runtime").JSX.Element;
+export type StatCardLoadingBoundaryProps = LoadingBoundaryProps & StatCardProps & {
+    loadingChildren?: ReactNode;
+};
+export declare function StatCardLoadingBoundary({ loader, error, children, loadingChildren, ...cardProps }: StatCardLoadingBoundaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatSeparator(): import("react/jsx-runtime").JSX.Element;
+export type StatActionsProps = {
+    children?: ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+};
+export declare function StatActions(props: StatActionsProps): import("react/jsx-runtime").JSX.Element;
+export type StatButtonProps = Omit<ButtonProps, 'variant' | 'type'> & {};
+export declare function StatButton({ endIcon, className, ...buttonProps }: StatButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,5 +3,8 @@ export { default as Card } from './Card/index.js';
 export * from './Card/index.js';
 export { default as LinearProgress } from './LinearProgress/index.js';
 export * from './LinearProgress/index.js';
+export * from './skeleton/index.js';
+export * from './StatCard/index.js';
+export * from './suspense/index.js';
 export { default as Tabs } from './Tabs/index.js';
 export * from './Tabs/index.js';

package/dist/types/unstable/skeleton/index.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { type FormControlProps } from '../../FormControl/index.js';
+import { type CardProps, CardTitleProps } from '../Card/index.js';
+export type SkeletonProps = {
+    variant?: 'text' | 'rectangular' | 'rounded';
+    style?: React.CSSProperties;
+    children?: ReactNode;
+    className?: string;
+};
+export declare function Skeleton({ variant, children, style, className }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export type CardSkeletonProps = Omit<SkeletonProps, 'variant'> & CardProps;
+export declare function CardSkeleton({ inset, className, ...cardProps }: CardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export type FormControlSkeletonProps = FormControlProps & {};
+export declare function FormControlSkeleton({ label, children, ...formControlProps }: FormControlSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardTitleSkeleton({ start, actions, children, ...props }: CardTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/suspense/index.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export * from './loader.js';
+export type LoadingBoundaryProps = {
+    force?: boolean;
+    loader?: ReactNode;
+    error?: ReactNode;
+    children?: ReactNode;
+};
+export declare function LoadingBoundary(props: LoadingBoundaryProps): string | number | true | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element;

package/dist/types/unstable/suspense/loader.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type LoaderProps = {
+    style?: React.CSSProperties;
+    className?: string;
+};
+export declare function Loader(props: LoaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DialogLoader({ className, ...props }: LoaderProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "2.8.9",
+  "version": "2.9.0-next.0",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [
@@ -69,12 +69,6 @@
     "./baseline.css": "./dist/esm/styles/external/baseline.css",
     "./fonts/default.css": "./dist/esm/styles/external/fonts/default.css"
   },
-  "sideEffects": [
-    "src/styles/baseline.ts",
-    "src/fonts/default.ts",
-    "dist/esm/styles/baseline.js",
-    "dist/esm/styles/fonts/default.js"
-  ],
   "files": [
     "dist",
     "eslint-config"

package/dist/cjs/unstable/Card/index.js

@@ -1,33 +0,0 @@
-'use strict';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var styles_module = require('./styles.module.scss.js');
-var cx = require('../../styles/cx.js');
-require('../../styles/defaultThemeOptions.js');
-require('@capsizecss/core');
-require('color2k');
-require('../../styles/defaultTheme.js');
-require('../../styles/provider.client.js');
-require('../../styles/css-vars.js');
-
-const Card = React.forwardRef(
-  ({ inset = "medium", ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cx.cx(styles_module.default["card"], props.className),
-        "data-testid": props["data-testid"],
-        "data-inset": inset,
-        style: props.style,
-        children: props.children
-      }
-    );
-  }
-);
-
-exports.default = Card;

package/dist/esm/unstable/Card/index.js

@@ -1,29 +0,0 @@
-'use strict';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styles from './styles.module.scss.js';
-import { cx } from '../../styles/cx.js';
-import '../../styles/defaultThemeOptions.js';
-import '@capsizecss/core';
-import 'color2k';
-import '../../styles/defaultTheme.js';
-import '../../styles/provider.client.js';
-import '../../styles/css-vars.js';
-
-const Card = forwardRef(
-  ({ inset = "medium", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cx(styles["card"], props.className),
-        "data-testid": props["data-testid"],
-        "data-inset": inset,
-        style: props.style,
-        children: props.children
-      }
-    );
-  }
-);
-
-export { Card as default };