@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/textarea/wc/textarea.ts

@@ -0,0 +1,280 @@
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { DSElement } from "../../base/ds-element.js";
+import { StandardEvents, emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+import { devWarn, hasAccessibleLabel, Warnings } from "../../utils/dev-warnings.js";
+
+export type TextareaSize = "sm" | "md" | "lg";
+
+/**
+ * A textarea component with optional auto-resize.
+ *
+ * @element ds-textarea
+ * @fires input - Fired when the textarea value changes
+ * @fires ds:change - Fired when the textarea value is committed
+ *
+ * @example
+ * ```html
+ * <ds-field>
+ *   <ds-label>Description</ds-label>
+ *   <ds-textarea placeholder="Enter description..."></ds-textarea>
+ * </ds-field>
+ * ```
+ */
+export class DsTextarea extends DSElement {
+  /** Textarea size */
+  @property({ type: String, reflect: true })
+  size: TextareaSize = "md";
+
+  /** Textarea name */
+  @property({ type: String, reflect: true })
+  name = "";
+
+  /** Textarea value */
+  @property({ type: String })
+  value = "";
+
+  /** Placeholder text */
+  @property({ type: String })
+  placeholder = "";
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Read-only state */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
+  /** Required state */
+  @property({ type: Boolean, reflect: true })
+  required = false;
+
+  /** Error state */
+  @property({ type: Boolean, reflect: true })
+  error = false;
+
+  /** Minimum length */
+  @property({ type: Number })
+  minlength?: number;
+
+  /** Maximum length */
+  @property({ type: Number })
+  maxlength?: number;
+
+  /** Number of visible text rows */
+  @property({ type: Number })
+  rows = 3;
+
+  /** Minimum number of rows (for auto-resize) */
+  @property({ type: Number })
+  minRows = 3;
+
+  /** Maximum number of rows (for auto-resize) */
+  @property({ type: Number })
+  maxRows?: number;
+
+  /** Enable auto-resize behavior */
+  @property({ type: Boolean })
+  autoResize = true;
+
+  /** ARIA labelledby - ID of element that labels this textarea */
+  @state()
+  private ariaLabelledBy?: string;
+
+  /** ARIA describedby - IDs of elements that describe this textarea */
+  @state()
+  private ariaDescribedBy?: string;
+
+  private attributeObserver: MutationObserver | null = null;
+  private nativeTextarea: HTMLTextAreaElement | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    // Observe ARIA attribute changes on the host element
+    this.attributeObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes") {
+          this.syncAriaAttributes();
+        }
+      }
+    });
+
+    this.attributeObserver.observe(this, {
+      attributes: true,
+      attributeFilter: [
+        "aria-labelledby",
+        "aria-describedby",
+        "aria-invalid",
+        "aria-required",
+        "aria-disabled",
+      ],
+    });
+
+    // Initial sync
+    this.syncAriaAttributes();
+
+    // Dev warning: Check for accessible label after DOM is ready
+    requestAnimationFrame(() => {
+      if (!hasAccessibleLabel(this)) {
+        const field = this.closest("ds-field");
+        const hasFieldLabel = field?.querySelector("ds-label") !== null;
+        if (!hasFieldLabel) {
+          devWarn(Warnings.inputMissingLabel("ds-textarea"));
+        }
+      }
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.attributeObserver?.disconnect();
+    this.attributeObserver = null;
+  }
+
+  /**
+   * Syncs ARIA attributes from the host element to internal state.
+   * The render method will apply these to the native textarea.
+   */
+  private syncAriaAttributes(): void {
+    this.ariaLabelledBy = this.getAttribute("aria-labelledby") ?? undefined;
+    this.ariaDescribedBy = this.getAttribute("aria-describedby") ?? undefined;
+
+    // Sync error state from aria-invalid
+    const ariaInvalid = this.getAttribute("aria-invalid");
+    if (ariaInvalid === "true") {
+      this.error = true;
+    } else if (ariaInvalid === "false") {
+      this.error = false;
+    }
+
+    // Sync required state from aria-required
+    const ariaRequired = this.getAttribute("aria-required");
+    if (ariaRequired === "true") {
+      this.required = true;
+    }
+
+    // Sync disabled state from aria-disabled
+    const ariaDisabled = this.getAttribute("aria-disabled");
+    if (ariaDisabled === "true") {
+      this.disabled = true;
+    }
+  }
+
+  private handleInput(event: Event) {
+    const textarea = event.target as HTMLTextAreaElement;
+    this.value = textarea.value;
+
+    // Auto-resize if enabled
+    if (this.autoResize) {
+      this.adjustHeight(textarea);
+    }
+
+    // Also emit native input event for compatibility
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private handleChange(event: Event) {
+    const textarea = event.target as HTMLTextAreaElement;
+    this.value = textarea.value;
+    // Emit ds:change event using standard convention
+    emitEvent(this, StandardEvents.CHANGE, {
+      detail: { value: this.value },
+    });
+  }
+
+  /**
+   * Adjusts the textarea height based on content.
+   */
+  private adjustHeight(textarea: HTMLTextAreaElement): void {
+    // Reset height to calculate scrollHeight
+    textarea.style.height = "auto";
+
+    // Calculate line height from computed styles
+    const computedStyle = getComputedStyle(textarea);
+    const lineHeight = Number.parseFloat(computedStyle.lineHeight) || 20;
+    const paddingTop = Number.parseFloat(computedStyle.paddingTop) || 0;
+    const paddingBottom = Number.parseFloat(computedStyle.paddingBottom) || 0;
+    const borderTop = Number.parseFloat(computedStyle.borderTopWidth) || 0;
+    const borderBottom = Number.parseFloat(computedStyle.borderBottomWidth) || 0;
+
+    // Calculate min and max heights based on rows
+    const minHeight =
+      this.minRows * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom;
+    const maxHeight = this.maxRows
+      ? this.maxRows * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom
+      : Number.POSITIVE_INFINITY;
+
+    // Set height within bounds
+    const scrollHeight = textarea.scrollHeight;
+    const newHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+    textarea.style.height = `${newHeight}px`;
+
+    // Enable scrolling if maxRows is set and content exceeds it
+    textarea.style.overflowY = scrollHeight > maxHeight ? "auto" : "hidden";
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    // Get reference to native textarea
+    if (!this.nativeTextarea) {
+      this.nativeTextarea = this.querySelector("textarea");
+    }
+
+    // Adjust height when value changes and auto-resize is enabled
+    if (changedProperties.has("value") && this.autoResize && this.nativeTextarea) {
+      this.adjustHeight(this.nativeTextarea);
+    }
+  }
+
+  /**
+   * Returns the effective number of rows.
+   */
+  private getEffectiveRows(): number {
+    return Math.max(this.rows, this.minRows);
+  }
+
+  override render() {
+    return html`
+      <div class="ds-textarea" part="container" data-size=${this.size}>
+        <textarea
+          part="textarea"
+          class="ds-textarea__field"
+          name=${this.name}
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          .rows=${this.getEffectiveRows()}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-labelledby=${ifDefined(this.ariaLabelledBy)}
+          aria-describedby=${ifDefined(this.ariaDescribedBy)}
+          aria-required=${this.required ? "true" : "false"}
+          minlength=${ifDefined(this.minlength)}
+          maxlength=${ifDefined(this.maxlength)}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        ></textarea>
+      </div>
+    `;
+  }
+}
+
+define("ds-textarea", DsTextarea);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-textarea": DsTextarea;
+  }
+}

package/templates/time-picker/index.ts

@@ -0,0 +1,42 @@
+/**
+ * TimePicker compound component for time selection.
+ *
+ * @example
+ * ```tsx
+ * // Basic 12-hour format
+ * <TimePicker.Root hourFormat={12} onValueChange={(time) => console.log(time)}>
+ *   <TimePicker.Segment segment="hour" />
+ *   <span>:</span>
+ *   <TimePicker.Segment segment="minute" />
+ *   <span> </span>
+ *   <TimePicker.Segment segment="period" />
+ * </TimePicker.Root>
+ *
+ * // 24-hour format with seconds
+ * <TimePicker.Root hourFormat={24} showSeconds>
+ *   <TimePicker.Segment segment="hour" />
+ *   <span>:</span>
+ *   <TimePicker.Segment segment="minute" />
+ *   <span>:</span>
+ *   <TimePicker.Segment segment="second" />
+ * </TimePicker.Root>
+ * ```
+ */
+
+export { TimePickerRoot, type TimePickerRootProps } from "./time-picker-root.js";
+export { TimePickerSegment, type TimePickerSegmentProps } from "./time-picker-segment.js";
+export {
+  useTimePickerContext,
+  type TimePickerContextValue,
+} from "./time-picker-context.js";
+
+// Re-export types from primitives
+export type { TimeValue, TimeSegment } from "@hypoth-ui/primitives-dom";
+
+export const TimePicker = {
+  Root: TimePickerRoot,
+  Segment: TimePickerSegment,
+} as const;
+
+import { TimePickerRoot } from "./time-picker-root.js";
+import { TimePickerSegment } from "./time-picker-segment.js";

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

@@ -0,0 +1,28 @@
+/**
+ * TimePicker context for compound component pattern.
+ */
+
+import type { TimePickerBehavior, TimeSegment, TimeValue } from "@hypoth-ui/primitives-dom";
+import { createCompoundContext } from "../../utils/create-context.js";
+
+export interface TimePickerContextValue {
+  /** TimePicker behavior instance */
+  behavior: TimePickerBehavior;
+  /** Current time value */
+  value: TimeValue;
+  /** Set value */
+  setValue: (value: TimeValue) => void;
+  /** Hour format */
+  hourFormat: 12 | 24;
+  /** Show seconds */
+  showSeconds: boolean;
+  /** Focused segment */
+  focusedSegment: TimeSegment | null;
+  /** Set focused segment */
+  setFocusedSegment: (segment: TimeSegment | null) => void;
+  /** Disabled state */
+  disabled: boolean;
+}
+
+export const [TimePickerProvider, useTimePickerContext] =
+  createCompoundContext<TimePickerContextValue>("TimePicker");

package/templates/time-picker/time-picker-root.tsx

@@ -0,0 +1,113 @@
+/**
+ * TimePicker Root component - provides context to all TimePicker compound components.
+ */
+
+import { type TimeSegment, type TimeValue, createTimePickerBehavior } from "@hypoth-ui/primitives-dom";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { TimePickerProvider } from "./time-picker-context.js";
+
+export interface TimePickerRootProps {
+  /** TimePicker content */
+  children?: ReactNode;
+  /** 12-hour or 24-hour format */
+  hourFormat?: 12 | 24;
+  /** Show seconds segment */
+  showSeconds?: boolean;
+  /** Controlled time value */
+  value?: TimeValue;
+  /** Default time value (uncontrolled) */
+  defaultValue?: TimeValue;
+  /** Called when time changes */
+  onValueChange?: (value: TimeValue) => void;
+  /** Minute step */
+  minuteStep?: number;
+  /** Second step */
+  secondStep?: number;
+  /** Minimum time */
+  minTime?: TimeValue;
+  /** Maximum time */
+  maxTime?: TimeValue;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+/**
+ * Root component for TimePicker compound pattern.
+ * Provides context to Segment components.
+ *
+ * @example
+ * ```tsx
+ * <TimePicker.Root hourFormat={12} onValueChange={(time) => console.log(time)}>
+ *   <TimePicker.Segment segment="hour" />
+ *   <span>:</span>
+ *   <TimePicker.Segment segment="minute" />
+ *   <TimePicker.Segment segment="period" />
+ * </TimePicker.Root>
+ * ```
+ */
+export function TimePickerRoot({
+  children,
+  hourFormat = 12,
+  showSeconds = false,
+  value: controlledValue,
+  defaultValue = { hour: 0, minute: 0, second: 0 },
+  onValueChange,
+  minuteStep = 1,
+  secondStep = 1,
+  minTime,
+  maxTime,
+  disabled = false,
+}: TimePickerRootProps) {
+  // Support controlled and uncontrolled modes
+  const [internalValue, setInternalValue] = useState<TimeValue>(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const [focusedSegment, setFocusedSegment] = useState<TimeSegment | null>(null);
+
+  const setValue = useCallback(
+    (nextValue: TimeValue) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    },
+    [isControlled, onValueChange]
+  );
+
+  // Create behavior instance
+  // biome-ignore lint/correctness/useExhaustiveDependencies: behavior is created once
+  const behavior = useMemo(
+    () =>
+      createTimePickerBehavior({
+        defaultValue: value,
+        hourFormat,
+        showSeconds,
+        minuteStep,
+        secondStep,
+        minTime,
+        maxTime,
+        disabled,
+        onValueChange: setValue,
+      }),
+    []
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      behavior,
+      value,
+      setValue,
+      hourFormat,
+      showSeconds,
+      focusedSegment,
+      setFocusedSegment,
+      disabled,
+    }),
+    [behavior, value, setValue, hourFormat, showSeconds, focusedSegment, disabled]
+  );
+
+  return <TimePickerProvider value={contextValue}>{children}</TimePickerProvider>;
+}
+
+TimePickerRoot.displayName = "TimePicker.Root";

package/templates/time-picker/time-picker-segment.tsx

@@ -0,0 +1,91 @@
+/**
+ * TimePicker Segment component - individual time segment (hour, minute, second, period).
+ */
+
+import type { TimeSegment } from "@hypoth-ui/primitives-dom";
+import {
+  type FocusEvent,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  forwardRef,
+  useCallback,
+} from "react";
+import { useTimePickerContext } from "./time-picker-context.js";
+
+export interface TimePickerSegmentProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+  /** Which segment this represents */
+  segment: TimeSegment;
+}
+
+/**
+ * Individual segment for time input (hour, minute, second, or period).
+ *
+ * @example
+ * ```tsx
+ * <TimePicker.Segment segment="hour" />
+ * <span>:</span>
+ * <TimePicker.Segment segment="minute" />
+ * ```
+ */
+export const TimePickerSegment = forwardRef<HTMLSpanElement, TimePickerSegmentProps>(
+  ({ segment, className, onFocus, onBlur, onKeyDown, ...restProps }, ref) => {
+    const { behavior, focusedSegment, setFocusedSegment, disabled } =
+      useTimePickerContext("TimePicker.Segment");
+
+    const props = behavior.getSegmentProps(segment);
+    const displayValue = behavior.getSegmentDisplayValue(segment);
+    const isFocused = focusedSegment === segment;
+
+    const handleFocus = useCallback(
+      (event: FocusEvent<HTMLSpanElement>) => {
+        setFocusedSegment(segment);
+        behavior.focusSegment(segment);
+        onFocus?.(event);
+      },
+      [behavior, segment, setFocusedSegment, onFocus]
+    );
+
+    const handleBlur = useCallback(
+      (event: FocusEvent<HTMLSpanElement>) => {
+        setFocusedSegment(null);
+        behavior.blur();
+        onBlur?.(event);
+      },
+      [behavior, setFocusedSegment, onBlur]
+    );
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLSpanElement>) => {
+        behavior.handleSegmentKeyDown(segment, event.nativeEvent);
+        onKeyDown?.(event);
+      },
+      [behavior, segment, onKeyDown]
+    );
+
+    return (
+      <span
+        ref={ref}
+        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"]}
+        className={className}
+        data-segment={segment}
+        data-focused={isFocused || undefined}
+        data-disabled={disabled || undefined}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        {...restProps}
+      >
+        {displayValue}
+      </span>
+    );
+  }
+);
+
+TimePickerSegment.displayName = "TimePicker.Segment";

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

@@ -0,0 +1 @@
+export { DsTimePicker } from "./time-picker.js";