@donkit-ai/design-system 0.2.3

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@donkit-ai/design-system",
+  "version": "0.2.3",
+  "description": "Donkit Design System - minimal design tokens and React components",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./tokens.css": "./src/styles/tokens.css",
+    "./components/*": "./src/components/*.jsx"
+  },
+  "files": [
+    "src/components",
+    "src/styles",
+    "src/index.js",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0 <21.0.0",
+    "react-dom": ">=18.0.0 <21.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.445.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/donkit-ai/platform/design/design-system.git"
+  }
+}

package/src/components/Accordion.css

@@ -0,0 +1,43 @@
+.ds-accordion {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-s);
+  overflow: hidden;
+}
+
+.ds-accordion__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--space-m);
+  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 {
+  padding: var(--space-m);
+  border-top: 1px solid var(--color-border);
+}

package/src/components/Accordion.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import './Accordion.css';
+
+export function Accordion({
+  children,
+  title,
+  defaultExpanded = false,
+  ...props
+}) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <div className="ds-accordion" {...props}>
+      <button
+        type="button"
+        className="ds-accordion__header"
+        onClick={() => setIsExpanded(!isExpanded)}
+        aria-expanded={isExpanded}
+      >
+        <span className="ds-accordion__title">{title}</span>
+        <ChevronDown
+          size={20}
+          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

@@ -0,0 +1,98 @@
+.ds-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-s);
+  padding: var(--space-s);
+  border-radius: var(--radius-s);
+  border: 1px solid;
+}
+
+.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-color: var(--color-status-info-bg);
+  border-color: var(--color-status-info);
+  color: var(--color-status-info);
+}
+
+.ds-alert--info .ds-alert__message {
+  color: var(--color-txt-icon-1);
+}
+
+.ds-alert--success {
+  background-color: var(--color-status-success-bg);
+  border-color: var(--color-status-success);
+  color: var(--color-status-success);
+}
+
+.ds-alert--success .ds-alert__message {
+  color: var(--color-txt-icon-1);
+}
+
+.ds-alert--warning {
+  background-color: var(--color-status-warning-bg);
+  border-color: var(--color-status-warning);
+  color: var(--color-status-warning);
+}
+
+.ds-alert--warning .ds-alert__message {
+  color: var(--color-txt-icon-1);
+}
+
+.ds-alert--error {
+  background-color: var(--color-status-error-bg);
+  border-color: var(--color-status-error);
+  color: var(--color-status-error);
+}
+
+.ds-alert--error .ds-alert__message {
+  color: var(--color-txt-icon-1);
+}

package/src/components/Alert.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Info, CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react';
+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={24} 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={24} strokeWidth={1.5} />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/Badge.css

@@ -0,0 +1,57 @@
+.ds-badge {
+  display: inline-flex;
+  align-items: center;
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+/* Sizes */
+.ds-badge--small {
+  padding: 0 4px;
+  font-size: var(--font-size-p3);
+  letter-spacing: var(--letter-spacing-p3);
+  border-radius: var(--radius-xs);
+}
+
+.ds-badge--medium {
+  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);
+  border: 1px solid var(--color-txt-icon-2);
+}
+
+.ds-badge--info {
+  background-color: var(--color-status-info-bg);
+  color: var(--color-status-info);
+  border: 1px solid var(--color-status-info);
+}
+
+.ds-badge--success {
+  background-color: var(--color-status-success-bg);
+  color: var(--color-status-success);
+  border: 1px solid var(--color-status-success);
+}
+
+.ds-badge--warning {
+  background-color: var(--color-status-warning-bg);
+  color: var(--color-status-warning);
+  border: 1px solid var(--color-status-warning);
+}
+
+.ds-badge--error {
+  background-color: var(--color-status-error-bg);
+  color: var(--color-status-error);
+  border: 1px solid var(--color-status-error);
+}
+
+.ds-badge--accent {
+  background-color: var(--color-red-10);
+  color: var(--color-accent);
+  border: 1px solid var(--color-accent);
+}

package/src/components/Badge.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import './Badge.css';
+
+export function Badge({
+  children,
+  variant = 'default',
+  size = 'medium',
+  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

@@ -0,0 +1,94 @@
+.ds-button {
+  display: inline-flex;
+  align-items: 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;
+}
+
+.ds-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.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) {
+  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) {
+  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) {
+  background-color: var(--color-item-bg-hover);
+  color: var(--color-txt-icon-1);
+}
+
+/* Sizes */
+.ds-button--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-button--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-button--large {
+  height: calc(28px + var(--space-m) * 2);
+  padding: 0 var(--space-m);
+  font-size: var(--font-size-h4);
+  border-radius: var(--radius-s);
+  gap: var(--space-s);
+}
+
+/* Full width */
+.ds-button--full {
+  width: 100%;
+  justify-content: center;
+}
+
+/* Icon only */
+.ds-button--icon-only {
+  aspect-ratio: 1;
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}

package/src/components/Button.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import './Button.css';
+
+export function Button({
+  children,
+  variant = 'primary',
+  size = 'medium',
+  fullWidth = false,
+  icon,
+  disabled = false,
+  onClick,
+  type = 'button',
+  '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(' ');
+
+  return (
+    <button
+      type={type}
+      className={className}
+      disabled={disabled}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {icon && !isIconOnly && <span className="ds-button__icon" aria-hidden="true">{icon}</span>}
+      {children}
+      {isIconOnly && <span className="ds-button__icon" aria-hidden="true">{icon}</span>}
+    </button>
+  );
+}

package/src/components/Card.css

@@ -0,0 +1,32 @@
+.ds-card {
+  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);
+}
+
+.ds-card--interactive {
+  cursor: pointer;
+  background-color: var(--color-item-bg);
+}
+
+.ds-card--interactive:hover {
+  border-color: var(--color-border-hover);
+  background-color: var(--color-item-bg-hover);
+}
+
+.ds-card--none {
+  padding: 0;
+}
+
+.ds-card--small {
+  padding: var(--space-s);
+}
+
+.ds-card--medium {
+  padding: var(--space-m);
+}
+
+.ds-card--large {
+  padding: var(--space-l);
+}

package/src/components/Card.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import './Card.css';
+
+export function Card({
+  children,
+  padding = 'medium',
+  variant = 'info',
+  hover = false, // deprecated, use variant="interactive"
+  onClick,
+  ...props
+}) {
+  const cardVariant = hover ? 'interactive' : variant;
+  const isInteractive = cardVariant === 'interactive' || onClick;
+
+  const className = [
+    'ds-card',
+    `ds-card--${padding}`,
+    isInteractive && 'ds-card--interactive',
+  ].filter(Boolean).join(' ');
+
+  const Element = isInteractive && onClick ? 'button' : 'div';
+  const interactiveProps = isInteractive && onClick ? {
+    type: 'button',
+    onClick,
+  } : {};
+
+  return (
+    <Element
+      className={className}
+      role={isInteractive && !onClick ? 'article' : undefined}
+      {...interactiveProps}
+      {...props}
+    >
+      {children}
+    </Element>
+  );
+}

package/src/components/Code.css

@@ -0,0 +1,30 @@
+.ds-code-inline {
+  font-family: 'Fira Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+  font-size: 0.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;
+}

package/src/components/Code.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { CodeAccordion } from './CodeAccordion';
+import './Code.css';
+
+export function Code({ children, block = false, collapsible = false, title = 'Code', defaultExpanded = false, ...props }) {
+  if (block) {
+    if (collapsible) {
+      return (
+        <CodeAccordion title={title} defaultExpanded={defaultExpanded} {...props}>
+          {children}
+        </CodeAccordion>
+      );
+    }
+
+    return (
+      <pre className="ds-code-block" {...props}>
+        <code>{children}</code>
+      </pre>
+    );
+  }
+
+  return (
+    <code className="ds-code-inline" {...props}>
+      {children}
+    </code>
+  );
+}

package/src/components/CodeAccordion.css

@@ -0,0 +1,59 @@
+.ds-code-accordion {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-s);
+  overflow: hidden;
+}
+
+.ds-code-accordion__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--space-xs);
+  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);
+  padding: var(--space-xs);
+  border-top: 1px solid var(--color-border);
+  overflow-x: auto;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.ds-code-accordion__content code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}