@stainless-api/ui-primitives 0.1.0-beta.5 → 0.1.0-beta.50

package/dist/DropdownMenu-H_J8MxM7.d.ts

@@ -0,0 +1,54 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/dropdown/DropdownMenu.d.ts
+declare function Menu({
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime0.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_runtime0.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_runtime0.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_runtime0.JSX.Element;
+//#endregion
+export { Menu as t };

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,29 @@
+import "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/Badge.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Badge.d.ts
+type BadgeIntent = 'none' | 'info' | 'success' | 'warning' | 'danger' | 'note' | 'tip' | 'accent';
+declare function BaseBadge({
+  children,
+  icon,
+  intent,
+  size,
+  solid,
+  ...props
+}: {
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  intent?: BadgeIntent;
+  size?: 'sm' | 'md' | 'lg';
+  solid?: boolean;
+} & React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime0.JSX.Element;
+type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+declare function getHttpMethod(method?: string): HTTPMethod | null;
+declare function HTTPBadge({
+  method,
+  iconOnly,
+  ...props
+}: {
+  method: HTTPMethod;
+  iconOnly?: boolean;
+} & Omit<React.ComponentProps<typeof Badge>, 'children' | 'intent'>): react_jsx_runtime0.JSX.Element;
+declare const Badge: (({
+  children,
+  intent,
+  ...props
+}: {
+  children: React.ReactNode;
+} & React.ComponentProps<typeof BaseBadge>) => react_jsx_runtime0.JSX.Element) & {
+  HTTP: typeof HTTPBadge;
+};
+//#endregion
+export { Badge, BadgeIntent, HTTPMethod, getHttpMethod };

package/dist/components/Badge.js

@@ -0,0 +1,63 @@
+import "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownLeftIcon, ArrowUpRightIcon, XIcon } from "lucide-react";
+//#region src/components/Badge.tsx
+function BaseBadge({ children, icon = null, intent, size = "md", solid = false, ...props }) {
+	const classes = clsx("stl-ui-badge", intent && `stl-ui-badge--intent-${intent}`, `stl-ui-badge--size-${size}`, solid && "stl-ui-badge--solid", "not-content", "stl-ui-not-prose", props.className);
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		className: classes,
+		children: [icon, !!children && /* @__PURE__ */ jsx("span", {
+			className: "stl-ui-badge__content",
+			children
+		})]
+	});
+}
+const PublicBadge = function Badge({ children, intent = "none", ...props }) {
+	return /* @__PURE__ */ jsx(BaseBadge, {
+		intent,
+		...props,
+		children
+	});
+};
+function isHttpMethod(method) {
+	return method === "GET" || method === "POST" || method === "PUT" || method === "PATCH" || method === "DELETE";
+}
+function getHttpMethod(method) {
+	const upper = method?.toUpperCase();
+	return isHttpMethod(upper) ? upper : null;
+}
+function HTTPBadge({ method, iconOnly = false, ...props }) {
+	const classes = clsx("stl-ui-badge--http", `stl-ui-badge--http-${method.toLowerCase()}`, props.className);
+	return /* @__PURE__ */ jsx(BaseBadge, {
+		...props,
+		className: classes,
+		icon: {
+			GET: /* @__PURE__ */ jsx(ArrowDownLeftIcon, {
+				"aria-hidden": !iconOnly,
+				"aria-label": "GET"
+			}),
+			POST: /* @__PURE__ */ jsx(ArrowUpRightIcon, {
+				"aria-hidden": !iconOnly,
+				"aria-label": "POST"
+			}),
+			PUT: /* @__PURE__ */ jsx(ArrowUpRightIcon, {
+				"aria-hidden": !iconOnly,
+				"aria-label": "PUT"
+			}),
+			PATCH: /* @__PURE__ */ jsx(ArrowUpRightIcon, {
+				"aria-hidden": !iconOnly,
+				"aria-label": "PATCH"
+			}),
+			DELETE: /* @__PURE__ */ jsx(XIcon, {
+				"aria-hidden": !iconOnly,
+				"aria-label": "DELETE"
+			})
+		}[method],
+		children: !iconOnly && method
+	});
+}
+const Badge = Object.assign(PublicBadge, { HTTP: HTTPBadge });
+//#endregion
+export { Badge, getHttpMethod };

package/dist/components/Button.d.ts

@@ -0,0 +1,43 @@
+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';
+  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_runtime0.JSX.Element;
+declare namespace Button {
+  var Label: ({
+    className,
+    ...rest
+  }: LabelProps) => react_jsx_runtime0.JSX.Element;
+  var Icon: ({
+    className,
+    icon: Icon,
+    size,
+    ...rest
+  }: IconProps) => react_jsx_runtime0.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,50 @@
+import "react";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Button.tsx
+function Button(props) {
+	const { variant, children, border, loading, size, className, ...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": size === "sm",
+		"stl-ui-button--size-lg": size === "lg"
+	}, { "stl-ui-button--with-border": variant === "outline" || border }, { "stl-ui-button--loading": !!loading }, "not-content", "stl-ui-not-prose", 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, ...rest }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx("stl-ui-button__icon", className),
+		...rest,
+		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_runtime0 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_runtime0.JSX.Element;
+//#endregion
+export { Callout, CalloutProps, CalloutVariant };

package/dist/components/Callout.js

@@ -0,0 +1,26 @@
+import "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_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Steps.d.ts
+declare function Steps({
+  children
+}: {
+  children: React.ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function Step({
+  children,
+  title
+}: {
+  children: React.ReactNode;
+  title: string;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Step, Steps };

package/dist/components/Steps.js

@@ -0,0 +1,22 @@
+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/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,63 @@
+import { t as Menu } from "../../DropdownMenu-H_J8MxM7.js";
+import * as react from "react";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/dropdown/Dropdown.d.ts
+declare function Dropdown({
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime0.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;
+  } & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+  }) | ({
+    children?: React.ReactNode;
+    value: string;
+    isExternalLink?: boolean;
+    isSelected?: boolean;
+  } & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+  })) => react_jsx_runtime0.JSX.Element;
+  var MenuItemText: ({
+    className,
+    subtle,
+    ...props
+  }: ComponentProps<"span"> & {
+    subtle?: boolean;
+  }) => react_jsx_runtime0.JSX.Element;
+  var MenuItemTemplate: ({
+    ...props
+  }: ComponentProps<"template">) => react_jsx_runtime0.JSX.Element;
+  var Trigger: ({
+    className,
+    ...props
+  }: ComponentProps<"button">) => react_jsx_runtime0.JSX.Element;
+  var TriggerSelectedItem: ({
+    className,
+    ...props
+  }: ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  var TriggerIcon: ({
+    className,
+    ...props
+  }: ComponentProps<"span">) => react_jsx_runtime0.JSX.Element;
+  var Icon: ({
+    className,
+    ...props
+  }: ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+}
+//#endregion
+export { Dropdown };

package/dist/components/dropdown/Dropdown.js

@@ -0,0 +1,52 @@
+import { Menu } from "./DropdownMenu.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/dropdown/Dropdown.tsx
+function Trigger({ 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({ 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;
+Dropdown.TriggerSelectedItem = TriggerSelectedItem;
+Dropdown.TriggerIcon = TriggerIcon;
+Dropdown.Icon = Icon;
+//#endregion
+export { Dropdown };

package/dist/components/dropdown/DropdownButton.d.ts

@@ -0,0 +1,61 @@
+import { t as Menu } from "../../DropdownMenu-H_J8MxM7.js";
+import * as react from "react";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/dropdown/DropdownButton.d.ts
+declare function DropdownButton({
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime0.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;
+  } & react.ClassAttributes<HTMLAnchorElement> & react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+  }) | ({
+    children?: React.ReactNode;
+    value: string;
+    isExternalLink?: boolean;
+    isSelected?: boolean;
+  } & react.ClassAttributes<HTMLButtonElement> & react.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+  })) => react_jsx_runtime0.JSX.Element;
+  var MenuItemText: ({
+    className,
+    subtle,
+    ...props
+  }: ComponentProps<"span"> & {
+    subtle?: boolean;
+  }) => react_jsx_runtime0.JSX.Element;
+  var PrimaryAction: ({
+    className,
+    ...props
+  }: ComponentProps<"button">) => react_jsx_runtime0.JSX.Element;
+  var PrimaryActionText: ({
+    children
+  }: {
+    children?: React.ReactNode;
+  }) => react_jsx_runtime0.JSX.Element;
+  var Trigger: ({
+    className,
+    ...props
+  }: ComponentProps<"button">) => react_jsx_runtime0.JSX.Element;
+  var Icon: ({
+    className,
+    ...props
+  }: ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+}
+//#endregion
+export { DropdownButton };

package/dist/components/dropdown/DropdownButton.js

@@ -0,0 +1,54 @@
+import { Menu } from "./DropdownMenu.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { ChevronsUpDown } from "lucide-react";
+//#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 { DropdownButton };

package/dist/components/dropdown/DropdownMenu.d.ts

@@ -0,0 +1,2 @@
+import { t as Menu } from "../../DropdownMenu-H_J8MxM7.js";
+export { Menu };