@primitiv-ui/react 0.1.37 → 0.1.39

package/src/Checkbox/Checkbox.tsx

@@ -1,217 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import type { ReactElement } from "react";
-
-import { Slot, composeRefs } from "../Slot/index.ts";
-
-import { CheckboxContext } from "./CheckboxContext";
-import { useCheckboxContext, useCheckboxInput } from "./hooks/index.ts";
-import {
-  CheckboxIndicatorProps,
-  CheckboxRootProps,
-  CheckedState,
-} from "./types";
-
-function dataStateOf(checked: CheckedState) {
-  if (checked === "indeterminate") return "indeterminate" as const;
-  return checked ? ("checked" as const) : ("unchecked" as const);
-}
-
-/**
- * The root of a Checkbox — a `<label>` that is itself the **visible, styled
- * box** and wraps a **real, visually-hidden `<input type="checkbox">`** (the
- * focusable, form-participating control) plus the decorative
- * {@link CheckboxIndicator | `Checkbox.Indicator`} mark. It provides
- * {@link CheckboxContext | `CheckboxContext`} to the indicator.
- *
- * Because the underlying element is a genuine native checkbox, it behaves like
- * one: it submits its `value` under `name` with an enclosing form, resets with
- * the form, and gets keyboard activation and focus for free. The tri-state
- * `"indeterminate"` is the platform's own: it is applied via the input's
- * `.indeterminate` DOM property, so the browser exposes `aria-checked="mixed"`
- * and the `:indeterminate` pseudo-class for styling.
- *
- * Props routing: `className` / `style` style the **box** (the `<label>` you
- * see — the input is hidden); every other prop (`name`, `value`, `id`,
- * `aria-*`, `required`, `disabled`, `ref`, ...) spreads onto the input, because
- * semantically the Root *is* the checkbox.
- *
- * Supports two state modes, statically discriminated at the type level:
- *
- * - **Uncontrolled** — pass
- *   {@link CheckboxRootProps.defaultChecked | `defaultChecked`} (or omit). It
- *   may be `"indeterminate"` for a mixed-on-mount checkbox.
- * - **Controlled** — pass
- *   {@link CheckboxRootProps.checked | `checked`} *and*
- *   {@link CheckboxRootProps.onCheckedChange | `onCheckedChange`} together.
- *   Clicking a mixed checkbox resolves it to `true`.
- *
- * **Styling hooks.** `data-state="checked" | "unchecked" | "indeterminate"`
- * and `data-disabled=""` on the box (and `data-state` on the indicator). These
- * mirror the input, but shipped CSS keys the mark off the input's native
- * `:checked` / `:indeterminate` instead; `data-state` is a convenience mirror.
- *
- * @extends HTMLInputElement
- *
- * @example Uncontrolled
- * ```tsx
- * <Checkbox.Root name="terms" value="accepted" defaultChecked aria-label="Accept terms">
- *   <Checkbox.Indicator />
- * </Checkbox.Root>
- * ```
- *
- * @example Controlled tri-state
- * ```tsx
- * const [checked, setChecked] = useState<CheckedState>("indeterminate");
- *
- * <Checkbox.Root checked={checked} onCheckedChange={setChecked} aria-label="...">
- *   <Checkbox.Indicator />
- * </Checkbox.Root>
- * ```
- */
-export function CheckboxRoot(props: CheckboxRootProps): ReactElement {
-  const {
-    className,
-    style,
-    children,
-    defaultChecked,
-    checked,
-    onCheckedChange,
-    onChange,
-    disabled,
-    ref,
-    ...inputRest
-  } = props;
-  const {
-    checked: value,
-    handleChange,
-    inputStateProps,
-  } = useCheckboxInput({ defaultChecked, checked, onCheckedChange, onChange });
-
-  // `indeterminate` is a DOM property with no JSX attribute, so it is applied
-  // imperatively whenever the resolved tri-state value changes. The input is
-  // rendered unconditionally, so the ref is always set here.
-  const inputRef = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    inputRef.current!.indeterminate = value === "indeterminate";
-  }, [value]);
-  const composedRef = ref ? composeRefs(inputRef, ref) : inputRef;
-
-  const contextValue = useMemo(
-    () => ({ checked: value, disabled: Boolean(disabled) }),
-    [value, disabled],
-  );
-  return (
-    <CheckboxContext.Provider value={contextValue}>
-      <label
-        className={className}
-        style={style}
-        data-state={dataStateOf(value)}
-        data-disabled={disabled ? "" : undefined}
-      >
-        <input
-          type="checkbox"
-          ref={composedRef}
-          disabled={disabled}
-          {...inputRest}
-          {...inputStateProps}
-          onChange={handleChange}
-        />
-        {children}
-      </label>
-    </CheckboxContext.Provider>
-  );
-}
-
-// Runtime-dead: the compound alias below (same object via Object.assign)
-// overwrites this to "Checkbox" at load, so the value is never observable. The
-// assignment stays because it declares `displayName` on `typeof CheckboxRoot`,
-// which TCheckboxCompound extends.
-// Stryker disable next-line StringLiteral: overwritten by the compound alias — an equivalent mutant.
-CheckboxRoot.displayName = "CheckboxRoot";
-
-/**
- * The decorative mark — a `<span>` that is **always mounted**, sitting inside
- * the {@link CheckboxRoot | `Checkbox.Root`} box. Its visibility and shape (a
- * tick when checked, a bar when indeterminate) are a pure CSS concern, revealed
- * off the input's native `:checked` / `:indeterminate` state. The checkbox's
- * accessible state is conveyed by the native input, so the mark is purely
- * visual.
- *
- * **Styling hook.** Mirrors the root's
- * `data-state="checked" | "unchecked" | "indeterminate"`.
- *
- * **`asChild` prop.** Pass `asChild` to render the consumer's own element
- * (typically an `<svg>` tick) as the indicator itself, with `data-state`
- * merged onto that element rather than a wrapper.
- *
- * @extends HTMLSpanElement
- *
- * @example Icon as the indicator via `asChild`
- * ```tsx
- * <Checkbox.Indicator asChild>
- *   <svg viewBox="0 0 10 10"><path d="M1 5l3 3 5-7" /></svg>
- * </Checkbox.Indicator>
- * ```
- *
- * @throws if rendered outside a `Checkbox.Root`.
- */
-export function CheckboxIndicator({
-  children,
-  asChild = false,
-  ...rest
-}: CheckboxIndicatorProps): ReactElement {
-  const { checked } = useCheckboxContext();
-  const indicatorProps = {
-    ...rest,
-    "aria-hidden": "true" as const,
-    "data-state": dataStateOf(checked),
-  };
-  if (asChild) {
-    return <Slot {...indicatorProps}>{children}</Slot>;
-  }
-  return <span {...indicatorProps}>{children}</span>;
-}
-
-/** @internal */
-CheckboxIndicator.displayName = "CheckboxIndicator";
-
-/** Type of the {@link Checkbox} compound: the root callable plus its attached sub-components. */
-export type TCheckboxCompound = typeof CheckboxRoot & {
-  Root: typeof CheckboxRoot;
-  Indicator: typeof CheckboxIndicator;
-};
-
-/**
- * Headless, accessible **Checkbox** — a compound component built on a **real,
- * visually-hidden native `<input type="checkbox">`**, including the platform's
- * own tri-state (`indeterminate` → `aria-checked="mixed"`). Unlike a button
- * dressed up with `role="checkbox"`, it participates in native forms. Zero
- * styles ship.
- *
- * `Checkbox` is both callable (an alias of
- * {@link CheckboxRoot | `Checkbox.Root`}) and carries its sub-components as
- * static properties.
- *
- * - {@link CheckboxRoot | `Checkbox.Root`} — the styled box: label + hidden input, state owner, context provider.
- * - {@link CheckboxIndicator | `Checkbox.Indicator`} — the decorative mark.
- *
- * @example Minimal usage
- * ```tsx
- * import { Checkbox } from "@primitiv-ui/react";
- *
- * <Checkbox.Root name="terms" value="accepted" aria-label="Accept terms">
- *   <Checkbox.Indicator />
- * </Checkbox.Root>;
- * ```
- *
- * @see {@link CheckboxRoot} for state modes and tri-state semantics.
- */
-const CheckboxCompound: TCheckboxCompound = Object.assign(CheckboxRoot, {
-  Root: CheckboxRoot,
-  Indicator: CheckboxIndicator,
-});
-
-/** @internal */
-CheckboxCompound.displayName = "Checkbox";
-
-export { CheckboxCompound as Checkbox };

package/src/Checkbox/CheckboxContext.ts

@@ -1,20 +0,0 @@
-import { createStrictContext } from "../utils/index.ts";
-
-import { CheckedState } from "./types";
-
-export type CheckboxContextValue = {
-  /**
-   * Best-effort mirror of the input's tri-state value, for the `data-state`
-   * hook on the indicator. The shipped CSS reveals the mark off the input's
-   * native `:checked` / `:indeterminate` instead, so it stays correct through
-   * a form reset; `data-state` is a convenience mirror.
-   */
-  checked: CheckedState;
-  /** Whether the checkbox is disabled, for the `data-disabled` hook. */
-  disabled: boolean;
-};
-
-export const [CheckboxContext, useCheckboxContext] =
-  createStrictContext<CheckboxContextValue>(
-    "Checkbox sub-components must be rendered inside a <Checkbox.Root>.",
-  );

package/src/Checkbox/README.md

@@ -1,137 +0,0 @@
-# Checkbox
-
-A headless, accessible Checkbox built on a **real native
-`<input type="checkbox">`**, including the platform's own tri-state
-("mixed") variant.
-
-Checkbox renders a `<label>` that is the visible box, wrapping a
-visually-hidden native `<input type="checkbox">` (the focusable,
-form-participating control) and a decorative `Indicator` mark. Because the
-underlying element is a genuine native checkbox, it submits its `value`
-under `name` with an enclosing form, resets with the form, and gets keyboard
-activation and focus for free. The `"indeterminate"` state is the
-platform's: it is applied via the input's `.indeterminate` DOM property, so
-the browser exposes `aria-checked="mixed"` and the `:indeterminate`
-pseudo-class for styling.
-
-```tsx
-import { Checkbox } from "@primitiv-ui/react";
-
-<Checkbox.Root name="terms" value="accepted" defaultChecked aria-label="Accept terms">
-  <Checkbox.Indicator />
-</Checkbox.Root>;
-```
-
-## Sub-components
-
-| Export               | Element                          | Notes                                                                                       |
-| -------------------- | -------------------------------- | ------------------------------------------------------------------------------------------- |
-| `Checkbox.Root`      | `<label>` + hidden `<input>`     | The styled box. `data-state`, `data-disabled` on the label; `name`/`value`/`aria-*`/`ref` go to the input. |
-| `Checkbox.Indicator` | `<span>`                         | `aria-hidden="true"`. Always mounted; CSS reveals it. `asChild`                             |
-
-`Checkbox.Root`'s `className` / `style` style the **box** (the `<label>` you
-see). Every other prop spreads onto the hidden `<input>`, because semantically
-the Root *is* the checkbox: pass `name`, `value`, `id`, `required`, `aria-*`,
-`ref`, etc. straight to `Checkbox.Root`.
-
-## Checked state
-
-Checkbox is tri-state. The `checked` / `defaultChecked` value is
-`boolean | "indeterminate"`:
-
-| Value             | Native           | `data-state`      | Mark visible? |
-| ----------------- | ---------------- | ----------------- | ------------- |
-| `true`            | `:checked`       | `"checked"`       | Yes (tick)    |
-| `false`           | —                | `"unchecked"`     | No            |
-| `"indeterminate"` | `:indeterminate` | `"indeterminate"` | Yes (bar)     |
-
-Clicking an indeterminate checkbox resolves it to `true` per the WAI-ARIA
-tri-state convention (the native default); subsequent clicks flip between
-`true` and `false`.
-
-## State modes
-
-- **Uncontrolled** — pass `defaultChecked` (or omit for unchecked on mount).
-  It may be `"indeterminate"`.
-- **Controlled** — pass `checked` **and** `onCheckedChange` together.
-
-The two shapes are statically discriminated at the type level; TypeScript
-rejects mixing them.
-
-```tsx
-// Uncontrolled
-<Checkbox.Root name="terms" value="accepted" defaultChecked>
-  <Checkbox.Indicator />
-</Checkbox.Root>;
-
-// Controlled
-const [checked, setChecked] = useState<CheckedState>(false);
-<Checkbox.Root checked={checked} onCheckedChange={setChecked}>
-  <Checkbox.Indicator />
-</Checkbox.Root>;
-```
-
-> **`data-state` is a best-effort mirror.** Drive the *visual* checked look off
-> the input's native `:checked` / `:indeterminate` (and `:has(> input:checked)`
-> on the box), as the shipped registry stylesheet does — it stays correct
-> through a form reset, which fires no React event.
-
-## Keyboard interaction
-
-| Key     | Behaviour                                    |
-| ------- | -------------------------------------------- |
-| `Space` | Toggles the focused checkbox (native input)  |
-| `Tab`   | Moves to / from the checkbox (native)        |
-
-Keyboard handling comes from the underlying native input — no custom `keydown`
-listeners are needed.
-
-## Disabled
-
-Passing `disabled` forwards the native `disabled` attribute to the input
-(removing it from the tab order and suppressing clicks) **and** sets
-`data-disabled=""` on the box so CSS can target `[data-disabled]` without
-reaching for `:disabled`.
-
-```tsx
-<Checkbox.Root disabled aria-label="Locked setting">
-  <Checkbox.Indicator />
-</Checkbox.Root>
-```
-
-## `asChild` composition
-
-`Checkbox.Indicator` accepts an `asChild` boolean. When set, the component
-delegates rendering to its single child element and merges its `aria-hidden`,
-`data-state`, and ref onto the child — typically an `<svg>` tick:
-
-```tsx
-<Checkbox.Indicator asChild>
-  <svg viewBox="0 0 10 10">
-    <path d="M1 5l3 3 5-7" />
-  </svg>
-</Checkbox.Indicator>
-```
-
-## Styling hooks
-
-- The box (`Checkbox.Root`) carries
-  `data-state="checked" | "unchecked" | "indeterminate"` and `data-disabled=""`.
-- The hidden input exposes the always-correct native states: `:checked`,
-  `:indeterminate`, `:focus-visible`, `:disabled`. Prefer these for the *marked*
-  look.
-
-```css
-.checkbox:has(> input:checked),
-.checkbox:has(> input:indeterminate) {
-  background: oklch(65% 0.18 145);
-}
-.checkbox > input:checked ~ .checkbox__indicator,
-.checkbox > input:indeterminate ~ .checkbox__indicator {
-  scale: 1;
-}
-.checkbox[data-disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-```

package/src/Checkbox/__tests__/Checkbox.basic-rendering.test.tsx

@@ -1,93 +0,0 @@
-import { createRef } from "react";
-import { render, screen } from "@testing-library/react";
-
-import { Checkbox } from "../Checkbox";
-
-describe("Checkbox basic rendering", () => {
-  it("renders a real native <input type=checkbox> as the control", () => {
-    // Arrange & Act
-    render(<Checkbox.Root aria-label="Accept terms" />);
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-
-    // Assert
-    expect(checkbox.tagName).toBe("INPUT");
-    expect(checkbox).toHaveAttribute("type", "checkbox");
-  });
-
-  it("wraps the input in a <label> so the visible box is clickable", () => {
-    // Arrange & Act
-    render(<Checkbox.Root aria-label="Accept terms" />);
-
-    // Assert
-    expect(
-      screen.getByRole("checkbox", { name: "Accept terms" }).closest("label"),
-    ).not.toBeNull();
-  });
-
-  it("is unchecked by default", () => {
-    // Arrange & Act
-    render(<Checkbox.Root aria-label="Accept terms" />);
-
-    // Assert
-    expect(screen.getByRole("checkbox", { name: "Accept terms" })).not.toBeChecked();
-  });
-
-  it("forwards native input attributes (name, value, id) to the input", () => {
-    // Arrange & Act
-    render(
-      <Checkbox.Root id="c1" name="terms" value="accepted" aria-label="Accept terms" />,
-    );
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-
-    // Assert
-    expect(checkbox).toHaveAttribute("id", "c1");
-    expect(checkbox).toHaveAttribute("name", "terms");
-    expect(checkbox).toHaveAttribute("value", "accepted");
-  });
-
-  it("applies className to the box, not the hidden input", () => {
-    // Arrange & Act
-    render(<Checkbox.Root className="box" aria-label="Accept terms" />);
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-
-    // Assert
-    expect(checkbox).not.toHaveClass("box");
-    expect(checkbox.closest("label")).toHaveClass("box");
-  });
-
-  it("forwards a ref to the underlying input", () => {
-    // Arrange
-    const ref = createRef<HTMLInputElement>();
-
-    // Act
-    render(<Checkbox.Root ref={ref} aria-label="Accept terms" />);
-
-    // Assert
-    expect(ref.current).toBe(screen.getByRole("checkbox", { name: "Accept terms" }));
-  });
-
-  it('sets data-state="unchecked" on the box when unchecked', () => {
-    // Arrange & Act
-    const { container } = render(<Checkbox.Root aria-label="Accept terms" />);
-
-    // Assert
-    expect(container.querySelector("label")).toHaveAttribute(
-      "data-state",
-      "unchecked",
-    );
-  });
-
-  it("sets a displayName on the compound and the Indicator", () => {
-    // Assert — empty displayNames would render each as anonymous in DevTools.
-    // Root aliases the compound (Object.assign), so its name is "Checkbox".
-    expect(Checkbox.displayName).toBe("Checkbox");
-    expect(Checkbox.Indicator.displayName).toBe("CheckboxIndicator");
-  });
-
-  it("throws a helpful error when a sub-component renders outside Checkbox.Root", () => {
-    // Assert — the strict-context guard names the required parent.
-    expect(() => render(<Checkbox.Indicator />)).toThrow(
-      "Checkbox sub-components must be rendered inside a <Checkbox.Root>.",
-    );
-  });
-});

package/src/Checkbox/__tests__/Checkbox.contract.test.tsx

@@ -1,106 +0,0 @@
-import { readFileSync } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { dirname, resolve } from "node:path";
-
-import { render } from "@testing-library/react";
-
-import { Checkbox } from "../Checkbox";
-import { CheckedState } from "../types";
-
-/**
- * Auto-verification of the Checkbox styling contract (RFC 0004 §3.4 / D15). The
- * `data-*` half of `registry/components/checkbox/contract.json` is *derived from
- * and asserted against the rendered headless component* so it can never drift
- * from what the component actually emits. The checkbox's `data-*` surface lives
- * on the **wrapper box** (the styled root) — `data-state="checked" |
- * "unchecked" | "indeterminate"` (always present) plus `data-disabled=""` when
- * disabled. The authored half (classes, parts, custom properties) is a styling
- * convention the headless layer does not emit and is checked by the generator
- * drift-guards instead.
- */
-const contractPath = resolve(
-  dirname(fileURLToPath(import.meta.url)),
-  "../../../../../registry/components/checkbox/contract.json",
-);
-
-const contract = JSON.parse(readFileSync(contractPath, "utf8"));
-
-/** The wrapper element is the contracted styling root. */
-function rootOf(container: HTMLElement): HTMLElement {
-  const root = container.querySelector("label");
-  if (!root) throw new Error("expected a Checkbox wrapper element");
-  return root;
-}
-
-/** Every `data-*` attribute name present on an element. */
-function dataAttributeNames(element: Element): string[] {
-  return [...element.attributes]
-    .map((attribute) => attribute.name)
-    .filter((name) => name.startsWith("data-"))
-    .sort();
-}
-
-describe("Checkbox styling contract", () => {
-  const autoAttributes = contract.dataAttributes.filter(
-    (attribute: { source: string }) => attribute.source === "auto",
-  );
-
-  it("declares every data-* attribute as auto-verified against the component", () => {
-    expect(autoAttributes).toHaveLength(contract.dataAttributes.length);
-  });
-
-  it("emits exactly the contracted data-* attribute names across its states", () => {
-    const emitted = new Set<string>();
-    for (const ui of [
-      <Checkbox.Root key="checked" checked onCheckedChange={() => {}} aria-label="x" />,
-      <Checkbox.Root
-        key="indeterminate"
-        checked="indeterminate"
-        onCheckedChange={() => {}}
-        aria-label="x"
-      />,
-      <Checkbox.Root key="disabled" disabled aria-label="x" />,
-    ]) {
-      const { container, unmount } = render(ui);
-      for (const name of dataAttributeNames(rootOf(container))) {
-        emitted.add(name);
-      }
-      unmount();
-    }
-
-    const contracted = new Set(
-      autoAttributes.map((attribute: { name: string }) => attribute.name),
-    );
-    expect([...emitted].sort()).toEqual([...contracted].sort());
-  });
-
-  it("emits data-state with the documented value for each state", () => {
-    const stateEntries = autoAttributes.filter(
-      (attribute: { name: string }) => attribute.name === "data-state",
-    );
-
-    for (const entry of stateEntries) {
-      const checked: CheckedState =
-        entry.value === "indeterminate" ? "indeterminate" : entry.value === "checked";
-      const { container, unmount } = render(
-        <Checkbox.Root checked={checked} onCheckedChange={() => {}} aria-label="x" />,
-      );
-      expect(rootOf(container)).toHaveAttribute("data-state", entry.value);
-      unmount();
-    }
-  });
-
-  it("emits data-disabled exactly as the contract documents it", () => {
-    const entry = autoAttributes.find(
-      (attribute: { name: string }) => attribute.name === "data-disabled",
-    );
-
-    const { container } = render(<Checkbox.Root disabled aria-label="x" />);
-    expect(rootOf(container)).toHaveAttribute(entry.name, entry.value);
-  });
-
-  it("omits data-disabled when the documented condition does not hold", () => {
-    const { container } = render(<Checkbox.Root aria-label="x" />);
-    expect(rootOf(container)).not.toHaveAttribute("data-disabled");
-  });
-});

package/src/Checkbox/__tests__/Checkbox.controlled-state.test.tsx

@@ -1,74 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useState } from "react";
-
-import { Checkbox } from "../Checkbox";
-
-describe("Checkbox controlled state", () => {
-  it("reflects the controlled `checked` prop", () => {
-    // Arrange & Act
-    const { container, rerender } = render(
-      <Checkbox.Root checked={false} onCheckedChange={() => {}} aria-label="Accept terms" />,
-    );
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-    expect(checkbox).not.toBeChecked();
-
-    rerender(
-      <Checkbox.Root checked onCheckedChange={() => {}} aria-label="Accept terms" />,
-    );
-
-    // Assert
-    expect(checkbox).toBeChecked();
-    expect(container.querySelector("label")).toHaveAttribute(
-      "data-state",
-      "checked",
-    );
-  });
-
-  it("does not update its rendered state when the parent refuses to update `checked`", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onCheckedChange = vi.fn();
-    render(
-      <Checkbox.Root
-        checked={false}
-        onCheckedChange={onCheckedChange}
-        aria-label="Accept terms"
-      />,
-    );
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-
-    // Act
-    await user.click(checkbox);
-
-    // Assert: callback fired but the rendered state stays unchecked.
-    expect(onCheckedChange).toHaveBeenCalledWith(true);
-    expect(checkbox).not.toBeChecked();
-  });
-
-  it("lets a parent drive the value end to end", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    function Harness() {
-      // Start true so the pre-click state is only correct if the controlled
-      // prop is honoured (a broken impl would fall back to unchecked).
-      const [checked, setChecked] = useState(true);
-      return (
-        <Checkbox.Root
-          checked={checked}
-          onCheckedChange={setChecked}
-          aria-label="Accept terms"
-        />
-      );
-    }
-    render(<Harness />);
-    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
-    expect(checkbox).toBeChecked();
-
-    // Act & Assert
-    await user.click(checkbox);
-    expect(checkbox).not.toBeChecked();
-    await user.click(checkbox);
-    expect(checkbox).toBeChecked();
-  });
-});