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

package/src/components/callout.css

@@ -1,72 +1,93 @@
-@layer stl-ui {
-  .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);
+.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);
+  --stl-ui-callout-strong-color: var(--stl-ui-callout-accent-color);
+  --stl-ui-callout-selection-background: var(--stl-ui-swatch-gray-gray-6);
 
-    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);
+  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;
-  }
+  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);
+  :where(a) {
+    color: var(--stl-ui-callout-strong-color);
+    text-decoration-color: rgba(from currentColor r g b / 0.4);
+    transition: text-decoration-color 0.1s ease;
+    &:hover {
+      text-decoration-color: rgba(from currentColor r g b / 0.8);
+    }
   }
 
-  .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);
+  ::selection {
+    background-color: var(--stl-ui-callout-selection-background);
+    color: var(--stl-ui-foreground);
   }
+}
 
-  .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--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-strong-color: var(--stl-ui-foreground);
+  --stl-ui-callout-selection-background: var(--stl-ui-swatch-gray-gray-6);
+}
 
-  .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--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-selection-background: var(--stl-ui-swatch-blue-muted);
+}
 
-  .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--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-selection-background: var(--stl-ui-swatch-purple-muted);
+}
 
-  .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--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-selection-background: var(--stl-ui-swatch-green-muted);
+}
 
-  .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--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-selection-background: var(--stl-ui-swatch-yellow-muted);
+}
 
-  .stl-ui-callout__content {
-    flex: 1;
-    margin-top: 0;
+.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-selection-background: var(--stl-ui-swatch-red-muted);
+}
 
-    & > :first-child {
-      margin-top: 0;
-    }
+.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;
   }
 }

package/src/components/dropdown/Dropdown.tsx

@@ -0,0 +1,51 @@
+import clsx from 'clsx';
+import type { ComponentProps } from 'react';
+import { Menu } from './DropdownMenu';
+
+function Trigger({ className, ...props }: ComponentProps<'button'>) {
+  return (
+    <button {...props} data-part="trigger" className={clsx('stl-ui-dropdown__button', className)}>
+      {props.children}
+    </button>
+  );
+}
+
+function TriggerSelectedItem({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      {...props}
+      data-part="trigger-selected"
+      className={clsx('stl-ui-dropdown__trigger-selected', className)}
+    />
+  );
+}
+
+function TriggerIcon({ className, ...props }: ComponentProps<'span'>) {
+  return (
+    <span {...props} data-part="trigger-icon" className={clsx('stl-ui-dropdown__trigger-icon', className)} />
+  );
+}
+
+function Icon({ className, ...props }: ComponentProps<'div'>) {
+  return <div {...props} data-part="item-icon" className={clsx('stl-ui-dropdown__icon', className)} />;
+}
+
+export function Dropdown({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      {...props}
+      aria-haspopup="listbox"
+      aria-expanded="false"
+      className={clsx('stl-ui-dropdown stl-ui-not-prose not-content', className)}
+    />
+  );
+}
+
+Dropdown.Menu = Menu;
+Dropdown.MenuItem = Menu.Item;
+Dropdown.MenuItemText = Menu.ItemText;
+Dropdown.MenuItemTemplate = Menu.ItemTemplate;
+Dropdown.Trigger = Trigger;
+Dropdown.TriggerSelectedItem = TriggerSelectedItem;
+Dropdown.TriggerIcon = TriggerIcon;
+Dropdown.Icon = Icon;

package/src/components/dropdown/DropdownButton.tsx

@@ -0,0 +1,54 @@
+import clsx from 'clsx';
+import { ChevronsUpDown } from 'lucide-react';
+import type { ComponentProps } from 'react';
+import { Menu } from './DropdownMenu';
+
+function PrimaryActionText({ children }: { children?: React.ReactNode }) {
+  return <span data-part="primary-action-text">{children}</span>;
+}
+
+function PrimaryAction({ className, ...props }: ComponentProps<'button'>) {
+  return (
+    <button
+      {...props}
+      data-part="primary-action"
+      className={clsx('stl-ui-dropdown__button stl-ui-dropdown-button--action', className)}
+    />
+  );
+}
+
+function Trigger({ className, ...props }: ComponentProps<'button'>) {
+  return (
+    <button
+      {...props}
+      type="button"
+      data-part="trigger"
+      className={clsx('stl-ui-dropdown__button stl-ui-dropdown-button__trigger', className)}
+    >
+      <ChevronsUpDown size={16} />
+    </button>
+  );
+}
+
+function Icon({ className, ...props }: ComponentProps<'div'>) {
+  return <div data-part="item-icon" {...props} className={clsx('stl-ui-dropdown__icon', className)} />;
+}
+
+export function DropdownButton({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      {...props}
+      aria-haspopup="listbox"
+      aria-expanded="false"
+      className={clsx('stl-ui-dropdown stl-ui-not-prose not-content', className)}
+    />
+  );
+}
+
+DropdownButton.Menu = Menu;
+DropdownButton.MenuItem = Menu.Item;
+DropdownButton.MenuItemText = Menu.ItemText;
+DropdownButton.PrimaryAction = PrimaryAction;
+DropdownButton.PrimaryActionText = PrimaryActionText;
+DropdownButton.Trigger = Trigger;
+DropdownButton.Icon = Icon;

package/src/components/dropdown/DropdownMenu.tsx

@@ -0,0 +1,113 @@
+import clsx from 'clsx';
+import { CheckIcon, ExternalLink } from 'lucide-react';
+import type { ComponentProps } from 'react';
+
+export function Menu({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      {...props}
+      role="listbox"
+      data-state="closed"
+      data-part="menu"
+      className={clsx('stl-ui-dropdown-menu', className)}
+    />
+  );
+}
+
+function MenuItemText({ className, subtle, ...props }: ComponentProps<'span'> & { subtle?: boolean }) {
+  return (
+    <span
+      {...props}
+      data-part="item-text"
+      className={clsx(
+        `stl-ui-dropdown-menu__item-text`,
+        {
+          'stl-ui-dropdown-menu__item-text--subtle': subtle,
+        },
+        className,
+      )}
+    />
+  );
+}
+
+type MenuItemBaseProps = {
+  children?: React.ReactNode;
+  value: string;
+  isExternalLink?: boolean;
+  isSelected?: boolean;
+};
+
+type MenuItemWithHref = MenuItemBaseProps &
+  ComponentProps<'a'> & {
+    href: string;
+  };
+
+type MenuItemWithoutHref = MenuItemBaseProps &
+  ComponentProps<'button'> & {
+    href?: never;
+  };
+
+type MenuItemProps = MenuItemWithHref | MenuItemWithoutHref;
+
+function MenuItem({ children, value, href, isExternalLink, isSelected, ...props }: MenuItemProps) {
+  const inner = (
+    <>
+      <div className="stl-ui-dropdown-menu__item-content">{children}</div>
+      {isSelected && (
+        <div className="stl-ui-dropdown-menu__item-icon" data-part="item-selected-icon">
+          <CheckIcon size={16} />
+        </div>
+      )}
+      {isExternalLink && (
+        <div className="stl-ui-dropdown-menu__item-subtle-icon" data-part="item-external-link-icon">
+          <ExternalLink size={16} />
+        </div>
+      )}
+    </>
+  );
+
+  if (href) {
+    return (
+      <a
+        role="option"
+        data-part="item"
+        data-value={value}
+        aria-selected={isSelected}
+        href={href}
+        {...(props as ComponentProps<'a'>)}
+        className={clsx('stl-ui-dropdown-menu__item', 'stl-ui-dropdown-menu__item-link', props.className)}
+      >
+        {inner}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      {...(props as ComponentProps<'button'>)}
+      role="option"
+      data-part="item"
+      data-value={value}
+      aria-selected={isSelected}
+      className={clsx('stl-ui-dropdown-menu__item', props.className)}
+    >
+      {inner}
+    </button>
+  );
+}
+
+/**
+ * A template component that defines the content to be displayed in the dropdown trigger
+ * when a menu item is selected. This template is used to customize the appearance of
+ * the selected item in the trigger button.
+ *
+ * @param props - Standard HTML template element props
+ * @returns A template element marked with the "selected-template" data part
+ */
+function MenuItemTemplate({ ...props }: ComponentProps<'template'>) {
+  return <template data-part="selected-template" {...props} />;
+}
+
+Menu.Item = MenuItem;
+Menu.ItemText = MenuItemText;
+Menu.ItemTemplate = MenuItemTemplate;

package/src/components/dropdown/dropdown.css

@@ -0,0 +1,231 @@
+.stl-ui-dropdown {
+  --stl-ui-dropdown-button-color: var(--stl-ui-foreground);
+  --stl-ui-dropdown-button-background-color: var(--stl-ui-card-background);
+  --stl-ui-dropdown-button-border-color: var(--stl-ui-border);
+  --stl-ui-dropdown-button-border-radius: var(--stl-ui-layout-border-radius-sml);
+  --stl-ui-dropdown-button-font-size: var(--stl-ui-type-scale-text-sm);
+
+  --stl-ui-dropdown-button-height: 32px;
+  --stl-ui-dropdown-button-padding: 0 10px;
+  --stl-ui-dropdown-button-line-height: 100%;
+  --stl-ui-dropdown-button-font-weight: 500;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  color: var(--stl-ui-dropdown-button-color);
+  gap: 0;
+  font-size: var(--stl-ui-dropdown-button-font-size);
+
+  hr {
+    --stl-ui-dropdown-button__divider-height: 1px;
+    --stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
+
+    height: var(--stl-ui-dropdown-button__divider-height);
+    background-color: var(--stl-ui-dropdown-button__divider-color);
+    border: none;
+
+    margin: 4px 0;
+    width: calc(100% + 8px);
+    transform: translateX(-4px);
+  }
+
+  .stl-ui-dropdown__button {
+    background-color: var(--stl-ui-dropdown-button-background-color);
+
+    border: 1px solid var(--stl-ui-dropdown-button-border-color);
+    border-radius: var(--stl-ui-dropdown-button-border-radius);
+    height: var(--stl-ui-dropdown-button-height);
+    padding: var(--stl-ui-dropdown-button-padding);
+    line-height: var(--stl-ui-dropdown-button-line-height);
+    font-weight: var(--stl-ui-dropdown-button-font-weight);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+
+    &:focus {
+      outline: 1px auto Highlight;
+    }
+
+    &:hover {
+      background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
+      border-color: var(--stl-ui-border-emphasis);
+    }
+
+    .stl-ui-dropdown__trigger-icon {
+      margin-right: -4px;
+      margin-left: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .stl-ui-dropdown__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  /**
+  *  Dropdown Button
+  */
+  .stl-ui-dropdown-button--action {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: none;
+
+    &:hover {
+      background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
+      border-color: var(--stl-ui-border-emphasis);
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
+    }
+  }
+
+  .stl-ui-dropdown-button__trigger {
+    border-left: 1px solid var(--stl-ui-border);
+    border-radius: 0;
+    border-top-right-radius: var(--stl-ui-dropdown-button-border-radius);
+    border-bottom-right-radius: var(--stl-ui-dropdown-button-border-radius);
+
+    &:hover {
+      background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
+      border-color: var(--stl-ui-border-emphasis);
+    }
+  }
+
+  .stl-ui-dropdown__trigger-selected {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  /**
+  *  Dropdown Menu
+  */
+  .stl-ui-dropdown-menu {
+    --stl-ui-dropdown-menu-background-color: var(--stl-ui-card-background);
+    --stl-ui-dropdown-menu-border-color: var(--stl-ui-border);
+    --stl-ui-dropdown-menu-box-shadow: var(--stl-ui-shadow-md);
+    --stl-ui-dropdown-menu-border-radius: var(--stl-ui-layout-border-radius-sml);
+
+    background-color: var(--stl-ui-dropdown-menu-background-color);
+    border: 1px solid var(--stl-ui-dropdown-menu-border-color);
+    box-shadow: var(--stl-ui-dropdown-menu-box-shadow);
+    border-radius: var(--stl-ui-dropdown-menu-border-radius);
+
+    position: absolute;
+    right: 0;
+    z-index: 1000;
+    min-width: 100%;
+    padding: 4px;
+    display: none;
+
+    &.stl-ui-dropdown-menu--above {
+      top: auto;
+      bottom: 100%;
+      margin-bottom: 4px;
+    }
+
+    &.stl-ui-dropdown-menu--below {
+      top: 100%;
+      bottom: auto;
+      margin-top: 4px;
+    }
+
+    &[data-state='open'] {
+      display: block;
+    }
+
+    .stl-ui-dropdown-menu__item {
+      --stl-ui-dropdown-menu__item-border-radius: var(--stl-ui-dropdown-button-border-radius);
+      --stl-ui-dropdown-menu__item-height: var(--stl-ui-dropdown-button-height);
+      --stl-ui-dropdown-menu__item-line-height: var(--stl-ui-dropdown-button-line-height);
+      --stl-ui-dropdown-menu__item-hover-background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
+
+      border-radius: var(--stl-ui-dropdown-menu__item-border-radius);
+      height: var(--stl-ui-dropdown-menu__item-height);
+      line-height: var(--stl-ui-dropdown-menu__item-line-height);
+
+      background: transparent;
+      border: none;
+
+      padding: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      width: 100%;
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--stl-ui-dropdown-menu__item-hover-background-color);
+      }
+
+      &:hover,
+      &:focus-visible,
+      &:focus {
+        color: var(--stl-ui-foreground);
+      }
+
+      &.stl-ui-dropdown-menu__item-link {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        width: 100%;
+
+        &:hover {
+          color: var(--stl-ui-foreground);
+        }
+      }
+
+      .stl-ui-dropdown-menu__item-icon {
+        display: flex;
+      }
+
+      .stl-ui-dropdown-menu__item-content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .stl-ui-dropdown-menu__item-text {
+        white-space: nowrap;
+      }
+
+      .stl-ui-dropdown-menu__item-text--subtle {
+        color: var(--stl-ui-foreground-muted);
+      }
+
+      strong {
+        color: var(--stl-ui-foreground);
+        font-weight: 500;
+      }
+
+      .stl-ui-dropdown-menu__item-subtle-icon {
+        --stl-ui-dropdown-menu__item-subtle-icon-color: oklch(from var(--stl-ui-foreground) l c h / 0.25);
+
+        svg {
+          color: var(--stl-ui-dropdown-menu__item-subtle-icon-color);
+        }
+      }
+    }
+  }
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './components/Button';
-export * from './components/DropdownButton';
+export * from './components/dropdown/Dropdown';
+export * from './components/dropdown/DropdownButton';
 export * from './components/Callout';
-export * from './components/DetailsGroup';
+export * from './components/Accordion';

package/src/scripts/dropdown-button.ts

@@ -1,55 +1,39 @@
+import { initDropdown } from './dropdown';
+
 export function initDropdownButton({
-  dropdownId,
+  dropdown,
   onSelect,
   onPrimaryAction,
 }: {
-  dropdownId: string;
+  dropdown: Element;
   onSelect: (value: string) => void;
   onPrimaryAction: (primaryActionElement: Element) => void;
 }) {
-  const dropdown = document.getElementById(dropdownId);
-  if (!dropdown) return;
-
   const trigger = dropdown.querySelector('[data-part="trigger"]') as HTMLButtonElement | null;
   const menu = dropdown.querySelector('[data-part="menu"]') as HTMLElement | null;
   const primaryAction = dropdown.querySelector('[data-part="primary-action"]');
 
-  if (!trigger || !menu || !primaryAction) return;
-
-  let isOpen = false;
-
-  function toggleDropdown() {
-    if (!trigger || !menu) return;
-    isOpen = !isOpen;
-    menu.dataset.state = isOpen ? 'open' : 'closed';
-    trigger.setAttribute('aria-expanded', String(isOpen));
+  if (!trigger) {
+    console.error('Dropdown trigger not found');
+    return;
   }
 
-  trigger.addEventListener('click', toggleDropdown);
-
-  document.addEventListener('click', (event) => {
-    if (!isOpen) return;
-    if (!dropdown.contains(event.target as Node)) {
-      toggleDropdown();
-    }
-
-    if (primaryAction && primaryAction.contains(event.target as Node)) {
-      toggleDropdown();
-    }
-  });
+  if (!menu) {
+    console.error('Dropdown menu not found');
+    return;
+  }
 
-  const items = dropdown.querySelectorAll('[data-part="item"]');
-  items.forEach((item) => {
-    item.addEventListener('click', () => {
-      const value = item.getAttribute('data-value');
-      if (value) {
-        onSelect(value);
-      }
-      toggleDropdown();
-    });
-  });
+  if (!primaryAction) {
+    console.error('Dropdown primary action not found');
+    return;
+  }
 
   primaryAction.addEventListener('click', () => {
     onPrimaryAction(primaryAction);
   });
+
+  initDropdown({
+    root: dropdown,
+    onSelect,
+  });
 }