@marigold/theme-docs 2.0.3 → 2.0.5

package/dist/{chunk-Y2U3HXIY.mjs → chunk-KMOXDTTY.mjs}

@@ -56,6 +56,19 @@ var blue = {
   900: "#1e3a8a",
   950: "#172554"
 };
+var green = {
+  50: "#f0fdf4",
+  100: "#ecfccb",
+  200: "#d9f99d",
+  300: "#bef264",
+  400: "#a3e635",
+  500: "#84cc16",
+  600: "#65a30d",
+  700: "#4d7c0f",
+  800: "#3f6212",
+  900: "#365314",
+  950: "#1a2e05"
+};
 var neutral = {
   50: "#fafafa",
   100: "#f5f5f5",
@@ -69,6 +82,19 @@ var neutral = {
   900: "#171717",
   950: "#0a0a0a"
 };
+var red = {
+  50: "#fef2f2",
+  100: "#fee2e2",
+  200: "#fecaca",
+  300: "#fca5a5",
+  400: "#f87171",
+  500: "#ef4444",
+  600: "#dc2626",
+  700: "#b91c1c",
+  800: "#991b1b",
+  900: "#7f1d1d",
+  950: "#450a0a"
+};
 var slate = {
   50: "#f8fafc",
   100: "#f1f5f9",
@@ -141,14 +167,19 @@ var colors = {
       overlay: white
     },
     // Status
-    info: blue[100],
+    success: green[100],
+    error: red[50],
+    info: blue[50],
     warning: amber[50]
   },
   // Border
   // ---------------
   border: {
     DEFAULT: slate[300],
-    primary: slate[950]
+    primary: slate[950],
+    // status
+    success: green[600],
+    error: red[600]
   }
 };
 
@@ -158,4 +189,4 @@ export {
   __toESM,
   colors
 };
-//# sourceMappingURL=chunk-Y2U3HXIY.mjs.map
+//# sourceMappingURL=chunk-KMOXDTTY.mjs.map

package/dist/chunk-KMOXDTTY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["// Tailwind Colors\n// ---------------\n/**\n * We copy/pasted the colors here to not end up with a lot of unused code in our bundle.\n */\n\nconst white = '#fff';\n\nconst amber = {\n  50: '#fffbeb',\n  100: '#fef3c7',\n  200: '#fde68a',\n  300: '#fcd34d',\n  400: '#fbbf24',\n  500: '#f59e0b',\n  600: '#d97706',\n  700: '#b45309',\n  800: '#92400e',\n  900: '#78350f',\n  950: '#451a03',\n};\n\nconst blue = {\n  50: '#eff6ff',\n  100: '#dbeafe',\n  200: '#bfdbfe',\n  300: '#93c5fd',\n  400: '#60a5fa',\n  500: '#3b82f6',\n  600: '#2563eb',\n  700: '#1d4ed8',\n  800: '#1e40af',\n  900: '#1e3a8a',\n  950: '#172554',\n};\n\nconst green = {\n  50: '#f0fdf4',\n  100: '#ecfccb',\n  200: '#d9f99d',\n  300: '#bef264',\n  400: '#a3e635',\n  500: '#84cc16',\n  600: '#65a30d',\n  700: '#4d7c0f',\n  800: '#3f6212',\n  900: '#365314',\n  950: '#1a2e05',\n};\n\nconst neutral = {\n  50: '#fafafa',\n  100: '#f5f5f5',\n  200: '#e5e5e5',\n  300: '#d4d4d4',\n  400: '#a3a3a3',\n  500: '#737373',\n  600: '#525252',\n  700: '#404040',\n  800: '#262626',\n  900: '#171717',\n  950: '#0a0a0a',\n};\n\nconst red = {\n  50: '#fef2f2',\n  100: '#fee2e2',\n  200: '#fecaca',\n  300: '#fca5a5',\n  400: '#f87171',\n  500: '#ef4444',\n  600: '#dc2626',\n  700: '#b91c1c',\n  800: '#991b1b',\n  900: '#7f1d1d',\n  950: '#450a0a',\n};\n\nconst slate = {\n  50: '#f8fafc',\n  100: '#f1f5f9',\n  200: '#e2e8f0',\n  300: '#cbd5e1',\n  400: '#94a3b8',\n  500: '#64748b',\n  600: '#475569',\n  700: '#334155',\n  800: '#1e293b',\n  900: '#0f172a',\n  950: '#020617',\n};\n\n// Custom Colors\n// ---------------\nconst brand = {\n  primary: {\n    50: '#fff2e6',\n    100: '#fee6cd',\n    200: '#fdcc9b',\n    300: '#fcb369',\n    400: '#fb9937',\n    500: '#fa8005',\n    600: '#c86604',\n    700: '#964d03',\n    800: '#643302',\n    900: '#321a01',\n    950: '#190d00',\n  },\n};\n\n// material palenight theme\nconst code = {\n  '50': '#f6f7f9',\n  '100': '#ebecf3',\n  '200': '#d3d6e4',\n  '300': '#acb3cd',\n  '400': '#808cb0',\n  '500': '#606e97',\n  '600': '#4b557e',\n  '700': '#3e4666',\n  '800': '#363d56',\n  '900': '#292d3e',\n  '950': '#202231',\n};\n\nexport const colors = {\n  // Brand\n  // ---------------\n  ...brand,\n  secondary: slate,\n  code,\n\n  // Text\n  // ---------------\n  text: {\n    primary: {\n      DEFAULT: slate[950],\n      muted: slate[500],\n    },\n\n    // State\n    info: blue[800],\n    warning: amber[800],\n  },\n\n  // Background\n  // ---------------\n  bg: {\n    body: slate[50],\n    hover: neutral[100],\n    muted: slate[100],\n\n    underlay: slate[500],\n\n    surface: {\n      DEFAULT: white,\n      raised: slate[200],\n      lowered: slate[700],\n      overlay: white,\n    },\n\n    // Status\n    success: green[100],\n    error: red[50],\n    info: blue[50],\n    warning: amber[50],\n  },\n\n  // Border\n  // ---------------\n  border: {\n    DEFAULT: slate[300],\n    primary: slate[950],\n\n    // status\n    success: green[600],\n    error: red[600],\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/index.js

@@ -32,17 +32,31 @@ __export(components_exports, {
   Button: () => Button,
   Card: () => Card,
   Dialog: () => Dialog,
+  Field: () => Field,
   Header: () => Header,
   Headline: () => Headline,
+  HelpText: () => HelpText,
+  Label: () => Label,
   Link: () => Link,
   List: () => List,
+  ListBox: () => ListBox,
   Menu: () => Menu,
   Popover: () => Popover,
   SectionMessage: () => SectionMessage,
+  Select: () => Select,
   Table: () => Table,
   Tabs: () => Tabs,
   Text: () => Text,
-  Underlay: () => Underlay
+  Underlay: () => Underlay,
+  inputBackground: () => inputBackground,
+  inputBox: () => inputBox,
+  inputDisabled: () => inputDisabled,
+  inputError: () => inputError,
+  inputFocus: () => inputFocus,
+  inputHover: () => inputHover,
+  inputSpacing: () => inputSpacing,
+  xSpacing: () => xSpacing,
+  ySpacing: () => ySpacing
 });
 
 // src/components/Button.styles.ts
@@ -51,7 +65,7 @@ var Button = (0, import_system.cva)("flex gap-2 rounded-sm", {
   variants: {
     variant: {
       ghost: "text-secondary-700 hover:text-secondary-900 p-0",
-      menu: "text-secondary-700 hover:bg-secondary-400/20 rounded-lg px-2 py-1",
+      menu: "text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1",
       sunken: "text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg",
       inverted: "bg-secondary-100"
     },
@@ -68,12 +82,15 @@ var Button = (0, import_system.cva)("flex gap-2 rounded-sm", {
 // src/components/Card.styles.ts
 var import_system2 = require("@marigold/system");
 var Card = (0, import_system2.cva)(
-  ["bg-bg-surface rounded-xl border shadow"],
+  [
+    "bg-bg-surface border-secondary-300 relative overflow-hidden rounded-xl border shadow"
+  ],
   {
     variants: {
       variant: {
         default: "p-6",
-        hovering: "p-6 transition-shadow hover:cursor-pointer hover:shadow-md"
+        hovering: "p-6 transition-shadow hover:cursor-pointer hover:shadow-md",
+        content: "my-6"
       }
     },
     defaultVariants: {
@@ -131,9 +148,97 @@ var Headline = (0, import_system5.cva)("[&>*]:no-underline", {
   }
 });
 
-// src/components/Link.styles.ts
+// src/components/Field.styles.ts
 var import_system6 = require("@marigold/system");
-var Link = (0, import_system6.cva)(
+var Field = (0, import_system6.cva)("grid gap-y-0.5", {
+  variants: {
+    variant: {
+      default: "",
+      floating: [
+        "grid-cols-[min-content_auto] grid-rows-[auto_auto]",
+        "items-center"
+      ]
+    },
+    size: {
+      default: "gap-x-3",
+      small: "gap-x-2"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+
+// src/components/HelpText.styles.ts
+var import_system7 = require("@marigold/system");
+var HelpText = {
+  container: (0, import_system7.cva)(),
+  icon: (0, import_system7.cva)()
+};
+
+// src/components/Input.styles.ts
+var inputBox = "border border-border rounded text-text-primary";
+var inputBackground = "bg-white";
+var xSpacing = {
+  default: "px-3",
+  small: "px-2.5"
+};
+var ySpacing = {
+  default: "py-2",
+  small: "py-1.5"
+};
+var inputSpacing = {
+  default: `${xSpacing.default} ${ySpacing.default}`,
+  small: `${xSpacing.small} ${ySpacing.small}`
+};
+var inputFocus = "";
+var inputDisabled = "";
+var inputError = "";
+var inputHover = "";
+
+// src/components/Label.styles.ts
+var import_system8 = require("@marigold/system");
+var Label = {
+  container: (0, import_system8.cva)("", {
+    variants: {
+      variant: {
+        default: "",
+        floating: [
+          "z-10 col-start-1 row-start-1",
+          "pointer-events-none",
+          "text-secondary-400 text-nowrap",
+          'after:content-[":"]'
+        ]
+      },
+      size: {
+        default: "text-sm",
+        small: "text-xs"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    },
+    compoundVariants: [
+      {
+        variant: "floating",
+        size: "default",
+        className: "pl-4"
+      },
+      {
+        variant: "floating",
+        size: "small",
+        className: "pl-3"
+      }
+    ]
+  }),
+  indicator: (0, import_system8.cva)()
+};
+
+// src/components/Link.styles.ts
+var import_system9 = require("@marigold/system");
+var Link = (0, import_system9.cva)(
   ["font-medium underline underline-offset-4"],
   {
     variants: {
@@ -148,17 +253,51 @@ var Link = (0, import_system6.cva)(
 );
 
 // src/components/List.styles.ts
-var import_system7 = require("@marigold/system");
+var import_system10 = require("@marigold/system");
 var List = {
-  ul: (0, import_system7.cva)("list-inside list-none"),
-  ol: (0, import_system7.cva)(""),
-  item: (0, import_system7.cva)("list-none py-0.5")
+  ul: (0, import_system10.cva)("list-inside list-none"),
+  ol: (0, import_system10.cva)(""),
+  item: (0, import_system10.cva)("list-none py-0.5")
+};
+
+// src/components/ListBox.styles.ts
+var import_system11 = require("@marigold/system");
+var ListBox = {
+  container: (0, import_system11.cva)([
+    "bg-bg-surface-overlay border-border rounded border drop-shadow-lg"
+  ]),
+  list: (0, import_system11.cva)([
+    "outline-none",
+    "p-1",
+    "sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]"
+  ]),
+  option: (0, import_system11.cva)(
+    [
+      "text-text-primary",
+      "cursor-pointer rounded outline-none",
+      "rac-hover:bg-bg-hover rac-focus:bg-bg-hover",
+      "aria-selected:bg-bg-hover"
+    ],
+    {
+      variants: {
+        size: {
+          default: "p-2",
+          small: "px-2 py-1 text-sm"
+        }
+      },
+      defaultVariants: {
+        size: "small"
+      }
+    }
+  ),
+  section: (0, import_system11.cva)(),
+  sectionTitle: (0, import_system11.cva)()
 };
 
 // src/components/Menu.styles.ts
-var import_system8 = require("@marigold/system");
+var import_system12 = require("@marigold/system");
 var Menu = {
-  container: (0, import_system8.cva)(
+  container: (0, import_system12.cva)(
     [
       "border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md",
       "sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]"
@@ -171,14 +310,14 @@ var Menu = {
       }
     }
   ),
-  item: (0, import_system8.cva)("focus:bg-bg-hover cursor-pointer rounded p-2 outline-none", {
+  item: (0, import_system12.cva)("focus:bg-bg-hover cursor-pointer rounded p-2 outline-none", {
     variants: {
       variant: {
         command: ["aria-selected:bg-bg-hover px-4 py-1.5"]
       }
     }
   }),
-  section: (0, import_system8.cva)("", {
+  section: (0, import_system12.cva)("", {
     variants: {
       variant: {
         command: "[&_[cmdk-group-heading]]:text-text-primary-muted [&_[cmdk-group-heading]]:p-4 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium"
@@ -188,9 +327,9 @@ var Menu = {
 };
 
 // src/components/Message.styles.ts
-var import_system9 = require("@marigold/system");
+var import_system13 = require("@marigold/system");
 var SectionMessage = {
-  container: (0, import_system9.cva)(
+  container: (0, import_system13.cva)(
     [
       "not-prose items-center rounded-lg p-4",
       'grid-cols-[min-content,auto] gap-1 [grid-template-areas:"icon_title_title""none_content_content"]'
@@ -204,31 +343,90 @@ var SectionMessage = {
       }
     }
   ),
-  icon: (0, import_system9.cva)("size-6"),
-  title: (0, import_system9.cva)("mb-1 font-bold leading-none tracking-tight"),
-  content: (0, import_system9.cva)("text-sm [&_p]:leading-relaxed")
+  icon: (0, import_system13.cva)("size-6"),
+  title: (0, import_system13.cva)("mb-1 font-bold leading-none tracking-tight"),
+  content: (0, import_system13.cva)("text-sm [&_p]:leading-relaxed")
 };
 
 // src/components/Popover.styles.ts
-var import_system10 = require("@marigold/system");
-var Popover = (0, import_system10.cva)([""], {
-  variants: {
-    variant: {
-      top: ["mb-1"],
-      bottom: ["mt-1"],
-      right: [""],
-      left: [""]
+var import_system14 = require("@marigold/system");
+var Popover = (0, import_system14.cva)([
+  "animate-in",
+  "placement-t:-translate-y-1",
+  "placement-b:translate-y-1",
+  "placement-r:-translate-x-1",
+  "placement-l:translate-x-1"
+]);
+
+// src/components/Select.styles.ts
+var import_system15 = require("@marigold/system");
+var Select = {
+  icon: (0, import_system15.cva)("text-secondary-400", {
+    variants: {
+      variant: {
+        default: "",
+        floating: "justify-self-end"
+      },
+      size: {
+        default: "",
+        small: "size-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
     }
-  }
-});
+  }),
+  select: (0, import_system15.cva)([inputBox, inputBackground, "outline-none"], {
+    variants: {
+      variant: {
+        default: "gap-2",
+        floating: [
+          "shadow",
+          "col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid",
+          // selected value and caret get moved to 2nd col
+          "*:row-star-1 *:col-start-2 *:text-left",
+          // So the button gap is not used to separate label from selected value
+          "gap-[inherit]"
+        ]
+      },
+      size: {
+        default: [inputSpacing.default],
+        small: [inputSpacing.small, "text-xs"]
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    },
+    compoundVariants: [
+      {
+        variant: "floating",
+        size: "default",
+        className: "px-4 py-1.5"
+      },
+      {
+        variant: "floating",
+        size: "small",
+        className: "px-3"
+      }
+    ]
+  })
+};
 
 // src/components/Tabs.styles.ts
-var import_system11 = require("@marigold/system");
+var import_system16 = require("@marigold/system");
 var Tabs = {
-  container: (0, import_system11.cva)(""),
-  tabpanel: (0, import_system11.cva)(""),
-  tabsList: (0, import_system11.cva)("mb-4 border-b"),
-  tab: (0, import_system11.cva)([
+  container: (0, import_system16.cva)("", {
+    variants: {
+      variant: {
+        demo: "my-6"
+      }
+    }
+  }),
+  tabpanel: (0, import_system16.cva)(""),
+  tabsList: (0, import_system16.cva)("mb-4 border-b"),
+  tab: (0, import_system16.cva)([
     "text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium",
     "aria-selected:border-border-primary -m-px border-b-2 border-transparent",
     "focus:outline-none focus-visible:outline"
@@ -236,18 +434,18 @@ var Tabs = {
 };
 
 // src/components/Table.styles.ts
-var import_system12 = require("@marigold/system");
+var import_system17 = require("@marigold/system");
 var Table = {
-  table: (0, import_system12.cva)("table w-full text-sm"),
-  cell: (0, import_system12.cva)(" mt-4 hyphens-auto px-4 py-2 text-sm", {
+  table: (0, import_system17.cva)("my-0 text-sm"),
+  cell: (0, import_system17.cva)("p-3 text-xs", {
     variants: {
       variant: {
         colorTable: "p-4 align-middle"
       }
     }
   }),
-  header: (0, import_system12.cva)("border-b px-4 py-2 text-start"),
-  row: (0, import_system12.cva)("border-b", {
+  header: (0, import_system17.cva)("border-b bg-white px-3 py-2 text-start"),
+  row: (0, import_system17.cva)("divide-y", {
     variants: {
       variant: {
         hover: "hover:bg-neutral-100/50 "
@@ -257,8 +455,8 @@ var Table = {
 };
 
 // src/components/Text.styles.ts
-var import_system13 = require("@marigold/system");
-var Text = (0, import_system13.cva)(
+var import_system18 = require("@marigold/system");
+var Text = (0, import_system18.cva)(
   "leading-7 [&:not(:first-child)]:mt-6",
   {
     variants: {
@@ -273,8 +471,8 @@ var Text = (0, import_system13.cva)(
 );
 
 // src/components/Underlay.styles.ts
-var import_system14 = require("@marigold/system");
-var Underlay = (0, import_system14.cva)("", {
+var import_system19 = require("@marigold/system");
+var Underlay = (0, import_system19.cva)("", {
   variants: {
     variant: {
       modal: "bg-bg-underlay/50 backdrop-blur-sm"
@@ -283,8 +481,8 @@ var Underlay = (0, import_system14.cva)("", {
 });
 
 // src/components/Badge.styles.ts
-var import_system15 = require("@marigold/system");
-var Badge = (0, import_system15.cva)(
+var import_system20 = require("@marigold/system");
+var Badge = (0, import_system20.cva)(
   "inline-flex items-center truncate rounded-[20px] px-2 py-0.5",
   {
     variants: {
@@ -303,8 +501,8 @@ var Badge = (0, import_system15.cva)(
 );
 
 // src/root.ts
-var import_system16 = require("@marigold/system");
-var root = (0, import_system16.cva)("text-text-primary bg-bg-body");
+var import_system21 = require("@marigold/system");
+var root = (0, import_system21.cva)("text-text-primary bg-bg-body");
 
 // src/tokens.ts
 var white = "#fff";
@@ -334,6 +532,19 @@ var blue = {
   900: "#1e3a8a",
   950: "#172554"
 };
+var green = {
+  50: "#f0fdf4",
+  100: "#ecfccb",
+  200: "#d9f99d",
+  300: "#bef264",
+  400: "#a3e635",
+  500: "#84cc16",
+  600: "#65a30d",
+  700: "#4d7c0f",
+  800: "#3f6212",
+  900: "#365314",
+  950: "#1a2e05"
+};
 var neutral = {
   50: "#fafafa",
   100: "#f5f5f5",
@@ -347,6 +558,19 @@ var neutral = {
   900: "#171717",
   950: "#0a0a0a"
 };
+var red = {
+  50: "#fef2f2",
+  100: "#fee2e2",
+  200: "#fecaca",
+  300: "#fca5a5",
+  400: "#f87171",
+  500: "#ef4444",
+  600: "#dc2626",
+  700: "#b91c1c",
+  800: "#991b1b",
+  900: "#7f1d1d",
+  950: "#450a0a"
+};
 var slate = {
   50: "#f8fafc",
   100: "#f1f5f9",
@@ -419,14 +643,19 @@ var colors = {
       overlay: white
     },
     // Status
-    info: blue[100],
+    success: green[100],
+    error: red[50],
+    info: blue[50],
     warning: amber[50]
   },
   // Border
   // ---------------
   border: {
     DEFAULT: slate[300],
-    primary: slate[950]
+    primary: slate[950],
+    // status
+    success: green[600],
+    error: red[600]
   }
 };