@g4rcez/components 4.0.2 → 4.1.1

package/ai/docs/Calendar.md

@@ -20,39 +20,39 @@ import type { Range, Locales } from "@g4rcez/components/calendar";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `date` | `Date` | — | Selected date (single-date mode) |
-| `range` | `Range` | — | Selected range `{ from?: Date; to?: Date }` |
-| `rangeMode` | `boolean` | `false` | Enable range selection mode |
-| `markRange` | `boolean` | `true` | Visually highlight dates inside a range |
-| `markToday` | `boolean` | `true` | Emphasize today's date |
-| `type` | `"date" \| "datetime"` | `"date"` | Show an additional time input when `"datetime"` |
-| `datetimeTitle` | `string` | — | Label for the time input in `"datetime"` mode |
-| `onChange` | `OnChangeDate \| OnChangeRange` | — | Called when a date or range changes |
-| `changeOnlyOnClick` | `boolean` | `false` | Suppress onChange on keyboard navigation; fire only on explicit click |
-| `onChangeYear` | `(date: Date) => void` | — | Called when the year changes |
-| `onChangeMonth` | `(date: Date) => void` | — | Called when the month changes |
-| `disabledDate` | `(date: Date) => boolean` | — | Return `true` to disable a specific date |
-| `RenderOnDay` | `React.FC<{ date: Date }>` | — | Custom renderer overlaid on each day cell |
-| `locale` | `Locales` | — | BCP 47 locale string for month/weekday labels |
-| `labelRange` | `{ from: string; to: string }` | — | Labels shown on the selected range endpoints |
-| `styles` | `CalendarStyles` | — | Fine-grained class overrides per calendar section |
+| Prop                | Type                            | Default  | Description                                                           |
+| ------------------- | ------------------------------- | -------- | --------------------------------------------------------------------- |
+| `date`              | `Date`                          | —        | Selected date (single-date mode)                                      |
+| `range`             | `Range`                         | —        | Selected range `{ from?: Date; to?: Date }`                           |
+| `rangeMode`         | `boolean`                       | `false`  | Enable range selection mode                                           |
+| `markRange`         | `boolean`                       | `true`   | Visually highlight dates inside a range                               |
+| `markToday`         | `boolean`                       | `true`   | Emphasize today's date                                                |
+| `type`              | `"date" \| "datetime"`          | `"date"` | Show an additional time input when `"datetime"`                       |
+| `datetimeTitle`     | `string`                        | —        | Label for the time input in `"datetime"` mode                         |
+| `onChange`          | `OnChangeDate \| OnChangeRange` | —        | Called when a date or range changes                                   |
+| `changeOnlyOnClick` | `boolean`                       | `false`  | Suppress onChange on keyboard navigation; fire only on explicit click |
+| `onChangeYear`      | `(date: Date) => void`          | —        | Called when the year changes                                          |
+| `onChangeMonth`     | `(date: Date) => void`          | —        | Called when the month changes                                         |
+| `disabledDate`      | `(date: Date) => boolean`       | —        | Return `true` to disable a specific date                              |
+| `RenderOnDay`       | `React.FC<{ date: Date }>`      | —        | Custom renderer overlaid on each day cell                             |
+| `locale`            | `Locales`                       | —        | BCP 47 locale string for month/weekday labels                         |
+| `labelRange`        | `{ from: string; to: string }`  | —        | Labels shown on the selected range endpoints                          |
+| `styles`            | `CalendarStyles`                | —        | Fine-grained class overrides per calendar section                     |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-primary` | `--primary` | Selected day background |
-| `text-primary-foreground` | `--primary-foreground` | Selected day text |
-| `hover:bg-primary` | `--primary` | Navigation button hover background |
-| `hover:text-primary-foreground` | `--primary-foreground` | Navigation button hover text |
-| `text-primary` | `--primary` | "Today" button and year/month hover color |
-| `text-disabled` | `--disabled` | Days outside the current month |
-| `border-card-border` | `--card-border` | Range highlight border |
-| `text-foreground` | `--foreground` | Range endpoint label |
+| Token                           | CSS Variable           | Purpose                                   |
+| ------------------------------- | ---------------------- | ----------------------------------------- |
+| `bg-primary`                    | `--primary`            | Selected day background                   |
+| `text-primary-foreground`       | `--primary-foreground` | Selected day text                         |
+| `hover:bg-primary`              | `--primary`            | Navigation button hover background        |
+| `hover:text-primary-foreground` | `--primary-foreground` | Navigation button hover text              |
+| `text-primary`                  | `--primary`            | "Today" button and year/month hover color |
+| `text-disabled`                 | `--disabled`           | Days outside the current month            |
+| `border-card-border`            | `--card-border`        | Range highlight border                    |
+| `text-foreground`               | `--foreground`         | Range endpoint label                      |
 
 ## Examples
 
@@ -62,15 +62,9 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 import { useState } from "react";
 
 function DatePicker() {
-  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
-
-  return (
-    <Calendar
-      date={selectedDate}
-      onChange={setSelectedDate}
-      markToday
-    />
-  );
+    const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+
+    return <Calendar date={selectedDate} onChange={setSelectedDate} markToday />;
 }
 ```
 
@@ -81,17 +75,9 @@ import { useState } from "react";
 import { Calendar, type Range } from "@g4rcez/components/calendar";
 
 function DateRangePicker() {
-  const [range, setRange] = useState<Range>({ from: undefined, to: undefined });
-
-  return (
-    <Calendar
-      range={range}
-      rangeMode
-      markRange
-      onChange={setRange}
-      labelRange={{ from: "Start Date", to: "End Date" }}
-    />
-  );
+    const [range, setRange] = useState<Range>({ from: undefined, to: undefined });
+
+    return <Calendar range={range} rangeMode markRange onChange={setRange} labelRange={{ from: "Start Date", to: "End Date" }} />;
 }
 ```
 
@@ -99,44 +85,40 @@ function DateRangePicker() {
 
 ```tsx
 const isPastDate = (date: Date): boolean => {
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  return date < today;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    return date < today;
 };
 
-<Calendar
-  date={selectedDate}
-  onChange={setSelectedDate}
-  disabledDate={isPastDate}
-/>
+<Calendar date={selectedDate} onChange={setSelectedDate} disabledDate={isPastDate} />;
 ```
 
 ### Booking Calendar with Range Restrictions
 
 ```tsx
 function BookingCalendar() {
-  const [bookingRange, setBookingRange] = useState<Range>({});
-
-  const isDateDisabled = (date: Date): boolean => {
-    const today = new Date();
-    const minDate = new Date(today);
-    minDate.setDate(today.getDate() + 2);
-    const maxDate = new Date(today);
-    maxDate.setDate(today.getDate() + 90);
-    return date < minDate || date > maxDate;
-  };
-
-  return (
-    <Calendar
-      range={bookingRange}
-      rangeMode
-      markRange
-      markToday
-      onChange={setBookingRange}
-      disabledDate={isDateDisabled}
-      labelRange={{ from: "Check-in", to: "Check-out" }}
-    />
-  );
+    const [bookingRange, setBookingRange] = useState<Range>({});
+
+    const isDateDisabled = (date: Date): boolean => {
+        const today = new Date();
+        const minDate = new Date(today);
+        minDate.setDate(today.getDate() + 2);
+        const maxDate = new Date(today);
+        maxDate.setDate(today.getDate() + 90);
+        return date < minDate || date > maxDate;
+    };
+
+    return (
+        <Calendar
+            range={bookingRange}
+            rangeMode
+            markRange
+            markToday
+            onChange={setBookingRange}
+            disabledDate={isDateDisabled}
+            labelRange={{ from: "Check-in", to: "Check-out" }}
+        />
+    );
 }
 ```
 
@@ -146,17 +128,10 @@ function BookingCalendar() {
 import { Calendar, type Locales } from "@g4rcez/components/calendar";
 
 function InternationalCalendar() {
-  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
-  const [locale, setLocale] = useState<Locales>("en");
-
-  return (
-    <Calendar
-      date={selectedDate}
-      onChange={setSelectedDate}
-      locale={locale}
-      markToday
-    />
-  );
+    const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+    const [locale, setLocale] = useState<Locales>("en");
+
+    return <Calendar date={selectedDate} onChange={setSelectedDate} locale={locale} markToday />;
 }
 ```
 
@@ -164,20 +139,11 @@ function InternationalCalendar() {
 
 ```tsx
 function EventDot({ date }: { date: Date }) {
-  const hasEvent = myEvents.some(
-    (e) => e.date.toDateString() === date.toDateString()
-  );
-  return hasEvent ? (
-    <span className="absolute bottom-1 left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary" />
-  ) : null;
+    const hasEvent = myEvents.some((e) => e.date.toDateString() === date.toDateString());
+    return hasEvent ? <span className="absolute bottom-1 left-1/2 -translate-x-1/2 size-1 rounded-full bg-primary" /> : null;
 }
 
-<Calendar
-  date={selectedDate}
-  onChange={setSelectedDate}
-  RenderOnDay={EventDot}
-  markToday
-/>
+<Calendar date={selectedDate} onChange={setSelectedDate} RenderOnDay={EventDot} markToday />;
 ```
 
 ## Do

package/ai/docs/Card.md

@@ -21,40 +21,40 @@ import { Card } from "@g4rcez/components/card";
 
 ### Card
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `React.ReactNode` | — | Renders an automatic header with border separator |
-| `loading` | `boolean` | — | Replaces content with animated skeleton lines |
-| `titleClassName` | `string` | `""` | Additional classes for the title header element |
-| `header` | `React.ReactElement \| null` | `null` | Custom header element; overrides `title` |
-| `container` | `string` | `""` | Additional classes for the outer card element |
-| `as` | `React.ElementType` | `"div"` | Polymorphic root element |
-| `className` | `string` | `""` | Additional classes for the card body element |
-| `children` | `React.ReactNode` | — | Card body content |
+| Prop             | Type                         | Default | Description                                       |
+| ---------------- | ---------------------------- | ------- | ------------------------------------------------- |
+| `title`          | `React.ReactNode`            | —       | Renders an automatic header with border separator |
+| `loading`        | `boolean`                    | —       | Replaces content with animated skeleton lines     |
+| `titleClassName` | `string`                     | `""`    | Additional classes for the title header element   |
+| `header`         | `React.ReactElement \| null` | `null`  | Custom header element; overrides `title`          |
+| `container`      | `string`                     | `""`    | Additional classes for the outer card element     |
+| `as`             | `React.ElementType`          | `"div"` | Polymorphic root element                          |
+| `className`      | `string`                     | `""`    | Additional classes for the card body element      |
+| `children`       | `React.ReactNode`            | —       | Card body content                                 |
 
 ### Card.Title
 
 A composable header with a title and an optional navigation/action area.
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `React.ReactElement \| string` | — | Title content |
-| `titleTag` | `React.ElementType` | `"h2"` | Element type for the title |
-| `navTag` | `React.ElementType` | `"nav"` | Element type for the actions wrapper |
-| `as` | `React.ElementType` | `"div"` | Element type for the container |
-| `children` | `React.ReactNode` | — | Action elements rendered in the navigation area |
+| Prop       | Type                           | Default | Description                                     |
+| ---------- | ------------------------------ | ------- | ----------------------------------------------- |
+| `title`    | `React.ReactElement \| string` | —       | Title content                                   |
+| `titleTag` | `React.ElementType`            | `"h2"`  | Element type for the title                      |
+| `navTag`   | `React.ElementType`            | `"nav"` | Element type for the actions wrapper            |
+| `as`       | `React.ElementType`            | `"div"` | Element type for the container                  |
+| `children` | `React.ReactNode`              | —       | Action elements rendered in the navigation area |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `bg-card-background` | `--card-background` | Card surface color |
-| `border-card-border` | `--card-border` | Card border and title separator |
-| `rounded-card` | `--radius-card` | Corner radius |
-| `shadow-shadow-card` | `--shadow-card` | Card drop shadow |
-| `bg-muted` | `--muted` | Skeleton loading lines |
+| Token                | CSS Variable        | Purpose                         |
+| -------------------- | ------------------- | ------------------------------- |
+| `bg-card-background` | `--card-background` | Card surface color              |
+| `border-card-border` | `--card-border`     | Card border and title separator |
+| `rounded-card`       | `--radius-card`     | Corner radius                   |
+| `shadow-shadow-card` | `--shadow-card`     | Card drop shadow                |
+| `bg-muted`           | `--muted`           | Skeleton loading lines          |
 
 ## Examples
 
@@ -62,7 +62,7 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 
 ```tsx
 <Card>
-  <p>Card content goes here.</p>
+    <p>Card content goes here.</p>
 </Card>
 ```
 
@@ -70,10 +70,10 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 
 ```tsx
 <Card title="User Profile">
-  <div className="space-y-4">
-    <p>Name: John Doe</p>
-    <p>Email: john@example.com</p>
-  </div>
+    <div className="space-y-4">
+        <p>Name: John Doe</p>
+        <p>Email: john@example.com</p>
+    </div>
 </Card>
 ```
 
@@ -81,7 +81,7 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 
 ```tsx
 <Card title="Analytics" loading={isLoading}>
-  <p>Loaded content rendered here when not loading.</p>
+    <p>Loaded content rendered here when not loading.</p>
 </Card>
 ```
 
@@ -91,26 +91,30 @@ Tokens this component reads. Customize by overriding these CSS variables in your
 import { Button } from "@g4rcez/components/button";
 
 <Card>
-  <Card.Title title="Project Overview">
-    <Button theme="primary" size="small">Edit</Button>
-    <Button theme="neutral" size="small">Share</Button>
-  </Card.Title>
-
-  <p>Project description and details.</p>
-</Card>
+    <Card.Title title="Project Overview">
+        <Button theme="primary" size="small">
+            Edit
+        </Button>
+        <Button theme="neutral" size="small">
+            Share
+        </Button>
+    </Card.Title>
+
+    <p>Project description and details.</p>
+</Card>;
 ```
 
 ### Custom Header
 
 ```tsx
 <Card
-  header={
-    <header className="flex justify-between items-center p-4 border-b border-card-border">
-      <h2 className="text-foreground font-semibold">Custom Header</h2>
-    </header>
-  }
+    header={
+        <header className="flex justify-between items-center p-4 border-b border-card-border">
+            <h2 className="text-foreground font-semibold">Custom Header</h2>
+        </header>
+    }
 >
-  <p>Content with a completely custom header.</p>
+    <p>Content with a completely custom header.</p>
 </Card>
 ```
 
@@ -118,17 +122,17 @@ import { Button } from "@g4rcez/components/button";
 
 ```tsx
 <Card title="Dashboard">
-  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-    <Card title="Statistics">
-      <p>Chart content here</p>
-    </Card>
-    <Card title="Recent Activity">
-      <ul>
-        <li>User logged in</li>
-        <li>New order received</li>
-      </ul>
-    </Card>
-  </div>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card title="Statistics">
+            <p>Chart content here</p>
+        </Card>
+        <Card title="Recent Activity">
+            <ul>
+                <li>User logged in</li>
+                <li>New order received</li>
+            </ul>
+        </Card>
+    </div>
 </Card>
 ```
 
@@ -136,7 +140,7 @@ import { Button } from "@g4rcez/components/button";
 
 ```tsx
 <Card as="article" title="Blog Post">
-  <p>Blog post content.</p>
+    <p>Blog post content.</p>
 </Card>
 ```
 

package/ai/docs/Checkbox.md

@@ -19,41 +19,41 @@ import { Checkbox } from "@g4rcez/components/checkbox";
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `checked` | `boolean` | - | Controlled checked state |
-| `onChange` | `(e: React.ChangeEvent<HTMLInputElement>) => void` | - | Change handler |
-| `disabled` | `boolean` | `false` | Disabled state |
-| `loading` | `boolean` | `false` | Loading state — disables the checkbox while loading |
-| `error` | `string` | - | Error message rendered below the label |
-| `asTask` | `boolean` | `false` | Task mode: applies strikethrough to the label when checked |
-| `size` | `"medium" \| "large"` | `"medium"` | Checkbox size |
-| `container` | `string` | - | Extra CSS classes for the outer `<label>` wrapper |
-| `labelClassName` | `string` | - | Extra CSS classes for the error text element |
-| `className` | `string` | - | Extra CSS classes for the `<input>` element |
-| `children` | `React.ReactNode` | - | Label content |
-| `...props` | `React.InputHTMLAttributes<HTMLInputElement>` | - | All standard input attributes |
+| Prop             | Type                                               | Default    | Description                                                |
+| ---------------- | -------------------------------------------------- | ---------- | ---------------------------------------------------------- |
+| `checked`        | `boolean`                                          | -          | Controlled checked state                                   |
+| `onChange`       | `(e: React.ChangeEvent<HTMLInputElement>) => void` | -          | Change handler                                             |
+| `disabled`       | `boolean`                                          | `false`    | Disabled state                                             |
+| `loading`        | `boolean`                                          | `false`    | Loading state — disables the checkbox while loading        |
+| `error`          | `string`                                           | -          | Error message rendered below the label                     |
+| `asTask`         | `boolean`                                          | `false`    | Task mode: applies strikethrough to the label when checked |
+| `size`           | `"medium" \| "large"`                              | `"medium"` | Checkbox size                                              |
+| `container`      | `string`                                           | -          | Extra CSS classes for the outer `<label>` wrapper          |
+| `labelClassName` | `string`                                           | -          | Extra CSS classes for the error text element               |
+| `className`      | `string`                                           | -          | Extra CSS classes for the `<input>` element                |
+| `children`       | `React.ReactNode`                                  | -          | Label content                                              |
+| `...props`       | `React.InputHTMLAttributes<HTMLInputElement>`      | -          | All standard input attributes                              |
 
 ## Design Tokens
 
 Tokens this component reads. Customize by overriding these CSS variables in your theme.
 
-| Token | CSS Variable | Purpose |
-|-------|-------------|---------|
-| `text-primary` | `--primary` | Checkbox accent / checked color |
-| `border-card-border` | `--card-border` | Unchecked border color |
-| `text-danger` | `--danger` | Error message text color |
-| `text-disabled` | `--disabled` | Opacity and cursor on disabled state |
-| `focus:ring-primary` | `--primary` | Focus ring color |
+| Token                | CSS Variable    | Purpose                              |
+| -------------------- | --------------- | ------------------------------------ |
+| `text-primary`       | `--primary`     | Checkbox accent / checked color      |
+| `border-card-border` | `--card-border` | Unchecked border color               |
+| `text-danger`        | `--danger`      | Error message text color             |
+| `text-disabled`      | `--disabled`    | Opacity and cursor on disabled state |
+| `focus:ring-primary` | `--primary`     | Focus ring color                     |
 
 ## Variants
 
 ### Size
 
-| Value | Description |
-|-------|-------------|
+| Value      | Description                           |
+| ---------- | ------------------------------------- |
 | `"medium"` | Default size — 1rem × 1rem (`size-4`) |
-| `"large"` | Larger touch target |
+| `"large"`  | Larger touch target                   |
 
 ### Task mode
 
@@ -66,12 +66,9 @@ When `asTask={true}`, the label text receives a strikethrough style when the che
 ```tsx
 const [accepted, setAccepted] = useState(false);
 
-<Checkbox
-  checked={accepted}
-  onChange={(e) => setAccepted(e.target.checked)}
->
-  I accept the terms and conditions
-</Checkbox>
+<Checkbox checked={accepted} onChange={(e) => setAccepted(e.target.checked)}>
+    I accept the terms and conditions
+</Checkbox>;
 ```
 
 ### Checkbox with error
@@ -81,41 +78,37 @@ const [agreed, setAgreed] = useState(false);
 const [error, setError] = useState("");
 
 <Checkbox
-  checked={agreed}
-  onChange={(e) => {
-    setAgreed(e.target.checked);
-    if (e.target.checked) setError("");
-  }}
-  error={error}
+    checked={agreed}
+    onChange={(e) => {
+        setAgreed(e.target.checked);
+        if (e.target.checked) setError("");
+    }}
+    error={error}
 >
-  I agree to the privacy policy
-</Checkbox>
+    I agree to the privacy policy
+</Checkbox>;
 ```
 
 ### Task list
 
 ```tsx
 const [tasks, setTasks] = useState([
-  { id: 1, text: "Write release notes", done: false },
-  { id: 2, text: "Merge pull request", done: true },
+    { id: 1, text: "Write release notes", done: false },
+    { id: 2, text: "Merge pull request", done: true },
 ]);
 
 <div className="flex flex-col gap-sm">
-  {tasks.map((task) => (
-    <Checkbox
-      key={task.id}
-      checked={task.done}
-      onChange={() =>
-        setTasks((prev) =>
-          prev.map((t) => (t.id === task.id ? { ...t, done: !t.done } : t))
-        )
-      }
-      asTask
-    >
-      {task.text}
-    </Checkbox>
-  ))}
-</div>
+    {tasks.map((task) => (
+        <Checkbox
+            key={task.id}
+            checked={task.done}
+            onChange={() => setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, done: !t.done } : t)))}
+            asTask
+        >
+            {task.text}
+        </Checkbox>
+    ))}
+</div>;
 ```
 
 ### Loading state
@@ -125,41 +118,43 @@ const [loading, setLoading] = useState(false);
 const [subscribed, setSubscribed] = useState(false);
 
 const handleChange = async (checked: boolean) => {
-  setLoading(true);
-  await updateSubscription(checked);
-  setSubscribed(checked);
-  setLoading(false);
+    setLoading(true);
+    await updateSubscription(checked);
+    setSubscribed(checked);
+    setLoading(false);
 };
 
-<Checkbox
-  checked={subscribed}
-  onChange={(e) => handleChange(e.target.checked)}
-  loading={loading}
->
-  Subscribe to newsletter
-</Checkbox>
+<Checkbox checked={subscribed} onChange={(e) => handleChange(e.target.checked)} loading={loading}>
+    Subscribe to newsletter
+</Checkbox>;
 ```
 
 ### Notification preferences form
 
 ```tsx
 function PreferencesForm() {
-  const [prefs, setPrefs] = useState({
-    email: false,
-    push: true,
-    sms: false,
-  });
-
-  const toggle = (key: keyof typeof prefs) => (e: React.ChangeEvent<HTMLInputElement>) =>
-    setPrefs((prev) => ({ ...prev, [key]: e.target.checked }));
-
-  return (
-    <form className="flex flex-col gap-sm">
-      <Checkbox checked={prefs.email} onChange={toggle("email")}>Email notifications</Checkbox>
-      <Checkbox checked={prefs.push} onChange={toggle("push")}>Push notifications</Checkbox>
-      <Checkbox checked={prefs.sms} onChange={toggle("sms")}>SMS notifications</Checkbox>
-    </form>
-  );
+    const [prefs, setPrefs] = useState({
+        email: false,
+        push: true,
+        sms: false,
+    });
+
+    const toggle = (key: keyof typeof prefs) => (e: React.ChangeEvent<HTMLInputElement>) =>
+        setPrefs((prev) => ({ ...prev, [key]: e.target.checked }));
+
+    return (
+        <form className="flex flex-col gap-sm">
+            <Checkbox checked={prefs.email} onChange={toggle("email")}>
+                Email notifications
+            </Checkbox>
+            <Checkbox checked={prefs.push} onChange={toggle("push")}>
+                Push notifications
+            </Checkbox>
+            <Checkbox checked={prefs.sms} onChange={toggle("sms")}>
+                SMS notifications
+            </Checkbox>
+        </form>
+    );
 }
 ```