@donkit-ai/design-system 0.3.5 → 0.4.3

package/src/components/Toggle.css

@@ -1,133 +0,0 @@
-.ds-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-s);
-  cursor: pointer;
-}
-
-.ds-toggle--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.ds-toggle__input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.ds-toggle__track {
-  position: relative;
-  display: flex;
-  align-items: 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;
-}
-
-.ds-toggle__input:checked + .ds-toggle__track {
-  background-color: var(--color-status-success);
-  border-color: var(--color-status-success);
-}
-
-.ds-toggle__input:not(:checked) + .ds-toggle__track:hover {
-  border-color: var(--color-border-hover);
-}
-
-.ds-toggle__thumb {
-  background-color: var(--color-white);
-  border-radius: 50%;
-  transition: transform var(--transition-normal);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.ds-toggle__label {
-  font-size: var(--font-size-p1);
-  color: var(--color-txt-icon-1);
-  user-select: none;
-}
-
-/* Extra Small */
-.ds-toggle--xs .ds-toggle__track {
-  width: calc(var(--icon-xs) * 1.75);
-  height: var(--icon-xs);
-  border-radius: calc(var(--icon-xs) / 2);
-  padding: 2px;
-}
-
-.ds-toggle--xs .ds-toggle__thumb {
-  width: calc(var(--icon-xs) - 4px);
-  height: calc(var(--icon-xs) - 4px);
-}
-
-.ds-toggle--xs .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
-  transform: translateX(calc(var(--icon-xs) * 0.75));
-}
-
-.ds-toggle--xs .ds-toggle__label {
-  font-size: var(--font-size-p3);
-}
-
-/* Small */
-.ds-toggle--s .ds-toggle__track {
-  width: calc(var(--icon-s) * 1.75);
-  height: var(--icon-s);
-  border-radius: calc(var(--icon-s) / 2);
-  padding: 2px;
-}
-
-.ds-toggle--s .ds-toggle__thumb {
-  width: calc(var(--icon-s) - 4px);
-  height: calc(var(--icon-s) - 4px);
-}
-
-.ds-toggle--s .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
-  transform: translateX(calc(var(--icon-s) * 0.75));
-}
-
-.ds-toggle--s .ds-toggle__label {
-  font-size: var(--font-size-p2);
-}
-
-/* Medium */
-.ds-toggle--m .ds-toggle__track {
-  width: calc(var(--icon-m) * 1.75);
-  height: var(--icon-m);
-  border-radius: calc(var(--icon-m) / 2);
-  padding: 2px;
-}
-
-.ds-toggle--m .ds-toggle__thumb {
-  width: calc(var(--icon-m) - 4px);
-  height: calc(var(--icon-m) - 4px);
-}
-
-.ds-toggle--m .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
-  transform: translateX(calc(var(--icon-m) * 0.75));
-}
-
-.ds-toggle--m .ds-toggle__label {
-  font-size: var(--font-size-p1);
-}
-
-/* Large */
-.ds-toggle--l .ds-toggle__track {
-  width: calc(var(--icon-l) * 1.75);
-  height: var(--icon-l);
-  border-radius: calc(var(--icon-l) / 2);
-  padding: 3px;
-}
-
-.ds-toggle--l .ds-toggle__thumb {
-  width: calc(var(--icon-l) - 6px);
-  height: calc(var(--icon-l) - 6px);
-}
-
-.ds-toggle--l .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
-  transform: translateX(calc(var(--icon-l) * 0.75));
-}
-
-.ds-toggle--l .ds-toggle__label {
-  font-size: var(--font-size-p1);
-}

package/src/components/Toggle.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import './Toggle.css';
-
-export function Toggle({
-  checked = false,
-  onChange,
-  size = 'm',
-  disabled = false,
-  label,
-  id,
-  ...props
-}) {
-  const toggleId = id || `toggle-${React.useId()}`;
-
-  const className = [
-    'ds-toggle',
-    `ds-toggle--${size}`,
-    disabled && 'ds-toggle--disabled',
-  ].filter(Boolean).join(' ');
-
-  return (
-    <label className={className} htmlFor={toggleId}>
-      <input
-        type="checkbox"
-        id={toggleId}
-        className="ds-toggle__input"
-        checked={checked}
-        onChange={(e) => onChange?.(e.target.checked)}
-        disabled={disabled}
-        {...props}
-      />
-      <span className="ds-toggle__track">
-        <span className="ds-toggle__thumb" />
-      </span>
-      {label && <span className="ds-toggle__label">{label}</span>}
-    </label>
-  );
-}

package/src/components/Tooltip.css

@@ -1,134 +0,0 @@
-.ds-tooltip-wrapper {
-  position: relative;
-  display: inline-flex;
-}
-
-.ds-tooltip {
-  position: absolute;
-  background-color: var(--color-bg);
-  color: var(--color-txt-icon-2);
-  font-size: var(--font-size-p3);
-  letter-spacing: var(--letter-spacing-p3);
-  width: max-content;
-  max-width: 200px;
-  padding: var(--space-xs);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xs);
-  z-index: 2000;
-  white-space: normal;
-  word-wrap: break-word;
-  pointer-events: none;
-  line-height: 1.4;
-}
-
-/* Position: Top */
-.ds-tooltip--top {
-  bottom: calc(100% + 8px);
-  left: 50%;
-  transform: translateX(calc(-50% + var(--tooltip-offset-x, 0px)));
-}
-
-.ds-tooltip--top::after {
-  content: '';
-  position: absolute;
-  top: 100%;
-  left: calc(50% + var(--arrow-offset, 0px));
-  transform: translateX(-50%);
-  border: 4px solid transparent;
-  border-top-color: var(--color-border);
-}
-
-.ds-tooltip--top::before {
-  content: '';
-  position: absolute;
-  top: 100%;
-  left: calc(50% + var(--arrow-offset, 0px));
-  transform: translateX(-50%);
-  border: 3px solid transparent;
-  border-top-color: var(--color-bg);
-  z-index: 1;
-}
-
-/* Position: Bottom */
-.ds-tooltip--bottom {
-  top: calc(100% + 8px);
-  left: 50%;
-  transform: translateX(calc(-50% + var(--tooltip-offset-x, 0px)));
-}
-
-.ds-tooltip--bottom::after {
-  content: '';
-  position: absolute;
-  bottom: 100%;
-  left: calc(50% + var(--arrow-offset, 0px));
-  transform: translateX(-50%);
-  border: 4px solid transparent;
-  border-bottom-color: var(--color-border);
-}
-
-.ds-tooltip--bottom::before {
-  content: '';
-  position: absolute;
-  bottom: 100%;
-  left: calc(50% + var(--arrow-offset, 0px));
-  transform: translateX(-50%);
-  border: 3px solid transparent;
-  border-bottom-color: var(--color-bg);
-  z-index: 1;
-}
-
-/* Position: Left */
-.ds-tooltip--left {
-  right: calc(100% + 8px);
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.ds-tooltip--left::after {
-  content: '';
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 4px solid transparent;
-  border-left-color: var(--color-border);
-}
-
-.ds-tooltip--left::before {
-  content: '';
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 3px solid transparent;
-  border-left-color: var(--color-bg);
-  z-index: 1;
-}
-
-/* Position: Right */
-.ds-tooltip--right {
-  left: calc(100% + 8px);
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.ds-tooltip--right::after {
-  content: '';
-  position: absolute;
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 4px solid transparent;
-  border-right-color: var(--color-border);
-}
-
-.ds-tooltip--right::before {
-  content: '';
-  position: absolute;
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 3px solid transparent;
-  border-right-color: var(--color-bg);
-  z-index: 1;
-}

package/src/components/Tooltip.jsx

@@ -1,158 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import './Tooltip.css';
-
-export function Tooltip({
-  children,
-  content,
-  position,
-  ...props
-}) {
-  const [isVisible, setIsVisible] = useState(false);
-  const [computedPosition, setComputedPosition] = useState(position || 'top');
-  const [offset, setOffset] = useState({ x: 0, arrowOffset: 0 });
-  const wrapperRef = useRef(null);
-  const tooltipRef = useRef(null);
-  const isTouchDevice = useRef(false);
-
-  useEffect(() => {
-    if (isVisible && !position && wrapperRef.current && tooltipRef.current) {
-      // Wait for browser to render the tooltip before measuring
-      requestAnimationFrame(() => {
-        if (!wrapperRef.current || !tooltipRef.current) return;
-
-        const wrapperRect = wrapperRef.current.getBoundingClientRect();
-        const tooltipRect = tooltipRef.current.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        const viewportWidth = window.innerWidth;
-
-        // Calculate available space in each direction
-        const spaceTop = wrapperRect.top;
-        const spaceBottom = viewportHeight - wrapperRect.bottom;
-        const spaceLeft = wrapperRect.left;
-        const spaceRight = viewportWidth - wrapperRect.right;
-
-        const tooltipHeight = tooltipRect.height;
-        const tooltipWidth = tooltipRect.width;
-
-        // Prefer top/bottom first, then left/right
-        if (spaceTop >= tooltipHeight + 8) {
-          setComputedPosition('top');
-        } else if (spaceBottom >= tooltipHeight + 8) {
-          setComputedPosition('bottom');
-        } else if (spaceRight >= tooltipWidth + 8) {
-          setComputedPosition('right');
-        } else if (spaceLeft >= tooltipWidth + 8) {
-          setComputedPosition('left');
-        } else {
-          // Fallback to direction with most space
-          const maxSpace = Math.max(spaceTop, spaceBottom, spaceLeft, spaceRight);
-          if (maxSpace === spaceTop) setComputedPosition('top');
-          else if (maxSpace === spaceBottom) setComputedPosition('bottom');
-          else if (maxSpace === spaceRight) setComputedPosition('right');
-          else setComputedPosition('left');
-        }
-      });
-    } else if (position) {
-      setComputedPosition(position);
-    }
-  }, [isVisible, position]);
-
-  // Check viewport boundaries and adjust position
-  useEffect(() => {
-    if (isVisible && tooltipRef.current && wrapperRef.current) {
-      // Wait for browser to render the tooltip before measuring
-      requestAnimationFrame(() => {
-        if (!tooltipRef.current || !wrapperRef.current) return;
-
-        const tooltipRect = tooltipRef.current.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const PADDING = 8; // minimum distance from viewport edge
-
-        let xOffset = 0;
-        let arrowShift = 0;
-
-        // For top/bottom positions, check horizontal overflow
-        if (computedPosition === 'top' || computedPosition === 'bottom') {
-          // Check if tooltip overflows on the right
-          if (tooltipRect.right > viewportWidth - PADDING) {
-            xOffset = viewportWidth - PADDING - tooltipRect.right;
-            arrowShift = -xOffset; // arrow moves opposite direction
-          }
-          // Check if tooltip overflows on the left
-          else if (tooltipRect.left < PADDING) {
-            xOffset = PADDING - tooltipRect.left;
-            arrowShift = -xOffset; // arrow moves opposite direction
-          }
-        }
-
-        setOffset({ x: xOffset, arrowOffset: arrowShift });
-      });
-    } else {
-      setOffset({ x: 0, arrowOffset: 0 });
-    }
-  }, [isVisible, computedPosition]);
-
-  // Close tooltip when clicking outside (for touch interfaces)
-  useEffect(() => {
-    if (!isVisible) return;
-
-    const handleClickOutside = (event) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
-        setIsVisible(false);
-      }
-    };
-
-    document.addEventListener('touchstart', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('touchstart', handleClickOutside);
-    };
-  }, [isVisible]);
-
-  const handleTouchStart = () => {
-    isTouchDevice.current = true;
-    setIsVisible((prev) => !prev);
-  };
-
-  const handleMouseEnter = () => {
-    // Ignore mouse events on touch devices
-    if (!isTouchDevice.current) {
-      setIsVisible(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    // Ignore mouse events on touch devices
-    if (!isTouchDevice.current) {
-      setIsVisible(false);
-    }
-  };
-
-  if (!content) return children;
-
-  return (
-    <div
-      ref={wrapperRef}
-      className="ds-tooltip-wrapper"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onTouchStart={handleTouchStart}
-      {...props}
-    >
-      {children}
-      {isVisible && (
-        <div
-          ref={tooltipRef}
-          className={`ds-tooltip ds-tooltip--${computedPosition}`}
-          role="tooltip"
-          style={{
-            '--tooltip-offset-x': `${offset.x}px`,
-            '--arrow-offset': `${offset.arrowOffset}px`,
-          }}
-        >
-          {content}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/Typography.css

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

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

@@ -1,24 +0,0 @@
-// Styles
-export * from './styles/tokens.css';
-export { iconSizes } from './styles/iconSizes';
-
-// 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';
-export { Tooltip } from './components/Tooltip';
-export { Toggle } from './components/Toggle';
-export { Checkbox } from './components/Checkbox';
-export { Radio } from './components/Radio';

package/src/styles/iconSizes.js

@@ -1,15 +0,0 @@
-/**
- * Icon sizes matching CSS variables
- * --icon-xs: 16px
- * --icon-s: 20px
- * --icon-m: 24px
- * --icon-l: 28px
- * --icon-xl: 48px
- */
-export const iconSizes = {
-  xs: 16,
-  s: 20,
-  m: 24,
-  l: 28,
-  xl: 48,
-};