@stainless-api/ui-primitives 0.1.0-beta.8 → 1.0.0-beta.54

package/package.json

@@ -1,37 +1,55 @@
 {
   "name": "@stainless-api/ui-primitives",
-  "version": "0.1.0-beta.8",
+  "version": "1.0.0-beta.54",
+  "license": "MIT",
   "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,55 +0,0 @@
-# @stainless-api/ui-primitives
-
-## 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/Button.tsx

@@ -1,94 +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',
-    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/DetailsGroup.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-export type DetailsGroupProps = React.ComponentProps<'div'>;
-
-export function DetailsGroup({ className, children, ...props }: DetailsGroupProps) {
-  const classes = clsx('stl-ui-details-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>
-  );
-}

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/button.css

@@ -1,157 +0,0 @@
-@layer stl-ui {
-  .stl-ui-button {
-    --stl-ui-button-color: var(--stl-ui-inverse-foreground);
-    --stl-ui-button-background-color: var(--stl-ui-inverse-background);
-    --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-inverse-background) l c h / 0.9);
-
-    --stl-ui-button-border-color: transparent;
-    --stl-ui-button-border-color-hover: transparent;
-
-    --stl-ui-button-height: 32px;
-    --stl-ui-button-padding: 8px 10px;
-    --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-sml);
-    --stl-ui-button-line-height: 150%;
-    --stl-ui-button-font-weight: 500;
-    --stl-ui-button-font-size: var(--stl-ui-type-scale-text-sm);
-    --stl-ui-button-font-family: var(--stl-ui-typography-font);
-
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 2px;
-    white-space: nowrap;
-    flex-shrink: 0;
-
-    height: var(--stl-ui-button-height);
-    padding: var(--stl-ui-button-padding);
-    border-radius: var(--stl-ui-button-border-radius);
-    line-height: var(--stl-ui-button-line-height);
-    font-weight: var(--stl-ui-button-font-weight);
-    font-size: var(--stl-ui-button-font-size);
-
-    border: 1px solid var(--stl-ui-button-border-color);
-    font-family: var(--stl-ui-button-font-family);
-
-    color: var(--stl-ui-button-color);
-    background-color: var(--stl-ui-button-background-color);
-
-    &:hover {
-      background-color: var(--stl-ui-button-background-color-hover);
-      border-color: var(--stl-ui-button-border-color-hover);
-    }
-  }
-
-  /* --- COLOR VARIANTS ---  */
-  .stl-ui-button--accent {
-    --stl-ui-button-color: var(--stl-ui-accent-foreground);
-    --stl-ui-button-background-color: var(--stl-ui-accent-background);
-    --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-accent-background) l c h / 0.9);
-  }
-
-  .stl-ui-button--accent-muted {
-    --stl-ui-button-color: var(--stl-ui-accent-muted-foreground);
-    --stl-ui-button-background-color: var(--stl-ui-accent-muted-background);
-    --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-accent-background) l c h / 0.1);
-  }
-
-  .stl-ui-button--muted {
-    --stl-ui-button-color: var(--stl-ui-foreground);
-    --stl-ui-button-background-color: var(--stl-ui-muted-background);
-    --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.1);
-  }
-
-  .stl-ui-button--outline {
-    --stl-ui-button-color: var(--stl-ui-foreground);
-    --stl-ui-button-background-color: var(--stl-ui-card-background);
-    --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.05);
-    --stl-ui-button-border-color: var(--stl-ui-border);
-    --stl-ui-button-border-color-hover: var(--stl-ui-border-emphasis);
-  }
-
-  .stl-ui-button--ghost {
-    --stl-ui-button-color: var(--stl-ui-foreground);
-    --stl-ui-button-background-color: transparent;
-    --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-foreground) l c h / 0.05);
-  }
-
-  .stl-ui-button--success {
-    --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
-    --stl-ui-button-background-color: var(--stl-ui-swatch-green-base);
-    --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-swatch-green-base) l c h / 0.9);
-  }
-
-  .stl-ui-button--destructive {
-    --stl-ui-button-color: var(--stl-ui-swatch-gray-white);
-    --stl-ui-button-background-color: var(--stl-ui-swatch-red-base);
-    --stl-ui-button-background-color-hover: oklch(from var(--stl-ui-swatch-red-base) l c h / 0.9);
-  }
-
-  /* --- SIZE VARIANTS ---  */
-  .stl-ui-button--size-sm {
-    --stl-ui-button-height: 24px;
-    --stl-ui-button-padding: 0 6px;
-    --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius-xs);
-    --stl-ui-button-line-height: 100%;
-    --stl-ui-button-font-weight: 500;
-    --stl-ui-button-font-size: var(--stl-ui-typography-text-body-xs);
-  }
-
-  .stl-ui-button--size-lg {
-    --stl-ui-button-height: 40px;
-    --stl-ui-button-padding: 8px 14px;
-    --stl-ui-button-border-radius: var(--stl-ui-layout-border-radius);
-    --stl-ui-button-line-height: 150%;
-    --stl-ui-button-font-weight: 500;
-    --stl-ui-button-font-size: var(--stl-ui-typography-text-body);
-  }
-
-  /* --- ICONS ---  */
-  .stl-ui-button__icon {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      margin-top: 0;
-    }
-  }
-
-  /* Left Icon */
-  .stl-ui-button:has(.stl-ui-button__icon:first-child) .stl-ui-button__icon {
-    margin-left: -4px;
-    margin-right: 4px;
-  }
-
-  .stl-ui-button:has(.stl-ui-button__icon:last-child) .stl-ui-button__icon {
-    /* Right Icon */
-    margin-right: -4px;
-    margin-left: 4px;
-
-    /* Right & Left Icon */
-    &:first-child {
-      margin-left: -4px;
-      margin-right: 4px;
-    }
-  }
-
-  /* Only Icon */
-  .stl-ui-button:not(:has(.stl-ui-button-label)):has(.stl-ui-button__icon:last-child):has(
-      .stl-ui-button__icon:first-child
-    ) {
-    width: var(--stl-ui-button-height);
-
-    .stl-ui-button__icon {
-      margin-left: -4px;
-      margin-right: -4px;
-    }
-  }
-
-  /* --- LINKS ---  */
-
-  a.stl-ui-button {
-    text-decoration: none;
-    text-align: center;
-  }
-}

package/src/components/callout.css

@@ -1,72 +0,0 @@
-@layer stl-ui.components {
-  .stl-ui-callout {
-    --stl-ui-callout-background-color: var(--stl-ui-muted-background);
-    --stl-ui-callout-border-color: var(--stl-ui-border);
-    --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
-
-    border: 1px solid var(--stl-ui-callout-border-color);
-    background-color: var(--stl-ui-callout-background-color);
-    border-radius: var(--stl-ui-layout-border-radius);
-    padding: 12px;
-    line-height: var(--stl-ui-typography-line-height);
-    font-weight: 400;
-    font-size: var(--stl-ui-typography-text-body);
-
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .stl-ui-callout--info {
-    --stl-ui-callout-background-color: var(--stl-ui-muted-background);
-    --stl-ui-callout-border-color: var(--stl-ui-border);
-    --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
-  }
-
-  .stl-ui-callout--note {
-    --stl-ui-callout-background-color: var(--stl-ui-swatch-blue-faint);
-    --stl-ui-callout-border-color: var(--stl-ui-swatch-blue-muted);
-    --stl-ui-callout-accent-color: var(--stl-ui-swatch-blue-base);
-  }
-
-  .stl-ui-callout--tip {
-    --stl-ui-callout-background-color: var(--stl-ui-swatch-purple-faint);
-    --stl-ui-callout-border-color: var(--stl-ui-swatch-purple-muted);
-    --stl-ui-callout-accent-color: var(--stl-ui-swatch-purple-base);
-  }
-
-  .stl-ui-callout--success {
-    --stl-ui-callout-background-color: var(--stl-ui-swatch-green-faint);
-    --stl-ui-callout-border-color: var(--stl-ui-swatch-green-muted);
-    --stl-ui-callout-accent-color: var(--stl-ui-swatch-green-base);
-  }
-
-  .stl-ui-callout--warning {
-    --stl-ui-callout-background-color: var(--stl-ui-swatch-yellow-faint);
-    --stl-ui-callout-border-color: var(--stl-ui-swatch-yellow-muted);
-    --stl-ui-callout-accent-color: var(--stl-ui-swatch-yellow-base);
-  }
-
-  .stl-ui-callout--danger {
-    --stl-ui-callout-background-color: var(--stl-ui-swatch-red-faint);
-    --stl-ui-callout-border-color: var(--stl-ui-swatch-red-muted);
-    --stl-ui-callout-accent-color: var(--stl-ui-swatch-red-base);
-  }
-
-  .stl-ui-callout__icon {
-    color: var(--stl-ui-callout-accent-color);
-    flex-shrink: 0;
-    width: 1em;
-    height: 1em;
-    margin: calc((1lh - 1em) / 2);
-  }
-
-  .stl-ui-callout__content {
-    flex: 1;
-    margin-top: 0;
-
-    & > :first-child {
-      margin-top: 0;
-    }
-  }
-}