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

package/dist/themes/fragments/semantic-colors.js

@@ -0,0 +1,68 @@
+import { colors } from "../../semantic-colors.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+var defaultSemanticColorTheme = stylex.createTheme(colors, {});
+var compactSemanticColorTheme = stylex.createTheme(colors, {
+	background: "light-dark(#ffffff, #111318)",
+	foreground: "light-dark(#18181b, #f4f4f5)",
+	surface: "light-dark(#fafafa, #18181b)",
+	surfaceForeground: "light-dark(#18181b, #f4f4f5)",
+	muted: "light-dark(#f4f4f5, #27272a)",
+	mutedForeground: "light-dark(#71717a, #a1a1aa)",
+	border: "light-dark(#e4e4e7, #3f3f46)",
+	primary: "light-dark(#6d28d9, #7c3aed)",
+	onPrimary: "#ffffff",
+	danger: "light-dark(#dc2626, #dc2626)",
+	focus: "light-dark(#7c3aed, #a78bfa)",
+	primaryHover: "light-dark(#5b21b6, #6d28d9)",
+	primaryActive: "light-dark(#4c1d95, #5b21b6)",
+	mutedHover: "light-dark(#e4e4e7, #3f3f46)",
+	mutedActive: "light-dark(#d4d4d8, #52525b)"
+});
+var warmSemanticColorTheme = stylex.createTheme(colors, {
+	background: "light-dark(#f7f2ea, #171411)",
+	foreground: "light-dark(#231f1a, #f5efe5)",
+	surface: "light-dark(#fffaf2, #211d18)",
+	surfaceForeground: "light-dark(#231f1a, #f5efe5)",
+	muted: "light-dark(#ece3d6, #2c261f)",
+	mutedForeground: "light-dark(#6f6254, #c4b6a4)",
+	border: "light-dark(#d8cab9, #4b4034)",
+	backdrop: "light-dark(rgba(23, 20, 17, 0.5), rgba(23, 20, 17, 0.7))",
+	primary: "light-dark(#7b4f2b, #d6a45f)",
+	onPrimary: "light-dark(#fffaf2, #1d1711)",
+	primaryHover: "light-dark(#684123, #e0b06e)",
+	primaryActive: "light-dark(#55341d, #c88f48)",
+	mutedHover: "light-dark(#e3d7c7, #382f27)",
+	mutedActive: "light-dark(#d7c6b2, #44382e)",
+	danger: "light-dark(#a33d31, #e26d61)",
+	onDanger: "light-dark(#fffaf2, #1d1711)",
+	dangerHover: "light-dark(#873129, #ef8378)",
+	dangerActive: "light-dark(#6f2823, #cf5d54)",
+	focus: "light-dark(#9f6a35, #e0b66f)"
+});
+var vividSemanticColorTheme = stylex.createTheme(colors, {
+	background: "light-dark(#f5f6fc, #0a0b16)",
+	foreground: "light-dark(#0b0c1d, #f5f6ff)",
+	surface: "light-dark(#ffffff, #141629)",
+	surfaceForeground: "light-dark(#0b0c1d, #f5f6ff)",
+	muted: "light-dark(#e8eaf6, #1f2240)",
+	mutedForeground: "light-dark(#4b5070, #aab0d6)",
+	border: "light-dark(#c5cae2, #373c64)",
+	backdrop: "light-dark(rgba(10, 11, 22, 0.5), rgba(10, 11, 22, 0.7))",
+	primary: "light-dark(#3d3dff, #8b8bff)",
+	onPrimary: "light-dark(#ffffff, #0a0b16)",
+	primaryHover: "light-dark(#2a2ae6, #a3a3ff)",
+	primaryActive: "light-dark(#1f1fbf, #7373f5)",
+	mutedHover: "light-dark(#dcdff0, #2a2e52)",
+	mutedActive: "light-dark(#cbd0e8, #363b66)",
+	danger: "light-dark(#e0183f, #ff5c7a)",
+	onDanger: "light-dark(#ffffff, #0a0b16)",
+	dangerHover: "light-dark(#c21036, #ff7a92)",
+	dangerActive: "light-dark(#9f0d2d, #f0405f)",
+	focus: "light-dark(#e3169a, #ff6fd0)"
+});
+var semanticColorThemes = {
+	default: defaultSemanticColorTheme,
+	warm: warmSemanticColorTheme,
+	vivid: vividSemanticColorTheme
+};
+export { compactSemanticColorTheme, defaultSemanticColorTheme, semanticColorThemes, vividSemanticColorTheme, warmSemanticColorTheme };

package/dist/themes/fragments/type-scale.d.ts

@@ -0,0 +1,36 @@
+import * as stylex from "@stylexjs/stylex";
+export type TypeScaleOption = "default" | "expanded";
+export declare const defaultTypeScaleTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+}>, symbol>, symbol>;
+export declare const expandedTypeScaleTheme: stylex.Theme<stylex.VarGroup<Readonly<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+}>, symbol>, symbol>;
+export declare const typeScaleThemes: {
+    readonly default: stylex.Theme<stylex.VarGroup<Readonly<{
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    }>, symbol>, symbol>;
+    readonly expanded: stylex.Theme<stylex.VarGroup<Readonly<{
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    }>, symbol>, symbol>;
+};

package/dist/themes/fragments/type-scale.js

@@ -0,0 +1,16 @@
+import { fontSizes } from "../../tokens.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+var defaultTypeScaleTheme = stylex.createTheme(fontSizes, {});
+var expandedTypeScaleTheme = stylex.createTheme(fontSizes, {
+	xs: "0.8125rem",
+	sm: "0.9375rem",
+	md: "1.0625rem",
+	lg: "1.25rem",
+	xl: "1.5rem",
+	"2xl": "2rem"
+});
+var typeScaleThemes = {
+	default: defaultTypeScaleTheme,
+	expanded: expandedTypeScaleTheme
+};
+export { defaultTypeScaleTheme, expandedTypeScaleTheme, typeScaleThemes };

package/dist/themes/nitro-theme.d.ts

@@ -0,0 +1,2 @@
+import type { MyUITheme } from "../theme-types";
+export declare const nitroTheme: MyUITheme;

package/dist/themes/nitro-theme.js

@@ -0,0 +1,3 @@
+import { composeTheme, themePresetOptions } from "./compose-theme.js";
+var nitroTheme = composeTheme(themePresetOptions.nitro);
+export { nitroTheme };

package/dist/token-types.d.ts

@@ -0,0 +1 @@
+export type SpacingKey = 1 | 2 | 3 | 4 | 5 | 6 | 8;

package/dist/tokens.stylex.d.ts

@@ -0,0 +1,59 @@
+import * as stylex from "@stylexjs/stylex";
+import type { VarGroup } from "@stylexjs/stylex";
+import type { SpacingKey } from "./token-types";
+export { colors } from "./semantic-colors.stylex";
+type RadiiTokens = {
+    base: string;
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+};
+type SpacingTokens = {
+    base: string;
+} & Record<SpacingKey, string>;
+export declare const radii: VarGroup<RadiiTokens>;
+export declare const typography: stylex.VarGroup<Readonly<{
+    fontFamily: string;
+}>, symbol>;
+export declare const spacing: VarGroup<SpacingTokens>;
+export declare const fontSizes: stylex.VarGroup<Readonly<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+}>, symbol>;
+export declare const fontWeights: {
+    regular: string;
+    medium: string;
+    semibold: string;
+    bold: string;
+};
+export declare const lineHeights: stylex.VarGroup<Readonly<{
+    tight: string;
+    normal: string;
+    relaxed: string;
+}>, symbol>;
+export declare const motion: stylex.VarGroup<Readonly<{
+    fast: string;
+    normal: string;
+    slow: string;
+    standard: string;
+}>, symbol>;
+export declare const elevation: stylex.VarGroup<Readonly<{
+    sm: string;
+    md: string;
+    lg: string;
+}>, symbol>;
+export declare const controlSizes: stylex.VarGroup<Readonly<{
+    sm: string;
+    md: string;
+    lg: string;
+}>, symbol>;
+export declare const borders: stylex.VarGroup<Readonly<{
+    control: string;
+    surface: string;
+    outline: string;
+}>, symbol>;

package/dist/tokens.stylex.js

@@ -0,0 +1,61 @@
+import { colors } from "./semantic-colors.stylex.js";
+import * as stylex from "@stylexjs/stylex";
+var radii = stylex.defineVars({
+	base: "0.5rem",
+	sm: () => `max(0px, calc(${radii.base} - 0.25rem))`,
+	md: () => radii.base,
+	lg: () => `calc(${radii.base} + 0.25rem)`,
+	full: "9999px"
+});
+var typography = stylex.defineVars({ fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif" });
+var spacing = stylex.defineVars({
+	base: "0.25rem",
+	1: () => spacing.base,
+	2: () => `calc(${spacing.base} * 2)`,
+	3: () => `calc(${spacing.base} * 3)`,
+	4: () => `calc(${spacing.base} * 4)`,
+	5: () => `calc(${spacing.base} * 5)`,
+	6: () => `calc(${spacing.base} * 6)`,
+	8: () => `calc(${spacing.base} * 8)`
+});
+var fontSizes = stylex.defineVars({
+	xs: "0.75rem",
+	sm: "0.875rem",
+	md: "1rem",
+	lg: "1.125rem",
+	xl: "1.25rem",
+	"2xl": "1.5rem"
+});
+var fontWeights = stylex.defineConsts({
+	regular: "400",
+	medium: "500",
+	semibold: "600",
+	bold: "700"
+});
+var lineHeights = stylex.defineVars({
+	tight: "1.25",
+	normal: "1.5",
+	relaxed: "1.625"
+});
+var motion = stylex.defineVars({
+	fast: "120ms",
+	normal: "180ms",
+	slow: "260ms",
+	standard: "cubic-bezier(0.2, 0, 0, 1)"
+});
+var elevation = stylex.defineVars({
+	sm: "0 6px 20px rgba(0, 0, 0, 0.18)",
+	md: "0 8px 24px rgba(0, 0, 0, 0.18)",
+	lg: "0 10px 30px rgba(0, 0, 0, 0.2)"
+});
+var controlSizes = stylex.defineVars({
+	sm: "2rem",
+	md: "2.5rem",
+	lg: "3rem"
+});
+var borders = stylex.defineVars({
+	control: "0px",
+	surface: "0px",
+	outline: "1px"
+});
+export { borders, colors, controlSizes, elevation, fontSizes, fontWeights, lineHeights, motion, radii, spacing, typography };

package/dist/tooltip.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { Tooltip as BaseUITooltip } from "@base-ui/react/tooltip";
+import type { StyleXStyles } from "@stylexjs/stylex";
+export type TooltipProviderProps = ComponentPropsWithoutRef<typeof BaseUITooltip.Provider>;
+export type TooltipProps = ComponentPropsWithoutRef<typeof BaseUITooltip.Root>;
+type NativeTooltipTriggerProps = Omit<ComponentPropsWithoutRef<typeof BaseUITooltip.Trigger>, "className" | "style">;
+export type TooltipTriggerProps = NativeTooltipTriggerProps & {
+    xstyle?: StyleXStyles;
+};
+type NativeTooltipContentProps = Omit<ComponentPropsWithoutRef<typeof BaseUITooltip.Popup>, "className" | "style">;
+type TooltipPositionerProps = ComponentPropsWithoutRef<typeof BaseUITooltip.Positioner>;
+export type TooltipContentProps = NativeTooltipContentProps & {
+    side?: TooltipPositionerProps["side"];
+    align?: TooltipPositionerProps["align"];
+    sideOffset?: TooltipPositionerProps["sideOffset"];
+    alignOffset?: TooltipPositionerProps["alignOffset"];
+    xstyle?: StyleXStyles;
+};
+export declare function TooltipProvider(props: TooltipProviderProps): import("react").JSX.Element;
+export declare function Tooltip(props: TooltipProps): import("react").JSX.Element;
+export declare function TooltipTrigger({ xstyle, ...props }: TooltipTriggerProps): import("react").JSX.Element;
+export declare function TooltipContent({ side, align, sideOffset, alignOffset, xstyle, children, ...props }: TooltipContentProps): import("react").JSX.Element;
+export {};

package/dist/tooltip.js

@@ -0,0 +1,89 @@
+import { colors } from "./semantic-colors.stylex.js";
+import { borders, elevation, fontSizes, 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 { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+var styles = stylex.create({
+	positioner: { pointerEvents: "none" },
+	popup: {
+		boxSizing: "border-box",
+		maxWidth: "20rem",
+		paddingBlock: spacing[1],
+		paddingInline: spacing[2],
+		borderWidth: borders.surface,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		borderRadius: radii.md,
+		backgroundColor: colors.surface,
+		color: colors.surfaceForeground,
+		fontFamily: typography.fontFamily,
+		fontSize: fontSizes.sm,
+		lineHeight: lineHeights.normal,
+		boxShadow: elevation.sm,
+		transformOrigin: "var(--transform-origin)",
+		transitionProperty: "opacity, transform",
+		transitionDuration: {
+			default: motion.fast,
+			"@media (prefers-reduced-motion: reduce)": "0ms"
+		},
+		transitionTimingFunction: motion.standard
+	},
+	visible: {
+		opacity: 1,
+		transform: "scale(1)"
+	},
+	hidden: {
+		opacity: 0,
+		transform: "scale(0.96)"
+	},
+	instant: { transitionDuration: "0ms" }
+});
+function isHidden(open, transitionStatus) {
+	return !open || transitionStatus === "starting" || transitionStatus === "ending";
+}
+function TooltipProvider(props) {
+	return jsx(Tooltip$1.Provider, { ...props });
+}
+function Tooltip(props) {
+	return jsx(PopupDirectionProvider, { children: jsx(TooltipRoot, { ...props }) });
+}
+function TooltipRoot({ onOpenChange, ...props }) {
+	const handleOpenChange = usePopupOpenChange(onOpenChange);
+	return jsx(Tooltip$1.Root, {
+		...props,
+		onOpenChange: handleOpenChange
+	});
+}
+function TooltipTrigger({ xstyle, ...props }) {
+	const anchorRef = usePopupAnchorRef();
+	return jsx(Tooltip$1.Trigger, {
+		...props,
+		ref: anchorRef,
+		...stylex.props(xstyle)
+	});
+}
+function TooltipContent({ side = "top", align = "center", sideOffset = 8, alignOffset = 0, xstyle, children, ...props }) {
+	const portalHost = useThemePortalHost();
+	const direction = usePopupDirection();
+	return jsxs(Tooltip$1.Portal, {
+		container: portalHost ?? void 0,
+		dir: direction,
+		children: [jsx(PopupDirectionSync, {}), jsx(Tooltip$1.Positioner, {
+			dir: direction,
+			side,
+			align,
+			sideOffset,
+			alignOffset,
+			...stylex.props(styles.positioner),
+			children: jsx(Tooltip$1.Popup, {
+				...props,
+				className: (state) => stylex.props(styles.popup, isHidden(state.open, state.transitionStatus) ? styles.hidden : styles.visible, state.instant && styles.instant, xstyle).className,
+				style: (state) => stylex.props(styles.popup, isHidden(state.open, state.transitionStatus) ? styles.hidden : styles.visible, state.instant && styles.instant, xstyle).style,
+				children
+			})
+		})]
+	});
+}
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@zicas/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-beta.0",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./semantic-colors.stylex": {
+      "types": "./dist/semantic-colors.stylex.d.ts",
+      "import": "./dist/semantic-colors.stylex.js",
+      "default": "./dist/semantic-colors.stylex.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite build --watch & tsc -p tsconfig.json --watch --preserveWatchOutput & wait",
+    "build": "vite build && tsc -p tsconfig.json",
+    "prepack": "pnpm run build"
+  },
+  "peerDependencies": {
+    "@stylexjs/stylex": "^0.19.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0"
+  },
+  "devDependencies": {
+    "@stylexjs/stylex": "^0.19.0",
+    "@types/react": "^19.2.18",
+    "react": "^19.2.8",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2"
+  }
+}