@joanroucoux/cairn-ui 0.8.1 → 0.9.0

package/fesm2022/joanroucoux-cairn-ui-card.mjs

@@ -1,146 +1,241 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, Component } from '@angular/core';
-
-/** Available card variants. `CardVariant` is derived from this tuple. */
-const CARD_VARIANTS = ['default', 'elevated', 'inset'];
-/** Available card paddings. `CardPadding` is derived from this tuple. */
-const CARD_PADDINGS = ['none', 'xs', 'sm', 'md', 'list', 'rows', 'recap', 'panel'];
-/** Where the card surface (fill, border, radius) and its padding apply. `CardSurface` is derived from this tuple. */
-const CARD_SURFACES = ['always', 'lg', 'max-lg'];
-/** Border of the card surface; `auto` follows the variant. `CardBorder` is derived from this tuple. */
-const CARD_BORDERS = ['auto', 'none', 'border', 'hairline'];
-const BASE_CLASSES = 'block';
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, input } from "@angular/core";
+const CARD_VARIANTS = [
+	"default",
+	"elevated",
+	"inset"
+];
+const CARD_PADDINGS = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"list",
+	"rows",
+	"recap",
+	"panel"
+];
+const CARD_SURFACES = [
+	"always",
+	"lg",
+	"max-lg"
+];
+const BASE_CLASSES = "block";
 const VARIANT_CLASSES = {
-    default: {
-        always: 'rounded-container bg-(--card) text-(--card-foreground)',
-        lg: 'lg:rounded-container lg:bg-(--card) lg:text-(--card-foreground)',
-        'max-lg': 'max-lg:rounded-container max-lg:bg-(--card) max-lg:text-(--card-foreground)',
-    },
-    elevated: {
-        always: 'rounded-container bg-(--elevated) text-(--foreground)',
-        lg: 'lg:rounded-container lg:bg-(--elevated) lg:text-(--foreground)',
-        'max-lg': 'max-lg:rounded-container max-lg:bg-(--elevated) max-lg:text-(--foreground)',
-    },
-    inset: {
-        always: 'rounded-control bg-(--background) text-(--foreground)',
-        lg: 'lg:rounded-control lg:bg-(--background) lg:text-(--foreground)',
-        'max-lg': 'max-lg:rounded-control max-lg:bg-(--background) max-lg:text-(--foreground)',
-    },
+	default: {
+		always: "rounded-container bg-(--card) text-(--card-foreground)",
+		lg: "lg:rounded-container lg:bg-(--card) lg:text-(--card-foreground)",
+		"max-lg": "max-lg:rounded-container max-lg:bg-(--card) max-lg:text-(--card-foreground)"
+	},
+	elevated: {
+		always: "rounded-container bg-(--elevated) text-(--foreground)",
+		lg: "lg:rounded-container lg:bg-(--elevated) lg:text-(--foreground)",
+		"max-lg": "max-lg:rounded-container max-lg:bg-(--elevated) max-lg:text-(--foreground)"
+	},
+	inset: {
+		always: "rounded-control bg-(--background) text-(--foreground)",
+		lg: "lg:rounded-control lg:bg-(--background) lg:text-(--foreground)",
+		"max-lg": "max-lg:rounded-control max-lg:bg-(--background) max-lg:text-(--foreground)"
+	}
 };
 const AUTO_BORDERS = {
-    default: 'border',
-    elevated: 'hairline',
-    inset: 'none',
+	default: "border",
+	elevated: "hairline",
+	inset: "none"
 };
 const BORDER_CLASSES = {
-    none: { always: '', lg: '', 'max-lg': '' },
-    border: {
-        always: 'shadow-[inset_0_0_0_1px_var(--border)]',
-        lg: 'lg:shadow-[inset_0_0_0_1px_var(--border)]',
-        'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--border)]',
-    },
-    hairline: {
-        always: 'shadow-[inset_0_0_0_1px_var(--hairline)]',
-        lg: 'lg:shadow-[inset_0_0_0_1px_var(--hairline)]',
-        'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--hairline)]',
-    },
+	none: {
+		always: "",
+		lg: "",
+		"max-lg": ""
+	},
+	border: {
+		always: "shadow-[inset_0_0_0_1px_var(--border)]",
+		lg: "lg:shadow-[inset_0_0_0_1px_var(--border)]",
+		"max-lg": "max-lg:shadow-[inset_0_0_0_1px_var(--border)]"
+	},
+	hairline: {
+		always: "shadow-[inset_0_0_0_1px_var(--hairline)]",
+		lg: "lg:shadow-[inset_0_0_0_1px_var(--hairline)]",
+		"max-lg": "max-lg:shadow-[inset_0_0_0_1px_var(--hairline)]"
+	}
 };
 const PADDING_CLASSES = {
-    none: {
-        always: 'p-0',
-        lg: 'lg:p-0',
-        'max-lg': 'max-lg:p-0',
-    },
-    xs: {
-        always: 'p-1',
-        lg: 'lg:p-1',
-        'max-lg': 'max-lg:p-1',
-    },
-    sm: {
-        always: 'p-3',
-        lg: 'lg:p-3',
-        'max-lg': 'max-lg:p-3',
-    },
-    md: {
-        always: 'p-(--inset-card)',
-        lg: 'lg:p-(--inset-card)',
-        'max-lg': 'max-lg:p-(--inset-card)',
-    },
-    list: {
-        always: 'px-2 py-3',
-        lg: 'lg:px-2 lg:py-3',
-        'max-lg': 'max-lg:px-2 max-lg:py-3',
-    },
-    rows: {
-        always: 'px-(--inset-card) py-1',
-        lg: 'lg:px-(--inset-card) lg:py-1',
-        'max-lg': 'max-lg:px-(--inset-card) max-lg:py-1',
-    },
-    recap: {
-        always: 'px-3 py-1',
-        lg: 'lg:px-3 lg:py-1',
-        'max-lg': 'max-lg:px-3 max-lg:py-1',
-    },
-    panel: {
-        always: 'px-3 py-2.5 lg:px-4 lg:py-3',
-        lg: 'lg:px-4 lg:py-3',
-        'max-lg': 'max-lg:px-3 max-lg:py-2.5',
-    },
+	none: {
+		always: "p-0",
+		lg: "lg:p-0",
+		"max-lg": "max-lg:p-0"
+	},
+	xs: {
+		always: "p-1",
+		lg: "lg:p-1",
+		"max-lg": "max-lg:p-1"
+	},
+	sm: {
+		always: "p-3",
+		lg: "lg:p-3",
+		"max-lg": "max-lg:p-3"
+	},
+	md: {
+		always: "p-(--inset-card)",
+		lg: "lg:p-(--inset-card)",
+		"max-lg": "max-lg:p-(--inset-card)"
+	},
+	list: {
+		always: "px-2 py-3",
+		lg: "lg:px-2 lg:py-3",
+		"max-lg": "max-lg:px-2 max-lg:py-3"
+	},
+	rows: {
+		always: "px-(--inset-card) py-1",
+		lg: "lg:px-(--inset-card) lg:py-1",
+		"max-lg": "max-lg:px-(--inset-card) max-lg:py-1"
+	},
+	recap: {
+		always: "px-3 py-1",
+		lg: "lg:px-3 lg:py-1",
+		"max-lg": "max-lg:px-3 max-lg:py-1"
+	},
+	panel: {
+		always: "px-3 py-2.5 lg:px-4 lg:py-3",
+		lg: "lg:px-4 lg:py-3",
+		"max-lg": "max-lg:px-3 max-lg:py-2.5"
+	}
 };
-/**
- * Surface that groups related content: a summary block, a table, a side panel. `surface` limits the
- * fill, border, radius and padding to one side of `64rem`, for a block that is a card on a desktop and
- * plain on an iPhone, or the reverse. `variant="inset"` is the `--background` box that sits inside a
- * card or a dialog: a picked title, a results list, a recap, an empty-state panel.
- *
- * @example
- * <ui-card variant="elevated" padding="sm">Total</ui-card>
- * <ui-card variant="inset" border="hairline" padding="xs">Results</ui-card>
- * <ui-card padding="none" clip>Table that touches the edges, clipped to the corners</ui-card>
- * <ui-card surface="max-lg">Card on an iPhone, plain on a desktop</ui-card>
- */
-class UiCard {
-    variant = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    padding = input('md', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
-    surface = input('always', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
-    border = input('auto', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
-    clip = input(false, { ...(ngDevMode ? { debugName: "clip" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    classes = computed(() => {
-        const variant = this.variant();
-        const surface = this.surface();
-        const border = this.border();
-        return [
-            BASE_CLASSES,
-            VARIANT_CLASSES[variant][surface],
-            BORDER_CLASSES[border === 'auto' ? AUTO_BORDERS[variant] : border][surface],
-            PADDING_CLASSES[this.padding()][surface],
-            this.clip() ? 'overflow-hidden' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: UiCard, isStandalone: true, selector: "ui-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, clip: { classPropertyName: "clip", publicName: "clip", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiCard, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-card',
-                    template: '<ng-content />',
-                    host: {
-                        '[class]': 'classes()',
-                    },
-                }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], clip: [{ type: i0.Input, args: [{ isSignal: true, alias: "clip", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var UiCard = class UiCard {
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	padding = input("md", ...ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []);
+	surface = input("always", ...ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []);
+	border = input("auto", ...ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []);
+	clip = input(false, {
+		...ngDevMode ? { debugName: "clip" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => {
+		const variant = this.variant();
+		const surface = this.surface();
+		const border = this.border();
+		return [
+			BASE_CLASSES,
+			VARIANT_CLASSES[variant][surface],
+			BORDER_CLASSES[border === "auto" ? AUTO_BORDERS[variant] : border][surface],
+			PADDING_CLASSES[this.padding()][surface],
+			this.clip() ? "overflow-hidden" : ""
+		].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiCard,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiCard,
+		isStandalone: true,
+		selector: "ui-card",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			padding: {
+				classPropertyName: "padding",
+				publicName: "padding",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			surface: {
+				classPropertyName: "surface",
+				publicName: "surface",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			border: {
+				classPropertyName: "border",
+				publicName: "border",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clip: {
+				classPropertyName: "clip",
+				publicName: "clip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiCard,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-card",
+			template: "<ng-content />",
+			host: { "[class]": "classes()" }
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		padding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "padding",
+				required: false
+			}]
+		}],
+		surface: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "surface",
+				required: false
+			}]
+		}],
+		border: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "border",
+				required: false
+			}]
+		}],
+		clip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clip",
+				required: false
+			}]
+		}]
+	}
+});
 export { CARD_PADDINGS, CARD_SURFACES, CARD_VARIANTS, UiCard };
-//# sourceMappingURL=joanroucoux-cairn-ui-card.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-card.mjs.map

package/fesm2022/joanroucoux-cairn-ui-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"joanroucoux-cairn-ui-card.mjs","sources":["../../../projects/ui/card/card.ts","../../../projects/ui/card/joanroucoux-cairn-ui-card.ts"],"sourcesContent":["import { Component, booleanAttribute, computed, input } from '@angular/core';\n\n/** Available card variants. `CardVariant` is derived from this tuple. */\nexport const CARD_VARIANTS = ['default', 'elevated', 'inset'] as const;\nexport type CardVariant = (typeof CARD_VARIANTS)[number];\n\n/** Available card paddings. `CardPadding` is derived from this tuple. */\nexport const CARD_PADDINGS = ['none', 'xs', 'sm', 'md', 'list', 'rows', 'recap', 'panel'] as const;\nexport type CardPadding = (typeof CARD_PADDINGS)[number];\n\n/** Where the card surface (fill, border, radius) and its padding apply. `CardSurface` is derived from this tuple. */\nexport const CARD_SURFACES = ['always', 'lg', 'max-lg'] as const;\nexport type CardSurface = (typeof CARD_SURFACES)[number];\n\n/** Border of the card surface; `auto` follows the variant. `CardBorder` is derived from this tuple. */\nexport const CARD_BORDERS = ['auto', 'none', 'border', 'hairline'] as const;\nexport type CardBorder = (typeof CARD_BORDERS)[number];\n\nconst BASE_CLASSES = 'block';\n\nconst VARIANT_CLASSES: Record<CardVariant, Record<CardSurface, string>> = {\n  default: {\n    always: 'rounded-container bg-(--card) text-(--card-foreground)',\n    lg: 'lg:rounded-container lg:bg-(--card) lg:text-(--card-foreground)',\n    'max-lg': 'max-lg:rounded-container max-lg:bg-(--card) max-lg:text-(--card-foreground)',\n  },\n  elevated: {\n    always: 'rounded-container bg-(--elevated) text-(--foreground)',\n    lg: 'lg:rounded-container lg:bg-(--elevated) lg:text-(--foreground)',\n    'max-lg': 'max-lg:rounded-container max-lg:bg-(--elevated) max-lg:text-(--foreground)',\n  },\n  inset: {\n    always: 'rounded-control bg-(--background) text-(--foreground)',\n    lg: 'lg:rounded-control lg:bg-(--background) lg:text-(--foreground)',\n    'max-lg': 'max-lg:rounded-control max-lg:bg-(--background) max-lg:text-(--foreground)',\n  },\n};\n\nconst AUTO_BORDERS: Record<CardVariant, Exclude<CardBorder, 'auto'>> = {\n  default: 'border',\n  elevated: 'hairline',\n  inset: 'none',\n};\n\nconst BORDER_CLASSES: Record<Exclude<CardBorder, 'auto'>, Record<CardSurface, string>> = {\n  none: { always: '', lg: '', 'max-lg': '' },\n  border: {\n    always: 'shadow-[inset_0_0_0_1px_var(--border)]',\n    lg: 'lg:shadow-[inset_0_0_0_1px_var(--border)]',\n    'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--border)]',\n  },\n  hairline: {\n    always: 'shadow-[inset_0_0_0_1px_var(--hairline)]',\n    lg: 'lg:shadow-[inset_0_0_0_1px_var(--hairline)]',\n    'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--hairline)]',\n  },\n};\n\nconst PADDING_CLASSES: Record<CardPadding, Record<CardSurface, string>> = {\n  none: {\n    always: 'p-0',\n    lg: 'lg:p-0',\n    'max-lg': 'max-lg:p-0',\n  },\n  xs: {\n    always: 'p-1',\n    lg: 'lg:p-1',\n    'max-lg': 'max-lg:p-1',\n  },\n  sm: {\n    always: 'p-3',\n    lg: 'lg:p-3',\n    'max-lg': 'max-lg:p-3',\n  },\n  md: {\n    always: 'p-(--inset-card)',\n    lg: 'lg:p-(--inset-card)',\n    'max-lg': 'max-lg:p-(--inset-card)',\n  },\n  list: {\n    always: 'px-2 py-3',\n    lg: 'lg:px-2 lg:py-3',\n    'max-lg': 'max-lg:px-2 max-lg:py-3',\n  },\n  rows: {\n    always: 'px-(--inset-card) py-1',\n    lg: 'lg:px-(--inset-card) lg:py-1',\n    'max-lg': 'max-lg:px-(--inset-card) max-lg:py-1',\n  },\n  recap: {\n    always: 'px-3 py-1',\n    lg: 'lg:px-3 lg:py-1',\n    'max-lg': 'max-lg:px-3 max-lg:py-1',\n  },\n  panel: {\n    always: 'px-3 py-2.5 lg:px-4 lg:py-3',\n    lg: 'lg:px-4 lg:py-3',\n    'max-lg': 'max-lg:px-3 max-lg:py-2.5',\n  },\n};\n\n/**\n * Surface that groups related content: a summary block, a table, a side panel. `surface` limits the\n * fill, border, radius and padding to one side of `64rem`, for a block that is a card on a desktop and\n * plain on an iPhone, or the reverse. `variant=\"inset\"` is the `--background` box that sits inside a\n * card or a dialog: a picked title, a results list, a recap, an empty-state panel.\n *\n * @example\n * <ui-card variant=\"elevated\" padding=\"sm\">Total</ui-card>\n * <ui-card variant=\"inset\" border=\"hairline\" padding=\"xs\">Results</ui-card>\n * <ui-card padding=\"none\" clip>Table that touches the edges, clipped to the corners</ui-card>\n * <ui-card surface=\"max-lg\">Card on an iPhone, plain on a desktop</ui-card>\n */\n@Component({\n  selector: 'ui-card',\n  template: '<ng-content />',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiCard {\n  readonly variant = input<CardVariant>('default');\n  readonly padding = input<CardPadding>('md');\n  readonly surface = input<CardSurface>('always');\n  readonly border = input<CardBorder>('auto');\n  readonly clip = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() => {\n    const variant = this.variant();\n    const surface = this.surface();\n    const border = this.border();\n\n    return [\n      BASE_CLASSES,\n      VARIANT_CLASSES[variant][surface],\n      BORDER_CLASSES[border === 'auto' ? AUTO_BORDERS[variant] : border][surface],\n      PADDING_CLASSES[this.padding()][surface],\n      this.clip() ? 'overflow-hidden' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"joanroucoux-cairn-ui-card.mjs","names":[],"sources":["../../../projects/ui/card/card.ts"],"sourcesContent":["import { Component, booleanAttribute, computed, input } from '@angular/core';\n\n/** Available card variants. */\nexport const CARD_VARIANTS = ['default', 'elevated', 'inset'] as const;\nexport type CardVariant = (typeof CARD_VARIANTS)[number];\n\n/** Available card paddings. */\nexport const CARD_PADDINGS = ['none', 'xs', 'sm', 'md', 'list', 'rows', 'recap', 'panel'] as const;\nexport type CardPadding = (typeof CARD_PADDINGS)[number];\n\n/** Where the card surface (fill, border, radius) and its padding apply. */\nexport const CARD_SURFACES = ['always', 'lg', 'max-lg'] as const;\nexport type CardSurface = (typeof CARD_SURFACES)[number];\n\n/** Border of the card surface; `auto` follows the variant. */\nexport const CARD_BORDERS = ['auto', 'none', 'border', 'hairline'] as const;\nexport type CardBorder = (typeof CARD_BORDERS)[number];\n\nconst BASE_CLASSES = 'block';\n\nconst VARIANT_CLASSES: Record<CardVariant, Record<CardSurface, string>> = {\n  default: {\n    always: 'rounded-container bg-(--card) text-(--card-foreground)',\n    lg: 'lg:rounded-container lg:bg-(--card) lg:text-(--card-foreground)',\n    'max-lg': 'max-lg:rounded-container max-lg:bg-(--card) max-lg:text-(--card-foreground)',\n  },\n  elevated: {\n    always: 'rounded-container bg-(--elevated) text-(--foreground)',\n    lg: 'lg:rounded-container lg:bg-(--elevated) lg:text-(--foreground)',\n    'max-lg': 'max-lg:rounded-container max-lg:bg-(--elevated) max-lg:text-(--foreground)',\n  },\n  inset: {\n    always: 'rounded-control bg-(--background) text-(--foreground)',\n    lg: 'lg:rounded-control lg:bg-(--background) lg:text-(--foreground)',\n    'max-lg': 'max-lg:rounded-control max-lg:bg-(--background) max-lg:text-(--foreground)',\n  },\n};\n\nconst AUTO_BORDERS: Record<CardVariant, Exclude<CardBorder, 'auto'>> = {\n  default: 'border',\n  elevated: 'hairline',\n  inset: 'none',\n};\n\nconst BORDER_CLASSES: Record<Exclude<CardBorder, 'auto'>, Record<CardSurface, string>> = {\n  none: { always: '', lg: '', 'max-lg': '' },\n  border: {\n    always: 'shadow-[inset_0_0_0_1px_var(--border)]',\n    lg: 'lg:shadow-[inset_0_0_0_1px_var(--border)]',\n    'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--border)]',\n  },\n  hairline: {\n    always: 'shadow-[inset_0_0_0_1px_var(--hairline)]',\n    lg: 'lg:shadow-[inset_0_0_0_1px_var(--hairline)]',\n    'max-lg': 'max-lg:shadow-[inset_0_0_0_1px_var(--hairline)]',\n  },\n};\n\nconst PADDING_CLASSES: Record<CardPadding, Record<CardSurface, string>> = {\n  none: {\n    always: 'p-0',\n    lg: 'lg:p-0',\n    'max-lg': 'max-lg:p-0',\n  },\n  xs: {\n    always: 'p-1',\n    lg: 'lg:p-1',\n    'max-lg': 'max-lg:p-1',\n  },\n  sm: {\n    always: 'p-3',\n    lg: 'lg:p-3',\n    'max-lg': 'max-lg:p-3',\n  },\n  md: {\n    always: 'p-(--inset-card)',\n    lg: 'lg:p-(--inset-card)',\n    'max-lg': 'max-lg:p-(--inset-card)',\n  },\n  list: {\n    always: 'px-2 py-3',\n    lg: 'lg:px-2 lg:py-3',\n    'max-lg': 'max-lg:px-2 max-lg:py-3',\n  },\n  rows: {\n    always: 'px-(--inset-card) py-1',\n    lg: 'lg:px-(--inset-card) lg:py-1',\n    'max-lg': 'max-lg:px-(--inset-card) max-lg:py-1',\n  },\n  recap: {\n    always: 'px-3 py-1',\n    lg: 'lg:px-3 lg:py-1',\n    'max-lg': 'max-lg:px-3 max-lg:py-1',\n  },\n  panel: {\n    always: 'px-3 py-2.5 lg:px-4 lg:py-3',\n    lg: 'lg:px-4 lg:py-3',\n    'max-lg': 'max-lg:px-3 max-lg:py-2.5',\n  },\n};\n\n/**\n * Surface that groups related content: a summary block, a table, a side panel. `surface` limits the\n * card styling to one side of `64rem`. `variant=\"inset\"` is the `--background` box that sits inside\n * a card or a dialog.\n *\n * @example\n * <ui-card variant=\"elevated\" padding=\"sm\">Total</ui-card>\n * <ui-card variant=\"inset\" border=\"hairline\" padding=\"xs\">Results</ui-card>\n * <ui-card padding=\"none\" clip>Table that touches the edges, clipped to the corners</ui-card>\n * <ui-card surface=\"max-lg\">Card on an iPhone, plain on a desktop</ui-card>\n */\n@Component({\n  selector: 'ui-card',\n  template: '<ng-content />',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class UiCard {\n  readonly variant = input<CardVariant>('default');\n  readonly padding = input<CardPadding>('md');\n  readonly surface = input<CardSurface>('always');\n  readonly border = input<CardBorder>('auto');\n  readonly clip = input(false, { transform: booleanAttribute });\n\n  protected readonly classes = computed(() => {\n    const variant = this.variant();\n    const surface = this.surface();\n    const border = this.border();\n\n    return [\n      BASE_CLASSES,\n      VARIANT_CLASSES[variant][surface],\n      BORDER_CLASSES[border === 'auto' ? AUTO_BORDERS[variant] : border][surface],\n      PADDING_CLASSES[this.padding()][surface],\n      this.clip() ? 'overflow-hidden' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n}\n"],"mappings":"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"}