@sellmate/design-system 1.9.0 → 1.11.0

package/dist/esm/sd-ghost-button.entry.js

@@ -1,177 +0,0 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
-
-const ghostButton = {
-	xxs: {
-		size: "16",
-		icon: "12"
-	},
-	xs: {
-		size: "24",
-		icon: "16"
-	},
-	sm: {
-		size: "28",
-		icon: "20"
-	},
-	md: {
-		size: "36",
-		icon: "24"
-	},
-	lg: {
-		size: "62",
-		icon: "32"
-	},
-	radius: {
-		sm: "4",
-		md: "6"
-	},
-	hover: {
-		opacity: "5%"
-	},
-	icon: {
-		disabled: "#BBBBBB"
-	},
-	"default": {
-		content: "#888888",
-		hover: {
-			bg: "#222222"
-		}
-	},
-	danger: {
-		content: "#E30000",
-		hover: {
-			bg: "#E30000"
-		}
-	},
-	action: {
-		content: "#025497",
-		hover: {
-			bg: "#0075FF"
-		}
-	},
-	inverse: {
-		content: "#FFFFFF",
-		disabled: "#E1E1E1",
-		hover: {
-			bg: "#FFFFFF"
-		}
-	}
-};
-var ghostButtonTokens = {
-	ghostButton: ghostButton
-};
-
-const GHOST_BUTTON_FOCUS_RING_COLOR = '#0075FF';
-const GHOST_BUTTON_SIZES = {
-    xxs: {
-        size: Number(ghostButtonTokens.ghostButton.xxs.size),
-        icon: Number(ghostButtonTokens.ghostButton.xxs.icon),
-    },
-    xs: {
-        size: Number(ghostButtonTokens.ghostButton.xs.size),
-        icon: Number(ghostButtonTokens.ghostButton.xs.icon),
-    },
-    sm: {
-        size: Number(ghostButtonTokens.ghostButton.sm.size),
-        icon: Number(ghostButtonTokens.ghostButton.sm.icon),
-    },
-    md: {
-        size: Number(ghostButtonTokens.ghostButton.md.size),
-        icon: Number(ghostButtonTokens.ghostButton.md.icon),
-    },
-    lg: {
-        size: Number(ghostButtonTokens.ghostButton.lg.size),
-        icon: Number(ghostButtonTokens.ghostButton.lg.icon),
-    },
-};
-const GHOST_BUTTON_RADIUS = {
-    xxs: Number(ghostButtonTokens.ghostButton.radius.sm),
-    xs: Number(ghostButtonTokens.ghostButton.radius.sm),
-    sm: Number(ghostButtonTokens.ghostButton.radius.sm),
-    md: Number(ghostButtonTokens.ghostButton.radius.md),
-    lg: Number(ghostButtonTokens.ghostButton.radius.md),
-};
-const GHOST_BUTTON_HOVER_OPACITY = ghostButtonTokens.ghostButton.hover.opacity;
-const GHOST_BUTTON_CONTENT_COLORS = {
-    default: ghostButtonTokens.ghostButton.default.content,
-    danger: ghostButtonTokens.ghostButton.danger.content,
-    action: ghostButtonTokens.ghostButton.action.content,
-    inverse: ghostButtonTokens.ghostButton.inverse.content,
-};
-const GHOST_BUTTON_HOVER_BG_COLORS = {
-    default: ghostButtonTokens.ghostButton.default.hover.bg,
-    danger: ghostButtonTokens.ghostButton.danger.hover.bg,
-    action: ghostButtonTokens.ghostButton.action.hover.bg,
-    inverse: ghostButtonTokens.ghostButton.inverse.hover.bg,
-};
-const GHOST_BUTTON_DISABLED_ICON = ghostButtonTokens.ghostButton.icon.disabled;
-const GHOST_BUTTON_DISABLED_COLORS = {
-    default: GHOST_BUTTON_DISABLED_ICON,
-    danger: GHOST_BUTTON_DISABLED_ICON,
-    action: GHOST_BUTTON_DISABLED_ICON,
-    inverse: ghostButtonTokens.ghostButton.inverse.disabled,
-};
-
-const sdGhostButtonCss = () => `sd-ghost-button{display:inline-flex;width:fit-content;height:fit-content}.sd-ghost-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sd-ghost-button-size);height:var(--sd-ghost-button-size);padding:0;border:none;border-radius:var(--sd-ghost-button-radius);background:transparent;cursor:pointer;box-sizing:border-box;transition:box-shadow 0.2s ease;-webkit-user-select:none;user-select:none}.sd-ghost-button::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--sd-ghost-button-hover-bg);opacity:0;transition:opacity 0.2s ease;pointer-events:none}.sd-ghost-button:hover:not(.sd-ghost-button--disabled)::before{opacity:var(--sd-ghost-button-hover-opacity)}.sd-ghost-button:focus-visible{outline:0;box-shadow:0 0 0 2px var(--sd-ghost-button-accent)}.sd-ghost-button--disabled{cursor:not-allowed}`;
-
-const SdGhostButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.click = createEvent(this, "sdClick", 7);
-    }
-    icon;
-    size = 'sm';
-    intent = 'default';
-    ariaLabel = '';
-    disabled = false;
-    click;
-    hasWarnedMissingAriaLabel = false;
-    componentWillLoad() {
-        this.size ??= 'sm';
-        this.intent ??= 'default';
-        this.ariaLabel ??= '';
-    }
-    handleClick = (event) => {
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        this.click.emit(event);
-    };
-    componentWillRender() {
-        this.warnIfMissingAriaLabel();
-    }
-    warnIfMissingAriaLabel() {
-        const missing = (this.ariaLabel ?? '').trim() === '';
-        if (!missing) {
-            this.hasWarnedMissingAriaLabel = false;
-            return;
-        }
-        if (this.hasWarnedMissingAriaLabel)
-            return;
-        console.warn(`[sd-ghost-button] icon-only buttons require \`ariaLabel\`. Received icon="${this.icon}".`);
-        this.hasWarnedMissingAriaLabel = true;
-    }
-    render() {
-        const size = this.size ?? 'sm';
-        const intent = this.intent ?? 'default';
-        const sizeConfig = GHOST_BUTTON_SIZES[size] ?? GHOST_BUTTON_SIZES.sm;
-        const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_COLORS[intent]
-            : GHOST_BUTTON_CONTENT_COLORS[intent];
-        const accessibleName = (this.ariaLabel ?? '').trim() || undefined;
-        return (h("button", { key: '7bf9f8b8d487be0b66a969668308fd451faeb442', class: {
-                'sd-ghost-button': true,
-                'sd-ghost-button--disabled': this.disabled,
-            }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
-                '--sd-ghost-button-size': `${sizeConfig.size}px`,
-                '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[size]}px`,
-                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[intent],
-                '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
-                '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: '4b6b05d186f8c38d2f05415fa24960349dd6c453', name: this.icon, size: sizeConfig.icon, color: contentColor })));
-    }
-};
-SdGhostButton.style = sdGhostButtonCss();
-
-export { SdGhostButton as sd_ghost_button };

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

@@ -1,225 +0,0 @@
-import { r as registerInstance, h } from './index-BpO2YWvq.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 };