@donkit-ai/design-system 0.2.3

package/src/components/Stepper.css

@@ -0,0 +1,163 @@
+/* Stepper Component */
+
+.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: 0.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;
+}
+
+/* Remove spinner arrows */
+.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;
+}
+
+/* Sizes */
+
+/* Small */
+.ds-stepper--small .ds-stepper-button {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+
+.ds-stepper--small .ds-stepper-input {
+  height: 32px;
+  font-size: var(--font-size-p2);
+  letter-spacing: var(--letter-spacing-p2);
+  padding: 0 var(--space-xs);
+}
+
+/* Medium */
+.ds-stepper--medium .ds-stepper-button {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+
+.ds-stepper--medium .ds-stepper-input {
+  height: 40px;
+  font-size: var(--font-size-p1);
+  letter-spacing: var(--letter-spacing-p1);
+  padding: 0 var(--space-s);
+}
+
+/* Hint & Error */
+.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);
+}
+
+/* Error state */
+.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);
+}
+
+/* Disabled state */
+.ds-stepper-wrapper--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ds-stepper-wrapper--disabled * {
+  cursor: not-allowed;
+}

package/src/components/Stepper.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Minus, Plus } from 'lucide-react';
+import './Stepper.css';
+
+export function Stepper({
+  label,
+  value = 0,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  size = 'medium',
+  disabled = false,
+  hint,
+  error,
+  ...props
+}) {
+  const handleIncrement = () => {
+    if (disabled) return;
+    const newValue = Math.min(Number(value) + step, max);
+    onChange?.(newValue);
+  };
+
+  const handleDecrement = () => {
+    if (disabled) return;
+    const newValue = Math.max(Number(value) - step, min);
+    onChange?.(newValue);
+  };
+
+  const handleInputChange = (e) => {
+    if (disabled) return;
+    const newValue = e.target.value;
+
+    // Allow empty string for user to clear and type
+    if (newValue === '') {
+      onChange?.(min);
+      return;
+    }
+
+    const numValue = Number(newValue);
+    if (!isNaN(numValue)) {
+      const clampedValue = Math.min(Math.max(numValue, min), max);
+      onChange?.(clampedValue);
+    }
+  };
+
+  const className = [
+    'ds-stepper-wrapper',
+    disabled && 'ds-stepper-wrapper--disabled',
+    error && 'ds-stepper-wrapper--error',
+  ].filter(Boolean).join(' ');
+
+  const stepperClassName = [
+    'ds-stepper',
+    `ds-stepper--${size}`,
+    disabled && 'ds-stepper--disabled',
+  ].filter(Boolean).join(' ');
+
+  const iconSize = size === 'small' ? 16 : 20;
+
+  return (
+    <div className={className}>
+      {label && <label className="ds-stepper-label">{label}</label>}
+
+      <div className={stepperClassName}>
+        <button
+          type="button"
+          className="ds-stepper-button ds-stepper-button--minus"
+          onClick={handleDecrement}
+          disabled={disabled || value <= min}
+          aria-label="Decrease"
+        >
+          <Minus size={iconSize} strokeWidth={1.5} />
+        </button>
+
+        <input
+          type="number"
+          className="ds-stepper-input"
+          value={value}
+          onChange={handleInputChange}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          {...props}
+        />
+
+        <button
+          type="button"
+          className="ds-stepper-button ds-stepper-button--plus"
+          onClick={handleIncrement}
+          disabled={disabled || value >= max}
+          aria-label="Increase"
+        >
+          <Plus size={iconSize} strokeWidth={1.5} />
+        </button>
+      </div>
+
+      {hint && !error && <div className="ds-stepper-hint">{hint}</div>}
+      {error && <div className="ds-stepper-error">{error}</div>}
+    </div>
+  );
+}

package/src/components/Tabs.css

@@ -0,0 +1,92 @@
+.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;
+}
+
+/* Variants */
+.ds-tab--secondary {
+  border: 1px solid var(--color-border);
+}
+
+.ds-tab--secondary:hover:not(.ds-tab--selected):not(:disabled) {
+  background-color: var(--color-item-bg-hover);
+  border-color: var(--color-border-hover);
+}
+
+.ds-tab--secondary.ds-tab--selected {
+  background-color: var(--color-item-bg-selected);
+  border-color: var(--color-border-selected);
+}
+
+.ds-tab--ghost {
+  border: none;
+  color: var(--color-txt-icon-2);
+}
+
+.ds-tab--ghost:hover:not(.ds-tab--selected):not(:disabled) {
+  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);
+}
+
+/* Sizes */
+.ds-tab--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-tab--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-tab--large {
+  height: calc(28px + var(--space-m) * 2);
+  padding: 0 var(--space-m);
+  font-size: var(--font-size-p1);
+  border-radius: var(--radius-s);
+  gap: var(--space-s);
+}
+
+.ds-tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ds-tab-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.ds-tab--icon-only {
+  aspect-ratio: 1;
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}

package/src/components/Tabs.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import './Tabs.css';
+
+export function Tabs({ children, size = 'medium', variant = 'secondary', ...props }) {
+  return (
+    <div className="ds-tabs" role="tablist" {...props}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { size, variant });
+        }
+        return child;
+      })}
+    </div>
+  );
+}
+
+export function Tab({ children, selected = false, onClick, size = 'medium', variant = 'secondary', disabled = false, icon, ...props }) {
+  const isIconOnly = icon && !children;
+
+  const className = [
+    'ds-tab',
+    `ds-tab--${size}`,
+    `ds-tab--${variant}`,
+    selected && 'ds-tab--selected',
+    isIconOnly && 'ds-tab--icon-only',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <button
+      role="tab"
+      aria-selected={selected}
+      className={className}
+      onClick={onClick}
+      disabled={disabled}
+      {...props}
+    >
+      {icon && <span className="ds-tab-icon">{icon}</span>}
+      {children}
+    </button>
+  );
+}

package/src/components/Textarea.css

@@ -0,0 +1,80 @@
+.ds-textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.ds-textarea-wrapper--full {
+  width: 100%;
+}
+
+.ds-textarea-wrapper--disabled {
+  opacity: 0.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;
+}
+
+.ds-textarea::placeholder {
+  color: var(--color-txt-icon-2);
+}
+
+.ds-textarea:hover:not(:disabled) {
+  border-color: var(--color-border-hover);
+}
+
+.ds-textarea:focus,
+.ds-textarea:active {
+  outline: none;
+  border-color: var(--color-border-hover);
+}
+
+.ds-textarea:disabled {
+  cursor: not-allowed;
+}
+
+.ds-textarea--error {
+  border-color: var(--color-error);
+}
+
+.ds-textarea--no-resize {
+  resize: none;
+}
+
+/* Sizes */
+.ds-textarea--small {
+  padding: var(--space-xs) var(--space-s);
+  font-size: var(--font-size-p2);
+  border-radius: var(--radius-xs);
+}
+
+.ds-textarea--medium {
+  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);
+}

package/src/components/Textarea.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import './Textarea.css';
+
+export function Textarea({
+  label,
+  error,
+  hint,
+  fullWidth = true,
+  size = 'medium',
+  disabled,
+  id,
+  resize = true,
+  rows = 3,
+  ...props
+}) {
+  const textareaId = id || `textarea-${React.useId()}`;
+  const hintId = hint ? `${textareaId}-hint` : undefined;
+  const errorId = error ? `${textareaId}-error` : undefined;
+  const describedBy = errorId || hintId;
+
+  return (
+    <div className={`ds-textarea-wrapper ${fullWidth ? 'ds-textarea-wrapper--full' : ''} ${disabled ? 'ds-textarea-wrapper--disabled' : ''}`}>
+      {label && (
+        <label className="ds-textarea-label" htmlFor={textareaId}>
+          {label}
+        </label>
+      )}
+      <textarea
+        id={textareaId}
+        className={`ds-textarea ds-textarea--${size} ${error ? 'ds-textarea--error' : ''} ${!resize ? 'ds-textarea--no-resize' : ''}`}
+        disabled={disabled}
+        aria-invalid={error ? 'true' : 'false'}
+        aria-describedby={describedBy}
+        rows={rows}
+        {...props}
+      />
+      {hint && !error && <span id={hintId} className="ds-textarea-hint">{hint}</span>}
+      {error && <span id={errorId} className="ds-textarea-error" role="alert">{error}</span>}
+    </div>
+  );
+}

package/src/components/Typography.css

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

package/src/components/Typography.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import './Typography.css';
+
+export function H1({ children, ...props }) {
+  return <h1 className="ds-h1" {...props}>{children}</h1>;
+}
+
+export function H2({ children, ...props }) {
+  return <h2 className="ds-h2" {...props}>{children}</h2>;
+}
+
+export function H3({ children, ...props }) {
+  return <h3 className="ds-h3" {...props}>{children}</h3>;
+}
+
+export function H4({ children, ...props }) {
+  return <h4 className="ds-h4" {...props}>{children}</h4>;
+}
+
+export function P1({ children, secondary = false, ...props }) {
+  return (
+    <p className={`ds-p1 ${secondary ? 'ds-p1--secondary' : ''}`} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function P2({ children, secondary = false, ...props }) {
+  return (
+    <p className={`ds-p2 ${secondary ? 'ds-p2--secondary' : ''}`} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function P3({ children, secondary = false, ...props }) {
+  return (
+    <p className={`ds-p3 ${secondary ? 'ds-p3--secondary' : ''}`} {...props}>
+      {children}
+    </p>
+  );
+}

package/src/index.js

@@ -0,0 +1,19 @@
+// Styles
+export * from './styles/tokens.css';
+
+// Components
+export { Button } from './components/Button';
+export { Input } from './components/Input';
+export { Textarea } from './components/Textarea';
+export { Select } from './components/Select';
+export { Stepper } from './components/Stepper';
+export { Card } from './components/Card';
+export { H1, H2, H3, H4, P1, P2, P3 } from './components/Typography';
+export { Badge } from './components/Badge';
+export { Alert } from './components/Alert';
+export { Modal, ModalFooter } from './components/Modal';
+export { Code } from './components/Code';
+export { Link } from './components/Link';
+export { Tabs, Tab } from './components/Tabs';
+export { Accordion } from './components/Accordion';
+export { CodeAccordion } from './components/CodeAccordion';