@stainless-api/ui-primitives 0.1.0-beta.0 → 0.1.0-beta.10

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @stainless-api/ui-primitives
 
+## 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

package/package.json

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

package/src/components/Accordion.tsx

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

@@ -54,6 +54,7 @@ export function Button(props: ButtonProps) {
       'stl-ui-button--size-lg': props.size === 'lg',
     },
     'not-content',
+    'stl-ui-not-prose',
     props.className,
   );
 

package/src/components/DropdownButton.tsx

@@ -1,10 +1,11 @@
+import clsx from 'clsx';
 import { ChevronsUpDown, ExternalLink } from 'lucide-react';
 
-export function DropdownButtonPrimaryActionText({ children }: { children?: React.ReactNode }) {
+function PrimaryActionText({ children }: { children?: React.ReactNode }) {
   return <span data-part="primary-action-text">{children}</span>;
 }
 
-export function DropdownButtonPrimaryAction({ children }: { children?: React.ReactNode }) {
+function PrimaryAction({ children }: { children?: React.ReactNode }) {
   return (
     <button
       type="button"
@@ -16,7 +17,7 @@ export function DropdownButtonPrimaryAction({ children }: { children?: React.Rea
   );
 }
 
-export function DropdownButtonTrigger() {
+function Trigger() {
   return (
     <button
       className="stl-ui-dropdown-button__button stl-ui-dropdown-button__trigger"
@@ -29,7 +30,7 @@ export function DropdownButtonTrigger() {
   );
 }
 
-export function DropdownButtonMenu({ children }: { children?: React.ReactNode }) {
+function Menu({ children }: { children?: React.ReactNode }) {
   return (
     <div className="stl-ui-dropdown-button__menu" data-state="closed" data-part="menu">
       {children}
@@ -37,7 +38,7 @@ export function DropdownButtonMenu({ children }: { children?: React.ReactNode })
   );
 }
 
-export function DropdownButtonItemIcon({ children }: { children?: React.ReactNode }) {
+function MenuItemIcon({ children }: { children?: React.ReactNode }) {
   return (
     <div className="stl-ui-dropdown-button__menu-item-icon" data-part="item-icon">
       {children}
@@ -45,15 +46,20 @@ export function DropdownButtonItemIcon({ children }: { children?: React.ReactNod
   );
 }
 
-export function DropdownButtonItemText({ children }: { children?: React.ReactNode }) {
+function MenuItemText({ children, subtle }: { children?: React.ReactNode; subtle?: boolean }) {
   return (
-    <span className="stl-ui-dropdown-button__menu-item-text" data-part="item-text">
+    <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>
   );
 }
 
-export function DropdownButtonItemTextSubtle({ children }: { children?: React.ReactNode }) {
+function MenuItemTextSubtle({ children }: { children?: React.ReactNode }) {
   return (
     <span className="stl-ui-dropdown-button__menu-item-text-subtle" data-part="item-text-subtle">
       {children}
@@ -61,7 +67,7 @@ export function DropdownButtonItemTextSubtle({ children }: { children?: React.Re
   );
 }
 
-export function DropdownButtonItem({
+function MenuItem({
   children,
   value,
   isExternalLink,
@@ -85,10 +91,6 @@ export function DropdownButtonItem({
   );
 }
 
-export function DropdownButtonDivider() {
-  return <div className="stl-ui-dropdown-button__divider" data-part="divider" />;
-}
-
 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}>
@@ -96,3 +98,12 @@ export function DropdownButton({ id, children }: { id: string; children?: React.
     </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

@@ -0,0 +1,145 @@
+/* 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;
+  }
+}