@stainless-api/ui-primitives 0.1.0-beta.9 → 1.0.0-beta.55

package/package.json

@@ -1,37 +1,60 @@
 {
   "name": "@stainless-api/ui-primitives",
-  "version": "0.1.0-beta.9",
+  "version": "1.0.0-beta.55",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stainless/docs-platform.git",
+    "directory": "packages/ui-primitives"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts",
-      "require": "./src/index.ts"
-    },
-    "./scripts": {
-      "types": "./src/scripts/index.ts",
-      "import": "./src/scripts/index.ts",
-      "require": "./src/scripts/index.ts"
-    },
-    "./styles.css": "./src/styles.css"
-  },
-  "types": "./src/index.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "lucide-react": "^0.544.0"
+    "lucide-react": "^1.14.0"
   },
   "devDependencies": {
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "typescript": "5.9.2",
-    "@stainless/eslint-config": "0.0.0"
+    "@tsdown/css": "^0.22.0",
+    "@types/react": "19.2.14",
+    "react": "^19.2.6",
+    "sass": "^1.99.0",
+    "tsdown": "^0.22.0",
+    "typescript": "6.0.3",
+    "@stainless/eslint-config": "0.1.0-beta.2"
+  },
+  "exports": {
+    ".": {
+      "default": "./dist/index.js"
+    },
+    "./scripts": {
+      "default": "./dist/scripts/index.js"
+    },
+    "./styles.css": {
+      "default": "./dist/styles.css"
+    },
+    "./starlight-compat.css": {
+      "default": "./dist/styles/starlight-compat.css"
+    },
+    "./*": {
+      "default": "./dist/*"
+    },
+    "./icons": {
+      "default": "./dist/components/icons/index.js"
+    }
+  },
+  "scripts": {
+    "lint": "eslint --flag unstable_native_nodejs_ts_config .",
+    "check:types": "tsc --noEmit",
+    "build": "tsdown",
+    "clean": "rm -rf dist"
   }
 }

package/.env

@@ -1 +0,0 @@
-STAINLESS_API_KEY=stl_sk_001uwmod48VpDm2a1bvB1tUTdJ1ooZ5I

package/CHANGELOG.md

@@ -1,61 +0,0 @@
-# @stainless-api/ui-primitives
-
-## 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/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/DropdownButton.tsx

@@ -1,109 +0,0 @@
-import clsx from 'clsx';
-import { ChevronsUpDown, ExternalLink } from 'lucide-react';
-
-function PrimaryActionText({ children }: { children?: React.ReactNode }) {
-  return <span data-part="primary-action-text">{children}</span>;
-}
-
-function PrimaryAction({ children }: { children?: React.ReactNode }) {
-  return (
-    <button
-      type="button"
-      data-part="primary-action"
-      className="stl-ui-dropdown-button__button stl-ui-dropdown-button--action"
-    >
-      {children}
-    </button>
-  );
-}
-
-function Trigger() {
-  return (
-    <button
-      className="stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger"
-      aria-haspopup="listbox"
-      aria-expanded="false"
-      data-part="trigger"
-    >
-      <ChevronsUpDown size={16} />
-    </button>
-  );
-}
-
-function Menu({ children }: { children?: React.ReactNode }) {
-  return (
-    <div className="stl-ui-dropdown-button__menu" data-state="closed" data-part="menu">
-      {children}
-    </div>
-  );
-}
-
-function MenuItemIcon({ children }: { children?: React.ReactNode }) {
-  return (
-    <div className="stl-ui-dropdown-button__menu-item-icon" data-part="item-icon">
-      {children}
-    </div>
-  );
-}
-
-function MenuItemText({ children, subtle }: { children?: React.ReactNode; subtle?: boolean }) {
-  return (
-    <span
-      className={clsx(`stl-ui-dropdown-button__menu-item-text`, {
-        'stl-ui-dropdown-button__menu-item-text--subtle': subtle,
-      })}
-      data-part="item-text"
-    >
-      {children}
-    </span>
-  );
-}
-
-function MenuItemTextSubtle({ children }: { children?: React.ReactNode }) {
-  return (
-    <span className="stl-ui-dropdown-button__menu-item-text-subtle" data-part="item-text-subtle">
-      {children}
-    </span>
-  );
-}
-
-function MenuItem({
-  children,
-  value,
-  isExternalLink,
-}: {
-  children?: React.ReactNode;
-  value: string;
-  isExternalLink?: boolean;
-}) {
-  return (
-    <div className="stl-ui-dropdown-button__menu-item" data-part="item" data-value={value}>
-      <div className="stl-ui-dropdown-button__menu-item-content">{children}</div>
-      {isExternalLink && (
-        <div
-          className="stl-ui-dropdown-button__menu-item-external-link-icon"
-          data-part="item-external-link-icon"
-        >
-          <ExternalLink size={16} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function DropdownButton({ id, children }: { id: string; children?: React.ReactNode }) {
-  return (
-    <div className="stl-ui-dropdown-button stl-ui-not-prose not-content" id={id}>
-      {children}
-    </div>
-  );
-}
-
-DropdownButton.Menu = Menu;
-DropdownButton.MenuItem = MenuItem;
-DropdownButton.MenuItemIcon = MenuItemIcon;
-DropdownButton.MenuItemText = MenuItemText;
-DropdownButton.MenuItemTextSubtle = MenuItemTextSubtle;
-DropdownButton.PrimaryAction = PrimaryAction;
-DropdownButton.PrimaryActionText = PrimaryActionText;
-DropdownButton.Trigger = Trigger;

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;
-  }
-}