@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.4

package/src/primitives/checkbox/checkbox.css

@@ -0,0 +1,81 @@
+.ui-checkbox {
+  --ui-checkbox-size: var(--ui-checkbox-size-default);
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: var(--control-height-sm);
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  line-height: 1.35;
+  cursor: pointer;
+}
+
+.ui-checkbox[data-disabled='true'] {
+  color: var(--color-text-subtle);
+  cursor: default;
+}
+
+.ui-checkbox__control {
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 var(--ui-checkbox-size);
+  width: var(--ui-checkbox-size);
+  height: var(--ui-checkbox-size);
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-checkbox__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+.ui-checkbox__indicator {
+  box-sizing: border-box;
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--vscode-checkbox-border, var(--color-border));
+  border-radius: var(--ui-checkbox-border-radius);
+  background: var(--vscode-checkbox-background, var(--color-bg));
+}
+
+.ui-checkbox__indicator::after {
+  content: '';
+  width: 8px;
+  height: 4px;
+  border-color: var(--vscode-checkbox-foreground, var(--color-accent-foreground));
+  border-style: solid;
+  border-width: 0 0 2px 2px;
+  opacity: 0;
+  transform: rotate(-45deg) translate(1px, -1px) scale(0.8);
+}
+
+.ui-checkbox__input:checked + .ui-checkbox__indicator {
+  border-color: var(--vscode-checkbox-selectBorder, var(--color-accent));
+  background: var(--vscode-checkbox-selectBackground, var(--color-accent));
+}
+
+.ui-checkbox__input:checked + .ui-checkbox__indicator::after {
+  opacity: 1;
+  transform: rotate(-45deg) translate(1px, -1px) scale(1);
+}
+
+.ui-checkbox__input:focus-visible + .ui-checkbox__indicator {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: 2px;
+}
+
+.ui-checkbox__input:disabled + .ui-checkbox__indicator {
+  border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
+  background: var(--color-surface);
+  opacity: 0.62;
+}

package/src/primitives/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/src/primitives/chip/Chip.tsx

@@ -0,0 +1,43 @@
+import './chip.css';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { Button } from '../button';
+import { cx } from '../../utils/cx';
+
+export interface ChipProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+  count?: number | undefined;
+  label: ReactNode;
+  onDismiss?: (() => void) | undefined;
+}
+
+/**
+ * Compact labeled control, optionally dismissible (close affordance).
+ * Preferred over layout-scoped `FilterChip`.
+ */
+export function Chip({ className, count, label, onDismiss, type = 'button', ...props }: ChipProps) {
+  return (
+    <Button className={cx('ui-chip', 'ui-filter-chip', className)} type={type} {...props}>
+      <span className="ui-chip__label ui-filter-chip__label">{label}</span>
+      {count !== undefined ? (
+        <span className="ui-chip__count ui-filter-chip__count">{count}</span>
+      ) : null}
+      {onDismiss ? (
+        <span
+          aria-hidden={true}
+          className="ui-chip__dismiss ui-filter-chip__dismiss"
+          onClick={(event) => {
+            event.stopPropagation();
+            onDismiss();
+          }}
+        >
+          <i className="codicon codicon-close" />
+        </span>
+      ) : null}
+    </Button>
+  );
+}
+
+/** @deprecated Use {@link Chip} / {@link ChipProps}. */
+export const FilterChip = Chip;
+
+/** @deprecated Use {@link ChipProps}. */
+export type FilterChipProps = ChipProps;

package/src/primitives/chip/chip.css

@@ -0,0 +1,110 @@
+.ui-chip,
+.ui-filter-chip {
+  --ui-chip-border-radius: var(--radius-sm, 6px);
+  --ui-button-display: inline-flex;
+  --ui-button-align-items: center;
+  --ui-button-gap: 0.25rem;
+  --ui-button-max-width: 100%;
+  --ui-button-height: var(--workbench-filter-chip-height, 1.375rem);
+  --ui-button-min-height: var(--workbench-filter-chip-height, 1.375rem);
+  --ui-button-padding: 0 0.5rem;
+  --ui-button-border: 1px solid
+    var(--vscode-widget-border, var(--color-border-subtle, var(--color-border)));
+  --ui-button-border-radius: var(--ui-chip-border-radius);
+  --ui-button-color: var(--vscode-foreground, var(--color-text));
+  --ui-button-background: color-mix(
+    in srgb,
+    var(--vscode-badge-background, var(--color-surface-secondary, var(--color-surface))) 78%,
+    transparent
+  );
+  --ui-button-font-size: var(--font-size-xs, 0.75rem);
+  --ui-button-font-weight: 500;
+  --ui-button-line-height: 1;
+  --ui-button-hover-background: color-mix(
+    in srgb,
+    var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.08)) 70%,
+    var(--vscode-badge-background, var(--color-surface-secondary, var(--color-surface)))
+  );
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  height: var(--workbench-filter-chip-height, 1.375rem);
+  padding: 0 0.5rem;
+  border: 1px solid var(--vscode-widget-border, var(--color-border-subtle, var(--color-border)));
+  border-radius: var(--ui-chip-border-radius);
+  background: color-mix(
+    in srgb,
+    var(--vscode-badge-background, var(--color-surface-secondary, var(--color-surface))) 78%,
+    transparent
+  );
+  color: var(--vscode-foreground, var(--color-text));
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.ui-chip__label,
+.ui-filter-chip__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-chip__count,
+.ui-filter-chip__count {
+  flex: 0 0 auto;
+  opacity: 0.72;
+  font-variant-numeric: tabular-nums;
+}
+
+.ui-chip__dismiss,
+.ui-filter-chip__dismiss {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  margin-inline-start: 0.125rem;
+  opacity: 0.72;
+}
+
+.ui-chip__dismiss .codicon,
+.ui-filter-chip__dismiss .codicon {
+  font-size: 0.75rem;
+}
+
+.ui-chip:hover .ui-chip__dismiss,
+.ui-chip:hover .ui-filter-chip__dismiss,
+.ui-filter-chip:hover .ui-chip__dismiss,
+.ui-filter-chip:hover .ui-filter-chip__dismiss {
+  opacity: 1;
+}
+
+.ui-chip:focus-visible,
+.ui-filter-chip:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-accent));
+  outline-offset: 1px;
+}
+
+.ui-chip--selected,
+.ui-filter-chip--selected {
+  --ui-button-color: var(--color-text);
+  --ui-button-background: color-mix(
+    in srgb,
+    var(--color-accent, #3794ff) 14%,
+    var(--color-surface)
+  );
+  --ui-button-border: 1px solid
+    color-mix(in srgb, var(--color-accent, #3794ff) 40%, var(--color-border));
+  --ui-button-font-weight: 600;
+  --ui-button-hover-background: color-mix(
+    in srgb,
+    var(--color-accent, #3794ff) 18%,
+    var(--color-surface)
+  );
+  color: var(--color-text);
+  background: color-mix(in srgb, var(--color-accent, #3794ff) 14%, var(--color-surface));
+  border-color: color-mix(in srgb, var(--color-accent, #3794ff) 40%, var(--color-border));
+  font-weight: 600;
+}

package/src/primitives/chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip, FilterChip } from './Chip';
+export type { ChipProps, FilterChipProps } from './Chip';

package/src/primitives/clearable-text-input/ClearableTextInput.tsx

@@ -0,0 +1,78 @@
+import './clearable-text-input.css';
+import type { ChangeEvent, KeyboardEvent } from 'react';
+import { cx } from '../../utils/cx';
+import { IconButton } from '../icon-button';
+import { TextInput, type TextInputProps } from '../text-input';
+
+export interface ClearableTextInputProps extends TextInputProps {
+  clearLabel?: string;
+  inputClassName?: string;
+  onClear?: () => void;
+  showClear?: boolean;
+  wrapperClassName?: string;
+}
+
+function hasInputValue(value: TextInputProps['value']): boolean {
+  if (value === undefined || value === null) {
+    return false;
+  }
+
+  return String(value).length > 0;
+}
+
+export function ClearableTextInput({
+  className,
+  clearLabel = 'Clear',
+  inputClassName,
+  onClear,
+  onChange,
+  onKeyDown,
+  onValueChange,
+  showClear,
+  value,
+  wrapperClassName,
+  ...props
+}: ClearableTextInputProps) {
+  const shouldShowClear = showClear ?? hasInputValue(value);
+
+  const handleClear = () => {
+    onClear?.();
+
+    if (!onClear && onValueChange) {
+      onValueChange('', {
+        currentTarget: { value: '' },
+      } as ChangeEvent<HTMLInputElement>);
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape' && shouldShowClear) {
+      event.preventDefault();
+      handleClear();
+    }
+
+    onKeyDown?.(event);
+  };
+
+  return (
+    <div className={cx('ui-clearable-text-input', wrapperClassName, className)}>
+      <TextInput
+        {...props}
+        className={cx('ui-clearable-text-input__input', inputClassName)}
+        value={value}
+        onChange={onChange}
+        onKeyDown={handleKeyDown}
+        onValueChange={onValueChange}
+      />
+      {shouldShowClear ? (
+        <IconButton
+          className="ui-clearable-text-input__clear"
+          compact
+          icon="codicon-close"
+          label={clearLabel}
+          onClick={handleClear}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/primitives/clearable-text-input/clearable-text-input.css

@@ -0,0 +1,15 @@
+.ui-clearable-text-input {
+  position: relative;
+  min-width: 0;
+}
+
+.ui-clearable-text-input__input {
+  padding-right: 30px;
+}
+
+.ui-clearable-text-input__clear {
+  position: absolute;
+  top: 50%;
+  right: 3px;
+  transform: translateY(-50%);
+}

package/src/primitives/clearable-text-input/index.ts

@@ -0,0 +1 @@
+export * from './ClearableTextInput';

package/src/primitives/codicon/Codicon.tsx

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithRef } from 'react';
+import { cxCodicon } from '../../utils/codicon';
+
+export interface CodiconProps extends Omit<ComponentPropsWithRef<'i'>, 'children'> {
+  icon: string;
+  /** When set, exposes the icon to assistive tech instead of aria-hidden. */
+  label?: string | undefined;
+}
+
+/** VS Code codicon glyph (`codicon` font). Requires `@vscode/codicons` CSS in the app entry. Prefer `WorkbenchIcon` for new code. */
+export function Codicon({ className, icon, label, ...props }: CodiconProps) {
+  return (
+    <i
+      aria-hidden={label ? undefined : true}
+      aria-label={label}
+      className={cxCodicon(icon, className)}
+      {...props}
+    />
+  );
+}

package/src/primitives/codicon/index.ts

@@ -0,0 +1 @@
+export * from './Codicon';

package/src/primitives/{EmptyState.tsx → empty-state/EmptyState.tsx}

@@ -1,6 +1,7 @@
+import './empty-state.css';
 import type { ComponentPropsWithRef, ReactNode } from 'react';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
 
 export interface EmptyStateProps extends ComponentPropsWithRef<'div'> {
   compact?: boolean;
@@ -17,7 +18,12 @@ export function EmptyState({
 }: EmptyStateProps) {
   return (
     <div
-      className={cx('ui-empty-state', compact && 'ui-empty-state--compact', className)}
+      className={cx(
+        'ui-empty-state',
+        'ui-panel-centered-state',
+        compact && 'ui-empty-state--compact',
+        className,
+      )}
       {...props}
     >
       <i className={cxCodicon(icon)} />

package/src/primitives/empty-state/empty-state.css

@@ -0,0 +1,20 @@
+.ui-empty-state {
+  height: 100%;
+  min-height: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--color-text-subtle);
+  font-size: var(--font-size-sm);
+}
+
+.ui-empty-state--compact {
+  height: auto;
+  min-height: 160px;
+}
+
+.ui-empty-state .codicon {
+  font-size: 32px;
+}

package/src/primitives/empty-state/index.ts

@@ -0,0 +1 @@
+export * from './EmptyState';

package/src/primitives/external-link-button/ExternalLinkButton.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import { Toolbar } from '../toolbar';
+
+type ExternalLinkButtonProps = {
+  ariaLabel?: string;
+  children: ReactNode;
+  className?: string;
+  compact?: boolean;
+  dataAttributes?: Record<string, boolean | number | string | undefined>;
+  href: string;
+  rel?: string;
+  target?: '_blank' | '_self';
+  title?: string;
+};
+
+export function ExternalLinkButton({
+  ariaLabel,
+  children,
+  className,
+  compact = false,
+  dataAttributes,
+  href,
+  rel,
+  target = '_blank',
+  title,
+}: ExternalLinkButtonProps) {
+  const classNames = ['ui-button', compact ? 'ui-button--compact' : null, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <a
+      aria-label={ariaLabel}
+      className={classNames}
+      data-variant="default"
+      href={href}
+      rel={rel ?? (target === '_blank' ? 'noreferrer' : undefined)}
+      target={target}
+      title={title}
+      {...(dataAttributes ?? {})}
+    >
+      <i aria-hidden className="codicon codicon-link-external" />
+      {children}
+    </a>
+  );
+}
+
+export function ExternalLinkRow({
+  children,
+  dataAttributes,
+}: {
+  children: ReactNode;
+  dataAttributes?: Record<string, string>;
+}) {
+  return <Toolbar {...(dataAttributes ?? {})}>{children}</Toolbar>;
+}

package/src/primitives/external-link-button/index.ts

@@ -0,0 +1 @@
+export * from './ExternalLinkButton';

package/src/primitives/{Field.tsx → field/Field.tsx}

@@ -1,5 +1,6 @@
+import './field.css';
 import type { ReactNode } from 'react';
-import { cx } from '../utils/cx';
+import { cx } from '../../utils/cx';
 
 export interface FieldProps {
   children: ReactNode;

package/src/primitives/field/field.css

@@ -0,0 +1,51 @@
+.ui-input,
+.ui-textarea,
+.ui-workbench-field,
+.ui-workbench-select {
+  box-sizing: border-box;
+  width: var(--ui-input-width, 320px);
+  min-width: var(--ui-input-min-width, initial);
+  border: var(--ui-input-border, 1px solid var(--color-border));
+  border-radius: var(--ui-input-border-radius, var(--radius-sm));
+  color: var(--ui-input-color, var(--color-text));
+  background: var(--ui-input-background, var(--color-surface));
+  font-family: var(--ui-input-font-family, inherit);
+  font-size: var(--ui-input-font-size, var(--font-size-sm));
+  line-height: var(--ui-input-line-height, normal);
+  outline: var(--ui-input-outline, none);
+}
+
+.ui-input:focus,
+.ui-textarea:focus,
+.ui-workbench-field:focus,
+.ui-workbench-select:focus {
+  border-color: var(--ui-input-focus-border-color, var(--color-accent));
+  outline: var(--ui-input-focus-outline, none);
+}
+
+.ui-field {
+  margin: 0 0 24px;
+}
+
+.ui-field--inline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.ui-field__label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+}
+
+.ui-field__description {
+  max-width: 820px;
+  margin-bottom: 8px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+}

package/src/primitives/field/index.ts

@@ -0,0 +1 @@
+export * from './Field';

package/src/primitives/file-icon/FileIcon.tsx

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithRef } from 'react';
+import type { FileIconKind } from '../../icons/file-icon';
+import { cxCodicon } from '../../utils/codicon';
+
+export const UI_FILE_ICON_CLASS = 'ui-file-icon';
+
+export interface FileIconProps extends Omit<ComponentPropsWithRef<'i'>, 'children'> {
+  icon: string;
+  kind?: FileIconKind | undefined;
+}
+
+export function FileIcon({ className, icon, kind, ...props }: FileIconProps) {
+  return (
+    <i
+      aria-hidden
+      className={cxCodicon(icon, UI_FILE_ICON_CLASS, className)}
+      data-file-kind={kind}
+      {...props}
+    />
+  );
+}

package/src/primitives/file-icon/index.ts

@@ -0,0 +1 @@
+export * from './FileIcon';

package/src/primitives/{IconButton.tsx → icon-button/IconButton.tsx}

@@ -1,12 +1,14 @@
+import './icon-button.css';
 import type { ComponentPropsWithRef } from 'react';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
+import { WorkbenchIcon } from '../../icons/WorkbenchIcon';
+import type { WorkbenchIconInput } from '../../icons/types';
+import { cx } from '../../utils/cx';
 
 type IconButtonVariant = 'default' | 'danger';
 
 export interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
   compact?: boolean | undefined;
-  icon: string;
+  icon: WorkbenchIconInput;
   label: string;
   variant?: IconButtonVariant;
 }
@@ -29,7 +31,7 @@ export function IconButton({
       type={type}
       {...props}
     >
-      <i className={cxCodicon(icon)} />
+      <WorkbenchIcon icon={icon} />
     </button>
   );
 }

package/src/primitives/icon-button/icon-button.css

@@ -0,0 +1,46 @@
+.ui-icon-button {
+  box-sizing: border-box;
+  width: var(--ui-icon-button-width, var(--ui-icon-button-size-default));
+  height: var(--ui-icon-button-height, var(--ui-icon-button-size-default));
+  min-width: var(--ui-icon-button-min-width, 0);
+  min-height: var(--ui-icon-button-min-height, 0);
+  display: var(--ui-icon-button-display, inline-flex);
+  flex-shrink: var(--ui-icon-button-flex-shrink, initial);
+  align-items: var(--ui-icon-button-align-items, center);
+  justify-content: var(--ui-icon-button-justify-content, center);
+  padding: var(--ui-icon-button-padding, 0);
+  border: var(--ui-icon-button-border, 1px solid transparent);
+  border-radius: var(--ui-icon-button-border-radius, var(--radius-sm));
+  color: var(--ui-icon-button-color, var(--color-text-muted));
+  background: var(--ui-icon-button-background, transparent);
+  font-family: var(--ui-icon-button-font-family, inherit);
+  cursor: var(--ui-icon-button-cursor, pointer);
+}
+
+.ui-icon-button:hover {
+  color: var(--ui-icon-button-hover-color, var(--color-text));
+  background: var(--ui-icon-button-hover-background, var(--color-surface-hover));
+}
+
+.ui-icon-button:disabled {
+  color: var(--ui-icon-button-disabled-color, var(--color-text-subtle));
+  background: var(--ui-icon-button-disabled-background, transparent);
+  cursor: var(--ui-icon-button-disabled-cursor, default);
+}
+
+.ui-icon-button--compact {
+  width: var(--ui-icon-button-size-compact);
+  height: var(--ui-icon-button-size-compact);
+  min-width: var(--ui-icon-button-size-compact);
+  min-height: var(--ui-icon-button-size-compact);
+}
+
+.ui-icon-button[data-variant='danger']:hover {
+  border-color: var(--color-danger);
+  color: #fff;
+  background: var(--color-danger);
+}
+
+.ui-icon-button .codicon {
+  font-size: var(--ui-icon-button-icon-size, 16px);
+}

package/src/primitives/icon-button/index.ts

@@ -0,0 +1 @@
+export * from './IconButton';