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

package/dist/direction.js

@@ -0,0 +1,93 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useLayoutEffect, useState } from "react";
+import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
+function readDirection(element) {
+	return element.ownerDocument.defaultView?.getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr";
+}
+function useElementDirection(element) {
+	const [direction, setDirection] = useState();
+	const syncDirection = useCallback((target = element) => {
+		if (target) setDirection(readDirection(target));
+	}, [element]);
+	useLayoutEffect(() => {
+		if (!element) return;
+		syncDirection();
+		const observer = new MutationObserver(() => syncDirection());
+		for (let ancestor = element; ancestor; ancestor = ancestor.parentElement) observer.observe(ancestor, {
+			attributes: true,
+			attributeFilter: [
+				"dir",
+				"class",
+				"style"
+			]
+		});
+		return () => observer.disconnect();
+	}, [element, syncDirection]);
+	return [direction, syncDirection];
+}
+function ElementDirectionProvider({ direction, children }) {
+	const inheritedDirection = useDirection();
+	return jsx(DirectionProvider, {
+		direction: direction ?? inheritedDirection,
+		children
+	});
+}
+var PopupDirectionContext = createContext(null);
+function PopupDirectionProvider({ children }) {
+	const [anchor, setAnchor] = useState(null);
+	const [direction, syncDirection] = useElementDirection(anchor);
+	return jsx(PopupDirectionContext.Provider, {
+		value: {
+			direction,
+			setAnchor,
+			syncDirection
+		},
+		children: jsx(ElementDirectionProvider, {
+			direction,
+			children
+		})
+	});
+}
+function usePopupAnchorRef() {
+	const setAnchor = useContext(PopupDirectionContext)?.setAnchor;
+	const [element, setElement] = useState(null);
+	useLayoutEffect(() => {
+		if (!element || !setAnchor) return;
+		setAnchor((current) => current ?? element);
+		const syncActiveTrigger = () => {
+			if (element.getAttribute("aria-expanded") === "true" || element.hasAttribute("data-popup-open")) setAnchor(element);
+		};
+		syncActiveTrigger();
+		const observer = new MutationObserver(syncActiveTrigger);
+		observer.observe(element, {
+			attributes: true,
+			attributeFilter: ["aria-expanded", "data-popup-open"]
+		});
+		return () => {
+			observer.disconnect();
+			setAnchor((current) => current === element ? null : current);
+		};
+	}, [element, setAnchor]);
+	return setElement;
+}
+function usePopupDirection() {
+	return useContext(PopupDirectionContext)?.direction;
+}
+function usePopupOpenChange(onOpenChange) {
+	const context = useContext(PopupDirectionContext);
+	return (open, details) => {
+		onOpenChange?.(open, details);
+		if (open && !details.isCanceled && details.trigger) {
+			context?.syncDirection(details.trigger);
+			context?.setAnchor(details.trigger);
+		}
+	};
+}
+function PopupDirectionSync() {
+	const syncDirection = useContext(PopupDirectionContext)?.syncDirection;
+	useLayoutEffect(() => {
+		syncDirection?.();
+	}, [syncDirection]);
+	return null;
+}
+export { ElementDirectionProvider, PopupDirectionProvider, PopupDirectionSync, useElementDirection, usePopupAnchorRef, usePopupDirection, usePopupOpenChange };

package/dist/dropdown-menu.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { Menu as BaseUIMenu } from "@base-ui/react/menu";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type DropdownMenuProps = ComponentPropsWithoutRef<typeof BaseUIMenu.Root>;
+export type DropdownMenuTriggerProps = Omit<ComponentPropsWithoutRef<typeof BaseUIMenu.Trigger>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type DropdownMenuPortalProps = Omit<ComponentPropsWithoutRef<typeof BaseUIMenu.Portal>, "className" | "style" | "container"> & {
+    xstyle?: StyleXStyles;
+};
+type PositionerProps = ComponentPropsWithoutRef<typeof BaseUIMenu.Positioner>;
+export type DropdownMenuPopupProps = Omit<ComponentPropsWithoutRef<typeof BaseUIMenu.Popup>, "className" | "style"> & Pick<PositionerProps, "side" | "align" | "sideOffset" | "alignOffset"> & {
+    xstyle?: StyleXStyles;
+};
+export type DropdownMenuItemProps = Omit<ComponentPropsWithoutRef<typeof BaseUIMenu.Item>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type DropdownMenuLinkItemProps = Omit<ComponentPropsWithoutRef<typeof BaseUIMenu.LinkItem>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type DropdownMenuSeparatorProps = Omit<ComponentPropsWithoutRef<typeof BaseUIMenu.Separator>, "className" | "style" | "children"> & {
+    xstyle?: StyleXStyles;
+};
+export type DropdownMenuGroupProps = Omit<ComponentPropsWithoutRef<typeof BaseUIMenu.Group>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type DropdownMenuGroupLabelProps = Omit<ComponentPropsWithoutRef<typeof BaseUIMenu.GroupLabel>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export declare function DropdownMenu(props: DropdownMenuProps): import("react").JSX.Element;
+export declare function DropdownMenuTrigger({ xstyle, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
+export declare function DropdownMenuPortal({ xstyle, children, ...props }: DropdownMenuPortalProps): import("react").JSX.Element;
+export declare function DropdownMenuPopup({ side, align, sideOffset, alignOffset, xstyle, ...props }: DropdownMenuPopupProps): import("react").JSX.Element;
+export declare function DropdownMenuItem({ xstyle, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
+export declare function DropdownMenuLinkItem({ xstyle, ...props }: DropdownMenuLinkItemProps): import("react").JSX.Element;
+export declare function DropdownMenuSeparator({ orientation, xstyle, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
+export declare function DropdownMenuGroup({ xstyle, ...props }: DropdownMenuGroupProps): import("react").JSX.Element;
+export declare function DropdownMenuGroupLabel({ xstyle, ...props }: DropdownMenuGroupLabelProps): import("react").JSX.Element;
+export {};

package/dist/dropdown-menu.js

@@ -0,0 +1,189 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, controlSizes, elevation, fontSizes, fontWeights, lineHeights, 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 { Menu } from "@base-ui/react/menu";
+var styles = stylex.create({
+	trigger: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: spacing[2],
+		boxSizing: "border-box",
+		minHeight: controlSizes.md,
+		paddingBlock: spacing[2],
+		paddingInline: spacing[3],
+		borderWidth: 0,
+		borderRadius: radii.md,
+		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
+		}
+	},
+	disabled: {
+		opacity: .5,
+		cursor: "not-allowed"
+	},
+	popup: {
+		boxSizing: "border-box",
+		minInlineSize: "12rem",
+		maxInlineSize: "var(--available-width)",
+		maxBlockSize: "var(--available-height)",
+		overflow: "auto",
+		padding: spacing[1],
+		borderWidth: borders.surface,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: radii.lg,
+		backgroundColor: colors.surface,
+		color: colors.surfaceForeground,
+		boxShadow: elevation.md,
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "2px",
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		}
+	},
+	item: {
+		display: "flex",
+		alignItems: "center",
+		gap: spacing[2],
+		minInlineSize: 0,
+		paddingBlock: spacing[2],
+		paddingInline: spacing[3],
+		borderRadius: radii.md,
+		color: colors.surfaceForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal,
+		textDecoration: "none",
+		cursor: "pointer",
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "-2px",
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		}
+	},
+	highlighted: { backgroundColor: colors.mutedHover },
+	separator: {
+		blockSize: "1px",
+		backgroundColor: colors.border,
+		marginBlock: spacing[1]
+	},
+	separatorVertical: {
+		blockSize: "auto",
+		inlineSize: "1px",
+		alignSelf: "stretch"
+	},
+	group: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	groupLabel: {
+		paddingBlock: spacing[1],
+		paddingInline: spacing[3],
+		color: colors.mutedForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.xs,
+		fontWeight: fontWeights.medium,
+		lineHeight: lineHeights.normal
+	}
+});
+function DropdownMenu(props) {
+	return jsx(PopupDirectionProvider, { children: jsx(DropdownMenuRoot, { ...props }) });
+}
+function DropdownMenuRoot({ onOpenChange, ...props }) {
+	const handleOpenChange = usePopupOpenChange(onOpenChange);
+	return jsx(Menu.Root, {
+		...props,
+		onOpenChange: handleOpenChange
+	});
+}
+function DropdownMenuTrigger({ xstyle, ...props }) {
+	const anchorRef = usePopupAnchorRef();
+	return jsx(Menu.Trigger, {
+		...props,
+		ref: anchorRef,
+		className: (state) => stylex.props(styles.trigger, state.disabled && styles.disabled, xstyle).className,
+		style: (state) => stylex.props(styles.trigger, state.disabled && styles.disabled, xstyle).style
+	});
+}
+function DropdownMenuPortal({ xstyle, children, ...props }) {
+	const portalHost = useThemePortalHost();
+	const direction = usePopupDirection();
+	return jsxs(Menu.Portal, {
+		...props,
+		container: portalHost ?? void 0,
+		dir: direction ?? props.dir,
+		...stylex.props(xstyle),
+		children: [jsx(PopupDirectionSync, {}), children]
+	});
+}
+function DropdownMenuPopup({ side = "bottom", align = "start", sideOffset = 6, alignOffset = 0, xstyle, ...props }) {
+	const direction = usePopupDirection();
+	return jsx(Menu.Positioner, {
+		dir: direction,
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		children: jsx(Menu.Popup, {
+			...props,
+			dir: direction ?? props.dir,
+			...stylex.props(styles.popup, xstyle)
+		})
+	});
+}
+function DropdownMenuItem({ xstyle, ...props }) {
+	return jsx(Menu.Item, {
+		...props,
+		className: (state) => stylex.props(styles.item, state.highlighted && styles.highlighted, state.disabled && styles.disabled, xstyle).className,
+		style: (state) => stylex.props(styles.item, state.highlighted && styles.highlighted, state.disabled && styles.disabled, xstyle).style
+	});
+}
+function DropdownMenuLinkItem({ xstyle, ...props }) {
+	return jsx(Menu.LinkItem, {
+		...props,
+		className: (state) => stylex.props(styles.item, state.highlighted && styles.highlighted, xstyle).className,
+		style: (state) => stylex.props(styles.item, state.highlighted && styles.highlighted, xstyle).style
+	});
+}
+function DropdownMenuSeparator({ orientation = "horizontal", xstyle, ...props }) {
+	return jsx(Menu.Separator, {
+		...props,
+		orientation,
+		...stylex.props(styles.separator, orientation === "vertical" && styles.separatorVertical, xstyle)
+	});
+}
+function DropdownMenuGroup({ xstyle, ...props }) {
+	return jsx(Menu.Group, {
+		...props,
+		...stylex.props(styles.group, xstyle)
+	});
+}
+function DropdownMenuGroupLabel({ xstyle, ...props }) {
+	return jsx(Menu.GroupLabel, {
+		...props,
+		...stylex.props(styles.groupLabel, xstyle)
+	});
+}
+export { DropdownMenu, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger };

package/dist/field.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { Field as BaseUIField } from "@base-ui/react/field";
+import type { StyleXStyles } from "@stylexjs/stylex";
+type NativeFieldProps = Omit<ComponentPropsWithoutRef<typeof BaseUIField.Root>, "className" | "style">;
+export type FieldProps = NativeFieldProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeFieldLabelProps = Omit<ComponentPropsWithoutRef<typeof BaseUIField.Label>, "className" | "style">;
+export type FieldLabelProps = NativeFieldLabelProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeFieldDescriptionProps = Omit<ComponentPropsWithoutRef<typeof BaseUIField.Description>, "className" | "style">;
+export type FieldDescriptionProps = NativeFieldDescriptionProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeFieldErrorProps = Omit<ComponentPropsWithoutRef<typeof BaseUIField.Error>, "className" | "style">;
+export type FieldErrorProps = NativeFieldErrorProps & {
+    xstyle?: StyleXStyles;
+};
+export declare function Field({ xstyle, ...props }: FieldProps): import("react").JSX.Element;
+export declare function FieldLabel({ xstyle, ...props }: FieldLabelProps): import("react").JSX.Element;
+export declare function FieldDescription({ xstyle, ...props }: FieldDescriptionProps): import("react").JSX.Element;
+export declare function FieldError({ xstyle, ...props }: FieldErrorProps): import("react").JSX.Element;
+export {};

package/dist/field.js

@@ -0,0 +1,59 @@
+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";
+import { Field as Field$1 } from "@base-ui/react/field";
+var styles = stylex.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[2],
+		width: "100%"
+	},
+	label: {
+		color: colors.foreground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		fontWeight: fontWeights.medium,
+		lineHeight: lineHeights.normal
+	},
+	description: {
+		margin: 0,
+		color: colors.mutedForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal
+	},
+	error: {
+		margin: 0,
+		color: colors.danger,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal
+	}
+});
+function Field({ xstyle, ...props }) {
+	return jsx(Field$1.Root, {
+		...props,
+		...stylex.props(styles.root, xstyle)
+	});
+}
+function FieldLabel({ xstyle, ...props }) {
+	return jsx(Field$1.Label, {
+		...props,
+		...stylex.props(styles.label, xstyle)
+	});
+}
+function FieldDescription({ xstyle, ...props }) {
+	return jsx(Field$1.Description, {
+		...props,
+		...stylex.props(styles.description, xstyle)
+	});
+}
+function FieldError({ xstyle, ...props }) {
+	return jsx(Field$1.Error, {
+		...props,
+		...stylex.props(styles.error, xstyle)
+	});
+}
+export { Field, FieldDescription, FieldError, FieldLabel };

package/dist/icon-button.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+import { Button } from "./button";
+type NativeIconButtonProps = Omit<ComponentPropsWithoutRef<typeof Button>, "children" | "size" | "xstyle">;
+export type IconButtonSize = "sm" | "md" | "lg";
+export type IconButtonProps = NativeIconButtonProps & {
+    children: ReactElement<{
+        className?: string;
+    }>;
+    size?: IconButtonSize;
+    xstyle?: StyleXStyles;
+    "aria-label": string;
+};
+export declare function IconButton({ children, size, xstyle, ...props }: IconButtonProps): import("react").JSX.Element;
+export {};

package/dist/icon-button.js

@@ -0,0 +1,50 @@
+import { controlSizes } from "./tokens.stylex.js";
+import { Button } from "./button.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+var buttonSizeStyles = stylex.create({
+	sm: {
+		width: controlSizes.sm,
+		height: controlSizes.sm,
+		padding: 0
+	},
+	md: {
+		width: controlSizes.md,
+		height: controlSizes.md,
+		padding: 0
+	},
+	lg: {
+		width: controlSizes.lg,
+		height: controlSizes.lg,
+		padding: 0
+	}
+});
+var iconStyles = stylex.create({
+	sm: {
+		flexShrink: 0,
+		width: "1rem",
+		height: "1rem"
+	},
+	md: {
+		flexShrink: 0,
+		width: "1.25rem",
+		height: "1.25rem"
+	},
+	lg: {
+		flexShrink: 0,
+		width: "1.5rem",
+		height: "1.5rem"
+	}
+});
+function IconButton({ children, size = "md", xstyle, ...props }) {
+	const { className: iconClassName } = stylex.props(iconStyles[size]);
+	const icon = isValidElement(children) ? cloneElement(children, { className: [children.props.className, iconClassName].filter(Boolean).join(" ") }) : children;
+	return jsx(Button, {
+		...props,
+		size,
+		xstyle: [buttonSizeStyles[size], xstyle],
+		children: icon
+	});
+}
+export { IconButton };

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+export { ThemeRoot } from "./theme-root";
+export { Table, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableHeader, TableCell } from "./table";
+export type { TableProps, TableCaptionProps, TableHeadProps, TableBodyProps, TableFootProps, TableRowProps, TableHeaderProps, TableCellProps } from "./table";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuPopup, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuGroupLabel, } from "./dropdown-menu";
+export type { DropdownMenuProps, DropdownMenuTriggerProps, DropdownMenuPortalProps, DropdownMenuPopupProps, DropdownMenuItemProps, DropdownMenuLinkItemProps, DropdownMenuSeparatorProps, DropdownMenuGroupProps, DropdownMenuGroupLabelProps, } from "./dropdown-menu";
+export { Text } from "./text";
+export { Stack } from "./stack";
+export { Inline } from "./inline";
+export { Surface } from "./surface";
+export { Button } from "./button";
+export { IconButton } from "./icon-button";
+export { Badge } from "./badge";
+export { Alert, AlertTitle, AlertDescription } from "./alert";
+export { Progress, ProgressLabel, ProgressTrack, ProgressIndicator, ProgressValue, } from "./progress";
+export { Skeleton } from "./skeleton";
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, } from "./breadcrumb";
+export { Avatar } from "./avatar";
+export { Input } from "./input";
+export { Field, FieldLabel, FieldDescription, FieldError } from "./field";
+export { Checkbox } from "./checkbox";
+export { Switch } from "./switch";
+export { Radio, RadioGroup } from "./radio";
+export { Tabs, TabsList, TabsTab, TabsPanel } from "./tabs";
+export { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel } from "./accordion";
+export { Navbar, NavbarBrand, NavbarMenu, NavbarItem, NavbarTrigger, NavbarContent, NavbarLink, NavbarActions, } from "./navbar";
+export { Textarea } from "./textarea";
+export { Separator } from "./separator";
+export { ScrollArea } from "./scroll-area";
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, } from "./card";
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, } from "./dialog";
+export { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, } from "./tooltip";
+export { Popover, PopoverTrigger, PopoverContent, PopoverTitle, PopoverDescription, PopoverClose, } from "./popover";
+export { Select, SelectLabel, SelectTrigger, SelectValue, SelectContent, SelectItem, } from "./select";
+export { compactTheme } from "./themes/compact-theme";
+export type { ThemeRootProps } from "./theme-root";
+export type { TextProps, TextSize, TextWeight } from "./text";
+export type { StackProps } from "./stack";
+export type { InlineProps } from "./inline";
+export type { SurfaceProps } from "./surface";
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonShape, } from "./button";
+export type { IconButtonProps, IconButtonSize } from "./icon-button";
+export type { BadgeProps, BadgeVariant } from "./badge";
+export type { AlertProps, AlertTitleProps, AlertDescriptionProps, AlertVariant, } from "./alert";
+export type { ProgressProps, ProgressLabelProps, ProgressTrackProps, ProgressIndicatorProps, ProgressValueProps, } from "./progress";
+export type { SkeletonProps } from "./skeleton";
+export type { BreadcrumbProps, BreadcrumbListProps, BreadcrumbItemProps, BreadcrumbLinkProps, BreadcrumbPageProps, BreadcrumbSeparatorProps, } from "./breadcrumb";
+export type { AvatarProps, AvatarSize } from "./avatar";
+export type { InputProps } from "./input";
+export type { FieldProps, FieldLabelProps, FieldDescriptionProps, FieldErrorProps, } from "./field";
+export type { CheckboxProps } from "./checkbox";
+export type { SwitchProps } from "./switch";
+export type { RadioProps, RadioGroupProps } from "./radio";
+export type { TabsProps, TabsListProps, TabsTabProps, TabsPanelProps } from "./tabs";
+export type { AccordionProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionPanelProps } from "./accordion";
+export type { NavbarProps, NavbarBrandProps, NavbarMenuProps, NavbarItemProps, NavbarTriggerProps, NavbarContentProps, NavbarLinkProps, NavbarActionsProps, } from "./navbar";
+export type { TextareaProps } from "./textarea";
+export type { SeparatorProps } from "./separator";
+export type { ScrollAreaProps, ScrollAreaScrollbars, ScrollAreaOverscroll } from "./scroll-area";
+export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, } from "./card";
+export type { DialogProps, DialogTriggerProps, DialogContentProps, DialogHeaderProps, DialogTitleProps, DialogDescriptionProps, DialogFooterProps, DialogCloseProps, } from "./dialog";
+export { type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps, type TooltipContentProps, } from "./tooltip";
+export { type PopoverProps, type PopoverTriggerProps, type PopoverContentProps, type PopoverTitleProps, type PopoverDescriptionProps, type PopoverCloseProps, } from "./popover";
+export { type SelectProps, type SelectLabelProps, type SelectTriggerProps, type SelectValueProps, type SelectContentProps, type SelectItemProps, } from "./select";
+export { atelierTheme } from "./themes/atelier-theme";
+export { nitroTheme } from "./themes/nitro-theme";
+export { composeTheme, themePresetOptions } from "./themes/compose-theme";
+export type { ThemeOptions, ThemePreset } from "./themes/compose-theme";
+export type { SemanticColorOverrides } from "./theme-types";

package/dist/index.js

@@ -0,0 +1,36 @@
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger } from "./accordion.js";
+import { Alert, AlertDescription, AlertTitle } from "./alert.js";
+import { Avatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
+import { Button } from "./button.js";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+import { Checkbox } from "./checkbox.js";
+import { ThemeRoot } from "./theme-root.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
+import { DropdownMenu, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "./field.js";
+import { IconButton } from "./icon-button.js";
+import { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRow } from "./table.js";
+import { Text } from "./text.js";
+import { Stack } from "./stack.js";
+import { Inline } from "./inline.js";
+import { Surface } from "./surface.js";
+import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from "./progress.js";
+import { Skeleton } from "./skeleton.js";
+import { Input } from "./input.js";
+import { Switch } from "./switch.js";
+import { Radio, RadioGroup } from "./radio.js";
+import { Tabs, TabsList, TabsPanel, TabsTab } from "./tabs.js";
+import { Navbar, NavbarActions, NavbarBrand, NavbarContent, NavbarItem, NavbarLink, NavbarMenu, NavbarTrigger } from "./navbar.js";
+import { Textarea } from "./textarea.js";
+import { Separator } from "./separator.js";
+import { ScrollArea } from "./scroll-area.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./popover.js";
+import { Select, SelectContent, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "./select.js";
+import { composeTheme, themePresetOptions } from "./themes/compose-theme.js";
+import { compactTheme } from "./themes/compact-theme.js";
+import { atelierTheme } from "./themes/atelier-theme.js";
+import { nitroTheme } from "./themes/nitro-theme.js";
+export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, Badge, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, Field, FieldDescription, FieldError, FieldLabel, IconButton, Inline, Input, Navbar, NavbarActions, NavbarBrand, NavbarContent, NavbarItem, NavbarLink, NavbarMenu, NavbarTrigger, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Radio, RadioGroup, ScrollArea, Select, SelectContent, SelectItem, SelectLabel, SelectTrigger, SelectValue, Separator, Skeleton, Stack, Surface, Switch, Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Text, Textarea, ThemeRoot, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, atelierTheme, compactTheme, composeTheme, nitroTheme, themePresetOptions };

package/dist/inline.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+import type { SpacingKey } from "./token-types";
+type NativeInlineProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "className" | "style">;
+export type InlineProps = NativeInlineProps & {
+    children: ReactNode;
+    gap?: SpacingKey;
+    wrap?: boolean;
+    xstyle?: StyleXStyles;
+};
+export declare function Inline({ children, gap, wrap, xstyle, ...props }: InlineProps): import("react").JSX.Element;
+export {};

package/dist/inline.js

@@ -0,0 +1,25 @@
+import { spacing } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+var styles = stylex.create({ root: {
+	display: "flex",
+	flexDirection: "row"
+} });
+var gapStyles = stylex.create({
+	1: { gap: spacing[1] },
+	2: { gap: spacing[2] },
+	3: { gap: spacing[3] },
+	4: { gap: spacing[4] },
+	5: { gap: spacing[5] },
+	6: { gap: spacing[6] },
+	8: { gap: spacing[8] }
+});
+var wrapStyles = stylex.create({ wrap: { flexWrap: "wrap" } });
+function Inline({ children, gap = 2, wrap = false, xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.root, gapStyles[gap], wrap && wrapStyles.wrap, xstyle),
+		children
+	});
+}
+export { Inline };

package/dist/input.d.ts

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