@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/time-picker/wc/time-picker.ts

@@ -0,0 +1,221 @@
+/**
+ * TimePicker component for time selection with segmented input.
+ *
+ * @element ds-time-picker
+ * @fires ds:change - Fired on time change with { value }
+ *
+ * @example
+ * ```html
+ * <!-- Basic time picker (12h format) -->
+ * <ds-time-picker hour-format="12"></ds-time-picker>
+ *
+ * <!-- 24h format with seconds -->
+ * <ds-time-picker hour-format="24" show-seconds></ds-time-picker>
+ *
+ * <!-- With initial value -->
+ * <ds-time-picker value="14:30"></ds-time-picker>
+ * ```
+ */
+
+import {
+  type TimePickerBehavior,
+  type TimeSegment,
+  type TimeValue,
+  createTimePickerBehavior,
+} from "@hypoth-ui/primitives-dom";
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { StandardEvents, emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+export class DsTimePicker extends DSElement {
+  /** 12-hour or 24-hour format */
+  @property({ type: Number, reflect: true, attribute: "hour-format" })
+  hourFormat: 12 | 24 = 12;
+
+  /** Show seconds segment */
+  @property({ type: Boolean, reflect: true, attribute: "show-seconds" })
+  showSeconds = false;
+
+  /** Time value as HH:MM or HH:MM:SS string */
+  @property({ type: String, reflect: true })
+  value = "";
+
+  /** Minute step */
+  @property({ type: Number, attribute: "minute-step" })
+  minuteStep = 1;
+
+  /** Second step */
+  @property({ type: Number, attribute: "second-step" })
+  secondStep = 1;
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** ARIA label */
+  @property({ type: String, attribute: "aria-label" })
+  override ariaLabel: string | null = null;
+
+  @state()
+  private behavior: TimePickerBehavior | null = null;
+
+  @state()
+  private focusedSegment: TimeSegment | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.initBehavior();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.behavior?.destroy();
+    this.behavior = null;
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    if (
+      changedProperties.has("hourFormat") ||
+      changedProperties.has("showSeconds") ||
+      changedProperties.has("minuteStep") ||
+      changedProperties.has("secondStep") ||
+      changedProperties.has("disabled")
+    ) {
+      this.initBehavior();
+    }
+  }
+
+  private initBehavior(): void {
+    this.behavior?.destroy();
+
+    // Parse initial value
+    let defaultValue: TimeValue = { hour: 0, minute: 0, second: 0 };
+    if (this.value) {
+      const parsed = this.parseTimeString(this.value);
+      if (parsed) defaultValue = parsed;
+    }
+
+    this.behavior = createTimePickerBehavior({
+      defaultValue,
+      hourFormat: this.hourFormat,
+      showSeconds: this.showSeconds,
+      minuteStep: this.minuteStep,
+      secondStep: this.secondStep,
+      disabled: this.disabled,
+      onValueChange: (value) => {
+        this.value = this.behavior?.formatTime(value) ?? "";
+        emitEvent(this, StandardEvents.CHANGE, { detail: { value } });
+      },
+    });
+  }
+
+  private parseTimeString(str: string): TimeValue | null {
+    const match = str.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?(?:\s*(AM|PM))?$/i);
+    if (!match) return null;
+
+    const hourStr = match[1];
+    const minuteStr = match[2];
+    if (!hourStr || !minuteStr) return null;
+
+    let hour = Number.parseInt(hourStr, 10);
+    const minute = Number.parseInt(minuteStr, 10);
+    const second = match[3] ? Number.parseInt(match[3], 10) : 0;
+    const period = match[4]?.toUpperCase() as "AM" | "PM" | undefined;
+
+    if (period) {
+      if (period === "PM" && hour !== 12) hour += 12;
+      if (period === "AM" && hour === 12) hour = 0;
+    }
+
+    return { hour, minute, second };
+  }
+
+  private handleSegmentFocus(segment: TimeSegment): void {
+    this.focusedSegment = segment;
+    this.behavior?.focusSegment(segment);
+  }
+
+  private handleSegmentBlur(): void {
+    this.focusedSegment = null;
+    this.behavior?.blur();
+  }
+
+  private handleSegmentKeyDown(segment: TimeSegment, event: KeyboardEvent): void {
+    this.behavior?.handleSegmentKeyDown(segment, event);
+    this.requestUpdate();
+  }
+
+  private renderSegment(segment: TimeSegment, _label: string) {
+    if (!this.behavior) return nothing;
+
+    const props = this.behavior.getSegmentProps(segment);
+    const displayValue = this.behavior.getSegmentDisplayValue(segment);
+    const isFocused = this.focusedSegment === segment;
+
+    return html`
+      <span
+        class="ds-time-picker__segment"
+        role=${props.role}
+        tabindex=${props.tabIndex}
+        aria-valuemin=${props["aria-valuemin"]}
+        aria-valuemax=${props["aria-valuemax"]}
+        aria-valuenow=${props["aria-valuenow"]}
+        aria-valuetext=${props["aria-valuetext"]}
+        aria-label=${props["aria-label"]}
+        aria-disabled=${props["aria-disabled"] ?? nothing}
+        data-segment=${segment}
+        data-focused=${isFocused || nothing}
+        @focus=${() => this.handleSegmentFocus(segment)}
+        @blur=${this.handleSegmentBlur}
+        @keydown=${(e: KeyboardEvent) => this.handleSegmentKeyDown(segment, e)}
+      >
+        ${displayValue}
+      </span>
+    `;
+  }
+
+  override render() {
+    if (!this.behavior) return nothing;
+
+    return html`
+      <div
+        class="ds-time-picker"
+        role="group"
+        aria-label=${this.ariaLabel || "Time picker"}
+        data-disabled=${this.disabled || nothing}
+      >
+        ${this.renderSegment("hour", "Hour")}
+        <span class="ds-time-picker__separator" aria-hidden="true">:</span>
+        ${this.renderSegment("minute", "Minute")}
+        ${
+          this.showSeconds
+            ? html`
+              <span class="ds-time-picker__separator" aria-hidden="true">:</span>
+              ${this.renderSegment("second", "Second")}
+            `
+            : nothing
+        }
+        ${
+          this.hourFormat === 12
+            ? html`
+              <span class="ds-time-picker__separator" aria-hidden="true">&nbsp;</span>
+              ${this.renderSegment("period", "AM/PM")}
+            `
+            : nothing
+        }
+      </div>
+    `;
+  }
+}
+
+define("ds-time-picker", DsTimePicker);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-time-picker": DsTimePicker;
+  }
+}

package/templates/toast/index.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+/**
+ * Toast Compound Component
+ *
+ * Non-blocking notification system with queue management and animations.
+ */
+
+import { ToastProvider } from "./provider.js";
+
+export type {
+  ToastProviderProps,
+  ToastVariant,
+  ToastPosition,
+  ToastState,
+  ToastAction,
+  ToastData,
+  ToastContextValue,
+} from "./provider.js";
+
+export { useToast, type ToastOptions, type UseToastReturn } from "./use-toast.js";
+
+/**
+ * Toast compound component.
+ *
+ * @example
+ * ```tsx
+ * // In your app root (e.g., layout.tsx)
+ * import { Toast } from "@hypoth-ui/react/client";
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <body>
+ *         <Toast.Provider position="top-right" max={5}>
+ *           {children}
+ *         </Toast.Provider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ *
+ * // In any component
+ * import { useToast } from "@hypoth-ui/react/client";
+ *
+ * function SaveButton() {
+ *   const { toast } = useToast();
+ *
+ *   const handleSave = async () => {
+ *     try {
+ *       await save();
+ *       toast({ title: "Saved!", variant: "success" });
+ *     } catch {
+ *       toast({
+ *         title: "Error",
+ *         description: "Failed to save",
+ *         variant: "error",
+ *         action: { label: "Retry", onClick: handleSave },
+ *       });
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleSave}>Save</button>;
+ * }
+ * ```
+ */
+export const Toast = {
+  Provider: ToastProvider,
+} as const;
+
+export default Toast;

package/templates/toast/provider.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+/**
+ * Toast Provider
+ *
+ * Context provider and viewport for toast notifications.
+ */
+
+import { type ReactNode, createContext, useCallback, useMemo, useState } from "react";
+import { Portal } from "../../primitives/portal.js";
+import { ToastItem } from "./toast.js";
+
+export type ToastVariant = "info" | "success" | "warning" | "error";
+export type ToastPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+export type ToastState = "entering" | "visible" | "exiting" | "dismissed";
+
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+
+export interface ToastOptions {
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+  action?: ToastAction;
+}
+
+export interface ToastData extends ToastOptions {
+  id: string;
+  state: ToastState;
+  createdAt: number;
+}
+
+export interface ToastContextValue {
+  show: (options: ToastOptions) => string;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+  pause: (id: string) => void;
+  resume: (id: string) => void;
+}
+
+export const ToastContext = createContext<ToastContextValue | null>(null);
+
+export interface ToastProviderProps {
+  /** Toast position */
+  position?: ToastPosition;
+  /** Maximum simultaneous toasts */
+  max?: number;
+  /** Default duration in ms */
+  duration?: number;
+  /** Children (your app) */
+  children: ReactNode;
+}
+
+let toastIdCounter = 0;
+
+function generateId(): string {
+  return `toast-${++toastIdCounter}-${Date.now()}`;
+}
+
+/**
+ * Toast Provider component.
+ *
+ * @example
+ * ```tsx
+ * <Toast.Provider position="top-right" max={5}>
+ *   <App />
+ * </Toast.Provider>
+ * ```
+ */
+export function ToastProvider({
+  position = "top-right",
+  max = 5,
+  duration: defaultDuration = 5000,
+  children,
+}: ToastProviderProps): ReactNode {
+  const [toasts, setToasts] = useState<ToastData[]>([]);
+  const timersRef = useMemo(() => new Map<string, ReturnType<typeof setTimeout>>(), []);
+
+  const show = useCallback(
+    (options: ToastOptions): string => {
+      const id = generateId();
+      const duration = options.duration ?? defaultDuration;
+
+      const newToast: ToastData = {
+        id,
+        title: options.title,
+        description: options.description,
+        variant: options.variant ?? "info",
+        duration,
+        action: options.action,
+        state: "entering",
+        createdAt: Date.now(),
+      };
+
+      setToasts((prev) => {
+        const updated = [newToast, ...prev];
+        // Trim to max, dismissing oldest
+        if (updated.length > max) {
+          const toRemove = updated.slice(max);
+          for (const t of toRemove) {
+            if (timersRef.has(t.id)) {
+              clearTimeout(timersRef.get(t.id));
+              timersRef.delete(t.id);
+            }
+          }
+          return updated.slice(0, max);
+        }
+        return updated;
+      });
+
+      // Transition to visible
+      setTimeout(() => {
+        setToasts((prev) =>
+          prev.map((t) => (t.id === id ? { ...t, state: "visible" as ToastState } : t))
+        );
+      }, 200);
+
+      // Set up auto-dismiss
+      if (duration > 0) {
+        const timerId = setTimeout(() => {
+          dismiss(id);
+        }, duration);
+        timersRef.set(id, timerId);
+      }
+
+      return id;
+    },
+    [defaultDuration, max, timersRef]
+  );
+
+  const dismiss = useCallback(
+    (id: string): void => {
+      // Clear timer
+      if (timersRef.has(id)) {
+        clearTimeout(timersRef.get(id));
+        timersRef.delete(id);
+      }
+
+      // Start exit animation
+      setToasts((prev) =>
+        prev.map((t) =>
+          t.id === id && t.state !== "exiting" && t.state !== "dismissed"
+            ? { ...t, state: "exiting" as ToastState }
+            : t
+        )
+      );
+
+      // Remove after animation
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, 150);
+    },
+    [timersRef]
+  );
+
+  const dismissAll = useCallback((): void => {
+    for (const toast of toasts) {
+      dismiss(toast.id);
+    }
+  }, [toasts, dismiss]);
+
+  const pause = useCallback(
+    (id: string): void => {
+      if (timersRef.has(id)) {
+        clearTimeout(timersRef.get(id));
+        timersRef.delete(id);
+      }
+    },
+    [timersRef]
+  );
+
+  const resume = useCallback(
+    (id: string): void => {
+      const toast = toasts.find((t) => t.id === id);
+      if (toast?.duration && toast.duration > 0 && toast.state === "visible") {
+        const elapsed = Date.now() - toast.createdAt;
+        const remaining = Math.max(toast.duration - elapsed, 1000);
+
+        const timerId = setTimeout(() => {
+          dismiss(id);
+        }, remaining);
+        timersRef.set(id, timerId);
+      }
+    },
+    [toasts, dismiss, timersRef]
+  );
+
+  const contextValue = useMemo<ToastContextValue>(
+    () => ({ show, dismiss, dismissAll, pause, resume }),
+    [show, dismiss, dismissAll, pause, resume]
+  );
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+      <Portal>
+        <section
+          className="ds-toast-viewport"
+          data-position={position}
+          aria-label="Notifications"
+          aria-live="polite"
+        >
+          {toasts.map((toast) => (
+            <ToastItem
+              key={toast.id}
+              toast={toast}
+              onDismiss={() => dismiss(toast.id)}
+              onPause={() => pause(toast.id)}
+              onResume={() => resume(toast.id)}
+            />
+          ))}
+        </section>
+      </Portal>
+    </ToastContext.Provider>
+  );
+}
+
+ToastProvider.displayName = "Toast.Provider";

package/templates/toast/toast.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+/**
+ * Toast Component
+ *
+ * Individual toast notification item.
+ */
+
+import { type ReactNode, useCallback, useState } from "react";
+import type { ToastData, ToastVariant } from "./provider.js";
+
+/**
+ * SVG icons for different toast variants
+ */
+const VARIANT_ICONS: Record<ToastVariant, ReactNode> = {
+  info: (
+    <svg className="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+  success: (
+    <svg className="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+  warning: (
+    <svg className="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+  error: (
+    <svg className="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+      <path
+        fillRule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+        clipRule="evenodd"
+      />
+    </svg>
+  ),
+};
+
+const CLOSE_ICON = (
+  <svg className="ds-toast__close-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+  </svg>
+);
+
+export interface ToastItemProps {
+  toast: ToastData;
+  onDismiss: () => void;
+  onPause: () => void;
+  onResume: () => void;
+}
+
+/**
+ * Individual toast notification component.
+ */
+export function ToastItem({ toast, onDismiss, onPause, onResume }: ToastItemProps): ReactNode {
+  const [isPaused, setIsPaused] = useState(false);
+
+  const handleMouseEnter = useCallback(() => {
+    setIsPaused(true);
+    onPause();
+  }, [onPause]);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsPaused(false);
+    onResume();
+  }, [onResume]);
+
+  const handleActionClick = useCallback(() => {
+    toast.action?.onClick();
+    onDismiss();
+  }, [toast.action, onDismiss]);
+
+  const variant = toast.variant ?? "info";
+
+  return (
+    <output
+      className="ds-toast"
+      aria-live="polite"
+      aria-atomic="true"
+      data-variant={variant}
+      data-state={toast.state}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {VARIANT_ICONS[variant]}
+
+      <div className="ds-toast__content">
+        <p className="ds-toast__title">{toast.title}</p>
+        {toast.description && <p className="ds-toast__description">{toast.description}</p>}
+        {toast.action && (
+          <div className="ds-toast__action">
+            <button
+              type="button"
+              className="ds-button ds-button--sm ds-button--ghost"
+              onClick={handleActionClick}
+            >
+              {toast.action.label}
+            </button>
+          </div>
+        )}
+      </div>
+
+      <button
+        className="ds-toast__close"
+        type="button"
+        aria-label="Dismiss notification"
+        onClick={onDismiss}
+      >
+        {CLOSE_ICON}
+      </button>
+
+      {toast.duration && toast.duration > 0 && (
+        <div className="ds-toast__progress">
+          <div
+            className="ds-toast__progress-bar"
+            style={{
+              animation: `ds-toast-progress ${toast.duration}ms linear forwards`,
+              animationPlayState: isPaused ? "paused" : "running",
+            }}
+          />
+        </div>
+      )}
+    </output>
+  );
+}
+
+ToastItem.displayName = "ToastItem";