dawn-ui-react 1.0.0-rc.6 → 1.0.0-rc.7

package/README.md

@@ -2,6 +2,12 @@
 
 A React component library for building polished product interfaces with composable primitives, Tailwind CSS styling, and accessible interaction patterns.
 
+[![Sponsor on GitHub](https://img.shields.io/badge/Sponsor-GitHub-DB61A2?logo=githubsponsors&logoColor=white)](https://github.com/sponsors/PHNTMbandit)
+[![npm version](https://img.shields.io/npm/v/dawn-ui-react?logo=npm)](https://www.npmjs.com/package/dawn-ui-react)
+[![npm weekly downloads](https://img.shields.io/npm/dw/dawn-ui-react?logo=npm)](https://www.npmjs.com/package/dawn-ui-react)
+[![License](https://img.shields.io/npm/l/dawn-ui-react)](LICENSE)
+[![TypeScript declarations](https://img.shields.io/npm/types/dawn-ui-react)](https://www.npmjs.com/package/dawn-ui-react)
+
 Dawn UI React is currently in release-candidate testing for `1.0.0`. APIs are nearing stability, but breaking changes may still happen before the stable release.
 
 ## Features
@@ -15,20 +21,28 @@ Dawn UI React is currently in release-candidate testing for `1.0.0`. APIs are ne
 
 ## Installation
 
+Install Dawn UI React with your package manager:
+
 ```sh
+npm install dawn-ui-react
 pnpm add dawn-ui-react
+yarn add dawn-ui-react
+bun add dawn-ui-react
 ```
 
 Install the required peer dependencies if your app does not already include them:
 
 ```sh
+npm install react react-dom
 pnpm add react react-dom
+yarn add react react-dom
+bun add react react-dom
 ```
 
 Import the library styles once in your app entry file:
 
 ```ts
-import 'dawn-ui-react/styles.css'
+import 'dawn-ui-react/styles'
 ```
 
 ## Usage
@@ -45,6 +59,10 @@ export function Example() {
 
 Dawn UI React includes primitives for accordions, alerts, dialogs, autocomplete, avatars, badges, breadcrumbs, buttons, charts, checkboxes, code blocks, comboboxes, context menus, drawers, dropzones, fields, forms, inputs, menus, navigation, popovers, profiles, progress, radio groups, scroll areas, selects, sidebars, sliders, switches, tables, tabs, text areas, toasts, toggles, tooltips, and more.
 
+## Sponsor Development
+
+If Dawn UI React saves you time or helps your product, consider [sponsoring its development on GitHub](https://github.com/sponsors/PHNTMbandit). Sponsorship helps fund ongoing maintenance, accessibility improvements, documentation, testing, and new components. One-time and recurring support are both welcome, and sponsorship is never required to use or contribute to the library.
+
 ## Development
 
 ```sh
@@ -57,8 +75,8 @@ Vite+ provides the `vp` CLI for the project toolchain. Use its built-in commands
 ```sh
 vp check
 vp test
-pnpm run build
-pnpm run build-storybook
+vp run build
+vp run build-storybook
 ```
 
 See the [Vite+ guide](https://viteplus.dev/guide/) for CLI details.

package/dist/index.d.mts

@@ -319,6 +319,7 @@ export declare function Badge({ className, size, tone, variant, ref, ...props }:
 //#endregion
 //#region src/components/bento-box/bento-box.types.d.ts
 declare const bentoBoxVariants: (props?: ({
+  elevation?: "high" | "low" | "medium" | "none" | "veryHigh" | null | undefined;
   fill?: boolean | null | undefined;
   size?: "large" | "medium" | "small" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -331,7 +332,7 @@ type BentoBoxActionProps = React.ComponentProps<'div'>;
 type BentoBoxFooterProps = React.ComponentProps<'div'>;
 //#endregion
 //#region src/components/bento-box/bento-box.d.ts
-declare function BentoBox$1({ fill, size, className, ref, ...props }: BentoBoxProps): import("react").JSX.Element;
+declare function BentoBox$1({ elevation, fill, size, className, ref, ...props }: BentoBoxProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/bento-box/bento-box-action.d.ts
 export declare function BentoBoxAction({ className, ref, ...props }: BentoBoxActionProps): import("react").JSX.Element;

package/dist/index.mjs

@@ -1116,30 +1116,39 @@ function Badge({ className, size, tone, variant, ref, ...props }) {
 }
 //#endregion
 //#region src/components/bento-box/bento-box.types.ts
-const bentoBoxVariants = cva("group/box flex size-full min-h-0 flex-col overflow-hidden bg-surface", {
+const bentoBoxVariants = cva("group/box flex size-full min-h-0 flex-col overflow-hidden border border-border bg-surface", {
 	defaultVariants: {
+		elevation: "medium",
 		fill: false,
 		size: "medium"
 	},
 	variants: {
+		elevation: {
+			high: "shadow-sm",
+			low: "shadow-2xs",
+			medium: "shadow-xs",
+			none: "",
+			veryHigh: "shadow-md"
+		},
 		fill: {
 			false: "",
 			true: "p-0!"
 		},
 		size: {
-			large: "gap-md rounded-3xl p-md shadow-sm",
-			medium: "gap-sm rounded-2xl p-sm shadow-xs",
-			small: "gap-xs rounded-xl p-xs shadow-2xs"
+			large: "gap-md rounded-3xl p-md",
+			medium: "gap-sm rounded-2xl p-sm",
+			small: "gap-xs rounded-xl p-xs"
 		}
 	}
 });
 //#endregion
 //#region src/components/bento-box/bento-box.tsx
-function BentoBox$1({ fill, size, className, ref, ...props }) {
+function BentoBox$1({ elevation, fill, size, className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-size": size,
 		className: cn(bentoBoxVariants({
 			className,
+			elevation,
 			fill,
 			size
 		})),
@@ -1160,7 +1169,7 @@ function BentoBoxAction({ className, ref, ...props }) {
 //#region src/components/bento-box/bento-box-content.tsx
 function BentoBoxContent({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("min-h-0 flex-1", className),
+		className: cn("flex min-h-0 flex-1 flex-col gap-3xs", className),
 		ref,
 		...props
 	});
@@ -1178,7 +1187,7 @@ function BentoBoxDescription({ className, ref, ...props }) {
 //#region src/components/bento-box/bento-box-footer.tsx
 function BentoBoxFooter({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex items-center justify-between not-first:group-data-[size=large]/box:gap-lg not-first:group-data-[size=medium]/box:gap-md group-data-[size=small]/box:gap-sm", className),
+		className: cn("mt-auto flex flex-wrap items-center justify-start gap-sm not-first:group-data-[size=large]/box:gap-lg not-first:group-data-[size=medium]/box:gap-md group-data-[size=small]/box:gap-sm", className),
 		ref,
 		...props
 	});
@@ -1187,7 +1196,7 @@ function BentoBoxFooter({ className, ref, ...props }) {
 //#region src/components/bento-box/bento-box-header.tsx
 function BentoBoxHeader({ className, ref, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("group/box-header grid auto-rows-min items-start group-data-[size=large]/box:gap-0 group-data-[size=medium]/box:gap-0 group-data-[size=small]/box:gap-0", className),
+		className: cn("group/box-header grid auto-rows-min items-start space-y-2xs group-data-[size=large]/box:gap-0 group-data-[size=medium]/box:gap-0 group-data-[size=small]/box:gap-0", className),
 		ref,
 		...props
 	});
@@ -5840,8 +5849,11 @@ function FormErrors({ className, children, ref, ...props }) {
 				...props,
 				children: [
 					/* @__PURE__ */ jsx(AlertIcon, { children: /* @__PURE__ */ jsx(XCircleIcon, { weight: "duotone" }) }),
-					children,
-					/* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsx("ul", { children: [...messages].map((message) => /* @__PURE__ */ jsx("li", { children: message }, message)) }) })
+					/* @__PURE__ */ jsx(AlertTitle, { children }),
+					/* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsx("ul", {
+						className: "list-inside list-disc",
+						children: [...messages].map((message) => /* @__PURE__ */ jsx("li", { children: message }, message))
+					}) })
 				]
 			});
 		}