@marigold/theme-rui 3.0.3 → 4.0.0

package/dist/index.mjs

@@ -29,7 +29,7 @@ const Accordion = {
 		defaultVariants: { variant: "default" }
 	}),
 	header: cva([
-		"flex w-full items-center justify-between gap-4 rounded-md py-2 cursor-pointer text-foreground",
+		"flex w-full items-center justify-between gap-4 py-2 rounded-md cursor-pointer text-foreground",
 		"text-left text-base font-semibold leading-6 transition-all",
 		"hover:no-underline",
 		"disabled:cursor-not-allowed disabled:text-disabled-foreground"
@@ -40,8 +40,9 @@ const Accordion = {
 		} },
 		defaultVariants: { variant: "default" }
 	}),
-	content: cva("in-data-[expanded]:pb-2"),
-	icon: cva("pointer-events-none shrink-0 opacity-60 transition-transform duration-200")
+	panel: cva("overflow-clip h-(--disclosure-panel-height) transition-[height,padding] duration-250"),
+	content: cva("pb-2"),
+	icon: cva("pointer-events-none shrink-0 opacity-60 transition-transform duration-250")
 };
 
 //#endregion
@@ -76,6 +77,7 @@ const Button = cva([
 			primary: "bg-brand text-brand-foreground shadow-xs hover:bg-brand/90",
 			secondary: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
 			destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+			"destructive-ghost": "text-destructive hover:bg-destructive/10",
 			ghost: "hover:bg-hover hover:text-foreground",
 			link: "text-link util-touch-hitbox"
 		},
@@ -96,7 +98,8 @@ const Button = cva([
 				"primary",
 				"secondary",
 				"destructive",
-				"ghost"
+				"ghost",
+				"destructive-ghost"
 			],
 			class: "items-center justify-center"
 		},
@@ -105,7 +108,8 @@ const Button = cva([
 				"primary",
 				"secondary",
 				"destructive",
-				"ghost"
+				"ghost",
+				"destructive-ghost"
 			],
 			size: "default",
 			class: "h-button px-4 py-2 [&_svg]:size-4"
@@ -115,7 +119,8 @@ const Button = cva([
 				"primary",
 				"secondary",
 				"destructive",
-				"ghost"
+				"ghost",
+				"destructive-ghost"
 			],
 			size: "small",
 			class: "h-button-small px-3 [&_svg]:size-3.5"
@@ -125,7 +130,8 @@ const Button = cva([
 				"primary",
 				"secondary",
 				"destructive",
-				"ghost"
+				"ghost",
+				"destructive-ghost"
 			],
 			size: "large",
 			class: "h-button-large px-8 [&_svg]:size-5"
@@ -135,7 +141,8 @@ const Button = cva([
 				"primary",
 				"secondary",
 				"destructive",
-				"ghost"
+				"ghost",
+				"destructive-ghost"
 			],
 			size: "icon",
 			class: "size-button [&_svg]:size-4"
@@ -177,7 +184,7 @@ const Checkbox = {
 	container: cva("cursor-pointer read-only:cursor-default gap-2"),
 	label: cva([
 		"flex items-center gap-1",
-		"text-sm leading-4 group-[group=\"checkbox\"]/checkboxgroup:font-normal font-medium text-foregroun",
+		"text-sm leading-4 group-[&]/checkboxgroup:font-normal font-medium text-foregroun",
 		"group-disabled/checkbox:text-disabled-foreground"
 	]),
 	group: cva()
@@ -227,8 +234,8 @@ const CloseButton = cva([
 	"flex items-center justify-center whitespace-nowrap",
 	"cursor-pointer",
 	"transition-[color,box-shadow]",
-	"mixin-ring-focus-visible",
-	"rounded",
+	"focus-visible:util-focus-ring outline-none",
+	"rounded-full",
 	"duration-150 active:scale-[0.98] pressed:scale-[0.98] transition-transform",
 	"[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100"
 ]);
@@ -434,21 +441,21 @@ const HelpText = {
 	container: cva([
 		"text-xs text-muted-foreground group-disabled/field:text-disabled-foreground",
 		"group-invalid/field:text-destructive",
-		"has-[+_[aria-hidden=\"true\"]]:mb-0"
+		"has-[+_[aria-hidden=true]]:mb-0"
 	]),
 	icon: cva("")
 };
 
 //#endregion
 //#region src/components/Label.styles.ts
-const Label = {
-	container: cva([
-		"flex items-center gap-1",
-		"text-sm font-medium leading-none text-foreground",
-		"group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground"
-	]),
-	indicator: cva("group-required/field:block text-destructive -ml-1")
-};
+const Label = cva([
+	"flex items-center gap-1",
+	"text-sm font-medium leading-none text-foreground",
+	"group-disabled/field:cursor-not-allowed group-disabled/field:text-disabled-foreground",
+	"group-required/field:after:content-[\"*\"]",
+	"group-required/field:after:-ml-1",
+	"group-required/field:after:text-destructive"
+]);
 
 //#endregion
 //#region src/components/Link.styles.ts
@@ -495,13 +502,14 @@ const ListBox = {
 	container: cva(["overflow-hidden rounded-md border border-input group-[[data-trigger]]/popover:border-0"]),
 	list: cva(["bg-background p-1 text-sm outline-0 space-y-px"]),
 	item: cva([
-		"relative flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground",
+		"relative grid grid-cols-[auto_1fr] items-center gap-x-2 rounded-md px-2 py-1.5 text-sm text-foreground",
 		"[&_.selection-indicator>svg]:invisible [&_.selection-indicator>svg]:block",
 		"selected:bg-selected selected:[&_.selection-indicator>svg]:visible",
 		"hover:bg-hover hover:text-hover-foreground",
 		"disabled:cursor-not-allowed disabled:text-disabled-foreground",
 		"focus-visible:util-focus-ring outline-none focus-visible:z-1",
-		"cursor-default data-selection-mode:cursor-pointer"
+		"cursor-default data-selection-mode:cursor-pointer",
+		"[&_[slot=description]]:col-start-2 [&_[slot=description]]:row-start-2 [&_[slot=description]]:text-xs [&_[slot=description]]:text-muted-foreground"
 	]),
 	section: cva(""),
 	header: cva("[&_header]:px-2 [&_header]:py-1.5 [&_header]:text-xs [&_header]:font-medium [&_header]:text-muted-foreground")
@@ -648,7 +656,7 @@ const Popover = cva([
 //#region src/components/Radio.styles.ts
 const Radio = {
 	container: cva("group-disabled/radio:cursor-not-allowed"),
-	label: cva(["text-sm font-normal cursor-pointer", "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"]),
+	label: cva(["text-sm font-normal cursor-pointer w-full", "group-disabled/radio:text-disabled-foreground group-disabled/radio:cursor-not-allowed"]),
 	radio: cva([
 		"aspect-square size-4 rounded-full",
 		"border border-input shadow-xs",
@@ -674,7 +682,8 @@ const Pagination = {
 	navigationButton: cva([
 		...button,
 		"disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
-		"h-9 py-2 gap-1 px-2.5"
+		"h-9 py-2 gap-1 px-2.5",
+		"has-[+_[hidden]]:mr-0"
 	]),
 	pageButton: cva([
 		...button,
@@ -686,8 +695,44 @@ const Pagination = {
 };
 
 //#endregion
-//#region src/components/ProgressCycle.styles.ts
-const ProgressCycle = cva(["stroke-foreground"]);
+//#region src/components/ProgressCircle.styles.ts
+const ProgressCircle = {
+	container: cva("stroke-foreground", {
+		variants: {
+			variant: {
+				default: "",
+				inverted: "stroke-secondary"
+			},
+			size: {
+				default: "",
+				large: "",
+				fit: ""
+			}
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default"
+		}
+	}),
+	loader: cva("", {
+		variants: {
+			variant: {
+				default: "",
+				inverted: ""
+			},
+			size: {
+				default: "size-20",
+				large: "size-36",
+				fit: "size-fit"
+			}
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default"
+		}
+	}),
+	label: cva("text-current text-sm")
+};
 
 //#endregion
 //#region src/components/SectionMessage.styles.ts
@@ -739,7 +784,7 @@ const Select = {
 		"h-input",
 		"cursor-pointer",
 		"*:data-placeholder:text-placeholder",
-		"has-[+_[aria-hidden=\"true\"]]:mb-0"
+		"has-[+_[aria-hidden=true]]:mb-0"
 	])
 };
 
@@ -863,14 +908,14 @@ const Tag = {
 		"font-medium text-xs",
 		"h-7 px-2 cursor-default",
 		"bg-background",
-		"data-selected:text-white data-selected:bg-brand",
-		"data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled-foreground data-[disabled]:bg-disabled",
+		"selected:text-white selected:bg-brand",
+		"data-disabled:cursor-not-allowed data-disabled:text-disabled-foreground data-disabled:bg-disabled",
 		"focus-visible:util-focus-ring outline-none"
 	]),
 	closeButton: cva(["size-4", "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"]),
 	listItems: cva(["flex flex-wrap gap-1", "mb-0"]),
 	removeAll: cva([
-		"inline whitespace-nowrap font-medium transition-[color,box-shadow,transform]",
+		"inline whitespace-nowrap font-medium transition-[color,box-shadow,transform] rounded-md",
 		"duration-150 active:scale-[0.98] pressed:scale-[0.98]",
 		"focus-visible:util-focus-ring outline-none",
 		"cursor-pointer",
@@ -1001,8 +1046,8 @@ const Tooltip = {
 const Underlay = cva("bg-black/80 px-4");
 
 //#endregion
-//#region src/components/XLoader.styles.ts
-const XLoader = {
+//#region src/components/Loader.styles.ts
+const Loader = {
 	container: cva("grid place-items-center text-brand", {
 		variants: {
 			variant: {
@@ -1043,13 +1088,13 @@ const XLoader = {
 //#endregion
 //#region src/components/Breadcrumbs.styles.ts
 const Breadcrumbs = {
-	container: cva(["flex flex-wrap items-center"], {
+	container: cva(["flex flex-wrap items-center gap-1.5 wrap-break-word text-sm sm:gap-2.5 text-muted-foreground"], {
 		variants: {
-			variant: { default: "text-foreground" },
+			variant: { default: "" },
 			size: {
-				small: "text-xs gap-1.5",
-				default: "text-sm gap-1.5",
-				large: "text-base gap-1.5"
+				small: "text-xs",
+				default: "text-sm",
+				large: "text-base"
 			}
 		},
 		defaultVariants: {
@@ -1057,9 +1102,21 @@ const Breadcrumbs = {
 			size: "default"
 		}
 	}),
-	item: cva("inline-flex items-center gap-1.5 whitespace-nowrap "),
-	link: cva("hover:underline cursor-pointer"),
-	current: cva("font-medium")
+	item: cva("inline-flex items-center  gap-1.5 sm:gap-2.5"),
+	link: cva("transition-colors hover:text-foreground cursor-pointer"),
+	current: cva("font-normal text-foreground")
+};
+
+//#endregion
+//#region src/components/FileField.styles.ts
+const FileField = {
+	container: cva("space-y-2 "),
+	dropZone: cva("data-[drop-target=true]:bg-muted border-input has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 relative flex min-h-52 flex-col items-center overflow-hidden rounded-xl border border-dashed p-4 transition-colors not-data-[files]:justify-center has-[input:focus]:ring-[3px]"),
+	dropZoneContent: cva("flex flex-col items-center justify-center gap-2 px-4 py-3 text-center"),
+	dropZoneLabel: cva("text-sm font-medium"),
+	item: cva("flex min-w-0 flex-col gap-0.5"),
+	itemLabel: cva("truncate text-[13px] font-medium"),
+	itemDescription: cva("text-muted-foreground text-xs")
 };
 
 //#endregion
@@ -1082,6 +1139,7 @@ var components_exports = /* @__PURE__ */ __export({
 	Divider: () => Divider,
 	Drawer: () => Drawer,
 	Field: () => Field,
+	FileField: () => FileField,
 	Headline: () => Headline,
 	HelpText: () => HelpText,
 	IconButton: () => IconButton,
@@ -1090,13 +1148,14 @@ var components_exports = /* @__PURE__ */ __export({
 	Link: () => Link,
 	List: () => List,
 	ListBox: () => ListBox,
+	Loader: () => Loader,
 	Menu: () => Menu,
 	Modal: () => Modal,
 	MultiSelect: () => MultiSelect,
 	NumberField: () => NumberField,
 	Pagination: () => Pagination,
 	Popover: () => Popover,
-	ProgressCycle: () => ProgressCycle,
+	ProgressCircle: () => ProgressCircle,
 	Radio: () => Radio,
 	SectionMessage: () => SectionMessage,
 	Select: () => Select,
@@ -1109,8 +1168,7 @@ var components_exports = /* @__PURE__ */ __export({
 	TextArea: () => TextArea,
 	Toast: () => Toast,
 	Tooltip: () => Tooltip,
-	Underlay: () => Underlay,
-	XLoader: () => XLoader
+	Underlay: () => Underlay
 });
 
 //#endregion