@stealthscale/component-feedback 0.1.0 → 0.2.2

package/dist/theme.d.ts

@@ -1,11 +1,10 @@
 //#region src/theme.d.ts
 /**
- * Publishes the preset that registers every recipe in this package, for an application's compiler
- * to install.
+ * Registers every recipe in the package in the preset an application's style compiler installs.
  *
  * @remarks
- *   The list is written by hand. The package's own specification reports a recipe file the list
- *   leaves out, so no generator runs here.
+ *   The list is written by hand. `theme.spec.ts` fails when a recipe file is missing from it, so
+ *   no generator writes it.
  */
 declare const _default: import("@stealthscale/theme/authoring").Preset;
 //#endregion

package/dist/theme.js

@@ -1,23 +1,44 @@
-import { n as recipe$1, r as recipe$2, t as recipe } from "./recipe-0Xo90j3-.js";
+import { a as recipe$6, d as recipe$4, f as recipe$3, i as recipe$7, l as recipe$2, n as recipe, r as recipe$1, t as recipe$8, u as recipe$5 } from "./recipe-CX1gSsN7.js";
 import { definePreset } from "@stealthscale/theme/authoring";
-//#region src/theme.ts
-/**
-* Publishes the preset that registers every recipe in this package, for an application's compiler
-* to install.
-*
-* @remarks
-*   The list is written by hand. The package's own specification reports a recipe file the list
-*   leaves out, so no generator runs here.
-*/
-var theme_default = definePreset({
+//#endregion
+const theme_default$published = ((preset) => {
+	const extend = preset.theme.extend;
+	return {
+		...preset,
+		theme: {
+			...preset.theme,
+			extend: {
+				...extend,
+				"recipes": {
+					...extend["recipes"],
+					"skeleton": {
+						...extend["recipes"]["skeleton"],
+						staticCss: [...extend["recipes"]["skeleton"].staticCss ?? []]
+					},
+					"spinner": {
+						...extend["recipes"]["spinner"],
+						staticCss: [...extend["recipes"]["spinner"].staticCss ?? [], { "size": ["inherit"] }]
+					}
+				}
+			}
+		}
+	};
+})(definePreset({
 	name: "@stealthscale/component-feedback",
 	theme: { extend: {
 		recipes: {
 			skeleton: recipe,
-			skeletonText: recipe$1
+			skeletonText: recipe$1,
+			spinner: recipe$2
 		},
-		slotRecipes: { emptyState: recipe$2 }
+		slotRecipes: {
+			alert: recipe$3,
+			emptyState: recipe$4,
+			loader: recipe$5,
+			progress: recipe$6,
+			progressCircle: recipe$7,
+			toast: recipe$8
+		}
 	} }
-});
-//#endregion
-export { theme_default as default };
+}));
+export { theme_default$published as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stealthscale/component-feedback",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "Draws the system reporting on itself: what is loading, what went wrong, what state a thing is in.",
   "keywords": [
     "components",
@@ -8,12 +8,12 @@
     "react",
     "status"
   ],
-  "homepage": "https://github.com/stealth-scale/config/tree/main/components/feedback#readme",
-  "bugs": "https://github.com/stealth-scale/config/issues",
+  "homepage": "https://github.com/stealth-scale/scale/tree/main/components/feedback#readme",
+  "bugs": "https://github.com/stealth-scale/scale/issues",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/stealth-scale/config.git",
+    "url": "git+https://github.com/stealth-scale/scale.git",
     "directory": "components/feedback"
   },
   "files": [
@@ -34,29 +34,42 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@zag-js/progress": "1.45.0",
+    "@zag-js/react": "1.45.0",
+    "@zag-js/toast": "1.45.0",
+    "@zag-js/types": "1.45.0",
+    "@zag-js/utils": "1.45.0"
+  },
   "devDependencies": {
-    "@arethetypeswrong/core": "^0.18.5",
-    "@rolldown/plugin-babel": "^0.2.4",
-    "@stealthscale/theme": "^0.3.0",
-    "@stealthscale/vite-config": "^0.6.0",
-    "@stealthscale/vite-config-react": "^0.8.0",
-    "@stealthscale/vite-config-theme": "^0.1.0",
+    "@arethetypeswrong/core": "^0.18",
+    "@stealthscale/component-actions": "^0.2.2",
+    "@stealthscale/component-layout": "^0.2.1",
+    "@stealthscale/component-surfaces": "^0.1.1",
+    "@stealthscale/hooks": "^0.3.0",
+    "@stealthscale/theme": "^0.5.0",
+    "@stealthscale/vite-config": "^0.8.0",
+    "@stealthscale/vite-config-i18n": "^0.2.1",
+    "@stealthscale/vite-config-react": "^0.9.1",
+    "@stealthscale/vite-config-specimen": "^0.2.1",
+    "@stealthscale/vite-config-theme": "^0.3.0",
     "@stealthscale/vite-config-typescript": "^0.3.0",
-    "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.3.0",
-    "@types/react-dom": "^19.3.0",
-    "babel-plugin-react-compiler": "^1.0.0",
-    "happy-dom": "^20.14.3",
-    "oxc-transform-react": "^0.149.0",
-    "publint": "^0.3.24",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "typescript": "^7.0.2",
-    "vitest": "4.1.11"
+    "@testing-library/react": "^16.3",
+    "@types/react": "^19.3",
+    "@types/react-dom": "^19.3",
+    "happy-dom": "^20.14",
+    "lucide-react": "^1.52",
+    "oxc-transform-react": "^0.153",
+    "publint": "^0.3",
+    "react": "^19.3",
+    "react-dom": "^19.3",
+    "typescript": "^7.0",
+    "vitest": "5.0.3"
   },
   "peerDependencies": {
-    "@stealthscale/theme": "^0.3.0",
-    "react": "^19.3.0"
+    "@stealthscale/hooks": "^0.3.0",
+    "@stealthscale/theme": "^0.5.0",
+    "react": "^19.3"
   },
   "engines": {
     "node": ">=26.0.0"

package/dist/recipe-0Xo90j3-.js

@@ -1,162 +0,0 @@
-import { cornerVariants, defineRecipe, defineSlotRecipe, gapSizes, iconSizes, insetSizes, onSlots, textSizes } from "@stealthscale/theme/authoring";
-//#region src/empty-state/recipe.ts
-/**
-* States what an empty state is: the panel a page draws where there is nothing to show, holding a
-* mark, a heading and a line saying what would be here.
-*
-* @remarks
-*   Five parts, because each is styled and a caller composes them in whatever order a page wants.
-*   The root is the panel, the content centres what is inside it, the indicator draws the mark, and
-*   the title and the description carry the words.
-*   One axis moves all of them together. The room inside the panel, the gap in the content, the box
-*   of the mark and the size of the title each read the scale of the same name, so a small empty
-*   state in a side panel and a large one filling a page are one name apart. The description holds
-*   its size, because a line of explanation is read at the size the rest of the page is read at
-*   however big the panel is.
-*/
-/**
-* Draws a centred panel at the middle size until a caller says otherwise.
-*/
-const recipe$2 = defineSlotRecipe({
-	base: {
-		content: {
-			alignItems: "center",
-			display: "flex",
-			flexDirection: "column",
-			justifyContent: "center",
-			textAlign: "center"
-		},
-		description: {
-			color: "fg.muted",
-			textStyle: "body.sm"
-		},
-		indicator: {
-			"& svg": { boxSize: "100%" },
-			alignItems: "center",
-			color: "fg.muted",
-			display: "flex",
-			justifyContent: "center"
-		},
-		root: {
-			alignItems: "center",
-			display: "flex",
-			justifyContent: "center",
-			width: "full"
-		},
-		title: { fontWeight: "semibold" }
-	},
-	className: "empty-state",
-	defaultVariants: { size: "md" },
-	jsx: [/^EmptyState(\.\w+)?$/u],
-	slots: [
-		"root",
-		"content",
-		"indicator",
-		"title",
-		"description"
-	],
-	variants: { 
-	/**
-	* How much room the panel takes, which every part steps with.
-	*/
-size: onSlots({
-		content: gapSizes(),
-		indicator: iconSizes(),
-		root: insetSizes(),
-		title: textSizes("heading")
-	}) }
-});
-//#endregion
-//#region src/skeleton-text/recipe.ts
-/**
-* States what a paragraph of skeleton is: a column of bars standing in for lines of text that have
-* not arrived.
-*
-* @remarks
-*   Every length here is read off the line the bars stand in for. A bar is one line tall and the
-*   space between two is half a line, so a column of stand-ins occupies what the real paragraph
-*   will occupy and the page does not jump when the words land. Nothing states a size of its own,
-*   which is what lets a caller drop a paragraph of stand-ins wherever text is read and have it
-*   come out the size of that text.
-*   The last bar of several is short. A paragraph rarely fills its final line, and a block of bars
-*   all the same width reads as a table rather than as prose.
-*/
-/**
-* Draws a column of bars, each the height of the line it stands in for.
-*/
-const recipe$1 = defineRecipe({
-	base: {
-		"& > *": { height: "1lh" },
-		"& > *:last-child:not(:only-child)": { maxWidth: "80%" },
-		display: "flex",
-		flexDirection: "column",
-		gap: "0.5lh",
-		width: "full"
-	},
-	className: "skeleton-text",
-	jsx: [/^SkeletonText$/u]
-});
-//#endregion
-//#region src/skeleton/recipe.ts
-/**
-* States what a skeleton is: a box standing in for content that has not arrived, drawn in one of
-* the theme's own motions and revealed once the content does.
-*
-* @remarks
-*   A skeleton wraps the content it stands in for rather than replacing it, so a caller writes one
-*   tree and flips one prop. While it is loading it takes the content's own box and hides
-*   everything inside it, which is what makes the stand-in the size of the thing it stands in for
-*   without anybody stating a width. Once it has loaded it fades the content in and gets out of
-*   the way.
-*   Every motion is an animation style the theme owns, so a reader who asked for less motion is
-*   answered once in the theme rather than in every recipe. Nothing here states a colour, a length
-*   or a duration of its own.
-*/
-/**
-* Draws a pulsing stand-in at the middle corner until a caller says otherwise.
-*/
-const recipe = defineRecipe({
-	base: {},
-	className: "skeleton",
-	defaultVariants: {
-		loading: true,
-		motion: "pulse",
-		radius: "l2"
-	},
-	jsx: [/^Skeleton$/u],
-	variants: {
-		/**
-		* Whether the content it stands in for has arrived.
-		*/
-		loading: {
-			false: { animationStyle: "fade.in" },
-			true: {
-				"&::before, &::after, *": { visibility: "hidden" },
-				backgroundClip: "padding-box",
-				boxShadow: "none",
-				color: "transparent",
-				flexShrink: "0",
-				pointerEvents: "none",
-				userSelect: "none"
-			}
-		},
-		/**
-		* How it moves while it waits.
-		*/
-		motion: {
-			none: { animation: "none" },
-			pulse: {
-				animationStyle: "pulse",
-				background: "bg.emphasized"
-			},
-			shimmer: {
-				animationStyle: "shimmer",
-				backgroundImage: "linear-gradient(270deg, {colors.bg.muted}, {colors.bg.emphasized})",
-				backgroundSize: "400% 100%"
-			}
-		},
-		radius: cornerVariants()
-	}
-});
-//#endregion
-export { recipe$1 as n, recipe$2 as r, recipe as t };