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

package/CHANGELOG.md

@@ -1,133 +0,0 @@
-# @stainless-api/ui-primitives
-
-## 0.1.0-beta.21
-
-### Patch Changes
-
-- 344761e: fix: dropdown button hover state
-
-## 0.1.0-beta.20
-
-### Patch Changes
-
-- 7ef572c: feat: updated dropdowns
-
-## 0.1.0-beta.19
-
-### Patch Changes
-
-- 58040d8: feat: ui primitives updates, cursor support
-
-## 0.1.0-beta.18
-
-### Minor Changes
-
-- c635741: Updated worker and fixed docs-ui jsx issue
-
-## 0.1.0-beta.17
-
-### Patch Changes
-
-- 1517484: fixing font loading, updating nav bar height
-
-## 0.1.0-beta.16
-
-### Patch Changes
-
-- 9cdb24d: Update pagination components, fix search modal
-
-## 0.1.0-beta.15
-
-### Patch Changes
-
-- 15c003d: fix react peer dependencies
-
-## 0.1.0-beta.14
-
-### Patch Changes
-
-- 0618d05: Markdown rendering of prose pages, ai context menu, auth via cli, minor fixes
-
-## 0.1.0-beta.13
-
-### Patch Changes
-
-- e35360f: include ui-primitive packages
-
-## 0.1.0-beta.12
-
-### Patch Changes
-
-- a529fd4: fix: site title height
-
-## 0.1.0-beta.11
-
-### Patch Changes
-
-- 26a4786: fix: include missing starlight config options
-
-## 0.1.0-beta.10
-
-### Patch Changes
-
-- 3e44a9c: Reduce specificity on prose elements
-
-## 0.1.0-beta.9
-
-### Patch Changes
-
-- c96f895: Remove css layers, update sidebar styles, add new prose elements
-
-## 0.1.0-beta.8
-
-### Patch Changes
-
-- d15a520: fix initialization of dropdown buttons
-
-## 0.1.0-beta.7
-
-### Patch Changes
-
-- 34e7c61: verify dependents update
-
-## 0.1.0-beta.6
-
-### Minor Changes
-
-- f664b4d: Creating design system css variables, markdown styles, and typography improvements
-
-### Patch Changes
-
-- 34cbd12: verify publishing
-
-## 0.1.0-beta.5
-
-### Patch Changes
-
-- e7a2a96: verifying dependent packages update
-
-## 0.1.0-beta.4
-
-### Patch Changes
-
-- 2853ae8: fixing dependency structure
-
-## 0.1.0-beta.3
-
-### Patch Changes
-
-- 870af8d: verify dependent packages update
-
-## 0.1.0-beta.2
-
-## 0.1.0-beta.1
-
-### Patch Changes
-
-- 5537225: verify publishing of dependent package works
-
-## 0.1.0-beta.0
-
-### Minor Changes
-
-- ed77b46: prep packages for beta release

package/dist/DropdownButton-DoYDi8tB.js

@@ -1,82 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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/DropdownButton.d.ts

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

package/dist/components/DropdownButton.js

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

package/eslint.config.js

@@ -1,2 +0,0 @@
-import { config } from '@stainless/eslint-config/astro';
-export default config;

package/src/components/Accordion.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-export type AccordionProps = React.ComponentProps<'details'>;
-
-export function Accordion({ className, children, ...props }: AccordionProps) {
-  const classes = clsx('stl-ui-accordion', className);
-
-  return (
-    <details className={classes} {...props}>
-      {children}
-    </details>
-  );
-}
-
-function AccordionSummary({ children, className, ...props }: React.ComponentProps<'summary'>) {
-  const classes = clsx('stl-ui-accordion__summary', className);
-
-  return (
-    <summary className={classes} {...props}>
-      {children}
-    </summary>
-  );
-}
-
-Accordion.Summary = AccordionSummary;
-
-function AccordionGroup({ className, children, ...props }: React.ComponentProps<'div'>) {
-  const classes = clsx('stl-ui-accordion-group', className);
-
-  // TODO: boolean `exclusive` prop assigns a unique `name` to each of the child <details> elements
-  // For now this can be handled by the user
-
-  return (
-    <div className={classes} {...props}>
-      {children}
-    </div>
-  );
-}
-
-Accordion.Group = AccordionGroup;

package/src/components/Button.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { LucideIcon } from 'lucide-react';
-
-export 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;
-  };
-
-export type ButtonProps = AnchorBranch | ButtonBranch;
-
-// Because this code needs to run inside .astro files, we can’t use React.cloneElement
-// (or radix-ui/react-slot). In .astro, children are passed as static HTML elements
-// rather than React elements, so they can’t be cloned or modified to add class names.
-
-export function Button(props: ButtonProps) {
-  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 } = props as AnchorBranch;
-    return (
-      <a href={href} {...rest} className={classes}>
-        {children}
-      </a>
-    );
-  }
-
-  const { type, ...rest } = props as ButtonBranch;
-  return (
-    <button type={type ?? 'button'} {...rest} className={classes}>
-      {children}
-    </button>
-  );
-}
-
-type LabelProps = React.HTMLAttributes<HTMLSpanElement>;
-
-Button.Label = function ButtonLabel({ className, ...rest }: LabelProps) {
-  return <span className={clsx('stl-ui-button-label leading-none', className)} {...rest} />;
-};
-
-type IconProps = {
-  icon: LucideIcon;
-  size?: number;
-} & React.HTMLAttributes<HTMLSpanElement>;
-
-Button.Icon = function ButtonIcon({ className, icon: Icon, size = 18 }: IconProps) {
-  return (
-    <span className={clsx('stl-ui-button__icon', className)}>
-      <Icon size={size} />
-    </span>
-  );
-};

package/src/components/Callout.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { Info, CircleAlert, Lightbulb, Check, TriangleAlert, OctagonAlert } from 'lucide-react';
-
-export type CalloutVariant = 'info' | 'note' | 'tip' | 'success' | 'warning' | 'danger';
-
-export type CalloutProps = {
-  variant?: CalloutVariant;
-  className?: string;
-  children?: React.ReactNode;
-} & Omit<React.ComponentProps<'aside'>, 'className' | 'children'>;
-
-export function Callout({ variant = 'info', className, children, ...props }: CalloutProps) {
-  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 (
-    <aside className={classes} {...props}>
-      <Icon className="stl-ui-callout__icon" />
-      <div className="stl-ui-callout__content">{children}</div>
-    </aside>
-  );
-}

package/src/components/accordion.css

@@ -1,145 +0,0 @@
-/* revert starlight details styles */
-@layer starlight.content {
-  /* artificially increase specificity to outcompete selectors in the same layer whose styles we want to revert */
-  .stl-ui-prose .sl-markdown-content.sl-markdown-content.sl-markdown-content {
-    details,
-    summary,
-    summary::before,
-    summary::marker {
-      all: revert-layer;
-    }
-  }
-}
-
-.stl-ui-accordion {
-  --stl-ui-accordion-padding: 12px;
-  --stl-ui-accordion-content-padding-bottom: 4px;
-  --stl-ui-accordion-marker-size: 1em;
-  --stl-ui-accordion-marker-margin: calc((1lh - var(--stl-ui-accordion-marker-size)) / 2);
-  --stl-ui-accordion-row-gap: 8px;
-  --stl-ui-accordion-summary-column-gap: 8px;
-  --stl-ui-accordion-border-radius: var(--stl-ui-layout-border-radius);
-  --stl-ui-accordion-hover-film-color: oklch(from var(--stl-ui-foreground) l c h / 0.03);
-  /* left inset to make content line up with summary content (after chevron) */
-  --stl-ui--internal--accordion-padding-start: calc(
-    var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-marker-size) +
-      var(--stl-ui-accordion-marker-margin) * 2 + var(--stl-ui-accordion-summary-column-gap)
-  );
-
-  background-color: var(--stl-ui-card-background);
-  border: 1px solid var(--stl-ui-border);
-  border-radius: var(--stl-ui-accordion-border-radius);
-  font-size: var(--stl-ui-typography-text-body);
-
-  padding: var(--stl-ui-accordion-padding);
-  /* indent content to line up with left edge of summary content */
-  padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
-
-  & > .stl-ui-accordion__summary {
-    display: block;
-    list-style: none;
-
-    /* summary extends to the edges of the element in order to increase click target */
-    padding: var(--stl-ui-accordion-padding);
-    padding-inline-start: var(--stl-ui--internal--accordion-padding-start);
-    margin: calc(-1 * var(--stl-ui-accordion-padding));
-    margin-inline-start: calc(-1 * var(--stl-ui--internal--accordion-padding-start));
-
-    cursor: pointer;
-    font-weight: 500;
-
-    border-radius: var(--stl-ui-accordion-border-radius);
-
-    &::before {
-      content: '';
-      width: var(--stl-ui-accordion-marker-size);
-      height: var(--stl-ui-accordion-marker-size);
-      margin: var(--stl-ui-accordion-marker-margin);
-      background-color: currentColor;
-      display: block;
-      position: absolute;
-      --stl-ui-accordion--internal--marker-width: calc(
-        var(--stl-ui-accordion-marker-size) + var(--stl-ui-accordion-marker-margin) * 2
-      );
-      --stl-ui-accordion--internal--summary-marker-transform: translateX(
-        calc(
-          -1 * var(--stl-ui-accordion--internal--marker-width) - var(--stl-ui-accordion-summary-column-gap)
-        )
-      );
-      transform: var(--stl-ui-accordion--internal--summary-marker-transform);
-
-      --lucide-chevron-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==');
-      mask-image: var(--lucide-chevron-right);
-      mask-size: contain;
-      mask-repeat: no-repeat;
-
-      transition: transform 0.1s ease-out;
-    }
-
-    & > :first-child {
-      margin-top: 0;
-    }
-  }
-
-  &[open] {
-    border-color: var(--stl-ui-border-emphasis);
-    padding-bottom: calc(var(--stl-ui-accordion-padding) + var(--stl-ui-accordion-content-padding-bottom));
-
-    & > .stl-ui-accordion__summary {
-      /* padding-bottom shouldn’t extend beyond the row gap while open, i.e. we shouldn’t be negative-margin-placing content overlapping summary */
-      --stl-ui--internal--summary-padding-bottom: min(
-        var(--stl-ui-accordion-padding),
-        var(--stl-ui-accordion-row-gap)
-      );
-      padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
-      margin-bottom: calc(var(--stl-ui-accordion-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-
-      &::before {
-        transform: var(--stl-ui-accordion--internal--summary-marker-transform) rotate(90deg);
-      }
-    }
-  }
-
-  &:has(> .stl-ui-accordion__summary:hover) {
-    background-image: linear-gradient(
-      to bottom,
-      var(--stl-ui-accordion-hover-film-color),
-      var(--stl-ui-accordion-hover-film-color)
-    );
-    border-color: var(--stl-ui-border-emphasis);
-  }
-
-  & > .stl-ui-accordion__summary + * {
-    margin-top: 0;
-  }
-}
-
-.stl-ui-accordion-group {
-  & > .stl-ui-accordion:has(+ .stl-ui-accordion) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    & > .stl-ui-accordion__summary {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  & > .stl-ui-accordion + .stl-ui-accordion {
-    margin-top: 0;
-    border-top-width: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-
-    & > .stl-ui-accordion__summary {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
-
-  .stl-ui-accordion:not(:is([open], :hover)) + .stl-ui-accordion:is([open], :hover) {
-    border-top-width: 1px;
-    margin-top: -1px;
-  }
-}