@donkit-ai/design-system 0.3.4 → 0.4.2

package/dist/tokens.css

@@ -0,0 +1 @@
+@layer base{:root{--color-white: #FFFAFA;--color-white-95: rgba(255, 250, 250, .95);--color-white-92: rgba(255, 250, 250, .92);--color-white-65: rgba(255, 250, 250, .65);--color-white-50: rgba(255, 250, 250, .5);--color-white-40: rgba(255, 250, 250, .4);--color-white-20: rgba(255, 250, 250, .2);--color-white-15: rgba(255, 250, 250, .15);--color-white-13: rgba(255, 250, 250, .13);--color-white-06: rgba(255, 250, 250, .06);--color-black: #0E0F11;--color-black-95: rgba(14, 15, 17, .95);--color-black-65: rgba(14, 15, 17, .65);--color-black-60: rgba(14, 15, 17, .6);--color-black-50: rgba(14, 15, 17, .5);--color-black-40: rgba(14, 15, 17, .4);--color-black-20: rgba(14, 15, 17, .2);--color-black-10: rgba(14, 15, 17, .1);--color-black-08: rgba(14, 15, 17, .08);--color-black-04: rgba(14, 15, 17, .04);--color-red: #EA6464;--color-red-90: rgba(234, 100, 100, .9);--color-red-10: rgba(234, 100, 100, .1);--color-info: #60A5FA;--color-info-15: rgba(96, 165, 250, .15);--color-success: #00C86E;--color-success-15: rgba(0, 200, 110, .15);--color-warning: #FFBB00;--color-warning-15: rgba(255, 187, 0, .15);--color-error: #FF1200;--color-error-15: rgba(255, 18, 0, .15);--color-info-dark: #2563EB;--color-info-dark-15: rgba(37, 99, 235, .15);--color-success-dark: #00A055;--color-success-dark-15: rgba(0, 160, 85, .15);--color-warning-dark: #D97706;--color-warning-dark-15: rgba(217, 119, 6, .15);--color-error-dark: #DC2626;--color-error-dark-15: rgba(220, 38, 38, .15);--color-neutral: var(--color-warning);--color-neutral-10: var(--color-warning-15);--color-error-10: var(--color-error-15);--color-success-10: var(--color-success-15);--color-bg: var(--color-black);--color-border: var(--color-white-20);--color-border-hover: var(--color-white-40);--color-border-selected: var(--color-white-50);--color-txt-icon-1: var(--color-white-92);--color-txt-icon-2: var(--color-white-65);--color-accent: var(--color-red);--color-accent-hover: var(--color-red-90);--color-item-bg: var(--color-white-06);--color-item-bg-selected: var(--color-white-06);--color-item-bg-hover: var(--color-white-13);--color-code-bg: var(--color-white-15);--color-overlay: var(--color-black-65);--color-status-info: var(--color-info);--color-status-info-bg: var(--color-info-dark-15);--color-status-success: var(--color-success);--color-status-success-bg: var(--color-success-dark-15);--color-status-warning: var(--color-warning);--color-status-warning-bg: var(--color-warning-dark-15);--color-status-error: var(--color-error);--color-status-error-bg: var(--color-error-dark-15)}[data-theme=light]{--color-bg: var(--color-white);--color-border: var(--color-black-20);--color-border-hover: var(--color-black-40);--color-border-selected: var(--color-black-50);--color-txt-icon-1: var(--color-black-95);--color-txt-icon-2: var(--color-black-65);--color-accent: var(--color-red);--color-accent-hover: var(--color-red-90);--color-item-bg: var(--color-black-04);--color-item-bg-selected: var(--color-black-04);--color-item-bg-hover: var(--color-black-08);--color-code-bg: var(--color-black-10);--color-overlay: var(--color-black-60);--color-status-info: var(--color-info-dark);--color-status-info-bg: var(--color-info-15);--color-status-success: var(--color-success-dark);--color-status-success-bg: var(--color-success-15);--color-status-warning: var(--color-warning-dark);--color-status-warning-bg: var(--color-warning-15);--color-status-error: var(--color-error-dark);--color-status-error-bg: var(--color-error-15)}:root{--breakpoint-mobile: 375px;--breakpoint-tablet: 768px;--breakpoint-desktop: 1280px}:root{--space-xs: 8px;--space-s: 12px;--space-m: 16px;--space-l: 24px;--space-xl: 32px}@media (min-width: 768px){:root{--space-xs: 8px;--space-s: 16px;--space-m: 20px;--space-l: 28px;--space-xl: 40px}}@media (min-width: 1280px){:root{--space-xs: 8px;--space-s: 16px;--space-m: 24px;--space-l: 32px;--space-xl: 48px}}:root{--radius-xs: 4px;--radius-s: 6px}:root{--height-xs: 24px;--height-s: 32px;--height-m: 44px;--height-l: 56px;--icon-xs: 16px;--icon-s: 20px;--icon-m: 24px;--icon-l: 28px;--icon-xl: 48px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--font-size-h1: 32px;--font-size-h2: 28px;--font-size-h3: 24px;--font-size-h4: 20px;--font-size-p1: 16px;--font-size-p2: 14px;--font-size-p3: 12px;--letter-spacing-h1: 0;--letter-spacing-h2: 0;--letter-spacing-h3: 0;--letter-spacing-h4: 0;--letter-spacing-p1: .02em;--letter-spacing-p2: .04em;--letter-spacing-p3: .06em}@media (min-width: 768px){:root{--font-size-h1: 40px;--font-size-h2: 36px;--font-size-h3: 28px;--font-size-h4: 24px;--font-size-p1: 18px;--font-size-p2: 16px;--font-size-p3: 14px;--letter-spacing-h4: 0;--letter-spacing-p1: .02em;--letter-spacing-p2: .02em;--letter-spacing-p3: .04em}}@media (min-width: 1280px){:root{--font-size-h1: 40px;--font-size-h2: 36px;--font-size-h3: 28px;--font-size-h4: 24px;--font-size-p1: 18px;--font-size-p2: 16px;--font-size-p3: 14px;--letter-spacing-h4: 0;--letter-spacing-p1: .02em;--letter-spacing-p2: .02em;--letter-spacing-p3: .04em}}:root{--page-padding-hor: 16px;--page-padding-vert: 32px;--page-header-height: 64px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease}@media (min-width: 768px){:root{--page-padding-hor: 20px;--page-padding-vert: 48px;--page-header-height: 72px}}@media (min-width: 1280px){:root{--page-padding-hor: 24px;--page-padding-vert: 64px;--page-header-height: 72px}}body{margin:0;min-width:320px;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-txt-icon-1);transition:background-color var(--transition-slow),color var(--transition-slow)}*{box-sizing:border-box}}.ds-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);font-size:var(--font-size-p1);font-weight:400;font-family:inherit;line-height:1;border:none;cursor:pointer;transition:background-color var(--transition-normal),border-color var(--transition-normal),opacity var(--transition-normal);white-space:nowrap;text-decoration:none}.ds-button:disabled,.ds-button[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-button__icon{display:flex;align-items:center;justify-content:center}.ds-button--primary{color:var(--color-white);background-color:var(--color-accent)}.ds-button--primary:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--color-accent-hover)}.ds-button--secondary{color:var(--color-txt-icon-1);background-color:transparent;border:1px solid var(--color-border)}.ds-button--secondary:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--color-item-bg-hover);border-color:var(--color-border-hover)}.ds-button--ghost{color:var(--color-txt-icon-2);background-color:transparent}.ds-button--ghost:hover:not(:disabled):not([aria-disabled=true]){background-color:var(--color-item-bg-hover);color:var(--color-txt-icon-1)}.ds-button--xs{height:var(--height-xs);padding:0 calc(var(--height-xs) / 2);font-size:var(--font-size-p3);border-radius:var(--radius-xs)}.ds-button--s{height:var(--height-s);padding:0 calc(var(--height-s) / 2);font-size:var(--font-size-p2);border-radius:var(--radius-xs)}.ds-button--m{height:var(--height-m);padding:0 calc(var(--height-m) / 2);font-size:var(--font-size-p1);border-radius:var(--radius-s)}.ds-button--l{height:var(--height-l);padding:0 calc(var(--height-l) / 2);font-size:var(--font-size-h4);border-radius:var(--radius-s);gap:var(--space-s)}.ds-button--full{width:100%}.ds-button--icon-only{aspect-ratio:1;padding-left:0;padding-right:0}.ds-input-wrapper{display:flex;flex-direction:column;gap:var(--space-xs)}.ds-input-wrapper--full{width:100%}.ds-input-wrapper--disabled{opacity:.5;cursor:not-allowed}.ds-input-label{font-size:var(--font-size-p2);font-weight:400;color:var(--color-txt-icon-1)}.ds-input-container{position:relative;display:flex;align-items:center}.ds-input{width:100%;font-family:inherit;color:var(--color-txt-icon-1);background-color:transparent;border:1px solid var(--color-border);transition:border-color var(--transition-normal);line-height:1.5}.ds-input::placeholder{color:var(--color-txt-icon-2)}.ds-input:hover:not(:disabled){border-color:var(--color-border-hover)}.ds-input:focus,.ds-input:active{outline:none;border-color:var(--color-border-hover)}.ds-input:disabled{cursor:not-allowed}.ds-input--error{border-color:var(--color-error)}.ds-input--xs{height:var(--height-xs);padding:0 calc(var(--height-xs) / 4);font-size:var(--font-size-p3);border-radius:var(--radius-xs)}.ds-input--s{height:var(--height-s);padding:0 calc(var(--height-s) / 4);font-size:var(--font-size-p2);border-radius:var(--radius-xs)}.ds-input--m{height:var(--height-m);padding:0 calc(var(--height-m) / 4);font-size:var(--font-size-p1);border-radius:var(--radius-s)}.ds-input--with-icon.ds-input--xs{padding-left:calc(var(--height-xs) / 4 + 16px + var(--height-xs) / 4)}.ds-input--with-icon.ds-input--s{padding-left:calc(var(--height-s) / 4 + 20px + var(--height-s) / 4)}.ds-input--with-icon.ds-input--m{padding-left:calc(var(--height-m) / 4 + 24px + var(--height-m) / 4)}.ds-input--with-icon-right.ds-input--xs{padding-right:calc(var(--height-xs) / 4 + 16px + var(--height-xs) / 4)}.ds-input--with-icon-right.ds-input--s{padding-right:calc(var(--height-s) / 4 + 20px + var(--height-s) / 4)}.ds-input--with-icon-right.ds-input--m{padding-right:calc(var(--height-m) / 4 + 24px + var(--height-m) / 4)}.ds-input-icon{position:absolute;display:flex;align-items:center;color:var(--color-txt-icon-2);pointer-events:none}.ds-input-icon--xs{left:6px}.ds-input-icon--s{left:8px}.ds-input-icon--m{left:11px}.ds-input-icon-right{position:absolute;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--color-txt-icon-2);cursor:pointer;transition:color var(--transition-normal);padding:0}.ds-input-icon-right:hover{color:var(--color-txt-icon-1)}.ds-input-icon-right--xs{right:6px}.ds-input-icon-right--s{right:8px}.ds-input-icon-right--m{right:11px}.ds-input-hint{font-size:var(--font-size-p2);color:var(--color-txt-icon-2)}.ds-input-error{font-size:var(--font-size-p2);color:var(--color-error)}.ds-textarea-wrapper{display:flex;flex-direction:column;gap:var(--space-xs)}.ds-textarea-wrapper--full{width:100%}.ds-textarea-wrapper--disabled{opacity:.5;cursor:not-allowed}.ds-textarea-label{font-size:var(--font-size-p2);font-weight:400;color:var(--color-txt-icon-1)}.ds-textarea{width:100%;font-family:inherit;color:var(--color-txt-icon-1);background-color:transparent;border:1px solid var(--color-border);transition:border-color var(--transition-normal);line-height:1.5;resize:vertical;background:linear-gradient(315deg,transparent 5px,var(--color-border) 5px,var(--color-border) 6px,transparent 6px),linear-gradient(315deg,transparent 10px,var(--color-border) 10px,var(--color-border) 11px,transparent 11px);background-repeat:no-repeat;background-position:bottom right;background-size:16px 16px}.ds-textarea::placeholder{color:var(--color-txt-icon-2)}.ds-textarea::-webkit-resizer{display:none}.ds-textarea:hover:not(:disabled){border-color:var(--color-border-hover);background:linear-gradient(315deg,transparent 5px,var(--color-border-hover) 5px,var(--color-border-hover) 6px,transparent 6px),linear-gradient(315deg,transparent 10px,var(--color-border-hover) 10px,var(--color-border-hover) 11px,transparent 11px);background-repeat:no-repeat;background-position:bottom right;background-size:16px 16px}.ds-textarea:focus,.ds-textarea:active{outline:none;border-color:var(--color-border-hover);background:linear-gradient(315deg,transparent 5px,var(--color-border-hover) 5px,var(--color-border-hover) 6px,transparent 6px),linear-gradient(315deg,transparent 10px,var(--color-border-hover) 10px,var(--color-border-hover) 11px,transparent 11px);background-repeat:no-repeat;background-position:bottom right;background-size:16px 16px}.ds-textarea:disabled{cursor:not-allowed}.ds-textarea--error{border-color:var(--color-error);background:linear-gradient(315deg,transparent 5px,var(--color-error) 5px,var(--color-error) 6px,transparent 6px),linear-gradient(315deg,transparent 10px,var(--color-error) 10px,var(--color-error) 11px,transparent 11px);background-repeat:no-repeat;background-position:bottom right;background-size:16px 16px}.ds-textarea--no-resize{resize:none;background:none}.ds-textarea--xs{padding:var(--space-xs);font-size:var(--font-size-p3);border-radius:var(--radius-xs)}.ds-textarea--s{padding:var(--space-xs) var(--space-s);font-size:var(--font-size-p2);border-radius:var(--radius-xs)}.ds-textarea--m{padding:var(--space-s);font-size:var(--font-size-p1);border-radius:var(--radius-s)}.ds-textarea-hint{font-size:var(--font-size-p2);color:var(--color-txt-icon-2)}.ds-textarea-error{font-size:var(--font-size-p2);color:var(--color-error)}.ds-select-wrapper{display:flex;flex-direction:column;gap:var(--space-xs)}.ds-select-wrapper--full{width:100%}.ds-select-wrapper--disabled{opacity:.5;cursor:not-allowed}.ds-select-label{font-size:var(--font-size-p2);font-weight:400;color:var(--color-txt-icon-1)}.ds-select-container{position:relative}.ds-select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);font-family:inherit;color:var(--color-txt-icon-1);background-color:transparent;border:1px solid var(--color-border);cursor:pointer;transition:border-color var(--transition-normal);text-align:left;line-height:1.5}.ds-select-trigger>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-select-trigger:hover:not(:disabled){border-color:var(--color-border-hover)}.ds-select-trigger:disabled{cursor:not-allowed}.ds-select-trigger--error{border-color:var(--color-error)}.ds-select-trigger--xs{height:var(--height-xs);padding:0 calc(var(--height-xs) / 4);font-size:var(--font-size-p3);border-radius:var(--radius-xs)}.ds-select-trigger--s{height:var(--height-s);padding:0 calc(var(--height-s) / 4);font-size:var(--font-size-p2);border-radius:var(--radius-xs)}.ds-select-trigger--m{height:var(--height-m);padding:0 calc(var(--height-m) / 4);font-size:var(--font-size-p1);border-radius:var(--radius-s)}.ds-select-placeholder{color:var(--color-txt-icon-2)}.ds-select-icon{flex-shrink:0;color:var(--color-txt-icon-2);transition:transform var(--transition-normal)}.ds-select-icon--open{transform:rotate(180deg)}.ds-select-icon--up{transform:rotate(0)}.ds-select-dropdown{position:absolute;left:0;right:0;background-color:var(--color-bg);border:1px solid var(--color-border);z-index:100;max-height:300px;overflow-y:auto}.ds-select-dropdown--down{top:calc(100% + 4px)}.ds-select-dropdown--up{bottom:calc(100% + 4px)}.ds-select-dropdown--s{border-radius:var(--radius-xs)}.ds-select-dropdown--m{border-radius:var(--radius-s)}.ds-select-option{width:100%;font-family:inherit;color:var(--color-txt-icon-1);background-color:transparent;border:none;cursor:pointer;text-align:left;transition:background-color var(--transition-normal);line-height:1.5;white-space:normal;word-wrap:break-word}.ds-select-option--s{min-height:var(--height-s);padding:var(--space-xs) calc(var(--height-s) / 4);font-size:var(--font-size-p2)}.ds-select-option--m{min-height:var(--height-m);padding:var(--space-xs) calc(var(--height-m) / 4);font-size:var(--font-size-p1)}.ds-select-option:hover{background-color:var(--color-item-bg-hover)}.ds-select-option--selected{background-color:var(--color-item-bg-selected)}.ds-select-error{font-size:var(--font-size-p2);color:var(--color-error)}.ds-stepper-wrapper{display:flex;flex-direction:column;gap:var(--space-xs)}.ds-stepper-label{font-size:var(--font-size-p2);letter-spacing:var(--letter-spacing-p2);color:var(--color-txt-icon-1)}.ds-stepper{display:flex;align-items:stretch;width:fit-content;border:1px solid var(--color-border);border-radius:var(--radius-xs);transition:border-color var(--transition-normal)}.ds-stepper:hover:not(.ds-stepper--disabled){border-color:var(--color-border-hover)}.ds-stepper:focus-within{border-color:var(--color-border-hover)}.ds-stepper--disabled{cursor:not-allowed}.ds-stepper-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;color:var(--color-txt-icon-2);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast);flex-shrink:0}.ds-stepper-button:hover:not(:disabled){background-color:var(--color-item-bg-hover);color:var(--color-txt-icon-1)}.ds-stepper-button:active:not(:disabled){background-color:var(--color-item-bg-selected)}.ds-stepper-button:disabled{opacity:.5;cursor:not-allowed}.ds-stepper-button--minus{border-radius:var(--radius-xs) 0 0 var(--radius-xs);border-right:1px solid var(--color-border)}.ds-stepper-button--plus{border-radius:0 var(--radius-xs) var(--radius-xs) 0;border-left:1px solid var(--color-border)}.ds-stepper-input{width:80px;text-align:center;border:none;background-color:transparent;color:var(--color-txt-icon-1);font-size:var(--font-size-p1);letter-spacing:var(--letter-spacing-p1);outline:none;cursor:text}.ds-stepper-input:disabled{cursor:not-allowed}.ds-stepper-input::-webkit-inner-spin-button,.ds-stepper-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ds-stepper-input[type=number]{-moz-appearance:textfield}.ds-stepper--xs{height:var(--height-xs)}.ds-stepper--xs .ds-stepper-button{width:var(--height-xs);padding:0}.ds-stepper--xs .ds-stepper-input{font-size:var(--font-size-p3);letter-spacing:var(--letter-spacing-p3);padding:0 var(--space-xs)}.ds-stepper--s{height:var(--height-s)}.ds-stepper--s .ds-stepper-button{width:var(--height-s);padding:0}.ds-stepper--s .ds-stepper-input{font-size:var(--font-size-p2);letter-spacing:var(--letter-spacing-p2);padding:0 var(--space-xs)}.ds-stepper--m{height:var(--height-m)}.ds-stepper--m .ds-stepper-button{width:var(--height-m);padding:0}.ds-stepper--m .ds-stepper-input{font-size:var(--font-size-p1);letter-spacing:var(--letter-spacing-p1);padding:0 var(--space-s)}.ds-stepper-hint{font-size:var(--font-size-p2);letter-spacing:var(--letter-spacing-p2);color:var(--color-txt-icon-2)}.ds-stepper-error{font-size:var(--font-size-p2);letter-spacing:var(--letter-spacing-p2);color:var(--color-status-error)}.ds-stepper-wrapper--error .ds-stepper{border-color:var(--color-status-error)}.ds-stepper-wrapper--error .ds-stepper:hover:not(.ds-stepper--disabled){border-color:var(--color-status-error)}.ds-stepper-wrapper--error .ds-stepper:focus-within{border-color:var(--color-status-error)}.ds-stepper-wrapper--disabled{opacity:.5;cursor:not-allowed}.ds-stepper-wrapper--disabled *{cursor:not-allowed}.ds-card{display:flex;flex-direction:column;background-color:transparent;border-radius:var(--radius-s);border:1px solid var(--color-border);transition:border-color var(--transition-normal),background-color var(--transition-normal);text-decoration:none;color:inherit}.ds-card--interactive{cursor:pointer;background-color:var(--color-item-bg);border:none}.ds-card--interactive:hover:not([aria-disabled=true]){background-color:var(--color-item-bg-hover)}.ds-card[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-card--none{padding:0;gap:0}.ds-card--s{padding:var(--space-s);gap:var(--space-xs)}.ds-card--m{padding:var(--space-m);gap:var(--space-s)}.ds-card--l{padding:var(--space-l);gap:var(--space-m)}.ds-h1{font-size:var(--font-size-h1);font-weight:400;line-height:1.2;color:var(--color-txt-icon-1);letter-spacing:var(--letter-spacing-h1);margin:0}.ds-h2{font-size:var(--font-size-h2);font-weight:400;line-height:1.3;color:var(--color-txt-icon-1);letter-spacing:var(--letter-spacing-h2);margin:0}.ds-h3{font-size:var(--font-size-h3);font-weight:400;line-height:1.3;color:var(--color-txt-icon-1);letter-spacing:var(--letter-spacing-h3);margin:0}.ds-h4{font-size:var(--font-size-h4);font-weight:400;line-height:1.4;color:var(--color-txt-icon-1);letter-spacing:var(--letter-spacing-h4);margin:0}.ds-p1{font-size:var(--font-size-p1);font-weight:400;line-height:1.5;color:var(--color-txt-icon-1);letter-spacing:var(--letter-spacing-p1);margin:0}.ds-p1--secondary{color:var(--color-txt-icon-2)}.ds-p2{font-size:var(--font-size-p2);font-weight:400;line-height:1.5;color:var(--color-txt-icon-1);letter-spacing:var(--letter-spacing-p2);margin:0}.ds-p2--secondary{color:var(--color-txt-icon-2)}.ds-p3{font-size:var(--font-size-p3);font-weight:400;line-height:1.5;color:var(--color-txt-icon-1);letter-spacing:var(--letter-spacing-p3);margin:0}.ds-p3--secondary{color:var(--color-txt-icon-2)}.ds-badge{display:inline-flex;align-items:center;justify-content:center;font-weight:400;white-space:nowrap}.ds-badge--s{padding:0 4px;font-size:var(--font-size-p3);letter-spacing:var(--letter-spacing-p3);border-radius:var(--radius-xs)}.ds-badge--m{padding:2px var(--space-xs);font-size:var(--font-size-p2);letter-spacing:var(--letter-spacing-p2);border-radius:var(--radius-s)}.ds-badge--default{background-color:var(--color-item-bg);color:var(--color-txt-icon-2)}.ds-badge--info{background-color:var(--color-status-info-bg);color:var(--color-status-info)}.ds-badge--success{background-color:var(--color-status-success-bg);color:var(--color-status-success)}.ds-badge--warning{background-color:var(--color-status-warning-bg);color:var(--color-status-warning)}.ds-badge--error{background-color:var(--color-status-error-bg);color:var(--color-status-error)}.ds-badge--accent{background-color:var(--color-red-10);color:var(--color-accent)}.ds-alert{display:flex;align-items:flex-start;gap:var(--space-s);padding:var(--space-s);border-radius:var(--radius-s)}.ds-alert--no-title{align-items:center}.ds-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.ds-alert:not(.ds-alert--no-title) .ds-alert__icon{margin-top:2px}.ds-alert__content{flex:1;min-width:0}.ds-alert__title{font-size:var(--font-size-p1);font-weight:400;margin-bottom:var(--space-xs)}.ds-alert__message{font-size:var(--font-size-p2);line-height:1.5}.ds-alert__close{flex-shrink:0;background:none;border:none;color:inherit;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity var(--transition-normal)}.ds-alert__close:hover{opacity:1}.ds-alert--info{background:linear-gradient(var(--color-status-info-bg),var(--color-status-info-bg)),var(--color-bg);color:var(--color-status-info)}.ds-alert--info .ds-alert__message{color:var(--color-txt-icon-1)}.ds-alert--success{background:linear-gradient(var(--color-status-success-bg),var(--color-status-success-bg)),var(--color-bg);color:var(--color-status-success)}.ds-alert--success .ds-alert__message{color:var(--color-txt-icon-1)}.ds-alert--warning{background:linear-gradient(var(--color-status-warning-bg),var(--color-status-warning-bg)),var(--color-bg);color:var(--color-status-warning)}.ds-alert--warning .ds-alert__message{color:var(--color-txt-icon-1)}.ds-alert--error{background:linear-gradient(var(--color-status-error-bg),var(--color-status-error-bg)),var(--color-bg);color:var(--color-status-error)}.ds-alert--error .ds-alert__message{color:var(--color-txt-icon-1)}.ds-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--color-overlay);display:flex;align-items:flex-start;justify-content:center;z-index:1000;padding:var(--space-m);overflow-y:auto}.ds-modal{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-s);display:flex;flex-direction:column;margin:auto 0}.ds-modal--s{width:100%;max-width:400px}.ds-modal--m{width:100%;max-width:600px}.ds-modal--l{width:100%;max-width:900px}.ds-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-l)}.ds-modal__title{font-size:var(--font-size-h3);font-weight:400;color:var(--color-txt-icon-1);margin:0}.ds-modal__body{padding:0 var(--space-l) var(--space-l);flex:1}.ds-modal__footer{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-s);padding:var(--space-s) var(--space-l) var(--space-l);background-color:var(--color-bg);position:relative;z-index:10;border-bottom-left-radius:var(--space-s);border-bottom-right-radius:var(--space-s)}.ds-code-accordion{border-radius:var(--radius-s);overflow:hidden}.ds-code-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:var(--color-item-bg);border:none;color:var(--color-txt-icon-1);font-size:var(--font-size-p1);font-family:inherit;cursor:pointer;transition:background-color var(--transition-normal)}.ds-code-accordion__header:hover{background-color:var(--color-item-bg-hover)}.ds-code-accordion__title{font-weight:400}.ds-code-accordion__icon{flex-shrink:0;color:var(--color-txt-icon-2);transition:transform var(--transition-normal)}.ds-code-accordion__icon--expanded{transform:rotate(180deg)}.ds-code-accordion__content{font-family:Fira Mono,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,monospace;font-size:var(--font-size-p2);background-color:var(--color-code-bg);color:var(--color-txt-icon-1);overflow-x:auto;line-height:1.6;margin:0}.ds-code-accordion--s .ds-code-accordion__header,.ds-code-accordion--s .ds-code-accordion__content{padding:var(--space-xs)}.ds-code-accordion--m .ds-code-accordion__header,.ds-code-accordion--m .ds-code-accordion__content{padding:var(--space-s)}.ds-code-accordion--l .ds-code-accordion__header,.ds-code-accordion--l .ds-code-accordion__content{padding:var(--space-m)}.ds-code-accordion__content code{background:none;border:none;padding:0;font-family:inherit;font-size:inherit;color:inherit}.ds-code-inline{font-family:Fira Mono,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,monospace;font-size:.9em;background-color:var(--color-code-bg);color:var(--color-txt-icon-1);padding:2px 6px;border-radius:var(--radius-s);white-space:nowrap}.ds-code-block{font-family:Fira Mono,SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,monospace;font-size:var(--font-size-p2);background-color:var(--color-code-bg);color:var(--color-txt-icon-1);padding:var(--space-s);border-radius:var(--radius-s);overflow-x:auto;line-height:1.6;margin:0}.ds-code-block code{background:none;border:none;padding:0;font-family:inherit;font-size:inherit;color:inherit}.ds-link{color:var(--color-accent);text-decoration:none;cursor:pointer;transition:color var(--transition-fast),text-decoration var(--transition-fast);font-size:inherit;font-weight:inherit;line-height:inherit}.ds-link:hover{color:var(--color-accent-hover);text-decoration:underline}.ds-link:active{color:var(--color-accent-hover)}.ds-tabs{display:flex;gap:var(--space-xs);flex-wrap:wrap}.ds-tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);font-family:inherit;font-weight:400;line-height:1;cursor:pointer;background-color:transparent;color:var(--color-txt-icon-1);transition:border-color var(--transition-normal),background-color var(--transition-normal);white-space:nowrap;text-decoration:none}.ds-tab--ghost{border:none;color:var(--color-txt-icon-2)}.ds-tab--ghost:hover:not(.ds-tab--selected):not(:disabled):not([aria-disabled=true]){background-color:var(--color-item-bg-hover);color:var(--color-txt-icon-1)}.ds-tab--ghost.ds-tab--selected{background-color:var(--color-item-bg-selected);color:var(--color-txt-icon-1)}.ds-tab--xs{height:var(--height-xs);padding:0 calc(var(--height-xs) / 2);font-size:var(--font-size-p3);border-radius:var(--radius-xs)}.ds-tab--s{height:var(--height-s);padding:0 calc(var(--height-s) / 2);font-size:var(--font-size-p2);border-radius:var(--radius-xs)}.ds-tab--m{height:var(--height-m);padding:0 calc(var(--height-m) / 2);font-size:var(--font-size-p1);border-radius:var(--radius-s)}.ds-tab--l{height:var(--height-l);padding:0 calc(var(--height-l) / 2);font-size:var(--font-size-p1);border-radius:var(--radius-s);gap:var(--space-s)}.ds-tab:disabled,.ds-tab[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-tab-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.ds-tab--icon-only{aspect-ratio:1;padding-left:0;padding-right:0}.ds-accordion{border-radius:var(--radius-s);overflow:hidden}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;background-color:var(--color-item-bg);border:none;color:var(--color-txt-icon-1);font-size:var(--font-size-h4);font-family:inherit;cursor:pointer;transition:background-color var(--transition-normal)}.ds-accordion__header:hover{background-color:var(--color-item-bg-hover)}.ds-accordion__title{font-weight:400}.ds-accordion__icon{flex-shrink:0;color:var(--color-txt-icon-2);transition:transform var(--transition-normal)}.ds-accordion__icon--expanded{transform:rotate(180deg)}.ds-accordion__content{display:flex;flex-direction:column;background-color:var(--color-item-bg)}.ds-accordion--s .ds-accordion__header{padding:var(--space-s)}.ds-accordion--s .ds-accordion__content{padding:var(--space-s);gap:var(--space-xs)}.ds-accordion--m .ds-accordion__header{padding:var(--space-m)}.ds-accordion--m .ds-accordion__content{padding:var(--space-m);gap:var(--space-s)}.ds-accordion--l .ds-accordion__header{padding:var(--space-l)}.ds-accordion--l .ds-accordion__content{padding:var(--space-l);gap:var(--space-m)}.ds-tooltip-wrapper{position:relative;display:inline-flex}.ds-tooltip{position:absolute;background-color:var(--color-bg);color:var(--color-txt-icon-2);font-size:var(--font-size-p3);letter-spacing:var(--letter-spacing-p3);width:max-content;max-width:200px;padding:var(--space-xs);border:1px solid var(--color-border);border-radius:var(--radius-xs);z-index:2000;white-space:normal;word-wrap:break-word;pointer-events:none;line-height:1.4}.ds-tooltip--top{bottom:calc(100% + 8px);left:50%;transform:translate(calc(-50% + var(--tooltip-offset-x, 0px)))}.ds-tooltip--top:after{content:"";position:absolute;top:100%;left:calc(50% + var(--arrow-offset, 0px));transform:translate(-50%);border:4px solid transparent;border-top-color:var(--color-border)}.ds-tooltip--top:before{content:"";position:absolute;top:100%;left:calc(50% + var(--arrow-offset, 0px));transform:translate(-50%);border:3px solid transparent;border-top-color:var(--color-bg);z-index:1}.ds-tooltip--bottom{top:calc(100% + 8px);left:50%;transform:translate(calc(-50% + var(--tooltip-offset-x, 0px)))}.ds-tooltip--bottom:after{content:"";position:absolute;bottom:100%;left:calc(50% + var(--arrow-offset, 0px));transform:translate(-50%);border:4px solid transparent;border-bottom-color:var(--color-border)}.ds-tooltip--bottom:before{content:"";position:absolute;bottom:100%;left:calc(50% + var(--arrow-offset, 0px));transform:translate(-50%);border:3px solid transparent;border-bottom-color:var(--color-bg);z-index:1}.ds-tooltip--left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.ds-tooltip--left:after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:4px solid transparent;border-left-color:var(--color-border)}.ds-tooltip--left:before{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:3px solid transparent;border-left-color:var(--color-bg);z-index:1}.ds-tooltip--right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.ds-tooltip--right:after{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:4px solid transparent;border-right-color:var(--color-border)}.ds-tooltip--right:before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:3px solid transparent;border-right-color:var(--color-bg);z-index:1}.ds-toggle{display:inline-flex;align-items:center;gap:var(--space-s);cursor:pointer}.ds-toggle--disabled{opacity:.5;cursor:not-allowed}.ds-toggle__input{position:absolute;opacity:0;pointer-events:none}.ds-toggle__track{position:relative;display:flex;align-items:center;background-color:var(--color-item-bg);border:1px solid var(--color-border);transition:background-color var(--transition-normal),border-color var(--transition-normal);flex-shrink:0}.ds-toggle__input:checked+.ds-toggle__track{background-color:var(--color-status-success);border-color:var(--color-status-success)}.ds-toggle__input:not(:checked)+.ds-toggle__track:hover{border-color:var(--color-border-hover)}.ds-toggle__thumb{background-color:var(--color-white);border-radius:50%;transition:transform var(--transition-normal);box-shadow:0 1px 3px #0003}.ds-toggle__label{font-size:var(--font-size-p1);color:var(--color-txt-icon-1);-webkit-user-select:none;user-select:none}.ds-toggle--xs .ds-toggle__track{width:calc(var(--icon-xs) * 1.75);height:var(--icon-xs);border-radius:calc(var(--icon-xs) / 2);padding:2px}.ds-toggle--xs .ds-toggle__thumb{width:calc(var(--icon-xs) - 4px);height:calc(var(--icon-xs) - 4px)}.ds-toggle--xs .ds-toggle__input:checked+.ds-toggle__track .ds-toggle__thumb{transform:translate(calc(var(--icon-xs) * .75))}.ds-toggle--xs .ds-toggle__label{font-size:var(--font-size-p3)}.ds-toggle--s .ds-toggle__track{width:calc(var(--icon-s) * 1.75);height:var(--icon-s);border-radius:calc(var(--icon-s) / 2);padding:2px}.ds-toggle--s .ds-toggle__thumb{width:calc(var(--icon-s) - 4px);height:calc(var(--icon-s) - 4px)}.ds-toggle--s .ds-toggle__input:checked+.ds-toggle__track .ds-toggle__thumb{transform:translate(calc(var(--icon-s) * .75))}.ds-toggle--s .ds-toggle__label{font-size:var(--font-size-p2)}.ds-toggle--m .ds-toggle__track{width:calc(var(--icon-m) * 1.75);height:var(--icon-m);border-radius:calc(var(--icon-m) / 2);padding:2px}.ds-toggle--m .ds-toggle__thumb{width:calc(var(--icon-m) - 4px);height:calc(var(--icon-m) - 4px)}.ds-toggle--m .ds-toggle__input:checked+.ds-toggle__track .ds-toggle__thumb{transform:translate(calc(var(--icon-m) * .75))}.ds-toggle--m .ds-toggle__label{font-size:var(--font-size-p1)}.ds-toggle--l .ds-toggle__track{width:calc(var(--icon-l) * 1.75);height:var(--icon-l);border-radius:calc(var(--icon-l) / 2);padding:3px}.ds-toggle--l .ds-toggle__thumb{width:calc(var(--icon-l) - 6px);height:calc(var(--icon-l) - 6px)}.ds-toggle--l .ds-toggle__input:checked+.ds-toggle__track .ds-toggle__thumb{transform:translate(calc(var(--icon-l) * .75))}.ds-toggle--l .ds-toggle__label{font-size:var(--font-size-p1)}.ds-checkbox{display:inline-flex;align-items:center;gap:var(--space-s);cursor:pointer}.ds-checkbox--disabled{opacity:.5;cursor:not-allowed}.ds-checkbox__input{position:absolute;opacity:0;pointer-events:none}.ds-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;background-color:var(--color-item-bg);border:1px solid var(--color-border);transition:background-color var(--transition-normal),border-color var(--transition-normal);flex-shrink:0;border-radius:4px}.ds-checkbox__input:checked+.ds-checkbox__box{background-color:var(--color-status-success);border-color:var(--color-status-success)}.ds-checkbox__input:not(:checked)+.ds-checkbox__box:hover{border-color:var(--color-border-hover)}.ds-checkbox__icon{color:var(--color-white)}.ds-checkbox__label{font-size:var(--font-size-p1);color:var(--color-txt-icon-1);-webkit-user-select:none;user-select:none}.ds-checkbox--xs .ds-checkbox__box{width:var(--icon-xs);height:var(--icon-xs)}.ds-checkbox--xs .ds-checkbox__label{font-size:var(--font-size-p3)}.ds-checkbox--s .ds-checkbox__box{width:var(--icon-s);height:var(--icon-s)}.ds-checkbox--s .ds-checkbox__label{font-size:var(--font-size-p2)}.ds-checkbox--m .ds-checkbox__box{width:var(--icon-m);height:var(--icon-m)}.ds-checkbox--m .ds-checkbox__label{font-size:var(--font-size-p1)}.ds-checkbox--l .ds-checkbox__box{width:var(--icon-l);height:var(--icon-l)}.ds-checkbox--l .ds-checkbox__label{font-size:var(--font-size-p1)}.ds-radio{display:inline-flex;align-items:center;gap:var(--space-s);cursor:pointer}.ds-radio--disabled{opacity:.5;cursor:not-allowed}.ds-radio__input{position:absolute;opacity:0;pointer-events:none}.ds-radio__circle{position:relative;display:flex;align-items:center;justify-content:center;background-color:var(--color-item-bg);border:1px solid var(--color-border);transition:background-color var(--transition-normal),border-color var(--transition-normal);flex-shrink:0;border-radius:50%}.ds-radio__input:checked+.ds-radio__circle{background-color:var(--color-status-success);border-color:var(--color-status-success)}.ds-radio__input:not(:checked)+.ds-radio__circle:hover{border-color:var(--color-border-hover)}.ds-radio__dot{background-color:var(--color-white);border-radius:50%;opacity:0;transition:opacity var(--transition-normal)}.ds-radio__input:checked+.ds-radio__circle .ds-radio__dot{opacity:1}.ds-radio__label{font-size:var(--font-size-p1);color:var(--color-txt-icon-1);-webkit-user-select:none;user-select:none}.ds-radio--xs .ds-radio__circle{width:var(--icon-xs);height:var(--icon-xs)}.ds-radio--xs .ds-radio__dot{width:6px;height:6px}.ds-radio--xs .ds-radio__label{font-size:var(--font-size-p3)}.ds-radio--s .ds-radio__circle{width:var(--icon-s);height:var(--icon-s)}.ds-radio--s .ds-radio__dot{width:8px;height:8px}.ds-radio--s .ds-radio__label{font-size:var(--font-size-p2)}.ds-radio--m .ds-radio__circle{width:var(--icon-m);height:var(--icon-m)}.ds-radio--m .ds-radio__dot{width:10px;height:10px}.ds-radio--m .ds-radio__label{font-size:var(--font-size-p1)}.ds-radio--l .ds-radio__circle{width:var(--icon-l);height:var(--icon-l)}.ds-radio--l .ds-radio__dot{width:12px;height:12px}.ds-radio--l .ds-radio__label{font-size:var(--font-size-p1)}

package/package.json

@@ -1,24 +1,30 @@
 {
   "name": "@donkit-ai/design-system",
-  "version": "0.3.4",
+  "version": "0.4.2",
   "description": "Donkit Design System - minimal design tokens and React components",
   "type": "module",
-  "main": "src/index.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "sideEffects": [
+    "*.css",
+    "dist/tokens.css"
+  ],
   "exports": {
-    ".": "./src/index.js",
-    "./tokens.css": "./src/styles/tokens.css",
-    "./components/*": "./src/components/*.jsx"
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./tokens.css": "./dist/tokens.css"
   },
   "files": [
-    "src/components",
-    "src/styles",
-    "src/index.js",
+    "dist",
     "README.md"
   ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <21.0.0",

package/src/components/Accordion.css

@@ -1,70 +0,0 @@
-.ds-accordion {
-  border-radius: var(--radius-s);
-  overflow: hidden;
-}
-
-.ds-accordion__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  background-color: var(--color-item-bg);
-  border: none;
-  color: var(--color-txt-icon-1);
-  font-size: var(--font-size-h4);
-  font-family: inherit;
-  cursor: pointer;
-  transition: background-color var(--transition-normal);
-}
-
-.ds-accordion__header:hover {
-  background-color: var(--color-item-bg-hover);
-}
-
-.ds-accordion__title {
-  font-weight: 400;
-}
-
-.ds-accordion__icon {
-  flex-shrink: 0;
-  color: var(--color-txt-icon-2);
-  transition: transform var(--transition-normal);
-}
-
-.ds-accordion__icon--expanded {
-  transform: rotate(180deg);
-}
-
-.ds-accordion__content {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-item-bg);
-}
-
-/* Sizes */
-.ds-accordion--s .ds-accordion__header {
-  padding: var(--space-s);
-}
-
-.ds-accordion--s .ds-accordion__content {
-  padding: var(--space-s);
-  gap: var(--space-xs);
-}
-
-.ds-accordion--m .ds-accordion__header {
-  padding: var(--space-m);
-}
-
-.ds-accordion--m .ds-accordion__content {
-  padding: var(--space-m);
-  gap: var(--space-s);
-}
-
-.ds-accordion--l .ds-accordion__header {
-  padding: var(--space-l);
-}
-
-.ds-accordion--l .ds-accordion__content {
-  padding: var(--space-l);
-  gap: var(--space-m);
-}

package/src/components/Accordion.jsx

@@ -1,42 +0,0 @@
-import React, { useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { iconSizes } from '../styles/iconSizes';
-import './Accordion.css';
-
-export function Accordion({
-  children,
-  title,
-  defaultExpanded = false,
-  padding = 'm',
-  ...props
-}) {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-
-  const className = [
-    'ds-accordion',
-    `ds-accordion--${padding}`,
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div className={className} {...props}>
-      <button
-        type="button"
-        className="ds-accordion__header"
-        onClick={() => setIsExpanded(!isExpanded)}
-        aria-expanded={isExpanded}
-      >
-        <span className="ds-accordion__title">{title}</span>
-        <ChevronDown
-          size={iconSizes.s}
-          strokeWidth={1.5}
-          className={`ds-accordion__icon ${isExpanded ? 'ds-accordion__icon--expanded' : ''}`}
-        />
-      </button>
-      {isExpanded && (
-        <div className="ds-accordion__content">
-          {children}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/Alert.css

@@ -1,93 +0,0 @@
-.ds-alert {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-s);
-  padding: var(--space-s);
-  border-radius: var(--radius-s);
-}
-
-.ds-alert--no-title {
-  align-items: center;
-}
-
-.ds-alert__icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ds-alert:not(.ds-alert--no-title) .ds-alert__icon {
-  margin-top: 2px;
-}
-
-.ds-alert__content {
-  flex: 1;
-  min-width: 0;
-}
-
-.ds-alert__title {
-  font-size: var(--font-size-p1);
-  font-weight: 400;
-  margin-bottom: var(--space-xs);
-}
-
-.ds-alert__message {
-  font-size: var(--font-size-p2);
-  line-height: 1.5;
-}
-
-.ds-alert__close {
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.7;
-  transition: opacity var(--transition-normal);
-}
-
-.ds-alert__close:hover {
-  opacity: 1;
-}
-
-/* Variants */
-.ds-alert--info {
-  background: linear-gradient(var(--color-status-info-bg), var(--color-status-info-bg)), var(--color-bg);
-  color: var(--color-status-info);
-}
-
-.ds-alert--info .ds-alert__message {
-  color: var(--color-txt-icon-1);
-}
-
-.ds-alert--success {
-  background: linear-gradient(var(--color-status-success-bg), var(--color-status-success-bg)), var(--color-bg);
-  color: var(--color-status-success);
-}
-
-.ds-alert--success .ds-alert__message {
-  color: var(--color-txt-icon-1);
-}
-
-.ds-alert--warning {
-  background: linear-gradient(var(--color-status-warning-bg), var(--color-status-warning-bg)), var(--color-bg);
-  color: var(--color-status-warning);
-}
-
-.ds-alert--warning .ds-alert__message {
-  color: var(--color-txt-icon-1);
-}
-
-.ds-alert--error {
-  background: linear-gradient(var(--color-status-error-bg), var(--color-status-error-bg)), var(--color-bg);
-  color: var(--color-status-error);
-}
-
-.ds-alert--error .ds-alert__message {
-  color: var(--color-txt-icon-1);
-}

package/src/components/Alert.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Info, CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react';
-import { iconSizes } from '../styles/iconSizes';
-import './Alert.css';
-
-const ICON_MAP = {
-  info: Info,
-  success: CheckCircle,
-  warning: AlertTriangle,
-  error: XCircle,
-};
-
-export function Alert({
-  children,
-  variant = 'info',
-  title,
-  onClose,
-  role,
-  ...props
-}) {
-  const Icon = ICON_MAP[variant];
-  const alertRole = role || (variant === 'error' ? 'alert' : 'status');
-
-  return (
-    <div className={`ds-alert ds-alert--${variant} ${!title ? 'ds-alert--no-title' : ''}`} role={alertRole} {...props}>
-      {Icon && (
-        <div className="ds-alert__icon">
-          <Icon size={iconSizes.m} strokeWidth={1.5} />
-        </div>
-      )}
-      <div className="ds-alert__content">
-        {title && <div className="ds-alert__title">{title}</div>}
-        {children && <div className="ds-alert__message">{children}</div>}
-      </div>
-      {onClose && (
-        <button
-          type="button"
-          className="ds-alert__close"
-          onClick={onClose}
-          aria-label="Close alert"
-        >
-          <X size={iconSizes.m} strokeWidth={1.5} />
-        </button>
-      )}
-    </div>
-  );
-}

package/src/components/Badge.css

@@ -1,52 +0,0 @@
-.ds-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 400;
-  white-space: nowrap;
-}
-
-/* Sizes */
-.ds-badge--s {
-  padding: 0 4px;
-  font-size: var(--font-size-p3);
-  letter-spacing: var(--letter-spacing-p3);
-  border-radius: var(--radius-xs);
-}
-
-.ds-badge--m {
-  padding: 2px var(--space-xs);
-  font-size: var(--font-size-p2);
-  letter-spacing: var(--letter-spacing-p2);
-  border-radius: var(--radius-s);
-}
-
-.ds-badge--default {
-  background-color: var(--color-item-bg);
-  color: var(--color-txt-icon-2);
-}
-
-.ds-badge--info {
-  background-color: var(--color-status-info-bg);
-  color: var(--color-status-info);
-}
-
-.ds-badge--success {
-  background-color: var(--color-status-success-bg);
-  color: var(--color-status-success);
-}
-
-.ds-badge--warning {
-  background-color: var(--color-status-warning-bg);
-  color: var(--color-status-warning);
-}
-
-.ds-badge--error {
-  background-color: var(--color-status-error-bg);
-  color: var(--color-status-error);
-}
-
-.ds-badge--accent {
-  background-color: var(--color-red-10);
-  color: var(--color-accent);
-}

package/src/components/Badge.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import './Badge.css';
-
-export function Badge({
-  children,
-  variant = 'default',
-  size = 'm',
-  role,
-  ...props
-}) {
-  const className = [
-    'ds-badge',
-    `ds-badge--${variant}`,
-    `ds-badge--${size}`,
-  ].filter(Boolean).join(' ');
-
-  // Use role="status" for informational badges (info, success, warning, error)
-  const badgeRole = role || (['info', 'success', 'warning', 'error'].includes(variant) ? 'status' : undefined);
-
-  return (
-    <span className={className} role={badgeRole} {...props}>
-      {children}
-    </span>
-  );
-}

package/src/components/Button.css

@@ -1,103 +0,0 @@
-.ds-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-xs);
-  font-size: var(--font-size-p1);
-  font-weight: 400;
-  font-family: inherit;
-  line-height: 1;
-  border: none;
-  cursor: pointer;
-  transition: background-color var(--transition-normal),
-              border-color var(--transition-normal),
-              opacity var(--transition-normal);
-  white-space: nowrap;
-  text-decoration: none;
-}
-
-.ds-button:disabled,
-.ds-button[aria-disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.ds-button__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Variants */
-.ds-button--primary {
-  color: var(--color-white);
-  background-color: var(--color-accent);
-}
-
-.ds-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(--color-accent-hover);
-}
-
-.ds-button--secondary {
-  color: var(--color-txt-icon-1);
-  background-color: transparent;
-  border: 1px solid var(--color-border);
-}
-
-.ds-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(--color-item-bg-hover);
-  border-color: var(--color-border-hover);
-}
-
-.ds-button--ghost {
-  color: var(--color-txt-icon-2);
-  background-color: transparent;
-}
-
-.ds-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
-  background-color: var(--color-item-bg-hover);
-  color: var(--color-txt-icon-1);
-}
-
-/* Sizes */
-.ds-button--xs {
-  height: var(--height-xs);
-  padding: 0 calc(var(--height-xs) / 2);
-  font-size: var(--font-size-p3);
-  border-radius: var(--radius-xs);
-}
-
-.ds-button--s {
-  height: var(--height-s);
-  padding: 0 calc(var(--height-s) / 2);
-  font-size: var(--font-size-p2);
-  border-radius: var(--radius-xs);
-}
-
-.ds-button--m {
-  height: var(--height-m);
-  padding: 0 calc(var(--height-m) / 2);
-  font-size: var(--font-size-p1);
-  border-radius: var(--radius-s);
-}
-
-.ds-button--l {
-  height: var(--height-l);
-  padding: 0 calc(var(--height-l) / 2);
-  font-size: var(--font-size-h4);
-  border-radius: var(--radius-s);
-  gap: var(--space-s);
-}
-
-/* Full width */
-.ds-button--full {
-  width: 100%;
-}
-
-/* Icon only */
-.ds-button--icon-only {
-  aspect-ratio: 1;
-  padding-left: 0;
-  padding-right: 0;
-}

package/src/components/Button.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import './Button.css';
-
-export function Button({
-  children,
-  variant = 'primary',
-  size = 'm',
-  fullWidth = false,
-  icon,
-  disabled = false,
-  onClick,
-  type = 'button',
-  href,
-  'aria-label': ariaLabel,
-  ...props
-}) {
-  const isIconOnly = icon && !children;
-
-  const className = [
-    'ds-button',
-    `ds-button--${variant}`,
-    `ds-button--${size}`,
-    fullWidth && 'ds-button--full',
-    isIconOnly && 'ds-button--icon-only',
-  ].filter(Boolean).join(' ');
-
-  const content = (
-    <>
-      {icon && !isIconOnly && <span className="ds-button__icon" aria-hidden="true">{icon}</span>}
-      {children}
-      {isIconOnly && <span className="ds-button__icon" aria-hidden="true">{icon}</span>}
-    </>
-  );
-
-  // Render as link if href is provided
-  if (href) {
-    const handleClick = (e) => {
-      if (disabled) {
-        e.preventDefault();
-        return;
-      }
-
-      // При Cmd/Ctrl+Click или Middle Click — пусть браузер откроет новую вкладку
-      if (e.metaKey || e.ctrlKey || e.button === 1) {
-        return;
-      }
-
-      // Обычный клик — preventDefault и вызов onClick
-      e.preventDefault();
-      onClick?.(e);
-    };
-
-    return (
-      <a
-        className={className}
-        href={disabled ? undefined : href}
-        onClick={handleClick}
-        aria-label={ariaLabel}
-        aria-disabled={disabled ? 'true' : undefined}
-        {...props}
-      >
-        {content}
-      </a>
-    );
-  }
-
-  // Render as button (default)
-  return (
-    <button
-      type={type}
-      className={className}
-      disabled={disabled}
-      onClick={onClick}
-      aria-label={ariaLabel}
-      {...props}
-    >
-      {content}
-    </button>
-  );
-}

package/src/components/Card.css

@@ -1,46 +0,0 @@
-.ds-card {
-  display: flex;
-  flex-direction: column;
-  background-color: transparent;
-  border-radius: var(--radius-s);
-  border: 1px solid var(--color-border);
-  transition: border-color var(--transition-normal), background-color var(--transition-normal);
-  text-decoration: none;
-  color: inherit;
-}
-
-.ds-card--interactive {
-  cursor: pointer;
-  background-color: var(--color-item-bg);
-  border: none;
-}
-
-.ds-card--interactive:hover:not([aria-disabled="true"]) {
-  background-color: var(--color-item-bg-hover);
-}
-
-.ds-card[aria-disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.ds-card--none {
-  padding: 0;
-  gap: 0;
-}
-
-.ds-card--s {
-  padding: var(--space-s);
-  gap: var(--space-xs);
-}
-
-.ds-card--m {
-  padding: var(--space-m);
-  gap: var(--space-s);
-}
-
-.ds-card--l {
-  padding: var(--space-l);
-  gap: var(--space-m);
-}