@marigold/theme-docs 4.0.2 → 4.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +33 -9
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.mjs +33 -9
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles.css +182 -11
  6. package/dist/theme.css +0 -1
  7. package/package.json +8 -6
package/dist/index.cjs CHANGED
@@ -129,7 +129,7 @@ const IconButton = (0, __marigold_system.cva)();
129
129
 
130
130
  //#endregion
131
131
  //#region src/components/Input.styles.ts
132
- const inputBox = "border border-border rounded-xs text-text-primary";
132
+ const inputBox = "border border-border rounded-sm text-text-primary";
133
133
  const inputBackground = "bg-white";
134
134
  const xSpacing = {
135
135
  default: "px-3",
@@ -223,7 +223,11 @@ const List = {
223
223
  //#endregion
224
224
  //#region src/components/ListBox.styles.ts
225
225
  const ListBox = {
226
- container: (0, __marigold_system.cva)(["bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg"]),
226
+ container: (0, __marigold_system.cva)([
227
+ "bg-bg-surface-overlay border-border rounded-sm border drop-shadow-lg",
228
+ "w-full",
229
+ "group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none group-[[role=dialog]]/tray:drop-shadow-none"
230
+ ]),
227
231
  list: (0, __marigold_system.cva)([
228
232
  "outline-hidden",
229
233
  "p-1",
@@ -311,8 +315,9 @@ const Select = {
311
315
  default: "gap-2",
312
316
  floating: [
313
317
  "shadow-xs",
314
- "col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid",
315
- "*:row-star-1 *:col-start-2 *:text-left",
318
+ "col-span-full row-start-1 grid! grid-cols-subgrid grid-rows-subgrid",
319
+ "*:row-start-1 *:col-start-2 *:text-left",
320
+ "[&>:first-child]:mr-6",
316
321
  "gap-[inherit]"
317
322
  ]
318
323
  },
@@ -346,20 +351,20 @@ const Tabs = {
346
351
  tab: (0, __marigold_system.cva)([
347
352
  "text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium",
348
353
  "aria-selected:border-border-primary -m-px border-b-2 border-transparent",
349
- "focus:outline-hidden focus-visible:outline"
354
+ "focus:outline-hidden focus-visible:state-focus-borderless"
350
355
  ])
351
356
  };
352
357
 
353
358
  //#endregion
354
- //#region src/components/Table.styles.ts
355
- const Table = {
359
+ //#region src/components/LegacyTable.styles.ts
360
+ const LegacyTable = {
356
361
  table: (0, __marigold_system.cva)(["w-full overflow-hidden rounded-lg bg-white/40 text-sm", "border-secondary-200 border-separate border-spacing-0 border"]),
357
362
  thead: (0, __marigold_system.cva)(),
358
363
  headerRow: (0, __marigold_system.cva)(),
359
364
  header: (0, __marigold_system.cva)("px-3 pb-2 pt-3 text-start"),
360
365
  body: (0, __marigold_system.cva)(),
361
366
  row: (0, __marigold_system.cva)([], { variants: { variant: { hover: "hover:bg-neutral-100/80 " } } }),
362
- cell: (0, __marigold_system.cva)(["text-text-primary px-3 py-3.5 text-xs", "border-secondary-200 border-t"], { variants: { variant: { colorTable: "p-4 align-middle" } } })
367
+ cell: (0, __marigold_system.cva)(["prose px-3 py-3.5 text-sm", "border-secondary-200 border-t"], { variants: { variant: { colorTable: "p-4 align-middle" } } })
363
368
  };
364
369
 
365
370
  //#endregion
@@ -371,6 +376,24 @@ const Text = (0, __marigold_system.cva)("leading-7", { variants: { variant: {
371
376
  muted: "text-muted-foreground text-sm"
372
377
  } } });
373
378
 
379
+ //#endregion
380
+ //#region src/components/Tray.styles.ts
381
+ const Tray = {
382
+ overlay: (0, __marigold_system.cva)("bg-black/50 fixed inset-0 z-40 flex items-end justify-center"),
383
+ container: (0, __marigold_system.cva)([
384
+ "w-full border-0 inset-shadow-black inset-shadow-sm/20",
385
+ "relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-t-lg rounded-b-none",
386
+ "bg-bg-surface-overlay shadow-lg",
387
+ "outline-hidden grid",
388
+ "after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-bg-surface-overlay after:content-['']"
389
+ ]),
390
+ dragHandle: (0, __marigold_system.cva)("bg-border mx-auto mt-2 h-1.5 w-12 rounded-full"),
391
+ header: (0, __marigold_system.cva)("border-border border-b px-6 py-4"),
392
+ title: (0, __marigold_system.cva)("font-semibold text-base"),
393
+ content: (0, __marigold_system.cva)("overflow-y-auto outline-none p-2"),
394
+ actions: (0, __marigold_system.cva)("flex flex-row gap-3 justify-end border-border border-t px-6 py-4")
395
+ };
396
+
374
397
  //#endregion
375
398
  //#region src/components/Underlay.styles.ts
376
399
  const Underlay = (0, __marigold_system.cva)("bg-bg-underlay/50 backdrop-blur-xs");
@@ -404,6 +427,7 @@ var components_exports = /* @__PURE__ */ __export({
404
427
  HelpText: () => HelpText,
405
428
  IconButton: () => IconButton,
406
429
  Label: () => Label,
430
+ LegacyTable: () => LegacyTable,
407
431
  Link: () => Link,
408
432
  List: () => List,
409
433
  ListBox: () => ListBox,
@@ -412,9 +436,9 @@ var components_exports = /* @__PURE__ */ __export({
412
436
  Popover: () => Popover,
413
437
  SectionMessage: () => SectionMessage,
414
438
  Select: () => Select,
415
- Table: () => Table,
416
439
  Tabs: () => Tabs,
417
440
  Text: () => Text,
441
+ Tray: () => Tray,
418
442
  Underlay: () => Underlay,
419
443
  inputBackground: () => inputBackground,
420
444
  inputBox: () => inputBox,
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","Table: ThemeComponent<'Table'>","Text: ThemeComponent<'Text'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/Table.styles.ts","../src/components/Text.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n 'flex gap-2 rounded-xs px-3 py-2',\n {\n variants: {\n variant: {\n ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n sunken:\n 'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n inverted: 'bg-secondary-100',\n icon: 'border-none translate-y-0.5 outline-none p-0',\n },\n size: {\n small: 'px-3 py-1.5 text-sm',\n },\n },\n }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n ['relative w-full overflow-hidden rounded-xl'],\n {\n variants: {\n variant: {\n default:\n 'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n hovering:\n 'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n content:\n 'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n outline: 'bg-white/40 my-6 border border-secondary-200',\n lowered: 'bg-bg-surface-raised-lowered p-6',\n image: '',\n },\n size: {\n default: '',\n full: 'size-full',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n 'flex items-center justify-center whitespace-nowrap',\n 'cursor-pointer',\n 'transition-[color,box-shadow]',\n 'rounded',\n '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n closeButton: cva('absolute top-4 right-4 ml-4', {\n variants: {\n variant: {\n fullscreen: ['size-6', 'right-4 top-4'],\n },\n },\n }),\n container: cva('bg-bg-surface', {\n variants: {\n variant: {\n default: 'relative rounded-lg shadow-lg',\n codeblock: [\n 'static px-0 py-6',\n 'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n 'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n '*:max-h-none *:min-w-[75vw]',\n ],\n fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n zoom: 'max-h-[96vh] overflow-y-auto',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }),\n header: cva(''),\n title: cva(''),\n content: cva(''),\n actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n variants: {\n size: {\n 'level-1':\n 'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n 'level-2':\n 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n 'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n 'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n 'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n 'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n 'items-center',\n ],\n },\n size: {\n default: 'gap-x-3',\n small: 'gap-x-2',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n container: cva(),\n icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-xs text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n default: 'px-3',\n small: 'px-2.5',\n};\n\nexport const ySpacing = {\n default: 'py-2',\n small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n default: `${xSpacing.default} ${ySpacing.default}`,\n small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n 'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = cva('', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'z-10 col-start-1 row-start-1',\n 'pointer-events-none',\n 'text-secondary-400 text-nowrap',\n 'after:content-[\":\"]',\n ],\n },\n size: {\n default: 'text-sm',\n small: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'pl-4',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'pl-3',\n },\n ],\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n variants: {\n variant: {\n default:\n 'underline underline-offset-4 transition-all hover:text-slate-700',\n primary:\n 'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n toc: [\n 'text-secondary-500 hover:text-secondary-800 text-xs',\n 'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n ],\n cta: [\n 'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n 'text-sm font-semibold text-purple-100',\n 'transition-all hover:bg-purple-600',\n ],\n ghost: 'hover:underline underline-offset-4',\n shiny:\n 'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n },\n size: {\n inline: '',\n xsmall: 'rounded-full text-xs py-1.5 px-4',\n small: 'px-3 py-1.5 text-sm rounded-xs',\n regular: 'px-3 py-2 rounded-xs',\n large: 'px-8 py-3.5 rounded-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'inline',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n ul: cva('list-inside list-none'),\n ol: cva(''),\n item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n container: cva([\n 'bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg',\n ]),\n list: cva([\n 'outline-hidden',\n 'p-1',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ]),\n item: cva(\n [\n 'text-text-primary',\n 'cursor-pointer rounded-xs outline-hidden',\n 'hover:bg-bg-hover focus:bg-bg-hover',\n 'aria-selected:bg-bg-hover',\n ],\n {\n variants: {\n size: {\n default: 'p-2',\n small: 'px-2 py-1 text-sm',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n ),\n section: cva(),\n header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n container: cva(\n [\n 'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ],\n {\n variants: {\n variant: {\n command:\n '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n },\n },\n }\n ),\n item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n variants: {\n variant: {\n command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n },\n },\n }),\n section: cva('', {\n variants: {\n variant: {\n command:\n '[&_[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',\n },\n },\n }),\n button: cva(\n 'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n container: cva(\n [\n 'not-prose items-center rounded-lg p-4',\n \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']\",\n ],\n {\n variants: {\n variant: {\n info: 'bg-bg-info text-text-info',\n warning: 'bg-bg-warning text-text-warning',\n },\n },\n }\n ),\n icon: cva('size-6'),\n title: cva('mb-1 font-bold leading-none tracking-tight'),\n content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n 'animate-in',\n 'placement-top:-translate-y-1',\n 'placement-bottom:translate-y-1',\n 'placement-right:-translate-x-1',\n 'placement-left:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n inputBackground,\n inputBox,\n inputDisabled,\n inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n icon: cva('text-secondary-400', {\n variants: {\n variant: {\n default: '',\n floating: 'justify-self-end',\n },\n size: {\n default: '',\n small: 'size-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }),\n select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n variants: {\n variant: {\n default: 'gap-2',\n floating: [\n 'shadow-xs',\n 'col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid',\n // selected value and caret get moved to 2nd col\n '*:row-star-1 *:col-start-2 *:text-left',\n // So the button gap is not used to separate label from selected value\n 'gap-[inherit]',\n ],\n },\n size: {\n default: [inputSpacing.default],\n small: [inputSpacing.small, 'text-xs'],\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'px-4 py-1.5',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'px-3',\n },\n ],\n }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n container: cva('', {\n variants: {\n variant: {\n demo: 'my-6',\n },\n },\n }),\n tabpanel: cva(''),\n tabsList: cva('mb-4 border-b'),\n tab: cva([\n 'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n 'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n 'focus:outline-hidden focus-visible:outline',\n ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Table: ThemeComponent<'Table'> = {\n table: cva([\n 'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n 'border-secondary-200 border-separate border-spacing-0 border',\n ]),\n thead: cva(),\n headerRow: cva(),\n header: cva('px-3 pb-2 pt-3 text-start'),\n body: cva(),\n row: cva([], {\n variants: {\n variant: {\n hover: 'hover:bg-neutral-100/80 ',\n },\n },\n }),\n cell: cva(\n ['text-text-primary px-3 py-3.5 text-xs', 'border-secondary-200 border-t'],\n {\n variants: {\n variant: {\n colorTable: 'p-4 align-middle',\n },\n },\n }\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n variants: {\n variant: {\n lead: 'text-muted-foreground text-xl',\n large: 'text-lg font-semibold',\n small: 'text-sm font-medium leading-none',\n muted: 'text-muted-foreground text-sm',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n 'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n 'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n {\n variants: {\n variant: {\n dark: 'bg-bg-inverted text-white',\n warning: 'bg-bg-warning',\n },\n size: {\n default: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'dark',\n size: 'default',\n },\n }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './Table.styles';\nexport * from './Text.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n name: 'docs',\n root,\n components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAEA,MAAaA,oCACX,mCACA,EACE,UAAU;CACR,SAAS;EACP,OAAO;EACP,QACE;EACF,UAAU;EACV,MAAM;EACP;CACD,MAAM,EACJ,OAAO,uBACR;CACF,EACF,CACF;;;;AChBD,MAAaC,kCACX,CAAC,6CAA6C,EAC9C;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,UACE;GACF,SACE;GACF,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;;;;ACxBD,MAAaC,yCAAiD;CAC5D;CACA;CACA;CACA;CACA;CACD,CAAC;;;;ACPF,MAAaC,SAAmC;CAC9C,wCAAiB,+BAA+B,EAC9C,UAAU,EACR,SAAS,EACP,YAAY,CAAC,UAAU,gBAAgB,EACxC,EACF,EACF,CAAC;CACF,sCAAe,iBAAiB;EAC9B,UAAU,EACR,SAAS;GACP,SAAS;GACT,WAAW;IACT;IACA;IACA;IACA;IACD;GACD,YAAY;GACZ,MAAM;GACP,EACF;EACD,iBAAiB,EACf,SAAS,WACV;EACF,CAAC;CACF,mCAAY,GAAG;CACf,kCAAW,GAAG;CACd,oCAAa,GAAG;CAChB,oCAAa,GAAG;CACjB;;;;AC9BD,MAAaC,sCAA2C,kBAAkB,EACxE,UAAU,EACR,MAAM;CACJ,WACE;CACF,WACE;CACF,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;;;;ACbF,MAAaC,mCAAqC,kBAAkB;CAClE,UAAU;EACR,SAAS;GACP,SAAS;GACT,UAAU,CACR,sDACA,eACD;GACF;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;;;;AClBF,MAAaC,WAAuC;CAClD,uCAAgB;CAChB,kCAAW;CACZ;;;;ACHD,MAAaC,yCAAgD;;;;ACA7D,MAAa,WAAW;AACxB,MAAa,kBAAkB;AAI/B,MAAa,WAAW;CACtB,SAAS;CACT,OAAO;CACR;AAED,MAAa,WAAW;CACtB,SAAS;CACT,OAAO;CACR;AAED,MAAa,eAAe;CAC1B,SAAS,GAAG,SAAS,QAAQ,GAAG,SAAS;CACzC,OAAO,GAAG,SAAS,MAAM,GAAG,SAAS;CACtC;AAID,MAAa,aAAa;AAC1B,MAAa,gBACX;AACF,MAAa,aAAa;AAC1B,MAAa,aAAa;;;;AC1B1B,MAAaC,mCAAqC,IAAI;CACpD,UAAU;EACR,SAAS;GACP,SAAS;GACT,UAAU;IACR;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACD,kBAAkB,CAChB;EACE,SAAS;EACT,MAAM;EACN,WAAW;EACZ,EACD;EACE,SAAS;EACT,MAAM;EACN,WAAW;EACZ,CACF;CACF,CAAC;;;;AChCF,MAAaC,kCAAmC,CAAC,cAAc,EAAE;CAC/D,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,WAAW;GACX,KAAK,CACH,uDACA,mFACD;GACD,KAAK;IACH;IACA;IACA;IACD;GACD,OAAO;GACP,OACE;GACH;EACD,MAAM;GACJ,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;;;;ACjCF,MAAaC,OAA+B;CAC1C,+BAAQ,wBAAwB;CAChC,+BAAQ,GAAG;CACX,iCAAU,mBAAmB;CAC9B;;;;ACJD,MAAaC,UAAqC;CAChD,sCAAe,CACb,uEACD,CAAC;CACF,iCAAU;EACR;EACA;EACA;EACD,CAAC;CACF,iCACE;EACE;EACA;EACA;EACA;EACD,EACD;EACE,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACR,EACF;EACD,iBAAiB,EACf,MAAM,SACP;EACF,CACF;CACD,qCAAc;CACd,oCAAa;CACd;;;;AC9BD,MAAaC,OAA+B;CAC1C,sCACE,CACE,+FACA,kDACD,EACD,EACE,UAAU,EACR,SAAS,EACP,SACE,kNACH,EACF,EACF,CACF;CACD,iCAAU,kEAAkE,EAC1E,UAAU,EACR,SAAS,EACP,SAAS,CAAC,wCAAwC,EACnD,EACF,EACF,CAAC;CACF,oCAAa,IAAI,EACf,UAAU,EACR,SAAS,EACP,SACE,qLACH,EACF,EACF,CAAC;CACF,mCACE,mEACD;CACF;;;;ACjCD,MAAaC,oCAAsC;;;;ACAnD,MAAaC,iBAAmD;CAC9D,sCACE,CACE,yCACA,oGACD,EACD,EACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACV,EACF,EACF,CACF;CACD,iCAAU,SAAS;CACnB,kCAAW,6CAA6C;CACxD,oCAAa,iDAAiD;CAC9D,kCAAW,sBAAsB;CAClC;;;;ACnBD,MAAaC,qCAAyC;CACpD;CACA;CACA;CACA;CACA;CACD,CAAC;;;;ACAF,MAAaC,SAAmC;CAC9C,iCAAU,sBAAsB;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,UAAU;IACX;GACD,MAAM;IACJ,SAAS;IACT,OAAO;IACR;GACF;EACD,iBAAiB;GACf,SAAS;GACT,MAAM;GACP;EACF,CAAC;CACF,mCAAY;EAAC;EAAU;EAAiB;EAAe;EAAiB,EAAE;EACxE,UAAU;GACR,SAAS;IACP,SAAS;IACT,UAAU;KACR;KACA;KAEA;KAEA;KACD;IACF;GACD,MAAM;IACJ,SAAS,CAAC,aAAa,QAAQ;IAC/B,OAAO,CAAC,aAAa,OAAO,UAAU;IACvC;GACF;EACD,iBAAiB;GACf,SAAS;GACT,MAAM;GACP;EACD,kBAAkB,CAChB;GACE,SAAS;GACT,MAAM;GACN,WAAW;GACZ,EACD;GACE,SAAS;GACT,MAAM;GACN,WAAW;GACZ,CACF;EACF,CAAC;CACH;;;;AC1DD,MAAaC,OAA+B;CAC1C,sCAAe,IAAI,EACjB,UAAU,EACR,SAAS,EACP,MAAM,QACP,EACF,EACF,CAAC;CACF,qCAAc,GAAG;CACjB,qCAAc,gBAAgB;CAC9B,gCAAS;EACP;EACA;EACA;EACD,CAAC;CACH;;;;ACfD,MAAaC,QAAiC;CAC5C,kCAAW,CACT,yDACA,+DACD,CAAC;CACF,mCAAY;CACZ,uCAAgB;CAChB,mCAAY,4BAA4B;CACxC,kCAAW;CACX,gCAAS,EAAE,EAAE,EACX,UAAU,EACR,SAAS,EACP,OAAO,4BACR,EACF,EACF,CAAC;CACF,iCACE,CAAC,yCAAyC,gCAAgC,EAC1E,EACE,UAAU,EACR,SAAS,EACP,YAAY,oBACb,EACF,EACF,CACF;CACF;;;;AC1BD,MAAaC,kCAAmC,aAAa,EAC3D,UAAU,EACR,SAAS;CACP,MAAM;CACN,OAAO;CACP,OAAO;CACP,OAAO;CACR,EACF,EACF,CAAC;;;;ACTF,MAAaC,sCACX,qCACD;;;;ACFD,MAAaC,mCACX,gEACA;CACE,UAAU;EACR,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,MAAM,EACJ,SAAS,WACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEjBD,MAAaC,kCAA0B,+BAA+B;;;;ACEtE,MAAaC,QAAe;CAC1B,MAAM;CACN;CACA;CACD;;;;ACLD,kBAAe"}
1
+ {"version":3,"file":"index.cjs","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","LegacyTable: ThemeComponent<'LegacyTable'>","Text: ThemeComponent<'Text'>","Tray: ThemeComponent<'Tray'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/LegacyTable.styles.ts","../src/components/Text.styles.ts","../src/components/Tray.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n 'flex gap-2 rounded-xs px-3 py-2',\n {\n variants: {\n variant: {\n ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n sunken:\n 'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n inverted: 'bg-secondary-100',\n icon: 'border-none translate-y-0.5 outline-none p-0',\n },\n size: {\n small: 'px-3 py-1.5 text-sm',\n },\n },\n }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n ['relative w-full overflow-hidden rounded-xl'],\n {\n variants: {\n variant: {\n default:\n 'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n hovering:\n 'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n content:\n 'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n outline: 'bg-white/40 my-6 border border-secondary-200',\n lowered: 'bg-bg-surface-raised-lowered p-6',\n image: '',\n },\n size: {\n default: '',\n full: 'size-full',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n 'flex items-center justify-center whitespace-nowrap',\n 'cursor-pointer',\n 'transition-[color,box-shadow]',\n 'rounded',\n '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n closeButton: cva('absolute top-4 right-4 ml-4', {\n variants: {\n variant: {\n fullscreen: ['size-6', 'right-4 top-4'],\n },\n },\n }),\n container: cva('bg-bg-surface', {\n variants: {\n variant: {\n default: 'relative rounded-lg shadow-lg',\n codeblock: [\n 'static px-0 py-6',\n 'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n 'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n '*:max-h-none *:min-w-[75vw]',\n ],\n fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n zoom: 'max-h-[96vh] overflow-y-auto',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }),\n header: cva(''),\n title: cva(''),\n content: cva(''),\n actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n variants: {\n size: {\n 'level-1':\n 'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n 'level-2':\n 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n 'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n 'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n 'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n 'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n 'items-center',\n ],\n },\n size: {\n default: 'gap-x-3',\n small: 'gap-x-2',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n container: cva(),\n icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-sm text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n default: 'px-3',\n small: 'px-2.5',\n};\n\nexport const ySpacing = {\n default: 'py-2',\n small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n default: `${xSpacing.default} ${ySpacing.default}`,\n small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n 'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = cva('', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'z-10 col-start-1 row-start-1',\n 'pointer-events-none',\n 'text-secondary-400 text-nowrap',\n 'after:content-[\":\"]',\n ],\n },\n size: {\n default: 'text-sm',\n small: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'pl-4',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'pl-3',\n },\n ],\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n variants: {\n variant: {\n default:\n 'underline underline-offset-4 transition-all hover:text-slate-700',\n primary:\n 'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n toc: [\n 'text-secondary-500 hover:text-secondary-800 text-xs',\n 'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n ],\n cta: [\n 'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n 'text-sm font-semibold text-purple-100',\n 'transition-all hover:bg-purple-600',\n ],\n ghost: 'hover:underline underline-offset-4',\n shiny:\n 'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n },\n size: {\n inline: '',\n xsmall: 'rounded-full text-xs py-1.5 px-4',\n small: 'px-3 py-1.5 text-sm rounded-xs',\n regular: 'px-3 py-2 rounded-xs',\n large: 'px-8 py-3.5 rounded-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'inline',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n ul: cva('list-inside list-none'),\n ol: cva(''),\n item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n container: cva([\n 'bg-bg-surface-overlay border-border rounded-sm border drop-shadow-lg',\n 'w-full',\n // In a Tray\n 'group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none group-[[role=dialog]]/tray:drop-shadow-none',\n ]),\n list: cva([\n 'outline-hidden',\n 'p-1',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ]),\n item: cva(\n [\n 'text-text-primary',\n 'cursor-pointer rounded-xs outline-hidden',\n 'hover:bg-bg-hover focus:bg-bg-hover',\n 'aria-selected:bg-bg-hover',\n ],\n {\n variants: {\n size: {\n default: 'p-2',\n small: 'px-2 py-1 text-sm',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n ),\n section: cva(),\n header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n container: cva(\n [\n 'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ],\n {\n variants: {\n variant: {\n command:\n '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n },\n },\n }\n ),\n item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n variants: {\n variant: {\n command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n },\n },\n }),\n section: cva('', {\n variants: {\n variant: {\n command:\n '[&_[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',\n },\n },\n }),\n button: cva(\n 'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n container: cva(\n [\n 'not-prose items-center rounded-lg p-4',\n \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']\",\n ],\n {\n variants: {\n variant: {\n info: 'bg-bg-info text-text-info',\n warning: 'bg-bg-warning text-text-warning',\n },\n },\n }\n ),\n icon: cva('size-6'),\n title: cva('mb-1 font-bold leading-none tracking-tight'),\n content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n 'animate-in',\n 'placement-top:-translate-y-1',\n 'placement-bottom:translate-y-1',\n 'placement-right:-translate-x-1',\n 'placement-left:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n inputBackground,\n inputBox,\n inputDisabled,\n inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n icon: cva('text-secondary-400', {\n variants: {\n variant: {\n default: '',\n floating: 'justify-self-end',\n },\n size: {\n default: '',\n small: 'size-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }),\n select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n variants: {\n variant: {\n default: 'gap-2',\n floating: [\n 'shadow-xs',\n 'col-span-full row-start-1 grid! grid-cols-subgrid grid-rows-subgrid',\n // selected value and caret get moved to 2nd col\n '*:row-start-1 *:col-start-2 *:text-left',\n // leave space for the chevron icon at the end\n '[&>:first-child]:mr-6',\n // So the button gap is not used to separate label from selected value\n 'gap-[inherit]',\n ],\n },\n size: {\n default: [inputSpacing.default],\n small: [inputSpacing.small, 'text-xs'],\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'px-4 py-1.5',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'px-3',\n },\n ],\n }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n container: cva('', {\n variants: {\n variant: {\n demo: 'my-6',\n },\n },\n }),\n tabpanel: cva(''),\n tabsList: cva('mb-4 border-b'),\n tab: cva([\n 'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n 'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n 'focus:outline-hidden focus-visible:state-focus-borderless',\n ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const LegacyTable: ThemeComponent<'LegacyTable'> = {\n table: cva([\n 'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n 'border-secondary-200 border-separate border-spacing-0 border',\n ]),\n thead: cva(),\n headerRow: cva(),\n header: cva('px-3 pb-2 pt-3 text-start'),\n body: cva(),\n row: cva([], {\n variants: {\n variant: {\n hover: 'hover:bg-neutral-100/80 ',\n },\n },\n }),\n cell: cva(['prose px-3 py-3.5 text-sm', 'border-secondary-200 border-t'], {\n variants: {\n variant: {\n colorTable: 'p-4 align-middle',\n },\n },\n }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n variants: {\n variant: {\n lead: 'text-muted-foreground text-xl',\n large: 'text-lg font-semibold',\n small: 'text-sm font-medium leading-none',\n muted: 'text-muted-foreground text-sm',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tray: ThemeComponent<'Tray'> = {\n overlay: cva('bg-black/50 fixed inset-0 z-40 flex items-end justify-center'),\n container: cva([\n 'w-full border-0 inset-shadow-black inset-shadow-sm/20',\n 'relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-t-lg rounded-b-none',\n 'bg-bg-surface-overlay shadow-lg',\n 'outline-hidden grid',\n \"after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-bg-surface-overlay after:content-['']\",\n ]),\n dragHandle: cva('bg-border mx-auto mt-2 h-1.5 w-12 rounded-full'),\n header: cva('border-border border-b px-6 py-4'),\n title: cva('font-semibold text-base'),\n content: cva('overflow-y-auto outline-none p-2'),\n actions: cva(\n 'flex flex-row gap-3 justify-end border-border border-t px-6 py-4'\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n 'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n 'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n {\n variants: {\n variant: {\n dark: 'bg-bg-inverted text-white',\n warning: 'bg-bg-warning',\n },\n size: {\n default: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'dark',\n size: 'default',\n },\n }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './LegacyTable.styles';\nexport * from './Text.styles';\nexport * from './Tray.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n name: 'docs',\n root,\n components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAEA,MAAaA,oCACX,mCACA,EACE,UAAU;CACR,SAAS;EACP,OAAO;EACP,QACE;EACF,UAAU;EACV,MAAM;EACP;CACD,MAAM,EACJ,OAAO,uBACR;CACF,EACF,CACF;;;;AChBD,MAAaC,kCACX,CAAC,6CAA6C,EAC9C;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,UACE;GACF,SACE;GACF,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;;;;ACxBD,MAAaC,yCAAiD;CAC5D;CACA;CACA;CACA;CACA;CACD,CAAC;;;;ACPF,MAAaC,SAAmC;CAC9C,wCAAiB,+BAA+B,EAC9C,UAAU,EACR,SAAS,EACP,YAAY,CAAC,UAAU,gBAAgB,EACxC,EACF,EACF,CAAC;CACF,sCAAe,iBAAiB;EAC9B,UAAU,EACR,SAAS;GACP,SAAS;GACT,WAAW;IACT;IACA;IACA;IACA;IACD;GACD,YAAY;GACZ,MAAM;GACP,EACF;EACD,iBAAiB,EACf,SAAS,WACV;EACF,CAAC;CACF,mCAAY,GAAG;CACf,kCAAW,GAAG;CACd,oCAAa,GAAG;CAChB,oCAAa,GAAG;CACjB;;;;AC9BD,MAAaC,sCAA2C,kBAAkB,EACxE,UAAU,EACR,MAAM;CACJ,WACE;CACF,WACE;CACF,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;;;;ACbF,MAAaC,mCAAqC,kBAAkB;CAClE,UAAU;EACR,SAAS;GACP,SAAS;GACT,UAAU,CACR,sDACA,eACD;GACF;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;;;;AClBF,MAAaC,WAAuC;CAClD,uCAAgB;CAChB,kCAAW;CACZ;;;;ACHD,MAAaC,yCAAgD;;;;ACA7D,MAAa,WAAW;AACxB,MAAa,kBAAkB;AAI/B,MAAa,WAAW;CACtB,SAAS;CACT,OAAO;CACR;AAED,MAAa,WAAW;CACtB,SAAS;CACT,OAAO;CACR;AAED,MAAa,eAAe;CAC1B,SAAS,GAAG,SAAS,QAAQ,GAAG,SAAS;CACzC,OAAO,GAAG,SAAS,MAAM,GAAG,SAAS;CACtC;AAID,MAAa,aAAa;AAC1B,MAAa,gBACX;AACF,MAAa,aAAa;AAC1B,MAAa,aAAa;;;;AC1B1B,MAAaC,mCAAqC,IAAI;CACpD,UAAU;EACR,SAAS;GACP,SAAS;GACT,UAAU;IACR;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACD,kBAAkB,CAChB;EACE,SAAS;EACT,MAAM;EACN,WAAW;EACZ,EACD;EACE,SAAS;EACT,MAAM;EACN,WAAW;EACZ,CACF;CACF,CAAC;;;;AChCF,MAAaC,kCAAmC,CAAC,cAAc,EAAE;CAC/D,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,WAAW;GACX,KAAK,CACH,uDACA,mFACD;GACD,KAAK;IACH;IACA;IACA;IACD;GACD,OAAO;GACP,OACE;GACH;EACD,MAAM;GACJ,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;;;;ACjCF,MAAaC,OAA+B;CAC1C,+BAAQ,wBAAwB;CAChC,+BAAQ,GAAG;CACX,iCAAU,mBAAmB;CAC9B;;;;ACJD,MAAaC,UAAqC;CAChD,sCAAe;EACb;EACA;EAEA;EACD,CAAC;CACF,iCAAU;EACR;EACA;EACA;EACD,CAAC;CACF,iCACE;EACE;EACA;EACA;EACA;EACD,EACD;EACE,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACR,EACF;EACD,iBAAiB,EACf,MAAM,SACP;EACF,CACF;CACD,qCAAc;CACd,oCAAa;CACd;;;;ACjCD,MAAaC,OAA+B;CAC1C,sCACE,CACE,+FACA,kDACD,EACD,EACE,UAAU,EACR,SAAS,EACP,SACE,kNACH,EACF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"}
package/dist/index.mjs CHANGED
@@ -128,7 +128,7 @@ const IconButton = cva();
128
128
 
129
129
  //#endregion
130
130
  //#region src/components/Input.styles.ts
131
- const inputBox = "border border-border rounded-xs text-text-primary";
131
+ const inputBox = "border border-border rounded-sm text-text-primary";
132
132
  const inputBackground = "bg-white";
133
133
  const xSpacing = {
134
134
  default: "px-3",
@@ -222,7 +222,11 @@ const List = {
222
222
  //#endregion
223
223
  //#region src/components/ListBox.styles.ts
224
224
  const ListBox = {
225
- container: cva(["bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg"]),
225
+ container: cva([
226
+ "bg-bg-surface-overlay border-border rounded-sm border drop-shadow-lg",
227
+ "w-full",
228
+ "group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none group-[[role=dialog]]/tray:drop-shadow-none"
229
+ ]),
226
230
  list: cva([
227
231
  "outline-hidden",
228
232
  "p-1",
@@ -310,8 +314,9 @@ const Select = {
310
314
  default: "gap-2",
311
315
  floating: [
312
316
  "shadow-xs",
313
- "col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid",
314
- "*:row-star-1 *:col-start-2 *:text-left",
317
+ "col-span-full row-start-1 grid! grid-cols-subgrid grid-rows-subgrid",
318
+ "*:row-start-1 *:col-start-2 *:text-left",
319
+ "[&>:first-child]:mr-6",
315
320
  "gap-[inherit]"
316
321
  ]
317
322
  },
@@ -345,20 +350,20 @@ const Tabs = {
345
350
  tab: cva([
346
351
  "text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium",
347
352
  "aria-selected:border-border-primary -m-px border-b-2 border-transparent",
348
- "focus:outline-hidden focus-visible:outline"
353
+ "focus:outline-hidden focus-visible:state-focus-borderless"
349
354
  ])
350
355
  };
351
356
 
352
357
  //#endregion
353
- //#region src/components/Table.styles.ts
354
- const Table = {
358
+ //#region src/components/LegacyTable.styles.ts
359
+ const LegacyTable = {
355
360
  table: cva(["w-full overflow-hidden rounded-lg bg-white/40 text-sm", "border-secondary-200 border-separate border-spacing-0 border"]),
356
361
  thead: cva(),
357
362
  headerRow: cva(),
358
363
  header: cva("px-3 pb-2 pt-3 text-start"),
359
364
  body: cva(),
360
365
  row: cva([], { variants: { variant: { hover: "hover:bg-neutral-100/80 " } } }),
361
- cell: cva(["text-text-primary px-3 py-3.5 text-xs", "border-secondary-200 border-t"], { variants: { variant: { colorTable: "p-4 align-middle" } } })
366
+ cell: cva(["prose px-3 py-3.5 text-sm", "border-secondary-200 border-t"], { variants: { variant: { colorTable: "p-4 align-middle" } } })
362
367
  };
363
368
 
364
369
  //#endregion
@@ -370,6 +375,24 @@ const Text = cva("leading-7", { variants: { variant: {
370
375
  muted: "text-muted-foreground text-sm"
371
376
  } } });
372
377
 
378
+ //#endregion
379
+ //#region src/components/Tray.styles.ts
380
+ const Tray = {
381
+ overlay: cva("bg-black/50 fixed inset-0 z-40 flex items-end justify-center"),
382
+ container: cva([
383
+ "w-full border-0 inset-shadow-black inset-shadow-sm/20",
384
+ "relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-t-lg rounded-b-none",
385
+ "bg-bg-surface-overlay shadow-lg",
386
+ "outline-hidden grid",
387
+ "after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-bg-surface-overlay after:content-['']"
388
+ ]),
389
+ dragHandle: cva("bg-border mx-auto mt-2 h-1.5 w-12 rounded-full"),
390
+ header: cva("border-border border-b px-6 py-4"),
391
+ title: cva("font-semibold text-base"),
392
+ content: cva("overflow-y-auto outline-none p-2"),
393
+ actions: cva("flex flex-row gap-3 justify-end border-border border-t px-6 py-4")
394
+ };
395
+
373
396
  //#endregion
374
397
  //#region src/components/Underlay.styles.ts
375
398
  const Underlay = cva("bg-bg-underlay/50 backdrop-blur-xs");
@@ -403,6 +426,7 @@ var components_exports = /* @__PURE__ */ __export({
403
426
  HelpText: () => HelpText,
404
427
  IconButton: () => IconButton,
405
428
  Label: () => Label,
429
+ LegacyTable: () => LegacyTable,
406
430
  Link: () => Link,
407
431
  List: () => List,
408
432
  ListBox: () => ListBox,
@@ -411,9 +435,9 @@ var components_exports = /* @__PURE__ */ __export({
411
435
  Popover: () => Popover,
412
436
  SectionMessage: () => SectionMessage,
413
437
  Select: () => Select,
414
- Table: () => Table,
415
438
  Tabs: () => Tabs,
416
439
  Text: () => Text,
440
+ Tray: () => Tray,
417
441
  Underlay: () => Underlay,
418
442
  inputBackground: () => inputBackground,
419
443
  inputBox: () => inputBox,
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","Table: ThemeComponent<'Table'>","Text: ThemeComponent<'Text'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/Table.styles.ts","../src/components/Text.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n 'flex gap-2 rounded-xs px-3 py-2',\n {\n variants: {\n variant: {\n ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n sunken:\n 'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n inverted: 'bg-secondary-100',\n icon: 'border-none translate-y-0.5 outline-none p-0',\n },\n size: {\n small: 'px-3 py-1.5 text-sm',\n },\n },\n }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n ['relative w-full overflow-hidden rounded-xl'],\n {\n variants: {\n variant: {\n default:\n 'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n hovering:\n 'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n content:\n 'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n outline: 'bg-white/40 my-6 border border-secondary-200',\n lowered: 'bg-bg-surface-raised-lowered p-6',\n image: '',\n },\n size: {\n default: '',\n full: 'size-full',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n 'flex items-center justify-center whitespace-nowrap',\n 'cursor-pointer',\n 'transition-[color,box-shadow]',\n 'rounded',\n '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n closeButton: cva('absolute top-4 right-4 ml-4', {\n variants: {\n variant: {\n fullscreen: ['size-6', 'right-4 top-4'],\n },\n },\n }),\n container: cva('bg-bg-surface', {\n variants: {\n variant: {\n default: 'relative rounded-lg shadow-lg',\n codeblock: [\n 'static px-0 py-6',\n 'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n 'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n '*:max-h-none *:min-w-[75vw]',\n ],\n fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n zoom: 'max-h-[96vh] overflow-y-auto',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }),\n header: cva(''),\n title: cva(''),\n content: cva(''),\n actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n variants: {\n size: {\n 'level-1':\n 'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n 'level-2':\n 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n 'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n 'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n 'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n 'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n 'items-center',\n ],\n },\n size: {\n default: 'gap-x-3',\n small: 'gap-x-2',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n container: cva(),\n icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-xs text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n default: 'px-3',\n small: 'px-2.5',\n};\n\nexport const ySpacing = {\n default: 'py-2',\n small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n default: `${xSpacing.default} ${ySpacing.default}`,\n small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n 'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = cva('', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'z-10 col-start-1 row-start-1',\n 'pointer-events-none',\n 'text-secondary-400 text-nowrap',\n 'after:content-[\":\"]',\n ],\n },\n size: {\n default: 'text-sm',\n small: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'pl-4',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'pl-3',\n },\n ],\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n variants: {\n variant: {\n default:\n 'underline underline-offset-4 transition-all hover:text-slate-700',\n primary:\n 'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n toc: [\n 'text-secondary-500 hover:text-secondary-800 text-xs',\n 'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n ],\n cta: [\n 'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n 'text-sm font-semibold text-purple-100',\n 'transition-all hover:bg-purple-600',\n ],\n ghost: 'hover:underline underline-offset-4',\n shiny:\n 'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n },\n size: {\n inline: '',\n xsmall: 'rounded-full text-xs py-1.5 px-4',\n small: 'px-3 py-1.5 text-sm rounded-xs',\n regular: 'px-3 py-2 rounded-xs',\n large: 'px-8 py-3.5 rounded-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'inline',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n ul: cva('list-inside list-none'),\n ol: cva(''),\n item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n container: cva([\n 'bg-bg-surface-overlay border-border rounded-xs border drop-shadow-lg',\n ]),\n list: cva([\n 'outline-hidden',\n 'p-1',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ]),\n item: cva(\n [\n 'text-text-primary',\n 'cursor-pointer rounded-xs outline-hidden',\n 'hover:bg-bg-hover focus:bg-bg-hover',\n 'aria-selected:bg-bg-hover',\n ],\n {\n variants: {\n size: {\n default: 'p-2',\n small: 'px-2 py-1 text-sm',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n ),\n section: cva(),\n header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n container: cva(\n [\n 'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ],\n {\n variants: {\n variant: {\n command:\n '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n },\n },\n }\n ),\n item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n variants: {\n variant: {\n command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n },\n },\n }),\n section: cva('', {\n variants: {\n variant: {\n command:\n '[&_[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',\n },\n },\n }),\n button: cva(\n 'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n container: cva(\n [\n 'not-prose items-center rounded-lg p-4',\n \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']\",\n ],\n {\n variants: {\n variant: {\n info: 'bg-bg-info text-text-info',\n warning: 'bg-bg-warning text-text-warning',\n },\n },\n }\n ),\n icon: cva('size-6'),\n title: cva('mb-1 font-bold leading-none tracking-tight'),\n content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n 'animate-in',\n 'placement-top:-translate-y-1',\n 'placement-bottom:translate-y-1',\n 'placement-right:-translate-x-1',\n 'placement-left:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n inputBackground,\n inputBox,\n inputDisabled,\n inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n icon: cva('text-secondary-400', {\n variants: {\n variant: {\n default: '',\n floating: 'justify-self-end',\n },\n size: {\n default: '',\n small: 'size-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }),\n select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n variants: {\n variant: {\n default: 'gap-2',\n floating: [\n 'shadow-xs',\n 'col-span-full row-start-1 grid grid-cols-subgrid grid-rows-subgrid',\n // selected value and caret get moved to 2nd col\n '*:row-star-1 *:col-start-2 *:text-left',\n // So the button gap is not used to separate label from selected value\n 'gap-[inherit]',\n ],\n },\n size: {\n default: [inputSpacing.default],\n small: [inputSpacing.small, 'text-xs'],\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'px-4 py-1.5',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'px-3',\n },\n ],\n }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n container: cva('', {\n variants: {\n variant: {\n demo: 'my-6',\n },\n },\n }),\n tabpanel: cva(''),\n tabsList: cva('mb-4 border-b'),\n tab: cva([\n 'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n 'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n 'focus:outline-hidden focus-visible:outline',\n ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Table: ThemeComponent<'Table'> = {\n table: cva([\n 'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n 'border-secondary-200 border-separate border-spacing-0 border',\n ]),\n thead: cva(),\n headerRow: cva(),\n header: cva('px-3 pb-2 pt-3 text-start'),\n body: cva(),\n row: cva([], {\n variants: {\n variant: {\n hover: 'hover:bg-neutral-100/80 ',\n },\n },\n }),\n cell: cva(\n ['text-text-primary px-3 py-3.5 text-xs', 'border-secondary-200 border-t'],\n {\n variants: {\n variant: {\n colorTable: 'p-4 align-middle',\n },\n },\n }\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n variants: {\n variant: {\n lead: 'text-muted-foreground text-xl',\n large: 'text-lg font-semibold',\n small: 'text-sm font-medium leading-none',\n muted: 'text-muted-foreground text-sm',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n 'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n 'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n {\n variants: {\n variant: {\n dark: 'bg-bg-inverted text-white',\n warning: 'bg-bg-warning',\n },\n size: {\n default: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'dark',\n size: 'default',\n },\n }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './Table.styles';\nexport * from './Text.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n name: 'docs',\n root,\n components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","names":["Button: ThemeComponent<'Button'>","Card: ThemeComponent<'Card'>","CloseButton: ThemeComponent<'CloseButton'>","Dialog: ThemeComponent<'Dialog'>","Headline: ThemeComponent<'Headline'>","Field: ThemeComponent<'Field'>","HelpText: ThemeComponent<'HelpText'>","IconButton: ThemeComponent<'IconButton'>","Label: ThemeComponent<'Label'>","Link: ThemeComponent<'Link'>","List: ThemeComponent<'List'>","ListBox: ThemeComponent<'ListBox'>","Menu: ThemeComponent<'Menu'>","Modal: ThemeComponent<'Modal'>","SectionMessage: ThemeComponent<'SectionMessage'>","Popover: ThemeComponent<'Popover'>","Select: ThemeComponent<'Select'>","Tabs: ThemeComponent<'Tabs'>","LegacyTable: ThemeComponent<'LegacyTable'>","Text: ThemeComponent<'Text'>","Tray: ThemeComponent<'Tray'>","Underlay: ThemeComponent<'Underlay'>","Badge: ThemeComponent<'Badge'>","root: Theme['root']","theme: Theme"],"sources":["../src/components/Button.styles.ts","../src/components/Card.styles.ts","../src/components/CloseButton.styles.ts","../src/components/Dialog.styles.ts","../src/components/Headline.styles.ts","../src/components/Field.styles.ts","../src/components/HelpText.styles.ts","../src/components/IconButton.styles.ts","../src/components/Input.styles.ts","../src/components/Label.styles.ts","../src/components/Link.styles.ts","../src/components/List.styles.ts","../src/components/ListBox.styles.ts","../src/components/Menu.styles.ts","../src/components/Modal.styles.ts","../src/components/SectionMessage.styles.ts","../src/components/Popover.styles.ts","../src/components/Select.styles.ts","../src/components/Tabs.styles.ts","../src/components/LegacyTable.styles.ts","../src/components/Text.styles.ts","../src/components/Tray.styles.ts","../src/components/Underlay.styles.ts","../src/components/Badge.styles.ts","../src/components/index.ts","../src/root.ts","../src/theme.ts","../src/index.ts"],"sourcesContent":["import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Button: ThemeComponent<'Button'> = cva(\n 'flex gap-2 rounded-xs px-3 py-2',\n {\n variants: {\n variant: {\n ghost: 'text-secondary-700 hover:text-secondary-900 p-0',\n sunken:\n 'text-secondary-600 hover:bg-secondary-400/20 bg-secondary-400/10 h-8 justify-start rounded-lg',\n inverted: 'bg-secondary-100',\n icon: 'border-none translate-y-0.5 outline-none p-0',\n },\n size: {\n small: 'px-3 py-1.5 text-sm',\n },\n },\n }\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Card: ThemeComponent<'Card'> = cva(\n ['relative w-full overflow-hidden rounded-xl'],\n {\n variants: {\n variant: {\n default:\n 'bg-bg-surface-raised p-6 shadow-xs border border-secondary-300',\n hovering:\n 'bg-bg-surface-raised p-6 shadow-xs transition-shadow hover:cursor-pointer hover:shadow-md border border-secondary-300',\n content:\n 'bg-bg-surface-raised my-6 shadow-xs border border-secondary-300',\n outline: 'bg-white/40 my-6 border border-secondary-200',\n lowered: 'bg-bg-surface-raised-lowered p-6',\n image: '',\n },\n size: {\n default: '',\n full: 'size-full',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n","import type { ThemeComponent } from '@marigold/system';\nimport { cva } from '@marigold/system';\n\nexport const CloseButton: ThemeComponent<'CloseButton'> = cva([\n 'flex items-center justify-center whitespace-nowrap',\n 'cursor-pointer',\n 'transition-[color,box-shadow]',\n 'rounded',\n '[&_svg]:size-4 [&_svg]:opacity-60 [&_svg]:transition-opacity hover:[&_svg]:opacity-100',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Dialog: ThemeComponent<'Dialog'> = {\n closeButton: cva('absolute top-4 right-4 ml-4', {\n variants: {\n variant: {\n fullscreen: ['size-6', 'right-4 top-4'],\n },\n },\n }),\n container: cva('bg-bg-surface', {\n variants: {\n variant: {\n default: 'relative rounded-lg shadow-lg',\n codeblock: [\n 'static px-0 py-6',\n 'bg-code-900 max-h-[96vh] w-full overflow-y-auto rounded-lg shadow-lg',\n 'scrollbar-thin scrollbar-thumb-code-500 scrollbar-track-transparent scrollbar-thumb-rounded-full overflow-x-auto',\n '*:max-h-none *:min-w-[75vw]',\n ],\n fullscreen: 'h-screen w-screen px-4 pb-8 pt-10',\n zoom: 'max-h-[96vh] overflow-y-auto',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }),\n header: cva(''),\n title: cva(''),\n content: cva(''),\n actions: cva(''),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Headline: ThemeComponent<'Headline'> = cva('*:no-underline', {\n variants: {\n size: {\n 'level-1':\n 'scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl',\n 'level-2':\n 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0',\n 'level-3': 'scroll-m-20 text-2xl font-semibold tracking-tight',\n 'level-4': 'scroll-m-20 text-xl font-semibold tracking-tight',\n 'level-5': 'mt-8 scroll-m-20 text-lg font-semibold tracking-tight',\n 'level-6': 'mt-8 scroll-m-20 text-base font-semibold tracking-tight',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Field: ThemeComponent<'Field'> = cva('grid gap-y-0.5', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'grid-cols-[min-content_auto] grid-rows-[auto_auto]',\n 'items-center',\n ],\n },\n size: {\n default: 'gap-x-3',\n small: 'gap-x-2',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const HelpText: ThemeComponent<'HelpText'> = {\n container: cva(),\n icon: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const IconButton: ThemeComponent<'IconButton'> = cva();\n","// Box\n// ---------------\nexport const inputBox = 'border border-border rounded-sm text-text-primary';\nexport const inputBackground = 'bg-white';\n\n// Spacing\n// ---------------\nexport const xSpacing = {\n default: 'px-3',\n small: 'px-2.5',\n};\n\nexport const ySpacing = {\n default: 'py-2',\n small: 'py-1.5',\n};\n\nexport const inputSpacing = {\n default: `${xSpacing.default} ${ySpacing.default}`,\n small: `${xSpacing.small} ${ySpacing.small}`,\n};\n\n// States\n// ---------------\nexport const inputFocus = '';\nexport const inputDisabled =\n 'disabled:cursor-not-allowed disabled:text-text-disabled disabled:bg-bg-disabled';\nexport const inputError = '';\nexport const inputHover = '';\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Label: ThemeComponent<'Label'> = cva('', {\n variants: {\n variant: {\n default: '',\n floating: [\n 'z-10 col-start-1 row-start-1',\n 'pointer-events-none',\n 'text-secondary-400 text-nowrap',\n 'after:content-[\":\"]',\n ],\n },\n size: {\n default: 'text-sm',\n small: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'pl-4',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'pl-3',\n },\n ],\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Link: ThemeComponent<'Link'> = cva(['font-medium'], {\n variants: {\n variant: {\n default:\n 'underline underline-offset-4 transition-all hover:text-slate-700',\n primary:\n 'bg-text-primary text-white leading-none hover:bg-slate-700 transition-all',\n secondary: 'border-text-primary border-2 leading-none hover:bg-slate-100',\n toc: [\n 'text-secondary-500 hover:text-secondary-800 text-xs',\n 'data-[active=true]:text-secondary-800 font-normal data-[active=true]:font-medium',\n ],\n cta: [\n 'h-component rounded-2xl bg-purple-700 px-5 py-1.5',\n 'text-sm font-semibold text-purple-100',\n 'transition-all hover:bg-purple-600',\n ],\n ghost: 'hover:underline underline-offset-4',\n shiny:\n 'border border-slate-200 bg-slate-100 hover:bg-slate-200 transition-all ease-in',\n },\n size: {\n inline: '',\n xsmall: 'rounded-full text-xs py-1.5 px-4',\n small: 'px-3 py-1.5 text-sm rounded-xs',\n regular: 'px-3 py-2 rounded-xs',\n large: 'px-8 py-3.5 rounded-xs',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'inline',\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const List: ThemeComponent<'List'> = {\n ul: cva('list-inside list-none'),\n ol: cva(''),\n item: cva('list-none py-0.5'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const ListBox: ThemeComponent<'ListBox'> = {\n container: cva([\n 'bg-bg-surface-overlay border-border rounded-sm border drop-shadow-lg',\n 'w-full',\n // In a Tray\n 'group-[[role=dialog]]/tray:border-0 group-[[role=dialog]]/tray:shadow-none group-[[role=dialog]]/tray:drop-shadow-none',\n ]),\n list: cva([\n 'outline-hidden',\n 'p-1',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ]),\n item: cva(\n [\n 'text-text-primary',\n 'cursor-pointer rounded-xs outline-hidden',\n 'hover:bg-bg-hover focus:bg-bg-hover',\n 'aria-selected:bg-bg-hover',\n ],\n {\n variants: {\n size: {\n default: 'p-2',\n small: 'px-2 py-1 text-sm',\n },\n },\n defaultVariants: {\n size: 'small',\n },\n }\n ),\n section: cva(),\n header: cva(),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Menu: ThemeComponent<'Menu'> = {\n container: cva(\n [\n 'border-border bg-bg-surface overflow-hidden rounded-md border px-1 py-1.5 text-sm shadow-md',\n 'sm:max-h-[45vh] md:max-h-[75vh] lg:max-h-[75vh]',\n ],\n {\n variants: {\n variant: {\n command:\n '[&_[cmdk-list-sizer]]:divide-secondary-100 size-full p-0 sm:w-[500px] [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list-sizer]]:divide-y',\n },\n },\n }\n ),\n item: cva('focus:bg-bg-hover cursor-pointer rounded-xs p-2 outline-hidden', {\n variants: {\n variant: {\n command: ['aria-selected:bg-bg-hover px-4 py-1.5'],\n },\n },\n }),\n section: cva('', {\n variants: {\n variant: {\n command:\n '[&_[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',\n },\n },\n }),\n button: cva(\n 'text-secondary-700 hover:bg-secondary-400/20 h-8 rounded-lg px-1'\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Modal: ThemeComponent<'Modal'> = cva();\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const SectionMessage: ThemeComponent<'SectionMessage'> = {\n container: cva(\n [\n 'not-prose items-center rounded-lg p-4',\n \"grid-cols-[min-content_auto] gap-1 [grid-template-areas:'icon_title_title''none_content_content']\",\n ],\n {\n variants: {\n variant: {\n info: 'bg-bg-info text-text-info',\n warning: 'bg-bg-warning text-text-warning',\n },\n },\n }\n ),\n icon: cva('size-6'),\n title: cva('mb-1 font-bold leading-none tracking-tight'),\n content: cva('text-sm [&_p]:leading-relaxed [&_code]:text-xs'),\n close: cva('h-5 w-5 text-center'),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Popover: ThemeComponent<'Popover'> = cva([\n 'animate-in',\n 'placement-top:-translate-y-1',\n 'placement-bottom:translate-y-1',\n 'placement-right:-translate-x-1',\n 'placement-left:translate-x-1',\n]);\n","import { ThemeComponent, cva } from '@marigold/system';\nimport {\n inputBackground,\n inputBox,\n inputDisabled,\n inputSpacing,\n} from './Input.styles';\n\nexport const Select: ThemeComponent<'Select'> = {\n icon: cva('text-secondary-400', {\n variants: {\n variant: {\n default: '',\n floating: 'justify-self-end',\n },\n size: {\n default: '',\n small: 'size-3',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }),\n select: cva([inputBox, inputBackground, inputDisabled, 'outline-hidden'], {\n variants: {\n variant: {\n default: 'gap-2',\n floating: [\n 'shadow-xs',\n 'col-span-full row-start-1 grid! grid-cols-subgrid grid-rows-subgrid',\n // selected value and caret get moved to 2nd col\n '*:row-start-1 *:col-start-2 *:text-left',\n // leave space for the chevron icon at the end\n '[&>:first-child]:mr-6',\n // So the button gap is not used to separate label from selected value\n 'gap-[inherit]',\n ],\n },\n size: {\n default: [inputSpacing.default],\n small: [inputSpacing.small, 'text-xs'],\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n compoundVariants: [\n {\n variant: 'floating',\n size: 'default',\n className: 'px-4 py-1.5',\n },\n {\n variant: 'floating',\n size: 'small',\n className: 'px-3',\n },\n ],\n }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tabs: ThemeComponent<'Tabs'> = {\n container: cva('', {\n variants: {\n variant: {\n demo: 'my-6',\n },\n },\n }),\n tabpanel: cva(''),\n tabsList: cva('mb-4 border-b'),\n tab: cva([\n 'text-text-primary-muted aria-selected:text-text-primary px-2 py-1 text-sm font-medium',\n 'aria-selected:border-border-primary -m-px border-b-2 border-transparent',\n 'focus:outline-hidden focus-visible:state-focus-borderless',\n ]),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const LegacyTable: ThemeComponent<'LegacyTable'> = {\n table: cva([\n 'w-full overflow-hidden rounded-lg bg-white/40 text-sm',\n 'border-secondary-200 border-separate border-spacing-0 border',\n ]),\n thead: cva(),\n headerRow: cva(),\n header: cva('px-3 pb-2 pt-3 text-start'),\n body: cva(),\n row: cva([], {\n variants: {\n variant: {\n hover: 'hover:bg-neutral-100/80 ',\n },\n },\n }),\n cell: cva(['prose px-3 py-3.5 text-sm', 'border-secondary-200 border-t'], {\n variants: {\n variant: {\n colorTable: 'p-4 align-middle',\n },\n },\n }),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Text: ThemeComponent<'Text'> = cva('leading-7', {\n variants: {\n variant: {\n lead: 'text-muted-foreground text-xl',\n large: 'text-lg font-semibold',\n small: 'text-sm font-medium leading-none',\n muted: 'text-muted-foreground text-sm',\n },\n },\n});\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Tray: ThemeComponent<'Tray'> = {\n overlay: cva('bg-black/50 fixed inset-0 z-40 flex items-end justify-center'),\n container: cva([\n 'w-full border-0 inset-shadow-black inset-shadow-sm/20',\n 'relative grid-rows-[auto_auto_1fr_auto] max-h-[95vh] rounded-t-lg rounded-b-none',\n 'bg-bg-surface-overlay shadow-lg',\n 'outline-hidden grid',\n \"after:absolute after:inset-x-0 after:top-full after:h-screen after:bg-bg-surface-overlay after:content-['']\",\n ]),\n dragHandle: cva('bg-border mx-auto mt-2 h-1.5 w-12 rounded-full'),\n header: cva('border-border border-b px-6 py-4'),\n title: cva('font-semibold text-base'),\n content: cva('overflow-y-auto outline-none p-2'),\n actions: cva(\n 'flex flex-row gap-3 justify-end border-border border-t px-6 py-4'\n ),\n};\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Underlay: ThemeComponent<'Underlay'> = cva(\n 'bg-bg-underlay/50 backdrop-blur-xs'\n);\n","import { ThemeComponent, cva } from '@marigold/system';\n\nexport const Badge: ThemeComponent<'Badge'> = cva(\n 'inline-flex items-center truncate rounded-[20px] px-2 py-0.5',\n {\n variants: {\n variant: {\n dark: 'bg-bg-inverted text-white',\n warning: 'bg-bg-warning',\n },\n size: {\n default: 'text-xs',\n },\n },\n defaultVariants: {\n variant: 'dark',\n size: 'default',\n },\n }\n);\n","export * from './Button.styles';\nexport * from './Card.styles';\nexport * from './CloseButton.styles';\nexport * from './Dialog.styles';\nexport * from './Headline.styles';\nexport * from './Field.styles';\nexport * from './HelpText.styles';\nexport * from './IconButton.styles';\nexport * from './Input.styles';\nexport * from './Label.styles';\nexport * from './Link.styles';\nexport * from './List.styles';\nexport * from './ListBox.styles';\nexport * from './Menu.styles';\nexport * from './Modal.styles';\nexport * from './SectionMessage.styles';\nexport * from './Popover.styles';\nexport * from './Select.styles';\nexport * from './Tabs.styles';\nexport * from './LegacyTable.styles';\nexport * from './Text.styles';\nexport * from './Tray.styles';\nexport * from './Underlay.styles';\nexport * from './Badge.styles';\n","import { Theme, cva } from '@marigold/system';\n\nexport const root: Theme['root'] = cva('text-text-primary bg-bg-body');\n","import type { Theme } from '@marigold/system';\nimport * as components from './components';\nimport { root } from './root';\n\nexport const theme: Theme = {\n name: 'docs',\n root,\n components,\n};\n","import { theme } from './theme';\n\nexport { theme };\nexport default theme;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA,MAAaA,SAAmC,IAC9C,mCACA,EACE,UAAU;CACR,SAAS;EACP,OAAO;EACP,QACE;EACF,UAAU;EACV,MAAM;EACP;CACD,MAAM,EACJ,OAAO,uBACR;CACF,EACF,CACF;;;;AChBD,MAAaC,OAA+B,IAC1C,CAAC,6CAA6C,EAC9C;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,UACE;GACF,SACE;GACF,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,MAAM;GACP;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;;;;ACxBD,MAAaC,cAA6C,IAAI;CAC5D;CACA;CACA;CACA;CACA;CACD,CAAC;;;;ACPF,MAAaC,SAAmC;CAC9C,aAAa,IAAI,+BAA+B,EAC9C,UAAU,EACR,SAAS,EACP,YAAY,CAAC,UAAU,gBAAgB,EACxC,EACF,EACF,CAAC;CACF,WAAW,IAAI,iBAAiB;EAC9B,UAAU,EACR,SAAS;GACP,SAAS;GACT,WAAW;IACT;IACA;IACA;IACA;IACD;GACD,YAAY;GACZ,MAAM;GACP,EACF;EACD,iBAAiB,EACf,SAAS,WACV;EACF,CAAC;CACF,QAAQ,IAAI,GAAG;CACf,OAAO,IAAI,GAAG;CACd,SAAS,IAAI,GAAG;CAChB,SAAS,IAAI,GAAG;CACjB;;;;AC9BD,MAAaC,WAAuC,IAAI,kBAAkB,EACxE,UAAU,EACR,MAAM;CACJ,WACE;CACF,WACE;CACF,WAAW;CACX,WAAW;CACX,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;;;;ACbF,MAAaC,QAAiC,IAAI,kBAAkB;CAClE,UAAU;EACR,SAAS;GACP,SAAS;GACT,UAAU,CACR,sDACA,eACD;GACF;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;;;;AClBF,MAAaC,WAAuC;CAClD,WAAW,KAAK;CAChB,MAAM,KAAK;CACZ;;;;ACHD,MAAaC,aAA2C,KAAK;;;;ACA7D,MAAa,WAAW;AACxB,MAAa,kBAAkB;AAI/B,MAAa,WAAW;CACtB,SAAS;CACT,OAAO;CACR;AAED,MAAa,WAAW;CACtB,SAAS;CACT,OAAO;CACR;AAED,MAAa,eAAe;CAC1B,SAAS,GAAG,SAAS,QAAQ,GAAG,SAAS;CACzC,OAAO,GAAG,SAAS,MAAM,GAAG,SAAS;CACtC;AAID,MAAa,aAAa;AAC1B,MAAa,gBACX;AACF,MAAa,aAAa;AAC1B,MAAa,aAAa;;;;AC1B1B,MAAaC,QAAiC,IAAI,IAAI;CACpD,UAAU;EACR,SAAS;GACP,SAAS;GACT,UAAU;IACR;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACD,kBAAkB,CAChB;EACE,SAAS;EACT,MAAM;EACN,WAAW;EACZ,EACD;EACE,SAAS;EACT,MAAM;EACN,WAAW;EACZ,CACF;CACF,CAAC;;;;AChCF,MAAaC,OAA+B,IAAI,CAAC,cAAc,EAAE;CAC/D,UAAU;EACR,SAAS;GACP,SACE;GACF,SACE;GACF,WAAW;GACX,KAAK,CACH,uDACA,mFACD;GACD,KAAK;IACH;IACA;IACA;IACD;GACD,OAAO;GACP,OACE;GACH;EACD,MAAM;GACJ,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,SAAS;GACT,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;;;;ACjCF,MAAaC,OAA+B;CAC1C,IAAI,IAAI,wBAAwB;CAChC,IAAI,IAAI,GAAG;CACX,MAAM,IAAI,mBAAmB;CAC9B;;;;ACJD,MAAaC,UAAqC;CAChD,WAAW,IAAI;EACb;EACA;EAEA;EACD,CAAC;CACF,MAAM,IAAI;EACR;EACA;EACA;EACD,CAAC;CACF,MAAM,IACJ;EACE;EACA;EACA;EACA;EACD,EACD;EACE,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACR,EACF;EACD,iBAAiB,EACf,MAAM,SACP;EACF,CACF;CACD,SAAS,KAAK;CACd,QAAQ,KAAK;CACd;;;;ACjCD,MAAaC,OAA+B;CAC1C,WAAW,IACT,CACE,+FACA,kDACD,EACD,EACE,UAAU,EACR,SAAS,EACP,SACE,kNACH,EACF,EACF,CACF;CACD,MAAM,IAAI,kEAAkE,EAC1E,UAAU,EACR,SAAS,EACP,SAAS,CAAC,wCAAwC,EACnD,EACF,EACF,CAAC;CACF,SAAS,IAAI,IAAI,EACf,UAAU,EACR,SAAS,EACP,SACE,qLACH,EACF,EACF,CAAC;CACF,QAAQ,IACN,mEACD;CACF;;;;ACjCD,MAAaC,QAAiC,KAAK;;;;ACAnD,MAAaC,iBAAmD;CAC9D,WAAW,IACT,CACE,yCACA,oGACD,EACD,EACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACV,EACF,EACF,CACF;CACD,MAAM,IAAI,SAAS;CACnB,OAAO,IAAI,6CAA6C;CACxD,SAAS,IAAI,iDAAiD;CAC9D,OAAO,IAAI,sBAAsB;CAClC;;;;ACnBD,MAAaC,UAAqC,IAAI;CACpD;CACA;CACA;CACA;CACA;CACD,CAAC;;;;ACAF,MAAaC,SAAmC;CAC9C,MAAM,IAAI,sBAAsB;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,UAAU;IACX;GACD,MAAM;IACJ,SAAS;IACT,OAAO;IACR;GACF;EACD,iBAAiB;GACf,SAAS;GACT,MAAM;GACP;EACF,CAAC;CACF,QAAQ,IAAI;EAAC;EAAU;EAAiB;EAAe;EAAiB,EAAE;EACxE,UAAU;GACR,SAAS;IACP,SAAS;IACT,UAAU;KACR;KACA;KAEA;KAEA;KAEA;KACD;IACF;GACD,MAAM;IACJ,SAAS,CAAC,aAAa,QAAQ;IAC/B,OAAO,CAAC,aAAa,OAAO,UAAU;IACvC;GACF;EACD,iBAAiB;GACf,SAAS;GACT,MAAM;GACP;EACD,kBAAkB,CAChB;GACE,SAAS;GACT,MAAM;GACN,WAAW;GACZ,EACD;GACE,SAAS;GACT,MAAM;GACN,WAAW;GACZ,CACF;EACF,CAAC;CACH;;;;AC5DD,MAAaC,OAA+B;CAC1C,WAAW,IAAI,IAAI,EACjB,UAAU,EACR,SAAS,EACP,MAAM,QACP,EACF,EACF,CAAC;CACF,UAAU,IAAI,GAAG;CACjB,UAAU,IAAI,gBAAgB;CAC9B,KAAK,IAAI;EACP;EACA;EACA;EACD,CAAC;CACH;;;;ACfD,MAAaC,cAA6C;CACxD,OAAO,IAAI,CACT,yDACA,+DACD,CAAC;CACF,OAAO,KAAK;CACZ,WAAW,KAAK;CAChB,QAAQ,IAAI,4BAA4B;CACxC,MAAM,KAAK;CACX,KAAK,IAAI,EAAE,EAAE,EACX,UAAU,EACR,SAAS,EACP,OAAO,4BACR,EACF,EACF,CAAC;CACF,MAAM,IAAI,CAAC,6BAA6B,gCAAgC,EAAE,EACxE,UAAU,EACR,SAAS,EACP,YAAY,oBACb,EACF,EACF,CAAC;CACH;;;;ACvBD,MAAaC,OAA+B,IAAI,aAAa,EAC3D,UAAU,EACR,SAAS;CACP,MAAM;CACN,OAAO;CACP,OAAO;CACP,OAAO;CACR,EACF,EACF,CAAC;;;;ACTF,MAAaC,OAA+B;CAC1C,SAAS,IAAI,+DAA+D;CAC5E,WAAW,IAAI;EACb;EACA;EACA;EACA;EACA;EACD,CAAC;CACF,YAAY,IAAI,iDAAiD;CACjE,QAAQ,IAAI,mCAAmC;CAC/C,OAAO,IAAI,0BAA0B;CACrC,SAAS,IAAI,mCAAmC;CAChD,SAAS,IACP,mEACD;CACF;;;;AChBD,MAAaC,WAAuC,IAClD,qCACD;;;;ACFD,MAAaC,QAAiC,IAC5C,gEACA;CACE,UAAU;EACR,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,MAAM,EACJ,SAAS,WACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEjBD,MAAaC,OAAsB,IAAI,+BAA+B;;;;ACEtE,MAAaC,QAAe;CAC1B,MAAM;CACN;CACA;CACD;;;;ACLD,kBAAe"}
package/dist/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  @layer theme {
@@ -69,6 +69,7 @@
69
69
  --color-neutral-800: #262626;
70
70
  --color-neutral-900: #171717;
71
71
  --color-neutral-950: #0a0a0a;
72
+ --color-black: #000;
72
73
  --color-white: #ffffff;
73
74
  --spacing: 0.25rem;
74
75
  --text-xs: 0.75rem;
@@ -97,6 +98,7 @@
97
98
  --tracking-tight: -0.025em;
98
99
  --leading-relaxed: 1.625;
99
100
  --radius-xs: 0.125rem;
101
+ --radius-sm: 0.25rem;
100
102
  --radius-md: 0.375rem;
101
103
  --radius-lg: 0.5rem;
102
104
  --radius-xl: 0.75rem;
@@ -316,15 +318,24 @@
316
318
  .pointer-events-none {
317
319
  pointer-events: none;
318
320
  }
321
+ .visible {
322
+ visibility: visible;
323
+ }
319
324
  .absolute {
320
325
  position: absolute;
321
326
  }
327
+ .fixed {
328
+ position: fixed;
329
+ }
322
330
  .relative {
323
331
  position: relative;
324
332
  }
325
333
  .static {
326
334
  position: static;
327
335
  }
336
+ .inset-0 {
337
+ inset: calc(var(--spacing) * 0);
338
+ }
328
339
  .top-4 {
329
340
  top: calc(var(--spacing) * 4);
330
341
  }
@@ -334,6 +345,9 @@
334
345
  .z-10 {
335
346
  z-index: 10;
336
347
  }
348
+ .z-40 {
349
+ z-index: 40;
350
+ }
337
351
  .col-span-full {
338
352
  grid-column: 1 / -1;
339
353
  }
@@ -368,9 +382,15 @@
368
382
  margin-inline: auto;
369
383
  padding-inline: 2rem;
370
384
  }
385
+ .mx-auto {
386
+ margin-inline: auto;
387
+ }
371
388
  .my-6 {
372
389
  margin-block: calc(var(--spacing) * 6);
373
390
  }
391
+ .mt-2 {
392
+ margin-top: calc(var(--spacing) * 2);
393
+ }
374
394
  .mt-8 {
375
395
  margin-top: calc(var(--spacing) * 8);
376
396
  }
@@ -383,6 +403,27 @@
383
403
  .ml-4 {
384
404
  margin-left: calc(var(--spacing) * 4);
385
405
  }
406
+ .scrollbar {
407
+ &::-webkit-scrollbar-track {
408
+ background-color: var(--scrollbar-track);
409
+ border-radius: var(--scrollbar-track-radius);
410
+ }
411
+ &::-webkit-scrollbar-thumb {
412
+ background-color: var(--scrollbar-thumb);
413
+ border-radius: var(--scrollbar-thumb-radius);
414
+ }
415
+ &::-webkit-scrollbar-corner {
416
+ background-color: var(--scrollbar-corner);
417
+ border-radius: var(--scrollbar-corner-radius);
418
+ }
419
+ scrollbar-width: auto;
420
+ scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
421
+ &::-webkit-scrollbar {
422
+ display: block;
423
+ width: var(--scrollbar-width, 16px);
424
+ height: var(--scrollbar-height, 16px);
425
+ }
426
+ }
386
427
  .scrollbar-thin {
387
428
  &::-webkit-scrollbar-track {
388
429
  background-color: var(--scrollbar-track);
@@ -410,6 +451,9 @@
410
451
  .grid {
411
452
  display: grid;
412
453
  }
454
+ .grid\! {
455
+ display: grid !important;
456
+ }
413
457
  .inline {
414
458
  display: inline;
415
459
  }
@@ -431,6 +475,9 @@
431
475
  width: 100%;
432
476
  height: 100%;
433
477
  }
478
+ .h-1\.5 {
479
+ height: calc(var(--spacing) * 1.5);
480
+ }
434
481
  .h-5 {
435
482
  height: calc(var(--spacing) * 5);
436
483
  }
@@ -440,12 +487,21 @@
440
487
  .h-screen {
441
488
  height: 100vh;
442
489
  }
490
+ .max-h-\[95vh\] {
491
+ max-height: 95vh;
492
+ }
443
493
  .max-h-\[96vh\] {
444
494
  max-height: 96vh;
445
495
  }
446
496
  .w-5 {
447
497
  width: calc(var(--spacing) * 5);
448
498
  }
499
+ .w-12 {
500
+ width: calc(var(--spacing) * 12);
501
+ }
502
+ .w-32 {
503
+ width: calc(var(--spacing) * 32);
504
+ }
449
505
  .w-full {
450
506
  width: 100%;
451
507
  }
@@ -485,15 +541,27 @@
485
541
  .grid-rows-\[auto_auto\] {
486
542
  grid-template-rows: auto auto;
487
543
  }
544
+ .grid-rows-\[auto_auto_1fr_auto\] {
545
+ grid-template-rows: auto auto 1fr auto;
546
+ }
488
547
  .grid-rows-subgrid {
489
548
  grid-template-rows: subgrid;
490
549
  }
550
+ .flex-row {
551
+ flex-direction: row;
552
+ }
491
553
  .items-center {
492
554
  align-items: center;
493
555
  }
556
+ .items-end {
557
+ align-items: flex-end;
558
+ }
494
559
  .justify-center {
495
560
  justify-content: center;
496
561
  }
562
+ .justify-end {
563
+ justify-content: flex-end;
564
+ }
497
565
  .justify-start {
498
566
  justify-content: flex-start;
499
567
  }
@@ -503,6 +571,9 @@
503
571
  .gap-2 {
504
572
  gap: calc(var(--spacing) * 2);
505
573
  }
574
+ .gap-3 {
575
+ gap: calc(var(--spacing) * 3);
576
+ }
506
577
  .gap-\[inherit\] {
507
578
  gap: inherit;
508
579
  }
@@ -550,16 +621,31 @@
550
621
  .rounded-md {
551
622
  border-radius: var(--radius-md);
552
623
  }
624
+ .rounded-sm {
625
+ border-radius: var(--radius-sm);
626
+ }
553
627
  .rounded-xl {
554
628
  border-radius: var(--radius-xl);
555
629
  }
556
630
  .rounded-xs {
557
631
  border-radius: var(--radius-xs);
558
632
  }
633
+ .rounded-t-lg {
634
+ border-top-left-radius: var(--radius-lg);
635
+ border-top-right-radius: var(--radius-lg);
636
+ }
637
+ .rounded-b-none {
638
+ border-bottom-right-radius: 0;
639
+ border-bottom-left-radius: 0;
640
+ }
559
641
  .border {
560
642
  border-style: var(--tw-border-style);
561
643
  border-width: 1px;
562
644
  }
645
+ .border-0 {
646
+ border-style: var(--tw-border-style);
647
+ border-width: 0px;
648
+ }
563
649
  .border-2 {
564
650
  border-style: var(--tw-border-style);
565
651
  border-width: 2px;
@@ -991,6 +1077,12 @@
991
1077
  .bg-bg-warning {
992
1078
  background-color: var(--color-bg-warning);
993
1079
  }
1080
+ .bg-black\/50 {
1081
+ background-color: color-mix(in srgb, #000 50%, transparent);
1082
+ @supports (color: color-mix(in lab, red, red)) {
1083
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
1084
+ }
1085
+ }
994
1086
  .bg-blue-50 {
995
1087
  background-color: var(--color-blue-50);
996
1088
  }
@@ -1024,6 +1116,9 @@
1024
1116
  .bg-blue-950 {
1025
1117
  background-color: var(--color-blue-950);
1026
1118
  }
1119
+ .bg-border {
1120
+ background-color: var(--color-border);
1121
+ }
1027
1122
  .bg-code-50 {
1028
1123
  background-color: var(--color-code-50);
1029
1124
  }
@@ -1294,6 +1389,9 @@
1294
1389
  .px-5 {
1295
1390
  padding-inline: calc(var(--spacing) * 5);
1296
1391
  }
1392
+ .px-6 {
1393
+ padding-inline: calc(var(--spacing) * 6);
1394
+ }
1297
1395
  .px-8 {
1298
1396
  padding-inline: calc(var(--spacing) * 8);
1299
1397
  }
@@ -1312,6 +1410,9 @@
1312
1410
  .py-3\.5 {
1313
1411
  padding-block: calc(var(--spacing) * 3.5);
1314
1412
  }
1413
+ .py-4 {
1414
+ padding-block: calc(var(--spacing) * 4);
1415
+ }
1315
1416
  .py-6 {
1316
1417
  padding-block: calc(var(--spacing) * 6);
1317
1418
  }
@@ -1757,6 +1858,11 @@
1757
1858
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1758
1859
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1759
1860
  }
1861
+ .inset-shadow-sm\/20 {
1862
+ --tw-inset-shadow-alpha: 20%;
1863
+ --tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, oklab(from rgb(0 0 0 / 0.05) l a b / 20%));
1864
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1865
+ }
1760
1866
  .shadow-amber-50 {
1761
1867
  --tw-shadow-color: #fffbeb;
1762
1868
  @supports (color: color-mix(in lab, red, red)) {
@@ -2399,6 +2505,12 @@
2399
2505
  --tw-shadow-color: color-mix(in oklab, var(--color-text-warning) var(--tw-shadow-alpha), transparent);
2400
2506
  }
2401
2507
  }
2508
+ .inset-shadow-black {
2509
+ --tw-inset-shadow-color: #000;
2510
+ @supports (color: color-mix(in lab, red, red)) {
2511
+ --tw-inset-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-inset-shadow-alpha), transparent);
2512
+ }
2513
+ }
2402
2514
  .outline-hidden {
2403
2515
  --tw-outline-style: none;
2404
2516
  outline-style: none;
@@ -2421,6 +2533,11 @@
2421
2533
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2422
2534
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
2423
2535
  }
2536
+ .transition {
2537
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
2538
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2539
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2540
+ }
2424
2541
  .transition-\[color\,box-shadow\] {
2425
2542
  transition-property: color,box-shadow;
2426
2543
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2475,6 +2592,11 @@
2475
2592
  grid-column-start: 2;
2476
2593
  }
2477
2594
  }
2595
+ .\*\:row-start-1 {
2596
+ :is(& > *) {
2597
+ grid-row-start: 1;
2598
+ }
2599
+ }
2478
2600
  .\*\:max-h-none {
2479
2601
  :is(& > *) {
2480
2602
  max-height: none;
@@ -2495,12 +2617,66 @@
2495
2617
  text-decoration-line: none;
2496
2618
  }
2497
2619
  }
2620
+ .group-\[\[role\=dialog\]\]\/tray\:border-0 {
2621
+ &:is(:where(.group\/tray):is([role=dialog]) *) {
2622
+ border-style: var(--tw-border-style);
2623
+ border-width: 0px;
2624
+ }
2625
+ }
2626
+ .group-\[\[role\=dialog\]\]\/tray\:shadow-none {
2627
+ &:is(:where(.group\/tray):is([role=dialog]) *) {
2628
+ --tw-shadow: 0 0 #0000;
2629
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2630
+ }
2631
+ }
2632
+ .group-\[\[role\=dialog\]\]\/tray\:drop-shadow-none {
2633
+ &:is(:where(.group\/tray):is([role=dialog]) *) {
2634
+ --tw-drop-shadow: ;
2635
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
2636
+ }
2637
+ }
2638
+ .after\:absolute {
2639
+ &::after {
2640
+ content: var(--tw-content);
2641
+ position: absolute;
2642
+ }
2643
+ }
2644
+ .after\:inset-x-0 {
2645
+ &::after {
2646
+ content: var(--tw-content);
2647
+ inset-inline: calc(var(--spacing) * 0);
2648
+ }
2649
+ }
2650
+ .after\:top-full {
2651
+ &::after {
2652
+ content: var(--tw-content);
2653
+ top: 100%;
2654
+ }
2655
+ }
2656
+ .after\:h-screen {
2657
+ &::after {
2658
+ content: var(--tw-content);
2659
+ height: 100vh;
2660
+ }
2661
+ }
2662
+ .after\:bg-bg-surface-overlay {
2663
+ &::after {
2664
+ content: var(--tw-content);
2665
+ background-color: var(--color-bg-surface-overlay);
2666
+ }
2667
+ }
2498
2668
  .after\:content-\[\"\:\"\] {
2499
2669
  &::after {
2500
2670
  --tw-content: ":";
2501
2671
  content: var(--tw-content);
2502
2672
  }
2503
2673
  }
2674
+ .after\:content-\[\'\'\] {
2675
+ &::after {
2676
+ --tw-content: '';
2677
+ content: var(--tw-content);
2678
+ }
2679
+ }
2504
2680
  .group-required\/field\:after\:content-\[\"\*\"\] {
2505
2681
  &:is(:where(.group\/field):where([data-rac])[data-required] *) {
2506
2682
  &::after {
@@ -2690,16 +2866,6 @@
2690
2866
  }
2691
2867
  }
2692
2868
  }
2693
- .focus-visible\:outline {
2694
- &:where([data-rac])[data-focus-visible] {
2695
- outline-style: var(--tw-outline-style);
2696
- outline-width: 1px;
2697
- }
2698
- &:where(:not([data-rac])):focus-visible {
2699
- outline-style: var(--tw-outline-style);
2700
- outline-width: 1px;
2701
- }
2702
- }
2703
2869
  .disabled\:cursor-not-allowed {
2704
2870
  &:where([data-rac])[data-disabled] {
2705
2871
  cursor: not-allowed;
@@ -2911,6 +3077,11 @@
2911
3077
  }
2912
3078
  }
2913
3079
  }
3080
+ .\[\&\>\:first-child\]\:mr-6 {
3081
+ &>:first-child {
3082
+ margin-right: calc(var(--spacing) * 6);
3083
+ }
3084
+ }
2914
3085
  }
2915
3086
  @layer base {
2916
3087
  *,
package/dist/theme.css CHANGED
@@ -172,6 +172,5 @@
172
172
  }
173
173
 
174
174
  @plugin 'tailwindcss-react-aria-components';
175
- @plugin '@tailwindcss/typography';
176
175
  @plugin 'tailwindcss-animate';
177
176
  @plugin 'tailwind-scrollbar';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marigold/theme-docs",
3
- "version": "4.0.2",
3
+ "version": "4.1.1",
4
4
  "description": "Marigold Docs Theme",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -41,11 +41,13 @@
41
41
  "directory": "themes/theme-docs"
42
42
  },
43
43
  "devDependencies": {
44
- "@tailwindcss/postcss": "4.1.17",
44
+ "@tailwindcss/postcss": "4.1.18",
45
+ "cross-env": "^7.0.3",
45
46
  "cssnano": "7.1.2",
46
47
  "postcss-cli": "11.0.1",
47
48
  "postcss-prefix-selector": "2.1.1",
48
- "tailwindcss": "4.1.17",
49
+ "shx": "^0.3.4",
50
+ "tailwindcss": "4.1.18",
49
51
  "tsdown": "0.16.8",
50
52
  "@marigold/tsconfig": "0.4.2"
51
53
  },
@@ -54,10 +56,10 @@
54
56
  "tailwind-scrollbar": "4.0.2",
55
57
  "tailwindcss-animate": "1.0.7",
56
58
  "tailwindcss-react-aria-components": "2.0.1",
57
- "@marigold/components": "16.1.0",
58
- "@marigold/system": "16.1.0"
59
+ "@marigold/components": "17.0.1",
60
+ "@marigold/system": "17.0.1"
59
61
  },
60
62
  "scripts": {
61
- "build": "NODE_ENV=production tsdown && postcss -o dist/styles.css src/styles.css && cp src/theme.css dist/theme.css"
63
+ "build": "cross-env NODE_ENV=production tsdown && postcss -o dist/styles.css src/styles.css && shx cp src/theme.css dist/theme.css"
62
64
  }
63
65
  }