@misoto22/kioku-ui 0.0.0 → 0.2.0

package/src/i18n/messages.ts

@@ -0,0 +1,51 @@
+/** Every string the system speaks on a host application's behalf. */
+export interface Messages {
+  readonly back: string;
+  readonly calendarNextMonth: string;
+  readonly calendarPreviousMonth: string;
+  readonly carouselNext: string;
+  readonly carouselPrevious: string;
+  readonly chatToolCallDone: string;
+  readonly chatToolCallFailed: string;
+  readonly chatToolCallRunning: string;
+  readonly chatTranscriptEmpty: string;
+  readonly chatWaitingForReply: string;
+  readonly close: string;
+  readonly commandPaletteEmpty: string;
+  readonly commandPalettePlaceholder: string;
+  readonly fileInputEmpty: string;
+  readonly paginationNext: string;
+  readonly paginationPrevious: string;
+  readonly remove: string;
+  readonly resizeHandle: string;
+  readonly skipToContent: string;
+  readonly typeaheadEmpty: string;
+}
+
+/**
+ * The built-in English strings. A host that ships another language supplies a
+ * full replacement rather than a patch, so a missing key is a type error
+ * instead of an English word appearing mid-sentence.
+ */
+export const defaultMessages: Messages = Object.freeze({
+  back: 'Back',
+  calendarNextMonth: 'Next month',
+  calendarPreviousMonth: 'Previous month',
+  carouselNext: 'Next',
+  carouselPrevious: 'Previous',
+  chatToolCallDone: 'Done',
+  chatToolCallFailed: 'Failed',
+  chatToolCallRunning: 'Running',
+  chatTranscriptEmpty: 'No messages yet',
+  chatWaitingForReply: 'Waiting for a reply',
+  close: 'Close',
+  commandPaletteEmpty: 'No commands match',
+  commandPalettePlaceholder: 'Search commands',
+  fileInputEmpty: 'No file selected',
+  paginationNext: 'Next page',
+  paginationPrevious: 'Previous page',
+  remove: 'Remove',
+  resizeHandle: 'Resize panel',
+  skipToContent: 'Skip to main content',
+  typeaheadEmpty: 'No matches',
+});

package/src/index.ts

@@ -10,56 +10,258 @@ export {
 } from './tokens/contracts.js';
 export {globalStyles} from './styles/global.stylex.js';
 export {Alert, type AlertProps} from './Alert/index.js';
+export {AlertDialog, type AlertDialogProps} from './AlertDialog/index.js';
+export {Banner, type BannerProps} from './Banner/index.js';
+export {Blockquote, type BlockquoteProps} from './Blockquote/index.js';
+export {
+  Box,
+  type BoxProps,
+  type BoxRadius,
+  type BoxSurface,
+} from './Box/index.js';
+export {BottomSheet, type BottomSheetProps} from './BottomSheet/index.js';
+export {
+  BottomSheetSwitcher,
+  type BottomSheetSwitcherProps,
+  type BottomSheetSwitcherView,
+} from './BottomSheetSwitcher/index.js';
 export {
   AsyncState,
   type AsyncStateProps,
   type AsyncStateValue,
 } from './AsyncState/index.js';
+export {AppShell, type AppShellProps} from './AppShell/index.js';
+export {AspectRatio, type AspectRatioProps} from './AspectRatio/index.js';
+export {Avatar, type AvatarProps, type AvatarSize} from './Avatar/index.js';
+export {
+  AvatarGroup,
+  type AvatarGroupMember,
+  type AvatarGroupProps,
+} from './AvatarGroup/index.js';
 export {
   Badge,
   type BadgeProps,
   type BadgeTone,
   type StatusTone,
 } from './Badge/index.js';
+export {
+  Breadcrumbs,
+  type BreadcrumbItem,
+  type BreadcrumbsProps,
+} from './Breadcrumbs/index.js';
+export {ButtonGroup, type ButtonGroupProps} from './ButtonGroup/index.js';
 export {
   Button,
   type ButtonProps,
   type ButtonVariant,
   type ControlSize,
 } from './Button/index.js';
+export {Calendar, type CalendarProps} from './Calendar/index.js';
 export {Card, type CardElevation, type CardProps} from './Card/index.js';
 export {CardFooter, type CardFooterProps} from './CardFooter/index.js';
 export {CardHeader, type CardHeaderProps} from './CardHeader/index.js';
+export {Carousel, type CarouselProps} from './Carousel/index.js';
+export {
+  ChatComposer,
+  ChatLayout,
+  ChatMessage,
+  ChatMessageList,
+  ChatMessageMetadata,
+  ChatSystemMessage,
+  ChatToolCalls,
+  type ChatAuthor,
+  type ChatComposerProps,
+  type ChatLayoutProps,
+  type ChatMessageListProps,
+  type ChatMessageMetadataProps,
+  type ChatMessageProps,
+  type ChatMetadataEntry,
+  type ChatSystemMessageProps,
+  type ChatToolCall,
+  type ChatToolCallsProps,
+} from './Chat/index.js';
 export {Center, type CenterProps} from './Center/index.js';
+export {CheckboxInput, type CheckboxInputProps} from './CheckboxInput/index.js';
+export {
+  CheckboxList,
+  type CheckboxListProps,
+  type CheckboxOption,
+} from './CheckboxList/index.js';
+export {Collapsible, type CollapsibleProps} from './Collapsible/index.js';
+export {
+  CommandPalette,
+  type Command,
+  type CommandPaletteProps,
+} from './CommandPalette/index.js';
+export {
+  ComplexSelector,
+  type ComplexSelectorProps,
+  type SelectorGroup,
+} from './ComplexSelector/index.js';
+export {ContextMenu, type ContextMenuProps} from './ContextMenu/index.js';
+export {DateInput, type DateInputProps} from './DateInput/index.js';
+export {DatePicker, type DatePickerProps} from './DatePicker/index.js';
+export {
+  DateRangeInput,
+  type DateRange,
+  type DateRangeInputProps,
+} from './DateRangeInput/index.js';
+export {DateTimeInput, type DateTimeInputProps} from './DateTimeInput/index.js';
+export {Citation, type CitationProps} from './Citation/index.js';
+export {ClickableCard, type ClickableCardProps} from './ClickableCard/index.js';
+export {Code, type CodeProps} from './Code/index.js';
+export {CodeBlock, type CodeBlockProps} from './CodeBlock/index.js';
+export {Dialog, type DialogProps, type DialogSize} from './Dialog/index.js';
 export {Divider, type DividerProps} from './Divider/index.js';
+export {
+  DropdownMenu,
+  DropdownMenuItem,
+  type DropdownMenuItemProps,
+  type DropdownMenuProps,
+} from './DropdownMenu/index.js';
 export {
   EmptyState,
   type EmptyStateProps,
   type EmptyStateSize,
 } from './EmptyState/index.js';
+export {Eyebrow, type EyebrowProps, type EyebrowTone} from './Eyebrow/index.js';
 export {Field, type FieldNecessity, type FieldProps} from './Field/index.js';
+export {FieldStatus, type FieldStatusProps} from './FieldStatus/index.js';
+export {FileInput, type FileInputProps} from './FileInput/index.js';
+export {
+  FormLayout,
+  type FormColumns,
+  type FormLayoutProps,
+} from './FormLayout/index.js';
 export {Grid, type GridProps} from './Grid/index.js';
+export {
+  HStack,
+  type HStackAlign,
+  type HStackJustify,
+  type HStackProps,
+} from './HStack/index.js';
+export {HoverCard, type HoverCardProps} from './HoverCard/index.js';
+export {Indicator, type IndicatorProps} from './Indicator/index.js';
+export {InputGroup, type InputGroupProps} from './InputGroup/index.js';
 export {
   Heading,
   type HeadingFamily,
   type HeadingProps,
 } from './Heading/index.js';
+export {
+  Icon,
+  type IconProps,
+  type IconSize,
+  type IconTone,
+} from './Icon/index.js';
 export {IconButton, type IconButtonProps} from './IconButton/index.js';
+export {Item, type ItemProps} from './Item/index.js';
+export {Kbd, type KbdProps} from './Kbd/index.js';
+export {Layer, type LayerProps} from './Layer/index.js';
+export {Lightbox, type LightboxProps} from './Lightbox/index.js';
+export {Layout, type LayoutProps} from './Layout/index.js';
+export {
+  List,
+  ListItem,
+  type ListItemProps,
+  type ListProps,
+  type ListVariant,
+} from './List/index.js';
+export {
+  Markdown,
+  parseInline,
+  parseMarkdown,
+  type BlockNode,
+  type InlineNode,
+  type MarkdownProps,
+} from './Markdown/index.js';
+export {
+  MetadataList,
+  type MetadataEntry,
+  type MetadataListLayout,
+  type MetadataListProps,
+} from './MetadataList/index.js';
 export {
   MetricGrid,
   type MetricGridItem,
   type MetricGridProps,
 } from './MetricGrid/index.js';
+export {MobileNav, type MobileNavProps} from './MobileNav/index.js';
+export {MoreMenu, type MoreMenuProps} from './MoreMenu/index.js';
+export {NavIcon, type NavIconProps} from './NavIcon/index.js';
+export {NavItem, type NavItemProps} from './NavItem/index.js';
+export {MultiSelector, type MultiSelectorProps} from './MultiSelector/index.js';
+export {
+  NavMenu,
+  type NavMenuOrientation,
+  type NavMenuProps,
+} from './NavMenu/index.js';
+export {NumberInput, type NumberInputProps} from './NumberInput/index.js';
+export {Numeral, type NumeralProps} from './Numeral/index.js';
+export {
+  OverflowList,
+  type OverflowEntry,
+  type OverflowListProps,
+} from './OverflowList/index.js';
+export {
+  Outline,
+  type OutlineEntry,
+  type OutlineProps,
+} from './Outline/index.js';
+export {Overlay, type OverlayProps} from './Overlay/index.js';
+export {Pagination, type PaginationProps} from './Pagination/index.js';
+export {Popover, type PopoverProps} from './Popover/index.js';
+export {
+  PowerSearch,
+  type PowerSearchProps,
+  type SearchFilter,
+} from './PowerSearch/index.js';
+export {ProgressBar, type ProgressBarProps} from './ProgressBar/index.js';
+export {
+  RadioList,
+  type RadioListProps,
+  type RadioOption,
+} from './RadioList/index.js';
 export {Section, type SectionProps} from './Section/index.js';
 export {
   SegmentedControl,
   type SegmentedControlOption,
   type SegmentedControlProps,
 } from './SegmentedControl/index.js';
+export {Resizable, type ResizableProps} from './Resizable/index.js';
+export {
+  ResizeHandle,
+  type ResizeHandleOrientation,
+  type ResizeHandleProps,
+} from './ResizeHandle/index.js';
+export {
+  SelectableCard,
+  type SelectableCardProps,
+} from './SelectableCard/index.js';
+export {
+  Selector,
+  type SelectorOption,
+  type SelectorProps,
+} from './Selector/index.js';
+export {
+  SideNav,
+  SideNavSection,
+  type SideNavProps,
+  type SideNavSectionProps,
+} from './SideNav/index.js';
 export {Skeleton, type SkeletonProps} from './Skeleton/index.js';
+export {Slider, type SliderProps} from './Slider/index.js';
 export {Spinner, type SpinnerProps} from './Spinner/index.js';
 export {Stack, type Space, type StackProps} from './Stack/index.js';
 export {StatusDot, type StatusDotProps} from './StatusDot/index.js';
+export {Switch, type SwitchProps} from './Switch/index.js';
+export {TabList, type TabListProps, type TabOption} from './TabList/index.js';
+export {
+  Thumbnail,
+  type ThumbnailProps,
+  type ThumbnailSize,
+} from './Thumbnail/index.js';
+export {Timestamp, type TimestampProps} from './Timestamp/index.js';
 export {
   Table,
   TableBody,
@@ -81,7 +283,44 @@ export {
 export {Text, type TextProps, type TextTone} from './Text/index.js';
 export {TextArea, type TextAreaProps} from './TextArea/index.js';
 export {TextInput, type TextInputProps} from './TextInput/index.js';
+export {TimeInput, type TimeInputProps} from './TimeInput/index.js';
+export {
+  Toast,
+  ToastProvider,
+  useToast,
+  type ToastContextValue,
+  type ToastOptions,
+  type ToastProps,
+  type ToastProviderProps,
+} from './Toast/index.js';
 export {Toggle, type ToggleProps} from './Toggle/index.js';
+export {Token, type TokenProps} from './Token/index.js';
+export {Tokenizer, type TokenizerProps} from './Tokenizer/index.js';
+export {ToggleButton, type ToggleButtonProps} from './ToggleButton/index.js';
+export {
+  ToggleButtonGroup,
+  type ToggleButtonGroupProps,
+  type ToggleOption,
+} from './ToggleButtonGroup/index.js';
+export {Toolbar, type ToolbarProps} from './Toolbar/index.js';
+export {Tooltip, type TooltipProps} from './Tooltip/index.js';
+export {TopNav, type TopNavProps} from './TopNav/index.js';
+export {
+  TopNavMegaMenu,
+  TopNavMegaMenuFeaturedCard,
+  type MegaMenuColumn,
+  type TopNavMegaMenuFeaturedCardProps,
+  type TopNavMegaMenuProps,
+} from './TopNavMegaMenu/index.js';
+export {TopNavMenu, type TopNavMenuProps} from './TopNavMenu/index.js';
+export {TreeList, type TreeListProps, type TreeNode} from './TreeList/index.js';
+export {
+  Typeahead,
+  type TypeaheadOption,
+  type TypeaheadProps,
+} from './Typeahead/index.js';
+export {TypeaheadItem, type TypeaheadItemProps} from './TypeaheadItem/index.js';
+export {VStack, type VStackProps} from './VStack/index.js';
 export {
   VisuallyHidden,
   type VisuallyHiddenProps,
@@ -89,10 +328,42 @@ export {
 export {
   ThemeProvider,
   useTheme,
+  type ColorMode,
   type ThemeContextValue,
   type ThemePersistence,
   type ThemeProviderProps,
 } from './theme/index.js';
+export {
+  InternationalizationProvider,
+  defaultMessages,
+  useInternationalization,
+  useMessage,
+  type InternationalizationProviderProps,
+  type InternationalizationValue,
+  type Messages,
+} from './i18n/index.js';
+export {clamp, mergeIds, resolveInvalid} from './utils/index.js';
+export {
+  focusableElements,
+  focusableSelector,
+  reachableElements,
+  reachableSelector,
+  useAnnounce,
+  useClipboard,
+  useDevWarning,
+  useFocusTrap,
+  useHotkeys,
+  useIsomorphicLayoutEffect,
+  useListFocus,
+  useMediaQuery,
+  useScrollLock,
+  type AnnouncePoliteness,
+  type ClipboardState,
+  type HotkeyBindings,
+  type HotkeyOptions,
+  type ListFocusOptions,
+  type ListOrientation,
+} from './hooks/index.js';
 export {
   Link,
   LinkProvider,

package/src/navigation/LinkProvider.tsx

@@ -1,3 +1,4 @@
+import * as stylex from '@stylexjs/stylex';
 import {
   createContext,
   useContext,
@@ -6,10 +7,48 @@ import {
   type ReactNode,
 } from 'react';
 
-export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+import {semanticTokens} from '../authoring.stylex.js';
+
+// Far enough clear of the descenders to read, close enough to still belong to
+// the word. There is no token for it because nothing else in the system sets
+// an underline offset.
+const underlineOffset = '0.2em';
+
+const styles = stylex.create({
+  // No fontFamily and no fontSize here, against the usual rule that every text
+  // element declares its own. A link is a run inside somebody else's sentence:
+  // pinning it to the body face would set a link in a Mincho heading in sans,
+  // and pinning its size would shrink one in a page title. It inherits both,
+  // and the tracking that comes with them.
+  link: {
+    borderRadius: semanticTokens.radiusInner,
+    color: semanticTokens.colorAccent,
+    textDecorationLine: 'underline',
+    // The rule under a link is the same hairline the system draws everywhere
+    // else, so it takes the border width rather than a pixel of its own.
+    textDecorationThickness: semanticTokens.borderWidth,
+    textUnderlineOffset: underlineOffset,
+    ':active': {color: semanticTokens.colorAccentActive},
+    ':focus-visible': {
+      outlineColor: semanticTokens.colorFocus,
+      outlineOffset: semanticTokens.focusOffset,
+      outlineStyle: semanticTokens.borderStyle,
+      outlineWidth: semanticTokens.focusWidth,
+    },
+    ':hover': {color: semanticTokens.colorAccentHover},
+  },
+});
 
-export type LinkRenderer = (props: LinkProps) => ReactElement | null;
+/** The props a host's renderer receives, with styling already resolved. */
+export type LinkRenderProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+
+/** Renders a link with the host application's own routing component. */
+export type LinkRenderer = (props: LinkRenderProps) => ReactElement | null;
+
+/** Props for a link into the host application's routing. */
+export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement>;
 
+/** Props for the routing boundary. */
 export interface LinkProviderProps {
   readonly children: ReactNode;
   readonly renderLink?: LinkRenderer;
@@ -17,16 +56,31 @@ export interface LinkProviderProps {
 
 const LinkContext = createContext<LinkRenderer | undefined>(undefined);
 
+/**
+ * Injects the host application's routing component. Without one, links fall
+ * back to plain anchors, so the package depends on no routing library.
+ */
 export function LinkProvider({children, renderLink}: LinkProviderProps) {
   return <LinkContext value={renderLink}>{children}</LinkContext>;
 }
 
+/**
+ * Renders a link through the host's router when one is provided.
+ *
+ * It carries the system's own link treatment rather than the browser default.
+ * A caller that needs a different look — navigation, an outline entry — passes
+ * its own StyleX class, which replaces the default rather than merging with it.
+ */
 export function Link(props: LinkProps) {
   const renderLink = useContext(LinkContext);
+  // The default treatment comes first so a caller that brings its own StyleX
+  // class replaces it outright. Merging two atomic class strings would leave
+  // which rule wins undefined.
+  const styled: LinkRenderProps = {...stylex.props(styles.link), ...props};
 
   if (renderLink) {
-    return renderLink(props);
+    return renderLink(styled);
   }
 
-  return <a {...props} />;
+  return <a {...styled} />;
 }

package/src/scrolling/index.ts

@@ -0,0 +1 @@
+export {scrolling} from './scrolling.js';

package/src/scrolling/scrolling.ts

@@ -0,0 +1,25 @@
+import * as stylex from '@stylexjs/stylex';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+/**
+ * @internal How anything in this system scrolls.
+ *
+ * The scrollbar was the one surface the pack had never drawn: a census across
+ * `packages/core/src` found ten scrolling regions and not a single
+ * `scrollbar-width` or `scrollbar-color` between them, so every one of them
+ * wore the platform's bar — a different width, a different colour and a
+ * different radius from every hairline it ran beside, and 15–17px wide against
+ * regions that had budgeted three.
+ *
+ * `thin` plus the strong border rank puts it on the same ladder as the rules it
+ * runs alongside, and a transparent track keeps the well it sits in unbroken. A
+ * region whose content already fits shows nothing at all, because these are all
+ * `auto` rather than `scroll`.
+ */
+export const scrolling = stylex.create({
+  region: {
+    scrollbarColor: `${semanticTokens.borderStrong} transparent`,
+    scrollbarWidth: 'thin',
+  },
+});

package/src/styles/global.stylex.ts

@@ -9,6 +9,7 @@ export const globalStyles = stylex.create({
     fontFamily: semanticTokens.fontFamilyBody,
     fontFeatureSettings: semanticTokens.fontFeatureSettings,
     fontSize: semanticTokens.fontSizeMd,
+    letterSpacing: semanticTokens.letterSpacingBody,
     fontWeight: semanticTokens.fontWeightRegular,
     lineHeight: semanticTokens.lineHeightBody,
   },

package/src/theme/Theme.tsx

@@ -61,6 +61,12 @@ const semanticTokenScopeClass = (
 
 export type Density = 'compact' | 'standard';
 
+/**
+ * Which appearance the theme resolves its `light-dark()` pairs against.
+ * `system` follows the reader's own setting.
+ */
+export type ColorMode = 'dark' | 'light' | 'system';
+
 const densities: readonly Density[] = ['compact', 'standard'];
 
 // A theme pack fulfills the token contract twice, once per density. Density is
@@ -71,11 +77,14 @@ export interface ThemePersistence {
   write(themeId: string): void;
   readDensity?(): string | undefined;
   writeDensity?(density: Density): void;
+  readMode?(): string | undefined;
+  writeMode?(mode: ColorMode): void;
 }
 
 export interface ThemeProviderProps {
   readonly children: ReactNode;
   readonly defaultDensity?: Density;
+  readonly defaultMode?: ColorMode;
   readonly defaultThemeId: string;
   readonly persistence?: ThemePersistence;
   readonly themes: readonly ThemeDefinition[];
@@ -83,6 +92,15 @@ export interface ThemeProviderProps {
 
 export interface ThemeContextValue {
   readonly density: Density;
+  readonly mode: ColorMode;
+  readonly setMode: (mode: ColorMode) => void;
+  /**
+   * The element the theme's custom properties are written to. A floating
+   * surface has to portal into this rather than into `document.body`: the
+   * tokens live here, not on the document, so a surface that escapes it
+   * resolves every `var()` to nothing and renders unpainted.
+   */
+  readonly root: HTMLElement | null;
   readonly setDensity: (density: Density) => void;
   readonly setThemeId: (themeId: string) => void;
   readonly theme: ThemeDefinition;
@@ -114,6 +132,14 @@ function requiredDensity(density: string | undefined, fallback: Density) {
     : fallback;
 }
 
+const colorModes: readonly ColorMode[] = ['dark', 'light', 'system'];
+
+function requiredMode(mode: string | undefined, fallback: ColorMode) {
+  return colorModes.includes(mode as ColorMode)
+    ? (mode as ColorMode)
+    : fallback;
+}
+
 function requiredTheme(themes: readonly ThemeDefinition[], themeId: string) {
   const theme = themes.find(({id}) => id === themeId);
   if (!theme) {
@@ -134,6 +160,7 @@ function themeStyle(theme: ThemeDefinition): CSSProperties {
 export function ThemeProvider({
   children,
   defaultDensity = 'compact',
+  defaultMode = 'system',
   defaultThemeId,
   persistence,
   themes,
@@ -163,9 +190,21 @@ export function ThemeProvider({
     },
     [defaultDensity, persistence],
   );
+  const [mode, setCurrentMode] = useState(() =>
+    requiredMode(persistence?.readMode?.(), defaultMode),
+  );
+  const setMode = useCallback(
+    (nextMode: ColorMode) => {
+      const resolved = requiredMode(nextMode, defaultMode);
+      persistence?.writeMode?.(resolved);
+      setCurrentMode(resolved);
+    },
+    [defaultMode, persistence],
+  );
+  const [root, setRoot] = useState<HTMLElement | null>(null);
   const value = useMemo(
-    () => ({density, setDensity, setThemeId, theme}),
-    [density, setDensity, setThemeId, theme],
+    () => ({density, mode, root, setDensity, setMode, setThemeId, theme}),
+    [density, mode, root, setDensity, setMode, setThemeId, theme],
   );
 
   const {className, style} = stylex.props(styles.root);
@@ -177,8 +216,23 @@ export function ThemeProvider({
           .filter(Boolean)
           .join(' ')}
         data-density={density}
+        data-mode={mode}
         data-theme={theme.id}
-        style={{...style, ...themeStyle(theme)}}
+        ref={setRoot}
+        /*
+         * `color-scheme` is stamped on this element and no other. It is the
+         * element that carries the tokens, and `light-dark()` resolves against
+         * the used color-scheme of the element the value lands on — so a host
+         * that sets the scheme on a div *inside* the provider changes nothing,
+         * which is exactly the bug this replaced. `system` omits the property
+         * so the stylesheet's own `light dark` stands and the reader's setting
+         * decides.
+         */
+        style={{
+          ...style,
+          ...themeStyle(theme),
+          ...(mode === 'system' ? {} : {colorScheme: mode}),
+        }}
       >
         {children}
       </div>
@@ -186,6 +240,15 @@ export function ThemeProvider({
   );
 }
 
+/**
+ * The theme, or `null` when there is no provider above. `useTheme` throws in
+ * that case, which is right for a component that cannot work unthemed; a
+ * portal boundary can, so it asks without insisting.
+ */
+export function useOptionalTheme(): ThemeContextValue | null {
+  return useContext(ThemeContext) ?? null;
+}
+
 export function useTheme(): ThemeContextValue {
   const theme = useContext(ThemeContext);
   if (!theme) {

package/src/theme/index.ts

@@ -1,6 +1,7 @@
 export {
   ThemeProvider,
   useTheme,
+  type ColorMode,
   type Density,
   type ThemeContextValue,
   type ThemePersistence,