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

package/src/primitives/button/button.css

@@ -1,76 +1,76 @@
-.ui-button {
-  box-sizing: border-box;
-  width: var(--ui-button-width, auto);
-  min-width: var(--ui-button-min-width, 0);
-  max-width: var(--ui-button-max-width, none);
-  height: var(--ui-button-height, var(--ui-button-height-default));
-  min-height: var(--ui-button-min-height, 0);
-  display: var(--ui-button-display, inline-flex);
-  flex: var(--ui-button-flex, initial);
-  flex-shrink: var(--ui-button-flex-shrink, initial);
-  align-self: var(--ui-button-align-self, auto);
-  align-items: var(--ui-button-align-items, center);
-  justify-content: var(--ui-button-justify-content, center);
-  gap: var(--ui-button-gap, 6px);
-  grid-template-columns: var(--ui-button-grid-template-columns, none);
-  padding: var(--ui-button-padding, 0 var(--ui-button-padding-x));
-  border: var(--ui-button-border, 1px solid var(--color-border));
-  border-bottom: var(
-    --ui-button-border-bottom,
-    var(--ui-button-border, 1px solid var(--color-border))
-  );
-  border-radius: var(--ui-button-border-radius, var(--radius-sm));
-  color: var(--ui-button-color, var(--color-text));
-  background: var(--ui-button-background, var(--color-surface));
-  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);
-  text-align: var(--ui-button-text-align, center);
-  cursor: var(--ui-button-cursor, pointer);
-}
-
-.ui-button: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-button:disabled,
-.ui-button:disabled:hover {
-  color: var(--ui-button-disabled-color, var(--color-text-subtle));
-  background: var(
-    --ui-button-disabled-background,
-    var(--ui-button-background, var(--color-surface))
-  );
-  cursor: var(--ui-button-disabled-cursor, default);
-}
-
-.ui-button[data-variant='primary'] {
-  border-color: var(--color-accent);
-  color: #fff;
-  background: var(--color-accent);
-}
-
-.ui-button[data-variant='primary']:hover {
-  background: var(--color-accent-hover);
-}
-
-.ui-button[data-variant='danger'] {
-  color: var(--color-danger);
-}
-
-.ui-button[data-variant='danger']:hover {
-  border-color: var(--color-danger);
-  color: #fff;
-  background: var(--color-danger);
-}
-
-.ui-button--block {
-  width: 100%;
-}
-
-.ui-button--compact {
-  height: var(--ui-button-height-compact);
-  min-height: var(--ui-button-height-compact);
-  padding: 0 var(--ui-button-padding-x-compact);
-}
+.ui-button {
+  box-sizing: border-box;
+  width: var(--ui-button-width, auto);
+  min-width: var(--ui-button-min-width, 0);
+  max-width: var(--ui-button-max-width, none);
+  height: var(--ui-button-height, var(--ui-button-height-default));
+  min-height: var(--ui-button-min-height, 0);
+  display: var(--ui-button-display, inline-flex);
+  flex: var(--ui-button-flex, initial);
+  flex-shrink: var(--ui-button-flex-shrink, initial);
+  align-self: var(--ui-button-align-self, auto);
+  align-items: var(--ui-button-align-items, center);
+  justify-content: var(--ui-button-justify-content, center);
+  gap: var(--ui-button-gap, 6px);
+  grid-template-columns: var(--ui-button-grid-template-columns, none);
+  padding: var(--ui-button-padding, 0 var(--ui-button-padding-x));
+  border: var(--ui-button-border, 1px solid var(--color-border));
+  border-bottom: var(
+    --ui-button-border-bottom,
+    var(--ui-button-border, 1px solid var(--color-border))
+  );
+  border-radius: var(--ui-button-border-radius, var(--radius-sm));
+  color: var(--ui-button-color, var(--color-text));
+  background: var(--ui-button-background, var(--color-surface));
+  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);
+  text-align: var(--ui-button-text-align, center);
+  cursor: var(--ui-button-cursor, pointer);
+}
+
+.ui-button: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-button:disabled,
+.ui-button:disabled:hover {
+  color: var(--ui-button-disabled-color, var(--color-text-subtle));
+  background: var(
+    --ui-button-disabled-background,
+    var(--ui-button-background, var(--color-surface))
+  );
+  cursor: var(--ui-button-disabled-cursor, default);
+}
+
+.ui-button[data-variant='primary'] {
+  border-color: var(--color-accent);
+  color: #fff;
+  background: var(--color-accent);
+}
+
+.ui-button[data-variant='primary']:hover {
+  background: var(--color-accent-hover);
+}
+
+.ui-button[data-variant='danger'] {
+  color: var(--color-danger);
+}
+
+.ui-button[data-variant='danger']:hover {
+  border-color: var(--color-danger);
+  color: #fff;
+  background: var(--color-danger);
+}
+
+.ui-button--block {
+  width: 100%;
+}
+
+.ui-button--compact {
+  height: var(--ui-button-height-compact);
+  min-height: var(--ui-button-height-compact);
+  padding: 0 var(--ui-button-padding-x-compact);
+}

package/src/primitives/button/index.ts

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

package/src/primitives/catalog-browse-card/CatalogBrowseCard.tsx

@@ -1,121 +1,121 @@
-import './catalog-browse-card.css';
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-
-import { cx } from '../../utils/cx';
-import { WorkbenchMediaSlot } from '../workbench-media-slot';
-
-export type CatalogBrowseCardVariant = 'cover' | 'row';
-
-export interface CatalogBrowseCardProps extends Omit<
-  ComponentPropsWithRef<'button'>,
-  'children' | 'title'
-> {
-  description?: ReactNode;
-  icon?: string | undefined;
-  imageAlt?: string | undefined;
-  imageUrl?: string | null | undefined;
-  label: ReactNode;
-  /**
-   * Custom media content for the icon/cover region. When set, replaces the
-   * default `WorkbenchMediaSlot` (imageUrl / fallback icon).
-   */
-  media?: ReactNode;
-  /** Overlay content inside the media region (badges, status chips, etc.). */
-  mediaOverlay?: ReactNode;
-  meta?: ReactNode;
-  selected?: boolean | undefined;
-  /**
-   * Secondary actions outside the primary hit target (for example Assign).
-   * When set, the root becomes a non-button container and click/drag handlers
-   * apply to the main control only.
-   */
-  trailing?: ReactNode;
-  tooltip?: string | undefined;
-  variant?: CatalogBrowseCardVariant | undefined;
-}
-
-export function CatalogBrowseCard({
-  className,
-  description,
-  icon = 'library',
-  imageAlt,
-  imageUrl = null,
-  label,
-  media,
-  mediaOverlay,
-  meta,
-  selected = false,
-  tooltip,
-  trailing,
-  type = 'button',
-  variant = 'row',
-  ...props
-}: CatalogBrowseCardProps) {
-  const hasDescription = description !== undefined && description !== null && description !== '';
-  const hasMeta = meta !== undefined && meta !== null && meta !== '';
-  const hasMediaOverlay = mediaOverlay !== undefined && mediaOverlay !== null;
-  const hasCustomMedia = media !== undefined && media !== null;
-  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;
-
-  const mediaRegion = (
-    <span
-      aria-hidden={hasMediaOverlay ? undefined : true}
-      className={cx(
-        'ui-catalog-browse-card__icon',
-        hasMediaOverlay && 'ui-catalog-browse-card__icon--overlay',
-      )}
-    >
-      {hasCustomMedia ? (
-        <span className="ui-catalog-browse-card__media-custom">{media}</span>
-      ) : (
-        <WorkbenchMediaSlot
-          alt={imageAlt}
-          className="ui-catalog-browse-card__media"
-          fallbackIcon={icon}
-          imageClassName="ui-catalog-browse-card__image"
-          imageUrl={imageUrl}
-        />
-      )}
-      {hasMediaOverlay ? (
-        <span className="ui-catalog-browse-card__media-overlay">{mediaOverlay}</span>
-      ) : null}
-    </span>
-  );
-
-  const bodyRegion = (
-    <span className="ui-catalog-browse-card__body">
-      <span className="ui-catalog-browse-card__title">{label}</span>
-      {hasMeta ? <span className="ui-catalog-browse-card__meta">{meta}</span> : null}
-      {hasDescription ? (
-        <span className="ui-catalog-browse-card__description">{description}</span>
-      ) : null}
-    </span>
-  );
-
-  const rootClassName = cx(
-    'ui-catalog-browse-card',
-    variant === 'cover' && 'ui-catalog-browse-card--cover',
-    selected && 'ui-catalog-browse-card--selected',
-    hasTrailing && 'ui-catalog-browse-card--with-trailing',
-    className,
-  );
-
-  if (!hasTrailing) {
-    return (
-      <button className={rootClassName} type={type} title={tooltip} {...props}>
-        {mediaRegion}
-        {bodyRegion}
-      </button>
-    );
-  }
-
-  return (
-    <div className={rootClassName}>
-      <button className="ui-catalog-browse-card__main" type={type} title={tooltip} {...props}>
-        {mediaRegion}
-        {bodyRegion}
-      </button>
-      <div className="ui-catalog-browse-card__trailing">{trailing}</div>
-    </div>
-  );
-}
+import './catalog-browse-card.css';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { WorkbenchMediaSlot } from '../workbench-media-slot';
+
+export type CatalogBrowseCardVariant = 'cover' | 'row';
+
+export interface CatalogBrowseCardProps extends Omit<
+  ComponentPropsWithRef<'button'>,
+  'children' | 'title'
+> {
+  description?: ReactNode;
+  icon?: string | undefined;
+  imageAlt?: string | undefined;
+  imageUrl?: string | null | undefined;
+  label: ReactNode;
+  /**
+   * Custom media content for the icon/cover region. When set, replaces the
+   * default `WorkbenchMediaSlot` (imageUrl / fallback icon).
+   */
+  media?: ReactNode;
+  /** Overlay content inside the media region (badges, status chips, etc.). */
+  mediaOverlay?: ReactNode;
+  meta?: ReactNode;
+  selected?: boolean | undefined;
+  /**
+   * Secondary actions outside the primary hit target (for example Assign).
+   * When set, the root becomes a non-button container and click/drag handlers
+   * apply to the main control only.
+   */
+  trailing?: ReactNode;
+  tooltip?: string | undefined;
+  variant?: CatalogBrowseCardVariant | undefined;
+}
+
+export function CatalogBrowseCard({
+  className,
+  description,
+  icon = 'library',
+  imageAlt,
+  imageUrl = null,
+  label,
+  media,
+  mediaOverlay,
+  meta,
+  selected = false,
+  tooltip,
+  trailing,
+  type = 'button',
+  variant = 'row',
+  ...props
+}: CatalogBrowseCardProps) {
+  const hasDescription = description !== undefined && description !== null && description !== '';
+  const hasMeta = meta !== undefined && meta !== null && meta !== '';
+  const hasMediaOverlay = mediaOverlay !== undefined && mediaOverlay !== null;
+  const hasCustomMedia = media !== undefined && media !== null;
+  const hasTrailing = trailing !== undefined && trailing !== null && trailing !== false;
+
+  const mediaRegion = (
+    <span
+      aria-hidden={hasMediaOverlay ? undefined : true}
+      className={cx(
+        'ui-catalog-browse-card__icon',
+        hasMediaOverlay && 'ui-catalog-browse-card__icon--overlay',
+      )}
+    >
+      {hasCustomMedia ? (
+        <span className="ui-catalog-browse-card__media-custom">{media}</span>
+      ) : (
+        <WorkbenchMediaSlot
+          alt={imageAlt}
+          className="ui-catalog-browse-card__media"
+          fallbackIcon={icon}
+          imageClassName="ui-catalog-browse-card__image"
+          imageUrl={imageUrl}
+        />
+      )}
+      {hasMediaOverlay ? (
+        <span className="ui-catalog-browse-card__media-overlay">{mediaOverlay}</span>
+      ) : null}
+    </span>
+  );
+
+  const bodyRegion = (
+    <span className="ui-catalog-browse-card__body">
+      <span className="ui-catalog-browse-card__title">{label}</span>
+      {hasMeta ? <span className="ui-catalog-browse-card__meta">{meta}</span> : null}
+      {hasDescription ? (
+        <span className="ui-catalog-browse-card__description">{description}</span>
+      ) : null}
+    </span>
+  );
+
+  const rootClassName = cx(
+    'ui-catalog-browse-card',
+    variant === 'cover' && 'ui-catalog-browse-card--cover',
+    selected && 'ui-catalog-browse-card--selected',
+    hasTrailing && 'ui-catalog-browse-card--with-trailing',
+    className,
+  );
+
+  if (!hasTrailing) {
+    return (
+      <button className={rootClassName} type={type} title={tooltip} {...props}>
+        {mediaRegion}
+        {bodyRegion}
+      </button>
+    );
+  }
+
+  return (
+    <div className={rootClassName}>
+      <button className="ui-catalog-browse-card__main" type={type} title={tooltip} {...props}>
+        {mediaRegion}
+        {bodyRegion}
+      </button>
+      <div className="ui-catalog-browse-card__trailing">{trailing}</div>
+    </div>
+  );
+}