@donkit-ai/design-system 0.3.4 → 0.4.2

package/src/components/Card.jsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import './Card.css';
-
-export function Card({
-  children,
-  padding = 'm',
-  variant = 'info',
-  hover = false, // deprecated, use variant="interactive"
-  onClick,
-  href,
-  disabled = false,
-  ...props
-}) {
-  const cardVariant = hover ? 'interactive' : variant;
-  const isInteractive = cardVariant === 'interactive' || onClick || href;
-
-  const className = [
-    'ds-card',
-    `ds-card--${padding}`,
-    isInteractive && 'ds-card--interactive',
-  ].filter(Boolean).join(' ');
-
-  // Render as link if href is provided
-  if (href) {
-    const handleClick = (e) => {
-      if (disabled) {
-        e.preventDefault();
-        return;
-      }
-      // При Cmd/Ctrl+Click или Middle Click — пусть браузер откроет новую вкладку
-      if (e.metaKey || e.ctrlKey || e.button === 1) {
-        return;
-      }
-      // Обычный клик — preventDefault и вызов onClick
-      e.preventDefault();
-      onClick?.(e);
-    };
-
-    return (
-      <a
-        className={className}
-        href={disabled ? undefined : href}
-        onClick={handleClick}
-        aria-disabled={disabled ? 'true' : undefined}
-        {...props}
-      >
-        {children}
-      </a>
-    );
-  }
-
-  // Render as button if interactive with onClick
-  const Element = isInteractive && onClick ? 'button' : 'div';
-  const interactiveProps = isInteractive && onClick ? {
-    type: 'button',
-    onClick,
-    disabled,
-  } : {};
-
-  return (
-    <Element
-      className={className}
-      role={isInteractive && !onClick ? 'article' : undefined}
-      {...interactiveProps}
-      {...props}
-    >
-      {children}
-    </Element>
-  );
-}

package/src/components/Checkbox.css

@@ -1,88 +0,0 @@
-.ds-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-s);
-  cursor: pointer;
-}
-
-.ds-checkbox--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.ds-checkbox__input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.ds-checkbox__box {
-  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: 4px;
-}
-
-.ds-checkbox__input:checked + .ds-checkbox__box {
-  background-color: var(--color-status-success);
-  border-color: var(--color-status-success);
-}
-
-.ds-checkbox__input:not(:checked) + .ds-checkbox__box:hover {
-  border-color: var(--color-border-hover);
-}
-
-.ds-checkbox__icon {
-  color: var(--color-white);
-}
-
-.ds-checkbox__label {
-  font-size: var(--font-size-p1);
-  color: var(--color-txt-icon-1);
-  user-select: none;
-}
-
-/* Extra Small */
-.ds-checkbox--xs .ds-checkbox__box {
-  width: var(--icon-xs);
-  height: var(--icon-xs);
-}
-
-.ds-checkbox--xs .ds-checkbox__label {
-  font-size: var(--font-size-p3);
-}
-
-/* Small */
-.ds-checkbox--s .ds-checkbox__box {
-  width: var(--icon-s);
-  height: var(--icon-s);
-}
-
-.ds-checkbox--s .ds-checkbox__label {
-  font-size: var(--font-size-p2);
-}
-
-/* Medium */
-.ds-checkbox--m .ds-checkbox__box {
-  width: var(--icon-m);
-  height: var(--icon-m);
-}
-
-.ds-checkbox--m .ds-checkbox__label {
-  font-size: var(--font-size-p1);
-}
-
-/* Large */
-.ds-checkbox--l .ds-checkbox__box {
-  width: var(--icon-l);
-  height: var(--icon-l);
-}
-
-.ds-checkbox--l .ds-checkbox__label {
-  font-size: var(--font-size-p1);
-}

package/src/components/Checkbox.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { Check } from 'lucide-react';
-import './Checkbox.css';
-
-export function Checkbox({
-  checked = false,
-  onChange,
-  size = 'm',
-  disabled = false,
-  label,
-  id,
-  ...props
-}) {
-  const checkboxId = id || `checkbox-${React.useId()}`;
-
-  const className = [
-    'ds-checkbox',
-    `ds-checkbox--${size}`,
-    disabled && 'ds-checkbox--disabled',
-  ].filter(Boolean).join(' ');
-
-  const iconSize = size === 'xs' ? 10 : size === 'small' ? 14 : size === 'large' ? 20 : 16;
-
-  return (
-    <label className={className} htmlFor={checkboxId}>
-      <input
-        type="checkbox"
-        id={checkboxId}
-        className="ds-checkbox__input"
-        checked={checked}
-        onChange={(e) => onChange?.(e.target.checked)}
-        disabled={disabled}
-        {...props}
-      />
-      <span className="ds-checkbox__box">
-        {checked && (
-          <Check
-            size={iconSize}
-            strokeWidth={2.5}
-            className="ds-checkbox__icon"
-          />
-        )}
-      </span>
-      {label && <span className="ds-checkbox__label">{label}</span>}
-    </label>
-  );
-}

package/src/components/Code.css

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

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

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

package/src/components/CodeAccordion.jsx

@@ -1,42 +0,0 @@
-import React, { useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-import { iconSizes } from '../styles/iconSizes';
-import './CodeAccordion.css';
-
-export function CodeAccordion({
-  children,
-  title = 'Code',
-  defaultExpanded = false,
-  padding = 's',
-  ...props
-}) {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-
-  const className = [
-    'ds-code-accordion',
-    `ds-code-accordion--${padding}`,
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div className={className}>
-      <button
-        type="button"
-        className="ds-code-accordion__header"
-        onClick={() => setIsExpanded(!isExpanded)}
-        aria-expanded={isExpanded}
-      >
-        <span className="ds-code-accordion__title">{title}</span>
-        <ChevronDown
-          size={iconSizes.s}
-          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

@@ -1,163 +0,0 @@
-.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--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--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--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--m {
-  padding-left: calc(var(--height-m) / 4 + 24px + var(--height-m) / 4);
-}
-
-.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--m {
-  padding-right: calc(var(--height-m) / 4 + 24px + var(--height-m) / 4);
-}
-
-.ds-input-icon {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  color: var(--color-txt-icon-2);
-  pointer-events: none;
-}
-
-.ds-input-icon--xs {
-  left: 6px;
-}
-
-.ds-input-icon--s {
-  left: 8px;
-}
-
-.ds-input-icon--m {
-  left: 11px;
-}
-
-.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--xs {
-  right: 6px;
-}
-
-.ds-input-icon-right--s {
-  right: 8px;
-}
-
-.ds-input-icon-right--m {
-  right: 11px;
-}
-
-.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

@@ -1,55 +0,0 @@
-import React from 'react';
-import './Input.css';
-
-export function Input({
-  label,
-  error,
-  hint,
-  fullWidth = true,
-  icon,
-  iconRight,
-  onIconRightClick,
-  size = 'm',
-  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

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

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