@justin_evo/evo-ui 1.0.1

package/src/Theme/ThemeToggle.tsx

@@ -0,0 +1,79 @@
+import { useEvoTheme } from './ThemeProvider';
+import styles from '../css/theme-toggle.module.scss';
+
+export interface EvoThemeToggleProps {
+  /** Visual size of the toggle. @default 'md' */
+  size?: 'sm' | 'md' | 'lg';
+  /** Accessible label. @default 'Toggle color theme' */
+  ariaLabel?: string;
+  /** Extra className to merge with the built-in styles. */
+  className?: string;
+}
+
+/**
+ * A drop-in button that flips between light and dark mode.
+ *
+ * Sits inside an `<EvoThemeProvider>`. The icon and animation
+ * automatically reflect the resolved theme.
+ *
+ * @example
+ * ```tsx
+ * <EvoThemeProvider>
+ *   <EvoThemeToggle />
+ * </EvoThemeProvider>
+ * ```
+ */
+export const EvoThemeToggle = ({
+  size = 'md',
+  ariaLabel = 'Toggle color theme',
+  className,
+}: EvoThemeToggleProps) => {
+  const { resolvedTheme, toggleTheme } = useEvoTheme();
+  const isDark = resolvedTheme === 'dark';
+
+  const classes = [styles.toggle, styles[size], className].filter(Boolean).join(' ');
+
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={isDark}
+      aria-label={ariaLabel}
+      onClick={toggleTheme}
+      className={classes}
+      data-theme-state={resolvedTheme}
+    >
+      <span className={styles.track}>
+        <span className={styles.thumb}>
+          {/* Sun icon */}
+          <svg
+            className={styles.sun}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="4" />
+            <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+          </svg>
+          {/* Moon icon */}
+          <svg
+            className={styles.moon}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+          </svg>
+        </span>
+      </span>
+    </button>
+  );
+};

package/src/Toggle/Toggle.tsx

@@ -0,0 +1,48 @@
+import styles from '../css/toggle.module.scss';
+
+type ToggleSize = 'sm' | 'md' | 'lg';
+
+interface EvoToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+  size?: ToggleSize;
+  className?: string;
+}
+
+const thumbSize: Record<ToggleSize, string> = { sm: '0.75rem', md: '1rem', lg: '1.25rem' };
+const thumbOffset: Record<ToggleSize, string> = { sm: '0.75rem', md: '1rem', lg: '1.25rem' };
+
+export const EvoToggle = ({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  size = 'md',
+  className = '',
+}: EvoToggleProps) => (
+  <label
+    className={[styles.toggleWrapper, disabled ? styles.disabled : '', className].filter(Boolean).join(' ')}
+  >
+    <input
+      type="checkbox"
+      role="switch"
+      className={styles.hiddenInput}
+      checked={checked}
+      disabled={disabled}
+      onChange={(e) => onChange(e.target.checked)}
+    />
+    <span className={[styles.track, styles[size], checked ? styles.on : ''].filter(Boolean).join(' ')}>
+      <span
+        className={styles.thumb}
+        style={{
+          width: thumbSize[size],
+          height: thumbSize[size],
+          transform: checked ? `translateX(${thumbOffset[size]})` : 'translateX(0)',
+        }}
+      />
+    </span>
+    {label && <span className={styles.label}>{label}</span>}
+  </label>
+);

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import styles from '../css/tooltip.module.scss';
+
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+interface EvoTooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  placement?: TooltipPlacement;
+  className?: string;
+}
+
+export const EvoTooltip = ({
+  content,
+  children,
+  placement = 'top',
+  className = '',
+}: EvoTooltipProps) => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <span
+      className={`${styles.wrapper} ${className}`}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+      onFocus={() => setVisible(true)}
+      onBlur={() => setVisible(false)}
+    >
+      {children}
+      {visible && (
+        <span className={`${styles.tooltip} ${styles[placement]}`} role="tooltip">
+          {content}
+          <span className={styles.arrow} />
+        </span>
+      )}
+    </span>
+  );
+};