@cosxai/ui 1.0.0-alpha.0 → 1.0.0-alpha.10

package/src/index.ts

@@ -2,7 +2,78 @@
  * @cosxai/ui 1.x — the COSX Design System 3.0 in React.
  *
  * Foundations: import "@cosxai/ui/styles.css" (tokens + fonts) and, in a
- * Tailwind v4 app, "@cosxai/ui/theme.css". Components arrive in the 1.0
- * alphas (docs/workdocs/2026-09-29_feature-ui-1.0).
+ * Tailwind v4 app, "@cosxai/ui/theme.css". Plan and status:
+ * docs/workdocs/2026-09-29_feature-ui-1.0.
  */
 export { cn } from './lib/cn';
+
+export { Badge, type BadgeAppearance, type BadgeProps, type BadgeStatus } from './components/Badge';
+export { Button, formatCount, type ButtonGround, type ButtonProps, type ButtonState, type ButtonVariant } from './components/Button';
+export { Card, type CardProps } from './components/Card';
+export { Figure, type FigureProps } from './components/Figure';
+export { Icon, type IconProps } from './components/Icon';
+export { IconButton, type IconButtonProps } from './components/IconButton';
+export { Logo, type LogoProps } from './components/Logo';
+export { Marker, type MarkerProps } from './components/Marker';
+export { MetaLabel, type MetaLabelProps } from './components/MetaLabel';
+export { Spinner, type SpinnerProps } from './components/Spinner';
+export { BrandLoader, loaderState, type BrandLoaderProps } from './components/BrandLoader';
+export { Tag, type TagProps } from './components/Tag';
+export { ThemeProvider, useTheme, type ThemeMode, type ThemeProviderProps } from './components/ThemeProvider';
+export { useButtonAction, type ButtonAction } from './components/useButtonAction';
+
+export { Checkbox, type CheckboxProps } from './components/Checkbox';
+export { Dialog, DialogClose, DialogContent, DialogTrigger, type DialogContentProps } from './components/Dialog';
+export { Field, useField, type FieldContextValue, type FieldProps } from './components/Field';
+export { Input, type InputProps } from './components/Input';
+export { RadioGroup, type RadioGroupProps, type RadioOption } from './components/Radio';
+export { Select, type SelectOption, type SelectProps } from './components/Select';
+export { Switch, type SwitchProps } from './components/Switch';
+export { Table, type TableColumn, type TableProps, type TableRowBase, type TableSort, type TableSortDirection } from './components/Table';
+export { Tab, TabList, TabPanel, Tabs, type TabItem, type TabListProps, type TabPanelProps, type TabProps, type TabsProps, type TabsVariant } from './components/Tabs';
+export { Textarea, type TextareaProps } from './components/Textarea';
+export { ToastCard, Toaster, toast, type ToastCardProps, type ToasterProps, type ToastLabels, type ToastOptions, type ToastStatus } from './components/Toast';
+export { Tooltip, TooltipProvider, type TooltipProps } from './components/Tooltip';
+
+// Stage 2 — product patterns
+export { ActionBar, ActionBarProvider, arrange, formatShortcut, useActionBarActivity, useActionBarHidden, useActionBarItems, useActionBarMode, useActionBarSelection, type ActionBarAction, type ActionBarLabels, type ActionBarMode, type ActionBarPresentation, type ActionBarProps, type ActionBarProviderProps, type ActionBarSelection, type ActionBarState } from './components/ActionBar';
+export { ActivityTimeline, initialsOf, type ActivityEvent, type ActivityGroup, type ActivityTimelineProps } from './components/ActivityTimeline';
+export { AsyncSelect, type AsyncSelectProps } from './components/AsyncSelect';
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps } from './components/Breadcrumb';
+export { ChoiceCards, type Choice, type ChoiceCardsProps } from './components/ChoiceCards';
+export { CodeInput, type CodeInputProps } from './components/CodeInput';
+export { CommandPalette, useCommandPaletteHotkey, type CommandItem, type CommandPaletteLabels, type CommandPaletteProps, type CommandSource } from './components/CommandPalette';
+export { ConfirmDialog, PromptDialog, StepUpDialog, type ConfirmDialogProps, type PromptDialogProps, type StepUpDialogProps } from './components/ConfirmDialog';
+export { CopyField, type CopyFieldProps } from './components/CopyField';
+export { DateInput, FuzzyDateInput, type DateInputProps, type DatePrecision, type FuzzyDateInputProps } from './components/DateInput';
+export { Dropzone, refusedText, type DropzoneLabels, type DropzoneProps } from './components/Dropzone';
+export { FileCard, type FileCardProps, type FileCardState } from './components/FileCard';
+export { FileList, FileRow, type FileListProps, type FileRowProps } from './components/FileRow';
+export { FolderTree, type FolderTreeProps, type TreeNode } from './components/FolderTree';
+export { type ListItem } from './components/inputs-listbox';
+export { ListToolbar, type ListFilter, type ListToolbarLabels, type ListToolbarProps, type ListView, type SearchScope } from './components/ListToolbar';
+export { MentionInput, mentionAt, type Mention, type MentionInputProps } from './components/MentionInput';
+export { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, type MenuCheckboxItemProps, type MenuContentProps, type MenuItemProps, type MenuSubTriggerProps } from './components/Menu';
+export { PageHeader, type PageHeaderFigure, type PageHeaderProps } from './components/PageHeader';
+export { PageNotice, PageState, type PageNoticeProps, type PageStateKind, type PageStateProps } from './components/PageState';
+export { Progress, progressStep, type ProgressProps, type ProgressSegment } from './components/Progress';
+export { PulseDot, type PulseDotProps } from './components/PulseDot';
+export { RecipientsInput, type Recipient, type RecipientStatus, type RecipientsInputProps } from './components/RecipientsInput';
+export { SearchField, type SearchFieldProps } from './components/SearchField';
+export { SegmentedControl, type Segment, type SegmentedControlProps } from './components/SegmentedControl';
+export { SidePanel, SidePanelProvider, SidePanelSlot, useSidePanel, type SidePanelProps } from './components/SidePanel';
+export { Skeleton, SkeletonCards, SkeletonList, SkeletonViewer, type SkeletonProps, type SkeletonViewerProps } from './components/Skeleton';
+export { StageProgress, type Stage, type StageProgressProps } from './components/StageProgress';
+export { checkFiles, formatBytes, hasFiles, readDataTransfer, type DroppedFile, type FileRules, type Rejected, type RejectReason } from './components/status-files';
+export { Steps, type Step, type StepState, type StepsProps } from './components/Steps';
+export { SyncStatus, type SyncState, type SyncStatusProps } from './components/SyncStatus';
+export { UploadCheck, groupByFolder, type UploadCheckLabels, type UploadCheckProps } from './components/UploadCheck';
+export { UploadFolderRow, UploadList, UploadRow, useBeforeUnloadWhile, type UploadItem, type UploadRowLabels, type UploadRowProps, type UploadState } from './components/UploadList';
+export { useSelection, type Selection, type SelectionOptions } from './components/useSelection';
+export { InfiniteLoader, VirtualList, type InfiniteLoaderProps, type VirtualListProps } from './components/VirtualList';
+export { WindowDrop, useWindowDrop, type WindowDropProps } from './components/WindowDrop';
+
+// Stage 3 — sign-in (Metaroom sign-in, design.cosx.co)
+export { AuthIconTile, AuthLayout, AuthPanel, AuthStepHead, type AuthIconTileProps, type AuthLayoutProps, type AuthPanelProps, type AuthStepHeadProps } from './components/AuthLayout';
+export { ThemeSwitch, type ThemeSwitchLabels, type ThemeSwitchProps } from './components/ThemeSwitch';
+export { WorkspaceMark, WorkspaceRow, type WorkspaceMarkProps, type WorkspaceRowProps } from './components/WorkspaceRow';

package/src/modes.css

@@ -0,0 +1,10 @@
+/* @cosxai/ui — ink mode, completed.
+ *
+ * 3.0 switches its colours on either data-mode="ink" (root) or .ink-mode
+ * (subtree) — colors.css — but its marker rules (typography.css,
+ * typography-cjk.css) only know .ink-mode. Same rules for data-mode, so a
+ * page in ink mode gets the ink marker: no band, the finding in accent
+ * yellow. Reported to the design system; drop this when 3.0 covers it.
+ */
+[data-mode="ink"] .marker { color: var(--yellow-accent); background: none; padding: 0; margin: 0; border-radius: 0; }
+[data-mode="ink"] :lang(zh) .marker, :lang(zh)[data-mode="ink"] .marker { background: none; }

package/src/styles.css

@@ -14,4 +14,6 @@
 @import "./tokens/elevation.css";
 @import "./tokens/motion.css";
 @import "./tokens/compat.css";
+@import "./brand.css";
+@import "./modes.css";
 @import "./fonts.css";

package/src/theme-base.css

@@ -0,0 +1,123 @@
+/* @cosxai/ui — the design system's Tailwind utilities, without clearing
+ * Tailwind's own palette, sizes, radii, shadows, fonts and easings.
+ *
+ * For an app moving to the kit screen by screen (product-meta during the
+ * move): its existing classes keep working, and the kit's are added. Where
+ * both define a name (radius, font-sans, ease-in/out), the kit's value wins.
+ * New apps import theme.css, which is this plus the reset.
+ */
+/* ink: — styles for ink mode (data-mode="ink" on <html>, or inside
+   .ink-mode). The semantic colours switch by themselves; this is for the
+   rules that flip on ink (the primary becomes the yellow). */
+@custom-variant ink (&:where([data-mode="ink"], [data-mode="ink"] *, .ink-mode, .ink-mode *));
+
+@theme inline {
+
+  /* Materials — fixed, do not switch with ink mode */
+  --color-paper: var(--paper);
+  --color-linen: var(--linen);
+  --color-sunk-2: var(--sunk-2);
+  --color-sunk-3: var(--sunk-3);
+  --color-ink: var(--ink);
+  --color-ink-raised: var(--ink-raised);
+  --color-grey: var(--grey);
+  --color-grey-inverse: var(--grey-inverse);
+
+  /* The yellow — one hue, by area */
+  --color-yellow: var(--yellow);
+  --color-yellow-accent: var(--yellow-accent);
+  --color-yellow-accent-hover: var(--yellow-accent-hover);
+  --color-yellow-light: var(--yellow-light);
+  --color-yellow-hover: var(--yellow-hover);
+  --color-yellow-1: var(--yellow-1);
+  --color-yellow-2: var(--yellow-2);
+  --color-yellow-3: var(--yellow-3);
+  --color-yellow-4: var(--yellow-4);
+  --color-yellow-5: var(--yellow-5);
+  --color-yellow-wash-12: var(--yellow-12);
+  --color-yellow-wash-20: var(--yellow-20);
+  --color-yellow-wash-32: var(--yellow-32);
+  --color-yellow-wash-50: var(--yellow-50);
+  --color-marker: var(--marker);
+
+  /* Semantic — switch with ink mode. Product code uses these. */
+  --color-page: var(--bg-page);
+  --color-sunk: var(--bg-sunk);
+  --color-well: var(--bg-well);
+  --color-chrome: var(--bg-chrome);
+  --color-field: var(--bg-field);
+  --color-fg: var(--text-primary);
+  --color-fg-secondary: var(--text-secondary);
+  --color-fg-label: var(--text-label);
+  --color-fg-on-yellow-secondary: var(--text-on-yellow-secondary);
+  --color-rule: var(--rule);
+  --color-rule-soft: var(--rule-soft);
+  --color-hover: var(--hover);
+  --color-scrim: var(--scrim);
+
+  /* Workspace brand (brand.css): the COSX yellow unless a customer's
+     colour is injected. Selection and grounds use field; dots and
+     progress use mark. Never for text. */
+  --color-brand-field: var(--brand-field);
+  --color-brand-mark: var(--brand-mark);
+
+  /* On an ink surface inside a paper page */
+  --color-inv: var(--inv-bg);
+  --color-inv-raised: var(--inv-bg-raised);
+  --color-inv-fg: var(--inv-text);
+  --color-inv-fg-secondary: var(--inv-text-secondary);
+  --color-inv-rule: var(--inv-rule);
+
+  /* Product status: yellow, ink and one red. Progress is an ink outline and
+     complete a grey dot — they take no colour of their own. */
+  --color-attention: var(--status-attention);
+  --color-attention-wash: var(--status-attention-wash);
+  --color-error: var(--status-error);
+  --color-error-text: var(--status-error-text);
+  --color-error-wash: var(--status-error-wash);
+
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-white: #fff;
+
+  /* Radius ladder — same names and values as 3.0 spacing.css */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-pill: 999px;
+
+  /* One family. Same stacks as fonts.css (the ones in effect): font-sans
+     for Latin, font-sans-cjk for Chinese pages (Geist for Latin and
+     figures, Noto Sans SC for hanzi). */
+  --font-sans: "Geist Variable", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-sans-cjk: "Geist Variable", "Geist", "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Type scale (typography.css). Product UI body is 14px, content 15px. */
+  --text-meta: 12px;
+  --text-small: 13.5px;
+  --text-ui: 14px;
+  --text-body: 15px;
+  --text-h3: 18px;
+  --text-lede: 20px;
+  --text-title: 22px;
+  --text-figure: 32px;
+  --text-h2: var(--size-h2);
+  --text-h1: var(--size-h1);
+  --text-display: var(--size-display);
+
+  --tracking-display: -0.025em;
+  --tracking-heading: -0.015em;
+  --tracking-figure: -0.03em;
+
+  /* Motion — flat for state, ease-out for entry; nothing bounces */
+  --ease-standard: cubic-bezier(.2,0,.2,1);
+  --ease-out: cubic-bezier(.16,1,.3,1);
+  --ease-in: cubic-bezier(.4,0,1,1);
+}

package/src/theme-reset.css

@@ -0,0 +1,14 @@
+/* @cosxai/ui — clears Tailwind's defaults so only the design system's
+ * values exist (part of theme.css; see theme-base.css for incremental use). */
+@theme {
+  --color-*: initial;
+  --radius-*: initial;
+  --shadow-*: initial;
+  --inset-shadow-*: initial;
+  --drop-shadow-*: initial;
+  --font-*: initial;
+  --ease-*: initial;
+  --text-*: initial;
+  --font-weight-*: initial;
+  --tracking-*: initial;
+}

package/src/theme.css

@@ -16,117 +16,5 @@
  * (theme.test.ts). In particular font sizes avoid --text-primary /
  * --text-secondary / --text-label, which are colours in 3.0.
  */
-@theme inline {
-  --color-*: initial;
-  --radius-*: initial;
-  --shadow-*: initial;
-  --inset-shadow-*: initial;
-  --drop-shadow-*: initial;
-  --font-*: initial;
-  --ease-*: initial;
-  --text-*: initial;
-  --font-weight-*: initial;
-  --tracking-*: initial;
-
-  /* Materials — fixed, do not switch with ink mode */
-  --color-paper: var(--paper);
-  --color-linen: var(--linen);
-  --color-sunk-2: var(--sunk-2);
-  --color-sunk-3: var(--sunk-3);
-  --color-ink: var(--ink);
-  --color-ink-raised: var(--ink-raised);
-  --color-grey: var(--grey);
-  --color-grey-inverse: var(--grey-inverse);
-
-  /* The yellow — one hue, by area */
-  --color-yellow: var(--yellow);
-  --color-yellow-accent: var(--yellow-accent);
-  --color-yellow-accent-hover: var(--yellow-accent-hover);
-  --color-yellow-light: var(--yellow-light);
-  --color-yellow-hover: var(--yellow-hover);
-  --color-yellow-1: var(--yellow-1);
-  --color-yellow-2: var(--yellow-2);
-  --color-yellow-3: var(--yellow-3);
-  --color-yellow-4: var(--yellow-4);
-  --color-yellow-5: var(--yellow-5);
-  --color-yellow-wash-12: var(--yellow-12);
-  --color-yellow-wash-20: var(--yellow-20);
-  --color-yellow-wash-32: var(--yellow-32);
-  --color-yellow-wash-50: var(--yellow-50);
-  --color-marker: var(--marker);
-
-  /* Semantic — switch with ink mode. Product code uses these. */
-  --color-page: var(--bg-page);
-  --color-sunk: var(--bg-sunk);
-  --color-well: var(--bg-well);
-  --color-chrome: var(--bg-chrome);
-  --color-field: var(--bg-field);
-  --color-fg: var(--text-primary);
-  --color-fg-secondary: var(--text-secondary);
-  --color-fg-label: var(--text-label);
-  --color-fg-on-yellow-secondary: var(--text-on-yellow-secondary);
-  --color-rule: var(--rule);
-  --color-rule-soft: var(--rule-soft);
-  --color-hover: var(--hover);
-  --color-scrim: var(--scrim);
-
-  /* On an ink surface inside a paper page */
-  --color-inv: var(--inv-bg);
-  --color-inv-raised: var(--inv-bg-raised);
-  --color-inv-fg: var(--inv-text);
-  --color-inv-fg-secondary: var(--inv-text-secondary);
-  --color-inv-rule: var(--inv-rule);
-
-  /* Product status: yellow, ink and one red. Progress is an ink outline and
-     complete a grey dot — they take no colour of their own. */
-  --color-attention: var(--status-attention);
-  --color-attention-wash: var(--status-attention-wash);
-  --color-error: var(--status-error);
-  --color-error-text: var(--status-error-text);
-  --color-error-wash: var(--status-error-wash);
-
-  --color-transparent: transparent;
-  --color-current: currentColor;
-  --color-white: #fff;
-
-  /* Radius ladder — same names and values as 3.0 spacing.css */
-  --radius-xs: 4px;
-  --radius-sm: 6px;
-  --radius-md: 8px;
-  --radius-lg: 16px;
-  --radius-xl: 24px;
-  --radius-pill: 999px;
-
-  /* One family. Same stacks as fonts.css (the ones in effect): font-sans
-     for Latin, font-sans-cjk for Chinese pages (Geist for Latin and
-     figures, Noto Sans SC for hanzi). */
-  --font-sans: "Geist Variable", "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --font-sans-cjk: "Geist Variable", "Geist", "Noto Sans SC Variable", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
-
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  /* Type scale (typography.css). Product UI body is 14px, content 15px. */
-  --text-meta: 12px;
-  --text-small: 13.5px;
-  --text-ui: 14px;
-  --text-body: 15px;
-  --text-h3: 18px;
-  --text-lede: 20px;
-  --text-title: 22px;
-  --text-figure: 32px;
-  --text-h2: var(--size-h2);
-  --text-h1: var(--size-h1);
-  --text-display: var(--size-display);
-
-  --tracking-display: -0.025em;
-  --tracking-heading: -0.015em;
-  --tracking-figure: -0.03em;
-
-  /* Motion — flat for state, ease-out for entry; nothing bounces */
-  --ease-standard: cubic-bezier(.2,0,.2,1);
-  --ease-out: cubic-bezier(.16,1,.3,1);
-  --ease-in: cubic-bezier(.4,0,1,1);
-}
+@import "./theme-reset.css";
+@import "./theme-base.css";