npm - @sellmate/design-system - Versions diffs - 1.0.46 → 1.0.47 - Mend

@sellmate/design-system 1.0.46 → 1.0.47

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 (1557) hide show

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

@@ -0,0 +1,187 @@
+import { r as registerInstance, h } from './index-B8tGP77V.js';
+const tag = {
+	xs: {
+		height: "20",
+		paddingX: "6",
+		gap: "4",
+		icon: "12",
+		typography: {
+			fontSize: "11",
+			fontWeight: "500",
+			lineHeight: "18"},
+		radius: "6"
+	},
+	sm: {
+		height: "24",
+		paddingX: "8",
+		gap: "4",
+		icon: "16",
+		typography: {
+			fontSize: "12",
+			fontWeight: "700",
+			lineHeight: "20"},
+		radius: "6"
+	},
+	md: {
+		height: "28",
+		paddingX: "12",
+		gap: "6",
+		icon: "16",
+		typography: {
+			fontSize: "14",
+			fontWeight: "700",
+			lineHeight: "24"},
+		radius: "8"
+	},
+	red: {
+		bg: "#FB4444",
+		content: "#FCEFEF"
+	},
+	orange: {
+		bg: "#FF6B00",
+		content: "#FEF1EA"
+	},
+	yellow: {
+		bg: "#916C0D",
+		content: "#FFF7DD"
+	},
+	green: {
+		bg: "#00973C",
+		content: "#E8F9EF"
+	},
+	blue: {
+		bg: "#0075FF",
+		content: "#E6F1FF"
+	},
+	darkblue: {
+		bg: "#006AC1",
+		content: "#EAF5FE"
+	},
+	indigo: {
+		bg: "#004290",
+		content: "#EFF6FF"
+	},
+	grey: {
+		bg: "#737373",
+		content: "#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.content, content: tagTokens.tag.grey.bg, icon: tagTokens.tag.grey.bg },
+    red: { background: tagTokens.tag.red.content, content: tagTokens.tag.red.bg, icon: tagTokens.tag.red.bg },
+    orange: { background: tagTokens.tag.orange.content, content: tagTokens.tag.orange.bg, icon: tagTokens.tag.orange.bg },
+    yellow: { background: tagTokens.tag.yellow.content, content: tagTokens.tag.yellow.bg, icon: tagTokens.tag.yellow.bg },
+    green: { background: tagTokens.tag.green.content, content: tagTokens.tag.green.bg, icon: tagTokens.tag.green.bg },
+    blue: { background: tagTokens.tag.blue.content, content: tagTokens.tag.blue.bg, icon: tagTokens.tag.blue.bg },
+    darkblue: { background: tagTokens.tag.darkblue.content, content: tagTokens.tag.darkblue.bg, icon: tagTokens.tag.darkblue.bg },
+    indigo: { background: tagTokens.tag.indigo.content, content: tagTokens.tag.indigo.bg, icon: tagTokens.tag.indigo.bg },
+};
+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: Number(tagTokens.tag.xs.icon),
+        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: Number(tagTokens.tag.sm.icon),
+        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: Number(tagTokens.tag.md.icon),
+        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;
+    isLeft = true;
+    get resolvedConfig() {
+        if (!isTagName(this.name)) {
+            throw new Error(`Invalid sd-tag name: ${this.name}`);
+        }
+        return TAG_CONFIG[this.name];
+    }
+    renderIcon(color, size) {
+        if (!this.icon)
+            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: 'd54a1ff06a6012b9774184f7578cf2765322847c', 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: '1660447d9b14b42e1220bfc5c3c0f8918a0f29a0', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+    }
+};
+SdTag.style = sdTagCss();
+export { SdTag as sd_tag };

package/dist/esm/sd-text-link.entry.js CHANGED Viewed

@@ -69,8 +69,12 @@ const SdTextLink = class {
     };
     render() {
         const typo = this.underline ? TEXT_LINK_TYPOGRAPHY.underline : TEXT_LINK_TYPOGRAPHY.default;
-        const contentColor = this.disabled ? TEXT_LINK_COLORS.content.disabled : TEXT_LINK_COLORS.content.default;
-        const iconColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : (this.iconColor || TEXT_LINK_COLORS.icon.default);
+        const contentColor = this.disabled
+            ? TEXT_LINK_COLORS.content.disabled
+            : TEXT_LINK_COLORS.content.default;
+        const iconColor = this.disabled
+            ? TEXT_LINK_COLORS.icon.disabled
+            : this.iconColor || TEXT_LINK_COLORS.icon.default;
         const arrowColor = this.disabled ? TEXT_LINK_COLORS.icon.disabled : TEXT_LINK_LAYOUT.arrowColor;
         const cssVars = {
             '--sd-text-link-gap': `${TEXT_LINK_LAYOUT.gap}px`,
@@ -80,16 +84,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             '--sd-text-link-color': contentColor,
         };
-        return (h("span", { key: '3345bf7ddd99b9eeca4e8e6014f88e5f4505665e', class: {
+        return (h("span", { key: '280bf34fb5caa781e9856daf40fb8060bc2c5ad1', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: 'e8f1cf6482745bce5856988d5e30702d807335db', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '09293467bc7289dd587a5ed0fc4b2cedbc1d925a', class: "sd-text-link__label" }, this.label), this.useArrow && (h("span", { key: '10330d4acc1e323997804146629e3397605b9d58', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '360d18168152ef09d2e94c78682f962f66136b1b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'bb24813bd296ffbdbf9d46ee18382ebea1338a0a', class: "sd-text-link__label" }, this.label), this.useArrow && (h("span", { key: 'e5ee0dc6b5510b8b4e28e33f8a8c7515c1e9ec44', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: '01def7dd04278fce78f9eb49efd857999fa255db', name: "arrowRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: '6989fe375a6f3fa02e57c13e0fbf8d1bfa4180ef', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

package/dist/esm/sd-textarea.entry.js ADDED Viewed

@@ -0,0 +1,103 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-B8tGP77V.js';
+const sdTextareaCss = () => `sd-textarea{display:block}sd-textarea .sd-textarea{display:flex;flex-direction:column;color:#333333;font-size:12px;line-height:20px}sd-textarea .sd-textarea .sd-textarea__content{width:100%;display:flex;border:1px solid #AAAAAA;border-radius:4px;background:white}sd-textarea .sd-textarea .sd-textarea__content .sd-textarea__native{width:100%;min-height:100px;border:none;outline:none;background:transparent;padding:4px 8px;font-family:inherit;font-size:12px;line-height:20px;color:#333333;resize:vertical}sd-textarea .sd-textarea .sd-textarea__content .sd-textarea__native::placeholder{color:#AAAAAA}sd-textarea .sd-textarea--hovered .sd-textarea__content,sd-textarea .sd-textarea--focused .sd-textarea__content{border-color:#0075FF;box-shadow:0 0 4px 0 rgba(0, 113, 255, 0.4)}sd-textarea .sd-textarea--disabled{cursor:not-allowed !important;box-shadow:none !important}sd-textarea .sd-textarea--disabled .sd-textarea__content{background:#EEEEEE !important;border:1px solid #CCCCCC !important;color:#888888 !important}sd-textarea .sd-textarea--disabled .sd-textarea__content .sd-textarea__native{cursor:not-allowed !important;color:#888888 !important}sd-textarea .sd-textarea .sd-textarea__footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;line-height:20px}sd-textarea .sd-textarea .sd-textarea__help-text{font-size:12px;line-height:20px;font-weight:400;color:#222222}sd-textarea .sd-textarea .sd-textarea__counter{color:#CCCCCC;margin-left:auto}`;
+const SdTextarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.input = createEvent(this, "sdUpdate");
+        this.focus = createEvent(this, "sdFocus");
+        this.blur = createEvent(this, "sdBlur");
+    }
+    get host() { return getElement(this); }
+    value = null;
+    name;
+    disabled = false;
+    autoFocus = false;
+    textareaClass = '';
+    helpText;
+    maxLength;
+    placeholder = '입력해 주세요.';
+    internalValue = null;
+    focused = false;
+    hovered = false;
+    nativeEl = undefined;
+    input;
+    focus;
+    blur;
+    valueChanged(newValue) {
+        this.internalValue = newValue;
+    }
+    internalValueChanged(newValue) {
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.input?.emit(this.value);
+        }
+    }
+    async sdFocus() {
+        this.nativeEl?.focus();
+    }
+    async getNativeElement() {
+        return this.nativeEl || null;
+    }
+    componentWillLoad() {
+        if (this.value !== null && this.value !== undefined) {
+            this.internalValue = this.value;
+        }
+    }
+    componentDidLoad() {
+        if (this.autoFocus) {
+            this.nativeEl?.focus();
+        }
+    }
+    handleInput(event) {
+        const target = event.target;
+        this.internalValue = target.value;
+    }
+    handleFocus(type, event) {
+        this.focused = type === 'focus';
+        if (type === 'blur') {
+            this.blur?.emit(event);
+        }
+        else {
+            this.focus?.emit(event);
+        }
+    }
+    getTextareaStatus() {
+        if (this.disabled)
+            return 'sd-textarea--disabled';
+        if (this.hovered)
+            return 'sd-textarea--hovered';
+        if (this.focused)
+            return 'sd-textarea--focused';
+        return '';
+    }
+    getMaxLengthCounter() {
+        if (this.maxLength === undefined) {
+            return null;
+        }
+        const currentLength = (this.internalValue || '').length;
+        return `${currentLength}/${this.maxLength}`;
+    }
+    hasFooter() {
+        return this.helpText !== undefined || this.maxLength !== undefined;
+    }
+    render() {
+        const maxLengthCounter = this.getMaxLengthCounter();
+        return (h("div", { key: 'ac860221577a4451a7ebcc796c02ff1f013a039d', class: {
+                'sd-textarea': true,
+                [this.getTextareaStatus()]: true,
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("div", { key: '752ebb2e4f3f806216a522e8e743ed535e59962d', class: "sd-textarea__content" }, h("textarea", { key: '71edd37275617e81e2f8511fd325023469813611', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (h("div", { key: 'f386d7825022ad451fe23783eb341eb5ad4e5a4f', class: "sd-textarea__footer" }, this.helpText !== undefined && h("span", { key: 'f526ff0fee23af6e7ccf6dff34c0926745c02950', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && h("span", { key: 'adc899695ff0bc4eec7c95e97fcf6baf078abf0e', class: "sd-textarea__counter" }, maxLengthCounter)))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "internalValue": [{
+                "internalValueChanged": 0
+            }]
+    }; }
+};
+SdTextarea.style = sdTextareaCss();
+export { SdTextarea as sd_textarea };

package/dist/esm/sd-toast-container.entry.js CHANGED Viewed

@@ -232,7 +232,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: 'ea70acd97b25230c2c2ae74504381fe00d458043', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '14a9440ade2a9de3437b54f9b4af31d2d8357e08', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/esm/sd-toast.entry.js CHANGED Viewed

@@ -55,10 +55,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: 'd8e1a82c9daebbe6b262bedcecd3fcdb5d9cdff6', style: {
+        return (h("div", { key: '22514e8517b4f12400e09d9d64c2c2b8906cb273', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: 'ef1c9243616c34947bd03a8de734b28fd7d32bd4', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'ef4ff52c084175eb34f1e88b69258b72966af947', class: "sd-toast__icon" }, h("sd-icon", { key: '7c8f49358fb158807f09855c169ec99f3dcd9469', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: 'b229d53142ab92037b8c409da478305bba954710', class: "sd-toast__content" }, h("span", { key: '1c623880c6e6e7d5d5a0fbaab980774cc494ab82', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '9ff007a2436fd16519e22f024486a40a3c9f6ff9', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("button", { key: '4b2371414437c7f3c9c70ec3b44879d0b6bbc212', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '3aed44c8b9bf783445cb49d4fc513b086f5fc428', name: "close", size: iconSize, color: typeConfig.content }))))));
+            } }, h("div", { key: 'f8b8d0050d2775488f4d70e5054237f4e3f7b0b4', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'a511007335db6e8c2131b554a5b77e2e0a383d73', class: "sd-toast__icon" }, h("sd-icon", { key: '86df116f1a3533bac738adbaefa5c1aed93a4535', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '0a4db0a2bc7b3bcd741006dcc8228079e000f1a3', class: "sd-toast__content" }, h("span", { key: '66be2d5dcd83dd47036d08b0be65f8823acd53b4', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: 'b69bc8b1ee31dd860005e39cd56ccc97c505af67', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("button", { key: '300eaefa372b13693cdcb5a2248d1bf6b8f8ec8d', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '529a461269955fc5547bf8d7fa622838aa5b8237', name: "close", size: iconSize, color: typeConfig.content }))))));
     }
 };
 SdToast.style = sdToastCss();

package/dist/esm/sd-toggle-button.entry.js CHANGED Viewed

@@ -39,7 +39,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'c8e3adb9201066f7e39ff49df97e80cd4a716345', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '8fb523287f4d593a455a2366632797098401398e', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '63d34a72c01e478d55b4a64ff375e6f8eebc560a', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '450cb27e4d66c4b9b8a2f0d56efa3eeabc9dcced', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

package/dist/esm/sd-toggle.entry.js CHANGED Viewed

@@ -35,7 +35,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '60d9d2c1feca4256b7a279bc64e52da8e9f81995', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'd25f6af7f9c6ea95e423a39ff44c394ad9624fe6', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '52383a1ca0f17666fdc386beed30512e7349b470', class: "sd-toggle__label" }, this.label), h("div", { key: '32c76872e30e2d8b1b06e096c394ee1d3dfc4381', class: "sd-toggle__track" }, h("div", { key: '0ec405309e322492ed7af4e0ddf115da87d03150', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: '4a2174a50db389a4ff8de2fae632039350abf0d7', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'a35acaa1a6372a69103faa3dc9b18b9db5d33584', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: 'af39b9be93e5ce35574d0a13766e83e6b6d1fdd1', class: "sd-toggle__label" }, this.label), h("div", { key: '90eaed6cf788d947454a58fee4fe37d41aeb9aca', class: "sd-toggle__track" }, h("div", { key: '4830da4dc05be1f7c1c147b330e8e0f10daa4045', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/useDatePicker-DTrMR0rx.js ADDED Viewed

@@ -0,0 +1,45 @@
+const daysInMonth = (date) => {
+    const year = Number(date.split('-')[0]);
+    const month = Number(date.split('-')[1]);
+    const daysInMonth = new Date(year, month, 0).getDate(); // month에 0을 전달하면 전달의 마지막 날짜를 반환
+    return Array.from({ length: daysInMonth }, (_, i) => i + 1);
+};
+const getToday = () => {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, '0');
+    const day = String(today.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
+const today = getToday();
+const useDatePicker = () => {
+    const formatDate = (year, month, day) => {
+        return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    };
+    const createCalendar = (year, month) => {
+        const days = daysInMonth(`${year}-${String(month).padStart(2, '0')}-01`);
+        const firstDayIndex = new Date(year, month - 1, 1).getDay();
+        const prevMonthDays = Array.from({ length: firstDayIndex });
+        const remainingDays = (7 - ((days.length + firstDayIndex) % 7)) % 7;
+        const afterMonthDays = Array.from({ length: remainingDays });
+        return { days, prevMonthDays, afterMonthDays };
+    };
+    const calculateYearMonth = (year, month, type) => {
+        let newYear = year;
+        let newMonth = type === 'prev' ? month - 1 : month + 1;
+        if (newMonth < 1) {
+            newYear = year - 1;
+            newMonth = 12;
+        }
+        else if (newMonth > 12) {
+            newYear = year + 1;
+            newMonth = 1;
+        }
+        return { newYear, newMonth };
+    };
+    return { formatDate, createCalendar, calculateYearMonth };
+};
+export { today as t, useDatePicker as u };

package/dist/types/components/assets/Add.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Add: (props: any) => any;

package/dist/types/components/assets/Alert.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Alert: (props: any) => any;

package/dist/types/components/assets/AlignKorean.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const AlignKorean: (props: any) => any;

package/dist/types/components/assets/Archive.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Archive: (props: any) => any;

package/dist/types/components/assets/ArrowDown.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ArrowDown: (props: any) => any;

package/dist/types/components/assets/ArrowLeft.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ArrowLeft: (props: any) => any;

package/dist/types/components/assets/ArrowRight.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ArrowRight: (props: any) => any;

package/dist/types/components/assets/ArrowUp.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ArrowUp: (props: any) => any;

package/dist/types/components/assets/AttachFile.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const AttachFile: (props: any) => any;

package/dist/types/components/assets/Barcode.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Barcode: (props: any) => any;

package/dist/types/components/assets/Bell.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Bell: (props: any) => any;

package/dist/types/components/assets/Board.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Board: (props: any) => any;

package/dist/types/components/assets/Box.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Box: (props: any) => any;

package/dist/types/components/assets/Camera.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Camera: (props: any) => any;

package/dist/types/components/assets/CancelFill.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const CancelFill: (props: any) => any;

package/dist/types/components/assets/CancelOutline.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const CancelOutline: (props: any) => any;

package/dist/types/components/assets/CaretDown.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const CaretDown: (props: any) => any;

package/dist/types/components/assets/CaretLeft.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const CaretLeft: (props: any) => any;

package/dist/types/components/assets/CaretRight.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const CaretRight: (props: any) => any;

package/dist/types/components/assets/CaretUp.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const CaretUp: (props: any) => any;

package/dist/types/components/assets/Check.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Check: (props: any) => any;

package/dist/types/components/assets/CheckFill.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const CheckFill: (props: any) => any;

package/dist/types/components/assets/CheckOutline.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const CheckOutline: (props: any) => any;

package/dist/types/components/assets/ChevronDown.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ChevronDown: (props: any) => any;

package/dist/types/components/assets/ChevronLeft.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ChevronLeft: (props: any) => any;

package/dist/types/components/assets/ChevronLeftEnd.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ChevronLeftEnd: (props: any) => any;

package/dist/types/components/assets/ChevronRight.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ChevronRight: (props: any) => any;

package/dist/types/components/assets/ChevronRightEnd.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ChevronRightEnd: (props: any) => any;

package/dist/types/components/assets/ChevronUp.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ChevronUp: (props: any) => any;

package/dist/types/components/assets/ClockFill.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ClockFill: (props: any) => any;

package/dist/types/components/assets/ClockOutline.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ClockOutline: (props: any) => any;

package/dist/types/components/assets/Close.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Close: (props: any) => any;

package/dist/types/components/assets/Copy.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Copy: (props: any) => any;

package/dist/types/components/assets/Dashboard.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Dashboard: (props: any) => any;

package/dist/types/components/assets/Date.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const DateIcon: (props: any) => any;

package/dist/types/components/assets/Download.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Download: (props: any) => any;

package/dist/types/components/assets/Drag.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Drag: (props: any) => any;

package/dist/types/components/assets/Edit.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Edit: (props: any) => any;

package/dist/types/components/assets/Etc.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Etc: (props: any) => any;

package/dist/types/components/assets/Event.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Event: (props: any) => any;

package/dist/types/components/assets/Global.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Global: (props: any) => any;

package/dist/types/components/assets/HelpFill.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const HelpFill: (props: any) => any;

package/dist/types/components/assets/HelpOutline.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const HelpOutline: (props: any) => any;

package/dist/types/components/assets/History.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const History: (props: any) => any;

package/dist/types/components/assets/ImageFill.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ImageFill: (props: any) => any;

package/dist/types/components/assets/ImageOutline.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const ImageOutline: (props: any) => any;

package/dist/types/components/assets/Inline.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Inline: (props: any) => any;

package/dist/types/components/assets/Line.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Line: (props: any) => any;

package/dist/types/components/assets/Location.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Location: (props: any) => any;

package/dist/types/components/assets/Logout.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Logout: (props: any) => any;

package/dist/types/components/assets/Minus.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Minus: (props: any) => any;

package/dist/types/components/assets/New.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const New: (props: any) => any;

package/dist/types/components/assets/NotificationFill.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const NotificationFill: (props: any) => any;

package/dist/types/components/assets/NotificationOutline.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const NotificationOutline: (props: any) => any;

package/dist/types/components/assets/Notion.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Notion: (props: any) => any;

package/dist/types/components/assets/Outline.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Outline: (props: any) => any;

package/dist/types/components/assets/PageEdit.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const PageEdit: (props: any) => any;

package/dist/types/components/assets/PageMove.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const PageMove: (props: any) => any;

package/dist/types/components/assets/Pdf.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Pdf: (props: any) => any;

package/dist/types/components/assets/Print.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Print: (props: any) => any;

package/dist/types/components/assets/Remove.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const Remove: (props: any) => any;