@stainless-api/ui-primitives 0.1.0-beta.4 → 0.1.0-beta.40

package/dist/components/Accordion.d.ts

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

package/dist/components/Accordion.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 };

package/dist/components/Button.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import * as react_jsx_runtime2 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';
+  border?: boolean;
+  loading?: {
+    label: string;
+  };
+};
+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_runtime2.JSX.Element;
+declare namespace Button {
+  var Label: ({
+    className,
+    ...rest
+  }: LabelProps) => react_jsx_runtime2.JSX.Element;
+  var Icon: ({
+    className,
+    icon: Icon,
+    size
+  }: IconProps) => react_jsx_runtime2.JSX.Element;
+}
+type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
+type IconProps = {
+  icon: LucideIcon;
+  size?: number;
+} & React.HTMLAttributes<HTMLSpanElement>;
+//#endregion
+export { Button, ButtonProps, ButtonVariant };

package/dist/components/Button.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, border, loading, ...rest } = 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"
+	}, { "stl-ui-button--with-border": variant === "outline" || border }, { "stl-ui-button--loading": !!loading }, "not-content", "stl-ui-not-prose", props.className);
+	if (loading) {
+		rest["aria-disabled"] = "true";
+		rest["aria-label"] = loading.label;
+		rest["title"] = loading.label;
+	}
+	if ("href" in rest) return /* @__PURE__ */ jsx("a", {
+		...rest,
+		className: classes,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		type: rest.type ?? "button",
+		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 };

package/dist/components/Callout.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import * as react_jsx_runtime5 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_runtime5.JSX.Element;
+//#endregion
+export { Callout, CalloutProps, CalloutVariant };

package/dist/components/Callout.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 };

package/dist/components/Steps.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/components/Steps.d.ts
+declare function Steps({
+  children
+}: {
+  children: React.ReactNode;
+}): react_jsx_runtime6.JSX.Element;
+declare function Step({
+  children,
+  title
+}: {
+  children: React.ReactNode;
+  title: string;
+}): react_jsx_runtime6.JSX.Element;
+//#endregion
+export { Step, Steps };

package/dist/components/Steps.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Steps.tsx
+function Steps({ children }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: "stl-ui-steps",
+		children
+	});
+}
+function Step({ children, title }) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "stl-ui-steps__step",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "stl-ui-steps__step-title",
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			className: "stl-ui-steps__step-content",
+			children
+		})]
+	});
+}
+
+//#endregion
+export { Step, Steps };

package/dist/index.d.ts

@@ -0,0 +1,171 @@
+import { Accordion, AccordionProps } from "./components/Accordion.js";
+import { Button, ButtonProps, ButtonVariant } from "./components/Button.js";
+import { Callout, CalloutProps, CalloutVariant } from "./components/Callout.js";
+import { Step, Steps } from "./components/Steps.js";
+import * as react3 from "react";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
+
+//#region src/components/dropdown/DropdownMenu.d.ts
+declare function Menu({
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime23.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_runtime23.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_runtime23.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_runtime23.JSX.Element;
+//#endregion
+//#region src/components/dropdown/Dropdown.d.ts
+declare function Dropdown({
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime23.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;
+  } & react3.ClassAttributes<HTMLAnchorElement> & react3.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+  }) | ({
+    children?: React.ReactNode;
+    value: string;
+    isExternalLink?: boolean;
+    isSelected?: boolean;
+  } & react3.ClassAttributes<HTMLButtonElement> & react3.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+  })) => react_jsx_runtime23.JSX.Element;
+  var MenuItemText: ({
+    className,
+    subtle,
+    ...props
+  }: ComponentProps<"span"> & {
+    subtle?: boolean;
+  }) => react_jsx_runtime23.JSX.Element;
+  var MenuItemTemplate: ({
+    ...props
+  }: ComponentProps<"template">) => react_jsx_runtime23.JSX.Element;
+  var Trigger: ({
+    className,
+    ...props
+  }: ComponentProps<"button">) => react_jsx_runtime23.JSX.Element;
+  var TriggerSelectedItem: ({
+    className,
+    ...props
+  }: ComponentProps<"div">) => react_jsx_runtime23.JSX.Element;
+  var TriggerIcon: ({
+    className,
+    ...props
+  }: ComponentProps<"span">) => react_jsx_runtime23.JSX.Element;
+  var Icon: ({
+    className,
+    ...props
+  }: ComponentProps<"div">) => react_jsx_runtime23.JSX.Element;
+}
+//#endregion
+//#region src/components/dropdown/DropdownButton.d.ts
+declare function DropdownButton({
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime23.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;
+  } & react3.ClassAttributes<HTMLAnchorElement> & react3.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+  }) | ({
+    children?: React.ReactNode;
+    value: string;
+    isExternalLink?: boolean;
+    isSelected?: boolean;
+  } & react3.ClassAttributes<HTMLButtonElement> & react3.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+  })) => react_jsx_runtime23.JSX.Element;
+  var MenuItemText: ({
+    className,
+    subtle,
+    ...props
+  }: ComponentProps<"span"> & {
+    subtle?: boolean;
+  }) => react_jsx_runtime23.JSX.Element;
+  var PrimaryAction: ({
+    className,
+    ...props
+  }: ComponentProps<"button">) => react_jsx_runtime23.JSX.Element;
+  var PrimaryActionText: ({
+    children
+  }: {
+    children?: React.ReactNode;
+  }) => react_jsx_runtime23.JSX.Element;
+  var Trigger: ({
+    className,
+    ...props
+  }: ComponentProps<"button">) => react_jsx_runtime23.JSX.Element;
+  var Icon: ({
+    className,
+    ...props
+  }: ComponentProps<"div">) => react_jsx_runtime23.JSX.Element;
+}
+//#endregion
+export { Accordion, AccordionProps, Button, ButtonProps, ButtonVariant, Callout, CalloutProps, CalloutVariant, Dropdown, DropdownButton, Step, Steps };

package/dist/index.js

@@ -0,0 +1,181 @@
+import { Button } from "./components/Button.js";
+import { Callout } from "./components/Callout.js";
+import { Accordion } from "./components/Accordion.js";
+import { Step, Steps } from "./components/Steps.js";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronsUpDown, ExternalLink } from "lucide-react";
+
+//#region src/components/dropdown/DropdownMenu.tsx
+function Menu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "menu",
+		"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: "menuitem",
+		"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: "menuitem",
+		"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", {
+		"aria-label": "Select an option",
+		"aria-haspopup": "menu",
+		"aria-expanded": "false",
+		...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,
+		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", {
+		type: "button",
+		"aria-label": "Select primary option",
+		...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", {
+		type: "button",
+		"aria-haspopup": "menu",
+		"aria-expanded": "false",
+		"aria-label": "Select an option",
+		...props,
+		"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,
+		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, Step, Steps };

package/dist/scripts/index.d.ts

@@ -0,0 +1,23 @@
+//#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
+//#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 };