@donkit-ai/design-system 0.3.5 → 0.4.3

package/src/components/Stepper.css

@@ -1,183 +0,0 @@
-/* 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 */
-
-/* Extra Small */
-.ds-stepper--xs {
-  height: var(--height-xs);
-}
-
-.ds-stepper--xs .ds-stepper-button {
-  width: var(--height-xs);
-  padding: 0;
-}
-
-.ds-stepper--xs .ds-stepper-input {
-  font-size: var(--font-size-p3);
-  letter-spacing: var(--letter-spacing-p3);
-  padding: 0 var(--space-xs);
-}
-
-/* Small */
-.ds-stepper--s {
-  height: var(--height-s);
-}
-
-.ds-stepper--s .ds-stepper-button {
-  width: var(--height-s);
-  padding: 0;
-}
-
-.ds-stepper--s .ds-stepper-input {
-  font-size: var(--font-size-p2);
-  letter-spacing: var(--letter-spacing-p2);
-  padding: 0 var(--space-xs);
-}
-
-/* Medium */
-.ds-stepper--m {
-  height: var(--height-m);
-}
-
-.ds-stepper--m .ds-stepper-button {
-  width: var(--height-m);
-  padding: 0;
-}
-
-.ds-stepper--m .ds-stepper-input {
-  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

@@ -1,104 +0,0 @@
-import React from 'react';
-import { Minus, Plus } from 'lucide-react';
-import { iconSizes } from '../styles/iconSizes';
-import './Stepper.css';
-
-export function Stepper({
-  label,
-  value = 0,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  size = 'm',
-  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 === 'xs' ? iconSizes.xs : size === 'small' ? iconSizes.s : iconSizes.m;
-
-  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

@@ -1,87 +0,0 @@
-.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;
-  text-decoration: none;
-}
-
-/* Variants */
-.ds-tab--ghost {
-  border: none;
-  color: var(--color-txt-icon-2);
-}
-
-.ds-tab--ghost:hover:not(.ds-tab--selected):not(:disabled):not([aria-disabled="true"]) {
-  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--xs {
-  height: var(--height-xs);
-  padding: 0 calc(var(--height-xs) / 2);
-  font-size: var(--font-size-p3);
-  border-radius: var(--radius-xs);
-}
-
-.ds-tab--s {
-  height: var(--height-s);
-  padding: 0 calc(var(--height-s) / 2);
-  font-size: var(--font-size-p2);
-  border-radius: var(--radius-xs);
-}
-
-.ds-tab--m {
-  height: var(--height-m);
-  padding: 0 calc(var(--height-m) / 2);
-  font-size: var(--font-size-p1);
-  border-radius: var(--radius-s);
-}
-
-.ds-tab--l {
-  height: var(--height-l);
-  padding: 0 calc(var(--height-l) / 2);
-  font-size: var(--font-size-p1);
-  border-radius: var(--radius-s);
-  gap: var(--space-s);
-}
-
-.ds-tab:disabled,
-.ds-tab[aria-disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.ds-tab-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.ds-tab--icon-only {
-  aspect-ratio: 1;
-  padding-left: 0;
-  padding-right: 0;
-}

package/src/components/Tabs.jsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import './Tabs.css';
-
-export function Tabs({ children, size = 'm', variant = 'ghost', ...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 = 'm', variant = 'ghost', disabled = false, icon, href, ...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(' ');
-
-  const content = (
-    <>
-      {icon && <span className="ds-tab-icon">{icon}</span>}
-      {children}
-    </>
-  );
-
-  // 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
-        role="tab"
-        aria-current={selected ? 'page' : undefined}
-        aria-disabled={disabled ? 'true' : undefined}
-        className={className}
-        href={disabled ? undefined : href}
-        onClick={handleClick}
-        {...props}
-      >
-        {content}
-      </a>
-    );
-  }
-
-  // Render as button (default)
-  return (
-    <button
-      role="tab"
-      aria-selected={selected}
-      className={className}
-      onClick={onClick}
-      disabled={disabled}
-      {...props}
-    >
-      {content}
-    </button>
-  );
-}

package/src/components/Textarea.css

@@ -1,116 +0,0 @@
-.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;
-  /* Кастомный resize handle - 2 диагональные линии */
-  background:
-    linear-gradient(315deg, transparent 5px, var(--color-border) 5px, var(--color-border) 6px, transparent 6px),
-    linear-gradient(315deg, transparent 10px, var(--color-border) 10px, var(--color-border) 11px, transparent 11px);
-  background-repeat: no-repeat;
-  background-position: bottom right;
-  background-size: 16px 16px;
-}
-
-.ds-textarea::placeholder {
-  color: var(--color-txt-icon-2);
-}
-
-.ds-textarea::-webkit-resizer {
-  display: none;
-}
-
-.ds-textarea:hover:not(:disabled) {
-  border-color: var(--color-border-hover);
-  background:
-    linear-gradient(315deg, transparent 5px, var(--color-border-hover) 5px, var(--color-border-hover) 6px, transparent 6px),
-    linear-gradient(315deg, transparent 10px, var(--color-border-hover) 10px, var(--color-border-hover) 11px, transparent 11px);
-  background-repeat: no-repeat;
-  background-position: bottom right;
-  background-size: 16px 16px;
-}
-
-.ds-textarea:focus,
-.ds-textarea:active {
-  outline: none;
-  border-color: var(--color-border-hover);
-  background:
-    linear-gradient(315deg, transparent 5px, var(--color-border-hover) 5px, var(--color-border-hover) 6px, transparent 6px),
-    linear-gradient(315deg, transparent 10px, var(--color-border-hover) 10px, var(--color-border-hover) 11px, transparent 11px);
-  background-repeat: no-repeat;
-  background-position: bottom right;
-  background-size: 16px 16px;
-}
-
-.ds-textarea:disabled {
-  cursor: not-allowed;
-}
-
-.ds-textarea--error {
-  border-color: var(--color-error);
-  background:
-    linear-gradient(315deg, transparent 5px, var(--color-error) 5px, var(--color-error) 6px, transparent 6px),
-    linear-gradient(315deg, transparent 10px, var(--color-error) 10px, var(--color-error) 11px, transparent 11px);
-  background-repeat: no-repeat;
-  background-position: bottom right;
-  background-size: 16px 16px;
-}
-
-.ds-textarea--no-resize {
-  resize: none;
-  background: none;
-}
-
-/* Sizes */
-.ds-textarea--xs {
-  padding: var(--space-xs);
-  font-size: var(--font-size-p3);
-  border-radius: var(--radius-xs);
-}
-
-.ds-textarea--s {
-  padding: var(--space-xs) var(--space-s);
-  font-size: var(--font-size-p2);
-  border-radius: var(--radius-xs);
-}
-
-.ds-textarea--m {
-  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

@@ -1,41 +0,0 @@
-import React from 'react';
-import './Textarea.css';
-
-export function Textarea({
-  label,
-  error,
-  hint,
-  fullWidth = true,
-  size = 'm',
-  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>
-  );
-}