@emara/ui 1.1.0

package/components/ui/tabs.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState } from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Per docs/emara-ui-phase-4-components.md §3.
+
+type TabsVariant = "line" | "pill" | "card" | "vertical";
+type TabsSize = "sm" | "md" | "lg";
+
+interface TabsContextValue {
+  variant: TabsVariant;
+  size: TabsSize;
+  lazy: boolean;
+  unmountInactive: boolean;
+  /** Values that have ever been activated — used for `lazy` mount tracking. */
+  activated: Set<string>;
+  markActivated: (value: string) => void;
+  currentValue: string | undefined;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext(): TabsContextValue {
+  const ctx = useContext(TabsContext);
+  if (!ctx) {
+    throw new Error("Tabs subcomponents must be used inside <Tabs>");
+  }
+  return ctx;
+}
+
+// --- Tabs (root) ------------------------------------------------------------
+
+type TabsRootProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+  variant?: TabsVariant;
+  size?: TabsSize;
+  lazy?: boolean;
+  unmountInactive?: boolean;
+};
+
+const Tabs = forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, TabsRootProps>(function Tabs(
+  {
+    className,
+    variant = "line",
+    size = "md",
+    lazy = false,
+    unmountInactive = false,
+    orientation,
+    value,
+    defaultValue,
+    onValueChange,
+    ...props
+  },
+  ref,
+) {
+  // `variant="vertical"` implies vertical orientation unless overridden.
+  const resolvedOrientation = orientation ?? (variant === "vertical" ? "vertical" : "horizontal");
+
+  const [internalValue, setInternalValue] = useState<string | undefined>(
+    typeof defaultValue === "string" ? defaultValue : undefined,
+  );
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : internalValue;
+
+  const [activated, setActivated] = useState<Set<string>>(() => {
+    const s = new Set<string>();
+    if (currentValue) s.add(currentValue);
+    return s;
+  });
+
+  // Track every value that becomes active so `lazy` mounting works.
+  useEffect(() => {
+    if (!currentValue) return;
+    setActivated((prev) => {
+      if (prev.has(currentValue)) return prev;
+      const next = new Set(prev);
+      next.add(currentValue);
+      return next;
+    });
+  }, [currentValue]);
+
+  const handleValueChange = (next: string) => {
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+
+  const ctx = useMemo<TabsContextValue>(
+    () => ({
+      variant,
+      size,
+      lazy,
+      unmountInactive,
+      activated,
+      markActivated: (v) => {
+        setActivated((prev) => {
+          if (prev.has(v)) return prev;
+          const next = new Set(prev);
+          next.add(v);
+          return next;
+        });
+      },
+      currentValue,
+    }),
+    [variant, size, lazy, unmountInactive, activated, currentValue],
+  );
+
+  return (
+    <TabsContext.Provider value={ctx}>
+      <TabsPrimitive.Root
+        ref={ref}
+        orientation={resolvedOrientation}
+        {...(currentValue !== undefined ? { value: currentValue } : {})}
+        {...(isControlled || defaultValue === undefined ? {} : { defaultValue })}
+        onValueChange={handleValueChange}
+        className={cn(variant === "vertical" && "flex w-full gap-4", className)}
+        {...props}
+      />
+    </TabsContext.Provider>
+  );
+});
+Tabs.displayName = "Tabs";
+
+// --- TabsList ---------------------------------------------------------------
+
+const tabsListVariants = cva("inline-flex items-center", {
+  variants: {
+    variant: {
+      line: "relative border-b border-border w-full",
+      pill: "gap-1 rounded-md bg-muted p-1",
+      card: "gap-1",
+      vertical: "flex-col gap-1 items-stretch border-e border-border pe-2 min-w-40",
+    },
+    scrollable: {
+      true: "overflow-x-auto scrollbar-thin",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    { variant: "vertical", scrollable: true, class: "overflow-x-visible overflow-y-auto" },
+  ],
+  defaultVariants: {
+    variant: "line",
+    scrollable: false,
+  },
+});
+
+type TabsListProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+  scrollable?: boolean;
+};
+
+const TabsList = forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(
+  function TabsList({ className, scrollable, ...props }, ref) {
+    const { variant } = useTabsContext();
+    return (
+      <TabsPrimitive.List
+        ref={ref}
+        className={cn(tabsListVariants({ variant, scrollable }), className)}
+        {...props}
+      />
+    );
+  },
+);
+TabsList.displayName = "TabsList";
+
+// --- TabsTrigger ------------------------------------------------------------
+
+const tabsTriggerVariants = cva(
+  [
+    "inline-flex items-center gap-2 whitespace-nowrap font-medium select-none cursor-pointer",
+    "transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:size-4 [&_svg]:shrink-0",
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        line: [
+          "relative px-3 py-2 text-muted-foreground hover:text-foreground",
+          "data-[state=active]:text-foreground",
+          // Underline indicator (uses pseudo-element so it sits at the bottom of list border)
+          "after:absolute after:inset-x-0 after:-bottom-px after:h-0.5",
+          "after:bg-transparent after:transition-colors after:duration-normal",
+          "data-[state=active]:after:bg-primary",
+        ].join(" "),
+        pill: [
+          "rounded-md px-3 py-1.5 text-muted-foreground hover:text-foreground",
+          "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        ].join(" "),
+        card: [
+          "rounded-t-md border border-b-0 border-transparent px-4 py-2 text-muted-foreground",
+          "hover:text-foreground",
+          "data-[state=active]:border-border data-[state=active]:bg-card data-[state=active]:text-foreground",
+          "-mb-px data-[state=active]:z-10",
+        ].join(" "),
+        vertical: [
+          "rounded-md px-3 py-2 text-start text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+          "data-[state=active]:bg-accent data-[state=active]:text-accent-foreground",
+        ].join(" "),
+      },
+      size: {
+        sm: "text-xs h-8",
+        md: "text-sm h-9",
+        lg: "text-base h-10",
+      },
+    },
+    defaultVariants: {
+      variant: "line",
+      size: "md",
+    },
+  },
+);
+
+type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+};
+
+const TabsTrigger = forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, TabsTriggerProps>(
+  function TabsTrigger({ className, icon, badge, children, value, ...props }, ref) {
+    const { variant, size } = useTabsContext();
+    return (
+      <TabsPrimitive.Trigger
+        ref={ref}
+        value={value}
+        className={cn(tabsTriggerVariants({ variant, size }), className)}
+        {...props}
+      >
+        {icon ? <span aria-hidden="true">{icon}</span> : null}
+        <span>{children}</span>
+        {badge ? <span className="ms-1 inline-flex items-center">{badge}</span> : null}
+      </TabsPrimitive.Trigger>
+    );
+  },
+);
+TabsTrigger.displayName = "TabsTrigger";
+
+// --- TabsContent ------------------------------------------------------------
+
+type TabsContentProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
+
+const TabsContent = forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, TabsContentProps>(
+  function TabsContent({ className, value, forceMount, children, ...props }, ref) {
+    const { lazy, unmountInactive, activated, currentValue, variant } = useTabsContext();
+    const hasMountedRef = useRef(false);
+    const valueStr = typeof value === "string" ? value : "";
+    const isActive = currentValue === valueStr;
+
+    if (isActive) hasMountedRef.current = true;
+
+    // Decide whether to render. `unmountInactive` wins (always render only when
+    // active). Otherwise, with `lazy`, render once activated and keep mounted.
+    let shouldRender = true;
+    if (unmountInactive) shouldRender = isActive;
+    else if (lazy) shouldRender = activated.has(valueStr) || hasMountedRef.current;
+
+    // When kept mounted but inactive, Radix hides via `hidden` attribute
+    // automatically; we just need `forceMount` so it stays in the DOM.
+    const effectiveForceMount = !unmountInactive ? true : forceMount;
+
+    if (!shouldRender) return null;
+
+    return (
+      <TabsPrimitive.Content
+        ref={ref}
+        value={value}
+        {...(effectiveForceMount ? { forceMount: true as const } : {})}
+        className={cn(
+          "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          variant !== "vertical" && "mt-3",
+          variant === "vertical" && "flex-1",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </TabsPrimitive.Content>
+    );
+  },
+);
+TabsContent.displayName = "TabsContent";
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, tabsTriggerVariants };
+export type { TabsRootProps, TabsListProps, TabsTriggerProps, TabsContentProps };

package/components/ui/textarea.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Textarea } from "./textarea";
+
+const meta: Meta<typeof Textarea> = {
+  title: "Foundations/Textarea",
+  component: Textarea,
+  parameters: { layout: "centered" },
+  argTypes: {
+    size: { control: "select", options: ["sm", "md", "lg"] },
+    invalid: { control: "boolean" },
+    autoResize: { control: "boolean" },
+    showCount: { control: "boolean" },
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    rows: { control: "number" },
+    maxRows: { control: "number" },
+    maxLength: { control: "number" },
+  },
+  args: { placeholder: "Tell us a bit about yourself…" },
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="w-96">
+      <Textarea {...args} />
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <div className="w-96 space-y-3">
+      <Textarea {...args} size="sm" placeholder="sm" />
+      <Textarea {...args} size="md" placeholder="md" />
+      <Textarea {...args} size="lg" placeholder="lg" />
+    </div>
+  ),
+};
+
+export const Invalid: Story = {
+  args: { invalid: true, defaultValue: "Something's wrong." },
+  render: (args) => (
+    <div className="w-96">
+      <Textarea {...args} />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, defaultValue: "Cannot edit this." },
+  render: (args) => (
+    <div className="w-96">
+      <Textarea {...args} />
+    </div>
+  ),
+};
+
+export const ReadOnly: Story = {
+  args: { readOnly: true, defaultValue: "Read-only content." },
+  render: (args) => (
+    <div className="w-96">
+      <Textarea {...args} />
+    </div>
+  ),
+};
+
+export const AutoResize: Story = {
+  args: { autoResize: true, defaultValue: "Type more…\nlines\ngrow\nthe field" },
+  render: (args) => (
+    <div className="w-96">
+      <Textarea {...args} />
+    </div>
+  ),
+};
+
+export const AutoResizeWithMaxRows: Story = {
+  args: { autoResize: true, maxRows: 4, defaultValue: "Up to 4 rows;\nthen it scrolls." },
+  render: (args) => (
+    <div className="w-96">
+      <Textarea {...args} />
+    </div>
+  ),
+};
+
+export const WithCharacterCount: Story = {
+  args: { showCount: true, maxLength: 140 },
+  render: (args) => (
+    <div className="w-96">
+      <Textarea {...args} />
+    </div>
+  ),
+};

package/components/ui/textarea.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Per docs/emara-ui-phase-1-components.md §3.
+
+const textareaVariants = cva(
+  [
+    "block w-full rounded-md border border-input bg-background text-foreground",
+    "ps-3 pe-3 py-2",
+    "placeholder:text-muted-foreground",
+    "transition-colors",
+    "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "read-only:bg-muted",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "text-xs leading-5 min-h-16",
+        md: "text-sm leading-5 min-h-20",
+        lg: "text-base leading-6 min-h-28",
+      },
+      invalid: {
+        true: "border-destructive focus-visible:ring-destructive",
+        false: "",
+      },
+      resize: {
+        vertical: "resize-y",
+        none: "resize-none",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      invalid: false,
+      resize: "vertical",
+    },
+  },
+);
+
+type TextareaVariants = VariantProps<typeof textareaVariants>;
+
+type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & {
+  size?: TextareaVariants["size"];
+  invalid?: boolean;
+  autoResize?: boolean;
+  maxRows?: number;
+  showCount?: boolean;
+  asChild?: boolean;
+};
+
+// Internal hook — keeps the textarea sized to its content, capped at `maxRows`.
+function useAutoResize(
+  ref: React.RefObject<HTMLTextAreaElement | null>,
+  enabled: boolean,
+  maxRows: number | undefined,
+  value: string,
+) {
+  const resize = useCallback(() => {
+    const node = ref.current;
+    if (!node) return;
+    node.style.height = "auto";
+    const styles = window.getComputedStyle(node);
+    // `styles.lineHeight` is normally a `<n>px` string (Tailwind's text-*
+    // utilities all set an explicit line-height). For elements that resolve
+    // to `normal`, fall back to fontSize × 1.5 — the conventional ratio —
+    // and finally to 20px (≈ --text-sm--line-height) if everything fails.
+    const lineHeight = parseFloat(styles.lineHeight) || parseFloat(styles.fontSize) * 1.5 || 20;
+    const paddingTop = parseFloat(styles.paddingTop) || 0;
+    const paddingBottom = parseFloat(styles.paddingBottom) || 0;
+    const borderTop = parseFloat(styles.borderTopWidth) || 0;
+    const borderBottom = parseFloat(styles.borderBottomWidth) || 0;
+    const chrome = paddingTop + paddingBottom + borderTop + borderBottom;
+    const contentHeight = node.scrollHeight - chrome;
+    const cap = maxRows !== undefined ? maxRows * lineHeight + chrome : Number.POSITIVE_INFINITY;
+    const next = Math.min(node.scrollHeight, cap);
+    node.style.height = `${next}px`;
+    node.style.overflowY = contentHeight + chrome > cap ? "auto" : "hidden";
+  }, [ref, maxRows]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    resize();
+  }, [enabled, resize, value]);
+}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  {
+    className,
+    size,
+    invalid = false,
+    autoResize = false,
+    maxRows,
+    showCount = false,
+    rows = 4,
+    maxLength,
+    asChild = false,
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    children,
+    ...props
+  },
+  forwardedRef,
+) {
+  const isControlled = value !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = useState<string>(
+    typeof defaultValue === "string" ? defaultValue : "",
+  );
+  const currentValue = isControlled ? String(value ?? "") : uncontrolledValue;
+
+  const innerRef = useRef<HTMLTextAreaElement | null>(null);
+  const setRefs = (node: HTMLTextAreaElement | null) => {
+    innerRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+
+  useAutoResize(innerRef, autoResize && !disabled, maxRows, currentValue);
+
+  const reactId = useId();
+  const textareaId = id ?? reactId;
+  const counterId = showCount ? `${textareaId}-count` : undefined;
+  const describedBy = [ariaDescribedBy, counterId].filter(Boolean).join(" ") || undefined;
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (!isControlled) setUncontrolledValue(e.target.value);
+    onChange?.(e);
+  };
+
+  const Field = asChild ? Slot : "textarea";
+  const showCounter = showCount && maxLength !== undefined;
+
+  return (
+    <div className="w-full">
+      <Field
+        ref={setRefs}
+        id={textareaId}
+        rows={rows}
+        maxLength={maxLength}
+        className={cn(
+          textareaVariants({ size, invalid, resize: autoResize ? "none" : "vertical" }),
+          className,
+        )}
+        disabled={disabled}
+        readOnly={readOnly}
+        aria-invalid={invalid || undefined}
+        aria-describedby={describedBy}
+        value={isControlled ? currentValue : undefined}
+        defaultValue={isControlled ? undefined : defaultValue}
+        onChange={handleChange}
+        {...props}
+      >
+        {asChild ? children : null}
+      </Field>
+      {showCounter ? (
+        <div
+          id={counterId}
+          className={cn(
+            "text-muted-foreground mt-1 text-end text-xs tabular-nums",
+            currentValue.length >= (maxLength ?? 0) && "text-destructive",
+          )}
+          aria-live="polite"
+        >
+          {currentValue.length}/{maxLength}
+        </div>
+      ) : null}
+    </div>
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea, textareaVariants };
+export type { TextareaProps };