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

package/src/primitives/workbench-editor/segmented-control.css

@@ -1,98 +1,98 @@
-/*
- * Attached segmented toggle — shares Button chrome tokens.
- * Outer border lives on the group; items use dividers only (no double borders).
- */
-.ui-segmented-control.ui-button-group {
-  display: inline-flex;
-  align-items: stretch;
-  gap: 0;
-  min-width: 0;
-  overflow: hidden;
-  border: var(--ui-button-border, 1px solid var(--color-border));
-  border-radius: var(--ui-button-border-radius, var(--radius-sm));
-  background: var(--ui-button-background, var(--color-surface));
-}
-
-.ui-segmented-control__item {
-  box-sizing: border-box;
-  display: inline-flex;
-  flex: 0 1 auto;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-button-gap, 6px);
-  height: var(--ui-button-height, var(--ui-button-height-default));
-  min-height: var(--ui-button-height, var(--ui-button-height-default));
-  padding: var(--ui-button-padding, 0 var(--ui-button-padding-x));
-  margin: 0;
-  border: none;
-  border-radius: 0;
-  border-right: var(--ui-button-border, 1px solid var(--color-border));
-  color: var(--ui-button-color, var(--color-text));
-  background: transparent;
-  font-family: var(--ui-button-font-family, inherit);
-  font-size: var(--ui-button-font-size, var(--font-size-sm));
-  font-weight: var(--ui-button-font-weight, 400);
-  line-height: var(--ui-button-line-height, 1.2);
-  cursor: var(--ui-button-cursor, pointer);
-}
-
-.ui-segmented-control__item:last-child {
-  border-right: none;
-}
-
-.ui-segmented-control__item:hover {
-  color: var(--ui-button-hover-color, var(--ui-button-color, var(--color-text)));
-  background: var(--ui-button-hover-background, var(--color-surface-hover));
-}
-
-.ui-segmented-control__item:focus-visible {
-  outline: 1px solid var(--color-focus-border);
-  outline-offset: -1px;
-  z-index: 1;
-}
-
-.ui-segmented-control__item:disabled,
-.ui-segmented-control__item:disabled:hover {
-  color: var(--ui-button-disabled-color, var(--color-text-subtle));
-  background: transparent;
-  cursor: var(--ui-button-disabled-cursor, default);
-}
-
-.ui-segmented-control__item--selected,
-.ui-segmented-control__item--selected:hover {
-  color: var(
-    --ui-segmented-control-selected-color,
-    var(--vscode-list-activeSelectionForeground, var(--color-text))
-  );
-  background: var(
-    --ui-segmented-control-selected-background,
-    var(
-      --vscode-list-activeSelectionBackground,
-      var(--color-surface-elevated, var(--color-surface-hover))
-    )
-  );
-}
-
-.ui-segmented-control--compact .ui-segmented-control__item {
-  height: var(--ui-button-height-compact);
-  min-height: var(--ui-button-height-compact);
-  padding: 0 var(--ui-button-padding-x-compact);
-}
-
-/* Icon-only segments: keep glyph centered without text padding bias. */
-.ui-segmented-control__item .codicon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-
-.workbench-extensions-sidebar__controls .ui-segmented-control.ui-button-group {
-  display: flex;
-  width: 100%;
-}
-
-.workbench-extensions-sidebar__controls .ui-segmented-control__item {
-  flex: 1 1 0;
-  min-width: 0;
-}
+/*
+ * Attached segmented toggle — shares Button chrome tokens.
+ * Outer border lives on the group; items use dividers only (no double borders).
+ */
+.ui-segmented-control.ui-button-group {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  min-width: 0;
+  overflow: hidden;
+  border: var(--ui-button-border, 1px solid var(--color-border));
+  border-radius: var(--ui-button-border-radius, var(--radius-sm));
+  background: var(--ui-button-background, var(--color-surface));
+}
+
+.ui-segmented-control__item {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-button-gap, 6px);
+  height: var(--ui-button-height, var(--ui-button-height-default));
+  min-height: var(--ui-button-height, var(--ui-button-height-default));
+  padding: var(--ui-button-padding, 0 var(--ui-button-padding-x));
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  border-right: var(--ui-button-border, 1px solid var(--color-border));
+  color: var(--ui-button-color, var(--color-text));
+  background: transparent;
+  font-family: var(--ui-button-font-family, inherit);
+  font-size: var(--ui-button-font-size, var(--font-size-sm));
+  font-weight: var(--ui-button-font-weight, 400);
+  line-height: var(--ui-button-line-height, 1.2);
+  cursor: var(--ui-button-cursor, pointer);
+}
+
+.ui-segmented-control__item:last-child {
+  border-right: none;
+}
+
+.ui-segmented-control__item:hover {
+  color: var(--ui-button-hover-color, var(--ui-button-color, var(--color-text)));
+  background: var(--ui-button-hover-background, var(--color-surface-hover));
+}
+
+.ui-segmented-control__item:focus-visible {
+  outline: 1px solid var(--color-focus-border);
+  outline-offset: -1px;
+  z-index: 1;
+}
+
+.ui-segmented-control__item:disabled,
+.ui-segmented-control__item:disabled:hover {
+  color: var(--ui-button-disabled-color, var(--color-text-subtle));
+  background: transparent;
+  cursor: var(--ui-button-disabled-cursor, default);
+}
+
+.ui-segmented-control__item--selected,
+.ui-segmented-control__item--selected:hover {
+  color: var(
+    --ui-segmented-control-selected-color,
+    var(--vscode-list-activeSelectionForeground, var(--color-text))
+  );
+  background: var(
+    --ui-segmented-control-selected-background,
+    var(
+      --vscode-list-activeSelectionBackground,
+      var(--color-surface-elevated, var(--color-surface-hover))
+    )
+  );
+}
+
+.ui-segmented-control--compact .ui-segmented-control__item {
+  height: var(--ui-button-height-compact);
+  min-height: var(--ui-button-height-compact);
+  padding: 0 var(--ui-button-padding-x-compact);
+}
+
+/* Icon-only segments: keep glyph centered without text padding bias. */
+.ui-segmented-control__item .codicon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.workbench-extensions-sidebar__controls .ui-segmented-control.ui-button-group {
+  display: flex;
+  width: 100%;
+}
+
+.workbench-extensions-sidebar__controls .ui-segmented-control__item {
+  flex: 1 1 0;
+  min-width: 0;
+}

package/src/primitives/workbench-media-slot/WorkbenchMediaPlaceholder.tsx

@@ -1,25 +1,25 @@
-import type { ComponentPropsWithRef } from 'react';
-
-import { cxCodicon } from '../../utils/codicon';
-import { cx } from '../../utils/cx';
-
-export interface WorkbenchMediaPlaceholderProps extends ComponentPropsWithRef<'span'> {
-  icon?: string | undefined;
-  iconClassName?: string | undefined;
-}
-
-/**
- * Default empty-state surface for {@link WorkbenchMediaSlot}: fills the slot box and centers a codicon.
- */
-export function WorkbenchMediaPlaceholder({
-  className,
-  icon = 'file-media',
-  iconClassName,
-  ...props
-}: WorkbenchMediaPlaceholderProps) {
-  return (
-    <span aria-hidden className={cx('ui-workbench-media-slot__placeholder', className)} {...props}>
-      <i className={cx('ui-workbench-media-slot__icon', iconClassName, cxCodicon(icon))} />
-    </span>
-  );
-}
+import type { ComponentPropsWithRef } from 'react';
+
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
+
+export interface WorkbenchMediaPlaceholderProps extends ComponentPropsWithRef<'span'> {
+  icon?: string | undefined;
+  iconClassName?: string | undefined;
+}
+
+/**
+ * Default empty-state surface for {@link WorkbenchMediaSlot}: fills the slot box and centers a codicon.
+ */
+export function WorkbenchMediaPlaceholder({
+  className,
+  icon = 'file-media',
+  iconClassName,
+  ...props
+}: WorkbenchMediaPlaceholderProps) {
+  return (
+    <span aria-hidden className={cx('ui-workbench-media-slot__placeholder', className)} {...props}>
+      <i className={cx('ui-workbench-media-slot__icon', iconClassName, cxCodicon(icon))} />
+    </span>
+  );
+}

package/src/primitives/workbench-media-slot/WorkbenchMediaSlot.tsx

@@ -1,60 +1,60 @@
-import './media-slot.css';
-import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
-
-import { cx } from '../../utils/cx';
-import { useWorkbenchMediaImage } from '../../utils/useWorkbenchMediaImage';
-import { WorkbenchMediaPlaceholder } from './WorkbenchMediaPlaceholder';
-
-export interface WorkbenchMediaSlotProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
-  alt?: string | undefined;
-  as?: 'div' | 'span' | undefined;
-  fallback?: ReactNode | undefined;
-  fallbackClassName?: string | undefined;
-  fallbackIcon?: string | undefined;
-  /** Stretch to fill the parent box (hero/cover surfaces). */
-  fill?: boolean | undefined;
-  imageClassName?: string | undefined;
-  imageUrl?: string | null | undefined;
-  /**
-   * Native image loading hint. Defaults to `lazy` for list/thumbnail surfaces.
-   * Pass `eager` for above-the-fold heroes and detail identity art.
-   */
-  loading?: 'eager' | 'lazy' | undefined;
-}
-
-export function WorkbenchMediaSlot({
-  alt,
-  as: Component = 'span',
-  className,
-  fallback,
-  fallbackClassName,
-  fallbackIcon = 'file-media',
-  fill = false,
-  imageClassName,
-  imageUrl = null,
-  loading = 'lazy',
-  ...props
-}: WorkbenchMediaSlotProps) {
-  const media = useWorkbenchMediaImage(imageUrl);
-
-  return (
-    <Component
-      className={cx('ui-workbench-media-slot', fill && 'ui-workbench-media-slot--fill', className)}
-      {...(props as ComponentPropsWithRef<ElementType>)}
-    >
-      {media.shouldShowImage ? (
-        <img
-          alt={alt ?? ''}
-          className={cx('ui-workbench-media-slot__image', imageClassName)}
-          loading={loading}
-          onError={media.onImageError}
-          src={media.imageSrc}
-        />
-      ) : (
-        (fallback ?? (
-          <WorkbenchMediaPlaceholder icon={fallbackIcon} iconClassName={fallbackClassName} />
-        ))
-      )}
-    </Component>
-  );
-}
+import './media-slot.css';
+import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { useWorkbenchMediaImage } from '../../utils/useWorkbenchMediaImage';
+import { WorkbenchMediaPlaceholder } from './WorkbenchMediaPlaceholder';
+
+export interface WorkbenchMediaSlotProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+  alt?: string | undefined;
+  as?: 'div' | 'span' | undefined;
+  fallback?: ReactNode | undefined;
+  fallbackClassName?: string | undefined;
+  fallbackIcon?: string | undefined;
+  /** Stretch to fill the parent box (hero/cover surfaces). */
+  fill?: boolean | undefined;
+  imageClassName?: string | undefined;
+  imageUrl?: string | null | undefined;
+  /**
+   * Native image loading hint. Defaults to `lazy` for list/thumbnail surfaces.
+   * Pass `eager` for above-the-fold heroes and detail identity art.
+   */
+  loading?: 'eager' | 'lazy' | undefined;
+}
+
+export function WorkbenchMediaSlot({
+  alt,
+  as: Component = 'span',
+  className,
+  fallback,
+  fallbackClassName,
+  fallbackIcon = 'file-media',
+  fill = false,
+  imageClassName,
+  imageUrl = null,
+  loading = 'lazy',
+  ...props
+}: WorkbenchMediaSlotProps) {
+  const media = useWorkbenchMediaImage(imageUrl);
+
+  return (
+    <Component
+      className={cx('ui-workbench-media-slot', fill && 'ui-workbench-media-slot--fill', className)}
+      {...(props as ComponentPropsWithRef<ElementType>)}
+    >
+      {media.shouldShowImage ? (
+        <img
+          alt={alt ?? ''}
+          className={cx('ui-workbench-media-slot__image', imageClassName)}
+          loading={loading}
+          onError={media.onImageError}
+          src={media.imageSrc}
+        />
+      ) : (
+        (fallback ?? (
+          <WorkbenchMediaPlaceholder icon={fallbackIcon} iconClassName={fallbackClassName} />
+        ))
+      )}
+    </Component>
+  );
+}

package/src/primitives/workbench-media-slot/index.ts

@@ -1,2 +1,2 @@
-export * from './WorkbenchMediaPlaceholder';
-export * from './WorkbenchMediaSlot';
+export * from './WorkbenchMediaPlaceholder';
+export * from './WorkbenchMediaSlot';

package/src/primitives/workbench-media-slot/media-slot.css

@@ -1,72 +1,72 @@
-.ui-workbench-media-slot {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-}
-
-.ui-workbench-media-slot--fill {
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-}
-
-.ui-workbench-media-slot__placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  flex: 1 1 auto;
-  align-self: stretch;
-}
-
-.ui-workbench-media-slot--fill .ui-workbench-media-slot__placeholder {
-  flex: 1 1 auto;
-  align-self: stretch;
-  min-width: 0;
-  min-height: 0;
-}
-
-.ui-workbench-media-slot--fill .ui-workbench-media-slot__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ui-workbench-media-slot--fill .ui-workbench-media-slot__image {
-  flex: 1 1 auto;
-  align-self: stretch;
-  min-width: 0;
-  min-height: 0;
-  max-width: none;
-  max-height: none;
-  object-fit: var(--ui-workbench-media-object-fit, cover);
-  object-position: center;
-}
-
-.ui-workbench-media-slot__image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: var(--ui-workbench-media-object-fit, cover);
-  object-position: center;
-}
-
-.ui-workbench-media-slot__icon {
-  color: var(--shell-color-text-muted, var(--vscode-icon-foreground, var(--color-icon)));
-  font-size: var(--ui-workbench-media-placeholder-icon-size, 1em);
-  line-height: 1;
-}
+.ui-workbench-media-slot {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.ui-workbench-media-slot--fill {
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ui-workbench-media-slot__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  align-self: stretch;
+}
+
+.ui-workbench-media-slot--fill .ui-workbench-media-slot__placeholder {
+  flex: 1 1 auto;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ui-workbench-media-slot--fill .ui-workbench-media-slot__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-workbench-media-slot--fill .ui-workbench-media-slot__image {
+  flex: 1 1 auto;
+  align-self: stretch;
+  min-width: 0;
+  min-height: 0;
+  max-width: none;
+  max-height: none;
+  object-fit: var(--ui-workbench-media-object-fit, cover);
+  object-position: center;
+}
+
+.ui-workbench-media-slot__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: var(--ui-workbench-media-object-fit, cover);
+  object-position: center;
+}
+
+.ui-workbench-media-slot__icon {
+  color: var(--shell-color-text-muted, var(--vscode-icon-foreground, var(--color-icon)));
+  font-size: var(--ui-workbench-media-placeholder-icon-size, 1em);
+  line-height: 1;
+}

package/src/primitives/workbench-thumbnail/WorkbenchThumbnail.tsx

@@ -1,38 +1,38 @@
-import './thumbnail.css';
-import type { ComponentPropsWithRef } from 'react';
-
-import { cx } from '../../utils/cx';
-import { WorkbenchMediaSlot } from '../workbench-media-slot';
-
-export type WorkbenchThumbnailSize = 'sm' | 'md' | 'library' | 'icon';
-
-export interface WorkbenchThumbnailProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
-  alt?: string | undefined;
-  fallbackIcon?: string | undefined;
-  imageUrl?: string | null | undefined;
-  size?: WorkbenchThumbnailSize | undefined;
-}
-
-export function WorkbenchThumbnail({
-  alt,
-  className,
-  fallbackIcon = 'file-media',
-  imageUrl = null,
-  size = 'sm',
-  ...props
-}: WorkbenchThumbnailProps) {
-  return (
-    <WorkbenchMediaSlot
-      alt={alt}
-      aria-hidden={alt ? undefined : true}
-      className={cx('ui-workbench-thumbnail', className)}
-      data-size={size}
-      fallbackClassName="ui-workbench-thumbnail__icon"
-      fallbackIcon={fallbackIcon}
-      fill
-      imageClassName="ui-workbench-thumbnail__image"
-      imageUrl={imageUrl}
-      {...props}
-    />
-  );
-}
+import './thumbnail.css';
+import type { ComponentPropsWithRef } from 'react';
+
+import { cx } from '../../utils/cx';
+import { WorkbenchMediaSlot } from '../workbench-media-slot';
+
+export type WorkbenchThumbnailSize = 'sm' | 'md' | 'library' | 'icon';
+
+export interface WorkbenchThumbnailProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+  alt?: string | undefined;
+  fallbackIcon?: string | undefined;
+  imageUrl?: string | null | undefined;
+  size?: WorkbenchThumbnailSize | undefined;
+}
+
+export function WorkbenchThumbnail({
+  alt,
+  className,
+  fallbackIcon = 'file-media',
+  imageUrl = null,
+  size = 'sm',
+  ...props
+}: WorkbenchThumbnailProps) {
+  return (
+    <WorkbenchMediaSlot
+      alt={alt}
+      aria-hidden={alt ? undefined : true}
+      className={cx('ui-workbench-thumbnail', className)}
+      data-size={size}
+      fallbackClassName="ui-workbench-thumbnail__icon"
+      fallbackIcon={fallbackIcon}
+      fill
+      imageClassName="ui-workbench-thumbnail__image"
+      imageUrl={imageUrl}
+      {...props}
+    />
+  );
+}

package/src/primitives/workbench-thumbnail/index.ts

@@ -1 +1 @@
-export * from './WorkbenchThumbnail';
+export * from './WorkbenchThumbnail';