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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Zicas UI contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,77 @@
-# Temporary Holding Version
+# Zicas UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React components styled with StyleX, with Base UI accessibility behavior.
+## Install in a Vite React app
+
+React and React DOM (18 or newer) are peer dependencies. Install the package,
+StyleX, and the required StyleX build plugin:
+
+```sh
+npm install @zicas/ui @stylexjs/stylex@0.19.0
+npm install --save-dev @stylexjs/unplugin@0.19.0
+```
+
+> **Testing only:** before the public release is available, install a locally
+> packed tarball instead, for example
+> `npm install /path/to/zicas-ui-0.1.0-beta.0.tgz @stylexjs/stylex@0.19.0`.
+> Do not use local tarball paths in shared projects.
+
+The package ships ESM with uncompiled StyleX calls. The consumer must compile
+them; omitting the plugin causes `stylex.defineVars` to fail at runtime.
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import stylex from "@stylexjs/unplugin";
+
+export default defineConfig({
+  plugins: [
+    stylex.vite({ lightningcssOptions: { targets: {} } }),
+    react(),
+  ],
+});
+```
+
+Keep native `light-dark()` in StyleX's generated stylesheet with the explicit
+`targets: {}` option. Without it, the plugin resolves the app's Browserslist
+targets. Older targets can lower semantic color variables into fallback pairs
+that become invalid colors when inherited from `:root`. Vite's `build.cssTarget`
+alone does not control this separate plugin transform. This setup requires
+browsers with native `light-dark()` support; it does not provide legacy fallbacks.
+If you add another CSS transformer, ensure it also preserves `light-dark()`.
+The plugin automatically discovers `@zicas/ui` through its StyleX dependency;
+no private-source aliases or `externalPackages` option are needed.
+
+Add this link to `index.html` for the plugin's development and production CSS:
+
+```html
+<link rel="stylesheet" href="/assets/stylex.css" />
+```
+
+## Themes and direction
+
+```tsx
+import { Button, ThemeRoot, compactTheme, atelierTheme, nitroTheme } from "@zicas/ui";
+
+export function App() {
+  return (
+    <div dir="rtl">
+      <ThemeRoot colorScheme="light" theme={atelierTheme}>
+        <Button variant="primary">Continue</Button>
+      </ThemeRoot>
+    </div>
+  );
+}
+```
+
+`colorScheme` is required: use `"light"` or `"dark"`. Omit `theme` for Default,
+or pass `compactTheme`, `atelierTheme`, or `nitroTheme`. Changing either prop
+switches the existing theme scope, including library portals. Default primary
+uses a dark neutral background with white text in light mode, and a light
+neutral background with dark text in dark mode.
+
+Set native `dir="rtl"` on an ancestor for RTL; components use logical CSS
+properties and library popups inherit direction through the public components.
+
+Next.js integration is untested. MIT licensed; see [LICENSE](./LICENSE).

package/dist/accordion.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { Accordion as BaseUIAccordion } from "@base-ui/react/accordion";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type AccordionProps<Value = string> = Omit<BaseUIAccordion.Root.Props<Value>, "className" | "style" | "ref"> & {
+    xstyle?: StyleXStyles;
+};
+export type AccordionItemProps = Omit<ComponentPropsWithoutRef<typeof BaseUIAccordion.Item>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type AccordionHeaderProps = Omit<ComponentPropsWithoutRef<typeof BaseUIAccordion.Header>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type AccordionTriggerProps = Omit<ComponentPropsWithoutRef<typeof BaseUIAccordion.Trigger>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type AccordionPanelProps = Omit<ComponentPropsWithoutRef<typeof BaseUIAccordion.Panel>, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export declare function Accordion<Value = string>({ xstyle, ...props }: AccordionProps<Value>): import("react").JSX.Element;
+export declare function AccordionItem({ xstyle, ...props }: AccordionItemProps): import("react").JSX.Element;
+export declare function AccordionHeader({ xstyle, ...props }: AccordionHeaderProps): import("react").JSX.Element;
+export declare function AccordionTrigger({ xstyle, ...props }: AccordionTriggerProps): import("react").JSX.Element;
+export declare function AccordionPanel({ xstyle, ...props }: AccordionPanelProps): import("react").JSX.Element;

package/dist/accordion.js

@@ -0,0 +1,105 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { controlSizes, fontSizes, fontWeights, lineHeights, radii, spacing, typography } from "./tokens.stylex.js";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+var styles = stylex.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[2],
+		minInlineSize: 0,
+		color: colors.foreground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal
+	},
+	item: {
+		minInlineSize: 0,
+		backgroundColor: colors.surface,
+		borderRadius: radii.md
+	},
+	header: {
+		margin: 0,
+		fontSize: "inherit",
+		fontWeight: fontWeights.medium,
+		lineHeight: "inherit"
+	},
+	trigger: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: spacing[3],
+		inlineSize: "100%",
+		minBlockSize: controlSizes.md,
+		paddingBlock: spacing[3],
+		paddingInline: spacing[4],
+		borderWidth: 0,
+		borderRadius: radii.md,
+		color: "inherit",
+		fontFamily: "inherit",
+		fontSize: "inherit",
+		fontWeight: "inherit",
+		lineHeight: "inherit",
+		textAlign: "start",
+		cursor: "pointer",
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "2px",
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		}
+	},
+	closed: { backgroundColor: {
+		default: "transparent",
+		":hover": colors.mutedHover
+	} },
+	open: { backgroundColor: {
+		default: colors.muted,
+		":hover": colors.mutedHover
+	} },
+	disabled: {
+		cursor: "not-allowed",
+		opacity: .5
+	},
+	panel: {
+		minInlineSize: 0,
+		paddingInline: spacing[4],
+		paddingBlockStart: spacing[2],
+		paddingBlockEnd: spacing[4]
+	}
+});
+function Accordion({ xstyle, ...props }) {
+	return jsx(Accordion$1.Root, {
+		...props,
+		...stylex.props(styles.root, xstyle)
+	});
+}
+function AccordionItem({ xstyle, ...props }) {
+	return jsx(Accordion$1.Item, {
+		...props,
+		...stylex.props(styles.item, xstyle)
+	});
+}
+function AccordionHeader({ xstyle, ...props }) {
+	return jsx(Accordion$1.Header, {
+		...props,
+		...stylex.props(styles.header, xstyle)
+	});
+}
+function AccordionTrigger({ xstyle, ...props }) {
+	const getStyles = (state) => stylex.props(styles.trigger, state.open ? styles.open : styles.closed, (state.disabled || props.disabled) && styles.disabled, xstyle);
+	return jsx(Accordion$1.Trigger, {
+		...props,
+		className: (state) => getStyles(state).className,
+		style: (state) => getStyles(state).style
+	});
+}
+function AccordionPanel({ xstyle, ...props }) {
+	return jsx(Accordion$1.Panel, {
+		...props,
+		...stylex.props(styles.panel, xstyle)
+	});
+}
+export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger };

package/dist/alert.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type AlertVariant = "neutral" | "danger";
+export type AlertProps = Omit<ComponentPropsWithoutRef<"div">, "className" | "style"> & {
+    variant?: AlertVariant;
+    xstyle?: StyleXStyles;
+};
+export type AlertTitleProps = Omit<ComponentPropsWithoutRef<"div">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type AlertDescriptionProps = Omit<ComponentPropsWithoutRef<"p">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export declare function Alert({ variant, xstyle, ...props }: AlertProps): import("react").JSX.Element;
+export declare function AlertTitle({ xstyle, ...props }: AlertTitleProps): import("react").JSX.Element;
+export declare function AlertDescription({ xstyle, ...props }: AlertDescriptionProps): import("react").JSX.Element;

package/dist/alert.js

@@ -0,0 +1,50 @@
+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({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: spacing[1],
+		minInlineSize: 0,
+		paddingBlock: spacing[3],
+		paddingInline: spacing[4],
+		borderRadius: radii.md,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal,
+		overflowWrap: "anywhere"
+	},
+	title: { fontWeight: fontWeights.semibold },
+	description: { margin: 0 }
+});
+var variants = stylex.create({
+	neutral: {
+		backgroundColor: colors.muted,
+		color: colors.foreground
+	},
+	danger: {
+		backgroundColor: colors.danger,
+		color: colors.onDanger
+	}
+});
+function Alert({ variant = "neutral", xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.root, variants[variant], xstyle)
+	});
+}
+function AlertTitle({ xstyle, ...props }) {
+	return jsx("div", {
+		...props,
+		...stylex.props(styles.title, xstyle)
+	});
+}
+function AlertDescription({ xstyle, ...props }) {
+	return jsx("p", {
+		...props,
+		...stylex.props(styles.description, xstyle)
+	});
+}
+export { Alert, AlertDescription, AlertTitle };

package/dist/avatar.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Avatar as BaseUIAvatar } from "@base-ui/react/avatar";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type AvatarSize = "sm" | "md" | "lg";
+type NativeAvatarProps = Omit<ComponentPropsWithoutRef<typeof BaseUIAvatar.Root>, "children" | "className" | "style">;
+export type AvatarProps = NativeAvatarProps & {
+    src?: string;
+    alt: string;
+    fallback: ReactNode;
+    size?: AvatarSize;
+    xstyle?: StyleXStyles;
+};
+export declare function Avatar({ src, alt, fallback, size, xstyle, ...props }: AvatarProps): import("react").JSX.Element;
+export {};

package/dist/avatar.js

@@ -0,0 +1,53 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { fontSizes, fontWeights, radii } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+var styles = stylex.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		flexShrink: 0,
+		overflow: "hidden",
+		borderRadius: radii.full,
+		backgroundColor: colors.muted,
+		color: colors.mutedForeground,
+		fontWeight: fontWeights.medium,
+		userSelect: "none"
+	},
+	image: {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover"
+	}
+});
+var sizeStyles = stylex.create({
+	sm: {
+		width: "2rem",
+		height: "2rem",
+		fontSize: fontSizes.xs
+	},
+	md: {
+		width: "2.5rem",
+		height: "2.5rem",
+		fontSize: fontSizes.sm
+	},
+	lg: {
+		width: "3rem",
+		height: "3rem",
+		fontSize: fontSizes.md
+	}
+});
+function Avatar({ src, alt, fallback, size = "md", xstyle, ...props }) {
+	return jsxs(Avatar$1.Root, {
+		...props,
+		...stylex.props(styles.root, sizeStyles[size], xstyle),
+		children: [src ? jsx(Avatar$1.Image, {
+			src,
+			alt,
+			...stylex.props(styles.image)
+		}) : null, jsx(Avatar$1.Fallback, { children: fallback })]
+	});
+}
+export { Avatar };

package/dist/badge.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+type NativeBadgeProps = Omit<ComponentPropsWithoutRef<"span">, "children" | "className" | "style">;
+export type BadgeVariant = "neutral" | "primary" | "danger" | "outline";
+export type BadgeProps = NativeBadgeProps & {
+    children: ReactNode;
+    variant?: BadgeVariant;
+    xstyle?: StyleXStyles;
+};
+export declare function Badge({ children, variant, xstyle, ...props }: BadgeProps): import("react").JSX.Element;
+export {};

package/dist/badge.js

@@ -0,0 +1,46 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, fontSizes, fontWeights, lineHeights, radii, spacing } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+var styles = stylex.create({ root: {
+	display: "inline-flex",
+	alignItems: "center",
+	width: "fit-content",
+	paddingBlock: spacing[1],
+	paddingInline: spacing[2],
+	borderWidth: borders.outline,
+	borderStyle: "solid",
+	borderColor: "transparent",
+	borderRadius: radii.full,
+	fontSize: fontSizes.xs,
+	fontWeight: fontWeights.medium,
+	lineHeight: lineHeights.normal,
+	whiteSpace: "nowrap"
+} });
+var variantStyles = stylex.create({
+	neutral: {
+		backgroundColor: colors.muted,
+		color: colors.foreground
+	},
+	primary: {
+		backgroundColor: colors.primary,
+		color: colors.onPrimary
+	},
+	danger: {
+		backgroundColor: colors.danger,
+		color: colors.onDanger
+	},
+	outline: {
+		backgroundColor: "transparent",
+		color: colors.foreground,
+		borderColor: colors.border
+	}
+});
+function Badge({ children, variant = "neutral", xstyle, ...props }) {
+	return jsx("span", {
+		...props,
+		...stylex.props(styles.root, variantStyles[variant], xstyle),
+		children
+	});
+}
+export { Badge };

package/dist/breadcrumb.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithoutRef } from "react";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type BreadcrumbProps = Omit<ComponentPropsWithoutRef<"nav">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type BreadcrumbListProps = Omit<ComponentPropsWithoutRef<"ol">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type BreadcrumbItemProps = Omit<ComponentPropsWithoutRef<"li">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type BreadcrumbLinkProps = Omit<ComponentPropsWithoutRef<"a">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type BreadcrumbPageProps = Omit<ComponentPropsWithoutRef<"span">, "className" | "style"> & {
+    xstyle?: StyleXStyles;
+};
+export type BreadcrumbSeparatorProps = Omit<ComponentPropsWithoutRef<"span">, "className" | "style" | "aria-hidden"> & {
+    xstyle?: StyleXStyles;
+};
+export declare function Breadcrumb({ xstyle, ...props }: BreadcrumbProps): import("react").JSX.Element;
+export declare function BreadcrumbList({ xstyle, ...props }: BreadcrumbListProps): import("react").JSX.Element;
+export declare function BreadcrumbItem({ xstyle, ...props }: BreadcrumbItemProps): import("react").JSX.Element;
+export declare function BreadcrumbLink({ xstyle, ...props }: BreadcrumbLinkProps): import("react").JSX.Element;
+export declare function BreadcrumbPage({ xstyle, "aria-current": ariaCurrent, ...props }: BreadcrumbPageProps): import("react").JSX.Element;
+export declare function BreadcrumbSeparator({ children, xstyle, ...props }: BreadcrumbSeparatorProps): import("react").JSX.Element;

package/dist/breadcrumb.js

@@ -0,0 +1,92 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { fontSizes, lineHeights, spacing, typography } from "./tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+import { jsx } from "react/jsx-runtime";
+var styles = stylex.create({
+	root: {
+		minInlineSize: 0,
+		color: colors.mutedForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal
+	},
+	list: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: spacing[2],
+		listStyleType: "none",
+		margin: 0,
+		padding: 0
+	},
+	item: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: spacing[2],
+		minInlineSize: 0,
+		overflowWrap: "anywhere"
+	},
+	link: {
+		color: {
+			default: colors.mutedForeground,
+			":hover": colors.foreground
+		},
+		textDecorationLine: {
+			default: "none",
+			":hover": "underline"
+		},
+		outlineStyle: "solid",
+		outlineWidth: "2px",
+		outlineOffset: "2px",
+		outlineColor: {
+			default: "transparent",
+			":focus-visible": colors.focus
+		}
+	},
+	page: { color: colors.foreground },
+	separator: {
+		color: colors.mutedForeground,
+		flexShrink: 0
+	}
+});
+function Breadcrumb({ xstyle, ...props }) {
+	return jsx("nav", {
+		...props,
+		...stylex.props(styles.root, xstyle)
+	});
+}
+function BreadcrumbList({ xstyle, ...props }) {
+	return jsx("ol", {
+		role: "list",
+		...props,
+		...stylex.props(styles.list, xstyle)
+	});
+}
+function BreadcrumbItem({ xstyle, ...props }) {
+	return jsx("li", {
+		...props,
+		...stylex.props(styles.item, xstyle)
+	});
+}
+function BreadcrumbLink({ xstyle, ...props }) {
+	return jsx("a", {
+		...props,
+		...stylex.props(styles.link, xstyle)
+	});
+}
+function BreadcrumbPage({ xstyle, "aria-current": ariaCurrent = "page", ...props }) {
+	return jsx("span", {
+		...props,
+		"aria-current": ariaCurrent,
+		...stylex.props(styles.page, xstyle)
+	});
+}
+function BreadcrumbSeparator({ children = "/", xstyle, ...props }) {
+	return jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		...stylex.props(styles.separator, xstyle),
+		children
+	});
+}
+export { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/button.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Button as BaseUIButton } from "@base-ui/react/button";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type ButtonVariant = "primary" | "secondary" | "outline" | "danger" | "ghost" | "link";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonShape = "default" | "pill";
+type NativeButtonProps = Omit<ComponentPropsWithoutRef<typeof BaseUIButton>, "children" | "className" | "style">;
+export type ButtonProps = NativeButtonProps & {
+    children: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    loading?: boolean;
+    xstyle?: StyleXStyles;
+};
+export declare function Button({ children, xstyle, variant, size, shape, loading, disabled, focusableWhenDisabled, ...props }: ButtonProps): import("react").JSX.Element;
+export {};