@veritone-ce/design-system 2.7.0 → 2.7.2

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

@@ -0,0 +1,67 @@
+'use strict';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import styles from './index.module.scss.js';
+import { forwardRef, Children, cloneElement } from 'react';
+import Button from '../../Button/index.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';
+import { NavigateBeforeIcon } from '../../Icon/internal.js';
+
+function Breadcrumbs(props) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      style: props.style,
+      className: cx(styles.breadcrumbs, props.className),
+      children: Children.toArray(props.children).map((child, i) => {
+        return cloneElement(child, {
+          isFirstBreadcrumb: i === 0
+        });
+      })
+    }
+  );
+}
+function ButtonBreadcrumb({
+  isFirstBreadcrumb,
+  className,
+  startIcon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      variant: "tertiary",
+      className: cx(
+        styles.breadcrumbButton,
+        isFirstBreadcrumb && styles.firstBreadcrumbButton,
+        className
+      ),
+      startIcon: isFirstBreadcrumb && /* @__PURE__ */ jsx(NavigateBeforeIcon, {}) || startIcon,
+      children
+    }
+  );
+}
+const HTMLLinkComponent = forwardRef(function({ to, ...rest }) {
+  return /* @__PURE__ */ jsx("a", { ...rest, href: to });
+});
+function LinkBreadcrumb({
+  LinkComponent = HTMLLinkComponent,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(LinkComponent, { to: props.to, children: /* @__PURE__ */ jsx(ButtonBreadcrumb, { isFirstBreadcrumb: props.isFirstBreadcrumb, children: props.children }) });
+}
+function SeparatorBreadcrumb() {
+  return /* @__PURE__ */ jsx("div", { className: styles.separator });
+}
+function CustomBreadcrumb(props) {
+  return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+}
+
+export { Breadcrumbs, ButtonBreadcrumb, CustomBreadcrumb, LinkBreadcrumb, SeparatorBreadcrumb };

package/dist/esm/unstable/Breadcrumbs/index.module.scss.js

@@ -0,0 +1,3 @@
+var styles = {"breadcrumbs":"vt_ce_Breadcrumbs_breadcrumbs__f9260dc0","breadcrumbButton":"vt_ce_Breadcrumbs_breadcrumbButton__8f08e75a","firstBreadcrumbButton":"vt_ce_Breadcrumbs_firstBreadcrumbButton__4d18e736","separator":"vt_ce_Breadcrumbs_separator__6b872c06"};
+
+export { styles as default };

package/dist/esm/unstable/index.js

@@ -1,3 +1,4 @@
 'use strict';
+export { Breadcrumbs, ButtonBreadcrumb, CustomBreadcrumb, LinkBreadcrumb, SeparatorBreadcrumb } from './Breadcrumbs/index.js';
 export { default as Card } from './Card/index.js';
 export { Tab, default as Tabs } from './Tabs/index.js';

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

@@ -84,6 +84,7 @@ export declare const defaultThemeOptions: {
                 on: string;
             };
             hover: string;
+            active: string;
         };
         tooltip: {
             surface: string;

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

@@ -7,6 +7,7 @@ export type PaletteSurfaceColors = {
 export type PaletteActionVariantsColors = {
     base: PaletteSurfaceColors;
     hover: PaletteSurfaceColors;
+    active: PaletteSurfaceColors;
     disabled: PaletteSurfaceColors;
 };
 export interface PaletteBrand {

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

@@ -11,6 +11,7 @@ export declare function isPaletteSurfaceColorsOptions(obj: unknown): obj is Pale
 export type PaletteActionVariantsColorsOptions = PaletteSurfaceColorsOptions | {
     base: PaletteSurfaceColorsOptions;
     hover?: PaletteSurfaceColorsOptions;
+    active?: PaletteSurfaceColorsOptions;
     disabled?: PaletteSurfaceColorsOptions;
 };
 export declare function isPaletteActionVariantsColorsOptions(obj: unknown): obj is PaletteActionVariantsColorsOptions;

package/dist/types/unstable/Breadcrumbs/factory.d.ts

@@ -0,0 +1,5 @@
+import { LinkBreadcrumbProps, type LinkComponentType } from './index.js';
+export type LinkBreadcrumbFactoryOptions = {
+    LinkComponent: LinkComponentType;
+};
+export declare function createLinkBreadcrumbComponent({ LinkComponent }: LinkBreadcrumbFactoryOptions): (props: LinkBreadcrumbProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,29 @@
+import { type ComponentType, CSSProperties, ReactNode } from 'react';
+import { type ButtonProps } from '../../Button/index.js';
+export type BreadcrumbsProps = {
+    children: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+};
+export declare function Breadcrumbs(props: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export type ButtonBreadcrumbProps = Omit<ButtonProps, 'variant'> & {
+    isFirstBreadcrumb?: boolean;
+};
+export declare function ButtonBreadcrumb({ isFirstBreadcrumb, className, startIcon, children, ...props }: ButtonBreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export type LinkComponentTypeProps = {
+    to: string;
+    children?: ReactNode;
+};
+export type LinkComponentType = ComponentType<LinkComponentTypeProps>;
+export type LinkBreadcrumbProps = {
+    LinkComponent?: LinkComponentType;
+    to: string;
+    children: ReactNode;
+    isFirstBreadcrumb?: boolean;
+};
+export declare function LinkBreadcrumb({ LinkComponent, ...props }: LinkBreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function SeparatorBreadcrumb(): import("react/jsx-runtime").JSX.Element;
+export type CustomBreadcrumbProps = {
+    children?: ReactNode;
+};
+export declare function CustomBreadcrumb(props: CustomBreadcrumbProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,4 @@
+export * from './Breadcrumbs/index.js';
 export { default as Card } from './Card/index.js';
 export * from './Card/index.js';
 export { default as Tabs } from './Tabs/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "2.7.0",
+  "version": "2.7.2",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [
@@ -139,14 +139,10 @@
     "@mui/material": "^5.10.8",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rpldy/mock-sender": "^1.8.1",
-    "@storybook/addon-a11y": "8.4.6",
-    "@storybook/addon-essentials": "8.4.6",
-    "@storybook/addon-interactions": "8.4.6",
-    "@storybook/addon-links": "8.4.6",
-    "@storybook/blocks": "8.4.6",
-    "@storybook/react": "8.4.6",
-    "@storybook/react-vite": "8.4.6",
-    "@storybook/test": "8.4.6",
+    "@storybook/addon-a11y": "9.0.16",
+    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/addon-links": "9.0.16",
+    "@storybook/react-vite": "9.0.16",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.5.2",
@@ -157,7 +153,7 @@
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^1.3.1",
+    "@vitest/coverage-v8": "^3.2.4",
     "auto": "^11.1.1",
     "autoprefixer": "^10.4.17",
     "chromatic": "^11.2.0",
@@ -172,7 +168,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.11.1",
+    "eslint-plugin-storybook": "^9.0.16",
     "husky": "8.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^24.0.0",
@@ -194,11 +190,11 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-preserve-directives": "^0.3.0",
     "sass": "^1.70.0",
-    "storybook": "^8.4.6",
+    "storybook": "^9.0.16",
     "typescript": "^5.0.0",
     "typescript-plugin-css-modules": "^5.0.2",
-    "vite": "^6.0.2",
-    "vitest": "^1.3.1"
+    "vite": "^7.0.4",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.4",