@stainless-api/ui-primitives 0.1.0-beta.21 → 0.1.0-beta.23

package/dist/{Accordion-DLQE3Td6.js → Accordion-CL3Oarbz.js}

@@ -3,14 +3,14 @@ import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Accordion.tsx
-function Accordion({ className, children,...props }) {
+function Accordion({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("details", {
 		className: clsx("stl-ui-accordion", className),
 		...props,
 		children
 	});
 }
-function AccordionSummary({ children, className,...props }) {
+function AccordionSummary({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx("summary", {
 		className: clsx("stl-ui-accordion__summary", className),
 		...props,
@@ -18,7 +18,7 @@ function AccordionSummary({ children, className,...props }) {
 	});
 }
 Accordion.Summary = AccordionSummary;
-function AccordionGroup({ className, children,...props }) {
+function AccordionGroup({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("stl-ui-accordion-group", className),
 		...props,

package/dist/{Accordion-CJL9SWwS.d.ts → Accordion-Cj5GURin.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/Accordion.d.ts
 type AccordionProps = React.ComponentProps<'details'>;
@@ -7,7 +7,7 @@ declare function Accordion({
   className,
   children,
   ...props
-}: AccordionProps): react_jsx_runtime3.JSX.Element;
+}: AccordionProps): react_jsx_runtime0.JSX.Element;
 declare namespace Accordion {
   var Summary: typeof AccordionSummary;
   var Group: typeof AccordionGroup;
@@ -16,11 +16,11 @@ declare function AccordionSummary({
   children,
   className,
   ...props
-}: React.ComponentProps<'summary'>): react_jsx_runtime3.JSX.Element;
+}: React.ComponentProps<'summary'>): react_jsx_runtime0.JSX.Element;
 declare function AccordionGroup({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { AccordionProps as n, Accordion as t };

package/dist/{Button-DwndlytB.d.ts → Button-CxQtPObH.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { LucideIcon } from "lucide-react";
 
 //#region src/components/Button.d.ts
@@ -17,17 +17,17 @@ type ButtonBranch = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
   href?: never;
 };
 type ButtonProps = AnchorBranch | ButtonBranch;
-declare function Button(props: ButtonProps): react_jsx_runtime0.JSX.Element;
+declare function Button(props: ButtonProps): react_jsx_runtime2.JSX.Element;
 declare namespace Button {
   var Label: ({
     className,
     ...rest
-  }: LabelProps) => react_jsx_runtime0.JSX.Element;
+  }: LabelProps) => react_jsx_runtime2.JSX.Element;
   var Icon: ({
     className,
     icon: Icon,
     size
-  }: IconProps) => react_jsx_runtime0.JSX.Element;
+  }: IconProps) => react_jsx_runtime2.JSX.Element;
 }
 type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
 type IconProps = {

package/dist/{Button-DBhd6kU7.js → Button-DFAg4M-E.js}

@@ -18,7 +18,7 @@ function Button(props) {
 		"stl-ui-button--size-lg": props.size === "lg"
 	}, "not-content", "stl-ui-not-prose", props.className);
 	if ("href" in props) {
-		const { href,...rest$1 } = props;
+		const { href, ...rest$1 } = props;
 		return /* @__PURE__ */ jsx("a", {
 			href,
 			...rest$1,
@@ -26,7 +26,7 @@ function Button(props) {
 			children
 		});
 	}
-	const { type,...rest } = props;
+	const { type, ...rest } = props;
 	return /* @__PURE__ */ jsx("button", {
 		type: type ?? "button",
 		...rest,
@@ -34,7 +34,7 @@ function Button(props) {
 		children
 	});
 }
-Button.Label = function ButtonLabel({ className,...rest }) {
+Button.Label = function ButtonLabel({ className, ...rest }) {
 	return /* @__PURE__ */ jsx("span", {
 		className: clsx("stl-ui-button-label leading-none", className),
 		...rest

package/dist/{Callout-UZQRuCQ5.js → Callout-BGkXD7D2.js}

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, CircleAlert, Info, Lightbulb, OctagonAlert, TriangleAlert } from "lucide-react";
 
 //#region src/components/Callout.tsx
-function Callout({ variant = "info", className, children,...props }) {
+function Callout({ variant = "info", className, children, ...props }) {
 	const classes = clsx("stl-ui-callout", `stl-ui-callout--${variant}`, className);
 	const Icon = {
 		info: Info,

package/dist/{Callout-CMz3Yl_5.d.ts → Callout-DlwbfFHm.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/Callout.d.ts
 type CalloutVariant = 'info' | 'note' | 'tip' | 'success' | 'warning' | 'danger';
@@ -13,6 +13,6 @@ declare function Callout({
   className,
   children,
   ...props
-}: CalloutProps): react_jsx_runtime2.JSX.Element;
+}: CalloutProps): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { CalloutProps as n, CalloutVariant as r, Callout as t };

package/dist/components/Accordion.d.ts

@@ -1,2 +1,2 @@
-import { n as AccordionProps, t as Accordion } from "../Accordion-CJL9SWwS.js";
+import { n as AccordionProps, t as Accordion } from "../Accordion-Cj5GURin.js";
 export { Accordion, AccordionProps };

package/dist/components/Accordion.js

@@ -1,3 +1,3 @@
-import { t as Accordion } from "../Accordion-DLQE3Td6.js";
+import { t as Accordion } from "../Accordion-CL3Oarbz.js";
 
 export { Accordion };

package/dist/components/Button.d.ts

@@ -1,2 +1,2 @@
-import { n as ButtonProps, r as ButtonVariant, t as Button } from "../Button-DwndlytB.js";
+import { n as ButtonProps, r as ButtonVariant, t as Button } from "../Button-CxQtPObH.js";
 export { Button, ButtonProps, ButtonVariant };

package/dist/components/Button.js

@@ -1,3 +1,3 @@
-import { t as Button } from "../Button-DBhd6kU7.js";
+import { t as Button } from "../Button-DFAg4M-E.js";
 
 export { Button };

package/dist/components/Callout.d.ts

@@ -1,2 +1,2 @@
-import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-CMz3Yl_5.js";
+import { n as CalloutProps, r as CalloutVariant, t as Callout } from "../Callout-DlwbfFHm.js";
 export { Callout, CalloutProps, CalloutVariant };

package/dist/components/Callout.js

@@ -1,3 +1,3 @@
-import { t as Callout } from "../Callout-UZQRuCQ5.js";
+import { t as Callout } from "../Callout-BGkXD7D2.js";
 
 export { Callout };

package/dist/index.d.ts

@@ -1,5 +1,170 @@
-import { n as AccordionProps, t as Accordion } from "./Accordion-CJL9SWwS.js";
-import { n as ButtonProps, r as ButtonVariant, t as Button } from "./Button-DwndlytB.js";
-import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-CMz3Yl_5.js";
-import { t as DropdownButton } from "./DropdownButton-zcvep_xH.js";
-export { Accordion, AccordionProps, Button, ButtonProps, ButtonVariant, Callout, CalloutProps, CalloutVariant, DropdownButton };
+import { n as AccordionProps, t as Accordion } from "./Accordion-Cj5GURin.js";
+import { n as ButtonProps, r as ButtonVariant, t as Button } from "./Button-CxQtPObH.js";
+import { n as CalloutProps, r as CalloutVariant, t as Callout } from "./Callout-DlwbfFHm.js";
+import * as react0 from "react";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
+
+//#region src/components/dropdown/DropdownMenu.d.ts
+declare function Menu({
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime21.JSX.Element;
+declare namespace Menu {
+  var Item: typeof MenuItem;
+  var ItemText: typeof MenuItemText;
+  var ItemTemplate: typeof MenuItemTemplate;
+}
+declare function MenuItemText({
+  className,
+  subtle,
+  ...props
+}: ComponentProps<'span'> & {
+  subtle?: boolean;
+}): react_jsx_runtime21.JSX.Element;
+type MenuItemBaseProps = {
+  children?: React.ReactNode;
+  value: string;
+  isExternalLink?: boolean;
+  isSelected?: boolean;
+};
+type MenuItemWithHref = MenuItemBaseProps & ComponentProps<'a'> & {
+  href: string;
+};
+type MenuItemWithoutHref = MenuItemBaseProps & ComponentProps<'button'> & {
+  href?: never;
+};
+type MenuItemProps = MenuItemWithHref | MenuItemWithoutHref;
+declare function MenuItem({
+  children,
+  value,
+  href,
+  isExternalLink,
+  isSelected,
+  ...props
+}: MenuItemProps): react_jsx_runtime21.JSX.Element;
+/**
+ * A template component that defines the content to be displayed in the dropdown trigger
+ * when a menu item is selected. This template is used to customize the appearance of
+ * the selected item in the trigger button.
+ *
+ * @param props - Standard HTML template element props
+ * @returns A template element marked with the "selected-template" data part
+ */
+declare function MenuItemTemplate({
+  ...props
+}: ComponentProps<'template'>): react_jsx_runtime21.JSX.Element;
+//#endregion
+//#region src/components/dropdown/Dropdown.d.ts
+declare function Dropdown({
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime21.JSX.Element;
+declare namespace Dropdown {
+  var Menu: typeof Menu;
+  var MenuItem: ({
+    children,
+    value,
+    href,
+    isExternalLink,
+    isSelected,
+    ...props
+  }: ({
+    children?: React.ReactNode;
+    value: string;
+    isExternalLink?: boolean;
+    isSelected?: boolean;
+  } & react0.ClassAttributes<HTMLAnchorElement> & react0.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+  }) | ({
+    children?: React.ReactNode;
+    value: string;
+    isExternalLink?: boolean;
+    isSelected?: boolean;
+  } & react0.ClassAttributes<HTMLButtonElement> & react0.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+  })) => react_jsx_runtime21.JSX.Element;
+  var MenuItemText: ({
+    className,
+    subtle,
+    ...props
+  }: ComponentProps<"span"> & {
+    subtle?: boolean;
+  }) => react_jsx_runtime21.JSX.Element;
+  var MenuItemTemplate: ({
+    ...props
+  }: ComponentProps<"template">) => react_jsx_runtime21.JSX.Element;
+  var Trigger: ({
+    className,
+    ...props
+  }: ComponentProps<"button">) => react_jsx_runtime21.JSX.Element;
+  var TriggerSelectedItem: ({
+    className,
+    ...props
+  }: ComponentProps<"div">) => react_jsx_runtime21.JSX.Element;
+  var TriggerIcon: ({
+    className,
+    ...props
+  }: ComponentProps<"span">) => react_jsx_runtime21.JSX.Element;
+  var Icon: ({
+    className,
+    ...props
+  }: ComponentProps<"div">) => react_jsx_runtime21.JSX.Element;
+}
+//#endregion
+//#region src/components/dropdown/DropdownButton.d.ts
+declare function DropdownButton({
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime21.JSX.Element;
+declare namespace DropdownButton {
+  var Menu: typeof Menu;
+  var MenuItem: ({
+    children,
+    value,
+    href,
+    isExternalLink,
+    isSelected,
+    ...props
+  }: ({
+    children?: React.ReactNode;
+    value: string;
+    isExternalLink?: boolean;
+    isSelected?: boolean;
+  } & react0.ClassAttributes<HTMLAnchorElement> & react0.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+  }) | ({
+    children?: React.ReactNode;
+    value: string;
+    isExternalLink?: boolean;
+    isSelected?: boolean;
+  } & react0.ClassAttributes<HTMLButtonElement> & react0.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+  })) => react_jsx_runtime21.JSX.Element;
+  var MenuItemText: ({
+    className,
+    subtle,
+    ...props
+  }: ComponentProps<"span"> & {
+    subtle?: boolean;
+  }) => react_jsx_runtime21.JSX.Element;
+  var PrimaryAction: ({
+    className,
+    ...props
+  }: ComponentProps<"button">) => react_jsx_runtime21.JSX.Element;
+  var PrimaryActionText: ({
+    children
+  }: {
+    children?: React.ReactNode;
+  }) => react_jsx_runtime21.JSX.Element;
+  var Trigger: ({
+    className,
+    ...props
+  }: ComponentProps<"button">) => react_jsx_runtime21.JSX.Element;
+  var Icon: ({
+    className,
+    ...props
+  }: ComponentProps<"div">) => react_jsx_runtime21.JSX.Element;
+}
+//#endregion
+export { Accordion, AccordionProps, Button, ButtonProps, ButtonVariant, Callout, CalloutProps, CalloutVariant, Dropdown, DropdownButton };

package/dist/index.js

@@ -1,6 +1,176 @@
-import { t as Button } from "./Button-DBhd6kU7.js";
-import { t as DropdownButton } from "./DropdownButton-DoYDi8tB.js";
-import { t as Callout } from "./Callout-UZQRuCQ5.js";
-import { t as Accordion } from "./Accordion-DLQE3Td6.js";
+import { t as Button } from "./Button-DFAg4M-E.js";
+import { t as Callout } from "./Callout-BGkXD7D2.js";
+import { t as Accordion } from "./Accordion-CL3Oarbz.js";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronsUpDown, ExternalLink } from "lucide-react";
 
-export { Accordion, Button, Callout, DropdownButton };
+//#region src/components/dropdown/DropdownMenu.tsx
+function Menu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "listbox",
+		"data-state": "closed",
+		"data-part": "menu",
+		className: clsx("stl-ui-dropdown-menu", className)
+	});
+}
+function MenuItemText({ className, subtle, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-part": "item-text",
+		className: clsx(`stl-ui-dropdown-menu__item-text`, { "stl-ui-dropdown-menu__item-text--subtle": subtle }, className)
+	});
+}
+function MenuItem({ children, value, href, isExternalLink, isSelected, ...props }) {
+	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "stl-ui-dropdown-menu__item-content",
+			children
+		}),
+		isSelected && /* @__PURE__ */ jsx("div", {
+			className: "stl-ui-dropdown-menu__item-icon",
+			"data-part": "item-selected-icon",
+			children: /* @__PURE__ */ jsx(CheckIcon, { size: 16 })
+		}),
+		isExternalLink && /* @__PURE__ */ jsx("div", {
+			className: "stl-ui-dropdown-menu__item-subtle-icon",
+			"data-part": "item-external-link-icon",
+			children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
+		})
+	] });
+	if (href) return /* @__PURE__ */ jsx("a", {
+		role: "option",
+		"data-part": "item",
+		"data-value": value,
+		"aria-selected": isSelected,
+		href,
+		...props,
+		className: clsx("stl-ui-dropdown-menu__item", "stl-ui-dropdown-menu__item-link", props.className),
+		children: inner
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		role: "option",
+		"data-part": "item",
+		"data-value": value,
+		"aria-selected": isSelected,
+		className: clsx("stl-ui-dropdown-menu__item", props.className),
+		children: inner
+	});
+}
+/**
+* A template component that defines the content to be displayed in the dropdown trigger
+* when a menu item is selected. This template is used to customize the appearance of
+* the selected item in the trigger button.
+*
+* @param props - Standard HTML template element props
+* @returns A template element marked with the "selected-template" data part
+*/
+function MenuItemTemplate({ ...props }) {
+	return /* @__PURE__ */ jsx("template", {
+		"data-part": "selected-template",
+		...props
+	});
+}
+Menu.Item = MenuItem;
+Menu.ItemText = MenuItemText;
+Menu.ItemTemplate = MenuItemTemplate;
+
+//#endregion
+//#region src/components/dropdown/Dropdown.tsx
+function Trigger$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		"data-part": "trigger",
+		className: clsx("stl-ui-dropdown__button", className),
+		children: props.children
+	});
+}
+function TriggerSelectedItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-part": "trigger-selected",
+		className: clsx("stl-ui-dropdown__trigger-selected", className)
+	});
+}
+function TriggerIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-part": "trigger-icon",
+		className: clsx("stl-ui-dropdown__trigger-icon", className)
+	});
+}
+function Icon$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-part": "item-icon",
+		className: clsx("stl-ui-dropdown__icon", className)
+	});
+}
+function Dropdown({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-haspopup": "listbox",
+		"aria-expanded": "false",
+		className: clsx("stl-ui-dropdown stl-ui-not-prose not-content", className)
+	});
+}
+Dropdown.Menu = Menu;
+Dropdown.MenuItem = Menu.Item;
+Dropdown.MenuItemText = Menu.ItemText;
+Dropdown.MenuItemTemplate = Menu.ItemTemplate;
+Dropdown.Trigger = Trigger$1;
+Dropdown.TriggerSelectedItem = TriggerSelectedItem;
+Dropdown.TriggerIcon = TriggerIcon;
+Dropdown.Icon = Icon$1;
+
+//#endregion
+//#region src/components/dropdown/DropdownButton.tsx
+function PrimaryActionText({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-part": "primary-action-text",
+		children
+	});
+}
+function PrimaryAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		"data-part": "primary-action",
+		className: clsx("stl-ui-dropdown__button stl-ui-dropdown-button--action", className)
+	});
+}
+function Trigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		"data-part": "trigger",
+		className: clsx("stl-ui-dropdown__button stl-ui-dropdown-button__trigger", className),
+		children: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 16 })
+	});
+}
+function Icon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-part": "item-icon",
+		...props,
+		className: clsx("stl-ui-dropdown__icon", className)
+	});
+}
+function DropdownButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-haspopup": "listbox",
+		"aria-expanded": "false",
+		className: clsx("stl-ui-dropdown stl-ui-not-prose not-content", className)
+	});
+}
+DropdownButton.Menu = Menu;
+DropdownButton.MenuItem = Menu.Item;
+DropdownButton.MenuItemText = Menu.ItemText;
+DropdownButton.PrimaryAction = PrimaryAction;
+DropdownButton.PrimaryActionText = PrimaryActionText;
+DropdownButton.Trigger = Trigger;
+DropdownButton.Icon = Icon;
+
+//#endregion
+export { Accordion, Button, Callout, Dropdown, DropdownButton };

package/dist/scripts/index.d.ts

@@ -9,4 +9,15 @@ declare function initDropdownButton({
   onPrimaryAction: (primaryActionElement: Element) => void;
 }): void;
 //#endregion
-export { initDropdownButton };
+//#region src/scripts/dropdown.d.ts
+declare function initDropdown({
+  root,
+  onSelect,
+  initialValue
+}: {
+  root?: Element | null;
+  onSelect?: (value: string) => void;
+  initialValue?: string;
+}): void;
+//#endregion
+export { initDropdown, initDropdownButton };