@marigold/theme-rui 1.3.0 → 1.4.1

package/dist/index.js

@@ -31,6 +31,7 @@ __export(components_exports, {
   Accordion: () => Accordion,
   Badge: () => Badge,
   Body: () => Body,
+  Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   Calendar: () => Calendar,
   Card: () => Card,
@@ -72,6 +73,7 @@ __export(components_exports, {
   Tag: () => Tag,
   Text: () => Text,
   TextArea: () => TextArea,
+  Toast: () => Toast,
   Tooltip: () => Tooltip,
   Underlay: () => Underlay,
   XLoader: () => XLoader
@@ -166,7 +168,7 @@ var import_system4 = require("@marigold/system");
 var Button = (0, import_system4.cva)(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow]",
-    "[&_svg]:shrink-0",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
     "focus-visible:util-focus-ring outline-none disabled:util-disabled",
     "pending:text-disabled-foreground pending:bg-disabled pending:cursor-not-allowed pending:border-none",
     "cursor-pointer"
@@ -174,13 +176,10 @@ var Button = (0, import_system4.cva)(
   {
     variants: {
       variant: {
-        primary: "bg-brand text-brand-foreground shadow-sm shadow-black/5 hover:bg-brand/90",
-        secondary: "border border-input bg-background shadow-sm shadow-black/5 hover:bg-hover hover:text-foreground expanded:bg-hover",
+        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 hover:bg-destructive/90",
-        ghost: "hover:bg-hover hover:text-foreground",
-        // only used for calendar in MonthListBox and YearListBox to have a hover over other options
-        // TODO: Remove this in future and rethink the MonthListBox and YearListBox or use another variant
-        text: "hover:bg-hover"
+        ghost: "hover:bg-hover hover:text-foreground"
       },
       size: {
         default: "h-button px-4 py-2 [&_svg]:size-4",
@@ -218,7 +217,7 @@ var import_system6 = require("@marigold/system");
 var Checkbox = {
   checkbox: (0, import_system6.cva)([
     "grid size-4 shrink-0 place-content-center rounded",
-    "border border-input shadow-sm shadow-black/5",
+    "border border-input shadow-xs",
     "group-focus-visible/checkbox:util-focus-ring outline-none",
     "group-disabled/checkbox:group-selected/checkbox:bg-disabled group-disabled/checkbox:border-disabled! group-disabled/checkbox:text-disabled-foreground group-disabled/checkbox:cursor-not-allowed",
     "group-selected/checkbox:border-brand group-selected/checkbox:bg-brand group-selected/checkbox:text-brand-foreground",
@@ -263,11 +262,11 @@ var Calendar = {
     "focus-visible:util-focus-ring outline-none",
     "cursor-pointer",
     "hover:bg-hover",
-    "aria-[current=true]:bg-brand aria-[current=true]:text-brand-foreground aria-[current=true]:shadow-sm aria-[current=true]:shadow-black/5 aria-[current=true]:hover:bg-brand/90"
+    "aria-[current=true]:bg-brand aria-[current=true]:text-brand-foreground aria-[current=true]:shadow-xs aria-[current=true]:hover:bg-brand/90"
   ]),
   select: (0, import_system7.cva)([
     "[&svg]:text-muted-foreground/80",
-    "flex w-full px-3 py-2 rounded-lg shadow-sm shadow-black/5 border border-input bg-background text-sm text-foreground transition-shadow",
+    "flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow",
     "focus-visible:util-focus-ring outline-none",
     "h-input",
     "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled",
@@ -332,7 +331,7 @@ var import_system12 = require("@marigold/system");
 
 // src/components/Input.styles.ts
 var import_system11 = require("@marigold/system");
-var inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-sm shadow-black/5 border border-input bg-background text-sm text-foreground transition-shadow group-read-only/field:bg-muted";
+var inputContainer = "flex w-full px-3 py-2 rounded-lg shadow-xs border border-input bg-background text-sm text-foreground transition-shadow group-read-only/field:bg-muted";
 var inputDisabled = "disabled:cursor-not-allowed disabled:text-disabled-foreground disabled:bg-disabled";
 var inputInvalid = "group-invalid/field:border-destructive group-invalid/field:focus:border-destructive group-invalid/field:focus:ring-destructive/20";
 var inputReadOnly = "group-read-only/field:bg-muted";
@@ -573,9 +572,14 @@ var ListBox = {
 // src/components/Menu.styles.ts
 var import_system28 = require("@marigold/system");
 var Menu = {
-  container: (0, import_system28.cva)(["text-foreground z-50 overflow-hidden rounded-md p-1"]),
+  container: (0, import_system28.cva)([
+    "text-foreground z-50 overflow-hidden rounded-md p-1 outline-none"
+  ]),
   item: (0, import_system28.cva)([
-    "focus:bg-focus focus:text-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none disabled:text-disabled-foreground"
+    "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-foreground outline-hidden select-none",
+    "focus:bg-focus",
+    "disabled:text-disabled-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4 [&_svg]:opacity-60"
   ]),
   section: (0, import_system28.cva)(
     "text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"
@@ -583,14 +587,14 @@ var Menu = {
   button: (0, import_system28.cva)(
     [
       "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow]",
-      "[&_svg]:shrink-0",
+      "[&_svg]:shrink-0 [&_svg]:pointer-events-none",
       "focus-visible:util-focus-ring outline-none disabled:util-disabled",
       "cursor-pointer"
     ],
     {
       variants: {
         variant: {
-          secondary: "border border-input bg-background shadow-sm shadow-black/5 hover:bg-hover hover:text-foreground expanded:bg-hover",
+          secondary: "border border-input bg-background shadow-xs hover:bg-hover hover:text-foreground expanded:bg-hover",
           ghost: "hover:bg-hover hover:text-foreground expanded:bg-hover"
         },
         size: {
@@ -639,7 +643,7 @@ var import_system30 = require("@marigold/system");
 var MultiSelect = {
   field: (0, import_system30.cva)("space-y-2"),
   container: (0, import_system30.cva)([
-    "bg-background shadow-sm shadow-black/5 border",
+    "bg-background shadow-xs border",
     "px-3 text-sm text-foreground transition-shadow",
     "border border-input rounded-lg outline-hidden",
     "aria-disabled:bg-disabled aria-disabled:text-disabled-foreground aria-disabled:hover:border-input aria-disabled:border-input aria-disabled:cursor-not-allowed",
@@ -689,7 +693,7 @@ var NumberField = {
     "has-focus-visible:util-focus-ring outline-none",
     inputInvalid,
     inputReadOnly,
-    "border border-input text-sm shadow-sm shadow-black/5 transition-shadow",
+    "border border-input text-sm shadow-xs transition-shadow",
     "data-invalid:data-[focus-within]:border-destructive data-invalid:data-[focus-within]:ring-destructive/20"
   ]),
   stepper: (0, import_system31.cva)([
@@ -727,7 +731,7 @@ var Radio = {
   ]),
   radio: (0, import_system33.cva)([
     "aspect-square size-4 rounded-full",
-    "border border-input shadow-sm shadow-black/5",
+    "border border-input shadow-xs",
     "group-focus-visible/radio:util-focus-ring outline-none",
     "group-disabled/radio:group-selected/radio:bg-disabled group-disabled/radio:border-disabled! group-disabled/radio:cursor-not-allowed",
     "group-selected/radio:border-brand group-selected/radio:bg-brand group-selected/radio:text-brand-foreground"
@@ -737,26 +741,21 @@ var Radio = {
 
 // src/components/Pagination.styles.ts
 var import_system34 = require("@marigold/system");
+var button = "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colorsfocus-visible:util-focus-ring outline-nonedisabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground[&_svg]:pointer-events-none [&_svg]:shrink-0hover:bg-hover hover:text-hover-foregroundcursor-pointer";
 var Pagination = {
+  container: (0, import_system34.cva)("flex items-center justify-center space-x-2"),
   navigationButton: (0, import_system34.cva)([
-    "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors",
-    "focus-visible:util-focus-ring outline-none",
+    button,
     "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
-    "hover:bg-hover hover:text-hover-foreground",
-    "h-9 py-2 gap-1 px-2.5",
-    "cursor-pointer"
+    "h-9 py-2 gap-1 px-2.5"
   ]),
   pageButton: (0, import_system34.cva)([
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors bg-background size-9",
-    "focus-visible:util-focus-ring outline-none",
-    "disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
-    "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs",
-    "hover:bg-hover hover:text-hover-foreground",
-    "cursor-pointer"
+    button,
+    "bg-background size-9",
+    "data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:shadow-xs"
   ]),
-  icon: (0, import_system34.cva)("h-4 w-4")
+  icon: (0, import_system34.cva)("h-4 w-4"),
+  ellipsis: (0, import_system34.cva)("text-text-base flex h-8 w-8 items-center justify-center")
 };
 
 // src/components/ProgressCycle.styles.ts
@@ -871,7 +870,7 @@ var Switch = {
   ]),
   thumb: (0, import_system39.cva)([
     "pointer-events-none block size-5 rounded-full",
-    "bg-background shadow-sm shadow-black/5",
+    "bg-background shadow-xs",
     "ring-0 transition-transform duration-150 ease-out-quint",
     "group-selected/switch:translate-x-4 translate-x-0"
   ])
@@ -1017,7 +1016,8 @@ var Tag = {
     "size-4",
     "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"
   ]),
-  listItems: (0, import_system42.cva)("flex flex-wrap items-center gap-1")
+  listItems: (0, import_system42.cva)("flex flex-wrap items-center gap-1 mb-0")
+  // mb-0 prevents whitespace when the hidden field is rendered
 };
 
 // src/components/TextArea.styles.ts
@@ -1063,10 +1063,70 @@ var Text = (0, import_system44.cva)("", {
   }
 });
 
-// src/components/Tooltip.styles.ts
+// src/components/Toast.styles.ts
 var import_system45 = require("@marigold/system");
+var Toast = {
+  toast: (0, import_system45.cva)([
+    "z-50",
+    "max-w-sm w-full pointer-events-auto overflow-hidden rounded-md border shadow-lg bg-background text-foreground border-border",
+    "grid grid-cols-[auto_1fr_auto] grid-rows-[auto_auto] gap-x-1 gap-y-0",
+    '[grid-template-areas:"icon_title_close""icon_description_description"] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+    "p-4"
+  ]),
+  title: (0, import_system45.cva)([
+    "text-sm font-medium",
+    "[grid-area:title]",
+    "flex items-center mb-0"
+  ]),
+  description: (0, import_system45.cva)([
+    "text-muted-foreground text-sm",
+    "[grid-area:description] mt-0"
+  ]),
+  closeButton: (0, import_system45.cva)([
+    "[grid-area:close] row-end-1",
+    "ml-2",
+    "flex items-center justify-center",
+    "size-5 rounded transition-[color,box-shadow] outline-none",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] text-muted-foreground hover:text-hover-foreground"
+  ]),
+  icon: (0, import_system45.cva)(
+    [
+      "[grid-area:icon]",
+      "flex items-center justify-center",
+      "h-5 w-5 leading-none"
+    ],
+    {
+      variants: {
+        variant: {
+          default: "",
+          success: "text-success-muted-accent",
+          warning: "text-warning-muted-accent",
+          info: "text-info-muted-accent",
+          error: "text-destructive-muted-accent"
+        }
+      },
+      defaultVariants: {
+        variant: "default"
+      }
+    }
+  ),
+  content: (0, import_system45.cva)(["contents"]),
+  "bottom-left": (0, import_system45.cva)(["fixed bottom-4 left-4 flex flex-col-reverse"]),
+  "bottom-right": (0, import_system45.cva)(["fixed bottom-4 right-4 flex flex-col-reverse"]),
+  "top-left": (0, import_system45.cva)(["fixed top-4 left-4 flex flex-col"]),
+  "top-right": (0, import_system45.cva)(["fixed top-4 right-4 flex flex-col"]),
+  top: (0, import_system45.cva)([
+    "fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"
+  ]),
+  bottom: (0, import_system45.cva)([
+    "fixed bottom-4 left-1/2 right-auto -translate-x-1/2 flex flex-col-reverse items-center w-auto align-middle"
+  ])
+};
+
+// src/components/Tooltip.styles.ts
+var import_system46 = require("@marigold/system");
 var Tooltip = {
-  container: (0, import_system45.cva)(
+  container: (0, import_system46.cva)(
     [
       "relative z-50 max-w-70 rounded-md border px-3 py-1.5 text-sm",
       "placement-top:mb-2",
@@ -1086,7 +1146,7 @@ var Tooltip = {
       }
     }
   ),
-  arrow: (0, import_system45.cva)(
+  arrow: (0, import_system46.cva)(
     [
       // right
       "data-[placement=right]:[&_svg]:rotate-90",
@@ -1110,13 +1170,13 @@ var Tooltip = {
 };
 
 // src/components/Underlay.styles.ts
-var import_system46 = require("@marigold/system");
-var Underlay = (0, import_system46.cva)("bg-black/80 px-4");
+var import_system47 = require("@marigold/system");
+var Underlay = (0, import_system47.cva)("bg-black/80 px-4");
 
 // src/components/XLoader.styles.ts
-var import_system47 = require("@marigold/system");
+var import_system48 = require("@marigold/system");
 var XLoader = {
-  container: (0, import_system47.cva)("grid place-items-center text-brand", {
+  container: (0, import_system48.cva)("grid place-items-center text-brand", {
     variants: {
       variant: {
         default: "",
@@ -1133,7 +1193,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  loader: (0, import_system47.cva)("size-full", {
+  loader: (0, import_system48.cva)("size-full", {
     variants: {
       variant: {
         default: "",
@@ -1150,7 +1210,31 @@ var XLoader = {
       size: "default"
     }
   }),
-  label: (0, import_system47.cva)("text-current text-sm")
+  label: (0, import_system48.cva)("text-current text-sm")
+};
+
+// src/components/Breadcrumbs.styles.ts
+var import_system49 = require("@marigold/system");
+var Breadcrumbs = {
+  container: (0, import_system49.cva)(["flex flex-wrap items-center"], {
+    variants: {
+      variant: {
+        default: "text-foreground"
+      },
+      size: {
+        small: "text-xs gap-1.5",
+        default: "text-sm gap-1.5",
+        large: "text-base gap-1.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }),
+  item: (0, import_system49.cva)("inline-flex items-center gap-1.5 whitespace-nowrap "),
+  link: (0, import_system49.cva)("hover:underline cursor-pointer"),
+  current: (0, import_system49.cva)("font-medium")
 };
 
 // src/theme.ts