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

package/src/primitives/tabbed-panels/TabbedPanels.tsx

@@ -1,68 +1,68 @@
-import { useState } from 'react';
-import './tabbed-panels.css';
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-import { cx } from '../../utils/cx';
-
-export interface TabbedPanelItem {
-  id: string;
-  label: ReactNode;
-  panel: ReactNode;
-}
-
-export interface TabbedPanelsProps extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
-  activeId?: string;
-  ariaLabel?: string;
-  items: readonly TabbedPanelItem[];
-  onSelect?: (id: string) => void;
-}
-
-export function TabbedPanels({
-  activeId,
-  ariaLabel,
-  className,
-  items,
-  onSelect,
-  ...props
-}: TabbedPanelsProps) {
-  const [internalActiveId, setInternalActiveId] = useState<string | null>(null);
-  const selectedId = activeId ?? internalActiveId ?? items[0]?.id;
-  const activeItem = items.find((item) => item.id === selectedId) ?? items[0];
-
-  return (
-    <div className={cx('ui-tabbed-panels', className)} {...props}>
-      <div
-        aria-label={ariaLabel ?? props['aria-label'] ?? 'Panels'}
-        className="ui-tabbed-panels__tabs"
-        role="tablist"
-      >
-        {items.map((item) => {
-          const selected = item.id === activeItem?.id;
-          return (
-            <button
-              key={item.id}
-              aria-selected={selected}
-              className={cx('ui-tabbed-panels__tab', selected && 'ui-tabbed-panels__tab--active')}
-              id={`${item.id}:tab`}
-              onClick={() => {
-                setInternalActiveId(item.id);
-                onSelect?.(item.id);
-              }}
-              role="tab"
-              type="button"
-            >
-              <span className="ui-tabbed-panels__tab-label">{item.label}</span>
-            </button>
-          );
-        })}
-      </div>
-      <div
-        aria-labelledby={activeItem ? `${activeItem.id}:tab` : undefined}
-        className="ui-tabbed-panels__panel"
-        id={activeItem ? `${activeItem.id}:view` : undefined}
-        role="tabpanel"
-      >
-        {activeItem?.panel}
-      </div>
-    </div>
-  );
-}
+import { useState } from 'react';
+import './tabbed-panels.css';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cx } from '../../utils/cx';
+
+export interface TabbedPanelItem {
+  id: string;
+  label: ReactNode;
+  panel: ReactNode;
+}
+
+export interface TabbedPanelsProps extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
+  activeId?: string;
+  ariaLabel?: string;
+  items: readonly TabbedPanelItem[];
+  onSelect?: (id: string) => void;
+}
+
+export function TabbedPanels({
+  activeId,
+  ariaLabel,
+  className,
+  items,
+  onSelect,
+  ...props
+}: TabbedPanelsProps) {
+  const [internalActiveId, setInternalActiveId] = useState<string | null>(null);
+  const selectedId = activeId ?? internalActiveId ?? items[0]?.id;
+  const activeItem = items.find((item) => item.id === selectedId) ?? items[0];
+
+  return (
+    <div className={cx('ui-tabbed-panels', className)} {...props}>
+      <div
+        aria-label={ariaLabel ?? props['aria-label'] ?? 'Panels'}
+        className="ui-tabbed-panels__tabs"
+        role="tablist"
+      >
+        {items.map((item) => {
+          const selected = item.id === activeItem?.id;
+          return (
+            <button
+              key={item.id}
+              aria-selected={selected}
+              className={cx('ui-tabbed-panels__tab', selected && 'ui-tabbed-panels__tab--active')}
+              id={`${item.id}:tab`}
+              onClick={() => {
+                setInternalActiveId(item.id);
+                onSelect?.(item.id);
+              }}
+              role="tab"
+              type="button"
+            >
+              <span className="ui-tabbed-panels__tab-label">{item.label}</span>
+            </button>
+          );
+        })}
+      </div>
+      <div
+        aria-labelledby={activeItem ? `${activeItem.id}:tab` : undefined}
+        className="ui-tabbed-panels__panel"
+        id={activeItem ? `${activeItem.id}:view` : undefined}
+        role="tabpanel"
+      >
+        {activeItem?.panel}
+      </div>
+    </div>
+  );
+}

package/src/primitives/tabbed-panels/index.ts

@@ -1,2 +1,2 @@
-export { TabbedPanels } from './TabbedPanels';
-export type { TabbedPanelItem, TabbedPanelsProps } from './TabbedPanels';
+export { TabbedPanels } from './TabbedPanels';
+export type { TabbedPanelItem, TabbedPanelsProps } from './TabbedPanels';

package/src/primitives/tabbed-panels/tabbed-panels.css

@@ -1,58 +1,58 @@
-.ui-tabbed-panels {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  height: 100%;
-  min-height: 0;
-}
-
-.ui-tabbed-panels__tabs {
-  display: flex;
-  flex: 0 0 35px;
-  align-items: end;
-  min-width: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  background: var(--vscode-editorGroupHeader-tabsBackground, var(--color-editor-tab-strip-bg));
-  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
-}
-
-.ui-tabbed-panels__tab {
-  position: relative;
-  box-sizing: border-box;
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-  max-width: 180px;
-  min-width: 0;
-  height: 34px;
-  padding: 0 10px;
-  color: var(--vscode-tab-inactiveForeground, var(--color-text-muted));
-  background: var(--vscode-tab-inactiveBackground, var(--color-editor-tab-inactive-bg));
-  border: 0;
-  border-right: 1px solid var(--vscode-tab-border, var(--color-border));
-  font: inherit;
-  cursor: pointer;
-}
-
-.ui-tabbed-panels__tab--active {
-  color: var(--vscode-tab-activeForeground, var(--color-text));
-  background: var(--vscode-tab-activeBackground, var(--color-editor-tab-active-bg));
-  margin-bottom: -1px;
-  border-bottom: 1px solid var(--vscode-tab-activeBackground, var(--color-editor-tab-active-bg));
-  z-index: 1;
-}
-
-.ui-tabbed-panels__tab-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ui-tabbed-panels__panel {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-}
+.ui-tabbed-panels {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.ui-tabbed-panels__tabs {
+  display: flex;
+  flex: 0 0 35px;
+  align-items: end;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: var(--vscode-editorGroupHeader-tabsBackground, var(--color-editor-tab-strip-bg));
+  border-bottom: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-tabbed-panels__tab {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  max-width: 180px;
+  min-width: 0;
+  height: 34px;
+  padding: 0 10px;
+  color: var(--vscode-tab-inactiveForeground, var(--color-text-muted));
+  background: var(--vscode-tab-inactiveBackground, var(--color-editor-tab-inactive-bg));
+  border: 0;
+  border-right: 1px solid var(--vscode-tab-border, var(--color-border));
+  font: inherit;
+  cursor: pointer;
+}
+
+.ui-tabbed-panels__tab--active {
+  color: var(--vscode-tab-activeForeground, var(--color-text));
+  background: var(--vscode-tab-activeBackground, var(--color-editor-tab-active-bg));
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--vscode-tab-activeBackground, var(--color-editor-tab-active-bg));
+  z-index: 1;
+}
+
+.ui-tabbed-panels__tab-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-tabbed-panels__panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}

package/src/primitives/text-area/TextArea.tsx

@@ -1,37 +1,37 @@
-import '../text-input/input.css';
-import type { ComponentPropsWithRef, CSSProperties } from 'react';
-import { cx } from '../../utils/cx';
-
-type ControlWidth = 'default' | 'wide' | 'full';
-
-export interface TextAreaProps extends ComponentPropsWithRef<'textarea'> {
-  controlWidth?: ControlWidth;
-  monospace?: boolean;
-  resize?: CSSProperties['resize'] | undefined;
-}
-
-export function TextArea({
-  className,
-  controlWidth = 'default',
-  monospace = false,
-  resize,
-  style,
-  ...props
-}: TextAreaProps) {
-  const resolvedStyle =
-    resize !== undefined
-      ? {
-          resize,
-          ...style,
-        }
-      : style;
-
-  return (
-    <textarea
-      className={cx('ui-textarea', monospace && 'ui-input--monospace', className)}
-      data-width={controlWidth}
-      style={resolvedStyle}
-      {...props}
-    />
-  );
-}
+import '../text-input/input.css';
+import type { ComponentPropsWithRef, CSSProperties } from 'react';
+import { cx } from '../../utils/cx';
+
+type ControlWidth = 'default' | 'wide' | 'full';
+
+export interface TextAreaProps extends ComponentPropsWithRef<'textarea'> {
+  controlWidth?: ControlWidth;
+  monospace?: boolean;
+  resize?: CSSProperties['resize'] | undefined;
+}
+
+export function TextArea({
+  className,
+  controlWidth = 'default',
+  monospace = false,
+  resize,
+  style,
+  ...props
+}: TextAreaProps) {
+  const resolvedStyle =
+    resize !== undefined
+      ? {
+          resize,
+          ...style,
+        }
+      : style;
+
+  return (
+    <textarea
+      className={cx('ui-textarea', monospace && 'ui-input--monospace', className)}
+      data-width={controlWidth}
+      style={resolvedStyle}
+      {...props}
+    />
+  );
+}

package/src/primitives/text-area/index.ts

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

package/src/primitives/text-input/TextInput.tsx

@@ -1,34 +1,34 @@
-import './input.css';
-import type { ChangeEvent, ComponentPropsWithRef } from 'react';
-import { cx } from '../../utils/cx';
-
-export type ControlWidth = 'default' | 'wide' | 'full';
-
-export interface TextInputProps extends ComponentPropsWithRef<'input'> {
-  controlWidth?: ControlWidth;
-  monospace?: boolean;
-  onValueChange?: ((value: string, event: ChangeEvent<HTMLInputElement>) => void) | undefined;
-}
-
-export function TextInput({
-  className,
-  controlWidth = 'default',
-  monospace = false,
-  onChange,
-  onValueChange,
-  ...props
-}: TextInputProps) {
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange?.(event);
-    onValueChange?.(event.currentTarget.value, event);
-  };
-
-  return (
-    <input
-      className={cx('ui-input', monospace && 'ui-input--monospace', className)}
-      data-width={controlWidth}
-      onChange={handleChange}
-      {...props}
-    />
-  );
-}
+import './input.css';
+import type { ChangeEvent, ComponentPropsWithRef } from 'react';
+import { cx } from '../../utils/cx';
+
+export type ControlWidth = 'default' | 'wide' | 'full';
+
+export interface TextInputProps extends ComponentPropsWithRef<'input'> {
+  controlWidth?: ControlWidth;
+  monospace?: boolean;
+  onValueChange?: ((value: string, event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+}
+
+export function TextInput({
+  className,
+  controlWidth = 'default',
+  monospace = false,
+  onChange,
+  onValueChange,
+  ...props
+}: TextInputProps) {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event);
+    onValueChange?.(event.currentTarget.value, event);
+  };
+
+  return (
+    <input
+      className={cx('ui-input', monospace && 'ui-input--monospace', className)}
+      data-width={controlWidth}
+      onChange={handleChange}
+      {...props}
+    />
+  );
+}

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

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

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

@@ -1,54 +1,54 @@
-.ui-input {
-  height: var(--ui-input-height, var(--ui-input-height-default));
-  padding: var(--ui-input-padding, 0 var(--ui-input-padding-x));
-}
-
-.ui-textarea {
-  min-height: var(--ui-textarea-min-height, 80px);
-  max-height: var(--ui-textarea-max-height, none);
-  display: var(--ui-textarea-display, initial);
-  margin: var(--ui-textarea-margin, 0);
-  padding: var(--ui-textarea-padding, 8px);
-  overflow-y: var(--ui-textarea-overflow-y, auto);
-  line-height: var(--ui-input-line-height, 1.5);
-  resize: var(--ui-textarea-resize, vertical);
-}
-
-.ui-input[data-width='wide'],
-.ui-textarea[data-width='wide'] {
-  width: 420px;
-}
-
-.ui-input[data-width='full'],
-.ui-textarea[data-width='full'] {
-  width: 100%;
-}
-
-.ui-input[type='range'] {
-  padding: 0;
-  background: transparent;
-  border-color: transparent;
-  accent-color: var(--color-accent);
-}
-
-.ui-input[type='range']:focus {
-  border-color: transparent;
-  outline: 1px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
-.ui-input--monospace {
-  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
-}
-
-/* Prefer NumberInput themed steppers; hide native spinners on raw type=number too. */
-.ui-input[type='number'] {
-  appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-.ui-input[type='number']::-webkit-outer-spin-button,
-.ui-input[type='number']::-webkit-inner-spin-button {
-  margin: 0;
-  -webkit-appearance: none;
-}
+.ui-input {
+  height: var(--ui-input-height, var(--ui-input-height-default));
+  padding: var(--ui-input-padding, 0 var(--ui-input-padding-x));
+}
+
+.ui-textarea {
+  min-height: var(--ui-textarea-min-height, 80px);
+  max-height: var(--ui-textarea-max-height, none);
+  display: var(--ui-textarea-display, initial);
+  margin: var(--ui-textarea-margin, 0);
+  padding: var(--ui-textarea-padding, 8px);
+  overflow-y: var(--ui-textarea-overflow-y, auto);
+  line-height: var(--ui-input-line-height, 1.5);
+  resize: var(--ui-textarea-resize, vertical);
+}
+
+.ui-input[data-width='wide'],
+.ui-textarea[data-width='wide'] {
+  width: 420px;
+}
+
+.ui-input[data-width='full'],
+.ui-textarea[data-width='full'] {
+  width: 100%;
+}
+
+.ui-input[type='range'] {
+  padding: 0;
+  background: transparent;
+  border-color: transparent;
+  accent-color: var(--color-accent);
+}
+
+.ui-input[type='range']:focus {
+  border-color: transparent;
+  outline: 1px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.ui-input--monospace {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
+}
+
+/* Prefer NumberInput themed steppers; hide native spinners on raw type=number too. */
+.ui-input[type='number'] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+.ui-input[type='number']::-webkit-outer-spin-button,
+.ui-input[type='number']::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}

package/src/primitives/toolbar/Toolbar.tsx

@@ -1,8 +1,8 @@
-import type { ComponentPropsWithRef } from 'react';
-import { cx } from '../../utils/cx';
-
-export type ToolbarProps = ComponentPropsWithRef<'div'>;
-
-export function Toolbar({ className, ...props }: ToolbarProps) {
-  return <div className={cx('ui-toolbar', className)} {...props} />;
-}
+import type { ComponentPropsWithRef } from 'react';
+import { cx } from '../../utils/cx';
+
+export type ToolbarProps = ComponentPropsWithRef<'div'>;
+
+export function Toolbar({ className, ...props }: ToolbarProps) {
+  return <div className={cx('ui-toolbar', className)} {...props} />;
+}

package/src/primitives/toolbar/index.ts

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

package/src/primitives/visually-hidden/visually-hidden.css

@@ -1,11 +1,11 @@
-.ui-visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
+.ui-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}