zidane-ui 9.0.4 → 9.1.3

package/src/components/SwitchGlyph.tsx

@@ -1,56 +0,0 @@
-/**
- * The one on/off glyph, in two sizes: `md` for settings rows, `sm` for menu
- * rows and compact toggles. Same anatomy at both sizes: off is a pressed-in
- * track with a hairline ring and a muted thumb (readable on every surface,
- * flat mode included); on is the accent fill with the fill's foreground as
- * the thumb. The control around it owns the state and the semantics.
- */
-import type { CSSProperties } from 'react';
-
-const SIZES = {
-  sm: { track: 'w-6 h-3.5', thumb: 'w-2.5 h-2.5 top-0.5', on: 'translateX(12px)', off: 'translateX(2px)' },
-  md: { track: 'w-9 h-5', thumb: 'w-4 h-4 top-0.5', on: 'translateX(18px)', off: 'translateX(2px)' },
-} as const;
-
-/** Props for {@link SwitchGlyph}. */
-export interface SwitchGlyphProps {
-  /** Whether the switch is on: the accent fill with the thumb at the right. */
-  on: boolean;
-  /** Glyph size: `md` for settings rows, `sm` for menu rows and compact toggles. */
-  size?: keyof typeof SIZES;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the on/off glyph: a track with a thumb. It is decoration only (`aria-hidden`); the
- * control around it owns the state and the semantics.
- *
- * @param props - Component props.
- */
-export function SwitchGlyph({ on, size = 'md', className, style }: SwitchGlyphProps) {
-  const s = SIZES[size];
-  return (
-    <span
-      aria-hidden
-      className={[
-        `relative inline-flex shrink-0 rounded-full transition-colors ${s.track} ${
-          on ? 'bg-zg-accent-fill' : 'bg-zg-track shadow-[inset_0_0_0_1px_var(--zg-border-strong)]'
-        }`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      <span
-        className={`absolute rounded-full transition-[transform,background-color] duration-snap ease-snap ${s.thumb} ${
-          on ? 'bg-zg-accent-fill-fg' : 'bg-zg-muted'
-        }`}
-        style={{ transform: on ? s.on : s.off }}
-      />
-    </span>
-  );
-}

package/src/components/TabPill.tsx

@@ -1,188 +0,0 @@
-/**
- * A tab in a `.zg-segment` track: the panel strip (SidePanel) and the open
- * files (EditorColumn). The selected tab is the track's raised chip. The
- * pill reserves its right padding for the close button, shown on hover (or
- * always, `closeAlways`); `marker` overlays that corner (unsaved, updated).
- *
- * The wrapper, not the tab button, is the segment item, so hovering the
- * close button keeps the pill lifted.
- *
- * Keyboard and assistive tech see one control per tab (a tablist may hold
- * only tabs): Delete or Backspace on the focused tab closes it, and the x
- * is a pointer affordance, out of the tab order and the accessibility tree.
- */
-import type { CSSProperties, KeyboardEvent, MouseEvent, ReactNode } from 'react';
-
-import { IconButton } from './IconButton';
-
-/** Props for {@link TabPill}. */
-export interface TabPillProps {
-  /** Content of the tab. */
-  label: ReactNode;
-  /** Whether this is the current tab. Sets `aria-selected` and the raised chip. */
-  selected: boolean;
-  /** Raised without being selected (the pill being dragged). */
-  lifted?: boolean;
-  /** Content before the label, such as a file icon. */
-  leading?: ReactNode;
-  /** Inside the tab (its accessible name includes it): the count badge. */
-  trailing?: ReactNode;
-  /** Overlay on the close button's corner, such as an unsaved or updated dot. */
-  marker?: ReactNode;
-  /** Native tooltip of the tab. */
-  title?: string;
-  /** Accessible name and tooltip of the close button. */
-  closeLabel: string;
-  /** Called when the close button is clicked, or on Delete or Backspace on the focused tab. */
-  onClose: () => void;
-  /**
-   * Show the close button always, not only on hover or focus.
-   * @default false
-   */
-  closeAlways?: boolean;
-  /** Called when the tab is clicked. */
-  onSelect: () => void;
-  /**
-   * Called on key down on the tab, before the built-in Delete and Backspace handling. Call
-   * `preventDefault` to skip it.
-   */
-  onKeyDown?: (e: KeyboardEvent<HTMLButtonElement>) => void;
-  /** Called on a non-primary click on the tab, such as a middle-click. */
-  onAuxClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-  /** Called on a right-click on the tab. */
-  onContextMenu?: (e: MouseEvent<HTMLButtonElement>) => void;
-  /** Keyboard shortcut of the tab, announced through `aria-keyshortcuts`, such as `Control+1`. */
-  keyShortcuts?: string;
-  /**
-   * Tab height: `sm` is 24px, `md` is 28px.
-   * @default 'md'
-   */
-  size?: 'sm' | 'md';
-  /** Extra classes on the wrapping element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a tab in a `.zg-segment` track. The selected tab is the raised chip, and the close
- * button shows on hover. A tab is one control for keyboard and assistive tech: Delete or
- * Backspace on the focused tab closes it, and the close button is out of the tab order.
- *
- * @param props - Component props.
- */
-export function TabPill({
-  label,
-  selected,
-  lifted = false,
-  leading,
-  trailing,
-  marker,
-  title,
-  closeLabel,
-  onClose,
-  closeAlways = false,
-  onSelect,
-  onKeyDown,
-  onAuxClick,
-  onContextMenu,
-  keyShortcuts,
-  size = 'md',
-  className = '',
-  style,
-}: TabPillProps) {
-  return (
-    <div
-      data-active={selected || lifted ? '' : undefined}
-      className={`zg-segment-item zg-press-host group relative shrink-0 rounded-full text-[var(--zg-text-muted)] ${className}`}
-      style={style}
-    >
-      <button
-        type="button"
-        role="tab"
-        aria-selected={selected}
-        aria-keyshortcuts={keyShortcuts ? `${keyShortcuts} Delete` : 'Delete'}
-        onClick={onSelect}
-        onKeyDown={(e) => {
-          onKeyDown?.(e);
-          if (!e.defaultPrevented && (e.key === 'Delete' || e.key === 'Backspace')) {
-            e.preventDefault();
-            onClose();
-          }
-        }}
-        onAuxClick={onAuxClick}
-        onContextMenu={onContextMenu}
-        title={title}
-        // Block-level, not inline: an inline button sat on a line's baseline, set by its first
-        // item, so a tab led by small letters (`TS`) dropped inside its pill and the pill grew.
-        className={`zg-press-subtle flex items-center gap-1.5 pl-2.5 pr-6 rounded-full border-0 bg-transparent text-inherit ${lifted ? 'cursor-grabbing' : 'cursor-pointer'} zg-focus-ring ${
-          size === 'sm' ? 'h-6 max-w-44 text-zg-label' : 'h-7 max-w-48 text-zg-ui'
-        }`}
-      >
-        {leading}
-        <span className="truncate">{label}</span>
-        {trailing}
-      </button>
-      {marker}
-      <IconButton
-        size="xs"
-        icon="i-ph-x"
-        label={closeLabel}
-        tabIndex={-1}
-        aria-hidden
-        onClick={(e) => {
-          e.stopPropagation();
-          onClose();
-        }}
-        // Centered by margin, not translate: the press scale replaces `transform`, and a
-        // translate-centered button jumped on press so the click missed it.
-        className={`absolute z-[1] right-1 inset-y-0 my-auto !rounded-full ${
-          closeAlways ? '' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
-        }`}
-      />
-    </div>
-  );
-}
-
-/** Look of a {@link CountBadge}: `attention`, `info` or `neutral`. */
-export type CountTone = 'attention' | 'info' | 'neutral';
-
-/** Props for {@link CountBadge}. */
-export interface CountBadgeProps {
-  /** The count or short label to show. */
-  text: string;
-  /** Look of the badge, see {@link CountTone}. */
-  tone: CountTone;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * The one count badge. `attention` is the agent waiting on the user (warn
- * fill, soft pulse while it lasts); `info` a quiet count set into its
- * surface; `neutral` an extension's own badge.
- *
- * @param props - Component props.
- */
-export function CountBadge({ text, tone, className, style }: CountBadgeProps) {
-  return (
-    <span
-      data-tone={tone}
-      className={[
-        `shrink-0 inline-flex items-center justify-center min-w-4 h-4 rounded-full px-1 text-zg-badge leading-4 ${
-          tone === 'attention'
-            ? 'zg-attention bg-[var(--zg-warn)] text-[var(--zg-bg)] font-medium'
-            : `zg-track-chip ${tone === 'info' ? 'text-[var(--zg-text)]' : 'text-[var(--zg-text-muted)]'}`
-        }`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {text}
-    </span>
-  );
-}

package/src/components/ThemeThumb.tsx

@@ -1,52 +0,0 @@
-/**
- * A theme as a miniature window: a sidebar, two lines of text, the accent
- * and the diff colours, all drawn from its resolved palette. Decorative: the
- * theme's name goes next to it.
- */
-import type { CSSProperties } from 'react';
-
-import type { ResolvedPalette } from '../theme/derive';
-
-/** Props for {@link ThemeThumb}. */
-export interface ThemeThumbProps {
-  /** The theme's resolved palette (`derivePalette`). */
-  palette: ResolvedPalette;
-  /** Extra classes on the thumbnail. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a theme's palette as a miniature window.
- *
- * @param props - Component props.
- */
-export function ThemeThumb({ palette: p, className = '', style }: ThemeThumbProps) {
-  return (
-    <span
-      aria-hidden
-      className={`flex h-16 rounded-zg-sm overflow-hidden border ${className}`}
-      style={{ background: p.bg, borderColor: p.border, ...style }}
-    >
-      <span
-        className="w-1/4 border-r flex flex-col gap-1 p-1.5"
-        style={{ background: p.surface1, borderColor: p.border }}
-      >
-        <span className="h-1 rounded-full w-3/4" style={{ background: p.textMuted }} />
-        <span className="h-1 rounded-full w-full" style={{ background: p.selected }} />
-        <span className="h-1 rounded-full w-2/3" style={{ background: p.textSubtle }} />
-      </span>
-      <span className="flex-1 flex flex-col gap-1.5 p-1.5">
-        <span className="h-1.5 rounded-full w-3/5" style={{ background: p.text }} />
-        <span className="h-1 rounded-full w-4/5" style={{ background: p.textMuted }} />
-        <span className="h-1 rounded-full w-2/5" style={{ background: p.textMuted }} />
-        <span className="mt-auto flex items-center gap-1">
-          <span className="h-3 w-8 rounded-full" style={{ background: p.accent }} />
-          <span className="h-3 w-3 rounded-full" style={{ background: p.diff.addContentBg }} />
-          <span className="h-3 w-3 rounded-full" style={{ background: p.diff.removeContentBg }} />
-        </span>
-      </span>
-    </span>
-  );
-}

package/src/components/ToggleCard.tsx

@@ -1,120 +0,0 @@
-/**
- * A toggle with room to explain itself: a title, badges, a description, a
- * status, and the switch. A card can lead with a logo (`lead`) and carry an
- * illustration (`media`), such as a small demo of what it turns on: beside
- * the text once the card is 600px wide, across its top below that. A card's
- * dependent toggles nest under it (`children`, each a `nested` card). Cards
- * sit flat in a tray, like the rows of Settings, and the switch says whether
- * a card is on.
- */
-import { useId, type CSSProperties, type ReactNode } from 'react';
-
-import { Switch } from './Form';
-
-/** Props for {@link ToggleCard}. */
-export interface ToggleCardProps {
-  /** The card's title. */
-  title: ReactNode;
-  /** One or two lines under the title. */
-  description?: ReactNode;
-  /** Whether the toggle is on. */
-  checked: boolean;
-  /** Called with the new state when the card is clicked. */
-  onChange: (checked: boolean) => void;
-  /** Marks after the title, such as "Experimental". */
-  badges?: ReactNode;
-  /** Icon class (`i-ph-*`) before the title. */
-  icon?: string;
-  /** A visual before the title, such as a `BrandMark`. Takes the place of `icon`. */
-  lead?: ReactNode;
-  /** An illustration, such as a small demo: beside the text on a card 600px wide or more, across its top below that. It is decorative: assistive tech skips it, and it must hold nothing to click. */
-  media?: ReactNode;
-  /** Shown before the switch: progress, "Installed", a reason. */
-  status?: ReactNode;
-  /** The toggle cannot change, such as a dependent toggle whose requirement is off. */
-  disabled?: boolean;
-  /** A dependent toggle inside its parent card: a smaller row. */
-  nested?: boolean;
-  /** Extra classes on the card. */
-  className?: string;
-  /** Nested dependent toggles, as `nested` cards. */
-  children?: ReactNode;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a switch with a title, badges, a description and a status, and its nested dependent
- * toggles under it.
- *
- * @param props - Component props.
- */
-export function ToggleCard({
-  title,
-  description,
-  checked,
-  onChange,
-  badges,
-  icon,
-  lead,
-  media,
-  status,
-  disabled = false,
-  nested = false,
-  className = '',
-  children,
-  style,
-}: ToggleCardProps) {
-  const id = useId();
-  const row = (
-    <>
-      {lead ??
-        (icon && <span aria-hidden className={`${icon} mt-0.5 text-zg-body shrink-0 text-[var(--zg-text-muted)]`} />)}
-      <span className="flex flex-col gap-1 flex-1 min-w-0">
-        <span className="flex items-center gap-2 flex-wrap min-w-0">
-          <span id={`${id}-title`} className={nested ? 'text-zg-label' : 'text-zg-ui'}>
-            {title}
-          </span>
-          {badges}
-        </span>
-        {description && (
-          <span id={`${id}-description`} className="text-zg-label text-[var(--zg-text-muted)] text-pretty">
-            {description}
-          </span>
-        )}
-      </span>
-      <span className="flex items-center gap-2 shrink-0 mt-0.5">
-        {status}
-        <Switch on={checked} />
-      </span>
-    </>
-  );
-  return (
-    <div className={`flex flex-col min-w-0 ${media ? 'zg-toggle-card' : ''} ${className}`} style={style}>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={checked}
-        aria-labelledby={`${id}-title`}
-        aria-describedby={description ? `${id}-description` : undefined}
-        disabled={disabled}
-        onClick={() => onChange(!checked)}
-        className={`zg-press-subtle ${
-          media ? 'zg-toggle-card-split' : `flex items-start gap-3.5 ${nested ? 'px-3 py-2' : 'px-4 py-3.5'}`
-        } w-full min-w-0 text-left rounded-zg-lg bg-transparent border-0 cursor-pointer text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)] disabled:opacity-zg-disabled disabled:cursor-default disabled:hover:before:bg-transparent zg-focus-ring`}
-      >
-        {media ? (
-          <>
-            <span aria-hidden className="zg-toggle-card-media">
-              {media}
-            </span>
-            <span className="zg-toggle-card-body flex items-start gap-3.5 min-w-0">{row}</span>
-          </>
-        ) : (
-          row
-        )}
-      </button>
-      {children && <div className={`flex flex-col ${media ? 'zg-toggle-card-children pb-2' : 'pl-6'}`}>{children}</div>}
-    </div>
-  );
-}