@dowel-ui/react 0.5.0 → 0.7.0

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.",
-});

package/src/blocks/settings/settings.tsx

@@ -1,317 +0,0 @@
-"use client";
-
-import { useState, type FormEvent, type ReactNode } from "react";
-
-import { Avatar, AvatarFallback } from "@/components/avatar";
-import { Button } from "@/components/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/card";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/dialog";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormLabel,
-  FormMessage,
-} from "@/components/form";
-import { Input } from "@/components/input";
-import { Label } from "@/components/label";
-import { Separator } from "@/components/separator";
-import { Switch } from "@/components/switch";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/tabs";
-import { cn } from "@/lib/utils";
-
-/**
- * A settings page: profile, notifications and a danger zone.
- *
- * Two things are deliberate. Switches apply immediately and have no Save button
- * — a switch that needs saving is a broken promise, so anything staged belongs
- * in a form instead. And the destructive action asks for confirmation naming
- * exactly what will be destroyed, rather than a generic "Are you sure?".
- */
-
-export interface SettingsProfile {
-  name: string;
-  email: string;
-  bio?: string;
-}
-
-export interface SettingsNotification {
-  id: string;
-  label: string;
-  description: string;
-  enabled: boolean;
-}
-
-export interface SettingsBlockProps {
-  profile: SettingsProfile;
-  notifications: SettingsNotification[];
-  /** Staged: the profile form has a Save button. */
-  onSaveProfile?: (profile: SettingsProfile) => void;
-  /** Immediate: a switch applies as soon as it is flipped. */
-  onToggleNotification?: (id: string, enabled: boolean) => void;
-  onDeleteAccount?: () => void;
-  pending?: boolean;
-  /** Extra tabs, if the product needs them. */
-  extraTabs?: { value: string; label: string; content: ReactNode }[];
-  className?: string;
-}
-
-export function SettingsBlock({
-  profile,
-  notifications,
-  onSaveProfile,
-  onToggleNotification,
-  onDeleteAccount,
-  pending = false,
-  extraTabs = [],
-  className,
-}: SettingsBlockProps) {
-  const [name, setName] = useState(profile.name);
-  const [email, setEmail] = useState(profile.email);
-  const [bio, setBio] = useState(profile.bio ?? "");
-  const [touched, setTouched] = useState(false);
-  const [confirmation, setConfirmation] = useState("");
-
-  const emailError =
-    touched && !email.includes("@") ? "Enter a valid email address." : undefined;
-  const nameError = touched && name.trim().length === 0 ? "Enter your name." : undefined;
-
-  function handleSave(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setTouched(true);
-    if (!email.includes("@") || name.trim().length === 0) return;
-    onSaveProfile?.({ name, email, bio });
-  }
-
-  return (
-    <div className={cn("flex flex-col gap-6", className)}>
-      <div>
-        <h1 className="text-xl font-semibold tracking-tight">Settings</h1>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Manage your profile and how you are notified.
-        </p>
-      </div>
-
-      <Tabs defaultValue="profile">
-        <TabsList variant="underline">
-          <TabsTrigger value="profile" variant="underline">
-            Profile
-          </TabsTrigger>
-          <TabsTrigger value="notifications" variant="underline">
-            Notifications
-          </TabsTrigger>
-          {extraTabs.map((tab) => (
-            <TabsTrigger key={tab.value} value={tab.value} variant="underline">
-              {tab.label}
-            </TabsTrigger>
-          ))}
-          <TabsTrigger value="danger" variant="underline">
-            Danger zone
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="profile">
-          <Card>
-            <CardHeader>
-              <CardTitle asChild>
-                <h2>Profile</h2>
-              </CardTitle>
-              <CardDescription>This is how you appear to your team.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Form onSubmit={handleSave} className="gap-4">
-                <div className="flex items-center gap-4">
-                  <Avatar size="lg">
-                    <AvatarFallback>
-                      {name
-                        .split(" ")
-                        .map((part) => part[0] ?? "")
-                        .slice(0, 2)
-                        .join("")
-                        .toUpperCase()}
-                    </AvatarFallback>
-                  </Avatar>
-                  <Button type="button" variant="outline" size="sm" disabled={pending}>
-                    Change photo
-                  </Button>
-                </div>
-
-                <FormField name="name" error={nameError}>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input
-                      autoComplete="name"
-                      value={name}
-                      disabled={pending}
-                      onChange={(event) => {
-                        setName(event.target.value);
-                      }}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormField>
-
-                <FormField name="email" error={emailError}>
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="email"
-                      autoComplete="email"
-                      value={email}
-                      disabled={pending}
-                      onChange={(event) => {
-                        setEmail(event.target.value);
-                      }}
-                    />
-                  </FormControl>
-                  <FormDescription>Used for sign-in and notifications.</FormDescription>
-                  <FormMessage />
-                </FormField>
-
-                <FormField name="bio">
-                  <FormLabel>Bio</FormLabel>
-                  <FormControl>
-                    <Input
-                      value={bio}
-                      disabled={pending}
-                      placeholder="A sentence about you"
-                      onChange={(event) => {
-                        setBio(event.target.value);
-                      }}
-                    />
-                  </FormControl>
-                </FormField>
-
-                <div className="flex justify-end">
-                  <Button type="submit" loading={pending}>
-                    Save changes
-                  </Button>
-                </div>
-              </Form>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="notifications">
-          <Card>
-            <CardHeader>
-              <CardTitle asChild>
-                <h2>Notifications</h2>
-              </CardTitle>
-              <CardDescription>
-                These apply straight away — there is nothing to save.
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="divide-y divide-border p-0">
-              {notifications.map((notification) => (
-                <div
-                  key={notification.id}
-                  className="flex items-start justify-between gap-4 px-6 py-4"
-                >
-                  <div className="grid gap-1">
-                    <Label htmlFor={notification.id}>{notification.label}</Label>
-                    <p className="text-xs text-muted-foreground">{notification.description}</p>
-                  </div>
-                  <Switch
-                    id={notification.id}
-                    checked={notification.enabled}
-                    onCheckedChange={(checked) => {
-                      onToggleNotification?.(notification.id, checked);
-                    }}
-                  />
-                </div>
-              ))}
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {extraTabs.map((tab) => (
-          <TabsContent key={tab.value} value={tab.value}>
-            {tab.content}
-          </TabsContent>
-        ))}
-
-        <TabsContent value="danger">
-          <Card className="border-destructive/30">
-            <CardHeader>
-              <CardTitle asChild>
-                <h2>Delete this account</h2>
-              </CardTitle>
-              <CardDescription>
-                Everything in the workspace is removed permanently. This cannot be undone.
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Separator className="mb-4" />
-              <p className="text-sm text-muted-foreground">
-                Your projects, deployments and audit history are deleted along with the account.
-              </p>
-            </CardContent>
-            <CardFooter className="justify-end">
-              <Dialog>
-                <DialogTrigger asChild>
-                  <Button variant="destructive">Delete account</Button>
-                </DialogTrigger>
-                <DialogContent className="max-w-md">
-                  <DialogHeader>
-                    <DialogTitle>Delete {profile.name}&rsquo;s account?</DialogTitle>
-                    {/* Names what is destroyed. "Are you sure?" tells nobody
-                        anything they did not already know. */}
-                    <DialogDescription>
-                      This permanently deletes the account, its projects and all deployment
-                      history. It cannot be undone.
-                    </DialogDescription>
-                  </DialogHeader>
-
-                  <div className="grid gap-2">
-                    <Label htmlFor="confirm-delete">
-                      Type <span className="font-mono">{profile.email}</span> to confirm
-                    </Label>
-                    <Input
-                      id="confirm-delete"
-                      value={confirmation}
-                      autoComplete="off"
-                      onChange={(event) => {
-                        setConfirmation(event.target.value);
-                      }}
-                    />
-                  </div>
-
-                  <DialogFooter>
-                    <DialogClose asChild>
-                      <Button variant="outline">Cancel</Button>
-                    </DialogClose>
-                    <Button
-                      variant="destructive"
-                      disabled={confirmation !== profile.email}
-                      onClick={onDeleteAccount}
-                    >
-                      Delete account
-                    </Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </CardFooter>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

package/src/blocks/signup/index.ts

@@ -1 +0,0 @@
-export { SignupBlock, estimatePasswordStrength, type SignupBlockProps } from "./signup";

package/src/blocks/signup/meta.ts

@@ -1,18 +0,0 @@
-import { defineMeta } from "@/registry/schema";
-
-export const meta = defineMeta({
-  name: "signup",
-  kind: "block",
-  title: "Sign up",
-  description: "An account creation form with a password strength hint and terms acceptance.",
-  category: "form",
-  status: "stable",
-  dependencies: [],
-  registryDependencies: ["button", "card", "checkbox", "form", "input", "progress"],
-  files: ["signup.tsx"],
-  a11y:
-    "The strength label is text and the bar beside it is aria-hidden, so the estimate is not " +
-    'announced twice. autoComplete="new-password" tells password managers to offer a generated ' +
-    "password rather than an existing one. Strength is a hint, never a gate: the form is validated " +
-    "on length alone.",
-});