@sixthshift/design-system 0.1.0

package/src/components/StatsCard/StatsCard.tsx

@@ -0,0 +1,40 @@
+import { Caption } from "@sixthshift/design-system/caption";
+import { cn } from "@sixthshift/design-system/utils";
+import type { ReactNode } from "react";
+
+export type StatsCardProps = {
+  /** Title of the stats card */
+  title: string;
+  /** Description text shown below the title */
+  description: string;
+  /** Optional icon displayed in the header */
+  icon?: ReactNode;
+  /** Visual status indicator via left border color */
+  status?: "healthy" | "warning" | "error" | "neutral";
+  /** Card content */
+  children: ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+};
+
+const statusColors = {
+  healthy: "border-l-green-500",
+  warning: "border-l-amber-500",
+  error: "border-l-red-500",
+  neutral: "border-l-border-subtle",
+};
+
+export const StatsCard = ({ title, description, icon, status = "neutral", children, className }: StatsCardProps) => {
+  return (
+    <div className={cn("flex flex-col gap-3 rounded border border-border-subtle border-l-2 bg-bg-subtle p-4", statusColors[status], className)}>
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex flex-col gap-0.5">
+          <span className="font-medium text-fg-normal">{title}</span>
+          <Caption>{description}</Caption>
+        </div>
+        {icon && <div className="text-fg-subtle">{icon}</div>}
+      </div>
+      <div className="flex-1">{children}</div>
+    </div>
+  );
+};

package/src/components/StatsCard/index.ts

@@ -0,0 +1 @@
+export { StatsCard, type StatsCardProps } from "./StatsCard";

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,128 @@
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { Label } from "@sixthshift/design-system/label";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type SwitchProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> & {
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Default checked state for uncontrolled mode */
+  defaultChecked?: boolean;
+  /** Called when checked state changes */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Shows a loading spinner in the thumb and prevents interaction */
+  pending?: boolean;
+  /** Input name for form submission */
+  name?: string;
+  /** Value submitted with form (defaults to "on") */
+  value?: string;
+  /** Label rendered next to the switch. Wraps in a <Label> for a11y. */
+  label?: React.ReactNode;
+  /** Classes applied to the wrapping element when `label` is provided */
+  labelClassName?: string;
+};
+
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    {
+      className,
+      checked: controlledChecked,
+      defaultChecked = false,
+      onCheckedChange,
+      pending = false,
+      disabled,
+      name,
+      value = "on",
+      label,
+      labelClassName,
+      id: idProp,
+      ...props
+    },
+    ref
+  ) => {
+    const generatedId = React.useId();
+    const id = idProp ?? (label ? generatedId : undefined);
+
+    const [checked, setChecked] = useControllableState({
+      value: controlledChecked,
+      defaultValue: defaultChecked,
+      onChange: onCheckedChange,
+    });
+
+    const button = (
+      <>
+        <button
+          type="button"
+          role="switch"
+          id={id}
+          aria-checked={checked}
+          aria-busy={pending || undefined}
+          data-state={checked ? "checked" : "unchecked"}
+          data-pending={pending || undefined}
+          disabled={disabled}
+          ref={ref}
+          onClick={() => !pending && setChecked(!checked)}
+          className={cn(
+            "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-normal disabled:cursor-not-allowed disabled:opacity-50",
+            checked ? "bg-bg-brand" : "bg-bg-subtle",
+            pending && "cursor-default",
+            className
+          )}
+          {...props}
+        >
+          <span
+            className={cn(
+              "pointer-events-none flex h-4 w-4 items-center justify-center rounded-full bg-bg-normal shadow-lg ring-0 transition-transform",
+              checked ? "translate-x-4" : "translate-x-0"
+            )}
+          >
+            {pending && (
+              <svg className="h-2.5 w-2.5 animate-spin text-fg-subtle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+            )}
+          </span>
+        </button>
+        {name && (
+          <input
+            type="checkbox"
+            aria-hidden
+            tabIndex={-1}
+            name={name}
+            value={value}
+            checked={checked}
+            disabled={disabled}
+            readOnly
+            style={{
+              position: "absolute",
+              pointerEvents: "none",
+              opacity: 0,
+              margin: 0,
+              width: 0,
+              height: 0,
+            }}
+          />
+        )}
+      </>
+    );
+
+    if (!label) return button;
+
+    return (
+      <div className={cn("flex items-center gap-2", labelClassName)}>
+        {button}
+        <Label htmlFor={id} className={cn(disabled && "cursor-not-allowed opacity-50")}>
+          {label}
+        </Label>
+      </div>
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+export { Switch };

package/src/components/Switch/index.ts

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from "./Switch";

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,49 @@
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import type * as React from "react";
+import { useId } from "react";
+import { type TabItem, TabsContext } from "./components/TabsContext";
+import { TabsList } from "./components/TabsList";
+import { TabsPanels } from "./components/TabsPanels";
+
+export type TabsProps = {
+  /** Tab definitions */
+  items: TabItem[];
+  /** Controlled selected value */
+  value?: string;
+  /** Default value for uncontrolled mode */
+  defaultValue?: string;
+  /** Callback when selection changes */
+  onValueChange?: (value: string) => void;
+  /** Children - compound components (Tabs.List, Tabs.Panels) */
+  children: React.ReactNode;
+};
+
+const TabsRoot = ({ items, value: controlledValue, defaultValue, onValueChange, children }: TabsProps) => {
+  // Default to first non-disabled item if no defaultValue provided
+  const firstEnabledValue = items.find((item) => !item.disabled)?.value ?? items[0]?.value ?? "";
+
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue: defaultValue ?? firstEnabledValue,
+    onChange: onValueChange,
+  });
+
+  const id = useId();
+  const baseId = `tabs-${id}`;
+
+  const contextValue: React.ContextType<typeof TabsContext> = {
+    items,
+    value,
+    onValueChange: setValue,
+    baseId,
+  };
+
+  return <TabsContext.Provider value={contextValue}>{children}</TabsContext.Provider>;
+};
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Panels: TabsPanels,
+});
+
+export type { TabItem };

package/src/components/Tabs/components/TabsContext.tsx

@@ -0,0 +1,35 @@
+import { createContext, type ReactNode, useContext } from "react";
+
+export type TabItem = {
+  /** Unique identifier for this tab */
+  value: string;
+  /** Tab trigger content (displayed in the tab list) */
+  label: ReactNode;
+  /** Optional badge to display on the tab */
+  badge?: number | string;
+  /** Whether this tab is disabled */
+  disabled?: boolean;
+  /** Panel content - can be a ReactNode or lazy function */
+  content: ReactNode | (() => ReactNode);
+};
+
+export type TabsContextValue = {
+  /** All tab items */
+  items: TabItem[];
+  /** Currently selected tab value */
+  value: string;
+  /** Callback when selection changes */
+  onValueChange: (value: string) => void;
+  /** Base ID for generating ARIA IDs */
+  baseId: string;
+};
+
+export const TabsContext = createContext<TabsContextValue | null>(null);
+
+export function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs compound components must be used within <Tabs>");
+  }
+  return context;
+}

package/src/components/Tabs/components/TabsList.tsx

@@ -0,0 +1,98 @@
+import { cn } from "@sixthshift/design-system/utils";
+import type * as React from "react";
+import { useCallback, useRef } from "react";
+import { useTabsContext } from "./TabsContext";
+import { TabsTrigger } from "./TabsTrigger";
+
+export type TabsListProps = {
+  /** Layout direction */
+  orientation?: "horizontal" | "vertical";
+  /** Additional CSS classes */
+  className?: string;
+};
+
+export const TabsList = ({ orientation = "horizontal", className }: TabsListProps) => {
+  const { items, value, onValueChange } = useTabsContext();
+  const triggerRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Get enabled items and their indices
+  const enabledItems = items.map((item, index) => ({ item, index })).filter(({ item }) => !item.disabled);
+
+  const getCurrentEnabledIndex = useCallback(() => {
+    return enabledItems.findIndex(({ item }) => item.value === value);
+  }, [enabledItems, value]);
+
+  const focusAndSelect = useCallback(
+    (index: number) => {
+      const targetRef = triggerRefs.current[index];
+      if (targetRef) {
+        targetRef.focus();
+        const item = items[index];
+        if (item && !item.disabled) {
+          onValueChange(item.value);
+        }
+      }
+    },
+    [items, onValueChange]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      const currentEnabledIdx = getCurrentEnabledIndex();
+      if (currentEnabledIdx === -1 || enabledItems.length === 0) return;
+
+      const isHorizontal = orientation === "horizontal";
+      const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+      const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+
+      let newEnabledIdx = currentEnabledIdx;
+
+      switch (event.key) {
+        case prevKey:
+          event.preventDefault();
+          newEnabledIdx = currentEnabledIdx > 0 ? currentEnabledIdx - 1 : enabledItems.length - 1;
+          break;
+        case nextKey:
+          event.preventDefault();
+          newEnabledIdx = currentEnabledIdx < enabledItems.length - 1 ? currentEnabledIdx + 1 : 0;
+          break;
+        case "Home":
+          event.preventDefault();
+          newEnabledIdx = 0;
+          break;
+        case "End":
+          event.preventDefault();
+          newEnabledIdx = enabledItems.length - 1;
+          break;
+        default:
+          return;
+      }
+
+      const targetItem = enabledItems[newEnabledIdx];
+      if (targetItem) {
+        focusAndSelect(targetItem.index);
+      }
+    },
+    [orientation, getCurrentEnabledIndex, enabledItems, focusAndSelect]
+  );
+
+  return (
+    <div
+      role="tablist"
+      aria-orientation={orientation}
+      className={cn("inline-flex gap-1", orientation === "vertical" ? "flex-col" : "flex-row items-center", className)}
+      onKeyDown={handleKeyDown}
+    >
+      {items.map((item, index) => (
+        <TabsTrigger
+          key={item.value}
+          item={item}
+          index={index}
+          ref={(el) => {
+            triggerRefs.current[index] = el;
+          }}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/Tabs/components/TabsPanels.tsx

@@ -0,0 +1,26 @@
+import { cn } from "@sixthshift/design-system/utils";
+import { useTabsContext } from "./TabsContext";
+
+export type TabsPanelsProps = {
+  /** Additional CSS classes */
+  className?: string;
+};
+
+export const TabsPanels = ({ className }: TabsPanelsProps) => {
+  const { items, value, baseId } = useTabsContext();
+
+  const activeItem = items.find((item) => item.value === value);
+  if (!activeItem) return null;
+
+  const panelId = `${baseId}-panel-${value}`;
+  const triggerId = `${baseId}-trigger-${value}`;
+
+  // Support lazy content
+  const content = typeof activeItem.content === "function" ? activeItem.content() : activeItem.content;
+
+  return (
+    <div id={panelId} role="tabpanel" aria-labelledby={triggerId} className={cn("focus-visible:outline-hidden", className)}>
+      {content}
+    </div>
+  );
+};

package/src/components/Tabs/components/TabsTrigger.tsx

@@ -0,0 +1,69 @@
+import { Badge } from "@sixthshift/design-system/badge";
+import { cn } from "@sixthshift/design-system/utils";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { type TabItem, useTabsContext } from "./TabsContext";
+
+const tabsTriggerVariants = cva(
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
+  px-3 py-1.5 text-sm font-medium cursor-pointer transition-colors focus-visible:outline-hidden
+  focus-visible:ring-2 focus-visible:ring-focus-ring
+  focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50`,
+  {
+    variants: {
+      selected: {
+        true: "bg-bg-brand-pressed text-fg-on-brand-pressed",
+        false: "text-fg-subtle hover:bg-bg-subtle-hovered hover:text-fg-normal",
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  }
+);
+
+export type TabsTriggerProps = {
+  item: TabItem;
+  index: number;
+};
+
+export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(({ item, index }, ref) => {
+  const { value, onValueChange, baseId } = useTabsContext();
+  const isSelected = value === item.value;
+  const triggerId = `${baseId}-trigger-${item.value}`;
+  const panelId = `${baseId}-panel-${item.value}`;
+
+  const handleClick = () => {
+    if (!item.disabled) {
+      onValueChange(item.value);
+    }
+  };
+
+  return (
+    <button
+      ref={ref}
+      id={triggerId}
+      role="tab"
+      type="button"
+      aria-selected={isSelected}
+      // Only the selected panel is mounted (content is lazy), so pointing an
+      // unselected tab at a panel id absent from the DOM would be a dangling
+      // reference. Omit it instead.
+      aria-controls={isSelected ? panelId : undefined}
+      tabIndex={isSelected ? 0 : -1}
+      disabled={item.disabled}
+      data-index={index}
+      className={cn(tabsTriggerVariants({ selected: isSelected }))}
+      onClick={handleClick}
+    >
+      {item.label}
+      {item.badge !== undefined && (
+        <Badge variant="soft" intent="neutral" className="ml-1 min-w-[1.25rem] px-1.5 py-0">
+          {item.badge}
+        </Badge>
+      )}
+    </button>
+  );
+});
+
+TabsTrigger.displayName = "TabsTrigger";

package/src/components/Tabs/index.ts

@@ -0,0 +1,3 @@
+export { TabsList, type TabsListProps } from "./components/TabsList";
+export { TabsPanels, type TabsPanelsProps } from "./components/TabsPanels";
+export { type TabItem, Tabs, type TabsProps } from "./Tabs";

package/src/components/TagChip/TagChip.tsx

@@ -0,0 +1,46 @@
+import { Badge } from "@sixthshift/design-system/badge";
+import { cn } from "@sixthshift/design-system/utils";
+import { X } from "lucide-react";
+
+/**
+ * One tag, rendered prettily. A `namespace:value` tag (`project:website`)
+ * shows the namespace muted; a plain tag (`urgent`) renders as-is.
+ *
+ * Pure presentation. Entity-reference tags (`person:per_…`) are NOT rendered
+ * here — the web `TagRef` intercepts those and resolves them to a name chip
+ * (identity-rendering.md); TagChip never shows a raw id.
+ *
+ * Two disjoint modes: navigable (no `onRemove`; the caller wraps it in a link)
+ * or removable (`onRemove` renders an × — used by `TagInput` and edit surfaces).
+ */
+export type TagChipProps = {
+  tag: string;
+  /** When set, renders an × affordance. Omit for read-only / navigable chips. */
+  onRemove?: () => void;
+  /** `sm` (default) for rows; `default` for detail pages. */
+  size?: "sm" | "default";
+  className?: string;
+};
+
+export const TagChip = ({ tag, onRemove, size = "sm", className }: TagChipProps) => {
+  const sep = tag.indexOf(":");
+  const namespace = sep > 0 ? tag.slice(0, sep) : null;
+  const value = sep > 0 ? tag.slice(sep + 1) : tag;
+
+  return (
+    <Badge variant="outline" intent="muted" className={cn("gap-1 font-normal", size === "sm" ? "px-1.5 py-0 text-[10px]" : "px-2 py-0.5 text-xs", className)}>
+      {namespace && <span className="text-fg-subtle">{namespace}:</span>}
+      <span>{value}</span>
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove ${tag}`}
+          className="-mr-0.5 ml-0.5 rounded-sm text-fg-subtle hover:text-fg-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+        >
+          <X className="h-3 w-3" />
+        </button>
+      )}
+    </Badge>
+  );
+};

package/src/components/TagChip/index.ts

@@ -0,0 +1 @@
+export { TagChip, type TagChipProps } from "./TagChip";

package/src/components/TagInput/TagInput.tsx

@@ -0,0 +1,60 @@
+import { TagChip } from "@sixthshift/design-system/tag-chip";
+import { cn } from "@sixthshift/design-system/utils";
+import { type KeyboardEvent, useState } from "react";
+
+/**
+ * Token input for tags: existing tags render as removable chips, typing plus
+ * Enter or comma commits a new one, Backspace on an empty field removes the
+ * last. Duplicates are ignored. Controlled — the parent owns `value`.
+ *
+ * The chrome matches `Input` (same border/focus tokens) so it sits naturally
+ * among other form fields.
+ */
+export type TagInputProps = {
+  value: string[];
+  onChange: (tags: string[]) => void;
+  placeholder?: string;
+  id?: string;
+  className?: string;
+};
+
+export const TagInput = ({ value, onChange, placeholder = "Add a tag…", id, className }: TagInputProps) => {
+  const [draft, setDraft] = useState("");
+
+  const commit = () => {
+    const tag = draft.trim();
+    if (tag && !value.includes(tag)) onChange([...value, tag]);
+    setDraft("");
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      commit();
+    } else if (e.key === "Backspace" && draft === "" && value.length > 0) {
+      onChange(value.slice(0, -1));
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-border-normal bg-bg-normal px-2 py-1.5 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-focus-ring",
+        className
+      )}
+    >
+      {value.map((tag) => (
+        <TagChip key={tag} tag={tag} onRemove={() => onChange(value.filter((t) => t !== tag))} />
+      ))}
+      <input
+        id={id}
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={commit}
+        placeholder={value.length > 0 ? "" : placeholder}
+        className="min-w-[8ch] flex-1 bg-transparent outline-none placeholder:text-fg-subtle"
+      />
+    </div>
+  );
+};

package/src/components/TagInput/index.ts

@@ -0,0 +1 @@
+export { TagInput, type TagInputProps } from "./TagInput";

package/src/components/Text/Text.tsx

@@ -0,0 +1,35 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+/*
+ * Text Preset Reference
+ * ---------------------
+ * When creating semantic text presets, consider these Tailwind classes:
+ *
+ * Size:      text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl
+ * Weight:    font-normal, font-medium, font-semibold, font-bold
+ * Color:     text-fg-normal, text-fg-subtle, text-fg-strong, text-fg-brand, text-fg-danger, text-fg-success, text-fg-warning
+ * Leading:   leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose
+ * Tracking:  tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest
+ * Align:     text-left, text-center, text-right
+ * Transform: uppercase, lowercase, capitalize, normal-case
+ * Truncate:  truncate
+ */
+
+export type TextElement = "span" | "p" | "div" | "label" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export type TextProps = React.HTMLAttributes<HTMLElement> & {
+  as?: TextElement;
+};
+
+const Text = React.forwardRef<HTMLElement, TextProps>(({ as: Comp = "span", className, ...props }, ref) => (
+  <Comp
+    // biome-ignore lint/suspicious/noExplicitAny: polymorphic ref requires any
+    ref={ref as any}
+    className={cn(className)}
+    {...props}
+  />
+));
+Text.displayName = "Text";
+
+export { Text };

package/src/components/Text/index.ts

@@ -0,0 +1 @@
+export { Text, type TextElement, type TextProps } from "./Text";

package/src/components/TextInline/TextInline.tsx

@@ -0,0 +1,35 @@
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const textInlineVariants = cva("inline-flex items-center", {
+  variants: {
+    gap: {
+      none: "gap-0",
+      xs: "gap-0.5",
+      sm: "gap-1",
+      md: "gap-2",
+      lg: "gap-3",
+      xl: "gap-4",
+    },
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      baseline: "items-baseline",
+    },
+  },
+  defaultVariants: {
+    gap: "sm",
+    align: "baseline",
+  },
+});
+
+export type TextInlineProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof textInlineVariants>;
+
+const TextInline = React.forwardRef<HTMLSpanElement, TextInlineProps>(({ className, gap, align, ...props }, ref) => (
+  <span ref={ref} className={cn(textInlineVariants({ gap, align }), className)} {...props} />
+));
+TextInline.displayName = "TextInline";
+
+export { TextInline, textInlineVariants };

package/src/components/TextInline/index.ts

@@ -0,0 +1 @@
+export { TextInline, type TextInlineProps, textInlineVariants } from "./TextInline";

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-border-normal bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/components/Textarea/index.ts

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from "./Textarea";