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

package/dist/theme-picker.css

@@ -0,0 +1,219 @@
+/**
+ * ThemePicker Component Styles
+ * Beautiful theme picker with light/dark pill design
+ *
+ * Required CSS Variables (should be defined by @wolffm/themes):
+ * --color-text
+ * --color-primary
+ * --color-primary-hover
+ * --color-primary-bg
+ * --color-bg-card
+ * --color-text-secondary
+ * --hdk-shadow-focus-sm
+ * --hdk-shadow-md
+ * --hdk-shadow-lg
+ * --transition-fast (e.g., 0.15s ease)
+ * --hdk-space-sm (e.g., 8px)
+ * --hdk-space-md (e.g., 12px)
+ * --hdk-space-lg (e.g., 16px)
+ * --hdk-text-lg (e.g., 18px)
+ * --font-weight-semibold (e.g., 600)
+ */
+
+@import './icon-btn.css';
+
+.theme-picker {
+  position: relative;
+}
+
+/* Theme toggle button: styled by the shared .app-header__icon-btn
+ * (icon-btn.css). `.theme-toggle-btn` stays on the element as a hook only —
+ * giving it values again would be the second copy that drifts. */
+
+/* Theme picker overlay - covers entire viewport for click-outside detection */
+.theme-picker__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  background: transparent;
+}
+
+/* Theme picker dropdown - positioned relative to picker button */
+.theme-picker__dropdown {
+  position: absolute;
+  top: 0;
+  left: calc(100% + var(--hdk-space-md));
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--hdk-space-sm);
+}
+
+/* Inner row: pill tower + settings icon side-by-side */
+.theme-picker__main {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--hdk-space-md);
+}
+
+/* Open-left modifier: dropdown opens to the left of the toggle */
+.theme-picker--open-left .theme-picker__dropdown {
+  left: auto;
+  right: calc(100% + var(--hdk-space-md));
+}
+
+.theme-picker--open-left .theme-picker__main {
+  flex-direction: row-reverse;
+}
+
+/* Theme pill tower - has the shadow */
+.theme-picker__pills {
+  display: flex;
+  flex-direction: column;
+  gap: 0; /* No gap - pancake stack */
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--hdk-shadow-lg); /* Shadow on pill tower only */
+}
+
+/* Theme pill - contains light and dark buttons */
+.theme-pill {
+  display: flex;
+  gap: 0;
+  background: transparent;
+  border: none;
+  transition: all var(--transition-fast, 0.15s ease);
+}
+
+/* Separator line between pills */
+.theme-pill:not(:last-child) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* Theme pill buttons */
+.theme-pill__btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--hdk-space-lg) * 1.2); /* 20% bigger total (10% + 10%) */
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--transition-fast, 0.15s ease);
+  position: relative;
+  overflow: visible; /* Allow border to show */
+}
+
+/* The light/dark pills are the mode toggle itself: they must always LOOK light
+   and dark so the control reads correctly whichever theme is active. These
+   literals are deliberate and are the one place theme tokens must not be used. */
+
+/* Light button default style */
+.theme-pill__btn--light {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  color: #1e293b;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Dark button default style - more cyber with darker background and blue tint */
+.theme-pill__btn--dark {
+  background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
+  color: #64748b;
+  border-left: 1px solid rgba(100, 116, 139, 0.1);
+}
+
+/* First pill top-left corner rounding - rounded corner instead of full circle */
+.theme-pill:first-child .theme-pill__btn--light {
+  border-top-left-radius: 12px;
+}
+
+/* First pill top-right corner rounding */
+.theme-pill:first-child .theme-pill__btn--dark {
+  border-top-right-radius: 12px;
+}
+
+/* Last pill bottom-left corner rounding */
+.theme-pill:last-child .theme-pill__btn--light {
+  border-bottom-left-radius: 12px;
+}
+
+/* Last pill bottom-right corner rounding */
+.theme-pill:last-child .theme-pill__btn--dark {
+  border-bottom-right-radius: 12px;
+}
+
+.theme-pill__btn--light:hover {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  color: var(--color-primary);
+}
+
+.theme-pill__btn--dark:hover {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  color: #cbd5e1;
+}
+
+/* Active states - with proper border radius that doesn't clip, 10% bigger border */
+.theme-pill__btn--light.active {
+  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
+  color: var(--color-primary);
+  box-shadow: inset 0 0 0 2.2px var(--color-primary); /* Uses theme primary color */
+  font-weight: var(--font-weight-semibold, 600);
+}
+
+.theme-pill__btn--dark.active {
+  background: linear-gradient(135deg, #020617 0%, #000000 100%);
+  color: var(--color-primary); /* Use theme primary color */
+  box-shadow: inset 0 0 0 2.2px var(--color-primary); /* Use theme primary color */
+  font-weight: var(--font-weight-semibold, 600);
+  /* Add glow effect for cyber look */
+  filter: brightness(1.1);
+}
+
+/* Icon container - reduced by ~15% (24px -> 20px) */
+.theme-pill__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.theme-pill__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Settings icon button - circular, separate from pill tower */
+.theme-picker__settings-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: none;
+  background: var(--color-bg-card);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast, 0.15s ease);
+  border-radius: 50%; /* Circular */
+  box-shadow: var(--hdk-shadow-md);
+  flex-shrink: 0;
+}
+
+.theme-picker__settings-icon:hover {
+  background: var(--color-primary-bg);
+  color: var(--color-on-primary-bg);
+  transform: rotate(45deg);
+  box-shadow: var(--hdk-shadow-lg);
+}
+
+.theme-picker__settings-icon svg {
+  width: 20px;
+  height: 20px;
+}

package/dist/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/dist/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/dist/types/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Type definitions for @wolffm/task-ui-components
+ */
+import type { ReactNode } from 'react';
+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;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5D;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAEzD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,YAAY,EAAE,SAAS,CAAA;IACvB,mDAAmD;IACnD,MAAM,EAAE,OAAO,CAAA;IACf,+BAA+B;IAC/B,aAAa,EAAE,WAAW,EAAE,CAAA;IAC5B,qCAAqC;IACrC,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IACzC,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,sDAAsD;IACtD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,CAAA;IAC9C,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kFAAkF;IAClF,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACtC"}

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@hadoku/task-ui-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "4.20.4",
+  "description": "Reusable UI components with Bento grid and metallic gradient support",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./theme-picker.css": "./dist/theme-picker.css",
+    "./app-header.css": "./dist/app-header.css",
+    "./toaster.css": "./dist/toaster.css",
+    "./context-menu.css": "./dist/context-menu.css",
+    "./bento.css": "./dist/bento.css",
+    "./modal.css": "./dist/modal.css",
+    "./button.css": "./dist/button.css",
+    "./select.css": "./dist/select.css",
+    "./tooltip.css": "./dist/tooltip.css",
+    "./scrollbar.css": "./dist/scrollbar.css",
+    "./icon-btn.css": "./dist/icon-btn.css",
+    "./controls.css": "./dist/controls.css",
+    "./number-input.css": "./dist/number-input.css",
+    "./title-tooltips": {
+      "types": "./dist/lib/titleTooltips.d.ts",
+      "import": "./dist/lib/titleTooltips.js"
+    },
+    "./select-menus": {
+      "types": "./dist/lib/selectMenus.d.ts",
+      "import": "./dist/lib/selectMenus.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "keywords": [
+    "theme-picker",
+    "ui-components",
+    "react",
+    "themes",
+    "task-management"
+  ],
+  "author": "wolffm",
+  "license": "MIT",
+  "peerDependencies": {
+    "@wolffm/themes": "*",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/WolffM/hadoku-task.git",
+    "directory": "task-ui-components"
+  }
+}