entangle-ui 0.7.0 → 0.8.0

package/dist/types/index.d.ts

@@ -1,6 +1,9 @@
 export { ThemeVars, vars } from './theme/contract.css.js';
-export { DarkThemeValues, darkThemeValues } from './theme/darkTheme.css.js';
-export { createCustomTheme } from './theme/createCustomTheme.js';
+export { DarkThemeValues, darkThemeValues } from './theme/darkThemeValues.js';
+export { LightThemeValues, lightThemeValues } from './theme/lightThemeValues.js';
+export { lightThemeClass } from './theme/lightTheme.css.js';
+export { ThemeValues, createCustomTheme } from './theme/createCustomTheme.js';
+export { createLightTheme } from './theme/createLightTheme.js';
 export { VanillaThemeProvider, VanillaThemeProviderProps } from './theme/VanillaThemeProvider.js';
 export { ThemeProvider, ThemeProviderProps } from './theme/ThemeProvider.js';
 export { Accordion } from './components/layout/Accordion/Accordion.js';
@@ -25,6 +28,9 @@ export { SplitPane } from './components/layout/SplitPane/SplitPane.js';
 export { SplitPanePanel } from './components/layout/SplitPane/SplitPanePanel.js';
 export { PanelConfig, PanelSize, SplitDirection, SplitPanePanelProps, SplitPaneProps } from './components/layout/SplitPane/SplitPane.types.js';
 export { Stack } from './components/layout/Stack/Stack.js';
+export { Avatar } from './components/primitives/Avatar/Avatar.js';
+export { AvatarGroup } from './components/primitives/Avatar/AvatarGroup.js';
+export { AvatarColor, AvatarGroupProps, AvatarProps, AvatarShape, AvatarSize, AvatarStatus } from './components/primitives/Avatar/Avatar.types.js';
 export { Badge } from './components/primitives/Badge/Badge.js';
 export { BadgeColor, BadgeProps, BadgeSize, BadgeVariant } from './components/primitives/Badge/Badge.types.js';
 export { Button, ButtonProps, ButtonSize, ButtonVariant } from './components/primitives/Button/Button.js';
@@ -38,18 +44,27 @@ export { CollapsibleProps, CollapsibleSize } from './components/primitives/Colla
 export { Icon, IconProps, IconSize } from './components/primitives/Icon/Icon.js';
 export { IconButton } from './components/primitives/IconButton/IconButton.js';
 export { Input, InputProps, InputSize } from './components/primitives/Input/Input.js';
+export { Kbd } from './components/primitives/Kbd/Kbd.js';
+export { KbdProps, KbdSize, KbdVariant } from './components/primitives/Kbd/Kbd.types.js';
+export { Link } from './components/primitives/Link/Link.js';
+export { LinkColor, LinkProps, LinkSize, LinkUnderline, LinkVariant } from './components/primitives/Link/Link.types.js';
 export { Paper, PaperElevation, PaperNestLevel, PaperProps, PaperSpacing } from './components/primitives/Paper/Paper.js';
 export { Popover } from './components/primitives/Popover/Popover.js';
 export { PopoverClose } from './components/primitives/Popover/PopoverClose.js';
 export { PopoverContent } from './components/primitives/Popover/PopoverContent.js';
 export { PopoverTrigger } from './components/primitives/Popover/PopoverTrigger.js';
 export { PopoverCloseProps, PopoverContentProps, PopoverPlacement, PopoverProps, PopoverTriggerProps } from './components/primitives/Popover/Popover.types.js';
+export { Radio } from './components/primitives/Radio/Radio.js';
+export { RadioGroup } from './components/primitives/Radio/RadioGroup.js';
+export { RadioGroupOrientation, RadioGroupProps, RadioLabelPosition, RadioProps, RadioSize } from './components/primitives/Radio/Radio.types.js';
 export { Switch, SwitchProps, SwitchSize } from './components/primitives/Switch/Switch.js';
 export { Text, TextAlign, TextColor, TextElement, TextLineHeight, TextProps, TextSize, TextVariant, TextWeight } from './components/primitives/Text/Text.js';
 export { TextArea } from './components/primitives/TextArea/TextArea.js';
 export { TextAreaProps, TextAreaResize, TextAreaSize } from './components/primitives/TextArea/TextArea.types.js';
 export { Tooltip, TooltipProps } from './components/primitives/Tooltip/Tooltip.js';
 export { CollisionAvoidance, TooltipCollisionConfig, TooltipCollisionStrategy, TooltipPlacement } from './components/primitives/Tooltip/types.js';
+export { VisuallyHidden } from './components/primitives/VisuallyHidden/VisuallyHidden.js';
+export { VisuallyHiddenElement, VisuallyHiddenProps } from './components/primitives/VisuallyHidden/VisuallyHidden.types.js';
 export { Brand, DeepPartial, DeepReadonly, KeyOf, LiteralUnion, NonEmptyArray, Prettify, RequireFields, StrictExclude, ValueOf } from './types/utilities.js';
 export { BaseComponent, Size, Variant } from './types/common.js';
 export { ColorPicker } from './components/controls/ColorPicker/ColorPicker.js';
@@ -74,12 +89,20 @@ export { createLinearCurve, domainToCanvas, evaluateCurve, sampleCurve } from '.
 export { CURVE_PRESETS } from './components/controls/CurveEditor/curvePresets.js';
 export { CartesianPicker } from './components/controls/CartesianPicker/CartesianPicker.js';
 export { CartesianPickerInfo, CartesianPickerProps, CartesianPickerSize } from './components/controls/CartesianPicker/CartesianPicker.types.js';
+export { Breadcrumbs } from './components/navigation/Breadcrumbs/Breadcrumbs.js';
+export { BreadcrumbItem } from './components/navigation/Breadcrumbs/BreadcrumbItem.js';
+export { BreadcrumbSeparator } from './components/navigation/Breadcrumbs/BreadcrumbSeparator.js';
+export { BreadcrumbEllipsis } from './components/navigation/Breadcrumbs/BreadcrumbEllipsis.js';
+export { BreadcrumbEllipsisProps, BreadcrumbItemProps, BreadcrumbSeparatorProps, BreadcrumbsProps, BreadcrumbsSize } from './components/navigation/Breadcrumbs/Breadcrumbs.types.js';
 export { ContextMenu } from './components/navigation/ContextMenu/ContextMenu.js';
 export { useContextMenuTarget } from './components/navigation/ContextMenu/useContextMenuTarget.js';
 export { ContextMenuBaseProps, ContextMenuConfig, ContextMenuProps, ContextMenuTargetDetails, UseContextMenuTargetResult } from './components/navigation/ContextMenu/ContextMenu.types.js';
 export { Menu } from './components/navigation/Menu/Menu.js';
 export { useMenu } from './components/navigation/Menu/useMenu.js';
 export { ItemSelectionType, MenuBaseProps, MenuConfig, MenuGroup, MenuItem, MenuProps, MenuSelection, SubmenuTrigger } from './components/navigation/Menu/Menu.types.js';
+export { SegmentedControl } from './components/navigation/SegmentedControl/SegmentedControl.js';
+export { SegmentedControlItem } from './components/navigation/SegmentedControl/SegmentedControlItem.js';
+export { SegmentedControlItemProps, SegmentedControlOrientation, SegmentedControlProps, SegmentedControlSize, SegmentedControlVariant } from './components/navigation/SegmentedControl/SegmentedControl.types.js';
 export { Tabs } from './components/navigation/Tabs/Tabs.js';
 export { TabList } from './components/navigation/Tabs/TabList.js';
 export { Tab } from './components/navigation/Tabs/Tab.js';
@@ -88,6 +111,11 @@ export { TabListProps, TabPanelProps, TabProps, TabsProps, TabsSize, TabsVariant
 export { FormLabel, FormLabelProps } from './components/form/FormLabel.js';
 export { FormHelperText, FormHelperTextProps } from './components/form/FormHelperText.js';
 export { InputWrapper, InputWrapperProps } from './components/form/InputWrapper.js';
+export { Alert } from './components/feedback/Alert/Alert.js';
+export { AlertTitle } from './components/feedback/Alert/AlertTitle.js';
+export { AlertDescription } from './components/feedback/Alert/AlertDescription.js';
+export { AlertActions } from './components/feedback/Alert/AlertActions.js';
+export { AlertActionsProps, AlertAppearance, AlertDescriptionProps, AlertProps, AlertTitleProps, AlertVariant } from './components/feedback/Alert/Alert.types.js';
 export { Dialog } from './components/feedback/Dialog/Dialog.js';
 export { DialogHeader } from './components/feedback/Dialog/DialogHeader.js';
 export { DialogBody } from './components/feedback/Dialog/DialogBody.js';
@@ -96,6 +124,12 @@ export { DialogClose } from './components/feedback/Dialog/DialogClose.js';
 export { DialogBodyProps, DialogFooterProps, DialogHeaderProps, DialogProps, DialogSize } from './components/feedback/Dialog/Dialog.types.js';
 export { EmptyState } from './components/feedback/EmptyState/EmptyState.js';
 export { EmptyStateProps, EmptyStateVariant } from './components/feedback/EmptyState/EmptyState.types.js';
+export { ProgressBar } from './components/feedback/ProgressBar/ProgressBar.js';
+export { CircularProgress } from './components/feedback/ProgressBar/CircularProgress.js';
+export { CircularProgressProps, CircularProgressSize, ProgressBarColor, ProgressBarLabelPosition, ProgressBarProps, ProgressBarSize } from './components/feedback/ProgressBar/ProgressBar.types.js';
+export { Skeleton } from './components/feedback/Skeleton/Skeleton.js';
+export { SkeletonGroup } from './components/feedback/Skeleton/SkeletonGroup.js';
+export { SkeletonAnimation, SkeletonGroupProps, SkeletonProps, SkeletonShape } from './components/feedback/Skeleton/Skeleton.types.js';
 export { Spinner } from './components/feedback/Spinner/Spinner.js';
 export { SpinnerColor, SpinnerProps, SpinnerSize, SpinnerVariant } from './components/feedback/Spinner/Spinner.types.js';
 export { ToastProvider } from './components/feedback/Toast/ToastProvider.js';
@@ -110,6 +144,8 @@ export { PropertyGroupProps, PropertyInspectorSize, PropertyPanelProps, Property
 export { ViewportGizmo } from './components/editor/ViewportGizmo/ViewportGizmo.js';
 export { GizmoAxisColorPreset, GizmoAxisConfig, GizmoHitRegion, GizmoOrientation, GizmoPresetView, GizmoUpAxis, OrbitDelta, ViewportGizmoProps, ViewportGizmoSize } from './components/editor/ViewportGizmo/ViewportGizmo.types.js';
 export { ProjectedArm, Vec3, axisToPresetView, eulerToRotationMatrix, gizmoHitTest, presetViewToOrientation, projectAxes, projectToCanvas, quaternionToEuler } from './components/editor/ViewportGizmo/gizmoMath.js';
+export { TransformControl } from './components/editor/TransformControl/TransformControl.js';
+export { CoordinateSpace, CoordinateSpaceOption, TransformControlProps, TransformLabelsConfig, TransformPrecisionConfig, TransformShowConfig, TransformStepConfig, TransformUnitsConfig, TransformValue } from './components/editor/TransformControl/TransformControl.types.js';
 export { ChatPanel } from './components/editor/ChatPanel/ChatPanel.js';
 export { ChatMessageList } from './components/editor/ChatPanel/ChatMessageList.js';
 export { ChatMessage } from './components/editor/ChatPanel/ChatMessage.js';
@@ -139,5 +175,22 @@ export { StatusBar } from './components/shell/StatusBar/StatusBar.js';
 export { StatusBarItemProps, StatusBarProps, StatusBarSectionProps, StatusBarSectionSide, StatusBarSize, StatusBarVariant } from './components/shell/StatusBar/StatusBar.types.js';
 export { Toolbar } from './components/shell/Toolbar/Toolbar.js';
 export { ToolbarButtonProps, ToolbarButtonVariant, ToolbarGroupProps, ToolbarOrientation, ToolbarProps, ToolbarSeparatorProps, ToolbarSize, ToolbarSpacerProps, ToolbarToggleProps } from './components/shell/Toolbar/Toolbar.types.js';
+export { useKeyboard } from './hooks/useKeyboard/useKeyboard.js';
+export { AllKeys, KeyCode, KeyboardState, ModifierKeys } from './hooks/useKeyboard/types.js';
+export { UseControlledStateOptions, useControlledState } from './hooks/useControlledState/useControlledState.js';
+export { UseFocusTrapOptions, useFocusTrap } from './hooks/useFocusTrap/useFocusTrap.js';
+export { useMergedRef } from './hooks/useMergedRef/useMergedRef.js';
+export { UseResizeObserverOptions, useResizeObserver } from './hooks/useResizeObserver/useResizeObserver.js';
+export { useDisclosure } from './hooks/useDisclosure/useDisclosure.js';
+export { UseDisclosureOptions, UseDisclosureReturn } from './hooks/useDisclosure/useDisclosure.types.js';
+export { useClipboard } from './hooks/useClipboard/useClipboard.js';
+export { ClipboardStatus, UseClipboardOptions, UseClipboardReturn } from './hooks/useClipboard/useClipboard.types.js';
+export { UseClickOutsideOptions, useClickOutside } from './hooks/useClickOutside/useClickOutside.js';
+export { useHotkey } from './hooks/useHotkey/useHotkey.js';
+export { UseHotkeyOptions } from './hooks/useHotkey/useHotkey.types.js';
+export { useTheme } from './hooks/useTheme/useTheme.js';
+export { ResolvedThemeValues, ThemeVariant, UseThemeReturn } from './hooks/useTheme/useTheme.types.js';
 export { cx as cn, cx } from './utils/cx.js';
-export { animBlink, animFadeIn, animPulse, animSpin, blinkKeyframe, fadeInKeyframe, pulseKeyframe, spinKeyframe } from './utils/animations.css.js';
+export { Platform, getKeyGlyph, getPlatform, parseShortcut } from './utils/platform.js';
+export { animBlink, animFadeIn, animPulse, animSpin, animWave, blinkKeyframe, fadeInKeyframe, pulseKeyframe, spinKeyframe, waveKeyframe } from './utils/animations.css.js';
+export { isKeyPressed, isModifierKey } from './hooks/useKeyboard/utils.js';

package/dist/types/theme/contract.css.d.ts

@@ -14,151 +14,155 @@
  * All property names follow the pattern: etui-{category}-{path}
  * These names are part of the PUBLIC API — do not rename without
  * a major version bump.
+ *
+ * The structural data lives in `themeContractData.ts` so build-time
+ * tooling (token export, docs) can import the same shape without
+ * pulling in the Vanilla Extract runtime.
  */
 declare const vars: {
-    colors: {
-        background: {
-            primary: `var(--${string})`;
-            secondary: `var(--${string})`;
-            tertiary: `var(--${string})`;
-            elevated: `var(--${string})`;
-            inset: `var(--${string})`;
+    readonly colors: {
+        readonly background: {
+            readonly primary: `var(--${string})`;
+            readonly secondary: `var(--${string})`;
+            readonly tertiary: `var(--${string})`;
+            readonly elevated: `var(--${string})`;
+            readonly inset: `var(--${string})`;
         };
-        surface: {
-            default: `var(--${string})`;
-            hover: `var(--${string})`;
-            active: `var(--${string})`;
-            disabled: `var(--${string})`;
-            whiteOverlay: `var(--${string})`;
-            row: `var(--${string})`;
-            rowHover: `var(--${string})`;
+        readonly surface: {
+            readonly default: `var(--${string})`;
+            readonly hover: `var(--${string})`;
+            readonly active: `var(--${string})`;
+            readonly disabled: `var(--${string})`;
+            readonly whiteOverlay: `var(--${string})`;
+            readonly row: `var(--${string})`;
+            readonly rowHover: `var(--${string})`;
         };
-        border: {
-            default: `var(--${string})`;
-            focus: `var(--${string})`;
-            error: `var(--${string})`;
-            success: `var(--${string})`;
+        readonly border: {
+            readonly default: `var(--${string})`;
+            readonly focus: `var(--${string})`;
+            readonly error: `var(--${string})`;
+            readonly success: `var(--${string})`;
         };
-        text: {
-            primary: `var(--${string})`;
-            secondary: `var(--${string})`;
-            muted: `var(--${string})`;
-            disabled: `var(--${string})`;
+        readonly text: {
+            readonly primary: `var(--${string})`;
+            readonly secondary: `var(--${string})`;
+            readonly muted: `var(--${string})`;
+            readonly disabled: `var(--${string})`;
         };
-        accent: {
-            primary: `var(--${string})`;
-            secondary: `var(--${string})`;
-            success: `var(--${string})`;
-            warning: `var(--${string})`;
-            error: `var(--${string})`;
+        readonly accent: {
+            readonly primary: `var(--${string})`;
+            readonly secondary: `var(--${string})`;
+            readonly success: `var(--${string})`;
+            readonly warning: `var(--${string})`;
+            readonly error: `var(--${string})`;
         };
-        backdrop: `var(--${string})`;
+        readonly backdrop: `var(--${string})`;
     };
-    spacing: {
-        xs: `var(--${string})`;
-        sm: `var(--${string})`;
-        md: `var(--${string})`;
-        lg: `var(--${string})`;
-        xl: `var(--${string})`;
-        xxl: `var(--${string})`;
-        xxxl: `var(--${string})`;
+    readonly spacing: {
+        readonly xs: `var(--${string})`;
+        readonly sm: `var(--${string})`;
+        readonly md: `var(--${string})`;
+        readonly lg: `var(--${string})`;
+        readonly xl: `var(--${string})`;
+        readonly xxl: `var(--${string})`;
+        readonly xxxl: `var(--${string})`;
     };
-    typography: {
-        fontSize: {
-            xxs: `var(--${string})`;
-            xs: `var(--${string})`;
-            sm: `var(--${string})`;
-            md: `var(--${string})`;
-            lg: `var(--${string})`;
-            xl: `var(--${string})`;
+    readonly typography: {
+        readonly fontSize: {
+            readonly xxs: `var(--${string})`;
+            readonly xs: `var(--${string})`;
+            readonly sm: `var(--${string})`;
+            readonly md: `var(--${string})`;
+            readonly lg: `var(--${string})`;
+            readonly xl: `var(--${string})`;
         };
-        fontWeight: {
-            normal: `var(--${string})`;
-            medium: `var(--${string})`;
-            semibold: `var(--${string})`;
+        readonly fontWeight: {
+            readonly normal: `var(--${string})`;
+            readonly medium: `var(--${string})`;
+            readonly semibold: `var(--${string})`;
         };
-        lineHeight: {
-            tight: `var(--${string})`;
-            normal: `var(--${string})`;
-            relaxed: `var(--${string})`;
+        readonly lineHeight: {
+            readonly tight: `var(--${string})`;
+            readonly normal: `var(--${string})`;
+            readonly relaxed: `var(--${string})`;
         };
-        fontFamily: {
-            mono: `var(--${string})`;
-            sans: `var(--${string})`;
+        readonly fontFamily: {
+            readonly mono: `var(--${string})`;
+            readonly sans: `var(--${string})`;
         };
     };
-    borderRadius: {
-        none: `var(--${string})`;
-        sm: `var(--${string})`;
-        md: `var(--${string})`;
-        lg: `var(--${string})`;
+    readonly borderRadius: {
+        readonly none: `var(--${string})`;
+        readonly sm: `var(--${string})`;
+        readonly md: `var(--${string})`;
+        readonly lg: `var(--${string})`;
     };
-    shadows: {
-        sm: `var(--${string})`;
-        md: `var(--${string})`;
-        lg: `var(--${string})`;
-        xl: `var(--${string})`;
-        focus: `var(--${string})`;
-        separatorBottom: `var(--${string})`;
-        separatorRight: `var(--${string})`;
-        separatorLeft: `var(--${string})`;
-        thumb: `var(--${string})`;
+    readonly shadows: {
+        readonly sm: `var(--${string})`;
+        readonly md: `var(--${string})`;
+        readonly lg: `var(--${string})`;
+        readonly xl: `var(--${string})`;
+        readonly focus: `var(--${string})`;
+        readonly separatorBottom: `var(--${string})`;
+        readonly separatorRight: `var(--${string})`;
+        readonly separatorLeft: `var(--${string})`;
+        readonly thumb: `var(--${string})`;
     };
-    transitions: {
-        fast: `var(--${string})`;
-        normal: `var(--${string})`;
-        slow: `var(--${string})`;
+    readonly transitions: {
+        readonly fast: `var(--${string})`;
+        readonly normal: `var(--${string})`;
+        readonly slow: `var(--${string})`;
     };
-    zIndex: {
-        base: `var(--${string})`;
-        dropdown: `var(--${string})`;
-        popover: `var(--${string})`;
-        tooltip: `var(--${string})`;
-        modal: `var(--${string})`;
+    readonly zIndex: {
+        readonly base: `var(--${string})`;
+        readonly dropdown: `var(--${string})`;
+        readonly popover: `var(--${string})`;
+        readonly tooltip: `var(--${string})`;
+        readonly modal: `var(--${string})`;
     };
-    shell: {
-        menuBar: {
-            height: `var(--${string})`;
-            bg: `var(--${string})`;
-            hoverBg: `var(--${string})`;
-            activeBg: `var(--${string})`;
-            text: `var(--${string})`;
-            shortcutText: `var(--${string})`;
+    readonly shell: {
+        readonly menuBar: {
+            readonly height: `var(--${string})`;
+            readonly bg: `var(--${string})`;
+            readonly hoverBg: `var(--${string})`;
+            readonly activeBg: `var(--${string})`;
+            readonly text: `var(--${string})`;
+            readonly shortcutText: `var(--${string})`;
         };
-        toolbar: {
-            height: {
-                sm: `var(--${string})`;
-                md: `var(--${string})`;
+        readonly toolbar: {
+            readonly height: {
+                readonly sm: `var(--${string})`;
+                readonly md: `var(--${string})`;
             };
-            bg: `var(--${string})`;
-            separator: `var(--${string})`;
+            readonly bg: `var(--${string})`;
+            readonly separator: `var(--${string})`;
         };
-        statusBar: {
-            height: `var(--${string})`;
-            heightMd: `var(--${string})`;
-            bg: `var(--${string})`;
-            text: `var(--${string})`;
+        readonly statusBar: {
+            readonly height: `var(--${string})`;
+            readonly heightMd: `var(--${string})`;
+            readonly bg: `var(--${string})`;
+            readonly text: `var(--${string})`;
         };
-        dock: {
-            tabHeight: `var(--${string})`;
-            tabBg: `var(--${string})`;
-            tabActiveBg: `var(--${string})`;
-            tabHoverBg: `var(--${string})`;
-            tabText: `var(--${string})`;
-            tabActiveText: `var(--${string})`;
-            splitterSize: `var(--${string})`;
-            splitterColor: `var(--${string})`;
-            splitterHoverColor: `var(--${string})`;
-            borderBarBg: `var(--${string})`;
-            borderBarSize: `var(--${string})`;
-            dropOverlay: `var(--${string})`;
+        readonly dock: {
+            readonly tabHeight: `var(--${string})`;
+            readonly tabBg: `var(--${string})`;
+            readonly tabActiveBg: `var(--${string})`;
+            readonly tabHoverBg: `var(--${string})`;
+            readonly tabText: `var(--${string})`;
+            readonly tabActiveText: `var(--${string})`;
+            readonly splitterSize: `var(--${string})`;
+            readonly splitterColor: `var(--${string})`;
+            readonly splitterHoverColor: `var(--${string})`;
+            readonly borderBarBg: `var(--${string})`;
+            readonly borderBarSize: `var(--${string})`;
+            readonly dropOverlay: `var(--${string})`;
         };
     };
-    storybook: {
-        canvas: {
-            gradientStart: `var(--${string})`;
-            gradientMid: `var(--${string})`;
-            gradientEnd: `var(--${string})`;
+    readonly storybook: {
+        readonly canvas: {
+            readonly gradientStart: `var(--${string})`;
+            readonly gradientMid: `var(--${string})`;
+            readonly gradientEnd: `var(--${string})`;
         };
     };
 };

package/dist/types/theme/createCustomTheme.d.ts

@@ -1,5 +1,5 @@
 import { DeepPartial } from '../types/utilities.js';
-import { DarkThemeValues } from './darkTheme.css.js';
+import { DarkThemeValues } from './darkThemeValues.js';
 
 type ThemeValues = DarkThemeValues;
 /**

package/dist/types/theme/createLightTheme.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Returns the light-theme CSS class. Apply the returned class to any
+ * subtree (typically via `VanillaThemeProvider`) to flip its tokens
+ * from the dark default to the light preset.
+ *
+ * The class is generated at build time inside `lightTheme.css.ts` (where
+ * Vanilla Extract's file scope is set), so this helper is safe to call
+ * from any `.ts`/`.tsx` file — no `.css.ts` wrapper required. Consumers
+ * who prefer can also import `lightThemeClass` directly from the package.
+ *
+ * @example
+ * ```tsx
+ * import { createLightTheme, VanillaThemeProvider } from 'entangle-ui';
+ *
+ * const lightThemeClass = createLightTheme();
+ *
+ * <VanillaThemeProvider className={lightThemeClass}>
+ *   <SettingsPanel />
+ * </VanillaThemeProvider>
+ * ```
+ */
+declare function createLightTheme(): string;
+
+export { createLightTheme };

package/dist/types/theme/{darkTheme.css.d.ts → darkThemeValues.d.ts}

@@ -1,6 +1,10 @@
 /**
- * Dark theme values — exported separately so the createCustomTheme helper
- * can deep-merge consumer overrides onto these defaults.
+ * Dark theme values — pure data, no `@vanilla-extract/css` calls.
+ *
+ * Lives in a plain `.ts` module so build-time tooling (token export,
+ * docs generation) can import the values without booting the Vanilla
+ * Extract runtime. `darkTheme.css.ts` re-exports this object and is
+ * the file that actually applies the values to `:root`.
  */
 declare const darkThemeValues: {
     readonly colors: {

package/dist/types/theme/globalScrollbars.css.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Global scrollbar theming (opt-in).
+ *
+ * Emits scrollbar styling rules scoped under the `.etuiGlobalScrollbars`
+ * class. `ThemeProvider` (or consumers manually) can add this class to
+ * `document.body` via the `globalScrollbars` prop so that native
+ * scrollbars on overflowing elements blend with the dark editor theme.
+ *
+ * Scoped to a class (rather than `html`/`body`) so the default build
+ * of Entangle UI never forces scrollbar styling on hosts that embed
+ * the library alongside other UI frameworks.
+ */
+declare const GLOBAL_SCROLLBARS_CLASS = "etuiGlobalScrollbars";
+
+export { GLOBAL_SCROLLBARS_CLASS };

package/dist/types/theme/index.d.ts

@@ -0,0 +1,9 @@
+export { ThemeVars, vars } from './contract.css.js';
+export { DarkThemeValues, darkThemeValues } from './darkThemeValues.js';
+export { LightThemeValues, lightThemeValues } from './lightThemeValues.js';
+export { lightThemeClass } from './lightTheme.css.js';
+export { ThemeValues, createCustomTheme } from './createCustomTheme.js';
+export { createLightTheme } from './createLightTheme.js';
+export { VanillaThemeProvider, VanillaThemeProviderProps } from './VanillaThemeProvider.js';
+export { ThemeProvider, ThemeProviderProps } from './ThemeProvider.js';
+export { GLOBAL_SCROLLBARS_CLASS } from './globalScrollbars.css.js';

package/dist/types/theme/lightTheme.css.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Pre-generated light-theme class. The class is created at build time in
+ * this `.css.ts` module so Vanilla Extract's file scope is always set —
+ * importing or calling `createLightTheme()` from a regular `.ts` file
+ * is therefore safe. Apply this class to any subtree (typically via
+ * `VanillaThemeProvider`) to flip its tokens from the dark default to
+ * the light preset.
+ *
+ * The values themselves live in `lightThemeValues.ts` (a plain `.ts`
+ * module) so build-time tooling can import them without the Vanilla
+ * Extract runtime. We re-export both the value and the type here so
+ * existing `import ... from './lightTheme.css'` consumers keep working.
+ */
+
+declare const lightThemeClass: string;
+
+export { lightThemeClass };