@stainless-api/ui-primitives 0.1.0-beta.18 → 0.1.0-beta.19

package/.turbo/turbo-build.log

@@ -1,5 +1,35 @@
 
 
-> @stainless-api/ui-primitives@0.1.0-beta.10 build /Users/segphault/Development/stl-api-docs/packages/ui-primitives
-> tsc
+> @stainless-api/ui-primitives@0.1.0-beta.17 build /Users/maxfreundlich/code/work/stl-api-docs/packages/ui-primitives
+> tsdown
 
+ℹ tsdown v0.15.12 powered by rolldown v1.0.0-beta.45
+ℹ Using tsdown config: /Users/maxfreundlich/code/work/stl-api-docs/packages/ui-primitives/tsdown.config.ts
+ℹ entry: src/index.ts, src/styles.css, src/components/Accordion.tsx, src/components/Button.tsx, src/components/Callout.tsx, src/components/DropdownButton.tsx, src/scripts/index.ts
+ℹ tsconfig: tsconfig.json
+ℹ Build start
+ℹ Cleaning 24 files
+ℹ dist/scripts/index.js                 1.21 kB │ gzip: 0.48 kB
+ℹ dist/index.js                         0.29 kB │ gzip: 0.16 kB
+ℹ dist/components/DropdownButton.js     0.10 kB │ gzip: 0.09 kB
+ℹ dist/components/Accordion.js          0.08 kB │ gzip: 0.08 kB
+ℹ dist/components/Callout.js            0.07 kB │ gzip: 0.08 kB
+ℹ dist/components/Button.js             0.07 kB │ gzip: 0.08 kB
+ℹ dist/styles.js                        0.01 kB │ gzip: 0.03 kB
+ℹ dist/styles.css                      40.38 kB │ gzip: 6.94 kB
+ℹ dist/DropdownButton-DoYDi8tB.js       2.69 kB │ gzip: 0.70 kB
+ℹ dist/Button-DBhd6kU7.js               1.51 kB │ gzip: 0.55 kB
+ℹ dist/Callout-UZQRuCQ5.js              0.82 kB │ gzip: 0.44 kB
+ℹ dist/Accordion-DLQE3Td6.js            0.80 kB │ gzip: 0.30 kB
+ℹ dist/index.d.ts                       0.46 kB │ gzip: 0.20 kB
+ℹ dist/scripts/index.d.ts               0.30 kB │ gzip: 0.19 kB
+ℹ dist/components/Callout.d.ts          0.14 kB │ gzip: 0.11 kB
+ℹ dist/components/Button.d.ts           0.14 kB │ gzip: 0.10 kB
+ℹ dist/components/Accordion.d.ts        0.12 kB │ gzip: 0.09 kB
+ℹ dist/components/DropdownButton.d.ts   0.10 kB │ gzip: 0.08 kB
+ℹ dist/DropdownButton-zcvep_xH.d.ts     1.38 kB │ gzip: 0.40 kB
+ℹ dist/Button-DwndlytB.d.ts             1.27 kB │ gzip: 0.52 kB
+ℹ dist/Accordion-CJL9SWwS.d.ts          0.74 kB │ gzip: 0.32 kB
+ℹ dist/Callout-CMz3Yl_5.d.ts            0.57 kB │ gzip: 0.33 kB
+ℹ 22 files, total: 53.24 kB
+✔ Build complete in 761ms

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stainless-api/ui-primitives
 
+## 0.1.0-beta.19
+
+### Patch Changes
+
+- 58040d8: feat: ui primitives updates, cursor support
+
 ## 0.1.0-beta.18
 
 ### Minor Changes

package/dist/Accordion-CJL9SWwS.d.ts

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

package/dist/Accordion-DLQE3Td6.js

@@ -0,0 +1,31 @@
+import React from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Accordion.tsx
+function Accordion({ className, children,...props }) {
+	return /* @__PURE__ */ jsx("details", {
+		className: clsx("stl-ui-accordion", className),
+		...props,
+		children
+	});
+}
+function AccordionSummary({ children, className,...props }) {
+	return /* @__PURE__ */ jsx("summary", {
+		className: clsx("stl-ui-accordion__summary", className),
+		...props,
+		children
+	});
+}
+Accordion.Summary = AccordionSummary;
+function AccordionGroup({ className, children,...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("stl-ui-accordion-group", className),
+		...props,
+		children
+	});
+}
+Accordion.Group = AccordionGroup;
+
+//#endregion
+export { Accordion as t };

package/dist/Button-DBhd6kU7.js

@@ -0,0 +1,51 @@
+import React from "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Button.tsx
+function Button(props) {
+	const { variant, children } = props;
+	const classes = clsx("stl-ui-button", {
+		"stl-ui-button--outline": variant === "outline",
+		"stl-ui-button--ghost": variant === "ghost",
+		"stl-ui-button--accent": variant === "accent",
+		"stl-ui-button--accent-muted": variant === "accent-muted",
+		"stl-ui-button--muted": variant === "muted",
+		"stl-ui-button--success": variant === "success",
+		"stl-ui-button--destructive": variant === "destructive"
+	}, {
+		"stl-ui-button--size-sm": props.size === "sm",
+		"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;
+		return /* @__PURE__ */ jsx("a", {
+			href,
+			...rest$1,
+			className: classes,
+			children
+		});
+	}
+	const { type,...rest } = props;
+	return /* @__PURE__ */ jsx("button", {
+		type: type ?? "button",
+		...rest,
+		className: classes,
+		children
+	});
+}
+Button.Label = function ButtonLabel({ className,...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("stl-ui-button-label leading-none", className),
+		...rest
+	});
+};
+Button.Icon = function ButtonIcon({ className, icon: Icon, size = 18 }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("stl-ui-button__icon", className),
+		children: /* @__PURE__ */ jsx(Icon, { size })
+	});
+};
+
+//#endregion
+export { Button as t };

package/dist/Button-DwndlytB.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { LucideIcon } from "lucide-react";
+
+//#region src/components/Button.d.ts
+type ButtonVariant = 'outline' | 'ghost' | 'accent' | 'accent-muted' | 'muted' | 'success' | 'destructive' | 'default';
+type BaseProps = {
+  variant?: ButtonVariant;
+  className?: string;
+  children?: React.ReactNode;
+  size?: 'sm' | 'lg' | 'default';
+};
+type AnchorBranch = BaseProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & {
+  href: string;
+};
+type ButtonBranch = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & {
+  href?: never;
+};
+type ButtonProps = AnchorBranch | ButtonBranch;
+declare function Button(props: ButtonProps): react_jsx_runtime0.JSX.Element;
+declare namespace Button {
+  var Label: ({
+    className,
+    ...rest
+  }: LabelProps) => react_jsx_runtime0.JSX.Element;
+  var Icon: ({
+    className,
+    icon: Icon,
+    size
+  }: IconProps) => react_jsx_runtime0.JSX.Element;
+}
+type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
+type IconProps = {
+  icon: LucideIcon;
+  size?: number;
+} & React.HTMLAttributes<HTMLSpanElement>;
+//#endregion
+export { ButtonProps as n, ButtonVariant as r, Button as t };

package/dist/Callout-CMz3Yl_5.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/components/Callout.d.ts
+type CalloutVariant = 'info' | 'note' | 'tip' | 'success' | 'warning' | 'danger';
+type CalloutProps = {
+  variant?: CalloutVariant;
+  className?: string;
+  children?: React.ReactNode;
+} & Omit<React.ComponentProps<'aside'>, 'className' | 'children'>;
+declare function Callout({
+  variant,
+  className,
+  children,
+  ...props
+}: CalloutProps): react_jsx_runtime2.JSX.Element;
+//#endregion
+export { CalloutProps as n, CalloutVariant as r, Callout as t };

package/dist/Callout-UZQRuCQ5.js

@@ -0,0 +1,28 @@
+import React from "react";
+import clsx from "clsx";
+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 }) {
+	const classes = clsx("stl-ui-callout", `stl-ui-callout--${variant}`, className);
+	const Icon = {
+		info: Info,
+		note: CircleAlert,
+		tip: Lightbulb,
+		success: Check,
+		warning: TriangleAlert,
+		danger: OctagonAlert
+	}[variant];
+	return /* @__PURE__ */ jsxs("aside", {
+		className: classes,
+		...props,
+		children: [/* @__PURE__ */ jsx(Icon, { className: "stl-ui-callout__icon" }), /* @__PURE__ */ jsx("div", {
+			className: "stl-ui-callout__content",
+			children
+		})]
+	});
+}
+
+//#endregion
+export { Callout as t };

package/dist/DropdownButton-DoYDi8tB.js

@@ -0,0 +1,82 @@
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown, ExternalLink } from "lucide-react";
+
+//#region src/components/DropdownButton.tsx
+function PrimaryActionText({ children }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-part": "primary-action-text",
+		children
+	});
+}
+function PrimaryAction({ className,...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		"data-part": "primary-action",
+		...props,
+		className: clsx("stl-ui-dropdown-button__button stl-ui-dropdown-button--action", className)
+	});
+}
+function Trigger({ className,...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		"aria-haspopup": "listbox",
+		"aria-expanded": "false",
+		"data-part": "trigger",
+		...props,
+		className: clsx("stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger", className),
+		children: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 16 })
+	});
+}
+function Menu({ className,...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-state": "closed",
+		"data-part": "menu",
+		...props,
+		className: clsx("stl-ui-dropdown-button__menu", className)
+	});
+}
+function MenuItemIcon({ className,...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-part": "item-icon",
+		...props,
+		className: clsx("stl-ui-dropdown-button__menu-item-icon", className)
+	});
+}
+function MenuItemText({ className, subtle,...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-part": "item-text",
+		className: clsx(`stl-ui-dropdown-button__menu-item-text`, { "stl-ui-dropdown-button__menu-item-text--subtle": subtle }, className),
+		...props
+	});
+}
+function MenuItem({ children, value, isExternalLink,...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-part": "item",
+		"data-value": value,
+		...props,
+		className: clsx("stl-ui-dropdown-button__menu-item", props.className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "stl-ui-dropdown-button__menu-item-content",
+			children
+		}), isExternalLink && /* @__PURE__ */ jsx("div", {
+			className: "stl-ui-dropdown-button__menu-item-external-link-icon",
+			"data-part": "item-external-link-icon",
+			children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
+		})]
+	});
+}
+function DropdownButton({ className,...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: clsx("stl-ui-dropdown-button stl-ui-not-prose not-content", className)
+	});
+}
+DropdownButton.Menu = Menu;
+DropdownButton.MenuItem = MenuItem;
+DropdownButton.MenuItemIcon = MenuItemIcon;
+DropdownButton.MenuItemText = MenuItemText;
+DropdownButton.PrimaryAction = PrimaryAction;
+DropdownButton.PrimaryActionText = PrimaryActionText;
+DropdownButton.Trigger = Trigger;
+
+//#endregion
+export { DropdownButton as t };

package/dist/DropdownButton-zcvep_xH.d.ts

@@ -0,0 +1,50 @@
+import { ComponentPropsWithoutRef } from "react";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/components/DropdownButton.d.ts
+declare function DropdownButton({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'div'>): react_jsx_runtime6.JSX.Element;
+declare namespace DropdownButton {
+  var Menu: ({
+    className,
+    ...props
+  }: ComponentPropsWithoutRef<"div">) => react_jsx_runtime6.JSX.Element;
+  var MenuItem: ({
+    children,
+    value,
+    isExternalLink,
+    ...props
+  }: ComponentPropsWithoutRef<"div"> & {
+    children?: React.ReactNode;
+    value: string;
+    isExternalLink?: boolean;
+  }) => react_jsx_runtime6.JSX.Element;
+  var MenuItemIcon: ({
+    className,
+    ...props
+  }: ComponentPropsWithoutRef<"div">) => react_jsx_runtime6.JSX.Element;
+  var MenuItemText: ({
+    className,
+    subtle,
+    ...props
+  }: ComponentPropsWithoutRef<"span"> & {
+    subtle?: boolean;
+  }) => react_jsx_runtime6.JSX.Element;
+  var PrimaryAction: ({
+    className,
+    ...props
+  }: ComponentPropsWithoutRef<"button">) => react_jsx_runtime6.JSX.Element;
+  var PrimaryActionText: ({
+    children
+  }: {
+    children?: React.ReactNode;
+  }) => react_jsx_runtime6.JSX.Element;
+  var Trigger: ({
+    className,
+    ...props
+  }: ComponentPropsWithoutRef<"button">) => react_jsx_runtime6.JSX.Element;
+}
+//#endregion
+export { DropdownButton as t };

package/dist/components/Accordion.d.ts

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

package/dist/components/Accordion.js

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

package/dist/components/Button.d.ts

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

package/dist/components/Button.js

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

package/dist/components/Callout.d.ts

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

package/dist/components/Callout.js

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

package/dist/components/DropdownButton.d.ts

@@ -0,0 +1,2 @@
+import { t as DropdownButton } from "../DropdownButton-zcvep_xH.js";
+export { DropdownButton };

package/dist/components/DropdownButton.js

@@ -0,0 +1,3 @@
+import { t as DropdownButton } from "../DropdownButton-DoYDi8tB.js";
+
+export { DropdownButton };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+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 };

package/dist/index.js

@@ -0,0 +1,6 @@
+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";
+
+export { Accordion, Button, Callout, DropdownButton };

package/dist/scripts/index.d.ts

@@ -0,0 +1,12 @@
+//#region src/scripts/dropdown-button.d.ts
+declare function initDropdownButton({
+  dropdown,
+  onSelect,
+  onPrimaryAction
+}: {
+  dropdown: Element;
+  onSelect: (value: string) => void;
+  onPrimaryAction: (primaryActionElement: Element) => void;
+}): void;
+//#endregion
+export { initDropdownButton };

package/dist/scripts/index.js

@@ -0,0 +1,33 @@
+//#region src/scripts/dropdown-button.ts
+function initDropdownButton({ dropdown, onSelect, onPrimaryAction }) {
+	const trigger = dropdown.querySelector("[data-part=\"trigger\"]");
+	const menu = dropdown.querySelector("[data-part=\"menu\"]");
+	const primaryAction = dropdown.querySelector("[data-part=\"primary-action\"]");
+	if (!trigger || !menu || !primaryAction) return;
+	let isOpen = false;
+	function toggleDropdown() {
+		if (!trigger || !menu) return;
+		isOpen = !isOpen;
+		menu.dataset.state = isOpen ? "open" : "closed";
+		trigger.setAttribute("aria-expanded", String(isOpen));
+	}
+	trigger.addEventListener("click", toggleDropdown);
+	document.addEventListener("click", (event) => {
+		if (!isOpen) return;
+		if (!dropdown.contains(event.target)) toggleDropdown();
+		if (primaryAction && primaryAction.contains(event.target)) toggleDropdown();
+	});
+	dropdown.querySelectorAll("[data-part=\"item\"]").forEach((item) => {
+		item.addEventListener("click", () => {
+			const value = item.getAttribute("data-value");
+			if (value) onSelect(value);
+			toggleDropdown();
+		});
+	});
+	primaryAction.addEventListener("click", () => {
+		onPrimaryAction(primaryAction);
+	});
+}
+
+//#endregion
+export { initDropdownButton };