@stainless-api/ui-primitives 0.1.0-beta.21 → 0.1.0-beta.23

package/src/components/button.css

@@ -1,187 +0,0 @@
-.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: 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: 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: 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: 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: 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: 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: 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);
-}
-
-.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,93 +0,0 @@
-.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);
-
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-
-  :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);
-    }
-  }
-
-  ::selection {
-    background-color: var(--stl-ui-callout-selection-background);
-    color: var(--stl-ui-foreground);
-  }
-}
-
-.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--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--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--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--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--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);
-}
-
-.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

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

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

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