@donkit-ai/design-system 0.2.18 → 0.3.0

package/src/components/Checkbox.css

@@ -58,31 +58,31 @@
 }
 
 /* Small */
-.ds-checkbox--small .ds-checkbox__box {
+.ds-checkbox--s .ds-checkbox__box {
   width: var(--icon-s);
   height: var(--icon-s);
 }
 
-.ds-checkbox--small .ds-checkbox__label {
+.ds-checkbox--s .ds-checkbox__label {
   font-size: var(--font-size-p2);
 }
 
 /* Medium */
-.ds-checkbox--medium .ds-checkbox__box {
+.ds-checkbox--m .ds-checkbox__box {
   width: var(--icon-m);
   height: var(--icon-m);
 }
 
-.ds-checkbox--medium .ds-checkbox__label {
+.ds-checkbox--m .ds-checkbox__label {
   font-size: var(--font-size-p1);
 }
 
 /* Large */
-.ds-checkbox--large .ds-checkbox__box {
+.ds-checkbox--l .ds-checkbox__box {
   width: var(--icon-l);
   height: var(--icon-l);
 }
 
-.ds-checkbox--large .ds-checkbox__label {
+.ds-checkbox--l .ds-checkbox__label {
   font-size: var(--font-size-p1);
 }

package/src/components/Checkbox.jsx

@@ -5,7 +5,7 @@ import './Checkbox.css';
 export function Checkbox({
   checked = false,
   onChange,
-  size = 'medium',
+  size = 'm',
   disabled = false,
   label,
   id,

package/src/components/Input.css

@@ -58,33 +58,48 @@
 }
 
 /* Sizes */
-.ds-input--small {
+.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--medium {
+.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--small {
+.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--medium {
+.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--small {
+.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--medium {
+.ds-input--with-icon-right.ds-input--m {
   padding-right: calc(var(--height-m) / 4 + 24px + var(--height-m) / 4);
 }
 
@@ -96,11 +111,15 @@
   pointer-events: none;
 }
 
-.ds-input-icon--small {
+.ds-input-icon--xs {
+  left: 6px;
+}
+
+.ds-input-icon--s {
   left: 8px;
 }
 
-.ds-input-icon--medium {
+.ds-input-icon--m {
   left: 11px;
 }
 
@@ -121,11 +140,15 @@
   color: var(--color-txt-icon-1);
 }
 
-.ds-input-icon-right--small {
+.ds-input-icon-right--xs {
+  right: 6px;
+}
+
+.ds-input-icon-right--s {
   right: 8px;
 }
 
-.ds-input-icon-right--medium {
+.ds-input-icon-right--m {
   right: 11px;
 }
 

package/src/components/Input.jsx

@@ -9,7 +9,7 @@ export function Input({
   icon,
   iconRight,
   onIconRightClick,
-  size = 'medium',
+  size = 'm',
   disabled,
   id,
   ...props

package/src/components/Modal.css

@@ -22,17 +22,17 @@
   margin: auto 0;
 }
 
-.ds-modal--small {
+.ds-modal--s {
   width: 100%;
   max-width: 400px;
 }
 
-.ds-modal--medium {
+.ds-modal--m {
   width: 100%;
   max-width: 600px;
 }
 
-.ds-modal--large {
+.ds-modal--l {
   width: 100%;
   max-width: 900px;
 }

package/src/components/Modal.jsx

@@ -8,7 +8,7 @@ export function Modal({
   children,
   title,
   onClose,
-  size = 'medium',
+  size = 'm',
   ...props
 }) {
   const modalRef = useRef(null);

package/src/components/Radio.css

@@ -0,0 +1,115 @@
+.ds-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-s);
+  cursor: pointer;
+}
+
+.ds-radio--disabled {
+  opacity: 0.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);
+  user-select: none;
+}
+
+/* Extra Small */
+.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);
+}
+
+/* Small */
+.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);
+}
+
+/* Medium */
+.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);
+}
+
+/* Large */
+.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/src/components/Radio.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import './Radio.css';
+
+export function Radio({
+  checked = false,
+  onChange,
+  size = 'm',
+  disabled = false,
+  label,
+  name,
+  value,
+  id,
+  ...props
+}) {
+  const radioId = id || `radio-${React.useId()}`;
+
+  const className = [
+    'ds-radio',
+    `ds-radio--${size}`,
+    disabled && 'ds-radio--disabled',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <label className={className} htmlFor={radioId}>
+      <input
+        type="radio"
+        id={radioId}
+        className="ds-radio__input"
+        checked={checked}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled}
+        name={name}
+        value={value}
+        {...props}
+      />
+      <span className="ds-radio__circle">
+        <span className="ds-radio__dot" />
+      </span>
+      {label && <span className="ds-radio__label">{label}</span>}
+    </label>
+  );
+}

package/src/components/Select.css

@@ -60,14 +60,21 @@
 }
 
 /* Sizes */
-.ds-select-trigger--small {
+.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--medium {
+.ds-select-trigger--m {
   height: var(--height-m);
   padding: 0 calc(var(--height-m) / 4);
   font-size: var(--font-size-p1);
@@ -112,11 +119,11 @@
   bottom: calc(100% + 4px);
 }
 
-.ds-select-dropdown--small {
+.ds-select-dropdown--s {
   border-radius: var(--radius-xs);
 }
 
-.ds-select-dropdown--medium {
+.ds-select-dropdown--m {
   border-radius: var(--radius-s);
 }
 
@@ -134,13 +141,13 @@
   word-wrap: break-word;
 }
 
-.ds-select-option--small {
+.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--medium {
+.ds-select-option--m {
   min-height: var(--height-m);
   padding: var(--space-xs) calc(var(--height-m) / 4);
   font-size: var(--font-size-p1);

package/src/components/Select.jsx

@@ -11,7 +11,7 @@ export function Select({
   placeholder = 'Select option',
   error,
   fullWidth = true,
-  size = 'medium',
+  size = 'm',
   disabled = false,
   id,
   ...props
@@ -53,7 +53,7 @@ export function Select({
   }, [isOpen]);
 
   const selectedOption = options.find(opt => opt.value === value);
-  const iconSize = size === 'small' ? iconSizes.s : iconSizes.m;
+  const iconSize = size === 'xs' ? iconSizes.xs : size === 'small' ? iconSizes.s : iconSizes.m;
 
   return (
     <div className={`ds-select-wrapper ${fullWidth ? 'ds-select-wrapper--full' : ''} ${disabled ? 'ds-select-wrapper--disabled' : ''}`}>

package/src/components/Stepper.css

@@ -98,33 +98,49 @@
 
 /* Sizes */
 
+/* Extra Small */
+.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);
+}
+
 /* Small */
-.ds-stepper--small {
+.ds-stepper--s {
   height: var(--height-s);
 }
 
-.ds-stepper--small .ds-stepper-button {
+.ds-stepper--s .ds-stepper-button {
   width: var(--height-s);
   padding: 0;
 }
 
-.ds-stepper--small .ds-stepper-input {
+.ds-stepper--s .ds-stepper-input {
   font-size: var(--font-size-p2);
   letter-spacing: var(--letter-spacing-p2);
   padding: 0 var(--space-xs);
 }
 
 /* Medium */
-.ds-stepper--medium {
+.ds-stepper--m {
   height: var(--height-m);
 }
 
-.ds-stepper--medium .ds-stepper-button {
+.ds-stepper--m .ds-stepper-button {
   width: var(--height-m);
   padding: 0;
 }
 
-.ds-stepper--medium .ds-stepper-input {
+.ds-stepper--m .ds-stepper-input {
   font-size: var(--font-size-p1);
   letter-spacing: var(--letter-spacing-p1);
   padding: 0 var(--space-s);

package/src/components/Stepper.jsx

@@ -10,7 +10,7 @@ export function Stepper({
   min = 0,
   max = 100,
   step = 1,
-  size = 'medium',
+  size = 'm',
   disabled = false,
   hint,
   error,
@@ -57,7 +57,7 @@ export function Stepper({
     disabled && 'ds-stepper--disabled',
   ].filter(Boolean).join(' ');
 
-  const iconSize = size === 'small' ? iconSizes.s : iconSizes.m;
+  const iconSize = size === 'xs' ? iconSizes.xs : size === 'small' ? iconSizes.s : iconSizes.m;
 
   return (
     <div className={className}>

package/src/components/Tabs.css

@@ -37,21 +37,28 @@
 }
 
 /* Sizes */
-.ds-tab--small {
+.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--medium {
+.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--large {
+.ds-tab--l {
   height: var(--height-l);
   padding: 0 calc(var(--height-l) / 2);
   font-size: var(--font-size-p1);

package/src/components/Tabs.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './Tabs.css';
 
-export function Tabs({ children, size = 'medium', variant = 'ghost', ...props }) {
+export function Tabs({ children, size = 'm', variant = 'ghost', ...props }) {
   return (
     <div className="ds-tabs" role="tablist" {...props}>
       {React.Children.map(children, (child) => {
@@ -14,7 +14,7 @@ export function Tabs({ children, size = 'medium', variant = 'ghost', ...props })
   );
 }
 
-export function Tab({ children, selected = false, onClick, size = 'medium', variant = 'ghost', disabled = false, icon, href, ...props }) {
+export function Tab({ children, selected = false, onClick, size = 'm', variant = 'ghost', disabled = false, icon, href, ...props }) {
   const isIconOnly = icon && !children;
 
   const className = [

package/src/components/Textarea.css

@@ -87,13 +87,19 @@
 }
 
 /* Sizes */
-.ds-textarea--small {
+.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--medium {
+.ds-textarea--m {
   padding: var(--space-s);
   font-size: var(--font-size-p1);
   border-radius: var(--radius-s);

package/src/components/Textarea.jsx

@@ -6,7 +6,7 @@ export function Textarea({
   error,
   hint,
   fullWidth = true,
-  size = 'medium',
+  size = 'm',
   disabled,
   id,
   resize = true,

package/src/components/Toggle.css

@@ -70,64 +70,64 @@
 }
 
 /* Small */
-.ds-toggle--small .ds-toggle__track {
+.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--small .ds-toggle__thumb {
+.ds-toggle--s .ds-toggle__thumb {
   width: calc(var(--icon-s) - 4px);
   height: calc(var(--icon-s) - 4px);
 }
 
-.ds-toggle--small .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
+.ds-toggle--s .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
   transform: translateX(calc(var(--icon-s) * 0.75));
 }
 
-.ds-toggle--small .ds-toggle__label {
+.ds-toggle--s .ds-toggle__label {
   font-size: var(--font-size-p2);
 }
 
 /* Medium */
-.ds-toggle--medium .ds-toggle__track {
+.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--medium .ds-toggle__thumb {
+.ds-toggle--m .ds-toggle__thumb {
   width: calc(var(--icon-m) - 4px);
   height: calc(var(--icon-m) - 4px);
 }
 
-.ds-toggle--medium .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
+.ds-toggle--m .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
   transform: translateX(calc(var(--icon-m) * 0.75));
 }
 
-.ds-toggle--medium .ds-toggle__label {
+.ds-toggle--m .ds-toggle__label {
   font-size: var(--font-size-p1);
 }
 
 /* Large */
-.ds-toggle--large .ds-toggle__track {
+.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--large .ds-toggle__thumb {
+.ds-toggle--l .ds-toggle__thumb {
   width: calc(var(--icon-l) - 6px);
   height: calc(var(--icon-l) - 6px);
 }
 
-.ds-toggle--large .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
+.ds-toggle--l .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
   transform: translateX(calc(var(--icon-l) * 0.75));
 }
 
-.ds-toggle--large .ds-toggle__label {
+.ds-toggle--l .ds-toggle__label {
   font-size: var(--font-size-p1);
 }

package/src/components/Toggle.jsx

@@ -4,7 +4,7 @@ import './Toggle.css';
 export function Toggle({
   checked = false,
   onChange,
-  size = 'medium',
+  size = 'm',
   disabled = false,
   label,
   id,

package/src/index.js

@@ -21,3 +21,4 @@ export { CodeAccordion } from './components/CodeAccordion';
 export { Tooltip } from './components/Tooltip';
 export { Toggle } from './components/Toggle';
 export { Checkbox } from './components/Checkbox';
+export { Radio } from './components/Radio';

package/src/styles/tokens.css

@@ -171,6 +171,7 @@
     /* =====================================
      * 5) Component heights
      * ===================================*/
+    --height-xs: 24px;
     --height-s: 32px;
     --height-m: 44px;
     --height-l: 56px;