@sellmate/design-system 1.8.0 → 1.10.0

package/dist/esm/sd-tag.entry.js

@@ -1,225 +0,0 @@
-import { r as registerInstance, h } from './index-DNWwGHho.js';
-
-const tag = {
-	xs: {
-		height: "20",
-		paddingX: "8",
-		gap: "4",
-		typography: {
-			fontSize: "11",
-			fontWeight: "500",
-			lineHeight: "18"},
-		radius: "6"
-	},
-	sm: {
-		height: "24",
-		paddingX: "8",
-		gap: "4",
-		typography: {
-			fontSize: "12",
-			fontWeight: "700",
-			lineHeight: "20"
-		},
-		radius: "6"
-	},
-	md: {
-		height: "28",
-		paddingX: "12",
-		gap: "6",
-		typography: {
-			fontSize: "14",
-			fontWeight: "700",
-			lineHeight: "24"},
-		radius: "8"
-	},
-	red: {
-		content: "#FB4444",
-		bg: "#FCEFEF"
-	},
-	orange: {
-		content: "#FF6B00",
-		bg: "#FEF1EA"
-	},
-	yellow: {
-		content: "#916C0D",
-		bg: "#FFF7DD"
-	},
-	green: {
-		content: "#00973C",
-		bg: "#E8F9EF"
-	},
-	blue: {
-		content: "#0075FF",
-		bg: "#E6F1FF"
-	},
-	darkblue: {
-		content: "#006AC1",
-		bg: "#EAF5FE"
-	},
-	indigo: {
-		content: "#004290",
-		bg: "#EFF6FF"
-	},
-	grey: {
-		content: "#737373",
-		bg: "#EEEEEE"
-	}
-};
-var tagTokens = {
-	tag: tag
-};
-
-const TAG_SHAPES = ['square', 'pill'];
-const TAG_SIZES = ['xs', 'sm', 'md'];
-const TAG_COLORS = [
-    'grey',
-    'red',
-    'orange',
-    'yellow',
-    'green',
-    'blue',
-    'darkblue',
-    'indigo',
-];
-const TAG_COLOR_CONFIG = {
-    grey: {
-        background: tagTokens.tag.grey.bg,
-        content: tagTokens.tag.grey.content,
-        icon: tagTokens.tag.grey.content,
-    },
-    red: {
-        background: tagTokens.tag.red.bg,
-        content: tagTokens.tag.red.content,
-        icon: tagTokens.tag.red.content,
-    },
-    orange: {
-        background: tagTokens.tag.orange.bg,
-        content: tagTokens.tag.orange.content,
-        icon: tagTokens.tag.orange.content,
-    },
-    yellow: {
-        background: tagTokens.tag.yellow.bg,
-        content: tagTokens.tag.yellow.content,
-        icon: tagTokens.tag.yellow.content,
-    },
-    green: {
-        background: tagTokens.tag.green.bg,
-        content: tagTokens.tag.green.content,
-        icon: tagTokens.tag.green.content,
-    },
-    blue: {
-        background: tagTokens.tag.blue.bg,
-        content: tagTokens.tag.blue.content,
-        icon: tagTokens.tag.blue.content,
-    },
-    darkblue: {
-        background: tagTokens.tag.darkblue.bg,
-        content: tagTokens.tag.darkblue.content,
-        icon: tagTokens.tag.darkblue.content,
-    },
-    indigo: {
-        background: tagTokens.tag.indigo.bg,
-        content: tagTokens.tag.indigo.content,
-        icon: tagTokens.tag.indigo.content,
-    },
-};
-const SQUARE_SIZE_CONFIG = {
-    xs: {
-        height: `${tagTokens.tag.xs.height}px`,
-        paddingX: `${tagTokens.tag.xs.paddingX}px`,
-        gap: `${tagTokens.tag.xs.gap}px`,
-        fontSize: `${tagTokens.tag.xs.typography.fontSize}px`,
-        fontWeight: tagTokens.tag.xs.typography.fontWeight,
-        lineHeight: `${tagTokens.tag.xs.typography.lineHeight}px`,
-        iconSize: 12,
-        radius: `${tagTokens.tag.xs.radius}px`,
-    },
-    sm: {
-        height: `${tagTokens.tag.sm.height}px`,
-        paddingX: `${tagTokens.tag.sm.paddingX}px`,
-        gap: `${tagTokens.tag.sm.gap}px`,
-        fontSize: `${tagTokens.tag.sm.typography.fontSize}px`,
-        fontWeight: tagTokens.tag.sm.typography.fontWeight,
-        lineHeight: `${tagTokens.tag.sm.typography.lineHeight}px`,
-        iconSize: 16,
-        radius: `${tagTokens.tag.sm.radius}px`,
-    },
-    md: {
-        height: `${tagTokens.tag.md.height}px`,
-        paddingX: `${tagTokens.tag.md.paddingX}px`,
-        gap: `${tagTokens.tag.md.gap}px`,
-        fontSize: `${tagTokens.tag.md.typography.fontSize}px`,
-        fontWeight: tagTokens.tag.md.typography.fontWeight,
-        lineHeight: `${tagTokens.tag.md.typography.lineHeight}px`,
-        iconSize: 16,
-        radius: `${tagTokens.tag.md.radius}px`,
-    },
-};
-const PILL_SIZE_CONFIG = {
-    xs: { ...SQUARE_SIZE_CONFIG.xs, radius: '999px' },
-    sm: { ...SQUARE_SIZE_CONFIG.sm, radius: '999px' },
-    md: { ...SQUARE_SIZE_CONFIG.md, radius: '999px' },
-};
-const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flatMap(size => TAG_COLORS.map(color => {
-    const sizeConfig = shape === 'square' ? SQUARE_SIZE_CONFIG[size] : PILL_SIZE_CONFIG[size];
-    return [
-        `${shape}_${size}_${color}`,
-        {
-            shape,
-            size,
-            color,
-            ...sizeConfig,
-            ...TAG_COLOR_CONFIG[color],
-        },
-    ];
-}))));
-const isTagName = (value) => Object.prototype.hasOwnProperty.call(TAG_CONFIG, value);
-
-const sdTagCss = () => `sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:var(--sd-tag-line-height, 20px)}`;
-
-const SdTag = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    name = 'square_sm_grey';
-    label = '';
-    icon;
-    // 아이콘이 좌측 배치되는 게 자연스러운 default. prop 이름 변경(isRight 등)은 public API breaking 이라 별도 이슈로 분리.
-    // eslint-disable-next-line stencil/ban-default-true
-    isLeft = true;
-    componentWillLoad() {
-        this.name = this.name ?? 'square_sm_grey';
-    }
-    get resolvedName() {
-        if (!isTagName(this.name)) {
-            throw new Error(`Invalid sd-tag name: "${this.name}"`);
-        }
-        return this.name;
-    }
-    get resolvedConfig() {
-        return TAG_CONFIG[this.resolvedName];
-    }
-    renderIcon(color, size) {
-        if (this.icon == null)
-            return null;
-        return h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
-    }
-    render() {
-        const config = this.resolvedConfig;
-        const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: '945a8a13f4891b5174e48e262b2a108674da7198', class: "sd-tag", style: {
-                '--sd-tag-background': config.background,
-                '--sd-tag-content': config.content,
-                '--sd-tag-height': config.height,
-                '--sd-tag-padding-x': config.paddingX,
-                '--sd-tag-gap': config.gap,
-                '--sd-tag-font-size': config.fontSize,
-                '--sd-tag-font-weight': config.fontWeight,
-                '--sd-tag-line-height': config.lineHeight,
-                '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '441932c2eb85eea471838db541fb95302527df23', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
-    }
-};
-SdTag.style = sdTagCss();
-
-export { SdTag as sd_tag };