@dowel-ui/react 0.5.0 → 0.8.0

package/src/blocks/forgot-password/forgot-password.tsx

@@ -1,158 +0,0 @@
-"use client";
-
-import { useState, type FormEvent } from "react";
-
-import { Button } from "@/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/card";
-import {
-  EmptyState,
-  EmptyStateDescription,
-  EmptyStateIcon,
-  EmptyStateTitle,
-} from "@/components/empty-state";
-import { Form, FormControl, FormField, FormLabel, FormMessage } from "@/components/form";
-import { Input } from "@/components/input";
-import { cn } from "@/lib/utils";
-
-/**
- * A password reset request.
- *
- * The confirmation deliberately does not say whether the address was found.
- * Telling an anonymous visitor which emails have accounts turns this form into
- * an account enumeration oracle, and the same neutral message covers both cases
- * without being a lie.
- */
-
-export interface ForgotPasswordBlockProps {
-  onSubmit?: (values: { email: string }) => void;
-  /** Switches to the confirmation view. */
-  sent?: boolean;
-  error?: string;
-  pending?: boolean;
-  loginHref?: string;
-  className?: string;
-}
-
-export function ForgotPasswordBlock({
-  onSubmit,
-  sent = false,
-  error,
-  pending = false,
-  loginHref = "/login",
-  className,
-}: ForgotPasswordBlockProps) {
-  const [email, setEmail] = useState("");
-  const [touched, setTouched] = useState(false);
-
-  const emailError =
-    touched && !email.includes("@") ? "Enter a valid email address." : undefined;
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setTouched(true);
-    if (!email.includes("@")) return;
-    onSubmit?.({ email });
-  }
-
-  if (sent) {
-    return (
-      <Card className={cn("w-full max-w-sm", className)}>
-        <CardContent className="pt-6">
-          {/* Announced, because it replaces the form the user just submitted. */}
-          <EmptyState role="status" aria-live="polite">
-            <EmptyStateIcon>
-              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                <rect
-                  x="3"
-                  y="5"
-                  width="18"
-                  height="14"
-                  rx="2"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                />
-                <path
-                  d="m3 7 9 6 9-6"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                />
-              </svg>
-            </EmptyStateIcon>
-            <EmptyStateTitle>Check your inbox</EmptyStateTitle>
-            <EmptyStateDescription>
-              If an account exists for {email}, a reset link is on its way. It expires in an
-              hour.
-            </EmptyStateDescription>
-          </EmptyState>
-        </CardContent>
-        <CardFooter className="justify-center">
-          <a
-            href={loginHref}
-            className="text-sm font-medium text-primary underline underline-offset-4"
-          >
-            Back to sign in
-          </a>
-        </CardFooter>
-      </Card>
-    );
-  }
-
-  return (
-    <Card className={cn("w-full max-w-sm", className)}>
-      <CardHeader>
-        <CardTitle>Reset your password</CardTitle>
-        <CardDescription>
-          Enter the address you signed up with and we will send you a link.
-        </CardDescription>
-      </CardHeader>
-
-      <CardContent>
-        <Form onSubmit={handleSubmit} className="gap-4">
-          {error ? (
-            <p role="alert" className="text-sm font-medium text-destructive">
-              {error}
-            </p>
-          ) : null}
-
-          <FormField name="email" error={emailError}>
-            <FormLabel>Email</FormLabel>
-            <FormControl>
-              <Input
-                type="email"
-                autoComplete="email"
-                placeholder="you@example.com"
-                value={email}
-                disabled={pending}
-                onChange={(event) => {
-                  setEmail(event.target.value);
-                }}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormField>
-
-          <Button type="submit" loading={pending} className="w-full">
-            Send reset link
-          </Button>
-        </Form>
-      </CardContent>
-
-      <CardFooter className="justify-center">
-        <a
-          href={loginHref}
-          className="text-sm text-muted-foreground underline underline-offset-4"
-        >
-          Back to sign in
-        </a>
-      </CardFooter>
-    </Card>
-  );
-}

package/src/blocks/forgot-password/index.ts

@@ -1 +0,0 @@
-export { ForgotPasswordBlock, type ForgotPasswordBlockProps } from "./forgot-password";

package/src/blocks/forgot-password/meta.ts

@@ -1,18 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "forgot-password",
-  kind: "block",
-  title: "Forgot password",
-  description:
-    "A password reset request, with a confirmation that does not leak account existence.",
-  category: "form",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: ["button", "card", "empty-state", "form", "input"],
-  files: ["forgot-password.tsx"],
-  a11y:
-    "The confirmation replaces the form, so it is a polite live region — otherwise a screen " +
-    "reader user submits and hears nothing. The wording is deliberately neutral about whether " +
-    "the address exists: confirming it would turn this form into an account enumeration oracle.",
-});

package/src/blocks/login/index.ts

@@ -1 +0,0 @@
-export { LoginBlock, type LoginBlockProps } from "./login";

package/src/blocks/login/login.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import { useState, type FormEvent } from "react";
-
-import { Button } from "@/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/card";
-import { Checkbox } from "@/components/checkbox";
-import { Form, FormControl, FormField, FormLabel, FormMessage } from "@/components/form";
-import { Input } from "@/components/input";
-import { Label } from "@/components/label";
-import { Separator } from "@/components/separator";
-import { cn } from "@/lib/utils";
-
-/**
- * A sign-in form.
- *
- * Wired for the parts that are easy to get wrong rather than left as markup:
- * the email field is typed and autocompleted correctly, errors are announced,
- * and the submit button reports its own busy state instead of leaving people
- * wondering whether the click registered.
- *
- * Validation here is the minimum that makes the form usable offline. Real
- * validation belongs to whatever the form is submitted to — pass `error` for a
- * server response.
- */
-
-export interface LoginBlockProps {
-  /** Called with the submitted credentials. */
-  onSubmit?: (values: { email: string; password: string; remember: boolean }) => void;
-  /** A server-side error, shown above the fields. */
-  error?: string;
-  /** Disables the form and shows the submit button as busy. */
-  pending?: boolean;
-  /** Where "Forgot password?" goes. */
-  forgotHref?: string;
-  /** Where "Create an account" goes. */
-  signupHref?: string;
-  className?: string;
-}
-
-export function LoginBlock({
-  onSubmit,
-  error,
-  pending = false,
-  forgotHref = "/forgot-password",
-  signupHref = "/signup",
-  className,
-}: LoginBlockProps) {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [remember, setRemember] = useState(false);
-  const [touched, setTouched] = useState(false);
-
-  const emailError =
-    touched && !email.includes("@") ? "Enter a valid email address." : undefined;
-  const passwordError = touched && password.length === 0 ? "Enter your password." : undefined;
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setTouched(true);
-    if (!email.includes("@") || password.length === 0) return;
-    onSubmit?.({ email, password, remember });
-  }
-
-  return (
-    <Card className={cn("w-full max-w-sm", className)}>
-      <CardHeader>
-        <CardTitle>Sign in</CardTitle>
-        <CardDescription>Welcome back. Enter your details to continue.</CardDescription>
-      </CardHeader>
-
-      <CardContent>
-        <Form onSubmit={handleSubmit} className="gap-4">
-          {/* A server error is assertive: it arrived after the user acted, and
-              it is the reason nothing happened. */}
-          {error ? (
-            <p role="alert" className="text-sm font-medium text-destructive">
-              {error}
-            </p>
-          ) : null}
-
-          <FormField name="email" error={emailError}>
-            <FormLabel>Email</FormLabel>
-            <FormControl>
-              <Input
-                type="email"
-                autoComplete="email"
-                placeholder="you@example.com"
-                value={email}
-                disabled={pending}
-                onChange={(event) => {
-                  setEmail(event.target.value);
-                }}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormField>
-
-          <FormField name="password" error={passwordError}>
-            <div className="flex items-center justify-between">
-              <FormLabel>Password</FormLabel>
-              <a
-                href={forgotHref}
-                className="text-xs font-medium text-muted-foreground underline underline-offset-4 hover:text-foreground"
-              >
-                Forgot password?
-              </a>
-            </div>
-            <FormControl>
-              <Input
-                type="password"
-                autoComplete="current-password"
-                value={password}
-                disabled={pending}
-                onChange={(event) => {
-                  setPassword(event.target.value);
-                }}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormField>
-
-          <div className="flex items-center gap-2">
-            <Checkbox
-              id="remember-me"
-              checked={remember}
-              disabled={pending}
-              onCheckedChange={(checked) => {
-                setRemember(checked === true);
-              }}
-            />
-            <Label htmlFor="remember-me" className="text-sm font-normal">
-              Keep me signed in
-            </Label>
-          </div>
-
-          <Button type="submit" loading={pending} className="w-full">
-            Sign in
-          </Button>
-        </Form>
-
-        <div className="my-5 flex items-center gap-3">
-          <Separator className="flex-1" />
-          <span className="text-2xs text-muted-foreground uppercase">or</span>
-          <Separator className="flex-1" />
-        </div>
-
-        <div className="grid gap-2">
-          <Button variant="outline" className="w-full" disabled={pending}>
-            Continue with GitHub
-          </Button>
-          <Button variant="outline" className="w-full" disabled={pending}>
-            Continue with Google
-          </Button>
-        </div>
-      </CardContent>
-
-      <CardFooter className="justify-center">
-        <p className="text-sm text-muted-foreground">
-          Don&rsquo;t have an account?{" "}
-          <a
-            href={signupHref}
-            className="font-medium text-primary underline underline-offset-4"
-          >
-            Create one
-          </a>
-        </p>
-      </CardFooter>
-    </Card>
-  );
-}

package/src/blocks/login/meta.ts

@@ -1,18 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "login",
-  kind: "block",
-  title: "Login",
-  description: "A sign-in form with validation, social providers and a busy state.",
-  category: "form",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: ["button", "card", "checkbox", "form", "input", "label", "separator"],
-  files: ["login.tsx"],
-  a11y:
-    "Email and password fields carry the right type and autocomplete, so password managers and " +
-    "mobile keyboards behave. Field errors are tied to their inputs through the Form wiring; a " +
-    "server error is an assertive alert, because it arrived after the user acted and explains why " +
-    "nothing happened. The submit button reports its own busy state rather than going quiet.",
-});

package/src/blocks/pricing/index.ts

@@ -1 +0,0 @@
-export { PricingBlock, type PricingBlockProps, type PricingPlan } from "./pricing";

package/src/blocks/pricing/meta.ts

@@ -1,18 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "pricing",
-  kind: "block",
-  title: "Pricing",
-  description: "A pricing section with plan cards and a monthly/yearly toggle.",
-  category: "layout",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: ["badge", "button", "card", "label", "switch"],
-  files: ["pricing.tsx"],
-  a11y:
-    "Switching the billing period rewrites every price on the page, so the change is announced " +
-    "politely rather than happening silently. Each plan's call to action names the plan — three " +
-    'buttons all reading "Choose" are indistinguishable out of context. Feature ticks are ' +
-    "decorative; the feature text carries the meaning.",
-});

package/src/blocks/pricing/pricing.tsx

@@ -1,176 +0,0 @@
-"use client";
-
-import { useState, type ReactNode } from "react";
-
-import { Badge } from "@/components/badge";
-import { Button } from "@/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/card";
-import { Label } from "@/components/label";
-import { Switch } from "@/components/switch";
-import { cn } from "@/lib/utils";
-
-/**
- * A pricing section.
- *
- * The billing-period toggle is the part that usually goes wrong. It changes
- * every price on the page at once, which is a large change nobody asked for in
- * words — so the prices update in place and the change is announced, rather
- * than silently rewriting the page under the reader.
- */
-
-export interface PricingPlan {
-  id: string;
-  name: string;
-  description: string;
-  /** Monthly price in whole currency units. `null` means "talk to us". */
-  monthly: number | null;
-  /** Yearly price per month. Omit to bill yearly at the monthly rate. */
-  yearlyPerMonth?: number;
-  features: string[];
-  /** Marks the recommended plan. At most one. */
-  featured?: boolean;
-  cta?: string;
-  onSelect?: () => void;
-}
-
-export interface PricingBlockProps {
-  title?: string;
-  description?: string;
-  plans: PricingPlan[];
-  currency?: string;
-  /** Shows the monthly/yearly toggle. */
-  showPeriodToggle?: boolean;
-  footnote?: ReactNode;
-  className?: string;
-}
-
-export function PricingBlock({
-  title = "Pricing",
-  description = "Start free. Upgrade when you need to.",
-  plans,
-  currency = "$",
-  showPeriodToggle = true,
-  footnote,
-  className,
-}: PricingBlockProps) {
-  const [yearly, setYearly] = useState(false);
-
-  function priceOf(plan: PricingPlan): { amount: string; suffix: string } {
-    if (plan.monthly === null) return { amount: "Custom", suffix: "" };
-    const value = yearly ? (plan.yearlyPerMonth ?? plan.monthly) : plan.monthly;
-    return { amount: `${currency}${String(value)}`, suffix: "/month" };
-  }
-
-  return (
-    <section aria-labelledby="pricing-heading" className={cn("flex flex-col gap-8", className)}>
-      <div className="text-center">
-        <h2 id="pricing-heading" className="text-2xl font-semibold tracking-tight text-balance">
-          {title}
-        </h2>
-        <p className="mx-auto mt-2 max-w-lg text-pretty text-muted-foreground">{description}</p>
-
-        {showPeriodToggle ? (
-          <div className="mt-6 flex items-center justify-center gap-3">
-            <Label htmlFor="billing-period" className="text-sm font-normal">
-              Monthly
-            </Label>
-            <Switch
-              id="billing-period"
-              checked={yearly}
-              onCheckedChange={setYearly}
-              aria-label="Bill yearly"
-            />
-            <Label htmlFor="billing-period" className="text-sm font-normal">
-              Yearly
-            </Label>
-            <Badge size="sm" variant="success">
-              Save 20%
-            </Badge>
-          </div>
-        ) : null}
-      </div>
-
-      {/* Every price on the page changes at once, which is a big change nobody
-          asked for out loud. Announcing it politely is the difference between a
-          helpful toggle and the page silently rewriting itself. */}
-      <p aria-live="polite" className="sr-only">
-        Showing {yearly ? "yearly" : "monthly"} pricing.
-      </p>
-
-      <div className="grid gap-6 md:grid-cols-3">
-        {plans.map((plan) => {
-          const price = priceOf(plan);
-
-          return (
-            <Card
-              key={plan.id}
-              className={cn("flex flex-col", plan.featured && "border-primary shadow-lg")}
-            >
-              <CardHeader>
-                <div className="flex items-center justify-between gap-2">
-                  <CardTitle>{plan.name}</CardTitle>
-                  {plan.featured ? <Badge size="sm">Recommended</Badge> : null}
-                </div>
-                <CardDescription>{plan.description}</CardDescription>
-                <p className="mt-3 flex items-baseline gap-1">
-                  <span className="text-3xl font-semibold tabular-nums">{price.amount}</span>
-                  {price.suffix ? (
-                    <span className="text-sm text-muted-foreground">{price.suffix}</span>
-                  ) : null}
-                </p>
-                {yearly && plan.monthly !== null && plan.yearlyPerMonth !== undefined ? (
-                  <p className="text-xs text-muted-foreground">Billed yearly.</p>
-                ) : null}
-              </CardHeader>
-
-              <CardContent className="flex-1">
-                <ul className="flex flex-col gap-2 text-sm">
-                  {plan.features.map((feature) => (
-                    <li key={feature} className="flex items-start gap-2">
-                      <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        aria-hidden="true"
-                        className="mt-0.5 size-4 shrink-0 text-success"
-                      >
-                        <path
-                          d="m5 13 4 4L19 7"
-                          stroke="currentColor"
-                          strokeWidth="2.5"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                      <span className="text-muted-foreground">{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-              </CardContent>
-
-              <CardFooter>
-                <Button
-                  className="w-full"
-                  variant={plan.featured ? "primary" : "outline"}
-                  onClick={plan.onSelect}
-                >
-                  {plan.cta ?? `Choose ${plan.name}`}
-                </Button>
-              </CardFooter>
-            </Card>
-          );
-        })}
-      </div>
-
-      {footnote ? (
-        <p className="text-center text-xs text-muted-foreground">{footnote}</p>
-      ) : null}
-    </section>
-  );
-}

package/src/blocks/settings/index.ts

@@ -1,6 +0,0 @@
-export {
-  SettingsBlock,
-  type SettingsBlockProps,
-  type SettingsNotification,
-  type SettingsProfile,
-} from "./settings";

package/src/blocks/settings/meta.ts

@@ -1,29 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "settings",
-  kind: "block",
-  title: "Settings",
-  description: "A settings page with a profile form, immediate toggles and a danger zone.",
-  category: "form",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: [
-    "avatar",
-    "button",
-    "card",
-    "dialog",
-    "form",
-    "input",
-    "label",
-    "separator",
-    "switch",
-    "tabs",
-  ],
-  files: ["settings.tsx"],
-  a11y:
-    "Switches apply immediately and have no Save button — a switch that needs saving is a broken " +
-    "promise, so staged changes live in the form instead. The delete confirmation names what will " +
-    "be destroyed and requires typing the account's email, so the destructive button cannot be " +
-    "reached by muscle memory.",
-});