@pathscale/ui 1.6.0 → 2.1.0

package/README.md

@@ -11,22 +11,44 @@ dark themes built in.
 ## Install
 
 ```sh
-bun add @pathscale/ui
+bun add @pathscale/ui solid-layouts
+bun add -d rsbuild-plugin-solid-layouts
 ```
 
 <details>
 <summary>npm · pnpm · yarn</summary>
 
 ```sh
-npm install @pathscale/ui
-pnpm add @pathscale/ui
-yarn add @pathscale/ui
+npm install @pathscale/ui solid-layouts && npm install -D rsbuild-plugin-solid-layouts
+pnpm add @pathscale/ui solid-layouts && pnpm add -D rsbuild-plugin-solid-layouts
+yarn add @pathscale/ui solid-layouts && yarn add -D rsbuild-plugin-solid-layouts
 ```
 
 </details>
 
 ## Setup
 
+`@pathscale/ui` 2.x is a compiled Layout bundle. Configure the application compiler before
+Solid transforms JSX:
+
+```ts
+import { pluginBabel } from "@rsbuild/plugin-babel";
+import { pluginSolid } from "@rsbuild/plugin-solid";
+import { defineConfig } from "@rsbuild/core";
+import { pluginSolidLayoutsApplication } from "rsbuild-plugin-solid-layouts";
+
+export default defineConfig({
+  plugins: [
+    pluginSolidLayoutsApplication({ layouts: ["@pathscale/ui"] }),
+    pluginBabel({ include: /\.(?:jsx|tsx|ts)$/ }),
+    pluginSolid(),
+  ],
+});
+```
+
+The Layout plugin must run before Solid. A missing package, manifest, recipe, compiler, or
+runtime is an error; there is no uncompiled fallback.
+
 Two imports. Everything comes from the root barrel, and **one stylesheet is all you need** —
 `index.css` pulls in the base styles, both themes and the icon set:
 
@@ -102,8 +124,19 @@ from hooks. Both, with toasts, icons and dates, are covered in
 ## Requirements
 
 - **SolidJS ^1.9**
+- **solid-layouts** runtime
+- **rsbuild-plugin-solid-layouts** application compiler integration
 - **Tailwind v4** — optional, but required for the `@theme` token utilities
 
+## Migrating from 1.x
+
+`1.4.0` is the last pre-Layouts 1.x release. Layout-authored components begin at `2.0.0` and
+require the setup above. Versions `1.5.0` and `1.6.0` were incorrectly published on the 1.x
+line and must not be used.
+
+The complete compiler contract, hard-error behavior, commands, and porting analyzer are
+documented in [docs/layouts.md](docs/layouts.md).
+
 Peers include `@solid-primitives/*`, `@tanstack/solid-form` and `@tanstack/solid-table`.
 Two are optional and only needed for the features they back: `popmotion` (JS animation
 driver) and `@standard-schema/spec` (schema validation).

package/dist/components/flex/Flex.generated.d.ts

@@ -14,6 +14,10 @@ export type FlexProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLElemen
     gapY?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
     paddingInline?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
     paddingBlock?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
+    width?: ResponsiveProp<"full">;
+    height?: ResponsiveProp<"full">;
+    minWidth?: ResponsiveProp<"zero">;
+    minHeight?: ResponsiveProp<"zero">;
     grow?: ResponsiveProp<boolean>;
     shrink?: ResponsiveProp<boolean>;
     basis?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;

package/dist/components/flex/Flex.generated.js

@@ -21,13 +21,17 @@ const __solidLayoutFlex = (_stable, p)=>{
         "gapY",
         "paddingInline",
         "paddingBlock",
+        "width",
+        "height",
+        "minWidth",
+        "minHeight",
         "grow",
         "shrink",
         "basis"
     ]);
     const tag = createMemo(()=>local.as || "div");
     const resolvedChildren = children(()=>local.children);
-    const classes = createMemo(()=>twMerge(clsx(CLASSES.base, mapResponsiveProp(local.direction, CLASSES.direction), mapResponsiveProp(local.justify, CLASSES.justify), mapResponsiveProp(local.align, CLASSES.align), mapResponsiveProp(local.wrap, CLASSES.wrap), mapResponsiveProp(local.gap, CLASSES.gap), mapResponsiveProp(local.gapX, CLASSES.gapX), mapResponsiveProp(local.gapY, CLASSES.gapY), mapResponsiveProp(local.paddingInline, CLASSES.paddingInline), mapResponsiveProp(local.paddingBlock, CLASSES.paddingBlock), mapResponsiveProp(local.grow, CLASSES.grow), mapResponsiveProp(local.shrink, CLASSES.shrink), mapResponsiveProp(local.basis, CLASSES.basis), local.class, local.className)));
+    const classes = createMemo(()=>twMerge(clsx(CLASSES.base, mapResponsiveProp(local.direction, CLASSES.direction), mapResponsiveProp(local.justify, CLASSES.justify), mapResponsiveProp(local.align, CLASSES.align), mapResponsiveProp(local.wrap, CLASSES.wrap), mapResponsiveProp(local.gap, CLASSES.gap), mapResponsiveProp(local.gapX, CLASSES.gapX), mapResponsiveProp(local.gapY, CLASSES.gapY), mapResponsiveProp(local.paddingInline, CLASSES.paddingInline), mapResponsiveProp(local.paddingBlock, CLASSES.paddingBlock), mapResponsiveProp(local.width, CLASSES.width), mapResponsiveProp(local.height, CLASSES.height), mapResponsiveProp(local.minWidth, CLASSES.minWidth), mapResponsiveProp(local.minHeight, CLASSES.minHeight), mapResponsiveProp(local.grow, CLASSES.grow), mapResponsiveProp(local.shrink, CLASSES.shrink), mapResponsiveProp(local.basis, CLASSES.basis), local.class, local.className)));
     return createComponent(Dynamic, mergeProps({
         get component () {
             return tag();

package/dist/components/flex/Flex.recipe.d.ts

@@ -61,6 +61,18 @@ export declare const CLASSES: {
         readonly lg: "py-6";
         readonly xl: "py-8";
     };
+    readonly width: {
+        readonly full: "w-full";
+    };
+    readonly height: {
+        readonly full: "h-full";
+    };
+    readonly minWidth: {
+        readonly zero: "min-w-0";
+    };
+    readonly minHeight: {
+        readonly zero: "min-h-0";
+    };
     readonly grow: {
         readonly true: "flex-grow";
         readonly false: "flex-grow-0";

package/dist/components/flex/Flex.recipe.js

@@ -62,6 +62,18 @@ const CLASSES = {
         lg: "py-6",
         xl: "py-8"
     },
+    width: {
+        full: "w-full"
+    },
+    height: {
+        full: "h-full"
+    },
+    minWidth: {
+        zero: "min-w-0"
+    },
+    minHeight: {
+        zero: "min-h-0"
+    },
     grow: {
         true: "flex-grow",
         false: "flex-grow-0"

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "1.6.0",
+  "version": "2.1.0",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/dist/purge-manifest.json

@@ -8926,6 +8926,18 @@
             "lg": [],
             "xl": []
           },
+          "width": {
+            "full": []
+          },
+          "height": {
+            "full": []
+          },
+          "minWidth": {
+            "zero": []
+          },
+          "minHeight": {
+            "zero": []
+          },
           "grow": {
             "true": [],
             "false": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "1.6.0",
+  "version": "2.1.0",
   "author": "pathscale",
   "repository": {
     "type": "git",