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

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
+}