@stainless-api/ui-primitives 0.1.0-beta.2 → 0.1.0-beta.20

package/dist/styles.js

@@ -0,0 +1 @@
+export {  };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/ui-primitives",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.20",
   "publishConfig": {
     "access": "public"
   },
@@ -19,19 +19,19 @@
   },
   "types": "./src/index.ts",
   "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"
   },
   "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"
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "5.9.3",
+    "@stainless/eslint-config": "0.1.0-beta.0"
   }
 }

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

package/src/components/button.css

@@ -1,157 +1,187 @@
-@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);
-    }
+.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: color-mix(
+    in oklch,
+    var(--stl-ui-inverse-background) 90%,
+    var(--stl-ui-background)
+  );
+
+  --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);
-  }
+/* --- 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: color-mix(
+    in oklch,
+    var(--stl-ui-accent-background) 90%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
 
-  .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--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: color-mix(
+    in oklch,
+    var(--stl-ui-accent-background) 10%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
 
-  .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--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: color-mix(
+    in oklch,
+    var(--stl-ui-foreground) 10%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
 
-  .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--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: color-mix(
+    in oklch,
+    var(--stl-ui-foreground) 5%,
+    var(--stl-ui-inverse-foreground)
+  );
+  --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--ghost {
+  --stl-ui-button-color: var(--stl-ui-foreground);
+  --stl-ui-button-background-color: transparent;
+  --stl-ui-button-background-color-hover: color-mix(
+    in oklch,
+    var(--stl-ui-foreground) 5%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
 
-  .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--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: color-mix(
+    in oklch,
+    var(--stl-ui-swatch-green-base) 90%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
 
-  .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);
-  }
+.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: color-mix(
+    in oklch,
+    var(--stl-ui-swatch-red-base) 90%,
+    var(--stl-ui-inverse-foreground)
+  );
+}
 
-  /* --- 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);
-  }
+/* --- 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);
-  }
+.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;
-    }
-  }
+/* --- ICONS ---  */
+.stl-ui-button__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  /* Left Icon */
-  .stl-ui-button:has(.stl-ui-button__icon:first-child) .stl-ui-button__icon {
-    margin-left: -4px;
-    margin-right: 4px;
+  svg {
+    margin-top: 0;
   }
+}
 
-  .stl-ui-button:has(.stl-ui-button__icon:last-child) .stl-ui-button__icon {
-    /* Right Icon */
-    margin-right: -4px;
-    margin-left: 4px;
+/* 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;
-    }
+  /* 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);
+/* 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;
-    }
+  .stl-ui-button__icon {
+    margin-left: -4px;
+    margin-right: -4px;
   }
+}
 
-  /* --- LINKS ---  */
+/* --- LINKS ---  */
 
-  a.stl-ui-button {
-    text-decoration: none;
-    text-align: center;
-  }
+a.stl-ui-button {
+  text-decoration: none;
+  text-align: center;
 }