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

package/dist/radio.js

@@ -0,0 +1,93 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, motion, radii, spacing } 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 { Radio as Radio$1 } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
+var groupStyles = stylex.create({ root: {} });
+var styles = stylex.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0,
+		width: spacing[5],
+		height: spacing[5],
+		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, color, opacity, outline-color",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard,
+		verticalAlign: "middle"
+	},
+	unchecked: { backgroundColor: {
+		default: colors.muted,
+		":hover": colors.mutedHover,
+		":active": colors.mutedActive
+	} },
+	checked: { backgroundColor: {
+		default: colors.primary,
+		":hover": colors.primaryHover,
+		":active": colors.primaryActive
+	} },
+	disabled: {
+		cursor: "not-allowed",
+		opacity: .5
+	},
+	indicator: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "100%",
+		height: "100%"
+	},
+	dot: {
+		display: "block",
+		width: "0.5rem",
+		height: "0.5rem",
+		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 RadioGroup({ xstyle, ...props }) {
+	const [root, setRoot] = useState(null);
+	const [direction] = useElementDirection(root);
+	return jsx(ElementDirectionProvider, {
+		direction,
+		children: jsx(RadioGroup$1, {
+			...props,
+			ref: setRoot,
+			...stylex.props(groupStyles.root, xstyle)
+		})
+	});
+}
+function Radio({ xstyle, ...props }) {
+	return jsx(Radio$1.Root, {
+		...props,
+		className: (state) => getRootStyles(state.checked, state.disabled, xstyle).className,
+		style: (state) => getRootStyles(state.checked, state.disabled, xstyle).style,
+		children: jsx(Radio$1.Indicator, {
+			...stylex.props(styles.indicator),
+			children: jsx("span", { ...stylex.props(styles.dot) })
+		})
+	});
+}
+export { Radio, RadioGroup };

package/dist/scroll-area.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithoutRef } from "react";
+import { ScrollArea as BaseUIScrollArea } from "@base-ui/react/scroll-area";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type ScrollAreaScrollbars = "vertical" | "horizontal" | "both";
+export type ScrollAreaOverscroll = "auto" | "contain";
+export type ScrollAreaProps = Omit<ComponentPropsWithoutRef<typeof BaseUIScrollArea.Root>, "className" | "style"> & {
+    /**
+     * Which custom scrollbars to render. The viewport itself stays scrollable
+     * on both axes; this only decides which thumbs are drawn.
+     * @default "vertical"
+     */
+    scrollbars?: ScrollAreaScrollbars;
+    /**
+     * `overscroll-behavior` of the scrolling viewport. Use `contain` for
+     * panes that must not hand their scroll over to the page at the edges.
+     * @default "auto"
+     */
+    overscroll?: ScrollAreaOverscroll;
+    xstyle?: StyleXStyles;
+};
+export declare function ScrollArea({ scrollbars, overscroll, xstyle, children, ...props }: ScrollAreaProps): import("react").JSX.Element;

package/dist/scroll-area.js

@@ -0,0 +1,120 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { motion, radii } from "./tokens.stylex.js";
+import { ElementDirectionProvider, useElementDirection } from "./direction.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
+var thumbColor = `color-mix(in srgb, ${colors.mutedForeground} 55%, transparent)`;
+var thumbColorHover = `color-mix(in srgb, ${colors.mutedForeground} 80%, transparent)`;
+var thumbColorActive = colors.mutedForeground;
+var styles = stylex.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		minInlineSize: 0,
+		minBlockSize: 0,
+		maxInlineSize: "100%"
+	},
+	viewport: {
+		flexGrow: 1,
+		flexShrink: 1,
+		flexBasis: "auto",
+		minInlineSize: 0,
+		minBlockSize: 0,
+		borderRadius: "inherit",
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "-2px",
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		}
+	},
+	contain: { overscrollBehavior: "contain" },
+	scrollbar: {
+		display: "flex",
+		boxSizing: "border-box",
+		opacity: 0,
+		transitionProperty: "opacity",
+		transitionDuration: {
+			default: motion.normal,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	scrollbarVertical: {
+		inlineSize: "8px",
+		paddingInline: "1px",
+		paddingBlock: "2px"
+	},
+	scrollbarHorizontal: {
+		blockSize: "8px",
+		paddingBlock: "1px",
+		paddingInline: "2px"
+	},
+	scrollbarVisible: { opacity: 1 },
+	thumb: {
+		borderRadius: radii.full,
+		backgroundColor: {
+			default: thumbColor,
+			":hover": thumbColorHover,
+			":active": thumbColorActive
+		},
+		transitionProperty: "background-color",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	thumbVertical: { inlineSize: "100%" },
+	thumbHorizontal: { blockSize: "100%" }
+});
+function isFocusVisible(element) {
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return true;
+	}
+}
+function ScrollArea({ scrollbars = "vertical", overscroll = "auto", xstyle, children, ...props }) {
+	const [root, setRoot] = useState(null);
+	const [direction] = useElementDirection(root);
+	const [focusVisible, setFocusVisible] = useState(false);
+	const vertical = scrollbars !== "horizontal";
+	const horizontal = scrollbars !== "vertical";
+	const scrollbarStyles = (state) => stylex.props(styles.scrollbar, state.orientation === "vertical" ? styles.scrollbarVertical : styles.scrollbarHorizontal, (state.hovering || state.scrolling || focusVisible) && styles.scrollbarVisible);
+	const thumbStyles = (state) => stylex.props(styles.thumb, state.orientation === "vertical" ? styles.thumbVertical : styles.thumbHorizontal);
+	const renderScrollbar = (orientation) => jsx(ScrollArea$1.Scrollbar, {
+		orientation,
+		className: (state) => scrollbarStyles(state).className,
+		style: (state) => scrollbarStyles(state).style,
+		children: jsx(ScrollArea$1.Thumb, {
+			className: (state) => thumbStyles(state).className,
+			style: (state) => thumbStyles(state).style
+		})
+	});
+	return jsx(ElementDirectionProvider, {
+		direction,
+		children: jsxs(ScrollArea$1.Root, {
+			...props,
+			ref: setRoot,
+			...stylex.props(styles.root, xstyle),
+			children: [
+				jsx(ScrollArea$1.Viewport, {
+					onFocus: (event) => setFocusVisible(event.target === event.currentTarget && isFocusVisible(event.currentTarget)),
+					onBlur: (event) => {
+						if (event.target === event.currentTarget) setFocusVisible(false);
+					},
+					...stylex.props(styles.viewport, overscroll === "contain" && styles.contain),
+					children: jsx(ScrollArea$1.Content, { children })
+				}),
+				vertical && renderScrollbar("vertical"),
+				horizontal && renderScrollbar("horizontal"),
+				vertical && horizontal && jsx(ScrollArea$1.Corner, {})
+			]
+		})
+	});
+}
+export { ScrollArea };

package/dist/select.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Select as BaseUISelect } from "@base-ui/react/select";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type SelectProps = ComponentPropsWithoutRef<typeof BaseUISelect.Root>;
+type NativeSelectLabelProps = Omit<ComponentPropsWithoutRef<typeof BaseUISelect.Label>, "className" | "style">;
+export type SelectLabelProps = NativeSelectLabelProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeSelectTriggerProps = Omit<ComponentPropsWithoutRef<typeof BaseUISelect.Trigger>, "className" | "style">;
+export type SelectTriggerProps = NativeSelectTriggerProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeSelectValueProps = Omit<ComponentPropsWithoutRef<typeof BaseUISelect.Value>, "className" | "style">;
+export type SelectValueProps = NativeSelectValueProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeSelectContentProps = Omit<ComponentPropsWithoutRef<typeof BaseUISelect.Popup>, "className" | "style">;
+type SelectPositionerProps = ComponentPropsWithoutRef<typeof BaseUISelect.Positioner>;
+export type SelectContentProps = NativeSelectContentProps & {
+    side?: SelectPositionerProps["side"];
+    align?: SelectPositionerProps["align"];
+    sideOffset?: SelectPositionerProps["sideOffset"];
+    alignOffset?: SelectPositionerProps["alignOffset"];
+    xstyle?: StyleXStyles;
+};
+type NativeSelectItemProps = Omit<ComponentPropsWithoutRef<typeof BaseUISelect.Item>, "children" | "className" | "style">;
+export type SelectItemProps = NativeSelectItemProps & {
+    children: ReactNode;
+    xstyle?: StyleXStyles;
+};
+export declare function Select(props: SelectProps): import("react").JSX.Element;
+export declare function SelectLabel({ xstyle, ...props }: SelectLabelProps): import("react").JSX.Element;
+export declare function SelectTrigger({ xstyle, children, ...props }: SelectTriggerProps): import("react").JSX.Element;
+export declare function SelectValue({ xstyle, ...props }: SelectValueProps): import("react").JSX.Element;
+export declare function SelectContent({ side, align, sideOffset, alignOffset, xstyle, children, ...props }: SelectContentProps): import("react").JSX.Element;
+export declare function SelectItem({ xstyle, children, ...props }: SelectItemProps): import("react").JSX.Element;
+export {};

package/dist/select.js

@@ -0,0 +1,260 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, controlSizes, 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 { Select as Select$1 } from "@base-ui/react/select";
+var styles = stylex.create({
+	label: {
+		color: colors.foreground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		fontWeight: fontWeights.medium,
+		lineHeight: lineHeights.normal
+	},
+	trigger: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: spacing[2],
+		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: {
+			default: colors.muted,
+			":hover": colors.mutedHover,
+			":active": colors.mutedActive
+		},
+		color: colors.foreground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.md,
+		lineHeight: lineHeights.normal,
+		cursor: "pointer",
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "2px",
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		},
+		opacity: {
+			default: 1,
+			":disabled": .5
+		},
+		transitionProperty: "background-color, opacity, outline-color",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	value: {
+		minWidth: 0,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	},
+	icon: {
+		display: "flex",
+		flexShrink: 0,
+		alignItems: "center",
+		justifyContent: "center",
+		width: "1rem",
+		height: "1rem",
+		color: colors.mutedForeground,
+		transitionProperty: "transform",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	iconOpen: { transform: "rotate(180deg)" },
+	popup: {
+		boxSizing: "border-box",
+		minWidth: "var(--anchor-width)",
+		maxWidth: "min(22rem, var(--available-width))",
+		maxHeight: "min(20rem, var(--available-height))",
+		borderWidth: borders.surface,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: radii.lg,
+		backgroundColor: colors.surface,
+		color: colors.surfaceForeground,
+		boxShadow: elevation.md,
+		overflow: "auto",
+		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.98)"
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column"
+	},
+	item: {
+		display: "flex",
+		alignItems: "center",
+		gap: spacing[2],
+		minWidth: 0,
+		paddingBlock: spacing[2],
+		paddingInline: spacing[3],
+		borderRadius: radii.md,
+		color: colors.surfaceForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal,
+		cursor: "pointer",
+		outline: "none"
+	},
+	itemHighlighted: { backgroundColor: colors.mutedHover },
+	itemDisabled: {
+		cursor: "not-allowed",
+		opacity: .5
+	},
+	indicator: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0,
+		width: "1rem",
+		height: "1rem",
+		color: colors.primary
+	},
+	itemText: {
+		minWidth: 0,
+		flexGrow: 1
+	},
+	checkIcon: {
+		display: "block",
+		width: "0.875rem",
+		height: "0.875rem"
+	},
+	caretIcon: {
+		display: "block",
+		width: "1rem",
+		height: "1rem"
+	}
+});
+function isPopupHidden(open, transitionStatus) {
+	return !open || transitionStatus === "starting" || transitionStatus === "ending";
+}
+function CheckIcon() {
+	return jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...stylex.props(styles.checkIcon),
+		children: jsx("path", { d: "m3 8 3 3 7-7" })
+	});
+}
+function CaretIcon() {
+	return jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...stylex.props(styles.caretIcon),
+		children: jsx("path", { d: "m4 6 4 4 4-4" })
+	});
+}
+function Select(props) {
+	return jsx(PopupDirectionProvider, { children: jsx(SelectRoot, { ...props }) });
+}
+function SelectLabel({ xstyle, ...props }) {
+	return jsx(Select$1.Label, {
+		...props,
+		...stylex.props(styles.label, xstyle)
+	});
+}
+function SelectRoot({ onOpenChange, ...props }) {
+	const handleOpenChange = usePopupOpenChange(onOpenChange);
+	return jsx(Select$1.Root, {
+		...props,
+		onOpenChange: handleOpenChange
+	});
+}
+function SelectTrigger({ xstyle, children, ...props }) {
+	const anchorRef = usePopupAnchorRef();
+	return jsxs(Select$1.Trigger, {
+		...props,
+		ref: anchorRef,
+		...stylex.props(styles.trigger, xstyle),
+		children: [children, jsx(Select$1.Icon, {
+			className: (state) => stylex.props(styles.icon, state.open && styles.iconOpen).className,
+			style: (state) => stylex.props(styles.icon, state.open && styles.iconOpen).style,
+			children: jsx(CaretIcon, {})
+		})]
+	});
+}
+function SelectValue({ xstyle, ...props }) {
+	return jsx(Select$1.Value, {
+		...props,
+		...stylex.props(styles.value, xstyle)
+	});
+}
+function SelectContent({ side = "bottom", align = "start", sideOffset = 6, alignOffset = 0, xstyle, children, ...props }) {
+	const portalHost = useThemePortalHost();
+	const direction = usePopupDirection();
+	return jsxs(Select$1.Portal, {
+		container: portalHost ?? void 0,
+		children: [jsx(PopupDirectionSync, {}), jsx(Select$1.Positioner, {
+			dir: direction,
+			alignItemWithTrigger: false,
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			children: jsx(Select$1.Popup, {
+				...props,
+				className: (state) => stylex.props(styles.popup, isPopupHidden(state.open, state.transitionStatus) ? styles.popupHidden : styles.popupVisible, xstyle).className,
+				style: (state) => stylex.props(styles.popup, isPopupHidden(state.open, state.transitionStatus) ? styles.popupHidden : styles.popupVisible, xstyle).style,
+				children: jsx(Select$1.List, {
+					...stylex.props(styles.list),
+					children
+				})
+			})
+		})]
+	});
+}
+function SelectItem({ xstyle, children, ...props }) {
+	return jsxs(Select$1.Item, {
+		...props,
+		className: (state) => stylex.props(styles.item, state.highlighted && styles.itemHighlighted, state.disabled && styles.itemDisabled, xstyle).className,
+		style: (state) => stylex.props(styles.item, state.highlighted && styles.itemHighlighted, state.disabled && styles.itemDisabled, xstyle).style,
+		children: [jsx(Select$1.ItemIndicator, {
+			...stylex.props(styles.indicator),
+			children: jsx(CheckIcon, {})
+		}), jsx(Select$1.ItemText, {
+			...stylex.props(styles.itemText),
+			children
+		})]
+	});
+}
+export { Select, SelectContent, SelectItem, SelectLabel, SelectTrigger, SelectValue };

package/dist/semantic-colors.stylex.d.ts

@@ -0,0 +1,22 @@
+import * as stylex from "@stylexjs/stylex";
+export declare const colors: stylex.VarGroup<Readonly<{
+    background: string;
+    foreground: string;
+    surface: string;
+    surfaceForeground: string;
+    muted: string;
+    mutedForeground: string;
+    border: string;
+    backdrop: string;
+    primary: string;
+    onPrimary: string;
+    danger: string;
+    onDanger: string;
+    focus: string;
+    primaryHover: string;
+    primaryActive: string;
+    mutedHover: string;
+    mutedActive: string;
+    dangerHover: string;
+    dangerActive: string;
+}>, symbol>;

package/dist/semantic-colors.stylex.js

@@ -0,0 +1,23 @@
+import * as stylex from "@stylexjs/stylex";
+var colors = stylex.defineVars({
+	background: "light-dark(#ffffff, #111111)",
+	foreground: "light-dark(#181818, #f5f5f5)",
+	surface: "light-dark(#fafafa, #181818)",
+	surfaceForeground: "light-dark(#181818, #f5f5f5)",
+	muted: "light-dark(#f5f5f5, #262626)",
+	mutedForeground: "light-dark(#707070, #a3a3a3)",
+	border: "light-dark(#e5e5e5, #404040)",
+	backdrop: "light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7))",
+	primary: "light-dark(#171717, #fafafa)",
+	onPrimary: "light-dark(#ffffff, #171717)",
+	danger: "light-dark(#dc2626, #f87171)",
+	onDanger: "#ffffff",
+	focus: "light-dark(#525252, #d4d4d4)",
+	primaryHover: "light-dark(#262626, #e5e5e5)",
+	primaryActive: "light-dark(#404040, #d4d4d4)",
+	mutedHover: "light-dark(#e5e5e5, #404040)",
+	mutedActive: "light-dark(#d4d4d4, #525252)",
+	dangerHover: "light-dark(#b91c1c, #b91c1c)",
+	dangerActive: "light-dark(#991b1b, #991b1b)"
+});
+export { colors };

package/dist/separator.d.ts

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

package/dist/separator.js

@@ -0,0 +1,26 @@
+import { colors } from "./semantic-colors.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+var styles = stylex.create({
+	root: {
+		flexShrink: 0,
+		backgroundColor: colors.border
+	},
+	horizontal: {
+		width: "100%",
+		height: "1px"
+	},
+	vertical: {
+		width: "1px",
+		alignSelf: "stretch"
+	}
+});
+function Separator({ orientation = "horizontal", xstyle, ...props }) {
+	return jsx(Separator$1, {
+		...props,
+		orientation,
+		...stylex.props(styles.root, orientation === "horizontal" ? styles.horizontal : styles.vertical, xstyle)
+	});
+}
+export { Separator };

package/dist/skeleton.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type SkeletonProps = Omit<ComponentPropsWithoutRef<"div">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export declare function Skeleton({ xstyle, "aria-hidden": ariaHidden, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/skeleton.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: {
+	inlineSize: "100%",
+	blockSize: spacing[4],
+	borderRadius: radii.md,
+	backgroundColor: colors.muted
+} });
+function Skeleton({ xstyle, "aria-hidden": ariaHidden = true, ...props }) {
+	return jsx("div", {
+		...props,
+		"aria-hidden": ariaHidden,
+		...stylex.props(styles.root, xstyle)
+	});
+}
+export { Skeleton };

package/dist/stack.d.ts

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

package/dist/stack.js

@@ -0,0 +1,24 @@
+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: "column"
+} });
+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] }
+});
+function Stack({ children, gap = 4, xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.root, gapStyles[gap], xstyle),
+		children
+	});
+}
+export { Stack };