@dowel-ui/react 0.5.0 → 0.7.0

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ComponentPropsWithRef,
+} from "react";
+
+import { focusRingInset, invalidStyles } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+const textareaVariants = cva(
+  cn(
+    "block w-full min-w-0 rounded-md border border-input bg-background text-foreground shadow-xs",
+    "transition-[border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]",
+    "placeholder:text-muted-foreground",
+    "focus-visible:border-ring",
+    "disabled:cursor-not-allowed disabled:opacity-55",
+    focusRingInset,
+    invalidStyles,
+  ),
+  {
+    variants: {
+      textareaSize: {
+        sm: "px-2.5 py-1.5 text-sm",
+        md: "px-3 py-2 text-sm",
+        lg: "px-3.5 py-2.5 text-base",
+      },
+      /**
+       * Vertical only by default.
+       *
+       * The browser default is `both`, and a textarea dragged wider than its
+       * container is a layout broken by a control that was only meant to be
+       * made taller.
+       */
+      resize: {
+        none: "resize-none",
+        vertical: "resize-y",
+        both: "resize",
+      },
+    },
+    defaultVariants: {
+      textareaSize: "md",
+      resize: "vertical",
+    },
+  },
+);
+
+export interface TextareaProps
+  extends
+    Omit<ComponentPropsWithRef<"textarea">, "cols">,
+    VariantProps<typeof textareaVariants> {
+  /**
+   * Grows with its content instead of scrolling, up to `maxRows`.
+   *
+   * Off by default. A field that changes height as you type moves everything
+   * below it, which is the right trade for a comment box and the wrong one for
+   * a form of twelve fields.
+   */
+  autoResize?: boolean;
+  /** Ceiling for `autoResize`, after which it scrolls. */
+  maxRows?: number;
+  /**
+   * Shows a live character count.
+   *
+   * Needs `maxLength` to have anything to count against.
+   */
+  showCount?: boolean;
+}
+
+/**
+ * Multi-line text field.
+ *
+ * The visual size prop is `textareaSize`, not `size`, for the same reason
+ * Input's is `inputSize`: `size` is a native attribute on form controls, and a
+ * prop of that name shadows it.
+ *
+ * The character count is where this differs from most. A counter wired as a
+ * live region announces on every keystroke, which is unusable — a screen
+ * reader reads "one hundred and forty-one characters remaining" between every
+ * letter. So the count is silent while there is room and only announces once
+ * it is nearly gone, which is the point at which it is information rather than
+ * chatter.
+ */
+export function Textarea({
+  className,
+  textareaSize,
+  resize,
+  autoResize = false,
+  maxRows = 12,
+  showCount = false,
+  rows = 3,
+  maxLength,
+  value,
+  defaultValue,
+  onChange,
+  id,
+  "aria-describedby": describedBy,
+  ref,
+  ...props
+}: TextareaProps) {
+  const internalRef = useRef<HTMLTextAreaElement | null>(null);
+  const generatedId = useId();
+  const countId = `${id ?? generatedId}-count`;
+
+  const counted = showCount && maxLength !== undefined;
+
+  /**
+   * Both refs, without a library.
+   *
+   * React 19 passes `ref` as an ordinary prop, so it arrives here and has to be
+   * forwarded on deliberately. Auto-resize needs the element too, and silently
+   * dropping the caller's ref would break every form library that reaches for
+   * the node.
+   */
+  const setRef = (node: HTMLTextAreaElement | null) => {
+    internalRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) (ref as { current: HTMLTextAreaElement | null }).current = node;
+  };
+
+  // Measured after layout, so the height is right on the first paint rather
+  // than one frame late and visibly settling.
+  useLayoutEffect(() => {
+    const textarea = internalRef.current;
+    if (!textarea || !autoResize) return;
+
+    textarea.style.height = "auto";
+    const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight) || 20;
+    const maxHeight = lineHeight * maxRows;
+    textarea.style.height = `${String(Math.min(textarea.scrollHeight, maxHeight))}px`;
+    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+  });
+
+  /**
+   * The length, for the count.
+   *
+   * Held in state for the uncontrolled case rather than read off the element
+   * during render. Reading the ref looks simpler and does not work: nothing
+   * re-renders when an uncontrolled field is typed into, so the count would
+   * show whatever it happened to say on first paint and never move again.
+   */
+  const [uncontrolledLength, setUncontrolledLength] = useState(
+    typeof defaultValue === "string" ? defaultValue.length : 0,
+  );
+
+  const length = typeof value === "string" ? value.length : uncontrolledLength;
+
+  const remaining = maxLength === undefined ? undefined : maxLength - length;
+  // Announce only when it starts to matter: a tenth of the budget, or twenty
+  // characters, whichever is larger.
+  const announceAt = maxLength === undefined ? 0 : Math.max(20, Math.floor(maxLength / 10));
+  const nearLimit = remaining !== undefined && remaining <= announceAt;
+
+  function handleChange(event: ChangeEvent<HTMLTextAreaElement>) {
+    if (value === undefined) setUncontrolledLength(event.target.value.length);
+    onChange?.(event);
+  }
+
+  return (
+    <div className={cn("grid gap-1.5", counted && "w-full")}>
+      <textarea
+        ref={setRef}
+        id={id ?? (counted ? generatedId : undefined)}
+        data-slot="textarea"
+        rows={rows}
+        maxLength={maxLength}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={handleChange}
+        aria-describedby={cn(describedBy, counted && countId) || undefined}
+        className={cn(
+          textareaVariants({ textareaSize, resize: autoResize ? "none" : resize }),
+          className,
+        )}
+        {...props}
+      />
+
+      {counted ? (
+        <p
+          id={countId}
+          data-slot="textarea-count"
+          // Polite only once it matters. Left permanently live it reads the
+          // count between every keystroke, which is noise, not help.
+          aria-live={nearLimit ? "polite" : "off"}
+          className={cn(
+            "text-xs tabular-nums",
+            remaining !== undefined && remaining < 0
+              ? "text-destructive"
+              : nearLimit
+                ? "text-warning"
+                : "text-muted-foreground",
+          )}
+        >
+          {/* Words, not "141/200": a bare ratio is read aloud as two numbers
+              with no indication of which is which. */}
+          {remaining !== undefined && remaining < 0
+            ? `${String(Math.abs(remaining))} characters over the limit`
+            : `${String(remaining ?? 0)} characters left`}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export { textareaVariants };

package/src/components/time-range-picker/time-range-picker.tsx

@@ -324,7 +324,7 @@ export function TimeRangePresets({
     <div
       data-slot="time-range-presets"
       className={cn(
-        "max-h-80 min-w-52 overflow-y-auto border-border p-1.5 sm:border-r",
+        "max-h-80 min-w-52 overflow-y-auto border-border p-1.5 sm:border-e",
         className,
       )}
       {...props}
@@ -344,7 +344,7 @@ export function TimeRangePresets({
                 close();
               }}
               className={cn(
-                "flex w-full items-center rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+                "flex w-full items-center rounded-md px-2 py-1.5 text-start text-sm transition-colors",
                 preset.expression === value
                   ? "bg-accent font-medium text-accent-foreground"
                   : "hover:bg-accent hover:text-accent-foreground",
@@ -482,7 +482,7 @@ export function TimeRangeCalendar({
   return (
     <div
       data-slot="time-range-calendar"
-      className={cn("border-t border-border p-1 sm:border-t-0 sm:border-l", className)}
+      className={cn("border-t border-border p-1 sm:border-s sm:border-t-0", className)}
       {...props}
     >
       <Calendar

package/src/components/toast/toast.tsx

@@ -28,7 +28,7 @@ import {
 const toastVariants = cva(
   cn(
     "group pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden",
-    "rounded-lg border p-4 pr-10 shadow-lg",
+    "rounded-lg border p-4 pe-10 shadow-lg",
     "[--slide-x:calc(100%+1rem)]",
     "data-[state=closed]:animate-float-out data-[state=open]:animate-slide-in",
     "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
@@ -122,7 +122,7 @@ export function ToastClose({
       data-slot="toast-close"
       aria-label="Dismiss"
       className={cn(
-        "absolute top-3 right-3 grid size-6 place-items-center rounded-md text-muted-foreground",
+        "absolute end-3 top-3 grid size-6 place-items-center rounded-md text-muted-foreground",
         "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground",
         focusRing,
         className,
@@ -144,13 +144,21 @@ export function ToastClose({
 export type ToastPosition =
   "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 
+/*
+  rtl-ok: the positions are *named* left and right, so they stay physical. A
+  toast asked for at `bottom-right` that appears bottom-left in Arabic is the
+  same lie as a Sheet asked for on the left that opens on the right — and it is
+  worse here, because the slide-in comes from the right edge and the toast would
+  fly across the screen to reach the other one. The logical version of this is a
+  `bottom-end` position, which is a rename rather than a restyle.
+*/
 const viewportPositions: Record<ToastPosition, string> = {
-  "top-left": "top-0 left-0 sm:flex-col-reverse",
+  "top-left": "top-0 left-0 sm:flex-col-reverse", // rtl-ok: named position
   "top-center": "top-0 left-1/2 -translate-x-1/2 sm:flex-col-reverse",
-  "top-right": "top-0 right-0 sm:flex-col-reverse",
-  "bottom-left": "bottom-0 left-0",
+  "top-right": "top-0 right-0 sm:flex-col-reverse", // rtl-ok: named position
+  "bottom-left": "bottom-0 left-0", // rtl-ok: named position
   "bottom-center": "bottom-0 left-1/2 -translate-x-1/2",
-  "bottom-right": "bottom-0 right-0",
+  "bottom-right": "bottom-0 right-0", // rtl-ok: named position
 };
 
 export interface ToasterProps {

package/src/index.ts

@@ -21,11 +21,13 @@ export * from "./components/ai-tool";
 export * from "./components/alert";
 export * from "./components/avatar";
 export * from "./components/badge";
+export * from "./components/breadcrumb";
 export * from "./components/button";
 export * from "./components/calendar";
 export * from "./components/card";
 export * from "./components/checkbox";
 export * from "./components/code-block";
+export * from "./components/collapsible";
 export * from "./components/combobox";
 export * from "./components/command";
 export * from "./components/confirm-typed";
@@ -33,6 +35,7 @@ export * from "./components/cron-editor";
 export * from "./components/data-table";
 export * from "./components/date-picker";
 export * from "./components/dialog";
+export * from "./components/direction";
 export * from "./components/diff-viewer";
 export * from "./components/dns-record";
 export * from "./components/drawer";
@@ -56,6 +59,7 @@ export * from "./components/select";
 export * from "./components/separator";
 export * from "./components/session-expiry";
 export * from "./components/sheet";
+export * from "./components/sidebar";
 export * from "./components/shortcut-recorder";
 export * from "./components/skeleton";
 export * from "./components/slider";
@@ -66,6 +70,7 @@ export * from "./components/table";
 export * from "./components/tabs";
 export * from "./components/tags-input";
 export * from "./components/time-range-picker";
+export * from "./components/textarea";
 export * from "./components/toast";
 export * from "./components/tooltip";
 

package/src/lib/styles.ts

@@ -24,3 +24,19 @@ export const invalidStyles =
 /** Sizes any icon rendered as a direct child of a control. */
 export const iconSlot =
   "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+
+/**
+ * Mirrors an icon that points along the reading direction.
+ *
+ * A chevron meaning "forward" points right in English and left in Arabic.
+ * Logical CSS does not help here: the glyph is drawn, not laid out, so the
+ * class list mirrors the box while the arrow inside it goes on pointing the
+ * wrong way. The result is a fully mirrored page whose "next" button points
+ * back the way you came.
+ *
+ * Only for icons whose meaning is directional. A chevron pointing *down* to
+ * open a select means down in every language, and flipping it horizontally
+ * would be flipping a thing that was never sided. Nor is a tick, a cross or a
+ * spinner.
+ */
+export const mirrorForDirection = "rtl:-scale-x-100";

package/src/registry/blocks.ts

@@ -1,10 +1,19 @@
 import type { ComponentMeta } from "./schema";
 
+import { meta as adminDashboardMeta } from "@/blocks/admin-dashboard/meta";
 import { meta as adminUsersMeta } from "@/blocks/admin-users/meta";
+import { meta as agentConsoleMeta } from "@/blocks/agent-console/meta";
 import { meta as aiChatMeta } from "@/blocks/ai-chat/meta";
+import { meta as aiDashboardMeta } from "@/blocks/ai-dashboard/meta";
+import { meta as aiWorkspaceMeta } from "@/blocks/ai-workspace/meta";
+import { meta as analyticsMeta } from "@/blocks/analytics/meta";
+import { meta as billingMeta } from "@/blocks/billing/meta";
+import { meta as commandCenterMeta } from "@/blocks/command-center/meta";
+import { meta as crmMeta } from "@/blocks/crm/meta";
 import { meta as dashboardMeta } from "@/blocks/dashboard/meta";
 import { meta as forgotPasswordMeta } from "@/blocks/forgot-password/meta";
 import { meta as loginMeta } from "@/blocks/login/meta";
+import { meta as onboardingMeta } from "@/blocks/onboarding/meta";
 import { meta as pricingMeta } from "@/blocks/pricing/meta";
 import { meta as settingsMeta } from "@/blocks/settings/meta";
 import { meta as signupMeta } from "@/blocks/signup/meta";
@@ -19,11 +28,20 @@ import { meta as signupMeta } from "@/blocks/signup/meta";
  * `meta.test.ts` fails if a block directory exists that is missing from here.
  */
 export const blockMetas: ComponentMeta[] = [
+  adminDashboardMeta,
   adminUsersMeta,
+  agentConsoleMeta,
   aiChatMeta,
+  aiDashboardMeta,
+  aiWorkspaceMeta,
+  analyticsMeta,
+  billingMeta,
+  commandCenterMeta,
+  crmMeta,
   dashboardMeta,
   forgotPasswordMeta,
   loginMeta,
+  onboardingMeta,
   pricingMeta,
   settingsMeta,
   signupMeta,

package/src/registry/components.ts

@@ -23,17 +23,20 @@ import { meta as aiToolMeta } from "@/components/ai-tool/meta";
 import { meta as alertMeta } from "@/components/alert/meta";
 import { meta as avatarMeta } from "@/components/avatar/meta";
 import { meta as badgeMeta } from "@/components/badge/meta";
+import { meta as breadcrumbMeta } from "@/components/breadcrumb/meta";
 import { meta as buttonMeta } from "@/components/button/meta";
 import { meta as calendarMeta } from "@/components/calendar/meta";
 import { meta as cardMeta } from "@/components/card/meta";
 import { meta as checkboxMeta } from "@/components/checkbox/meta";
 import { meta as codeBlockMeta } from "@/components/code-block/meta";
+import { meta as collapsibleMeta } from "@/components/collapsible/meta";
 import { meta as comboboxMeta } from "@/components/combobox/meta";
 import { meta as commandMeta } from "@/components/command/meta";
 import { meta as confirmTypedMeta } from "@/components/confirm-typed/meta";
 import { meta as cronEditorMeta } from "@/components/cron-editor/meta";
 import { meta as dataTableMeta } from "@/components/data-table/meta";
 import { meta as datePickerMeta } from "@/components/date-picker/meta";
+import { meta as directionMeta } from "@/components/direction/meta";
 import { meta as dialogMeta } from "@/components/dialog/meta";
 import { meta as diffViewerMeta } from "@/components/diff-viewer/meta";
 import { meta as dnsRecordMeta } from "@/components/dns-record/meta";
@@ -57,6 +60,7 @@ import { meta as secretFieldMeta } from "@/components/secret-field/meta";
 import { meta as selectMeta } from "@/components/select/meta";
 import { meta as separatorMeta } from "@/components/separator/meta";
 import { meta as sessionExpiryMeta } from "@/components/session-expiry/meta";
+import { meta as sidebarMeta } from "@/components/sidebar/meta";
 import { meta as sheetMeta } from "@/components/sheet/meta";
 import { meta as shortcutRecorderMeta } from "@/components/shortcut-recorder/meta";
 import { meta as skeletonMeta } from "@/components/skeleton/meta";
@@ -68,6 +72,7 @@ import { meta as tableMeta } from "@/components/table/meta";
 import { meta as tabsMeta } from "@/components/tabs/meta";
 import { meta as tagsInputMeta } from "@/components/tags-input/meta";
 import { meta as timeRangePickerMeta } from "@/components/time-range-picker/meta";
+import { meta as textareaMeta } from "@/components/textarea/meta";
 import { meta as toastMeta } from "@/components/toast/meta";
 import { meta as tooltipMeta } from "@/components/tooltip/meta";
 
@@ -106,11 +111,13 @@ export const componentMetas: ComponentMeta[] = [
   alertMeta,
   avatarMeta,
   badgeMeta,
+  breadcrumbMeta,
   buttonMeta,
   calendarMeta,
   cardMeta,
   checkboxMeta,
   codeBlockMeta,
+  collapsibleMeta,
   comboboxMeta,
   commandMeta,
   confirmTypedMeta,
@@ -118,6 +125,7 @@ export const componentMetas: ComponentMeta[] = [
   dataTableMeta,
   datePickerMeta,
   dialogMeta,
+  directionMeta,
   diffViewerMeta,
   dnsRecordMeta,
   drawerMeta,
@@ -141,6 +149,7 @@ export const componentMetas: ComponentMeta[] = [
   separatorMeta,
   sessionExpiryMeta,
   sheetMeta,
+  sidebarMeta,
   shortcutRecorderMeta,
   skeletonMeta,
   sliderMeta,
@@ -151,6 +160,7 @@ export const componentMetas: ComponentMeta[] = [
   tabsMeta,
   tagsInputMeta,
   timeRangePickerMeta,
+  textareaMeta,
   toastMeta,
   tooltipMeta,
 ];

package/src/registry/schema.ts

@@ -50,6 +50,14 @@ export interface ComponentMeta {
   files: string[];
   /** Accessibility notes surfaced on the docs page. */
   a11y?: string;
+  /**
+   * Whether the source is public.
+   *
+   * Omitted means `free`, and free is a promise: an item that has shipped
+   * installable without a licence stays that way. Marking an existing component
+   * `pro` breaks every project that already installs it.
+   */
+  access?: "free" | "pro";
 }
 
 /** Identity helper that gives editors autocomplete inside `meta.ts`. */