strata-ui-react 0.1.12 → 0.1.13

package/package.json

@@ -2,7 +2,7 @@
   "name": "strata-ui-react",
   "description": "A set of accessible, customizable, and production-ready React components built with Tailwind CSS.",
   "private": false,
-  "version": "0.1.12",
+  "version": "0.1.13",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -10,57 +10,52 @@
   "exports": {
     ".": {
       "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      },
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+        "import": "./dist/index.js",
+        "require": "./dist/index.cjs",
+        "types": "./dist/index.d.ts"
       }
     },
-    "./styles": "./dist/style.css"
+    "./styles.css": "./dist/style.css"
   },
   "files": [
     "dist"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "sideEffects": false,
-  "dependencies": {
+  "devDependencies": {
     "@base-ui/react": "^1.0.0",
+    "@eslint/js": "^9.39.2",
     "@phosphor-icons/react": "^2.1.10",
+    "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-form": "^1.27.6",
     "@tanstack/react-ranger": "^0.0.5",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.18",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@tailwindcss/cli": "^4.1.18",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.5",
+    "@types/node": "^24.10.4",
+    "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react": "^5.1.2",
     "babel-plugin-react-compiler": "^1.0.0",
-    "eslint": "^9.39.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-react-refresh": "^0.4.26",
     "globals": "^16.5.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "rollup-plugin-node-externals": "^8.1.2",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "npm:rolldown-vite@7.2.5"
+    "typescript-eslint": "^8.50.1",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build && pnpm run build:css",
+    "build": "tsc -b tsconfig.build.json && vite build && pnpm run build:css",
     "build:css": "npx @tailwindcss/cli -i ./src/style.css -o ./dist/style.css --minify",
     "lint": "eslint .",
     "preview": "vite preview",

package/dist/avatar-fallback.cjs

@@ -1,42 +0,0 @@
-const require_cn = require("./cn.cjs");
-let react_compiler_runtime = require("react/compiler-runtime");
-let __base_ui_react_avatar = require("@base-ui/react/avatar");
-let react_jsx_runtime = require("react/jsx-runtime");
-const AvatarFallback = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(10);
-	let className;
-	let props;
-	let ref;
-	if ($[0] !== t0) {
-		({className, ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = ref;
-	} else {
-		className = $[1];
-		props = $[2];
-		ref = $[3];
-	}
-	let t1;
-	if ($[4] !== className) {
-		t1 = require_cn.cn("flex size-full items-center justify-center", className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
-	let t2;
-	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_avatar.Avatar.Fallback, {
-			"data-slot": "avatar-fallback",
-			className: t1,
-			ref,
-			...props
-		});
-		$[6] = props;
-		$[7] = ref;
-		$[8] = t1;
-		$[9] = t2;
-	} else t2 = $[9];
-	return t2;
-};
-exports.AvatarFallback = AvatarFallback;

package/dist/avatar-fallback.js

@@ -1,42 +0,0 @@
-import { cn } from "./cn.js";
-import { c } from "react/compiler-runtime";
-import { Avatar } from "@base-ui/react/avatar";
-import { jsx } from "react/jsx-runtime";
-const AvatarFallback = (t0) => {
-	const $ = c(10);
-	let className;
-	let props;
-	let ref;
-	if ($[0] !== t0) {
-		({className, ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = ref;
-	} else {
-		className = $[1];
-		props = $[2];
-		ref = $[3];
-	}
-	let t1;
-	if ($[4] !== className) {
-		t1 = cn("flex size-full items-center justify-center", className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
-	let t2;
-	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Avatar.Fallback, {
-			"data-slot": "avatar-fallback",
-			className: t1,
-			ref,
-			...props
-		});
-		$[6] = props;
-		$[7] = ref;
-		$[8] = t1;
-		$[9] = t2;
-	} else t2 = $[9];
-	return t2;
-};
-export { AvatarFallback };

package/dist/avatar-image.cjs

@@ -1,42 +0,0 @@
-const require_cn = require("./cn.cjs");
-let react_compiler_runtime = require("react/compiler-runtime");
-let __base_ui_react_avatar = require("@base-ui/react/avatar");
-let react_jsx_runtime = require("react/jsx-runtime");
-const AvatarImage = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(10);
-	let className;
-	let props;
-	let ref;
-	if ($[0] !== t0) {
-		({className, ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = ref;
-	} else {
-		className = $[1];
-		props = $[2];
-		ref = $[3];
-	}
-	let t1;
-	if ($[4] !== className) {
-		t1 = require_cn.cn("size-full object-cover", className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
-	let t2;
-	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_avatar.Avatar.Image, {
-			"data-slot": "avatar-image",
-			className: t1,
-			ref,
-			...props
-		});
-		$[6] = props;
-		$[7] = ref;
-		$[8] = t1;
-		$[9] = t2;
-	} else t2 = $[9];
-	return t2;
-};
-exports.AvatarImage = AvatarImage;

package/dist/avatar-image.js

@@ -1,42 +0,0 @@
-import { cn } from "./cn.js";
-import { c } from "react/compiler-runtime";
-import { Avatar } from "@base-ui/react/avatar";
-import { jsx } from "react/jsx-runtime";
-const AvatarImage = (t0) => {
-	const $ = c(10);
-	let className;
-	let props;
-	let ref;
-	if ($[0] !== t0) {
-		({className, ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = ref;
-	} else {
-		className = $[1];
-		props = $[2];
-		ref = $[3];
-	}
-	let t1;
-	if ($[4] !== className) {
-		t1 = cn("size-full object-cover", className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
-	let t2;
-	if ($[6] !== props || $[7] !== ref || $[8] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Avatar.Image, {
-			"data-slot": "avatar-image",
-			className: t1,
-			ref,
-			...props
-		});
-		$[6] = props;
-		$[7] = ref;
-		$[8] = t1;
-		$[9] = t2;
-	} else t2 = $[9];
-	return t2;
-};
-export { AvatarImage };

package/dist/avatar.cjs

@@ -1,47 +0,0 @@
-const require_cn = require("./cn.cjs");
-let react_compiler_runtime = require("react/compiler-runtime");
-let __base_ui_react_avatar = require("@base-ui/react/avatar");
-let react_jsx_runtime = require("react/jsx-runtime");
-const Avatar = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(12);
-	let children;
-	let className;
-	let props;
-	let ref;
-	if ($[0] !== t0) {
-		({className, children, ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = ref;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		ref = $[4];
-	}
-	let t1;
-	if ($[5] !== className) {
-		t1 = require_cn.cn("inline-flex size-xl items-center justify-center overflow-hidden rounded-full bg-surface-container align-middle font-medium select-none raised-2", className);
-		$[5] = className;
-		$[6] = t1;
-	} else t1 = $[6];
-	let t2;
-	if ($[7] !== children || $[8] !== props || $[9] !== ref || $[10] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__base_ui_react_avatar.Avatar.Root, {
-			"data-slot": "avatar",
-			className: t1,
-			ref,
-			...props,
-			children
-		});
-		$[7] = children;
-		$[8] = props;
-		$[9] = ref;
-		$[10] = t1;
-		$[11] = t2;
-	} else t2 = $[11];
-	return t2;
-};
-exports.Avatar = Avatar;

package/dist/avatar.js

@@ -1,47 +0,0 @@
-import { cn } from "./cn.js";
-import { c } from "react/compiler-runtime";
-import { Avatar } from "@base-ui/react/avatar";
-import { jsx } from "react/jsx-runtime";
-const Avatar$1 = (t0) => {
-	const $ = c(12);
-	let children;
-	let className;
-	let props;
-	let ref;
-	if ($[0] !== t0) {
-		({className, children, ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = ref;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		ref = $[4];
-	}
-	let t1;
-	if ($[5] !== className) {
-		t1 = cn("inline-flex size-xl items-center justify-center overflow-hidden rounded-full bg-surface-container align-middle font-medium select-none raised-2", className);
-		$[5] = className;
-		$[6] = t1;
-	} else t1 = $[6];
-	let t2;
-	if ($[7] !== children || $[8] !== props || $[9] !== ref || $[10] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Avatar.Root, {
-			"data-slot": "avatar",
-			className: t1,
-			ref,
-			...props,
-			children
-		});
-		$[7] = children;
-		$[8] = props;
-		$[9] = ref;
-		$[10] = t1;
-		$[11] = t2;
-	} else t2 = $[11];
-	return t2;
-};
-export { Avatar$1 as Avatar };

package/dist/badge.cjs

@@ -1,63 +0,0 @@
-const require_cn = require("./cn.cjs");
-const require_badge_types = require("./badge.types.cjs");
-let react_compiler_runtime = require("react/compiler-runtime");
-let react_jsx_runtime = require("react/jsx-runtime");
-const Badge = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(18);
-	let children;
-	let className;
-	let props;
-	let radius;
-	let ref;
-	let style;
-	let tone;
-	if ($[0] !== t0) {
-		({className, tone, style, radius, children, ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = radius;
-		$[5] = ref;
-		$[6] = style;
-		$[7] = tone;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		radius = $[4];
-		ref = $[5];
-		style = $[6];
-		tone = $[7];
-	}
-	let t1;
-	if ($[8] !== className || $[9] !== radius || $[10] !== style || $[11] !== tone) {
-		t1 = require_cn.cn(require_badge_types.badgeVariants({
-			className,
-			tone,
-			style,
-			radius
-		}));
-		$[8] = className;
-		$[9] = radius;
-		$[10] = style;
-		$[11] = tone;
-		$[12] = t1;
-	} else t1 = $[12];
-	let t2;
-	if ($[13] !== children || $[14] !== props || $[15] !== ref || $[16] !== t1) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: t1,
-			ref,
-			...props,
-			children
-		});
-		$[13] = children;
-		$[14] = props;
-		$[15] = ref;
-		$[16] = t1;
-		$[17] = t2;
-	} else t2 = $[17];
-	return t2;
-};
-exports.Badge = Badge;

package/dist/badge.js

@@ -1,63 +0,0 @@
-import { cn } from "./cn.js";
-import { badgeVariants } from "./badge.types.js";
-import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
-const Badge = (t0) => {
-	const $ = c(18);
-	let children;
-	let className;
-	let props;
-	let radius;
-	let ref;
-	let style;
-	let tone;
-	if ($[0] !== t0) {
-		({className, tone, style, radius, children, ref, ...props} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = radius;
-		$[5] = ref;
-		$[6] = style;
-		$[7] = tone;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		radius = $[4];
-		ref = $[5];
-		style = $[6];
-		tone = $[7];
-	}
-	let t1;
-	if ($[8] !== className || $[9] !== radius || $[10] !== style || $[11] !== tone) {
-		t1 = cn(badgeVariants({
-			className,
-			tone,
-			style,
-			radius
-		}));
-		$[8] = className;
-		$[9] = radius;
-		$[10] = style;
-		$[11] = tone;
-		$[12] = t1;
-	} else t1 = $[12];
-	let t2;
-	if ($[13] !== children || $[14] !== props || $[15] !== ref || $[16] !== t1) {
-		t2 = /* @__PURE__ */ jsx("div", {
-			className: t1,
-			ref,
-			...props,
-			children
-		});
-		$[13] = children;
-		$[14] = props;
-		$[15] = ref;
-		$[16] = t1;
-		$[17] = t2;
-	} else t2 = $[17];
-	return t2;
-};
-export { Badge };

package/dist/badge.types.cjs

@@ -1,100 +0,0 @@
-let class_variance_authority = require("class-variance-authority");
-const badgeVariants = (0, class_variance_authority.cva)("inline-flex items-center justify-center whitespace-nowrap select-none transition-all px-xs py-3xs gap-3xs font-medium", {
-	variants: {
-		tone: {
-			primary: "",
-			secondary: "",
-			tertiary: "",
-			neutral: "",
-			error: "",
-			success: "",
-			warning: ""
-		},
-		style: {
-			solid: "raised-1",
-			outline: "bg-transparent outline outline-2"
-		},
-		radius: {
-			rounded: "rounded-lg",
-			circle: "rounded-full"
-		}
-	},
-	defaultVariants: {
-		tone: "neutral",
-		style: "solid",
-		radius: "rounded"
-	},
-	compoundVariants: [
-		{
-			tone: "primary",
-			style: "solid",
-			className: "bg-primary text-on-primary"
-		},
-		{
-			tone: "primary",
-			style: "outline",
-			className: "outline-primary text-primary"
-		},
-		{
-			tone: "secondary",
-			style: "solid",
-			className: "bg-secondary text-on-secondary"
-		},
-		{
-			tone: "secondary",
-			style: "outline",
-			className: "outline-secondary text-secondary"
-		},
-		{
-			tone: "tertiary",
-			style: "solid",
-			className: "bg-tertiary text-on-tertiary"
-		},
-		{
-			tone: "tertiary",
-			style: "outline",
-			className: "outline-tertiary text-tertiary"
-		},
-		{
-			tone: "neutral",
-			style: "solid",
-			className: "bg-surface-container"
-		},
-		{
-			tone: "neutral",
-			style: "outline",
-			className: "outline-on-surface text-on-surface"
-		},
-		{
-			tone: "error",
-			style: "solid",
-			className: "bg-error text-on-error"
-		},
-		{
-			tone: "error",
-			style: "outline",
-			className: "outline-error text-error"
-		},
-		{
-			tone: "success",
-			style: "solid",
-			className: "bg-success text-on-success"
-		},
-		{
-			tone: "success",
-			style: "outline",
-			className: "outline-success text-success"
-		},
-		{
-			tone: "warning",
-			style: "solid",
-			className: "bg-warning text-on-warning"
-		},
-		{
-			tone: "warning",
-			style: "outline",
-			className: "outline-warning text-warning"
-		}
-	]
-});
-exports.badgeVariants = badgeVariants;

package/dist/badge.types.js

@@ -1,100 +0,0 @@
-import { cva } from "class-variance-authority";
-const badgeVariants = cva("inline-flex items-center justify-center whitespace-nowrap select-none transition-all px-xs py-3xs gap-3xs font-medium", {
-	variants: {
-		tone: {
-			primary: "",
-			secondary: "",
-			tertiary: "",
-			neutral: "",
-			error: "",
-			success: "",
-			warning: ""
-		},
-		style: {
-			solid: "raised-1",
-			outline: "bg-transparent outline outline-2"
-		},
-		radius: {
-			rounded: "rounded-lg",
-			circle: "rounded-full"
-		}
-	},
-	defaultVariants: {
-		tone: "neutral",
-		style: "solid",
-		radius: "rounded"
-	},
-	compoundVariants: [
-		{
-			tone: "primary",
-			style: "solid",
-			className: "bg-primary text-on-primary"
-		},
-		{
-			tone: "primary",
-			style: "outline",
-			className: "outline-primary text-primary"
-		},
-		{
-			tone: "secondary",
-			style: "solid",
-			className: "bg-secondary text-on-secondary"
-		},
-		{
-			tone: "secondary",
-			style: "outline",
-			className: "outline-secondary text-secondary"
-		},
-		{
-			tone: "tertiary",
-			style: "solid",
-			className: "bg-tertiary text-on-tertiary"
-		},
-		{
-			tone: "tertiary",
-			style: "outline",
-			className: "outline-tertiary text-tertiary"
-		},
-		{
-			tone: "neutral",
-			style: "solid",
-			className: "bg-surface-container"
-		},
-		{
-			tone: "neutral",
-			style: "outline",
-			className: "outline-on-surface text-on-surface"
-		},
-		{
-			tone: "error",
-			style: "solid",
-			className: "bg-error text-on-error"
-		},
-		{
-			tone: "error",
-			style: "outline",
-			className: "outline-error text-error"
-		},
-		{
-			tone: "success",
-			style: "solid",
-			className: "bg-success text-on-success"
-		},
-		{
-			tone: "success",
-			style: "outline",
-			className: "outline-success text-success"
-		},
-		{
-			tone: "warning",
-			style: "solid",
-			className: "bg-warning text-on-warning"
-		},
-		{
-			tone: "warning",
-			style: "outline",
-			className: "outline-warning text-warning"
-		}
-	]
-});
-export { badgeVariants };