@donkit-ai/design-system 0.2.3

package/src/components/CodeAccordion.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import './CodeAccordion.css';
+
+export function CodeAccordion({
+  children,
+  title = 'Code',
+  defaultExpanded = false,
+  ...props
+}) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <div className="ds-code-accordion">
+      <button
+        type="button"
+        className="ds-code-accordion__header"
+        onClick={() => setIsExpanded(!isExpanded)}
+        aria-expanded={isExpanded}
+      >
+        <span className="ds-code-accordion__title">{title}</span>
+        <ChevronDown
+          size={20}
+          strokeWidth={1.5}
+          className={`ds-code-accordion__icon ${isExpanded ? 'ds-code-accordion__icon--expanded' : ''}`}
+        />
+      </button>
+      {isExpanded && (
+        <pre className="ds-code-accordion__content" {...props}>
+          <code>{children}</code>
+        </pre>
+      )}
+    </div>
+  );
+}

package/src/components/Input.css

@@ -0,0 +1,140 @@
+.ds-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.ds-input-wrapper--full {
+  width: 100%;
+}
+
+.ds-input-wrapper--disabled {
+  opacity: 0.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);
+}
+
+/* Sizes */
+.ds-input--small {
+  height: calc(20px + var(--space-xs) * 2);
+  padding: 0 var(--space-s);
+  font-size: var(--font-size-p2);
+  border-radius: var(--radius-xs);
+}
+
+.ds-input--medium {
+  height: calc(24px + var(--space-s) * 2);
+  padding: 0 var(--space-s);
+  font-size: var(--font-size-p1);
+  border-radius: var(--radius-s);
+}
+
+.ds-input--with-icon.ds-input--small {
+  padding-left: calc(var(--space-s) + 20px + var(--space-xs));
+}
+
+.ds-input--with-icon.ds-input--medium {
+  padding-left: calc(var(--space-s) + 24px + var(--space-xs));
+}
+
+.ds-input--with-icon-right.ds-input--small {
+  padding-right: calc(var(--space-s) + 20px + var(--space-xs));
+}
+
+.ds-input--with-icon-right.ds-input--medium {
+  padding-right: calc(var(--space-s) + 24px + var(--space-xs));
+}
+
+.ds-input-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  color: var(--color-txt-icon-2);
+  pointer-events: none;
+}
+
+.ds-input-icon--small {
+  left: var(--space-xs);
+}
+
+.ds-input-icon--medium {
+  left: var(--space-s);
+}
+
+.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--small {
+  right: var(--space-xs);
+}
+
+.ds-input-icon-right--medium {
+  right: var(--space-s);
+}
+
+.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);
+}

package/src/components/Input.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import './Input.css';
+
+export function Input({
+  label,
+  error,
+  hint,
+  fullWidth = true,
+  icon,
+  iconRight,
+  onIconRightClick,
+  size = 'medium',
+  disabled,
+  id,
+  ...props
+}) {
+  const inputId = id || `input-${React.useId()}`;
+  const hintId = hint ? `${inputId}-hint` : undefined;
+  const errorId = error ? `${inputId}-error` : undefined;
+  const describedBy = errorId || hintId;
+
+  return (
+    <div className={`ds-input-wrapper ${fullWidth ? 'ds-input-wrapper--full' : ''} ${disabled ? 'ds-input-wrapper--disabled' : ''}`}>
+      {label && (
+        <label className="ds-input-label" htmlFor={inputId}>
+          {label}
+        </label>
+      )}
+      <div className="ds-input-container">
+        {icon && <span className={`ds-input-icon ds-input-icon--${size}`} aria-hidden="true">{icon}</span>}
+        <input
+          id={inputId}
+          className={`ds-input ds-input--${size} ${icon ? 'ds-input--with-icon' : ''} ${iconRight ? 'ds-input--with-icon-right' : ''} ${error ? 'ds-input--error' : ''}`}
+          disabled={disabled}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={describedBy}
+          {...props}
+        />
+        {iconRight && (
+          <button
+            type="button"
+            className={`ds-input-icon-right ds-input-icon-right--${size}`}
+            onClick={onIconRightClick}
+            tabIndex={-1}
+            aria-label="Toggle visibility"
+          >
+            {iconRight}
+          </button>
+        )}
+      </div>
+      {hint && !error && <span id={hintId} className="ds-input-hint">{hint}</span>}
+      {error && <span id={errorId} className="ds-input-error" role="alert">{error}</span>}
+    </div>
+  );
+}

package/src/components/Link.css

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

package/src/components/Link.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import './Link.css';
+
+export function Link({ href, children, onClick, target, rel, ...props }) {
+  // Add security attributes for external links
+  const isExternal = target === '_blank';
+  const secureRel = isExternal ? (rel ? `${rel} noopener noreferrer` : 'noopener noreferrer') : rel;
+
+  return (
+    <a
+      href={href}
+      className="ds-link"
+      onClick={onClick}
+      target={target}
+      rel={secureRel}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}

package/src/components/Modal.css

@@ -0,0 +1,66 @@
+.ds-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--color-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: var(--space-m);
+}
+
+.ds-modal {
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-s);
+  max-height: 90vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.ds-modal--small {
+  width: 100%;
+  max-width: 400px;
+}
+
+.ds-modal--medium {
+  width: 100%;
+  max-width: 600px;
+}
+
+.ds-modal--large {
+  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-s);
+  flex: 1;
+  overflow-y: auto;
+}
+
+.ds-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--space-s);
+  padding: var(--space-l);
+}

package/src/components/Modal.jsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useRef } from 'react';
+import { X } from 'lucide-react';
+import { Button } from './Button';
+import './Modal.css';
+
+export function Modal({
+  children,
+  title,
+  onClose,
+  size = 'medium',
+  ...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={20} 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/Select.css

@@ -0,0 +1,150 @@
+.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: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--small {
+  height: calc(20px + var(--space-xs) * 2);
+  padding: 0 var(--space-s);
+  font-size: var(--font-size-p2);
+  border-radius: var(--radius-xs);
+}
+
+.ds-select-trigger--medium {
+  height: calc(24px + var(--space-s) * 2);
+  padding: 0 var(--space-s);
+  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--small {
+  border-radius: var(--radius-xs);
+}
+
+.ds-select-dropdown--medium {
+  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;
+}
+
+.ds-select-option--small {
+  height: calc(20px + var(--space-xs) * 2);
+  padding: 0 var(--space-s);
+  font-size: var(--font-size-p2);
+}
+
+.ds-select-option--medium {
+  height: calc(24px + var(--space-s) * 2);
+  padding: 0 var(--space-s);
+  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

@@ -0,0 +1,117 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { ChevronDown } from 'lucide-react';
+import './Select.css';
+
+export function Select({
+  label,
+  value,
+  onChange,
+  options = [],
+  placeholder = 'Select option',
+  error,
+  fullWidth = true,
+  size = 'medium',
+  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 === 'small' ? 20 : 24;
+
+  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>
+  );
+}