strata-ui-react 0.1.10 → 0.1.12

package/dist/button.types.js

@@ -0,0 +1,519 @@
+import { cva } from "class-variance-authority";
+const buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-full select-none transition-all disabled:pointer-events-none disabled:opacity-50 cursor-pointer", {
+	variants: {
+		tone: {
+			destructive: "",
+			glass: "",
+			neutral: "",
+			primary: "",
+			secondary: "",
+			success: "",
+			accent: "",
+			warning: ""
+		},
+		style: {
+			solid: "",
+			outline: "active:border-transparent",
+			ghost: ""
+		},
+		size: {
+			large: "h-2xl px-lg style-text-default-1 gap-xs [&>svg]:size-md",
+			medium: "h-xl px-md style-text-default-0 gap-2xs [&>svg]:size-sm",
+			small: "h-lg px-sm style-text-default--1 gap-3xs [&>svg]:size-xs",
+			iconLarge: "size-2xl p-0 [&>svg]:size-md",
+			iconMedium: "size-xl p-0 [&>svg]:size-sm",
+			iconSmall: "size-lg p-0 [&>svg]:size-xs"
+		}
+	},
+	defaultVariants: {
+		tone: "primary",
+		style: "solid",
+		size: "medium"
+	},
+	compoundVariants: [
+		{
+			tone: "primary",
+			style: "solid",
+			className: "bg-primary text-on-primary"
+		},
+		{
+			tone: "primary",
+			style: "solid",
+			size: ["small", "iconSmall"],
+			className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "primary",
+			style: "solid",
+			size: ["medium", "iconMedium"],
+			className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "primary",
+			style: "solid",
+			size: ["large", "iconLarge"],
+			className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "primary",
+			style: "outline",
+			className: "border-primary text-primary hover:text-on-primary-container hover:bg-primary-container active:bg-transparent"
+		},
+		{
+			tone: "primary",
+			style: "outline",
+			size: ["small", "iconSmall"],
+			className: "border-1"
+		},
+		{
+			tone: "primary",
+			style: "outline",
+			size: ["medium", "iconMedium"],
+			className: "border-2"
+		},
+		{
+			tone: "primary",
+			style: "outline",
+			size: ["large", "iconLarge"],
+			className: "border-4"
+		},
+		{
+			tone: "primary",
+			style: "ghost",
+			className: "text-primary hover:surface-bright active:bg-surface-dim"
+		},
+		{
+			tone: "primary",
+			style: "ghost",
+			size: ["small", "iconSmall"],
+			className: "hover:raised-1 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "primary",
+			style: "ghost",
+			size: ["medium", "iconMedium"],
+			className: "hover:raised-2 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "primary",
+			style: "ghost",
+			size: ["large", "iconLarge"],
+			className: "hover:raised-4 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "secondary",
+			style: "solid",
+			className: "bg-secondary text-on-secondary"
+		},
+		{
+			tone: "secondary",
+			style: "solid",
+			size: ["small", "iconSmall"],
+			className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "secondary",
+			style: "solid",
+			size: ["medium", "iconMedium"],
+			className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "secondary",
+			style: "solid",
+			size: ["large", "iconLarge"],
+			className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "secondary",
+			style: "outline",
+			className: "border-secondary text-secondary hover:text-on-secondary-container hover:bg-secondary-container active:bg-transparent"
+		},
+		{
+			tone: "secondary",
+			style: "outline",
+			size: ["small", "iconSmall"],
+			className: "border-1"
+		},
+		{
+			tone: "secondary",
+			style: "outline",
+			size: ["medium", "iconMedium"],
+			className: "border-2"
+		},
+		{
+			tone: "secondary",
+			style: "outline",
+			size: ["large", "iconLarge"],
+			className: "border-4"
+		},
+		{
+			tone: "secondary",
+			style: "ghost",
+			className: "text-secondary hover:surface-bright active:bg-surface-dim"
+		},
+		{
+			tone: "secondary",
+			style: "ghost",
+			size: ["small", "iconSmall"],
+			className: "hover:raised-1 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "secondary",
+			style: "ghost",
+			size: ["medium", "iconMedium"],
+			className: "hover:raised-2 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "secondary",
+			style: "ghost",
+			size: ["large", "iconLarge"],
+			className: "hover:raised-4 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "accent",
+			style: "solid",
+			className: "bg-accent text-on-accent"
+		},
+		{
+			tone: "accent",
+			style: "solid",
+			size: ["small", "iconSmall"],
+			className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "accent",
+			style: "solid",
+			size: ["medium", "iconMedium"],
+			className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "accent",
+			style: "solid",
+			size: ["large", "iconLarge"],
+			className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "accent",
+			style: "outline",
+			className: "border-accent text-accent hover:text-on-accent-container hover:bg-accent-container active:bg-transparent"
+		},
+		{
+			tone: "accent",
+			style: "outline",
+			size: ["small", "iconSmall"],
+			className: "border-1"
+		},
+		{
+			tone: "accent",
+			style: "outline",
+			size: ["medium", "iconMedium"],
+			className: "border-2"
+		},
+		{
+			tone: "accent",
+			style: "outline",
+			size: ["large", "iconLarge"],
+			className: "border-4"
+		},
+		{
+			tone: "accent",
+			style: "ghost",
+			className: "text-accent hover:surface-bright active:bg-surface-dim"
+		},
+		{
+			tone: "accent",
+			style: "ghost",
+			size: ["small", "iconSmall"],
+			className: "hover:raised-1 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "accent",
+			style: "ghost",
+			size: ["medium", "iconMedium"],
+			className: "hover:raised-2 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "accent",
+			style: "ghost",
+			size: ["large", "iconLarge"],
+			className: "hover:raised-4 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "success",
+			style: "solid",
+			className: "bg-success text-on-success"
+		},
+		{
+			tone: "success",
+			style: "solid",
+			size: ["small", "iconSmall"],
+			className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "success",
+			style: "solid",
+			size: ["medium", "iconMedium"],
+			className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "success",
+			style: "solid",
+			size: ["large", "iconLarge"],
+			className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "success",
+			style: "outline",
+			className: "border-success text-success hover:text-on-success-container hover:bg-success-container active:bg-transparent"
+		},
+		{
+			tone: "success",
+			style: "outline",
+			size: ["small", "iconSmall"],
+			className: "border-1"
+		},
+		{
+			tone: "success",
+			style: "outline",
+			size: ["medium", "iconMedium"],
+			className: "border-2"
+		},
+		{
+			tone: "success",
+			style: "outline",
+			size: ["large", "iconLarge"],
+			className: "border-4"
+		},
+		{
+			tone: "success",
+			style: "ghost",
+			className: "text-success hover:surface-bright active:bg-surface-dim"
+		},
+		{
+			tone: "success",
+			style: "ghost",
+			size: ["small", "iconSmall"],
+			className: "hover:raised-1 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "success",
+			style: "ghost",
+			size: ["medium", "iconMedium"],
+			className: "hover:raised-2 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "success",
+			style: "ghost",
+			size: ["large", "iconLarge"],
+			className: "hover:raised-4 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "warning",
+			style: "solid",
+			className: "bg-warning text-on-warning"
+		},
+		{
+			tone: "warning",
+			style: "solid",
+			size: ["small", "iconSmall"],
+			className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "warning",
+			style: "solid",
+			size: ["medium", "iconMedium"],
+			className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "warning",
+			style: "solid",
+			size: ["large", "iconLarge"],
+			className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "warning",
+			style: "outline",
+			className: "border-warning text-warning hover:text-on-warning-container hover:bg-warning-container active:bg-transparent"
+		},
+		{
+			tone: "warning",
+			style: "outline",
+			size: ["small", "iconSmall"],
+			className: "border-1"
+		},
+		{
+			tone: "warning",
+			style: "outline",
+			size: ["medium", "iconMedium"],
+			className: "border-2"
+		},
+		{
+			tone: "warning",
+			style: "outline",
+			size: ["large", "iconLarge"],
+			className: "border-4"
+		},
+		{
+			tone: "warning",
+			style: "ghost",
+			className: "text-warning hover:surface-bright active:bg-surface-dim"
+		},
+		{
+			tone: "warning",
+			style: "ghost",
+			size: ["small", "iconSmall"],
+			className: "hover:raised-1 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "warning",
+			style: "ghost",
+			size: ["medium", "iconMedium"],
+			className: "hover:raised-2 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "warning",
+			style: "ghost",
+			size: ["large", "iconLarge"],
+			className: "hover:raised-4 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "destructive",
+			style: "solid",
+			className: "bg-error text-on-error"
+		},
+		{
+			tone: "destructive",
+			style: "solid",
+			size: ["small", "iconSmall"],
+			className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "destructive",
+			style: "solid",
+			size: ["medium", "iconMedium"],
+			className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "destructive",
+			style: "solid",
+			size: ["large", "iconLarge"],
+			className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "destructive",
+			style: "outline",
+			className: "border-error text-error hover:text-on-error-container hover:bg-error-container active:bg-transparent"
+		},
+		{
+			tone: "destructive",
+			style: "outline",
+			size: ["small", "iconSmall"],
+			className: "border-1"
+		},
+		{
+			tone: "destructive",
+			style: "outline",
+			size: ["medium", "iconMedium"],
+			className: "border-2"
+		},
+		{
+			tone: "destructive",
+			style: "outline",
+			size: ["large", "iconLarge"],
+			className: "border-4"
+		},
+		{
+			tone: "destructive",
+			style: "ghost",
+			className: "text-error hover:surface-bright active:bg-surface-dim"
+		},
+		{
+			tone: "destructive",
+			style: "ghost",
+			size: ["small", "iconSmall"],
+			className: "hover:raised-1 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "destructive",
+			style: "ghost",
+			size: ["medium", "iconMedium"],
+			className: "hover:raised-2 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "destructive",
+			style: "ghost",
+			size: ["large", "iconLarge"],
+			className: "hover:raised-4 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "neutral",
+			style: "solid",
+			className: "bg-surface-container text-on-surface"
+		},
+		{
+			tone: "neutral",
+			style: "solid",
+			size: ["small", "iconSmall"],
+			className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "neutral",
+			style: "solid",
+			size: ["medium", "iconMedium"],
+			className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "neutral",
+			style: "solid",
+			size: ["large", "iconLarge"],
+			className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
+		},
+		{
+			tone: "neutral",
+			style: "outline",
+			className: "border-outline text-on-surface hover:text-on-surface hover:bg-surface-container-high active:bg-transparent"
+		},
+		{
+			tone: "neutral",
+			style: "outline",
+			size: ["small", "iconSmall"],
+			className: "border-1"
+		},
+		{
+			tone: "neutral",
+			style: "outline",
+			size: ["medium", "iconMedium"],
+			className: "border-2"
+		},
+		{
+			tone: "neutral",
+			style: "outline",
+			size: ["large", "iconLarge"],
+			className: "border-4"
+		},
+		{
+			tone: "neutral",
+			style: "ghost",
+			className: "text-on-surface hover:surface-bright active:bg-surface-dim"
+		},
+		{
+			tone: "neutral",
+			style: "ghost",
+			size: ["small", "iconSmall"],
+			className: "hover:raised-1 active:inset-shadow-1-shadow"
+		},
+		{
+			tone: "neutral",
+			style: "ghost",
+			size: ["medium", "iconMedium"],
+			className: "hover:raised-2 active:inset-shadow-2-shadow"
+		},
+		{
+			tone: "neutral",
+			style: "ghost",
+			size: ["large", "iconLarge"],
+			className: "hover:raised-4 active:inset-shadow-3-shadow"
+		}
+	]
+});
+export { buttonVariants };

package/dist/checkbox-indicator.cjs

@@ -0,0 +1,36 @@
+const require_cn = require("./cn.cjs");
+let react_compiler_runtime = require("react/compiler-runtime");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __base_ui_react_checkbox = require("@base-ui/react/checkbox");
+const CheckboxIndicator = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = require_cn.cn("flex", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_checkbox.Checkbox.Indicator, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+exports.CheckboxIndicator = CheckboxIndicator;

package/dist/checkbox-indicator.js

@@ -0,0 +1,36 @@
+import { cn } from "./cn.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui/react/checkbox";
+const CheckboxIndicator = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("flex", className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+export { CheckboxIndicator };

package/dist/checkbox.cjs

@@ -0,0 +1,84 @@
+const require_cn = require("./cn.cjs");
+const require_checkbox_indicator = require("./checkbox-indicator.cjs");
+let react_compiler_runtime = require("react/compiler-runtime");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __base_ui_react_checkbox = require("@base-ui/react/checkbox");
+let __phosphor_icons_react = require("@phosphor-icons/react");
+const Checkbox = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(23);
+	let className;
+	let disabled;
+	let id;
+	let label;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({className, ref, label, id, disabled, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = disabled;
+		$[3] = id;
+		$[4] = label;
+		$[5] = props;
+		$[6] = ref;
+	} else {
+		className = $[1];
+		disabled = $[2];
+		id = $[3];
+		label = $[4];
+		props = $[5];
+		ref = $[6];
+	}
+	let t1;
+	if ($[7] !== className) {
+		t1 = require_cn.cn("flex size-md items-center text-on-accent justify-center rounded-sm bg-surface-dim inset-shadow-1-shadow data-checked:bg-accent data-checked:raised-1 hover:cursor-pointer transition-colors hover:disabled:cursor-not-allowed", className);
+		$[7] = className;
+		$[8] = t1;
+	} else t1 = $[8];
+	let t2;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_checkbox_indicator.CheckboxIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__phosphor_icons_react.CheckIcon, { weight: "bold" }) });
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== disabled || $[11] !== id || $[12] !== props || $[13] !== ref || $[14] !== t1) {
+		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_checkbox.Checkbox.Root, {
+			id,
+			disabled,
+			className: t1,
+			ref,
+			...props,
+			children: t2
+		});
+		$[10] = disabled;
+		$[11] = id;
+		$[12] = props;
+		$[13] = ref;
+		$[14] = t1;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== disabled || $[17] !== id || $[18] !== label) {
+		t4 = label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			htmlFor: id,
+			className: require_cn.cn("body-base cursor-pointer", disabled && "text-text-neutral-primary-disabled cursor-not-allowed"),
+			children: label
+		});
+		$[16] = disabled;
+		$[17] = id;
+		$[18] = label;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== t3 || $[21] !== t4) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2",
+			children: [t3, t4]
+		});
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
+};
+exports.Checkbox = Checkbox;