@marigold/theme-rui 1.3.0 → 1.4.1

package/dist/index.mjs

@@ -10,6 +10,7 @@ __export(components_exports, {
   Accordion: () => Accordion,
   Badge: () => Badge,
   Body: () => Body,
+  Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   Calendar: () => Calendar,
   Card: () => Card,
@@ -51,6 +52,7 @@ __export(components_exports, {
   Tag: () => Tag,
   Text: () => Text,
   TextArea: () => TextArea,
+  Toast: () => Toast,
   Tooltip: () => Tooltip,
   Underlay: () => Underlay,
   XLoader: () => XLoader
@@ -145,7 +147,7 @@ import { cva as cva4 } from "@marigold/system";
 var Button = cva4(
   [
     "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"
@@ -153,13 +155,10 @@ var Button = cva4(
   {
     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",
@@ -197,7 +196,7 @@ import { cva as cva6 } from "@marigold/system";
 var Checkbox = {
   checkbox: cva6([
     "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",
@@ -242,11 +241,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: cva7([
     "[&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",
@@ -311,7 +310,7 @@ import { cva as cva12 } from "@marigold/system";
 
 // src/components/Input.styles.ts
 import { cva as cva11 } from "@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";
@@ -552,9 +551,14 @@ var ListBox = {
 // src/components/Menu.styles.ts
 import { cva as cva28 } from "@marigold/system";
 var Menu = {
-  container: cva28(["text-foreground z-50 overflow-hidden rounded-md p-1"]),
+  container: cva28([
+    "text-foreground z-50 overflow-hidden rounded-md p-1 outline-none"
+  ]),
   item: cva28([
-    "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: cva28(
     "text-muted-foreground px-2 py-1.5 text-xs font-medium border-t border-t-border in-first:border-t-0"
@@ -562,14 +566,14 @@ var Menu = {
   button: cva28(
     [
       "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: {
@@ -618,7 +622,7 @@ import { cva as cva30 } from "@marigold/system";
 var MultiSelect = {
   field: cva30("space-y-2"),
   container: cva30([
-    "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",
@@ -668,7 +672,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: cva31([
@@ -706,7 +710,7 @@ var Radio = {
   ]),
   radio: cva33([
     "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"
@@ -716,26 +720,21 @@ var Radio = {
 
 // src/components/Pagination.styles.ts
 import { cva as cva34 } from "@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: cva34("flex items-center justify-center space-x-2"),
   navigationButton: cva34([
-    "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: cva34([
-    "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: cva34("h-4 w-4")
+  icon: cva34("h-4 w-4"),
+  ellipsis: cva34("text-text-base flex h-8 w-8 items-center justify-center")
 };
 
 // src/components/ProgressCycle.styles.ts
@@ -850,7 +849,7 @@ var Switch = {
   ]),
   thumb: cva39([
     "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"
   ])
@@ -996,7 +995,8 @@ var Tag = {
     "size-4",
     "disabled:bg-disabled disabled:text-disabled-foreground disabled:cursor-not-allowed"
   ]),
-  listItems: cva42("flex flex-wrap items-center gap-1")
+  listItems: cva42("flex flex-wrap items-center gap-1 mb-0")
+  // mb-0 prevents whitespace when the hidden field is rendered
 };
 
 // src/components/TextArea.styles.ts
@@ -1042,10 +1042,70 @@ var Text = cva44("", {
   }
 });
 
-// src/components/Tooltip.styles.ts
+// src/components/Toast.styles.ts
 import { cva as cva45 } from "@marigold/system";
+var Toast = {
+  toast: cva45([
+    "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: cva45([
+    "text-sm font-medium",
+    "[grid-area:title]",
+    "flex items-center mb-0"
+  ]),
+  description: cva45([
+    "text-muted-foreground text-sm",
+    "[grid-area:description] mt-0"
+  ]),
+  closeButton: cva45([
+    "[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: cva45(
+    [
+      "[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: cva45(["contents"]),
+  "bottom-left": cva45(["fixed bottom-4 left-4 flex flex-col-reverse"]),
+  "bottom-right": cva45(["fixed bottom-4 right-4 flex flex-col-reverse"]),
+  "top-left": cva45(["fixed top-4 left-4 flex flex-col"]),
+  "top-right": cva45(["fixed top-4 right-4 flex flex-col"]),
+  top: cva45([
+    "fixed top-4 left-1/2 right-auto -translate-x-1/2 flex flex-col items-center w-auto align-middle"
+  ]),
+  bottom: cva45([
+    "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
+import { cva as cva46 } from "@marigold/system";
 var Tooltip = {
-  container: cva45(
+  container: cva46(
     [
       "relative z-50 max-w-70 rounded-md border px-3 py-1.5 text-sm",
       "placement-top:mb-2",
@@ -1065,7 +1125,7 @@ var Tooltip = {
       }
     }
   ),
-  arrow: cva45(
+  arrow: cva46(
     [
       // right
       "data-[placement=right]:[&_svg]:rotate-90",
@@ -1089,13 +1149,13 @@ var Tooltip = {
 };
 
 // src/components/Underlay.styles.ts
-import { cva as cva46 } from "@marigold/system";
-var Underlay = cva46("bg-black/80 px-4");
+import { cva as cva47 } from "@marigold/system";
+var Underlay = cva47("bg-black/80 px-4");
 
 // src/components/XLoader.styles.ts
-import { cva as cva47 } from "@marigold/system";
+import { cva as cva48 } from "@marigold/system";
 var XLoader = {
-  container: cva47("grid place-items-center text-brand", {
+  container: cva48("grid place-items-center text-brand", {
     variants: {
       variant: {
         default: "",
@@ -1112,7 +1172,7 @@ var XLoader = {
       size: "default"
     }
   }),
-  loader: cva47("size-full", {
+  loader: cva48("size-full", {
     variants: {
       variant: {
         default: "",
@@ -1129,7 +1189,31 @@ var XLoader = {
       size: "default"
     }
   }),
-  label: cva47("text-current text-sm")
+  label: cva48("text-current text-sm")
+};
+
+// src/components/Breadcrumbs.styles.ts
+import { cva as cva49 } from "@marigold/system";
+var Breadcrumbs = {
+  container: cva49(["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: cva49("inline-flex items-center gap-1.5 whitespace-nowrap "),
+  link: cva49("hover:underline cursor-pointer"),
+  current: cva49("font-medium")
 };
 
 // src/theme.ts