@wix/site-ui 1.19.0 → 1.21.0

package/dist/Accordion/index.css

@@ -43,14 +43,18 @@
   pointer-events: none;
 }
 
+.trigger-cbcjp2[data-disabled] .title-Akf754, .trigger-cbcjp2[data-disabled] .subtitle-wfobjk {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
 .small-ECItLE .trigger-cbcjp2 {
-  gap: 8px;
+  gap: 12px;
   padding-block: 12px;
   padding-inline: 0;
 }
 
 .large-FlJRwV .trigger-cbcjp2 {
-  gap: 12px;
+  gap: 32px;
   padding-block: 24px;
   padding-inline: 0;
 }
@@ -63,6 +67,33 @@
   padding-inline: 24px;
 }
 
+.title-Akf754 {
+  flex-direction: column;
+  flex: 1;
+  gap: 4px;
+  min-width: 0;
+  display: flex;
+}
+
+.subtitle-wfobjk {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-shade-3-color);
+}
+
+.suffix-O091QK {
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+}
+
+.small-ECItLE .suffix-O091QK {
+  gap: 8px;
+}
+
+.large-FlJRwV .suffix-O091QK {
+  gap: 12px;
+}
+
 .arrow-yZ7Nq2 {
   flex-shrink: 0;
   transition: transform .2s;

package/dist/Accordion/index.d.ts

@@ -24,6 +24,15 @@ export declare const Accordion: {
     Arrow: React_2.ForwardRefExoticComponent<ChevronDownProps & {
         className?: string | undefined;
     } & React_2.RefAttributes<SVGSVGElement>>;
+    Title: React_2.ForwardRefExoticComponent<Omit<Omit<TypographyProps, "variant">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLElement>>;
+    Subtitle: React_2.ForwardRefExoticComponent<Omit<React_2.HTMLAttributes<HTMLSpanElement>, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLSpanElement>>;
+    Suffix: React_2.ForwardRefExoticComponent<Omit<React_2.HTMLAttributes<HTMLSpanElement>, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
 export declare const AccordionSize: {
@@ -43,6 +52,13 @@ declare function Root<Value = any>({ className, size, variant, ...props }: WithS
 
 declare type Size = (typeof AccordionSize)[keyof typeof AccordionSize];
 
+declare interface TypographyProps extends React_2.HTMLAttributes<HTMLElement> {
+    variant?: TypographyVariant;
+    render?: React_2.ReactElement;
+}
+
+declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p1' | 'p2' | 'p3';
+
 declare type Variant = (typeof AccordionVariant)[keyof typeof AccordionVariant];
 
 declare type WithStringClassName<P> = Omit<P, 'className'> & {

package/dist/Accordion/index.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Accordion } from "@base-ui/react/accordion";
 import { ChevronDown } from "@wix/wix-ui-icons-common";
 import clsx from "clsx";
+import { Typography } from "../Typography/index.js";
 import * as __rspack_external_react from "react";
 const Accordion_module = {
     root: "root-jseiNO",
@@ -10,8 +11,11 @@ const Accordion_module = {
     box: "box-IGlTAZ",
     header: "header-YZESJq",
     trigger: "trigger-cbcjp2",
+    title: "title-Akf754",
+    subtitle: "subtitle-wfobjk",
     small: "small-ECItLE",
     large: "large-FlJRwV",
+    suffix: "suffix-O091QK",
     arrow: "arrow-yZ7Nq2",
     panel: "panel-Gp0XFK"
 };
@@ -54,12 +58,32 @@ const Arrow = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...
         "aria-hidden": "true",
         ...props
     }));
+const Title = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Typography, {
+        ref: ref,
+        variant: "p2",
+        render: /*#__PURE__*/ jsx("span", {}),
+        className: clsx(Accordion_module.title, className),
+        ...props
+    }));
+const Subtitle = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: clsx(Accordion_module.subtitle, className),
+        ...props
+    }));
+const Suffix = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: clsx(Accordion_module.suffix, className),
+        ...props
+    }));
 const Accordion_Accordion = {
     Item: Item,
     Header: Header,
     Trigger: Trigger,
     Panel: Panel,
     Root: Root,
-    Arrow: Arrow
+    Arrow: Arrow,
+    Title: Title,
+    Subtitle: Subtitle,
+    Suffix: Suffix
 };
 export { AccordionSize, AccordionVariant, Accordion_Accordion as Accordion };

package/dist/Breadcrumbs/index.css

@@ -0,0 +1,47 @@
+.root-uwc56U {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color, #000);
+}
+
+.list-HHG8hu {
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.item-yTmapi {
+  align-items: center;
+  padding: 4px 0;
+  display: flex;
+}
+
+.link-GDIKcZ {
+  color: inherit;
+  text-decoration: none;
+}
+
+.link-GDIKcZ:hover, .link-GDIKcZ:focus-visible {
+  opacity: .7;
+}
+
+.page-adRf_w {
+  color: inherit;
+}
+
+.separator-Kz0pCd {
+  pointer-events: none;
+  justify-content: center;
+  align-items: center;
+  min-width: 1.5em;
+  min-height: 1.5em;
+  display: flex;
+}
+
+.separatorIcon-vONtbc {
+  width: 1.5em;
+  height: 1.5em;
+}
+

package/dist/Breadcrumbs/index.d.ts

@@ -0,0 +1,32 @@
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { NavigationMenu } from '@base-ui/react/navigation-menu';
+import { NavigationMenuItemProps } from '@base-ui/react/navigation-menu';
+import { NavigationMenuLinkProps } from '@base-ui/react/navigation-menu';
+import { NavigationMenuListProps } from '@base-ui/react/navigation-menu';
+import * as React_2 from 'react';
+
+export declare const Breadcrumbs: {
+    Root: typeof Root;
+    List: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<NavigationMenuListProps, "ref"> & React_2.RefAttributes<HTMLUListElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLUListElement>>;
+    Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<NavigationMenuItemProps, "ref"> & React_2.RefAttributes<HTMLLIElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLLIElement>>;
+    Link: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<NavigationMenuLinkProps, "ref"> & React_2.RefAttributes<HTMLAnchorElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLAnchorElement>>;
+    Page: React_2.ForwardRefExoticComponent<{
+        className?: string | undefined;
+    } & Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+};
+
+declare function Root<Value = any>({ className, dir, separator, 'aria-label': ariaLabel, ...props }: WithStringClassName<NavigationMenu.Root.Props<Value>> & {
+    separator?: React_2.ReactNode;
+}): JSX_2.Element;
+
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
+};
+
+export { }

package/dist/Breadcrumbs/index.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+import { ChevronLeft, ChevronRight } from "@wix/wix-ui-icons-common";
+import clsx from "clsx";
+import * as __rspack_external_react from "react";
+const Breadcrumbs_module = {
+    root: "root-uwc56U",
+    list: "list-HHG8hu",
+    item: "item-yTmapi",
+    link: "link-GDIKcZ",
+    page: "page-adRf_w",
+    separator: "separator-Kz0pCd",
+    separatorIcon: "separatorIcon-vONtbc"
+};
+const BreadcrumbsContext = /*#__PURE__*/ __rspack_external_react.createContext({
+    separator: /*#__PURE__*/ jsx(ChevronRight, {
+        className: Breadcrumbs_module.separatorIcon
+    })
+});
+const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, children, ...props }, ref)=>{
+    const { separator } = __rspack_external_react.useContext(BreadcrumbsContext);
+    const childArray = __rspack_external_react.Children.toArray(children);
+    return /*#__PURE__*/ jsx(NavigationMenu.List, {
+        ref: ref,
+        className: clsx(Breadcrumbs_module.list, className),
+        ...props,
+        children: childArray.flatMap((child, index)=>0 === index ? [
+                child
+            ] : [
+                /*#__PURE__*/ jsx("li", {
+                    "aria-hidden": "true",
+                    role: "presentation",
+                    className: Breadcrumbs_module.separator,
+                    children: separator
+                }, `sep-${index}`),
+                child
+            ])
+    });
+});
+const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(NavigationMenu.Item, {
+        ref: ref,
+        className: clsx(Breadcrumbs_module.item, className),
+        ...props
+    }));
+const Link = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(NavigationMenu.Link, {
+        ref: ref,
+        className: clsx(Breadcrumbs_module.link, className),
+        ...props
+    }));
+const Page = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        "aria-current": "page",
+        ...props,
+        className: clsx(Breadcrumbs_module.page, className)
+    }));
+function Root({ className, dir, separator, 'aria-label': ariaLabel = 'Breadcrumbs', ...props }) {
+    const defaultSeparator = 'rtl' === dir ? /*#__PURE__*/ jsx(ChevronLeft, {
+        className: Breadcrumbs_module.separatorIcon
+    }) : /*#__PURE__*/ jsx(ChevronRight, {
+        className: Breadcrumbs_module.separatorIcon
+    });
+    return /*#__PURE__*/ jsx(BreadcrumbsContext.Provider, {
+        value: {
+            separator: separator ?? defaultSeparator
+        },
+        children: /*#__PURE__*/ jsx(NavigationMenu.Root, {
+            "aria-label": ariaLabel,
+            dir: dir,
+            ...props,
+            className: clsx(Breadcrumbs_module.root, className)
+        })
+    });
+}
+const Breadcrumbs = {
+    Root: Root,
+    List: List,
+    Item: Item,
+    Link: Link,
+    Page: Page
+};
+export { Breadcrumbs };

package/dist/index.d.ts

@@ -245,6 +245,15 @@ export declare const Accordion: {
     Arrow: React_2.ForwardRefExoticComponent<ChevronDownProps & {
         className?: string | undefined;
     } & React_2.RefAttributes<SVGSVGElement>>;
+    Title: React_2.ForwardRefExoticComponent<Omit<Omit<TypographyProps, "variant">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLElement>>;
+    Subtitle: React_2.ForwardRefExoticComponent<Omit<React_2.HTMLAttributes<HTMLSpanElement>, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLSpanElement>>;
+    Suffix: React_2.ForwardRefExoticComponent<Omit<React_2.HTMLAttributes<HTMLSpanElement>, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
 export declare const AccordionSize: {
@@ -362,6 +371,22 @@ export declare const AvatarSize: {
 
 declare type BaseProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Button_2>>;
 
+export declare const Breadcrumbs: {
+    Root: typeof Root_2;
+    List: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<NavigationMenuListProps, "ref"> & React_2.RefAttributes<HTMLUListElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLUListElement>>;
+    Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<NavigationMenuItemProps, "ref"> & React_2.RefAttributes<HTMLLIElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLLIElement>>;
+    Link: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<NavigationMenuLinkProps, "ref"> & React_2.RefAttributes<HTMLAnchorElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLAnchorElement>>;
+    Page: React_2.ForwardRefExoticComponent<{
+        className?: string | undefined;
+    } & Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+};
+
 export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLElement>>;
 
 declare interface ButtonProps extends BaseProps {
@@ -741,7 +766,7 @@ export declare const NavigationMenu: {
     Icon: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<NavigationMenuIconProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
-    Root: typeof Root_2;
+    Root: typeof Root_3;
     Portal: React_2.ForwardRefExoticComponent<Omit<NavigationMenuPortalProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 };
 
@@ -855,7 +880,7 @@ export declare const Radio: {
     Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<RadioIndicatorProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
-    Root: typeof Root_3;
+    Root: typeof Root_4;
 };
 
 export declare const RadioGroup: React_2.ForwardRefExoticComponent<Omit<Omit<RadioGroup_2.Props<unknown>, "ref">, "className"> & {
@@ -873,11 +898,15 @@ declare function Root<Value = any>({ className, size, variant, ...props }: WithS
     variant?: Variant;
 }): JSX_2.Element;
 
-declare function Root_2<Value = any>({ className, ...props }: WithStringClassName<NavigationMenu_2.Root.Props<Value>>): JSX_2.Element;
+declare function Root_2<Value = any>({ className, dir, separator, 'aria-label': ariaLabel, ...props }: WithStringClassName<NavigationMenu_2.Root.Props<Value>> & {
+    separator?: React_2.ReactNode;
+}): JSX_2.Element;
+
+declare function Root_3<Value = any>({ className, ...props }: WithStringClassName<NavigationMenu_2.Root.Props<Value>>): JSX_2.Element;
 
-declare function Root_3<Value>({ className, size, style, ...props }: RootProps<Value>): JSX_2.Element;
+declare function Root_4<Value>({ className, size, style, ...props }: RootProps<Value>): JSX_2.Element;
 
-declare function Root_4<Value extends number | readonly number[]>({ className, size, style, ...props }: RootProps_2<Value>): JSX_2.Element;
+declare function Root_5<Value extends number | readonly number[]>({ className, size, style, ...props }: RootProps_2<Value>): JSX_2.Element;
 
 declare type RootProps<Value> = WithStringClassName<Radio_2.Root.Props<Value>> & {
     size?: number;
@@ -987,7 +1016,7 @@ export declare const Slider: {
     Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SliderIndicatorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Root: typeof Root_4;
+    Root: typeof Root_5;
 };
 
 export declare const SliderSize: {

package/dist/index.js

@@ -2,6 +2,7 @@ export { Accordion, AccordionSize, AccordionVariant } from "./Accordion/index.js
 export { AlertDialog } from "./AlertDialog/index.js";
 export { Autocomplete } from "./Autocomplete/index.js";
 export { Avatar, AvatarSize } from "./Avatar/index.js";
+export { Breadcrumbs } from "./Breadcrumbs/index.js";
 export { Button } from "./Button/index.js";
 export { Checkbox, CheckboxSize } from "./Checkbox/index.js";
 export { CheckboxGroup } from "./CheckboxGroup/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.19.0",
+  "version": "1.21.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -78,5 +78,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "17e549237e9918f834dd2c826d1824086f56de229ed0139d0110d879"
+  "falconPackageHash": "a45e916c77f07bd74194aeb6f8facffce3c66221d508c95fc8a9a8b2"
 }