@gcsa/console-react 0.1.0

package/src/GcsaProgress.tsx

@@ -0,0 +1,18 @@
+export type GcsaProgressProps = {
+  percent?: number;
+  className?: string;
+};
+
+export function GcsaProgress({ percent = 0, className }: GcsaProgressProps) {
+  return (
+    <div
+      className={`gcsa-progress${className ? ` ${className}` : ''}`}
+      role="progressbar"
+      aria-valuenow={percent}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <div className="gcsa-progress__bar" style={{ width: `${percent}%` }} />
+    </div>
+  );
+}

package/src/GcsaRadioGroup.tsx

@@ -0,0 +1,42 @@
+import type { GcsaRadioOption } from '@gcsa/console-core';
+import { RadioGroup } from '@ark-ui/react/radio-group';
+
+export type GcsaRadioGroupProps = {
+  value?: string;
+  options: GcsaRadioOption[];
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  onValueChange?: (value: string) => void;
+};
+
+export function GcsaRadioGroup({
+  value,
+  options,
+  orientation = 'vertical',
+  className,
+  onValueChange
+}: GcsaRadioGroupProps) {
+  return (
+    <RadioGroup.Root
+      value={value}
+      orientation={orientation}
+      className={`gcsa-radio-group gcsa-radio-group--${orientation}${className ? ` ${className}` : ''}`}
+      onValueChange={details => onValueChange?.(details.value ?? '')}
+    >
+      {options.map(opt => (
+        <RadioGroup.Item
+          key={opt.value}
+          value={opt.value}
+          disabled={opt.disabled}
+          className="gcsa-radio gcsa-focus-ring"
+        >
+          <RadioGroup.ItemHiddenInput />
+          <RadioGroup.ItemControl className="gcsa-radio__control">
+            <span className="gcsa-radio__dot" aria-hidden="true" />
+          </RadioGroup.ItemControl>
+          <RadioGroup.ItemText className="gcsa-radio__label">{opt.label}</RadioGroup.ItemText>
+        </RadioGroup.Item>
+      ))}
+    </RadioGroup.Root>
+  );
+}

package/src/GcsaResult.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { GcsaIcon } from './GcsaIcon';
+
+export type GcsaResultProps = {
+  title: string;
+  subtitle?: string;
+  icon?: ReactNode;
+  extra?: ReactNode;
+  className?: string;
+};
+
+export function GcsaResult({ title, subtitle, icon, extra, className }: GcsaResultProps) {
+  return (
+    <div className={`gcsa-result gcsa-ui-surface${className ? ` ${className}` : ''}`}>
+      <div className="gcsa-result__icon" aria-hidden="true">
+        {icon ?? <GcsaIcon name="resultEmpty" />}
+      </div>
+      <div className="gcsa-result__title">{title}</div>
+      {subtitle ? <div className="gcsa-result__subtitle">{subtitle}</div> : null}
+      {extra ? <div className="gcsa-result__extra">{extra}</div> : null}
+    </div>
+  );
+}

package/src/GcsaRow.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export type GcsaRowProps = {
+  cols?: 2 | 3 | 4;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function GcsaRow({ cols = 2, className, children }: GcsaRowProps) {
+  return (
+    <div className={`gcsa-row gcsa-row--${cols}${className ? ` ${className}` : ''}`}>{children}</div>
+  );
+}

package/src/GcsaSelect.tsx

@@ -0,0 +1,186 @@
+import { useMemo, useRef, type CSSProperties } from 'react';
+import { createListCollection } from '@ark-ui/react/collection';
+import { Select } from '@ark-ui/react/select';
+import { Portal } from '@ark-ui/react/portal';
+import type { GcsaPopupPlacement, GcsaSelectOption, GcsaSelectSize } from '@gcsa/console-core';
+import { createGcsaPopupPositioning, formatGcsaLocaleMessage, gcsaControlSizeClass } from '@gcsa/console-core';
+import { GcsaIcon } from './GcsaIcon';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+import { useGcsaPopupZIndex } from './hooks/useGcsaPopupZIndex';
+import { useGcsaComponentSize } from './hooks/useGcsaComponentSize';
+import { preserveDrawerScrollFrom } from './utils/preserveDrawerScroll';
+
+export type GcsaSelectPlacement = GcsaPopupPlacement;
+
+export type GcsaSelectProps = {
+  value: string;
+  options: GcsaSelectOption[];
+  placeholder?: string;
+  invalid?: boolean;
+  /** 下拉相对触发器的初始方位 */
+  placement?: GcsaSelectPlacement;
+  listMaxHeight?: number;
+  listHintThreshold?: number;
+  groupOrder?: string[];
+  /** 是否挂载到 body；嵌套浮层（如 DatePicker 内）应设为 false */
+  portalled?: boolean;
+  /** 下拉面板是否与触发器同宽 */
+  sameWidth?: boolean;
+  size?: GcsaSelectSize;
+  onValueChange?: (value: string) => void;
+};
+
+function SelectContent({
+  collection,
+  contentStyle,
+  showListHint,
+  listHintText,
+  empty,
+  emptyText
+}: {
+  collection: ReturnType<typeof createListCollection<GcsaSelectOption>>;
+  contentStyle: CSSProperties;
+  showListHint: boolean;
+  listHintText: string;
+  empty: boolean;
+  emptyText: string;
+}) {
+  return (
+    <Select.Content className="gcsa-select-content gcsa-ui-surface" style={contentStyle}>
+      {empty ? (
+        <div className="gcsa-select-empty" role="status">
+          <span className="gcsa-select-empty__text">{emptyText}</span>
+        </div>
+      ) : (
+        <>
+          <Select.List className="gcsa-select-list">
+            {collection.group().map(([groupLabel, groupItems]) => (
+              <Select.ItemGroup key={groupLabel || 'default'} className="gcsa-select-group">
+                {groupLabel ? (
+                  <Select.ItemGroupLabel className="gcsa-select-group__label">
+                    {groupLabel}
+                  </Select.ItemGroupLabel>
+                ) : null}
+                {groupItems.map(opt => (
+                  <Select.Item key={opt.value} item={opt} className="gcsa-select-item">
+                    <Select.ItemText className="gcsa-select-item__text">{opt.label}</Select.ItemText>
+                    <Select.ItemIndicator className="gcsa-select-item__check">
+                      <GcsaIcon name="check" size="sm" className="gcsa-select-item__check-icon" />
+                    </Select.ItemIndicator>
+                  </Select.Item>
+                ))}
+              </Select.ItemGroup>
+            ))}
+          </Select.List>
+          {showListHint ? <div className="gcsa-select-hint">{listHintText}</div> : null}
+        </>
+      )}
+    </Select.Content>
+  );
+}
+
+export function GcsaSelect({
+  value,
+  options,
+  placeholder,
+  invalid,
+  placement = 'bottom-start',
+  listMaxHeight = 280,
+  listHintThreshold = 16,
+  groupOrder,
+  portalled = true,
+  sameWidth = true,
+  size,
+  onValueChange
+}: GcsaSelectProps) {
+  const controlRef = useRef<HTMLDivElement>(null);
+  const resolvedSize = useGcsaComponentSize(size);
+  const messages = useGcsaLocaleMessages();
+  const { zIndex, onOpenChange } = useGcsaPopupZIndex();
+  const hasGroups = options.some(item => item.group);
+
+  const collection = useMemo(
+    () =>
+      createListCollection({
+        items: options,
+        itemToValue: item => item.value,
+        itemToString: item => item.label,
+        isItemDisabled: item => item.disabled ?? false,
+        ...(hasGroups
+          ? {
+              groupBy: (item: GcsaSelectOption) => item.group ?? '',
+              groupSort: groupOrder ?? ('asc' as const)
+            }
+          : {})
+      }),
+    [options, hasGroups, groupOrder]
+  );
+
+  const selectedValue = value == null ? [] : [value];
+  const showListHint = options.length >= listHintThreshold;
+  const listHintText = formatGcsaLocaleMessage(messages.selectListHint, { count: options.length });
+  const emptyText = messages.emptyDefault;
+  const isEmpty = options.length === 0;
+  const contentStyle = {
+    '--gcsa-select-list-max-height': `${listMaxHeight}px`,
+    ...(zIndex == null ? {} : { zIndex })
+  } as CSSProperties;
+  const positionerStyle = zIndex == null ? undefined : ({ zIndex } as CSSProperties);
+  const positioning = useMemo(
+    () => createGcsaPopupPositioning({ placement, sameWidth, gutter: 4 }),
+    [placement, sameWidth]
+  );
+
+  return (
+    <Select.Root
+      collection={collection}
+      value={selectedValue}
+      positioning={positioning}
+      lazyMount
+      unmountOnExit
+      onOpenChange={details => {
+        onOpenChange(details.open);
+        preserveDrawerScrollFrom(controlRef.current);
+      }}
+      onValueChange={details => onValueChange?.(details.value[0] ?? '')}
+    >
+      <Select.Control ref={controlRef} className="gcsa-select-control">
+        <Select.Trigger
+          className={`gcsa-select-trigger gcsa-focus-ring ${gcsaControlSizeClass('gcsa-select-trigger', resolvedSize)}`}
+          data-invalid={invalid || undefined}
+        >
+          <Select.ValueText className="gcsa-select-value" placeholder={placeholder} />
+          <Select.Indicator className="gcsa-select-indicator" aria-hidden="true">
+            <GcsaIcon name="chevronDown" className="gcsa-select-indicator__icon" />
+          </Select.Indicator>
+        </Select.Trigger>
+      </Select.Control>
+      {portalled ? (
+        <Portal>
+          <Select.Positioner style={positionerStyle}>
+            <SelectContent
+              collection={collection}
+              contentStyle={contentStyle}
+              showListHint={showListHint}
+              listHintText={listHintText}
+              empty={isEmpty}
+              emptyText={emptyText}
+            />
+          </Select.Positioner>
+        </Portal>
+      ) : (
+        <Select.Positioner style={positionerStyle}>
+          <SelectContent
+            collection={collection}
+            contentStyle={contentStyle}
+            showListHint={showListHint}
+            listHintText={listHintText}
+            empty={isEmpty}
+            emptyText={emptyText}
+          />
+        </Select.Positioner>
+      )}
+      <Select.HiddenSelect />
+    </Select.Root>
+  );
+}

package/src/GcsaSkeleton.tsx

@@ -0,0 +1,19 @@
+export type GcsaSkeletonProps = {
+  width?: string;
+  height?: string;
+  className?: string;
+};
+
+export function GcsaSkeleton({
+  width = '100%',
+  height = '16px',
+  className
+}: GcsaSkeletonProps) {
+  return (
+    <div
+      className={`gcsa-skeleton${className ? ` ${className}` : ''}`}
+      style={{ width, height }}
+      aria-hidden="true"
+    />
+  );
+}

package/src/GcsaSpace.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+export type GcsaSpaceProps = {
+  vertical?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function GcsaSpace({ vertical, className, children }: GcsaSpaceProps) {
+  return (
+    <div
+      className={`gcsa-space${vertical ? ' gcsa-space--vertical' : ''}${className ? ` ${className}` : ''}`}
+    >
+      {children}
+    </div>
+  );
+}

package/src/GcsaSpin.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export type GcsaSpinProps = {
+  spinning?: boolean;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function GcsaSpin({ spinning = true, className, children }: GcsaSpinProps) {
+  const nested = children != null && children !== false;
+  const rootClassName = [
+    'gcsa-spin',
+    nested ? 'gcsa-spin--nested' : null,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={rootClassName} aria-busy={spinning}>
+      {spinning ? <span className="gcsa-spin__dot" aria-hidden="true" /> : null}
+      {children}
+    </div>
+  );
+}

package/src/GcsaStatistic.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+export type GcsaStatisticProps = {
+  label: string;
+  value?: string | number;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function GcsaStatistic({ label, value, className, children }: GcsaStatisticProps) {
+  return (
+    <div className={`gcsa-statistic${className ? ` ${className}` : ''}`}>
+      <div className="gcsa-statistic__label">{label}</div>
+      <div className="gcsa-statistic__value">{children ?? value}</div>
+    </div>
+  );
+}

package/src/GcsaSteps.tsx

@@ -0,0 +1,73 @@
+import type { GcsaStepItem } from '@gcsa/console-core';
+import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
+
+export type GcsaStepsProps = {
+  items: GcsaStepItem[];
+  current?: number;
+  direction?: 'horizontal' | 'vertical';
+  clickable?: boolean;
+  onCurrentChange?: (value: number) => void;
+  onChange?: (value: number, item: GcsaStepItem) => void;
+};
+
+export function GcsaSteps({
+  items,
+  current = 0,
+  direction = 'horizontal',
+  clickable = false,
+  onCurrentChange,
+  onChange
+}: GcsaStepsProps) {
+  const messages = useGcsaLocaleMessages();
+  const status = (item: GcsaStepItem, index: number) =>
+    item.status ?? (index < current ? 'finish' : index === current ? 'process' : 'wait');
+  const indicator = (item: GcsaStepItem, index: number) =>
+    status(item, index) === 'finish' ? '✓' : status(item, index) === 'error' ? '!' : String(index + 1);
+  const change = (index: number) => {
+    onCurrentChange?.(index);
+    onChange?.(index, items[index]);
+  };
+
+  return (
+    <ol
+      className={`gcsa-steps${direction === 'vertical' ? ' gcsa-steps--vertical' : ''}`}
+      aria-label={messages.stepsLabel}
+    >
+      {items.map((item, index) => {
+        const body = (
+          <>
+            <span className="gcsa-steps__indicator" aria-hidden="true">
+              {indicator(item, index)}
+            </span>
+            <span className="gcsa-steps__copy">
+              <strong>{item.title}</strong>
+              {item.description ? <small>{item.description}</small> : null}
+            </span>
+          </>
+        );
+        return (
+          <li
+            key={item.key}
+            className={`gcsa-steps__item gcsa-steps__item--${status(item, index)}${item.disabled ? ' gcsa-steps__item--disabled' : ''}`}
+          >
+            {clickable && !item.disabled ? (
+              <button
+                type="button"
+                className="gcsa-steps__trigger gcsa-focus-ring"
+                aria-current={index === current ? 'step' : undefined}
+                onClick={() => change(index)}
+              >
+                {body}
+              </button>
+            ) : (
+              <div className="gcsa-steps__trigger" aria-current={index === current ? 'step' : undefined}>
+                {body}
+              </div>
+            )}
+            {index < items.length - 1 ? <span className="gcsa-steps__connector" aria-hidden="true" /> : null}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/GcsaSwitch.tsx

@@ -0,0 +1,45 @@
+import { useRef, type ReactNode } from 'react';
+import { Switch } from '@ark-ui/react/switch';
+import type { GcsaComponentSize } from '@gcsa/console-core';
+import { gcsaControlSizeClass } from '@gcsa/console-core';
+import { useGcsaComponentSize } from './hooks/useGcsaComponentSize';
+import { usePreventHiddenInputScroll } from './hooks/usePreventHiddenInputScroll';
+
+export type GcsaSwitchProps = {
+  checked?: boolean;
+  label?: string;
+  className?: string;
+  size?: GcsaComponentSize;
+  children?: ReactNode;
+  onCheckedChange?: (checked: boolean) => void;
+};
+
+export function GcsaSwitch({
+  checked,
+  label,
+  className,
+  size,
+  children,
+  onCheckedChange
+}: GcsaSwitchProps) {
+  const rootRef = useRef<HTMLLabelElement>(null);
+  usePreventHiddenInputScroll(rootRef);
+  const resolvedSize = useGcsaComponentSize(size);
+  const sizeClass = gcsaControlSizeClass('gcsa-switch', resolvedSize);
+  return (
+    <Switch.Root
+      ref={rootRef}
+      checked={checked}
+      className={`gcsa-switch gcsa-focus-ring ${sizeClass}${className ? ` ${className}` : ''}`}
+      onCheckedChange={details => onCheckedChange?.(details.checked)}
+    >
+      <Switch.Control className="gcsa-switch__track">
+        <Switch.Thumb className="gcsa-switch__thumb" />
+      </Switch.Control>
+      {label || children ? (
+        <Switch.Label className="gcsa-switch__label">{children ?? label}</Switch.Label>
+      ) : null}
+      <Switch.HiddenInput />
+    </Switch.Root>
+  );
+}

package/src/GcsaTabs.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+import { Tabs } from '@ark-ui/react/tabs';
+
+export type GcsaTabItem = {
+  key: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type GcsaTabsProps = {
+  items: GcsaTabItem[];
+  value: string;
+  variant?: 'line' | 'soft';
+  tabPanels?: Record<string, ReactNode>;
+  className?: string;
+  onValueChange?: (value: string) => void;
+};
+
+export function GcsaTabs({
+  items,
+  value,
+  variant = 'line',
+  tabPanels,
+  className,
+  onValueChange
+}: GcsaTabsProps) {
+  return (
+    <Tabs.Root
+      className={`gcsa-tabs gcsa-ui-surface gcsa-tabs--${variant}${className ? ` ${className}` : ''}`}
+      value={value}
+      onValueChange={details => onValueChange?.(details.value)}
+    >
+      <Tabs.List className="gcsa-tabs__list">
+        {items.map(tab => (
+          <Tabs.Trigger
+            key={tab.key}
+            value={tab.key}
+            disabled={tab.disabled}
+            className="gcsa-tabs__trigger gcsa-focus-ring"
+          >
+            {tab.label}
+          </Tabs.Trigger>
+        ))}
+        {variant === 'line' ? <Tabs.Indicator className="gcsa-tabs__indicator" /> : null}
+      </Tabs.List>
+      {items.map(tab => (
+        <Tabs.Content key={tab.key} value={tab.key} className="gcsa-tabs__content">
+          {tabPanels?.[tab.key]}
+        </Tabs.Content>
+      ))}
+    </Tabs.Root>
+  );
+}

package/src/GcsaTag.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+export type GcsaTagProps = {
+  tone?: 'primary' | 'success' | 'warning' | 'danger';
+  className?: string;
+  children?: ReactNode;
+};
+
+export function GcsaTag({ tone, className, children }: GcsaTagProps) {
+  const toneClass = tone ? `gcsa-tag--${tone}` : '';
+  return (
+    <span className={`gcsa-tag${toneClass ? ` ${toneClass}` : ''}${className ? ` ${className}` : ''}`}>
+      {children}
+    </span>
+  );
+}

package/src/GcsaTextarea.tsx

@@ -0,0 +1,87 @@
+import { useId, useLayoutEffect, useRef } from 'react';
+import type { TextareaHTMLAttributes } from 'react';
+import type { GcsaComponentSize } from '@gcsa/console-core';
+import { gcsaControlSizeClass } from '@gcsa/console-core';
+import { useGcsaTextCount, type GcsaTextCountFormatter } from './hooks/useGcsaTextCount';
+import { useGcsaComponentSize } from './hooks/useGcsaComponentSize';
+import { patchFocusPreventScroll } from './hooks/usePreventHiddenInputScroll';
+
+export type GcsaTextareaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'value' | 'onChange' | 'onBlur'
+> & {
+  value?: string;
+  size?: GcsaComponentSize;
+  invalid?: boolean;
+  showCount?: boolean;
+  countFormatter?: GcsaTextCountFormatter;
+  onValueChange?: (value: string) => void;
+  onBlur?: () => void;
+};
+
+export function GcsaTextarea({
+  value = '',
+  placeholder = '',
+  rows = 4,
+  disabled = false,
+  invalid = false,
+  maxLength,
+  showCount,
+  countFormatter,
+  size,
+  className,
+  onValueChange,
+  onBlur,
+  ...rest
+}: GcsaTextareaProps) {
+  const resolvedSize = useGcsaComponentSize(size);
+  const countId = useId();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  useLayoutEffect(() => {
+    if (textareaRef.current) patchFocusPreventScroll(textareaRef.current);
+  });
+  const { showCounter, countText, isNearLimit } = useGcsaTextCount({
+    modelValue: value,
+    maxLength,
+    showCount,
+    formatter: countFormatter
+  });
+
+  return (
+    <div
+      className={[
+        'gcsa-text-control',
+        'gcsa-text-control--textarea',
+        gcsaControlSizeClass('gcsa-text-control', resolvedSize),
+        showCounter ? 'gcsa-text-control--count' : null,
+        className
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <textarea
+        ref={textareaRef}
+        className="gcsa-textarea"
+        value={value}
+        placeholder={placeholder}
+        rows={rows}
+        disabled={disabled}
+        maxLength={maxLength}
+        data-invalid={invalid || undefined}
+        aria-describedby={showCounter ? countId : undefined}
+        onChange={event => onValueChange?.(event.target.value)}
+        onBlur={() => onBlur?.()}
+        {...rest}
+      />
+      {showCounter ? (
+        <span
+          id={countId}
+          className={`gcsa-text-control__count${isNearLimit ? ' gcsa-text-control__count--near' : ''}`}
+          aria-live="polite"
+        >
+          {countText}
+        </span>
+      ) : null}
+    </div>
+  );
+}