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

package/dist/input.js

@@ -0,0 +1,54 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, controlSizes, fontSizes, lineHeights, motion, radii, spacing, typography } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+var styles = stylex.create({ root: {
+	boxSizing: "border-box",
+	width: "100%",
+	minWidth: 0,
+	minHeight: controlSizes.md,
+	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,
+	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, border-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 Input({ xstyle, ...props }) {
+	return jsx(Input$1, {
+		...props,
+		...stylex.props(styles.root, xstyle)
+	});
+}
+export { Input };

package/dist/navbar.d.ts

@@ -0,0 +1,44 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { NavigationMenu as BaseUINavigationMenu } from "@base-ui/react/navigation-menu";
+import type { StyleXStyles } from "@stylexjs/stylex";
+type NativeNavbarProps = Omit<ComponentPropsWithoutRef<"header">, "className" | "style">;
+export type NavbarProps = NativeNavbarProps & {
+    children: ReactNode;
+    xstyle?: StyleXStyles;
+};
+type NativeNavbarBrandProps = Omit<ComponentPropsWithoutRef<"div">, "className" | "style">;
+export type NavbarBrandProps = NativeNavbarBrandProps & {
+    children: ReactNode;
+    xstyle?: StyleXStyles;
+};
+export type NavbarActionsProps = NavbarBrandProps;
+type NativeNavbarMenuProps = Omit<ComponentPropsWithoutRef<typeof BaseUINavigationMenu.Root>, "className" | "style">;
+export type NavbarMenuProps = NativeNavbarMenuProps & {
+    children: ReactNode;
+    xstyle?: StyleXStyles;
+};
+type NativeNavbarItemProps = Omit<ComponentPropsWithoutRef<typeof BaseUINavigationMenu.Item>, "className" | "style">;
+export type NavbarItemProps = NativeNavbarItemProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeNavbarTriggerProps = Omit<ComponentPropsWithoutRef<typeof BaseUINavigationMenu.Trigger>, "className" | "style">;
+export type NavbarTriggerProps = NativeNavbarTriggerProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeNavbarContentProps = Omit<ComponentPropsWithoutRef<typeof BaseUINavigationMenu.Content>, "className" | "style">;
+export type NavbarContentProps = NativeNavbarContentProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeNavbarLinkProps = Omit<ComponentPropsWithoutRef<typeof BaseUINavigationMenu.Link>, "className" | "style">;
+export type NavbarLinkProps = NativeNavbarLinkProps & {
+    xstyle?: StyleXStyles;
+};
+export declare function Navbar({ children, xstyle, ...props }: NavbarProps): import("react").JSX.Element;
+export declare function NavbarBrand({ children, xstyle, ...props }: NavbarBrandProps): import("react").JSX.Element;
+export declare function NavbarActions({ children, xstyle, ...props }: NavbarActionsProps): import("react").JSX.Element;
+export declare function NavbarMenu({ children, xstyle, ...props }: NavbarMenuProps): import("react").JSX.Element;
+export declare function NavbarItem({ xstyle, ...props }: NavbarItemProps): import("react").JSX.Element;
+export declare function NavbarTrigger({ children, xstyle, ...props }: NavbarTriggerProps): import("react").JSX.Element;
+export declare function NavbarContent({ xstyle, ...props }: NavbarContentProps): import("react").JSX.Element;
+export declare function NavbarLink({ xstyle, ...props }: NavbarLinkProps): import("react").JSX.Element;
+export {};

package/dist/navbar.js

@@ -0,0 +1,258 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, elevation, fontSizes, fontWeights, lineHeights, motion, radii, spacing, typography } from "./tokens.stylex.js";
+import { ElementDirectionProvider, PopupDirectionProvider, PopupDirectionSync, useElementDirection, usePopupAnchorRef, usePopupDirection } from "./direction.js";
+import { useThemePortalHost } from "./theme-root.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { NavigationMenu } from "@base-ui/react/navigation-menu";
+var navbarStyles = stylex.create({
+	root: {
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "center",
+		gap: spacing[4],
+		width: "100%",
+		paddingInline: spacing[5],
+		paddingBlock: spacing[3],
+		backgroundColor: colors.background,
+		color: colors.foreground,
+		fontFamily: typography.fontFamily
+	},
+	brand: {
+		display: "flex",
+		alignItems: "center",
+		flexShrink: 0
+	},
+	actions: {
+		display: "flex",
+		alignItems: "center",
+		gap: spacing[2],
+		flexShrink: 0,
+		marginInlineStart: "auto"
+	}
+});
+var menuStyles = stylex.create({
+	root: {
+		display: "flex",
+		minWidth: 0
+	},
+	list: {
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "center",
+		gap: spacing[1],
+		margin: 0,
+		padding: 0,
+		listStyleType: "none"
+	},
+	positioner: {
+		boxSizing: "border-box",
+		zIndex: 50
+	},
+	popupBase: {
+		boxSizing: "border-box",
+		overflow: "hidden",
+		borderWidth: borders.surface,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: radii.md,
+		backgroundColor: colors.surface,
+		color: colors.surfaceForeground,
+		boxShadow: elevation.md,
+		transitionProperty: "opacity",
+		transitionDuration: {
+			default: motion.normal,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	popupVisible: { opacity: 1 },
+	popupHidden: { opacity: 0 },
+	viewport: { boxSizing: "border-box" },
+	content: {
+		boxSizing: "border-box",
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[2],
+		minWidth: "12rem",
+		padding: spacing[4]
+	}
+});
+var itemStyles = stylex.create({
+	interactive: {
+		boxSizing: "border-box",
+		display: "inline-flex",
+		alignItems: "center",
+		gap: spacing[1],
+		paddingInline: spacing[3],
+		paddingBlock: spacing[2],
+		borderWidth: borders.control,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: radii.md,
+		color: colors.foreground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		fontWeight: fontWeights.medium,
+		lineHeight: lineHeights.normal,
+		textDecoration: "none",
+		whiteSpace: "nowrap",
+		cursor: "pointer",
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "2px",
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		},
+		transitionProperty: "background-color, color, outline-color",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	inactive: { backgroundColor: {
+		default: "transparent",
+		":hover": colors.mutedHover
+	} },
+	active: { backgroundColor: colors.mutedActive },
+	caret: {
+		flexShrink: 0,
+		display: "inline-flex",
+		width: "0.75rem",
+		height: "0.75rem",
+		transitionProperty: "transform",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	caretOpen: { transform: "rotate(180deg)" },
+	caretIcon: {
+		display: "block",
+		width: "100%",
+		height: "100%"
+	}
+});
+function getItemStyles(active, xstyle) {
+	return stylex.props(itemStyles.interactive, active ? itemStyles.active : itemStyles.inactive, xstyle);
+}
+function getPopupStyles(open, transitionStatus) {
+	const hidden = !open || transitionStatus === "starting" || transitionStatus === "ending";
+	return stylex.props(menuStyles.popupBase, hidden ? menuStyles.popupHidden : menuStyles.popupVisible);
+}
+function CaretIcon() {
+	return jsx("svg", {
+		viewBox: "0 0 12 12",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...stylex.props(itemStyles.caretIcon),
+		children: jsx("path", { d: "m2.5 4.5 3.5 3.5 3.5-3.5" })
+	});
+}
+function Navbar({ children, xstyle, ...props }) {
+	return jsx("header", {
+		...props,
+		...stylex.props(navbarStyles.root, xstyle),
+		children
+	});
+}
+function NavbarBrand({ children, xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(navbarStyles.brand, xstyle),
+		children
+	});
+}
+function NavbarActions({ children, xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(navbarStyles.actions, xstyle),
+		children
+	});
+}
+function NavbarPopup() {
+	return jsx(NavigationMenu.Popup, {
+		className: (state) => getPopupStyles(state.open, state.transitionStatus).className,
+		style: (state) => getPopupStyles(state.open, state.transitionStatus).style,
+		children: jsx(NavigationMenu.Viewport, { ...stylex.props(menuStyles.viewport) })
+	});
+}
+function NavbarMenu({ children, xstyle, ...props }) {
+	return jsx(PopupDirectionProvider, { children: jsx(NavbarMenuRoot, {
+		...props,
+		xstyle,
+		children
+	}) });
+}
+function NavbarMenuRoot({ children, xstyle, ...props }) {
+	const portalHost = useThemePortalHost();
+	const [root, setRoot] = useState(null);
+	const [direction] = useElementDirection(root);
+	const popupDirection = usePopupDirection();
+	return jsx(ElementDirectionProvider, {
+		direction,
+		children: jsxs(NavigationMenu.Root, {
+			...props,
+			ref: setRoot,
+			...stylex.props(menuStyles.root, xstyle),
+			children: [jsx(NavigationMenu.List, {
+				...stylex.props(menuStyles.list),
+				children
+			}), jsxs(NavigationMenu.Portal, {
+				container: portalHost,
+				children: [jsx(PopupDirectionSync, {}), jsx(ElementDirectionProvider, {
+					direction: popupDirection,
+					children: jsx(NavigationMenu.Positioner, {
+						dir: popupDirection,
+						sideOffset: 8,
+						collisionPadding: 16,
+						...stylex.props(menuStyles.positioner),
+						children: jsx(NavbarPopup, {})
+					})
+				})]
+			})]
+		})
+	});
+}
+function NavbarItem({ xstyle, ...props }) {
+	return jsx(NavigationMenu.Item, {
+		...props,
+		...stylex.props(xstyle)
+	});
+}
+function NavbarTrigger({ children, xstyle, ...props }) {
+	const anchorRef = usePopupAnchorRef();
+	return jsxs(NavigationMenu.Trigger, {
+		...props,
+		ref: anchorRef,
+		className: (state) => getItemStyles(state.open, xstyle).className,
+		style: (state) => getItemStyles(state.open, xstyle).style,
+		children: [children, jsx(NavigationMenu.Icon, {
+			className: (state) => stylex.props(itemStyles.caret, state.open && itemStyles.caretOpen).className,
+			style: (state) => stylex.props(itemStyles.caret, state.open && itemStyles.caretOpen).style,
+			children: jsx(CaretIcon, {})
+		})]
+	});
+}
+function NavbarContent({ xstyle, ...props }) {
+	return jsx(NavigationMenu.Content, {
+		...props,
+		...stylex.props(menuStyles.content, xstyle)
+	});
+}
+function NavbarLink({ xstyle, ...props }) {
+	return jsx(NavigationMenu.Link, {
+		...props,
+		className: (state) => getItemStyles(state.active, xstyle).className,
+		style: (state) => getItemStyles(state.active, xstyle).style
+	});
+}
+export { Navbar, NavbarActions, NavbarBrand, NavbarContent, NavbarItem, NavbarLink, NavbarMenu, NavbarTrigger };

package/dist/popover.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { Popover as BaseUIPopover } from "@base-ui/react/popover";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type PopoverProps = ComponentPropsWithoutRef<typeof BaseUIPopover.Root>;
+type NativePopoverTriggerProps = Omit<ComponentPropsWithoutRef<typeof BaseUIPopover.Trigger>, "className" | "style">;
+export type PopoverTriggerProps = NativePopoverTriggerProps & {
+    xstyle?: StyleXStyles;
+};
+type NativePopoverContentProps = Omit<ComponentPropsWithoutRef<typeof BaseUIPopover.Popup>, "className" | "style">;
+type PopoverPositionerProps = ComponentPropsWithoutRef<typeof BaseUIPopover.Positioner>;
+export type PopoverContentProps = NativePopoverContentProps & {
+    side?: PopoverPositionerProps["side"];
+    align?: PopoverPositionerProps["align"];
+    sideOffset?: PopoverPositionerProps["sideOffset"];
+    alignOffset?: PopoverPositionerProps["alignOffset"];
+    xstyle?: StyleXStyles;
+};
+type NativePopoverTitleProps = Omit<ComponentPropsWithoutRef<typeof BaseUIPopover.Title>, "className" | "style">;
+export type PopoverTitleProps = NativePopoverTitleProps & {
+    xstyle?: StyleXStyles;
+};
+type NativePopoverDescriptionProps = Omit<ComponentPropsWithoutRef<typeof BaseUIPopover.Description>, "className" | "style">;
+export type PopoverDescriptionProps = NativePopoverDescriptionProps & {
+    xstyle?: StyleXStyles;
+};
+type NativePopoverCloseProps = Omit<ComponentPropsWithoutRef<typeof BaseUIPopover.Close>, "className" | "style">;
+export type PopoverCloseProps = NativePopoverCloseProps & {
+    xstyle?: StyleXStyles;
+};
+export declare function Popover(props: PopoverProps): import("react").JSX.Element;
+export declare function PopoverTrigger({ xstyle, ...props }: PopoverTriggerProps): import("react").JSX.Element;
+export declare function PopoverContent({ side, align, sideOffset, alignOffset, xstyle, children, ...props }: PopoverContentProps): import("react").JSX.Element;
+export declare function PopoverTitle({ xstyle, ...props }: PopoverTitleProps): import("react").JSX.Element;
+export declare function PopoverDescription({ xstyle, ...props }: PopoverDescriptionProps): import("react").JSX.Element;
+export declare function PopoverClose({ xstyle, ...props }: PopoverCloseProps): import("react").JSX.Element;
+export {};

package/dist/popover.js

@@ -0,0 +1,148 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, elevation, fontSizes, fontWeights, lineHeights, motion, radii, spacing, typography } from "./tokens.stylex.js";
+import { PopupDirectionProvider, PopupDirectionSync, usePopupAnchorRef, usePopupDirection, usePopupOpenChange } from "./direction.js";
+import { useThemePortalHost } from "./theme-root.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+var styles = stylex.create({
+	popup: {
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[3],
+		boxSizing: "border-box",
+		minWidth: "14rem",
+		maxWidth: "20rem",
+		padding: spacing[4],
+		borderWidth: borders.surface,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: radii.lg,
+		backgroundColor: colors.surface,
+		color: colors.surfaceForeground,
+		boxShadow: elevation.md,
+		transformOrigin: "var(--transform-origin)",
+		transitionProperty: "opacity, transform",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	popupVisible: {
+		opacity: 1,
+		transform: "scale(1)"
+	},
+	popupHidden: {
+		opacity: 0,
+		transform: "scale(0.96)"
+	},
+	popupInstant: { transitionDuration: "0ms" },
+	title: {
+		margin: 0,
+		color: colors.surfaceForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.md,
+		fontWeight: fontWeights.semibold,
+		lineHeight: lineHeights.tight
+	},
+	description: {
+		margin: 0,
+		color: colors.mutedForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal
+	},
+	close: {
+		alignSelf: "flex-start",
+		borderWidth: borders.control,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: radii.md,
+		paddingBlock: spacing[2],
+		paddingInline: spacing[3],
+		backgroundColor: {
+			default: colors.muted,
+			":hover": colors.mutedHover,
+			":active": colors.mutedActive
+		},
+		color: colors.foreground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal,
+		cursor: "pointer",
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "2px",
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		},
+		transitionProperty: "background-color, outline-color",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	}
+});
+function isPopupHidden(open, transitionStatus) {
+	return !open || transitionStatus === "starting" || transitionStatus === "ending";
+}
+function Popover(props) {
+	return jsx(PopupDirectionProvider, { children: jsx(PopoverRoot, { ...props }) });
+}
+function PopoverRoot({ onOpenChange, ...props }) {
+	const handleOpenChange = usePopupOpenChange(onOpenChange);
+	return jsx(Popover$1.Root, {
+		...props,
+		onOpenChange: handleOpenChange
+	});
+}
+function PopoverTrigger({ xstyle, ...props }) {
+	const anchorRef = usePopupAnchorRef();
+	return jsx(Popover$1.Trigger, {
+		...props,
+		ref: anchorRef,
+		...stylex.props(xstyle)
+	});
+}
+function PopoverContent({ side = "bottom", align = "center", sideOffset = 8, alignOffset = 0, xstyle, children, ...props }) {
+	const portalHost = useThemePortalHost();
+	const direction = usePopupDirection();
+	return jsxs(Popover$1.Portal, {
+		container: portalHost ?? void 0,
+		children: [jsx(PopupDirectionSync, {}), jsx(Popover$1.Positioner, {
+			dir: direction,
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			children: jsx(Popover$1.Popup, {
+				...props,
+				className: (state) => stylex.props(styles.popup, isPopupHidden(state.open, state.transitionStatus) ? styles.popupHidden : styles.popupVisible, state.instant && styles.popupInstant, xstyle).className,
+				style: (state) => stylex.props(styles.popup, isPopupHidden(state.open, state.transitionStatus) ? styles.popupHidden : styles.popupVisible, state.instant && styles.popupInstant, xstyle).style,
+				children
+			})
+		})]
+	});
+}
+function PopoverTitle({ xstyle, ...props }) {
+	return jsx(Popover$1.Title, {
+		...props,
+		...stylex.props(styles.title, xstyle)
+	});
+}
+function PopoverDescription({ xstyle, ...props }) {
+	return jsx(Popover$1.Description, {
+		...props,
+		...stylex.props(styles.description, xstyle)
+	});
+}
+function PopoverClose({ xstyle, ...props }) {
+	return jsx(Popover$1.Close, {
+		...props,
+		...stylex.props(styles.close, xstyle)
+	});
+}
+export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger };

package/dist/progress.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { Progress as BaseUIProgress } from "@base-ui/react/progress";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type ProgressProps = Omit<ComponentPropsWithoutRef<typeof BaseUIProgress.Root>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type ProgressLabelProps = Omit<ComponentPropsWithoutRef<typeof BaseUIProgress.Label>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type ProgressTrackProps = Omit<ComponentPropsWithoutRef<typeof BaseUIProgress.Track>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type ProgressIndicatorProps = Omit<ComponentPropsWithoutRef<typeof BaseUIProgress.Indicator>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type ProgressValueProps = Omit<ComponentPropsWithoutRef<typeof BaseUIProgress.Value>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export declare function Progress({ xstyle, ...props }: ProgressProps): import("react").JSX.Element;
+export declare function ProgressLabel({ xstyle, ...props }: ProgressLabelProps): import("react").JSX.Element;
+export declare function ProgressTrack({ xstyle, ...props }: ProgressTrackProps): import("react").JSX.Element;
+export declare function ProgressIndicator({ xstyle, ...props }: ProgressIndicatorProps): import("react").JSX.Element;
+export declare function ProgressValue({ xstyle, ...props }: ProgressValueProps): import("react").JSX.Element;

package/dist/progress.js

@@ -0,0 +1,67 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { fontSizes, fontWeights, lineHeights, radii, spacing, typography } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+import { Progress as Progress$1 } from "@base-ui/react/progress";
+var styles = stylex.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[2],
+		inlineSize: "100%",
+		minInlineSize: 0,
+		color: colors.foreground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal
+	},
+	label: { fontWeight: fontWeights.medium },
+	track: {
+		display: "flex",
+		inlineSize: "100%",
+		blockSize: spacing[2],
+		overflow: "hidden",
+		borderRadius: radii.full,
+		backgroundColor: colors.muted
+	},
+	indicator: {
+		flexShrink: 0,
+		blockSize: "100%",
+		borderRadius: radii.full,
+		backgroundColor: colors.primary
+	},
+	indeterminate: { inlineSize: "33.333%" },
+	value: { color: colors.mutedForeground }
+});
+function Progress({ xstyle, ...props }) {
+	return jsx(Progress$1.Root, {
+		...props,
+		...stylex.props(styles.root, xstyle)
+	});
+}
+function ProgressLabel({ xstyle, ...props }) {
+	return jsx(Progress$1.Label, {
+		...props,
+		...stylex.props(styles.label, xstyle)
+	});
+}
+function ProgressTrack({ xstyle, ...props }) {
+	return jsx(Progress$1.Track, {
+		...props,
+		...stylex.props(styles.track, xstyle)
+	});
+}
+function ProgressIndicator({ xstyle, ...props }) {
+	return jsx(Progress$1.Indicator, {
+		...props,
+		className: (state) => stylex.props(styles.indicator, state.status === "indeterminate" && styles.indeterminate, xstyle).className,
+		style: (state) => stylex.props(styles.indicator, state.status === "indeterminate" && styles.indeterminate, xstyle).style
+	});
+}
+function ProgressValue({ xstyle, ...props }) {
+	return jsx(Progress$1.Value, {
+		...props,
+		...stylex.props(styles.value, xstyle)
+	});
+}
+export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue };

package/dist/radio.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { Radio as BaseUIRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseUIRadioGroup } from "@base-ui/react/radio-group";
+import type { StyleXStyles } from "@stylexjs/stylex";
+type NativeRadioGroupProps = Omit<ComponentPropsWithoutRef<typeof BaseUIRadioGroup>, "className" | "style">;
+export type RadioGroupProps = NativeRadioGroupProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeRadioProps = Omit<ComponentPropsWithoutRef<typeof BaseUIRadio.Root>, "children" | "className" | "style">;
+export type RadioProps = NativeRadioProps & {
+    xstyle?: StyleXStyles;
+};
+export declare function RadioGroup({ xstyle, ...props }: RadioGroupProps): import("react").JSX.Element;
+export declare function Radio({ xstyle, ...props }: RadioProps): import("react").JSX.Element;
+export {};