@zicas/ui 0.0.0-stage → 0.1.0-beta.0

package/dist/surface.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+type NativeSurfaceProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "className" | "style">;
+export type SurfaceProps = NativeSurfaceProps & {
+    children: ReactNode;
+    xstyle?: StyleXStyles;
+};
+export declare function Surface({ children, xstyle, ...props }: SurfaceProps): import("react").JSX.Element;
+export {};

package/dist/surface.js

@@ -0,0 +1,18 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { radii, spacing } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+var styles = stylex.create({ root: {
+	backgroundColor: colors.surface,
+	color: colors.surfaceForeground,
+	borderRadius: radii.md,
+	padding: spacing[4]
+} });
+function Surface({ children, xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.root, xstyle),
+		children
+	});
+}
+export { Surface };

package/dist/switch.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { Switch as BaseUISwitch } from "@base-ui/react/switch";
+import type { StyleXStyles } from "@stylexjs/stylex";
+type NativeSwitchProps = Omit<ComponentPropsWithoutRef<typeof BaseUISwitch.Root>, "children" | "className" | "style">;
+export type SwitchProps = NativeSwitchProps & {
+    xstyle?: StyleXStyles;
+};
+export declare function Switch({ xstyle, ...props }: SwitchProps): import("react").JSX.Element;
+export {};

package/dist/switch.js

@@ -0,0 +1,73 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, motion, radii } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+var styles = stylex.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		verticalAlign: "middle",
+		flexShrink: 0,
+		width: "2.75rem",
+		height: "1.5rem",
+		padding: "0.1875rem",
+		borderWidth: borders.control,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: radii.full,
+		cursor: "pointer",
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "2px",
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		},
+		transitionProperty: "background-color, opacity, outline-color",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	unchecked: {
+		justifyContent: "flex-start",
+		backgroundColor: {
+			default: colors.muted,
+			":hover": colors.mutedHover,
+			":active": colors.mutedActive
+		}
+	},
+	checked: {
+		justifyContent: "flex-end",
+		backgroundColor: {
+			default: colors.primary,
+			":hover": colors.primaryHover,
+			":active": colors.primaryActive
+		}
+	},
+	disabled: {
+		cursor: "not-allowed",
+		opacity: .5
+	},
+	thumb: {
+		display: "block",
+		width: "1.125rem",
+		height: "1.125rem",
+		borderRadius: radii.full,
+		backgroundColor: colors.onPrimary
+	}
+});
+function getRootStyles(checked, disabled, xstyle) {
+	return stylex.props(styles.root, checked ? styles.checked : styles.unchecked, disabled && styles.disabled, xstyle);
+}
+function Switch({ xstyle, ...props }) {
+	return jsx(Switch$1.Root, {
+		...props,
+		className: (state) => getRootStyles(state.checked, state.disabled, xstyle).className,
+		style: (state) => getRootStyles(state.checked, state.disabled, xstyle).style,
+		children: jsx(Switch$1.Thumb, { ...stylex.props(styles.thumb) })
+	});
+}
+export { Switch };

package/dist/table.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type TableProps = Omit<ComponentPropsWithoutRef<"table">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type TableCaptionProps = Omit<ComponentPropsWithoutRef<"caption">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type TableHeadProps = Omit<ComponentPropsWithoutRef<"thead">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type TableBodyProps = Omit<ComponentPropsWithoutRef<"tbody">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type TableFootProps = Omit<ComponentPropsWithoutRef<"tfoot">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type TableRowProps = Omit<ComponentPropsWithoutRef<"tr">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type TableHeaderProps = Omit<ComponentPropsWithoutRef<"th">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type TableCellProps = Omit<ComponentPropsWithoutRef<"td">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export declare function Table({ xstyle, ...props }: TableProps): import("react").JSX.Element;
+export declare function TableCaption({ xstyle, ...props }: TableCaptionProps): import("react").JSX.Element;
+export declare function TableHead({ xstyle, ...props }: TableHeadProps): import("react").JSX.Element;
+export declare function TableBody({ xstyle, ...props }: TableBodyProps): import("react").JSX.Element;
+export declare function TableFoot({ xstyle, ...props }: TableFootProps): import("react").JSX.Element;
+export declare function TableRow({ xstyle, ...props }: TableRowProps): import("react").JSX.Element;
+export declare function TableHeader({ xstyle, ...props }: TableHeaderProps): import("react").JSX.Element;
+export declare function TableCell({ xstyle, ...props }: TableCellProps): import("react").JSX.Element;

package/dist/table.js

@@ -0,0 +1,84 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { fontSizes, fontWeights, lineHeights, spacing, typography } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+var styles = stylex.create({
+	root: {
+		inlineSize: "100%",
+		borderCollapse: "collapse",
+		color: colors.foreground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal
+	},
+	caption: {
+		captionSide: "bottom",
+		paddingBlock: spacing[3],
+		paddingInline: spacing[3],
+		color: colors.mutedForeground,
+		textAlign: "start"
+	},
+	head: { color: colors.mutedForeground },
+	foot: { fontWeight: fontWeights.medium },
+	row: {
+		borderBlockEndWidth: "1px",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: colors.border
+	},
+	cell: {
+		paddingBlock: spacing[3],
+		paddingInline: spacing[3],
+		textAlign: "start",
+		verticalAlign: "middle"
+	},
+	header: { fontWeight: fontWeights.medium }
+});
+function Table({ xstyle, ...props }) {
+	return jsx("table", {
+		...props,
+		...stylex.props(styles.root, xstyle)
+	});
+}
+function TableCaption({ xstyle, ...props }) {
+	return jsx("caption", {
+		...props,
+		...stylex.props(styles.caption, xstyle)
+	});
+}
+function TableHead({ xstyle, ...props }) {
+	return jsx("thead", {
+		...props,
+		...stylex.props(styles.head, xstyle)
+	});
+}
+function TableBody({ xstyle, ...props }) {
+	return jsx("tbody", {
+		...props,
+		...stylex.props(xstyle)
+	});
+}
+function TableFoot({ xstyle, ...props }) {
+	return jsx("tfoot", {
+		...props,
+		...stylex.props(styles.foot, xstyle)
+	});
+}
+function TableRow({ xstyle, ...props }) {
+	return jsx("tr", {
+		...props,
+		...stylex.props(styles.row, xstyle)
+	});
+}
+function TableHeader({ xstyle, ...props }) {
+	return jsx("th", {
+		...props,
+		...stylex.props(styles.cell, styles.header, xstyle)
+	});
+}
+function TableCell({ xstyle, ...props }) {
+	return jsx("td", {
+		...props,
+		...stylex.props(styles.cell, xstyle)
+	});
+}
+export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRow };

package/dist/tabs.d.ts

@@ -0,0 +1,19 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { Tabs as BaseUITabs } from "@base-ui/react/tabs";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type TabsProps = Omit<ComponentPropsWithoutRef<typeof BaseUITabs.Root>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type TabsListProps = Omit<ComponentPropsWithoutRef<typeof BaseUITabs.List>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type TabsTabProps = Omit<ComponentPropsWithoutRef<typeof BaseUITabs.Tab>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type TabsPanelProps = Omit<ComponentPropsWithoutRef<typeof BaseUITabs.Panel>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export declare function Tabs({ orientation, xstyle, ...props }: TabsProps): import("react").JSX.Element;
+export declare function TabsList({ xstyle, ...props }: TabsListProps): import("react").JSX.Element;
+export declare function TabsTab({ xstyle, ...props }: TabsTabProps): import("react").JSX.Element;
+export declare function TabsPanel({ xstyle, ...props }: TabsPanelProps): import("react").JSX.Element;

package/dist/tabs.js

@@ -0,0 +1,115 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { controlSizes, fontSizes, fontWeights, lineHeights, radii, spacing, typography } from "./tokens.stylex.js";
+import { ElementDirectionProvider, useElementDirection } from "./direction.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+var styles = stylex.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[3],
+		minInlineSize: 0,
+		color: colors.foreground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal
+	},
+	verticalRoot: { flexDirection: "row" },
+	list: {
+		display: "flex",
+		flexDirection: "row",
+		alignSelf: "flex-start",
+		gap: spacing[1],
+		maxInlineSize: "100%",
+		padding: spacing[1],
+		borderRadius: radii.md,
+		backgroundColor: colors.muted,
+		overflowX: "auto"
+	},
+	verticalList: {
+		flexDirection: "column",
+		flexShrink: 0
+	},
+	tab: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0,
+		minBlockSize: controlSizes.sm,
+		paddingBlock: spacing[2],
+		paddingInline: spacing[3],
+		borderWidth: 0,
+		borderRadius: radii.sm,
+		fontFamily: "inherit",
+		fontSize: "inherit",
+		lineHeight: "inherit",
+		fontWeight: fontWeights.medium,
+		cursor: "pointer"
+	},
+	inactive: {
+		backgroundColor: {
+			default: "transparent",
+			":hover": colors.mutedHover
+		},
+		color: colors.foreground
+	},
+	active: {
+		backgroundColor: colors.primary,
+		color: colors.onPrimary
+	},
+	disabled: {
+		cursor: "not-allowed",
+		opacity: .5
+	},
+	panel: {
+		minInlineSize: 0,
+		flex: 1,
+		borderRadius: radii.sm
+	},
+	focus: {
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "2px",
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		}
+	}
+});
+function Tabs({ orientation = "horizontal", xstyle, ...props }) {
+	const [root, setRoot] = useState(null);
+	const [direction] = useElementDirection(root);
+	return jsx(ElementDirectionProvider, {
+		direction,
+		children: jsx(Tabs$1.Root, {
+			...props,
+			orientation,
+			ref: setRoot,
+			...stylex.props(styles.root, orientation === "vertical" && styles.verticalRoot, xstyle)
+		})
+	});
+}
+function TabsList({ xstyle, ...props }) {
+	return jsx(Tabs$1.List, {
+		...props,
+		className: (state) => stylex.props(styles.list, state.orientation === "vertical" && styles.verticalList, xstyle).className,
+		style: (state) => stylex.props(styles.list, state.orientation === "vertical" && styles.verticalList, xstyle).style
+	});
+}
+function TabsTab({ xstyle, ...props }) {
+	const getStyles = (state) => stylex.props(styles.tab, styles.focus, state.active ? styles.active : styles.inactive, state.disabled && styles.disabled, xstyle);
+	return jsx(Tabs$1.Tab, {
+		...props,
+		className: (state) => getStyles(state).className,
+		style: (state) => getStyles(state).style
+	});
+}
+function TabsPanel({ xstyle, ...props }) {
+	return jsx(Tabs$1.Panel, {
+		...props,
+		...stylex.props(styles.panel, styles.focus, xstyle)
+	});
+}
+export { Tabs, TabsList, TabsPanel, TabsTab };

package/dist/text.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode, ComponentPropsWithoutRef } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+type NativeTextProps = Omit<ComponentPropsWithoutRef<"span">, "children" | "className" | "style">;
+export type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type TextWeight = "regular" | "medium" | "semibold" | "bold";
+export type TextProps = NativeTextProps & {
+    children: ReactNode;
+    as?: "span" | "p";
+    size?: TextSize;
+    weight?: TextWeight;
+    xstyle?: StyleXStyles;
+};
+export declare function Text({ children, as: Component, size, weight, xstyle, ...props }: TextProps): import("react").JSX.Element;
+export {};

package/dist/text.js

@@ -0,0 +1,31 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { fontSizes, fontWeights, lineHeights } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+var styles = stylex.create({ base: {
+	color: colors.foreground,
+	lineHeight: lineHeights.normal,
+	margin: 0
+} });
+var sizeStyles = stylex.create({
+	xs: { fontSize: fontSizes.xs },
+	sm: { fontSize: fontSizes.sm },
+	md: { fontSize: fontSizes.md },
+	lg: { fontSize: fontSizes.lg },
+	xl: { fontSize: fontSizes.xl },
+	"2xl": { fontSize: fontSizes["2xl"] }
+});
+var weightStyles = stylex.create({
+	regular: { fontWeight: fontWeights.regular },
+	medium: { fontWeight: fontWeights.medium },
+	semibold: { fontWeight: fontWeights.semibold },
+	bold: { fontWeight: fontWeights.bold }
+});
+function Text({ children, as: Component = "span", size = "md", weight = "regular", xstyle, ...props }) {
+	return jsx(Component, {
+		...props,
+		...stylex.props(styles.base, sizeStyles[size], weightStyles[weight], xstyle),
+		children
+	});
+}
+export { Text };

package/dist/textarea.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+type NativeTextareaProps = Omit<ComponentPropsWithoutRef<"textarea">, "children" | "className" | "style">;
+export type TextareaProps = NativeTextareaProps & {
+    xstyle?: StyleXStyles;
+};
+export declare function Textarea({ xstyle, id, name, value, defaultValue, disabled, autoFocus, onChange, onFocus, onBlur, ...textareaProps }: TextareaProps): import("react").JSX.Element;
+export {};

package/dist/textarea.js

@@ -0,0 +1,70 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, fontSizes, lineHeights, motion, radii, spacing, typography } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+import { mergeProps } from "@base-ui/react/merge-props";
+var styles = stylex.create({ root: {
+	boxSizing: "border-box",
+	display: "block",
+	width: "100%",
+	minWidth: 0,
+	minHeight: "6rem",
+	paddingBlock: spacing[2],
+	paddingInline: spacing[3],
+	borderWidth: borders.control,
+	borderStyle: "solid",
+	borderColor: colors.border,
+	borderRadius: radii.md,
+	backgroundColor: colors.muted,
+	color: colors.foreground,
+	fontFamily: typography.fontFamily,
+	fontSize: fontSizes.md,
+	lineHeight: lineHeights.normal,
+	resize: "vertical",
+	outlineStyle: "solid",
+	outlineWidth: "2px",
+	outlineOffset: "2px",
+	outlineColor: {
+		default: "transparent",
+		":focus-visible": colors.focus
+	},
+	opacity: {
+		default: 1,
+		":disabled": .5
+	},
+	cursor: {
+		default: "text",
+		":disabled": "not-allowed"
+	},
+	transitionProperty: "background-color, color, opacity, outline-color",
+	transitionDuration: {
+		default: motion.fast,
+		"@media (prefers-reduced-motion: reduce)": "0ms"
+	},
+	transitionTimingFunction: motion.standard,
+	"::placeholder": {
+		color: colors.mutedForeground,
+		opacity: 1
+	}
+} });
+function Textarea({ xstyle, id, name, value, defaultValue, disabled, autoFocus, onChange, onFocus, onBlur, ...textareaProps }) {
+	const styleProps = stylex.props(styles.root, xstyle);
+	return jsx(Input, {
+		id,
+		name,
+		value,
+		defaultValue,
+		disabled,
+		autoFocus,
+		className: styleProps.className,
+		style: styleProps.style,
+		render: (baseProps) => jsx("textarea", { ...mergeProps(baseProps, {
+			...textareaProps,
+			onChange,
+			onFocus,
+			onBlur
+		}) })
+	});
+}
+export { Textarea };

package/dist/theme-root.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { MyUITheme } from "./theme-types";
+export type ThemeRootProps = {
+    children: ReactNode;
+    colorScheme: "light" | "dark";
+    theme?: MyUITheme;
+};
+export declare function useThemePortalHost(): HTMLDivElement | null;
+export declare function ThemeRoot({ children, colorScheme, theme }: ThemeRootProps): import("react").JSX.Element;

package/dist/theme-root.js

@@ -0,0 +1,61 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { typography } from "./tokens.stylex.js";
+import { ElementDirectionProvider, useElementDirection } from "./direction.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+var styles = stylex.create({
+	root: {
+		minHeight: "100svh",
+		backgroundColor: colors.background,
+		color: colors.foreground,
+		fontFamily: typography.fontFamily
+	},
+	light: { colorScheme: "light" },
+	dark: { colorScheme: "dark" },
+	portalHost: { display: "contents" },
+	colorScope: { display: "contents" }
+});
+var ThemePortalHostContext = createContext(null);
+var ThemeRootBoundaryContext = createContext(false);
+function useThemePortalHost() {
+	return useContext(ThemePortalHostContext);
+}
+function ThemeRoot({ children, colorScheme, theme }) {
+	const isNestedThemeRoot = useContext(ThemeRootBoundaryContext);
+	const [portalHost, setPortalHost] = useState(null);
+	const [root, setRoot] = useState(null);
+	const [direction] = useElementDirection(root);
+	useEffect(() => {
+		if (isNestedThemeRoot) return;
+		const root = document.documentElement;
+		const previousColorScheme = root.style.colorScheme;
+		root.style.colorScheme = colorScheme;
+		return () => {
+			root.style.colorScheme = previousColorScheme;
+		};
+	}, [colorScheme, isNestedThemeRoot]);
+	const hasColorOverrideScope = theme !== void 0 && Object.hasOwn(theme, "semanticColorOverrides");
+	const themedRoot = jsx("div", {
+		ref: setRoot,
+		...stylex.props(styles.root, !hasColorOverrideScope && theme?.colors, theme?.spacing, theme?.radii, theme?.typography, theme?.controlSizes, theme?.elevation, theme?.borders, theme?.fontSizes, theme?.lineHeights, theme?.motion, theme?.semanticColorOverrides, colorScheme === "light" ? styles.light : styles.dark),
+		children: jsx(ElementDirectionProvider, {
+			direction,
+			children: jsxs(ThemeRootBoundaryContext.Provider, {
+				value: true,
+				children: [jsx(ThemePortalHostContext.Provider, {
+					value: portalHost,
+					children
+				}), jsx("div", {
+					ref: setPortalHost,
+					...stylex.props(styles.portalHost)
+				})]
+			})
+		})
+	});
+	return hasColorOverrideScope ? jsx("div", {
+		...stylex.props(styles.colorScope, theme?.colors),
+		children: themedRoot
+	}) : themedRoot;
+}
+export { ThemeRoot, useThemePortalHost };

package/dist/theme-types.d.ts

@@ -0,0 +1,16 @@
+import type { StaticStyles, Theme } from "@stylexjs/stylex";
+import { colors, radii, spacing, typography, controlSizes, elevation, borders, fontSizes, lineHeights, motion } from "./tokens.stylex";
+export type SemanticColorOverrides = StaticStyles<Record<string, string>> & StaticStyles<Record<never, never>>;
+export type MyUITheme = {
+    colors?: Theme<typeof colors>;
+    semanticColorOverrides?: SemanticColorOverrides;
+    radii?: Theme<typeof radii>;
+    spacing?: Theme<typeof spacing>;
+    typography?: Theme<typeof typography>;
+    controlSizes?: Theme<typeof controlSizes>;
+    elevation?: Theme<typeof elevation>;
+    borders?: Theme<typeof borders>;
+    fontSizes?: Theme<typeof fontSizes>;
+    lineHeights?: Theme<typeof lineHeights>;
+    motion?: Theme<typeof motion>;
+};

package/dist/themes/atelier-theme.d.ts

@@ -0,0 +1,2 @@
+import type { MyUITheme } from "../theme-types";
+export declare const atelierTheme: MyUITheme;

package/dist/themes/atelier-theme.js

@@ -0,0 +1,3 @@
+import { composeTheme, themePresetOptions } from "./compose-theme.js";
+var atelierTheme = composeTheme(themePresetOptions.atelier);
+export { atelierTheme };

package/dist/themes/compact-theme.d.ts

@@ -0,0 +1,2 @@
+import type { MyUITheme } from "../theme-types";
+export declare const compactTheme: MyUITheme;

package/dist/themes/compact-theme.js

@@ -0,0 +1,3 @@
+import { composeTheme, themePresetOptions } from "./compose-theme.js";
+var compactTheme = composeTheme(themePresetOptions.compact);
+export { compactTheme };

package/dist/themes/compose-theme.d.ts

@@ -0,0 +1,27 @@
+import type { MyUITheme, SemanticColorOverrides } from "../theme-types";
+import { type BorderOption } from "./fragments/borders";
+import { type DensityOption } from "./fragments/density";
+import { type ElevationOption } from "./fragments/elevation";
+import { type FontFamilyOption } from "./fragments/font-family";
+import { type LineHeightOption } from "./fragments/line-height";
+import { type MotionOption } from "./fragments/motion";
+import { type RadiusOption } from "./fragments/radius";
+import { type SemanticColorOption } from "./fragments/semantic-colors";
+import { type TypeScaleOption } from "./fragments/type-scale";
+export type ThemeOptions = {
+    semanticColors: SemanticColorOption;
+    /** Static StyleX color-variable styles; omitted roles retain the preset.
+     * Consumers own on-color pair selection and contrast validation. */
+    semanticColorOverrides?: SemanticColorOverrides;
+    density: DensityOption;
+    radius: RadiusOption;
+    borders: BorderOption;
+    elevation: ElevationOption;
+    motion: MotionOption;
+    fontFamily: FontFamilyOption;
+    typeScale: TypeScaleOption;
+    lineHeight: LineHeightOption;
+};
+export type ThemePreset = "default" | "compact" | "atelier" | "nitro";
+export declare const themePresetOptions: Readonly<Record<ThemePreset, Readonly<ThemeOptions>>>;
+export declare function composeTheme(options: ThemeOptions): MyUITheme;