@donkit-ai/design-system 0.3.5 → 0.4.2

package/src/components/Modal.css

@@ -1,70 +0,0 @@
-.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);
-}

package/src/components/Modal.jsx

@@ -1,72 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { X } from 'lucide-react';
-import { iconSizes } from '../styles/iconSizes';
-import { Button } from './Button';
-import './Modal.css';
-
-export function Modal({
-  children,
-  title,
-  onClose,
-  size = 'm',
-  ...props
-}) {
-  const modalRef = useRef(null);
-  const titleId = React.useId();
-
-  useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === 'Escape') onClose?.();
-    };
-    const handleClickOutside = (e) => {
-      if (modalRef.current && !modalRef.current.contains(e.target)) {
-        onClose?.();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('keydown', handleEscape);
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [onClose]);
-
-  // Separate ModalFooter from other children
-  const childrenArray = React.Children.toArray(children);
-  const footer = childrenArray.find(child => child?.type === ModalFooter);
-  const bodyContent = childrenArray.filter(child => child?.type !== ModalFooter);
-
-  return (
-    <div className="ds-modal-overlay" {...props}>
-      <div
-        className={`ds-modal ds-modal--${size}`}
-        ref={modalRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? titleId : undefined}
-      >
-        {(title || onClose) && (
-          <div className="ds-modal__header">
-            {title && <h3 id={titleId} className="ds-modal__title">{title}</h3>}
-            {onClose && (
-              <Button
-                variant="ghost"
-                size="small"
-                icon={<X size={iconSizes.s} strokeWidth={1.5} />}
-                onClick={onClose}
-                aria-label="Close modal"
-              />
-            )}
-          </div>
-        )}
-        <div className="ds-modal__body">{bodyContent}</div>
-        {footer}
-      </div>
-    </div>
-  );
-}
-
-export function ModalFooter({ children }) {
-  return <div className="ds-modal__footer">{children}</div>;
-}

package/src/components/Radio.css

@@ -1,115 +0,0 @@
-.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

@@ -1,42 +0,0 @@
-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

@@ -1,167 +0,0 @@
-.ds-select-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-}
-
-.ds-select-wrapper--full {
-  width: 100%;
-}
-
-.ds-select-wrapper--disabled {
-  opacity: 0.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);
-}
-
-/* Sizes */
-.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(0deg);
-}
-
-.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;
-}
-
-/* Dropdown direction */
-.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);
-}

package/src/components/Select.jsx

@@ -1,118 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { iconSizes } from '../styles/iconSizes';
-import './Select.css';
-
-export function Select({
-  label,
-  value,
-  onChange,
-  options = [],
-  placeholder = 'Select option',
-  error,
-  fullWidth = true,
-  size = 'm',
-  disabled = false,
-  id,
-  ...props
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [dropdownDirection, setDropdownDirection] = useState('down');
-  const selectRef = useRef(null);
-  const dropdownRef = useRef(null);
-  const selectId = id || `select-${React.useId()}`;
-  const labelId = `${selectId}-label`;
-  const errorId = error ? `${selectId}-error` : undefined;
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (selectRef.current && !selectRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  useEffect(() => {
-    if (isOpen && selectRef.current) {
-      const triggerRect = selectRef.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const spaceBelow = viewportHeight - triggerRect.bottom;
-      const spaceAbove = triggerRect.top;
-      const dropdownHeight = 300; // max-height of dropdown
-
-      // Open upward if not enough space below and more space above
-      if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
-        setDropdownDirection('up');
-      } else {
-        setDropdownDirection('down');
-      }
-    }
-  }, [isOpen]);
-
-  const selectedOption = options.find(opt => opt.value === value);
-  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' : ''}`}>
-      {label && (
-        <label id={labelId} className="ds-select-label">
-          {label}
-        </label>
-      )}
-      <div className="ds-select-container" ref={selectRef}>
-        <button
-          type="button"
-          id={selectId}
-          role="combobox"
-          aria-haspopup="listbox"
-          aria-expanded={isOpen}
-          aria-labelledby={label ? labelId : undefined}
-          aria-invalid={error ? 'true' : 'false'}
-          aria-describedby={errorId}
-          className={`ds-select-trigger ds-select-trigger--${size} ${error ? 'ds-select-trigger--error' : ''}`}
-          onClick={() => !disabled && setIsOpen(!isOpen)}
-          disabled={disabled}
-          {...props}
-        >
-          <span className={selectedOption ? '' : 'ds-select-placeholder'}>
-            {selectedOption?.label || placeholder}
-          </span>
-          <ChevronDown
-            size={iconSize}
-            strokeWidth={1.5}
-            className={`ds-select-icon ${isOpen && dropdownDirection === 'down' ? 'ds-select-icon--open' : ''} ${isOpen && dropdownDirection === 'up' ? 'ds-select-icon--up' : ''}`}
-            aria-hidden="true"
-          />
-        </button>
-        {isOpen && (
-          <div
-            ref={dropdownRef}
-            role="listbox"
-            aria-labelledby={label ? labelId : undefined}
-            className={`ds-select-dropdown ds-select-dropdown--${size} ds-select-dropdown--${dropdownDirection}`}
-          >
-            {options.map((option) => (
-              <button
-                key={option.value}
-                type="button"
-                role="option"
-                aria-selected={value === option.value}
-                className={`ds-select-option ds-select-option--${size} ${value === option.value ? 'ds-select-option--selected' : ''}`}
-                onClick={() => {
-                  onChange?.(option.value);
-                  setIsOpen(false);
-                }}
-              >
-                {option.label}
-              </button>
-            ))}
-          </div>
-        )}
-      </div>
-      {error && <span id={errorId} className="ds-select-error" role="alert">{error}</span>}
-    </div>
-  );
-}