@stainless-api/ui-primitives 0.1.0-beta.42 → 0.1.0-beta.43

package/dist/components/Accordion.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime2 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_runtime2.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_runtime2.JSX.Element;
+}: React.ComponentProps<'summary'>): react_jsx_runtime0.JSX.Element;
 declare function AccordionGroup({
   className,
   children,
   ...props
-}: React.ComponentProps<'div'>): react_jsx_runtime2.JSX.Element;
+}: React.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Accordion, AccordionProps };

package/dist/components/Badge.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import * as react_jsx_runtime2 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_runtime2.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_runtime2.JSX.Element;
+declare const Badge: (({
+  children,
+  intent,
+  ...props
+}: {
+  children: React.ReactNode;
+} & React.ComponentProps<typeof BaseBadge>) => react_jsx_runtime2.JSX.Element) & {
+  HTTP: typeof HTTPBadge;
+};
+//#endregion
+export { Badge, BadgeIntent, HTTPMethod, getHttpMethod };

package/dist/components/Badge.js

@@ -0,0 +1,65 @@
+import React from "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$1({ 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

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { LucideIcon } from "lucide-react";
 
 //#region src/components/Button.d.ts
@@ -21,18 +21,18 @@ 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_runtime5.JSX.Element;
 declare namespace Button {
   var Label: ({
     className,
     ...rest
-  }: LabelProps) => react_jsx_runtime0.JSX.Element;
+  }: LabelProps) => react_jsx_runtime5.JSX.Element;
   var Icon: ({
     className,
     icon: Icon,
     size,
     ...rest
-  }: IconProps) => react_jsx_runtime0.JSX.Element;
+  }: IconProps) => react_jsx_runtime5.JSX.Element;
 }
 type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
 type IconProps = {

package/dist/components/Callout.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 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_runtime7.JSX.Element;
+}: CalloutProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { Callout, CalloutProps, CalloutVariant };

package/dist/components/Steps.d.ts

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

package/dist/index.d.ts

@@ -1,16 +1,17 @@
 import { Accordion, AccordionProps } from "./components/Accordion.js";
+import { Badge, BadgeIntent, HTTPMethod, getHttpMethod } from "./components/Badge.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";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/components/dropdown/DropdownMenu.d.ts
 declare function Menu({
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: ComponentProps<'div'>): react_jsx_runtime26.JSX.Element;
 declare namespace Menu {
   var Item: typeof MenuItem;
   var ItemText: typeof MenuItemText;
@@ -22,7 +23,7 @@ declare function MenuItemText({
   ...props
 }: ComponentProps<'span'> & {
   subtle?: boolean;
-}): react_jsx_runtime23.JSX.Element;
+}): react_jsx_runtime26.JSX.Element;
 type MenuItemBaseProps = {
   children?: React.ReactNode;
   value: string;
@@ -43,7 +44,7 @@ declare function MenuItem({
   isExternalLink,
   isSelected,
   ...props
-}: MenuItemProps): react_jsx_runtime23.JSX.Element;
+}: MenuItemProps): react_jsx_runtime26.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
@@ -54,13 +55,13 @@ declare function MenuItem({
  */
 declare function MenuItemTemplate({
   ...props
-}: ComponentProps<'template'>): react_jsx_runtime23.JSX.Element;
+}: ComponentProps<'template'>): react_jsx_runtime26.JSX.Element;
 //#endregion
 //#region src/components/dropdown/Dropdown.d.ts
 declare function Dropdown({
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: ComponentProps<'div'>): react_jsx_runtime26.JSX.Element;
 declare namespace Dropdown {
   var Menu: typeof Menu;
   var MenuItem: ({
@@ -84,40 +85,40 @@ declare namespace Dropdown {
     isSelected?: boolean;
   } & react3.ClassAttributes<HTMLButtonElement> & react3.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
-  })) => react_jsx_runtime23.JSX.Element;
+  })) => react_jsx_runtime26.JSX.Element;
   var MenuItemText: ({
     className,
     subtle,
     ...props
   }: ComponentProps<"span"> & {
     subtle?: boolean;
-  }) => react_jsx_runtime23.JSX.Element;
+  }) => react_jsx_runtime26.JSX.Element;
   var MenuItemTemplate: ({
     ...props
-  }: ComponentProps<"template">) => react_jsx_runtime23.JSX.Element;
+  }: ComponentProps<"template">) => react_jsx_runtime26.JSX.Element;
   var Trigger: ({
     className,
     ...props
-  }: ComponentProps<"button">) => react_jsx_runtime23.JSX.Element;
+  }: ComponentProps<"button">) => react_jsx_runtime26.JSX.Element;
   var TriggerSelectedItem: ({
     className,
     ...props
-  }: ComponentProps<"div">) => react_jsx_runtime23.JSX.Element;
+  }: ComponentProps<"div">) => react_jsx_runtime26.JSX.Element;
   var TriggerIcon: ({
     className,
     ...props
-  }: ComponentProps<"span">) => react_jsx_runtime23.JSX.Element;
+  }: ComponentProps<"span">) => react_jsx_runtime26.JSX.Element;
   var Icon: ({
     className,
     ...props
-  }: ComponentProps<"div">) => react_jsx_runtime23.JSX.Element;
+  }: ComponentProps<"div">) => react_jsx_runtime26.JSX.Element;
 }
 //#endregion
 //#region src/components/dropdown/DropdownButton.d.ts
 declare function DropdownButton({
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime23.JSX.Element;
+}: ComponentProps<'div'>): react_jsx_runtime26.JSX.Element;
 declare namespace DropdownButton {
   var Menu: typeof Menu;
   var MenuItem: ({
@@ -141,31 +142,31 @@ declare namespace DropdownButton {
     isSelected?: boolean;
   } & react3.ClassAttributes<HTMLButtonElement> & react3.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
-  })) => react_jsx_runtime23.JSX.Element;
+  })) => react_jsx_runtime26.JSX.Element;
   var MenuItemText: ({
     className,
     subtle,
     ...props
   }: ComponentProps<"span"> & {
     subtle?: boolean;
-  }) => react_jsx_runtime23.JSX.Element;
+  }) => react_jsx_runtime26.JSX.Element;
   var PrimaryAction: ({
     className,
     ...props
-  }: ComponentProps<"button">) => react_jsx_runtime23.JSX.Element;
+  }: ComponentProps<"button">) => react_jsx_runtime26.JSX.Element;
   var PrimaryActionText: ({
     children
   }: {
     children?: React.ReactNode;
-  }) => react_jsx_runtime23.JSX.Element;
+  }) => react_jsx_runtime26.JSX.Element;
   var Trigger: ({
     className,
     ...props
-  }: ComponentProps<"button">) => react_jsx_runtime23.JSX.Element;
+  }: ComponentProps<"button">) => react_jsx_runtime26.JSX.Element;
   var Icon: ({
     className,
     ...props
-  }: ComponentProps<"div">) => react_jsx_runtime23.JSX.Element;
+  }: ComponentProps<"div">) => react_jsx_runtime26.JSX.Element;
 }
 //#endregion
-export { Accordion, AccordionProps, Button, ButtonProps, ButtonVariant, Callout, CalloutProps, CalloutVariant, Dropdown, DropdownButton, Step, Steps };
+export { Accordion, AccordionProps, Badge, BadgeIntent, Button, ButtonProps, ButtonVariant, Callout, CalloutProps, CalloutVariant, Dropdown, DropdownButton, HTTPMethod, Step, Steps, getHttpMethod };

package/dist/index.js

@@ -2,6 +2,7 @@ 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 { Badge, getHttpMethod } from "./components/Badge.js";
 import clsx from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronsUpDown, ExternalLink } from "lucide-react";
@@ -178,4 +179,4 @@ DropdownButton.Trigger = Trigger;
 DropdownButton.Icon = Icon;
 
 //#endregion
-export { Accordion, Button, Callout, Dropdown, DropdownButton, Step, Steps };
+export { Accordion, Badge, Button, Callout, Dropdown, DropdownButton, Step, Steps, getHttpMethod };

package/dist/styles.css

@@ -1169,6 +1169,156 @@ a.stl-ui-button {
   margin-top: 4px;
 }
 
+.stl-ui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125em;
+
+  font-weight: 500;
+  letter-spacing: normal;
+
+  border-width: 1px;
+  border-style: solid;
+
+  /* sizes */
+  &.stl-ui-badge--size-sm {
+    height: 20px;
+    font-size: var(--stl-typography-scale-xs);
+    padding: 0 2px;
+    border-radius: var(--stl-ui-layout-border-radius-xs);
+    --stl-ui-badge-icon-size: 14px;
+  }
+  &,
+  &.stl-ui-badge--size-md {
+    height: 24px;
+    font-size: var(--stl-typography-scale-sm);
+    padding: 0 4px;
+    border-radius: var(--stl-ui-layout-border-radius-xs);
+    --stl-ui-badge-icon-size: 14px;
+  }
+  &.stl-ui-badge--size-lg {
+    height: 32px;
+    font-size: var(--stl-typography-scale-md);
+    padding: 0 6px;
+    border-radius: var(--stl-ui-layout-border-radius-sml);
+    --stl-ui-badge-icon-size: 16px;
+  }
+
+  /* intents */
+  &.stl-ui-badge--intent-none {
+    background-color: var(--stl-color-ui-background);
+    color: var(--stl-color-foreground-muted);
+    --stl-ui-badge-icon-opacity: var(--stl-opacity-level-040);
+    border-color: var(--stl-color-border);
+  }
+  &.stl-ui-badge--intent-info {
+    background-color: var(--stl-color-muted-background);
+    color: var(--stl-color-foreground-muted);
+    --stl-ui-badge-icon-opacity: var(--stl-opacity-level-040);
+    border-color: var(--stl-color-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-inverse-background);
+      color: var(--stl-color-inverse-foreground);
+      --stl-ui-badge-icon-opacity: 1;
+    }
+  }
+  &.stl-ui-badge--intent-success,
+  &.stl-ui-badge--http-get {
+    background-color: var(--stl-color-green-muted-background);
+    color: var(--stl-color-green-foreground);
+    border-color: var(--stl-color-green-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-green-inverse-background);
+      color: var(--stl-color-green-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--intent-warning {
+    background-color: var(--stl-color-yellow-muted-background);
+    color: var(--stl-color-yellow-foreground);
+    border-color: var(--stl-color-yellow-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-yellow-inverse-background);
+      color: var(--stl-color-yellow-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--intent-danger,
+  &.stl-ui-badge--http-delete {
+    background-color: var(--stl-color-red-muted-background);
+    color: var(--stl-color-red-foreground);
+    border-color: var(--stl-color-red-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-red-inverse-background);
+      color: var(--stl-color-red-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--intent-note,
+  &.stl-ui-badge--http-post {
+    background-color: var(--stl-color-blue-muted-background);
+    color: var(--stl-color-blue-foreground);
+    border-color: var(--stl-color-blue-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-blue-inverse-background);
+      color: var(--stl-color-blue-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--intent-tip {
+    background-color: var(--stl-color-purple-muted-background);
+    color: var(--stl-color-purple-foreground);
+    border-color: var(--stl-color-purple-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-purple-inverse-background);
+      color: var(--stl-color-purple-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--intent-accent {
+    background-color: var(--stl-color-accent-muted-background);
+    color: var(--stl-color-accent-foreground);
+    border-color: var(--stl-color-accent-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-accent-inverse-background);
+      color: var(--stl-color-accent-inverse-foreground);
+    }
+  }
+  &.stl-ui-badge--http-put,
+  &.stl-ui-badge--http-patch {
+    background-color: var(--stl-color-orange-muted-background);
+    color: var(--stl-color-orange-foreground);
+    border-color: var(--stl-color-orange-border);
+    &.stl-ui-badge--solid {
+      background-color: var(--stl-color-orange-inverse-background);
+      color: var(--stl-color-orange-inverse-foreground);
+    }
+  }
+
+  /* Text content */
+  .stl-ui-badge__content {
+    display: inline-block;
+    padding: 0.25em;
+  }
+
+  /* Icons */
+  svg {
+    flex-shrink: 0;
+    display: inline-block;
+    color: rgb(from currentColor r g b / 1);
+    opacity: var(--stl-ui-badge-icon-opacity, 1);
+    width: var(--stl-ui-badge-icon-size);
+    height: var(--stl-ui-badge-icon-size);
+  }
+  &:has(> svg:only-child) {
+    padding: 0;
+    aspect-ratio: 1;
+    justify-content: center;
+  }
+
+  /* HTTP */
+  &.stl-ui-badge--http {
+    font-family: var(--stl-typography-font-mono);
+    font-variant-numeric: tabular-nums;
+    text-transform: uppercase;
+  }
+}
+
 /* design system variables */
 
 /* components */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/ui-primitives",
-  "version": "0.1.0-beta.42",
+  "version": "0.1.0-beta.43",
   "publishConfig": {
     "access": "public"
   },