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

package/src/primitives/checkbox/checkbox.css

@@ -1,81 +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;
-}
+.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

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

package/src/primitives/chip/Chip.tsx

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

@@ -1,110 +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;
-}
+.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

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

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

@@ -1,78 +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>
-  );
-}
+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

@@ -1,15 +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%);
-}
+.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

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