@hadoku/task-ui-components 0.0.0-stage → 4.20.3

package/src/toaster.css

@@ -0,0 +1,159 @@
+/**
+ * Toast Notification Styles
+ */
+
+.toast-container {
+  position: fixed;
+  z-index: 10000;
+  display: flex;
+  gap: 12px;
+  pointer-events: none;
+  max-width: 500px;
+}
+
+/* Position variants */
+.toast-container--top-left {
+  top: 20px;
+  left: 20px;
+  flex-direction: column;
+}
+
+.toast-container--top-center {
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column;
+  width: calc(100% - 40px);
+}
+
+.toast-container--top-right {
+  top: 20px;
+  right: 20px;
+  flex-direction: column;
+}
+
+.toast-container--bottom-left {
+  bottom: 20px;
+  left: 20px;
+  flex-direction: column-reverse;
+}
+
+.toast-container--bottom-center {
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+  width: calc(100% - 40px);
+}
+
+.toast-container--bottom-right {
+  bottom: 20px;
+  right: 20px;
+  flex-direction: column-reverse;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 20px;
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--hdk-radius-lg);
+  box-shadow: var(--hdk-shadow-md);
+  min-width: 280px;
+  max-width: 100%;
+  opacity: 0;
+  transform: translateY(30px) scale(0.9);
+  transition:
+    opacity 0.5s ease-out,
+    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
+    box-shadow 0.3s ease;
+  pointer-events: auto;
+}
+
+.toast--visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.toast__icon {
+  flex-shrink: 0;
+}
+
+.toast__message {
+  flex: 1;
+  font-size: 14px;
+  color: var(--color-text);
+  line-height: 1.4;
+}
+
+/* Toast type variants - using colored shadows for subtle emphasis */
+.toast--success {
+  box-shadow:
+    0 0 0 1px var(--success-color, #10b981),
+    0 4px 12px rgba(16, 185, 129, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toast--success .toast__icon {
+  color: var(--success-color, #10b981);
+}
+
+.toast--error {
+  box-shadow:
+    0 0 0 1px var(--error-color, #ef4444),
+    0 4px 12px rgba(239, 68, 68, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toast--error .toast__icon {
+  color: var(--error-color, #ef4444);
+}
+
+.toast--warning {
+  box-shadow:
+    0 0 0 1px var(--warning-color, #f59e0b),
+    0 4px 12px rgba(245, 158, 11, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toast--warning .toast__icon {
+  color: var(--warning-color, #f59e0b);
+}
+
+.toast--info {
+  box-shadow:
+    0 0 0 1px var(--info-color, var(--accent-color, #3b82f6)),
+    0 4px 12px rgba(59, 130, 246, 0.15),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toast--info .toast__icon {
+  color: var(--info-color, var(--accent-color, #3b82f6));
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .toast-container {
+    max-width: none;
+  }
+
+  .toast-container--top-left,
+  .toast-container--top-right,
+  .toast-container--bottom-left,
+  .toast-container--bottom-right {
+    left: 10px;
+    right: 10px;
+  }
+
+  .toast-container--top-center,
+  .toast-container--bottom-center {
+    width: calc(100% - 20px);
+  }
+
+  .toast {
+    min-width: unset;
+    padding: 12px 16px;
+  }
+}

package/src/tooltip.css

@@ -0,0 +1,103 @@
+/* Tooltip styles for @wolffm/task-ui-components.
+ *
+ *   import '@wolffm/task-ui-components/tooltip.css'
+ *
+ * `inverse` paints body text colour as the surface and the page background
+ * as the text — the same pair as body copy, flipped, so its contrast is the
+ * theme's own text contrast in every theme.
+ */
+
+.hdk-tooltip {
+  --_tip-bg: var(--color-text);
+  --_tip-fg: var(--color-bg);
+  --_tip-border: transparent;
+  /* Overwritten inline once placed: where the anchor's centre falls. */
+  --hdk-tooltip-arrow: 50%;
+
+  position: fixed;
+  z-index: 1100;
+  max-width: min(280px, calc(100vw - 16px));
+  padding: 6px 10px;
+  font-size: var(--hdk-text-xs);
+  font-weight: var(--font-weight-normal);
+  line-height: 1.4;
+  text-align: left;
+  white-space: normal;
+  overflow-wrap: break-word;
+  color: var(--_tip-fg);
+  background-color: var(--_tip-bg);
+  border: 1px solid var(--_tip-border);
+  border-radius: var(--hdk-radius);
+  box-shadow: var(--hdk-shadow-md);
+  /* A fade, never a slide: a transform puts the bubble on its own layer, so
+   * its 1px border smears across rows mid-slide and visibly snaps back into
+   * place when the transition ends. */
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.hdk-tooltip--visible {
+  opacity: 1;
+}
+
+.hdk-tooltip--card {
+  --_tip-bg: var(--color-bg-card);
+  --_tip-fg: var(--color-text);
+  --_tip-border: var(--color-border);
+
+  box-shadow: var(--hdk-shadow-lg);
+}
+
+/* A `title=` string from installTitleTooltips: plain text, and its line
+ * breaks are real (a native title shows them too). */
+.hdk-tooltip--plain {
+  white-space: pre-line;
+}
+
+.hdk-tooltip--primary {
+  --_tip-bg: var(--color-primary);
+  --_tip-fg: var(--color-on-primary);
+}
+
+/* ── arrow ────────────────────────────────────────────────────────────── */
+
+/* A rotated square sharing the bubble's fill and border; only its two outer
+ * edges carry the border, so it reads as one shape with the bubble. */
+.hdk-tooltip::after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--_tip-bg);
+  border: 1px solid var(--_tip-border);
+  border-top-color: transparent;
+  border-left-color: transparent;
+}
+
+.hdk-tooltip--top::after {
+  top: 100%;
+  left: var(--hdk-tooltip-arrow);
+  translate: -50% -50%;
+  rotate: 45deg;
+}
+
+.hdk-tooltip--bottom::after {
+  bottom: 100%;
+  left: var(--hdk-tooltip-arrow);
+  translate: -50% 50%;
+  rotate: -135deg;
+}
+
+.hdk-tooltip--left::after {
+  left: 100%;
+  top: var(--hdk-tooltip-arrow);
+  translate: -50% -50%;
+  rotate: -45deg;
+}
+
+.hdk-tooltip--right::after {
+  right: 100%;
+  top: var(--hdk-tooltip-arrow);
+  translate: 50% -50%;
+  rotate: 135deg;
+}

package/src/types/index.ts

@@ -0,0 +1,43 @@
+/**
+ * Type definitions for @wolffm/task-ui-components
+ */
+
+import type { ReactNode } from 'react'
+// The theme MODEL lives in @wolffm/themes now; this file keeps only the types
+// that describe THIS package's components. Re-exported so existing imports of
+// ThemeName/ThemeFamily/ThemeMode from here keep resolving — to the same
+// declarations, not copies.
+export type { ThemeName, ThemeFamily, ThemeMode } from '@wolffm/themes'
+import type { ThemeName, ThemeFamily } from '@wolffm/themes'
+
+/**
+ * Dropdown placement direction
+ * - 'right': Opens to the right of the toggle button (default)
+ * - 'left': Opens to the left of the toggle button
+ * - 'auto': Automatically detects edge collisions and flips direction
+ */
+export type DropdownPlacement = 'left' | 'right' | 'auto'
+
+/**
+ * Theme picker component props
+ */
+export interface ThemePickerProps {
+  /** Current active theme */
+  currentTheme: ThemeName
+  /** Whether the theme picker dropdown is visible */
+  isOpen: boolean
+  /** Available theme families */
+  themeFamilies: ThemeFamily[]
+  /** Callback when theme is changed */
+  onThemeChange: (theme: ThemeName) => void
+  /** Callback to toggle picker visibility */
+  onToggle: () => void
+  /** Optional callback when settings icon is clicked */
+  onSettingsClick?: () => void
+  /** Optional: Function to get icon for current theme (for toggle button) */
+  getThemeIcon?: (theme: ThemeName) => ReactNode
+  /** Optional: CSS class name for the container */
+  className?: string
+  /** Optional: Direction the dropdown opens. Defaults to 'auto' (edge detection) */
+  dropdownPlacement?: DropdownPlacement
+}