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

package/dist/button.js

@@ -0,0 +1,174 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, controlSizes, fontSizes, fontWeights, lineHeights, motion, radii, spacing, typography } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button as Button$1 } from "@base-ui/react/button";
+var spin = stylex.keyframes({
+	from: { transform: "rotate(0deg)" },
+	to: { transform: "rotate(360deg)" }
+});
+var styles = stylex.create({
+	root: {
+		position: "relative",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: spacing[2],
+		paddingBlock: spacing[2],
+		paddingInline: spacing[4],
+		borderWidth: borders.outline,
+		borderStyle: "solid",
+		borderColor: "transparent",
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.md,
+		fontWeight: fontWeights.semibold,
+		lineHeight: lineHeights.normal,
+		whiteSpace: "nowrap",
+		userSelect: "none",
+		cursor: {
+			default: "pointer",
+			":disabled": "not-allowed"
+		},
+		opacity: {
+			default: 1,
+			":disabled": .5
+		},
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		},
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "2px",
+		transitionProperty: "background-color, color, border-color, opacity",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	loading: { cursor: "wait" },
+	content: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: spacing[2],
+		opacity: 0
+	},
+	spinner: {
+		position: "absolute",
+		inset: 0,
+		margin: "auto",
+		boxSizing: "border-box",
+		width: "1em",
+		height: "1em",
+		borderRadius: radii.full,
+		borderWidth: "0.15em",
+		borderStyle: "solid",
+		borderColor: "currentColor",
+		borderBlockStartColor: "transparent",
+		animationName: spin,
+		animationDuration: {
+			default: "550ms",
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		animationTimingFunction: "linear",
+		animationIterationCount: "infinite"
+	}
+});
+var variantStyles = stylex.create({
+	primary: {
+		backgroundColor: {
+			default: colors.primary,
+			":hover": colors.primaryHover,
+			":active": colors.primaryActive
+		},
+		color: colors.onPrimary
+	},
+	secondary: {
+		backgroundColor: {
+			default: colors.muted,
+			":hover": colors.mutedHover,
+			":active": colors.mutedActive
+		},
+		color: colors.foreground
+	},
+	outline: {
+		backgroundColor: {
+			default: "transparent",
+			":hover": colors.muted,
+			":active": colors.mutedActive
+		},
+		color: colors.foreground,
+		borderColor: colors.border
+	},
+	danger: {
+		backgroundColor: {
+			default: colors.danger,
+			":hover": colors.dangerHover,
+			":active": colors.dangerActive
+		},
+		color: colors.onDanger
+	},
+	ghost: {
+		backgroundColor: {
+			default: "transparent",
+			":hover": colors.muted,
+			":active": colors.mutedActive
+		},
+		color: colors.foreground
+	},
+	link: {
+		backgroundColor: "transparent",
+		color: {
+			default: colors.primary,
+			":hover": colors.primaryHover,
+			":active": colors.primaryActive
+		},
+		borderColor: "transparent",
+		textDecoration: {
+			default: "none",
+			":hover": "underline"
+		}
+	}
+});
+var sizeStyles = stylex.create({
+	sm: {
+		minHeight: controlSizes.sm,
+		paddingBlock: spacing[1],
+		paddingInline: spacing[3],
+		fontSize: fontSizes.sm
+	},
+	md: {
+		minHeight: controlSizes.md,
+		paddingBlock: spacing[2],
+		paddingInline: spacing[4],
+		fontSize: fontSizes.md
+	},
+	lg: {
+		minHeight: controlSizes.lg,
+		paddingBlock: spacing[3],
+		paddingInline: spacing[5],
+		fontSize: fontSizes.lg
+	}
+});
+var shapeStyles = stylex.create({
+	default: { borderRadius: radii.md },
+	pill: { borderRadius: radii.full }
+});
+function Button({ children, xstyle, variant = "primary", size = "md", shape = "default", loading = false, disabled, focusableWhenDisabled, ...props }) {
+	return jsx(Button$1, {
+		...props,
+		disabled: disabled || loading,
+		focusableWhenDisabled: loading ? true : focusableWhenDisabled,
+		"aria-busy": loading || void 0,
+		...stylex.props(styles.root, variantStyles[variant], shapeStyles[shape], sizeStyles[size], loading && styles.loading, xstyle),
+		children: loading ? jsxs(Fragment, { children: [jsx("span", {
+			"aria-hidden": "true",
+			...stylex.props(styles.spinner)
+		}), jsx("span", {
+			...stylex.props(styles.content),
+			children
+		})] }) : children
+	});
+}
+export { Button };

package/dist/card.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+type NativeCardProps = Omit<ComponentPropsWithoutRef<"div">, "className" | "style">;
+export type CardProps = NativeCardProps & {
+    xstyle?: StyleXStyles;
+};
+export type CardHeaderProps = CardProps;
+export type CardContentProps = CardProps;
+export type CardFooterProps = CardProps;
+type NativeCardTitleProps = Omit<ComponentPropsWithoutRef<"div">, "className" | "style">;
+export type CardTitleProps = NativeCardTitleProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeCardDescriptionProps = Omit<ComponentPropsWithoutRef<"p">, "className" | "style">;
+export type CardDescriptionProps = NativeCardDescriptionProps & {
+    xstyle?: StyleXStyles;
+};
+export declare function Card({ xstyle, ...props }: CardProps): import("react").JSX.Element;
+export declare function CardHeader({ xstyle, ...props }: CardHeaderProps): import("react").JSX.Element;
+export declare function CardTitle({ xstyle, ...props }: CardTitleProps): import("react").JSX.Element;
+export declare function CardDescription({ xstyle, ...props }: CardDescriptionProps): import("react").JSX.Element;
+export declare function CardContent({ xstyle, ...props }: CardContentProps): import("react").JSX.Element;
+export declare function CardFooter({ xstyle, ...props }: CardFooterProps): import("react").JSX.Element;
+export {};

package/dist/card.js

@@ -0,0 +1,81 @@
+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";
+var styles = stylex.create({
+	card: {
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[4],
+		minWidth: 0,
+		padding: spacing[5],
+		borderRadius: radii.lg,
+		backgroundColor: colors.surface,
+		color: colors.surfaceForeground
+	},
+	header: {
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[1],
+		minWidth: 0
+	},
+	title: {
+		color: colors.surfaceForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.lg,
+		fontWeight: fontWeights.semibold,
+		lineHeight: lineHeights.tight
+	},
+	description: {
+		margin: 0,
+		color: colors.mutedForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal
+	},
+	content: { minWidth: 0 },
+	footer: {
+		display: "flex",
+		alignItems: "center",
+		gap: spacing[2],
+		flexWrap: "wrap",
+		minWidth: 0
+	}
+});
+function Card({ xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.card, xstyle)
+	});
+}
+function CardHeader({ xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.header, xstyle)
+	});
+}
+function CardTitle({ xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.title, xstyle)
+	});
+}
+function CardDescription({ xstyle, ...props }) {
+	return jsx("p", {
+		...props,
+		...stylex.props(styles.description, xstyle)
+	});
+}
+function CardContent({ xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.content, xstyle)
+	});
+}
+function CardFooter({ xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.footer, xstyle)
+	});
+}
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/checkbox.d.ts

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

package/dist/checkbox.js

@@ -0,0 +1,91 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, motion, radii, spacing } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+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.sm,
+		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
+		},
+		color: colors.onPrimary
+	},
+	disabled: {
+		cursor: "not-allowed",
+		opacity: .5
+	},
+	indicator: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "100%",
+		height: "100%"
+	},
+	icon: {
+		display: "block",
+		width: "0.875rem",
+		height: "0.875rem"
+	}
+});
+function getRootStyles(checked, disabled, xstyle) {
+	return stylex.props(styles.root, checked ? styles.checked : styles.unchecked, disabled && styles.disabled, xstyle);
+}
+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.icon),
+		children: jsx("path", { d: "m3 8 3 3 7-7" })
+	});
+}
+function Checkbox({ xstyle, ...props }) {
+	return jsx(Checkbox$1.Root, {
+		...props,
+		className: (state) => getRootStyles(state.checked, state.disabled, xstyle).className,
+		style: (state) => getRootStyles(state.checked, state.disabled, xstyle).style,
+		children: jsx(Checkbox$1.Indicator, {
+			...stylex.props(styles.indicator),
+			children: jsx(CheckIcon, {})
+		})
+	});
+}
+export { Checkbox };

package/dist/dialog.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Dialog as BaseUIDialog } from "@base-ui/react/dialog";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type DialogProps = ComponentPropsWithoutRef<typeof BaseUIDialog.Root>;
+type NativeDialogTriggerProps = Omit<ComponentPropsWithoutRef<typeof BaseUIDialog.Trigger>, "className" | "style">;
+export type DialogTriggerProps = NativeDialogTriggerProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeDialogContentProps = Omit<ComponentPropsWithoutRef<typeof BaseUIDialog.Popup>, "className" | "style">;
+export type DialogContentProps = NativeDialogContentProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeDialogHeaderProps = Omit<ComponentPropsWithoutRef<"div">, "className" | "style">;
+export type DialogHeaderProps = NativeDialogHeaderProps & {
+    children: ReactNode;
+    xstyle?: StyleXStyles;
+};
+export type DialogFooterProps = DialogHeaderProps;
+type NativeDialogTitleProps = Omit<ComponentPropsWithoutRef<typeof BaseUIDialog.Title>, "className" | "style">;
+export type DialogTitleProps = NativeDialogTitleProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeDialogDescriptionProps = Omit<ComponentPropsWithoutRef<typeof BaseUIDialog.Description>, "className" | "style">;
+export type DialogDescriptionProps = NativeDialogDescriptionProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeDialogCloseProps = Omit<ComponentPropsWithoutRef<typeof BaseUIDialog.Close>, "className" | "style">;
+export type DialogCloseProps = NativeDialogCloseProps & {
+    xstyle?: StyleXStyles;
+};
+export declare function Dialog(props: DialogProps): import("react").JSX.Element;
+export declare function DialogTrigger({ xstyle, ...props }: DialogTriggerProps): import("react").JSX.Element;
+export declare function DialogContent({ xstyle, children, ...props }: DialogContentProps): import("react").JSX.Element;
+export declare function DialogHeader({ xstyle, ...props }: DialogHeaderProps): import("react").JSX.Element;
+export declare function DialogFooter({ xstyle, ...props }: DialogFooterProps): import("react").JSX.Element;
+export declare function DialogTitle({ xstyle, ...props }: DialogTitleProps): import("react").JSX.Element;
+export declare function DialogDescription({ xstyle, ...props }: DialogDescriptionProps): import("react").JSX.Element;
+export declare function DialogClose({ xstyle, ...props }: DialogCloseProps): import("react").JSX.Element;
+export {};

package/dist/dialog.js

@@ -0,0 +1,195 @@
+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 { Dialog as Dialog$1 } from "@base-ui/react/dialog";
+var styles = stylex.create({
+	backdrop: {
+		position: "fixed",
+		inset: 0,
+		backgroundColor: colors.backdrop,
+		transitionProperty: "opacity",
+		transitionDuration: {
+			default: motion.normal,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	backdropVisible: { opacity: 1 },
+	backdropHidden: { opacity: 0 },
+	viewport: {
+		position: "fixed",
+		inset: 0,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		padding: spacing[4]
+	},
+	popup: {
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[3],
+		boxSizing: "border-box",
+		width: "100%",
+		maxWidth: "24rem",
+		borderWidth: borders.surface,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: radii.lg,
+		backgroundColor: colors.surface,
+		color: colors.surfaceForeground,
+		padding: spacing[6],
+		boxShadow: elevation.md,
+		transitionProperty: "opacity, transform",
+		transitionDuration: {
+			default: motion.normal,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	popupVisible: {
+		opacity: 1,
+		transform: "scale(1)"
+	},
+	popupHidden: {
+		opacity: 0,
+		transform: "scale(0.96)"
+	},
+	header: {
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[1],
+		minWidth: 0
+	},
+	footer: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		gap: spacing[2],
+		flexWrap: "wrap",
+		minWidth: 0
+	},
+	title: {
+		margin: 0,
+		color: colors.surfaceForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.lg,
+		fontWeight: fontWeights.bold,
+		lineHeight: lineHeights.tight
+	},
+	description: {
+		margin: 0,
+		color: colors.mutedForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal
+	},
+	close: {
+		borderWidth: borders.control,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: radii.md,
+		backgroundColor: {
+			default: colors.muted,
+			":hover": colors.mutedHover,
+			":active": colors.mutedActive
+		},
+		color: colors.foreground,
+		paddingBlock: spacing[2],
+		paddingInline: spacing[4],
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		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 Dialog(props) {
+	return jsx(PopupDirectionProvider, { children: jsx(DialogRoot, { ...props }) });
+}
+function DialogRoot({ onOpenChange, ...props }) {
+	const handleOpenChange = usePopupOpenChange(onOpenChange);
+	return jsx(Dialog$1.Root, {
+		...props,
+		onOpenChange: handleOpenChange
+	});
+}
+function DialogTrigger({ xstyle, ...props }) {
+	const anchorRef = usePopupAnchorRef();
+	return jsx(Dialog$1.Trigger, {
+		...props,
+		ref: anchorRef,
+		...stylex.props(xstyle)
+	});
+}
+function DialogContent({ xstyle, children, ...props }) {
+	const portalHost = useThemePortalHost();
+	const direction = usePopupDirection();
+	return jsxs(Dialog$1.Portal, {
+		container: portalHost ?? void 0,
+		children: [
+			jsx(PopupDirectionSync, {}),
+			jsx(Dialog$1.Backdrop, {
+				className: (state) => stylex.props(styles.backdrop, isPopupHidden(state.open, state.transitionStatus) ? styles.backdropHidden : styles.backdropVisible).className,
+				style: (state) => stylex.props(styles.backdrop, isPopupHidden(state.open, state.transitionStatus) ? styles.backdropHidden : styles.backdropVisible).style
+			}),
+			jsx(Dialog$1.Viewport, {
+				dir: direction,
+				...stylex.props(styles.viewport),
+				children: jsx(Dialog$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
+				})
+			})
+		]
+	});
+}
+function DialogHeader({ xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.header, xstyle)
+	});
+}
+function DialogFooter({ xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.footer, xstyle)
+	});
+}
+function DialogTitle({ xstyle, ...props }) {
+	return jsx(Dialog$1.Title, {
+		...props,
+		...stylex.props(styles.title, xstyle)
+	});
+}
+function DialogDescription({ xstyle, ...props }) {
+	return jsx(Dialog$1.Description, {
+		...props,
+		...stylex.props(styles.description, xstyle)
+	});
+}
+function DialogClose({ xstyle, ...props }) {
+	return jsx(Dialog$1.Close, {
+		...props,
+		...stylex.props(styles.close, xstyle)
+	});
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/direction.d.ts

@@ -0,0 +1,17 @@
+import { type Dispatch, type ReactNode, type SetStateAction } from "react";
+export type Direction = "ltr" | "rtl";
+export declare function useElementDirection(element: Element | null): readonly [Direction | undefined, (target?: Element | null) => void];
+export declare function ElementDirectionProvider({ direction, children, }: {
+    direction: Direction | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function PopupDirectionProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function usePopupAnchorRef(): Dispatch<SetStateAction<Element | null>>;
+export declare function usePopupDirection(): Direction | undefined;
+export declare function usePopupOpenChange<Details extends {
+    trigger: Element | undefined;
+    isCanceled: boolean;
+}>(onOpenChange: ((open: boolean, details: Details) => void) | undefined): (open: boolean, details: Details) => void;
+export declare function PopupDirectionSync(): null;