@ayu-sh-kr/dota-ui 0.0.1

package/src/app.d.ts

@@ -0,0 +1,28 @@
+
+declare interface UIConfig {
+    base: string
+    color: UIColor,
+    size: UISize,
+    rounded: UIRounded
+    animation: any
+}
+
+declare interface UIColor {
+    [name: string]: ColorVariants
+}
+
+declare interface ColorVariants {
+    solid: string;
+    soft: string;
+    outline: string;
+    ghost: string;
+    link : string
+}
+
+declare interface UISize {
+    [name: string]: string
+}
+
+declare interface UIRounded {
+    [name: string]: string
+}

package/src/components/accordian/accordion.component.ts

@@ -0,0 +1,79 @@
+import {BaseElement, BindEvent, Component, Property, String} from "@ayu-sh-kr/dota-core/dist";
+import "@dota/components/icon/icons.component.ts";
+import './accordion.css';
+import {AccordionStyle} from "@dota/components/accordian/accordion.config.ts";
+import type {AccordionColor, AccordionSize, AccordionVariant} from "@dota/components/accordian/accordion.config.ts";
+
+@Component({
+    selector: 'dota-accordion',
+    shadow: false
+})
+class AccordionComponent extends BaseElement {
+
+    @Property({name: 'classname', type: String})
+    className!: string;
+
+    @Property({name: 'header', type: String})
+    header!: string;
+
+    @Property({name: 'description', type: String})
+    description!: string;
+
+    @Property({name: 'icon', type: String})
+    icon!: string;
+
+    @Property({name: 'color', type: String})
+    color!: AccordionColor;
+
+    @Property({name: 'variant', type: String})
+    variant!: AccordionVariant
+
+    @Property({name: 'size', type: String})
+    size!: AccordionSize
+
+    constructor() {
+        super();
+    }
+
+
+    @BindEvent({event: 'click', id: '#header'})
+    handleAccordion() {
+        const element = this.querySelector('#description');
+        if (element) {
+            element.classList.toggle('description-active');
+        }
+
+        const icon = this.querySelector('#icon');
+
+        if (icon) {
+            icon.classList.toggle('active');
+        }
+    }
+
+    processIcon = (icon: string) => {
+        return icon ? `<dota-icon className="text-blue-400 text-xl" name="${icon}"></dota-icon>` : '';
+    }
+
+
+    render(): string {
+        return `
+            <div class="${this.className ?? ''} w-full flex flex-col">
+                <button type="button" id="header" class="${AccordionStyle.button.base} ${AccordionStyle.button.size[this.size] ?? AccordionStyle.button.size.md} ${AccordionStyle.button.color[this.color][`${this.variant ?? 'solid'}`] ?? AccordionStyle.button.color.gray.soft}">
+                    <div class="flex">
+                        ${this.processIcon(this.icon)}
+                        <span class="text-left break-all line-clamp-1">${this.header}</span>
+                    </div>
+                    <div id="icon" class="icon">
+                        <dota-icon name="material-symbols:arrow-forward-ios-rounded"></dota-icon>
+                    </div>
+                </button>
+                <div id="description" class="description">
+                    <p class="overflow-hidden p-2 ${AccordionStyle.paragraph}">${this.description}</p>
+                </div>
+            </div>
+        `
+    }
+}
+
+
+export {AccordionComponent, AccordionStyle as AccordionConfig, type AccordionColor, type AccordionSize, type AccordionVariant}

package/src/components/accordian/accordion.config.ts

@@ -0,0 +1,27 @@
+import {UIConfig} from "@dota/app.config.ts";
+
+export const AccordionStyle = {
+
+    button: {
+        base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md inline-flex justify-between items-center mb-1.5 w-full',
+        size: {
+            '2xs': 'text-xs gap-x-1 px-2 py-1',
+            xs: 'text-xs gap-x-1.5 px-2.5 py-1.5',
+            sm: 'text-sm gap-x-1.5 px-2.5 py-1.5',
+            md: 'text-sm gap-x-2 px-3 py-2',
+            lg: 'text-sm gap-x-2.5 px-3.5 py-2.5',
+            xl: 'text-base gap-x-2.5 px-3.5 py-2.5'
+        },
+        color: {
+            ...UIConfig.color
+        },
+    },
+    paragraph: 'text-sm text-gray-500 dark:text-gray-400 pt-1.5 pb-3'
+
+}
+
+type AccordionColor = keyof typeof AccordionStyle.button.color;
+type AccordionSize = keyof typeof AccordionStyle.button.size;
+type AccordionVariant = keyof ColorVariants;
+
+export type {AccordionSize, AccordionColor, AccordionVariant}

package/src/components/accordian/accordion.css

@@ -0,0 +1,19 @@
+.header {
+    @apply cursor-pointer flex items-center justify-between border px-4 py-2
+}
+
+.icon {
+    transition: transform 0.2s;
+}
+
+.icon.active {
+    transform: rotate(90deg);
+}
+
+.description {
+    @apply h-0 transform duration-300 ease-in overflow-hidden transition-[height]
+}
+
+.description-active {
+    @apply h-fit duration-300 transform ease-in text-lg transition-[height]
+}

package/src/components/avatar/avatar.component.ts

@@ -0,0 +1,195 @@
+import {BaseElement, Component, Property, Boolean, String} from "@ayu-sh-kr/dota-core/dist";
+import {type IconColor, type IconSize, IconStyle, type IconVariant} from "@dota/components";
+
+
+@Component({
+    selector: 'd-avatar',
+    shadow: false
+})
+export class AvatarComponent extends BaseElement {
+
+    @Property({
+        name: 'img',
+        type: String
+    })
+    img!: string
+
+    @Property({
+        name: 'img-alt',
+        type: String
+    })
+    imgAlt!: string
+
+    @Property({
+        name: 'label',
+        type: String
+    })
+    label!: string;
+
+    @Property({
+        name: 'icon',
+        type: String
+    })
+    icon!: string;
+
+    @Property({
+        name: 'is-chip',
+        type: Boolean
+    })
+    isChip!: boolean;
+
+    @Property({
+        name: 'chip-text',
+        type: String
+    })
+    chipText!: string;
+
+    @Property({
+        name: 'chip-color',
+        type: String
+    })
+    chipColor!: string;
+
+    @Property({
+        name: 'chip-position',
+        type: String
+    })
+    chipPosition!: string
+
+    @Property({
+        name: 'variant',
+        type: String
+    })
+    variant!: string;
+
+    @Property({
+        name: 'size',
+        type: String
+    })
+    size!: string
+
+    constructor() {
+        super();
+    }
+
+    template = (): string => {
+
+        const size = this.size || 'md';
+
+        if(this.img) {
+            return this.isChip ?
+                `
+                    <dota-chip color="${this.chipColor}" size="sm" position="${this.chipPosition}">
+                        <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                            <img src="${this.img}" alt="${this.imgAlt}" class="w-full h-full">
+                        </avatar-wrapper>
+                    </dota-chip>
+                    
+                ` :
+                `
+                    <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                        <img src="${this.img}" alt="${this.imgAlt}" class="w-full h-full">
+                    </avatar-wrapper>
+                `;
+        } else if(this.label) {
+            return this.isChip ?
+                `
+                    <dota-chip color="${this.chipColor}" size="sm" position="${this.chipPosition}">
+                        <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                            ${this.label.split(" ").map((value: string, index: number) => {
+                                if(index < 2) {
+                                    return value.toUpperCase().at(0);
+                                }
+                            }).join("")}
+                        </avatar-wrapper>
+                    </dota-chip>
+                `
+                :
+                `
+                    <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                        <span>
+                            ${this.label.split(" ").map((value: string, index: number) => {
+                                if(index < 2) {
+                                    return value.toUpperCase().at(0);
+                                }
+                            }).join("")}
+                        </span>
+                    </avatar-wrapper>
+                `;
+        } else {
+
+            return this.isChip ?
+                `
+                    <dota-chip color="${this.chipColor}" size="sm" position="${this.chipPosition}">
+                        <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                            <dota-icon name="${this.icon}" color="${this.chipColor}" size="${size}" variant="${this.variant}"></dota-icon>
+                        </avatar-wrapper>
+                    </dota-chip>
+                `
+                :
+                `
+                    <avatar-wrapper color="${this.chipColor}" variant="${this.variant}" size="${size}">
+                        <dota-icon name="${this.icon}" color="${this.chipColor}" size="${size}" variant="${this.variant}"></dota-icon>
+                    </avatar-wrapper>
+                `;
+        }
+    }
+
+    render(): string {
+        return this.template();
+    }
+
+}
+
+@Component({
+    selector: 'avatar-wrapper',
+    shadow: false
+})
+export class AvatarWrapper extends BaseElement {
+
+    content!: string
+
+    @Property({
+        name: 'color',
+        type: String
+    })
+    color!: IconColor;
+
+
+    @Property({
+        name: 'variant',
+        type: String
+    })
+    variant!: IconVariant;
+
+    @Property({
+        name: 'size',
+        type: String
+    })
+    size!: IconSize
+
+    constructor() {
+        super();
+        this.content = this.innerHTML;
+    }
+
+    render(): string {
+
+        const color = AvatarConfig.color[this.color] || AvatarConfig.color.gray;
+        const variant = color[this.variant] || color.solid
+
+        const size = AvatarConfig.size[this.size] || AvatarConfig.size.lg;
+
+        return `
+            <div class="rounded-full content-center ${variant} ${size} flex items-center justify-center font-semibold overflow-hidden">
+                ${this.content}
+            </div>
+        `;
+    }
+
+}
+
+const AvatarConfig = {
+    color: IconStyle.color,
+    size: IconStyle.size
+}

package/src/components/badge/badge.component.ts

@@ -0,0 +1,49 @@
+import {BaseElement, Component, Property, String} from "@ayu-sh-kr/dota-core/dist";
+
+import {BadgeStyle} from "@dota/components/badge/badge.config.ts";
+import type {BadgeColor, BadgeRounded, BadgeSize, BadgeVariants} from "@dota/components/badge/badge.config.ts";
+
+@Component({
+    selector: 'dota-badge',
+    shadow: false
+})
+class BadgeComponent extends BaseElement {
+
+    @Property({name: 'classname', type: String})
+    className!: string
+
+    @Property({name: 'color', type: String})
+    color!: BadgeColor
+
+    @Property({name: 'variant', type: String})
+    variant!: BadgeVariants;
+
+    @Property({name: 'size', type: String})
+    size!: BadgeSize
+
+    @Property({name: 'rounded', type: String})
+    rounded!: BadgeRounded;
+
+    @Property({name: 'label', type: String})
+    label!: string;
+
+    content!: string;
+
+    constructor() {
+        super();
+        this.content = this.innerHTML;
+        this.counter = 0;
+    }
+
+    render(): string {
+        return `
+            <span id="click" class="${BadgeStyle.base} ${BadgeStyle['color'][`${this.color ?? 'red'}`][`${this.variant ?? 'solid'}`]} ${BadgeStyle.size[`${this.size ?? ''}`]} ${BadgeStyle.rounded[`${this.rounded ?? 'none'}`]} ${this.className ?? ''}">
+                ${this.label ? this.label : this.content}
+            </span>
+        `
+    }
+
+}
+
+export {BadgeComponent, BadgeStyle as BadgeConfig};
+

package/src/components/badge/badge.config.ts

@@ -0,0 +1,85 @@
+
+
+const BadgeStyle = {
+    base: 'inline-flex item-center text-center w-fit px-3 py-1',
+
+    rounded: {
+        'none': '',
+        'sm': 'rounded-sm',
+        'md': 'rounded-md',
+        'lg': 'rounded-lg',
+        'xl': 'rounded-xl'
+    },
+
+    size: {
+        xs: 'text-xs',
+        sm: 'text-sm',
+        lg: 'text-lg',
+        xl: 'text-xl',
+        '2xl': 'text-2xl',
+        '3xl': 'text-3xl',
+        '4xl': 'text-4xl'
+    },
+
+    color: {
+        red: {
+            solid: 'bg-red-500 dark:bg-red-400 text-white dark:text-gray-900',
+            outline: 'text-red-500 dark:text-red-400 ring-1 ring-inset ring-red-500 dark:ring-red-400',
+            soft: 'bg-red-50 dark:bg-red-400 dark:bg-opacity-10 text-red-500 dark:text-red-400',
+            subtle: 'bg-red-50 dark:bg-red-400 dark:bg-opacity-10 text-red-500 dark:text-red-400 ring-1 ring-inset ring-red-500 dark:ring-red-400 ring-opacity-25 dark:ring-opacity-25',
+        },
+        yellow: {
+            solid: 'bg-yellow-500 dark:bg-yellow-400 text-white dark:text-gray-900',
+            outline: 'text-yellow-500 dark:text-yellow-400 ring-1 ring-inset ring-yellow-500 dark:ring-yellow-400',
+            soft: 'bg-yellow-50 dark:bg-yellow-400 dark:bg-opacity-10 text-yellow-500 dark:text-yellow-400',
+            subtle: 'bg-yellow-50 dark:bg-yellow-400 dark:bg-opacity-10 text-yellow-500 dark:text-yellow-400 ring-1 ring-inset ring-yellow-500 dark:ring-yellow-400 ring-opacity-25 dark:ring-opacity-25',
+        },
+        pink: {
+            solid: 'bg-pink-500 dark:bg-pink-400 text-white dark:text-gray-900',
+            outline: 'text-pink-500 dark:text-pink-400 ring-1 ring-inset ring-pink-500 dark:ring-pink-400',
+            soft: 'bg-pink-50 dark:bg-pink-400 dark:bg-opacity-10 text-pink-500 dark:text-pink-400',
+            subtle: 'bg-pink-50 dark:bg-pink-400 dark:bg-opacity-10 text-pink-500 dark:text-pink-400 ring-1 ring-inset ring-pink-500 dark:ring-pink-400 ring-opacity-25 dark:ring-opacity-25',
+        },
+        purple: {
+            solid: 'bg-purple-500 dark:bg-purple-400 text-white dark:text-gray-900',
+            outline: 'text-purple-500 dark:text-purple-400 ring-1 ring-inset ring-purple-500 dark:ring-purple-400',
+            soft: 'bg-purple-50 dark:bg-purple-400 dark:bg-opacity-10 text-purple-500 dark:text-purple-400',
+            subtle: 'bg-purple-50 dark:bg-purple-400 dark:bg-opacity-10 text-purple-500 dark:text-purple-400 ring-1 ring-inset ring-purple-500 dark:ring-purple-400 ring-opacity-25 dark:ring-opacity-25',
+        },
+        blue: {
+            solid: 'bg-blue-500 dark:bg-blue-400 text-white dark:text-gray-900',
+            outline: 'text-blue-500 dark:text-blue-400 ring-1 ring-inset ring-blue-500 dark:ring-blue-400',
+            soft: 'bg-blue-50 dark:bg-blue-400 dark:bg-opacity-10 text-blue-500 dark:text-blue-400',
+            subtle: 'bg-blue-50 dark:bg-blue-400 dark:bg-opacity-10 text-blue-500 dark:text-blue-400 ring-1 ring-inset ring-blue-500 dark:ring-blue-400 ring-opacity-25 dark:ring-opacity-25',
+        },
+        cyan: {
+            solid: 'bg-cyan-500 dark:bg-cyan-400 text-white dark:text-gray-900',
+            outline: 'text-cyan-500 dark:text-cyan-400 ring-1 ring-inset ring-cyan-500 dark:ring-cyan-400',
+            soft: 'bg-cyan-50 dark:bg-cyan-400 dark:bg-opacity-10 text-cyan-500 dark:text-cyan-400',
+            subtle: 'bg-cyan-50 dark:bg-cyan-400 dark:bg-opacity-10 text-cyan-500 dark:text-cyan-400 ring-1 ring-inset ring-cyan-500 dark:ring-cyan-400 ring-opacity-25 dark:ring-opacity-25',
+        },
+        green: {
+            solid: 'bg-green-500 dark:bg-green-400 text-white dark:text-gray-900',
+            outline: 'text-green-500 dark:text-green-400 ring-1 ring-inset ring-green-500 dark:ring-green-400',
+            soft: 'bg-green-50 dark:bg-green-400 dark:bg-opacity-10 text-green-500 dark:text-green-400',
+            subtle: 'bg-green-50 dark:bg-green-400 dark:bg-opacity-10 text-green-500 dark:text-green-400 ring-1 ring-inset ring-green-500 dark:ring-green-400 ring-opacity-25 dark:ring-opacity-25',
+        },
+        emerald: {
+            solid: 'bg-emerald-500 dark:bg-emerald-400 text-white dark:text-gray-900',
+            outline: 'text-emerald-500 dark:text-emerald-400 ring-1 ring-inset ring-emerald-500 dark:ring-emerald-400',
+            soft: 'bg-emerald-50 dark:bg-emerald-400 dark:bg-opacity-10 text-emerald-500 dark:text-emerald-400',
+            subtle: 'bg-emerald-50 dark:bg-emerald-400 dark:bg-opacity-10 text-emerald-500 dark:text-emerald-400 ring-1 ring-inset ring-emerald-500 dark:ring-emerald-400 ring-opacity-25 dark:ring-opacity-25',
+        }
+    }
+}
+
+type BadgeVariants = keyof typeof BadgeStyle.color.red;
+
+type BadgeColor = keyof typeof BadgeStyle.color
+
+type BadgeSize = keyof typeof BadgeStyle.size;
+
+type BadgeRounded = keyof typeof BadgeStyle.rounded;
+
+export {BadgeStyle}
+export type {BadgeVariants, BadgeRounded, BadgeSize, BadgeColor}

package/src/components/button/button.component.ts

@@ -0,0 +1,118 @@
+import {BaseElement, Component, Property, String, Boolean} from "@ayu-sh-kr/dota-core/dist";
+import {
+    type ButtonAnimation, type ButtonAnimationColor,
+    type ButtonRound, type ButtonSize,
+    ButtonStyle, type ButtonVariants, type IconPosition
+} from "@dota/components/button/button.config.ts";
+import './button.css'
+import {type UIColor} from "@dota/app.config.ts";
+
+@Component({
+    selector: 'dota-button',
+    shadow: false
+})
+class ButtonComponent extends BaseElement {
+    content!: string;
+
+    @Property({name: 'animation', type: String})
+    animation!: ButtonAnimation
+
+    @Property({name: 'className', type: String})
+    className!: string
+
+    @Property({name: "label", type: String})
+    label!: string;
+
+    @Property({name: 'color', type: String})
+    color!: UIColor
+
+    @Property({name: "variant", type: String})
+    variant!: ButtonVariants;
+
+    @Property({name:"icon", type: String})
+    icon!:string;
+
+    @Property({name: 'loading', type: Boolean})
+    loading!: boolean
+
+    @Property({name: 'icon-position', type: String})
+    iconPosition!: IconPosition
+
+    @Property({name: 'animation-color', type: String})
+    animationColor!: ButtonAnimationColor;
+
+    @Property({name: 'type', type: String})
+    type!: string;
+
+    @Property({name: 'size', type: String})
+    size!: ButtonSize
+
+    @Property({name: 'round', type: String})
+    rounded!: ButtonRound
+
+    constructor() {
+        super();
+        this.content = this.innerHTML;
+
+    }
+
+
+    template = (): string => {
+
+        const iconComponent = this.icon ? `<dota-icon class="relative block" name="${this.icon}" size="${this.size || 'md'}"></dota-icon>` : '';
+        const size = ButtonStyle.size?.[this.size ?? "md"] ?? '';
+        const round = ButtonStyle.rounded?.[this.rounded] ?? '';
+
+        let content: string;
+        switch (this.iconPosition) {
+            case "forward": {
+                content = `
+                    <p>${this.label || this.content}</p>
+                   ${iconComponent}
+                `
+                break
+            }
+
+            case "leading": {
+                content = `
+                    ${iconComponent}
+                    <p>${this.label || this.content}</p>
+                `
+                break
+            }
+
+            default: {
+                content = `
+                    ${iconComponent}
+                    <p>${this.label || this.content}</p>
+                `
+            }
+        }
+
+        if(this.animation) {
+            return `
+                <button class="${ButtonStyle.base} ${ButtonStyle.animation[this.animation || 'fill'].base} ${size} ${round}
+                               ${ButtonStyle.animation[this.animation ?? 'fill'].color[this.animationColor ?? 'indigo']}
+                               
+                ">
+                    ${this.label || this.content}
+                </button>
+            `
+        }
+
+        const color = ButtonStyle.color?.[this.color ?? 'none']?.[this.variant ?? 'solid'] ?? '';
+        return `
+            <button class="${ButtonStyle.base} ${color} ${size} ${round}">
+                ${content}
+            </button>
+        `
+    }
+
+    render(): string {
+        return this.template();
+    }
+
+}
+
+export {ButtonComponent, ButtonStyle as ButtonConfig}
+export type {ButtonVariants, ButtonRound, ButtonAnimation, ButtonSize, ButtonAnimationColor, IconPosition}

package/src/components/button/button.config.ts

@@ -0,0 +1,66 @@
+import {UIConfig} from "@dota/app.config.ts";
+
+const ButtonStyle: Partial<UIConfig> = {
+    base: 'inline-flex relative justify-center items-center w-fit transition-all duration-300 active:scale-95 ease-in-out w-full',
+
+    size: {
+        xs: 'px-1 py-0.5 text-xs',
+        sm: 'px-1.5 py-1 text-sm',
+        md: 'px-2 py-1 text-base',
+        lg: 'px-3 py-1.5 text-lg',
+        xl: 'px-4 py-0.5 text-lg',
+        '2xl': 'px-5 py-0.5 text-xl',
+        '3xl': 'px-5 py-0.5 text-2xl',
+    },
+
+    rounded: {
+        xs: 'rounded-xs',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        '2xl': 'rounded-2xl',
+        '3xl': 'rounded-3xl',
+    },
+
+    color: {
+        ...UIConfig.color
+    },
+
+    animation: {
+        fill: {
+            base: 'buttonFill',
+            color: {
+                emerald: 'after:bg-emerald-400 before:bg-emerald-500 dark:before:bg-emerald-500 hover:text-white',
+                blue: 'after:bg-blue-400 before:bg-blue-500 dark:before:bg-blue-500 hover:text-white',
+                sky: 'after:bg-sky-400 before:bg-sky-500 dark:before:bg-sky-500 hover:text-white',
+                indigo: 'after:bg-indigo-400 before:bg-indigo-500 dark:before:bg-indigo-500 hover:text-white',
+                purple: 'after:bg-purple-400 before:bg-purple-500 dark:before:bg-purple-500 hover:text-white',
+                cyan: 'after:bg-cyan-400 before:bg-cyan-500 dark:before:bg-cyan-500 hover:text-white',
+                green: 'after:bg-green-400 before:bg-green-500 dark:before:bg-green-500 hover:text-white',
+                teal: 'after:bg-teal-400 before:bg-teal-500 dark:before:bg-teal-500 hover:text-white',
+                orange: 'after:bg-orange-400 before:bg-orange-500 dark:before:bg-orange-500 hover:text-white',
+                yellow: 'after:bg-yellow-400 before:bg-yellow-500 dark:before:bg-yellow-500 hover:text-white',
+                rose: 'after:bg-rose-400 before:bg-rose-500 dark:before:bg-rose-500 hover:text-white',
+                violet: 'after:bg-violet-400 before:bg-violet-500 dark:before:bg-violet-500 hover:text-white',
+                slate: 'after:bg-slate-400 before:bg-slate-500 dark:before:bg-slate-500 hover:text-white',
+                gray: 'after:bg-gray-400 before:bg-gray-500 dark:before:bg-gray-500 hover:text-white',
+                pink: 'after:bg-pink-400 before:bg-pink-500 dark:before:bg-pink-500 hover:text-white',
+                fuchsia: 'after:bg-fuchsia-400 before:bg-fuchsia-500 dark:before:bg-fuchsia-500 hover:text-white',
+            },
+        },
+
+    }
+
+};
+
+type ButtonVariants = keyof ColorVariants
+
+
+export { ButtonStyle };
+export type { ButtonVariants };
+export type IconPosition = 'leading' | 'forward';
+export type ButtonAnimation = keyof typeof ButtonStyle.animation
+export type ButtonAnimationColor = keyof typeof ButtonStyle.animation.fill.color
+export type ButtonSize = keyof typeof ButtonStyle.size;
+export type ButtonRound = keyof typeof ButtonStyle.rounded;